1import { updateClientSeoGraph } from '../components/SeoSchema.js?v=20260924_v23'; 2import { renderFaqModule, bindFaqEvents } from '../components/FaqModule.js?v=20260924_v23'; 3import { HOME_TOOLS_LIST, HOME_FAQS, HOME_META } from '../config/homeData.js?v=20260924_v23'; 4 5function setMetaTags(title, description) { 6 document.title = title; 7 8 const setMeta = (name, val, isProp = false) => { 9 const attrName = isProp ? 'property' : 'name'; 10 let el = document.querySelector(`meta[${attrName}="${name}"]`); 11 if (!el) { 12 el = document.createElement('meta'); 13 el.setAttribute(attrName, name); 14 el.className = 'dynamic-seo-meta'; 15 document.head.appendChild(el); 16 } 17 el.content = val; 18 }; 19 20 setMeta('description', description); 21 setMeta('og:title', title, true); 22 setMeta('og:description', description, true); 23 setMeta('og:type', 'website', true); 24 setMeta('og:url', window.location.href, true); 25 setMeta('og:image', `${window.location.origin}/logo.png`, true); 26 setMeta('twitter:card', 'summary_large_image'); 27 setMeta('twitter:title', title); 28 setMeta('twitter:description', description); 29 setMeta('twitter:image', `${window.location.origin}/logo.png`); 30 31 setMeta('content-language', 'en-US'); 32 setMeta('geo.region', 'US'); 33 setMeta('geo.position', '37.09024;-95.712891'); 34 setMeta('ICBM', '37.09024, -95.712891'); 35 36 const cleanUrl = window.location.origin + window.location.pathname; 37 38 const linkEnUs = document.createElement('link'); 39 linkEnUs.rel = 'alternate'; 40 linkEnUs.hreflang = 'en-US'; 41 linkEnUs.className = 'dynamic-seo-meta'; 42 linkEnUs.href = cleanUrl; 43 document.head.appendChild(linkEnUs); 44 45 const linkDefault = document.createElement('link'); 46 linkDefault.rel = 'alternate'; 47 linkDefault.hreflang = 'x-default'; 48 linkDefault.className = 'dynamic-seo-meta'; 49 linkDefault.href = cleanUrl; 50 document.head.appendChild(linkDefault); 51} 52 53function setJsonLdSchema(schema) { 54 updateClientSeoGraph(schema); 55} 56 57export function renderHome(user, onNavigate) { 58 setMetaTags( 59 HOME_META.title, 60 HOME_META.description 61 ); 62 63 const schema = { 64 "@context": "https://schema.org", 65 "@graph": [ 66 { 67 "@type": "WebSite", 68 "@id": `${window.location.origin}/#website`, 69 "url": `${window.location.origin}/`, 70 "name": "eWith.me", 71 "description": "Platform for Learning, Careers & Education", 72 "publisher": { 73 "@id": `${window.location.origin}/#organization` 74 } 75 }, 76 { 77 "@type": "Organization", 78 "@id": `${window.location.origin}/#organization`, 79 "name": "eWith.me", 80 "url": `${window.location.origin}/`, 81 "logo": `${window.location.origin}/logo.png`, 82 "sameAs": [] 83 }, 84 { 85 "@type": "WebPage", 86 "@id": `${window.location.origin}/#webpage`, 87 "url": `${window.location.origin}/`, 88 "name": "Free Education & Career Platform | eWith.me", 89 "description": "Private by design. No sign-up. Nothing stored. Instant results â no uploading, no waiting. Access 70+ writing tools, ATS resume intelligence, 2,300+ college rankings, and exam prep.", 90 "isPartOf": { 91 "@id": `${window.location.origin}/#website` 92 } 93 }, 94 { 95 "@type": "ItemList", 96 "@id": `${window.location.origin}/#featured-tools`, 97 "name": "Featured Platform Tools & Services", 98 "itemListElement": [ 99 { "@type": "ListItem", "position": 1, "name": "AI Paraphrasing Tool", "url": `${window.location.origin}/paraphrasing-tool` }, 100 { "@type": "ListItem", "position": 2, "name": "AI Humanizer", "url": `${window.location.origin}/ai-humanizer` }, 101 { "@type": "ListItem", "position": 3, "name": "ATS Resume Evaluator", "url": `${window.location.origin}/ats-resume-evaluator-free` }, 102 { "@type": "ListItem", "position": 4, "name": "Top Engineering College Rankings", "url": `${window.location.origin}/colleges/engineering` }, 103 { "@type": "ListItem", "position": 5, "name": "Top MBA Business Sc
103hool Rankings", "url": `${window.location.origin}/colleges/mba` }, 104 { "@type": "ListItem", "position": 6, "name": "Global College Rankings Directory", "url": `${window.location.origin}/colleges` }, 105 { "@type": "ListItem", "position": 7, "name": "Exam Preparation Flashcards", "url": `${window.location.origin}/exams` }, 106 { "@type": "ListItem", "position": 8, "name": "AI Text Summarizer", "url": `${window.location.origin}/summarizer` }, 107 { "@type": "ListItem", "position": 9, "name": "AI Grammar Checker", "url": `${window.location.origin}/grammar-checker` } 108 ] 109 }, 110 { 111 "@type": "FAQPage", 112 "@id": `${window.location.origin}/#faq`, 113 "mainEntity": [ 114 { 115 "@type": "Question", 116 "name": "Is eWith.me free to use?", 117 "acceptedAnswer": { 118 "@type": "Answer", 119 "text": "Yes, 100% free. All public writing tools, resume matchers, flashcards, and college rankings require no payment or subscription." 120 } 121 }, 122 { 123 "@type": "Question", 124 "name": "Do I need an account to use the tools?", 125 "acceptedAnswer": { 126 "@type": "Answer", 127 "text": "No. Use it privately â no account needed, no data retained. (Note: Only our job application tool requires a quick sign-up to verify applicants and prevent spam for employers, and accounts can be permanently destroyed anytime.)" 128 } 129 }, 130 { 131 "@type": "Question", 132 "name": "How is my data protected?", 133 "acceptedAnswer": { 134 "@type": "Answer", 135 "text": "Private by design. No sign-up is needed, nothing is stored, and no files are uploaded to a server for processing. We use anonymous, aggregate analytics to improve this site â never to track individuals." 136 } 137 }, 138 { 139 "@type": "Question", 140 "name": "Do recruiters see my resume or profile?", 141 "acceptedAnswer": { 142 "@type": "Answer", 143 "text": "Only if you explicitly choose to apply to job postings. Your default experience across all tools is completely private." 144 } 145 }, 146 { 147 "@type": "Question", 148 "name": "Can colleges access my student profile?", 149 "acceptedAnswer": { 150 "@type": "Answer", 151 "text": "College discovery and ranking searches are completely private. Nothing is shared without your explicit action." 152 } 153 }, 154 { 155 "@type": "Question", 156 "name": "How does candidate matching work?", 157 "acceptedAnswer": { 158 "@type": "Answer", 159 "text": "Our matching engine compares key skills, experience bullets, and domain requirements between resumes and job descriptions privately, delivering instant scores without storing your documents." 160 } 161 } 162 ] 163 } 164 ] 165 }; 166 setJsonLdSchema(schema); 167 168 const homeFaqs = HOME_FAQS; 169 const toolsList = HOME_TOOLS_LIST; 170 171 let currentCategory = 'all'; 172 173 const appMount = document.getElementById('app-mount'); 174 if (!appMount) return; 175 176 function renderPage() { 177 const filteredTools = currentCategory === 'all' 178 ? toolsList 179 : toolsList.filter(t => t.category === currentCategory); 180 181 const html = ` 182 <div class="page-home page-container" style="max-width: 1400px; margin: 0 auto; padding-bottom: 60px;"> 183 184 <!-- 1. HERO SECTION --> 185 <section class="hm-hero-card"> 186 <div class="hm-hero-badge"> 187 <span>ð</span> NEXT-GEN AI & CAREER PLATFORM 188 </div> 189 190 <h1 class="hm-hero-title"> 191 Empower Your Mind. <span class="hm-hero-title-accent">Supercharge Your Career.</span> 192 </h1> 193 194 <!-- AI Chat Hub (Centerpiece Hero Launcher) --> 195 <div class="hm-ai-chat-hub" id="hm-chat-hub"> 196 <!-- 1. Inner White Composer Card --> 197 <div class="hm-composer-card"> 198 <textarea 199 id="hm-chat-input" 200 class="hm-composer-textarea" 201 placeholder="Write, paste, upload, or start with an action below..." 202 rows="2" 203 aria-label="Ask eWith.me AI or paste text" 204 ></textarea> 205 206 <div class="hm-composer-bottom"> 207 <div class="hm-composer-actions-left"> 208 <button type="button" id="hm-btn-plus" class="hm-btn-plus" title="Quick Actions & Prompts" aria-label="Quick Actions"> 209 + 210 </button> 211 <!-- Plus Popover Menu --> 212 <div id="hm-plus-menu" class="hm-plus-menu" role="menu"> 213 <button type="button" class="hm-plus-item" id="hm-act-paste" role="menuitem">
214 <span>ð</span> Paste from Clipboard 215 </button> 216 <button type="button" class="hm-plus-item" id="hm-act-inspire" role="menuitem"> 217 <span>ð¡</span> Inspire with Random Prompt 218 </button> 219 <button type="button" class="hm-plus-item" id="hm-act-search" role="menuitem"> 220 <span>ð</span> Search Colleges & Tests 221 </button> 222 <button type="button" class="hm-plus-item" id="hm-act-clear" role="menuitem"> 223 <span>ð§¹</span> Clear Input 224 </button> 225 </div> 226 </div> 227 228 <button type="button" id="hm-btn-send" class="hm-btn-send" aria-label="Send prompt or start chat" title="Send message"> 229 → 230 </button> 231 </div> 232 </div> 233 234 <!-- 2. Action Pill Shelf (Screenshot Layout) --> 235 <div class="hm-pills-shelf" role="navigation" aria-label="Core Tools Quick Access"> 236 <a href="/paraphrasing-tool" class="hm-action-pill pill-paraphrase tool-card-action" data-path="/paraphrasing-tool" title="Rewrite text in Academic, Professional, or Casual style"> 237 <span class="hm-pill-icon">âï¸</span> Paraphraser 238 </a> 239 <a href="/text-to-speech" class="hm-action-pill pill-tts tool-card-action" data-path="/text-to-speech" title="Convert text into natural spoken audio"> 240 <span class="hm-pill-icon">ð</span> Text to Speech 241 </a> 242 <a href="/grammar-checker" class="hm-action-pill pill-grammar tool-card-action" data-path="/grammar-checker" title="Comprehensive grammar, spelling, and readability check"> 243 <span class="hm-pill-icon">ð</span> Grammar Checker 244 </a> 245 <a href="/tools" class="hm-action-pill pill-more tool-card-action" data-path="/tools" title="Explore all 70+ platform tools"> 246 <span class="hm-pill-icon">â</span> More 247 </a> 248 </div> 249 </div> 250 251 <p class="hm-hero-desc"> 252 Private by design. No sign-up. Nothing stored. Instant results â no uploading, no waiting. Explore 70+ productivity tools, ATS resume intelligence, 2,300+ global college rankings, and standardized exam prep. 253 </p> 254 </section> 255 256 <!-- 2. TRUST & METRICS RIBBON --> 257 <section class="hm-metrics-grid"> 258 <div class="hm-metric-card"> 259 <span class="hm-metric-icon">â¨</span> 260 <div> 261 <div class="hm-metric-val">70+ Tools</div> 262 <div class="hm-metric-lbl">Writing, Career & Utility</div> 263 </div> 264 </div> 265 <div class="hm-metric-card"> 266 <span class="hm-metric-icon">ðï¸</span> 267 <div> 268 <div class="hm-metric-val">2,300+ Colleges</div> 269 <div class="hm-metric-lbl">Engineering, MBA & Global</div> 270 </div> 271 </div> 272 <div class="hm-metric-card"> 273 <span class="hm-metric-icon">â¡</span> 274 <div> 275 <div class="hm-metric-val">Instant Results</div> 276 <div class="hm-metric-lbl">No Uploading, No Waiting</div> 277 </div> 278 </div> 279 <div class="hm-metric-card"> 280 <span class="hm-metric-icon">ð¡ï¸</span> 281 <div> 282 <div class="hm-metric-val">Private by Design</div> 283 <div class="hm-metric-lbl">No Sign-Up · Nothing Stored</div> 284 </div> 285 </div> 286 </section> 287 288 <!-- 3. DUAL PERSONA PATHWAYS (STUDENT VS RECRUITER) --> 289 <section class="hm-persona-grid"> 290 <!-- Candidate / Student Card --> 291 <div class="hm-persona-card candidate"> 292 <div> 293 <div class="hm-persona-header"> 294 <div class="hm-persona-icon-circle">ð</div> 295 <div> 296 <div style="font-size: 0.76rem; font-weight: 850; text-transform: uppercase; color: #C084FC; letter-spacing: 0.05em;">For Students & Job Seekers</div> 297 <h3 class="hm-persona-title">Accelerate Your Academic & Career Journey</h3> 298 </div> 299 </div> 300 <p class="hm-persona-desc" style="margin-top: 14px;"> 301 Optimize your resume to pass corporate ATS screeners, ace standardized tests with active recall decks, and rewrite academic papers privately. 302 </p> 303 <ul class="hm-persona-bullets"> 304 <li><span>
304â</span> Evaluate resumes against real job descriptions</li> 305 <li><span>â</span> Master SAT, GRE, GMAT, NEET & JEE Mains</li> 306 <li><span>â</span> Explore 2,300+ verified university directories</li> 307 <li><span>â</span> Humanize and paraphrase AI drafts seamlessly</li> 308 </ul> 309 </div> 310 <div class="hm-persona-actions"> 311 <a href="/ats-resume-evaluator-free" class="hm-btn-persona-primary tool-card-action" data-path="/ats-resume-evaluator-free"> 312 Evaluate My Resume (Free) → 313 </a> 314 <a href="/colleges" class="hm-btn-persona-outline tool-card-action" data-path="/colleges"> 315 Explore Colleges 316 </a> 317 </div> 318 </div> 319 320 <!-- Recruiter / Employer Card --> 321 <div class="hm-persona-card recruiter"> 322 <div> 323 <div class="hm-persona-header"> 324 <div class="hm-persona-icon-circle">ð¢</div> 325 <div> 326 <div style="font-size: 0.76rem; font-weight: 850; text-transform: uppercase; color: #38BDF8; letter-spacing: 0.05em;">For Recruiters & Employers</div> 327 <h3 class="hm-persona-title">Hire Pre-Screened Top Talent Faster</h3> 328 </div> 329 </div> 330 <p class="hm-persona-desc" style="margin-top: 14px;"> 331 Post open job roles, evaluate candidate match scores using semantic AI, compare up to 5 resumes simultaneously, and manage hiring pipelines. 332 </p> 333 <ul class="hm-persona-bullets"> 334 <li><span>â</span> 6-step rich text Job Creation Wizard</li> 335 <li><span>â</span> Automated AI match scoring for candidate pools</li> 336 <li><span>â</span> Side-by-side bulk candidate evaluation</li> 337 <li><span>â</span> Direct employer and recruitment agency support</li> 338 </ul> 339 </div> 340 <div class="hm-persona-actions"> 341 <a href="/jobs" class="hm-btn-persona-primary tool-card-action" data-path="/jobs"> 342 Explore Job Search Engine → 343 </a> 344 <a href="/resume-match-check" class="hm-btn-persona-outline tool-card-action" data-path="/resume-match-check"> 345 Bulk Resume Match 346 </a> 347 </div> 348 </div> 349 </section> 350 351 <!-- 4. CURATED & FILTERABLE TOOLS DIRECTORY --> 352 <section style="margin-bottom: 48px;"> 353 <div class="hm-section-head"> 354 <div class="hm-section-eyebrow">ALL-IN-ONE TOOL SUITE</div> 355 <h2 class="hm-section-title">Explore 70+ Free Platform Tools</h2> 356 <p class="hm-section-subtitle">Private and instant â no upload, no wait, no trace. No sign-up required, nothing stored.</p> 357 </div> 358 359 <!-- Category Tabs --> 360 <div class="hm-category-tabs"> 361 <button type="button" class="hm-cat-tab ${currentCategory === 'all' ? 'active' : ''}" data-cat="all">ð¥ All & Featured (${toolsList.length})</button> 362 <button type="button" class="hm-cat-tab ${currentCategory === 'writing' ? 'active' : ''}" data-cat="writing">âï¸ AI Writing & Utilities (${toolsList.filter(t => t.category === 'writing').length})</button> 363 <button type="button" class="hm-cat-tab ${currentCategory === 'career' ? 'active' : ''}" data-cat="career">ð¼ Career & ATS Tech (${toolsList.filter(t => t.category === 'career').length})</button> 364 <button type="button" class="hm-cat-tab ${currentCategory === 'colleges' ? 'active' : ''}" data-cat="colleges">ðï¸ College Rankings (${toolsList.filter(t => t.category === 'colleges').length})</button> 365 <button type="button" class="hm-cat-tab ${currentCategory === 'exams' ? 'active' : ''}" data-cat="exams">ð Test Prep & Games (${toolsList.filter(t => t.category === 'exams').length})</button> 366 </div> 367 368 <!-- Tools Grid --> 369 <div class="hm-tools-grid"> 370 ${filteredTools.map(tool => ` 371 <a href="${tool.path}" class="hm-tool-card tool-card-action" data-path="${tool.path}"> 372 <div> 373 <div class="hm-tool-top"> 374 <div class="hm-tool-icon-box">${tool.icon}</div>
375 <span class="hm-tool-badge">${tool.badge}</span> 376 </div> 377 <h4 class="hm-tool-title">${tool.name}</h4> 378 <p class="hm-tool-desc">${tool.desc}</p> 379 </div> 380 <div class="hm-tool-cta"> 381 <span>Open Tool</span> 382 <span>→</span> 383 </div> 384 </a> 385 `).join('')} 386 387 <!-- All Tools Directory Card (completes grid row) --> 388 <a href="/tools" class="hm-tool-card all-tools-card tool-card-action" data-path="/tools"> 389 <div> 390 <div class="hm-tool-top"> 391 <div class="hm-tool-icon-box">ð</div> 392 <span class="hm-tool-badge" style="background: rgba(168, 85, 247, 0.2); border-color: #C084FC; color: #C084FC;">70+ Total</span> 393 </div> 394 <h4 class="hm-tool-title" style="background: linear-gradient(135deg, #FFFFFF 0%, #C084FC 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Explore All 70+ Tools</h4> 395 <p class="hm-tool-desc">Discover the complete directory of AI writing, career intelligence, college discovery, and study prep tools.</p> 396 </div> 397 <div class="hm-tool-cta" style="color: #C084FC; font-weight: 850;"> 398 <span>View Full Directory</span> 399 <span>→</span> 400 </div> 401 </a> 402 </div> 403 </section> 404 405 <!-- 5. COLLEGE RANKINGS SHOWCASE --> 406 <section class="hm-rankings-row"> 407 <!-- Engineering Rankings Mini Leaderboard --> 408 <div class="hm-rank-box"> 409 <div class="hm-rank-header"> 410 <div> 411 <span style="font-size: 0.76rem; font-weight: 850; color: #38BDF8; text-transform: uppercase;">1,120+ Ranked Programs</span> 412 <h3 style="font-size: 1.25rem; font-weight: 850; color: #FFFFFF; margin: 2px 0 0 0;">âï¸ Top Engineering Colleges</h3> 413 </div> 414 <a href="/colleges/engineering" class="hm-chip-btn tool-card-action" data-path="/colleges/engineering">View All →</a> 415 </div> 416 <div class="hm-rank-list"> 417 <div class="hm-rank-item"> 418 <div class="hm-rank-info"> 419 <span class="hm-rank-num">1</span> 420 <span class="hm-rank-name">Massachusetts Institute of Technology (MIT)</span> 421 </div> 422 <span class="hm-rank-score">Score: 99.4</span> 423 </div> 424 <div class="hm-rank-item"> 425 <div class="hm-rank-info"> 426 <span class="hm-rank-num">2</span> 427 <span class="hm-rank-name">Stanford University</span> 428 </div> 429 <span class="hm-rank-score">Score: 98.8</span> 430 </div> 431 <div class="hm-rank-item"> 432 <div class="hm-rank-info"> 433 <span class="hm-rank-num">3</span> 434 <span class="hm-rank-name">University of California, Berkeley</span> 435 </div> 436 <span class="hm-rank-score">Score: 97.9</span> 437 </div> 438 </div> 439 <a href="/colleges/engineering" class="hm-btn-persona-outline tool-card-action" data-path="/colleges/engineering" style="width: 100%; text-align: center;"> 440 Explore All 1,120+ Engineering Rankings → 441 </a> 442 </div> 443 444 <!-- MBA Rankings Mini Leaderboard --> 445 <div class="hm-rank-box"> 446 <div class="hm-rank-header"> 447 <div> 448 <span style="font-size: 0.76rem; font-weight: 850; color: #C084FC; text-transform: uppercase;">1,180+ Ranked Business Schools</span> 449 <h3 style="font-size: 1.25rem; font-weight: 850; color: #FFFFFF; margin: 2px 0 0 0;">ð¼ Top MBA Business Schools</h3> 450 </div> 451 <a href="/colleges/mba" class="hm-chip-btn tool-card-action" data-path="/colleges/mba">View All →</a> 452 </div> 453 <div class="hm-rank-list"> 454 <div class="hm-rank-item"> 455 <div class="hm-rank-info">
456 <span class="hm-rank-num">1</span> 457 <span class="hm-rank-name">Harvard Business School (HBS)</span> 458 </div> 459 <span class="hm-rank-score">ROI: Top 1%</span> 460 </div> 461 <div class="hm-rank-item"> 462 <div class="hm-rank-info"> 463 <span class="hm-rank-num">2</span> 464 <span class="hm-rank-name">Stanford Graduate School of Business</span> 465 </div> 466 <span class="hm-rank-score">ROI: Top 1%</span> 467 </div> 468 <div class="hm-rank-item"> 469 <div class="hm-rank-info"> 470 <span class="hm-rank-num">3</span> 471 <span class="hm-rank-name">Wharton School of the University of Pennsylvania</span> 472 </div> 473 <span class="hm-rank-score">ROI: Top 1%</span> 474 </div> 475 </div> 476 <a href="/colleges/mba" class="hm-btn-persona-outline tool-card-action" data-path="/colleges/mba" style="width: 100%; text-align: center;"> 477 Explore All 1,180+ MBA Business Schools → 478 </a> 479 </div> 480 </section> 481 482 <!-- 6. ARCHITECTURAL PRIVACY & TRUST MATRIX --> 483 <section style="margin-bottom: 48px;"> 484 <div class="hm-section-head" style="text-align: center;"> 485 <div class="hm-section-eyebrow">PRIVACY & SPEED ASSURANCE</div> 486 <h2 class="hm-section-title">Private by Design. Instant by Default.</h2> 487 <p class="hm-section-subtitle" style="max-width: 640px; margin: 0 auto;">Use our tools privately â no account needed, no data retained, and instant results with nothing to upload.</p> 488 </div> 489 490 <div class="hm-trust-grid"> 491 <div class="hm-trust-card"> 492 <div class="hm-trust-icon">ð</div> 493 <h4>Private & Nothing Stored</h4> 494 <p>Private by design. No sign-up required and nothing is stored or retained after you get your results.</p> 495 </div> 496 <div class="hm-trust-card"> 497 <div class="hm-trust-icon">â¡</div> 498 <h4>Instant Results</h4> 499 <p>Instant results â no uploading, no waiting. Nothing to upload means nothing to wait for.</p> 500 </div> 501 <div class="hm-trust-card"> 502 <div class="hm-trust-icon">ð¡ï¸</div> 503 <h4>Anonymous Analytics</h4> 504 <p>We use anonymous, aggregate analytics to improve this site â never to track individuals.</p> 505 </div> 506 </div> 507 </section> 508 509 <!-- 7. FAQ SECTION --> 510 <section class="page-section faq-module" style="margin-bottom: 20px;"> 511 ${renderFaqModule(homeFaqs.map(f => ({ question: f.q, answer: f.a })), { eyebrow: "PLATFORM FAQS", heading: "Frequently Asked Questions", sectionId: "homepage-faq-section" })} 512 </section> 513 514 </div> 515 `; 516 517 appMount.innerHTML = html; 518 bindEvents(); 519 } 520 521 function bindEvents() { 522 // ââ AI Chat Hub Interactivity âââââââââââââââââââââââââââââ 523 const chatInput = document.getElementById('hm-chat-input'); 524 const sendBtn = document.getElementById('hm-btn-send'); 525 const plusBtn = document.getElementById('hm-btn-plus'); 526 const plusMenu = document.getElementById('hm-plus-menu'); 527 528 // Plus popover actions 529 const actPaste = document.getElementById('hm-act-paste'); 530 const actInspire = document.getElementById('hm-act-inspire'); 531 const actSearch = document.getElementById('hm-act-search'); 532 const actClear = document.getElementById('hm-act-clear'); 533 534 // 1. Dynamic Cycling Placeholder (every 3.5s if input is empty & unfocused) 535 const PLACEHOLDERS = [ 536 "Write, paste, upload, or start with an action below...", 537 "Ask AI: How do I format my resume to pass corporate ATS filters?", 538 "Ask AI: Explain Bayes' Theorem simply with a medical screening example...", 539 "Paste text below to paraphrase, audit grammar, or convert to speech...", 540 "Ask AI: Suggest 5 novel thesis ideas combining AI and education..." 541 ]; 542 let placeholderIdx = 0; 543 let isInputFocused = false; 544 545 const placeholderInterval = setInterval(() => { 546 if (!chatInput || isInputFocused || chatInput.value.trim().length > 0) return; 547 placeholderIdx = (placeholderIdx + 1) % PLACEHOLDERS.length; 548 chatInput.setAttribute('placeholder', PLACEHOLDERS[placeholderIdx]); 549 }, 3500); 550 551 if (chatInput) { 552 chatInput.addEventListener('focus', () => { isInputFocused = true; }); 553 chatInput.addEventListener('blur', () => { isInputFocused = false; }); 554 555 // Auto-grow textarea and toggle send button active state 556 chatInput.addEventListener('input', () => { 557 chatInput.style.height = 'auto'; 558 chatInput.style.height = Math.min(chatInput.scrollHeight, 180) + 'px'; 559 if (sendBtn) { 560 sendBtn.classList.toggle('active', chatInput.value.trim().length > 0); 561 } 562 }); 563 564 // Enter key submits (without Shift) 565 chatInput.addEventListener('keydown', (e) => { 566 if (e.key === 'Enter' && !e.shiftKey) { 567 e.preventDefault(); 568 handleChatSubmit(); 569 } 570 }); 571 } 572 573 if (sendBtn) { 574 sendBtn.addEventListener('click', () => { 575 handleChatSubmit(); 576 }); 577 } 578 579 // 2. Plus Popover Menu Handlers 580 if (plusBtn && plusMenu) { 581 plusBtn.addEventListener('click', (e) => { 582 e.stopPropagation(); 583 plusMenu.classList.toggle('active'); 584 }); 585 586 document.addEventListener('click', (e) => { 587 if (!plusMenu.contains(e.target) && e.target !== plusBtn) { 588 plusMenu.classList.remove('active'); 589 } 590 }); 591 } 592 593 if (actPaste && chatInput) { 594 actPaste.addEventListener('click', async () => { 595 plusMenu?.classList.remove('active'); 596 try { 597 const text = await navigator.clipboard.readText(); 598 if (text) { 599 chatInput.value = text; 600 chatInput.dispatchEvent(new Event('input')); 601 chatInput.focus(); 602 } 603 } catch (_) { 604 chatInput.focus(); 605 } 606 }); 607 } 608 609 if (actInspire && chatInput) { 610 actInspire.addEventListener('click', () => { 611 plusMenu?.classList.remove('active'); 612 const prompts = [ 613 "Explain the core differences between Supervised and Unsupervised Machine Learning in 3 bullet points.", 614 "Rewrite this sentence to sound executive and persuasive: 'We need to finish the task quickly so the client is happy.'", 615 "What are the top 5 high-yield organic chemistry reaction mechanisms tested on NEET and MCAT?", 616 "How can an applicant address a gap year on their resume without sounding apologetic?" 617 ]; 618 const picked = prompts[Math.floor(Math.random() * prompts.length)];
619 chatInput.value = picked; 620 chatInput.dispatchEvent(new Event('input')); 621 chatInput.focus(); 622 }); 623 } 624 625 if (actSearch) { 626 actSearch.addEventListener('click', () => { 627 plusMenu?.classList.remove('active'); 628 onNavigate('/tools'); 629 }); 630 } 631 632 if (actClear && chatInput) { 633 actClear.addEventListener('click', () => { 634 plusMenu?.classList.remove('active'); 635 chatInput.value = ''; 636 chatInput.style.height = 'auto'; 637 if (sendBtn) sendBtn.classList.remove('active'); 638 chatInput.focus(); 639 }); 640 } 641 642 643 // 4. Instant Direct AI Chat Submission & Handoff 644 function handleChatSubmit() { 645 const prompt = chatInput?.value?.trim(); 646 if (!prompt) { 647 chatInput?.focus(); 648 return; 649 } 650 651 if (placeholderInterval) clearInterval(placeholderInterval); 652 if (plusMenu) plusMenu.classList.remove('active'); 653 654 try { 655 sessionStorage.setItem('ewithme_incoming_chat', JSON.stringify({ 656 prompt: prompt 657 })); 658 } catch (_) {} 659 660 onNavigate(`/ai-chat?prompt=${encodeURIComponent(prompt)}`); 661 } 662 663 // Register cleanup when unmounting Home page 664 if (typeof window !== 'undefined' && window.registerUnmount) { 665 window.registerUnmount(() => { 666 if (placeholderInterval) clearInterval(placeholderInterval); 667 }); 668 } 669 670 // ââ Zero-Loss Action Pills & Tool Card Navigation âââââââââââ 671 document.querySelectorAll('.tool-card-action[data-path]').forEach(card => { 672 card.addEventListener('click', (e) => { 673 if (e.ctrlKey || e.metaKey || e.button === 1 || e.shiftKey) { 674 return; // Allow native browser open-in-new-tab 675 } 676 e.preventDefault(); 677 e.stopPropagation(); 678 679 const basePath = card.dataset.path || card.getAttribute('data-path') || card.getAttribute('href'); 680 if (!basePath) return; 681 682 // Check if user has entered text in the composer box 683 const enteredText = chatInput?.value?.trim(); 684 if (enteredText && (basePath === '/paraphrasing-tool' || basePath === '/text-to-speech' || basePath === '/grammar-checker')) { 685 try { 686 sessionStorage.setItem('ewithme_shared_text', enteredText); 687 } catch (_) {} 688 onNavigate(`${basePath}?text=${encodeURIComponent(enteredText)}`); 689 } else { 690 onNavigate(basePath); 691 } 692 }); 693 }); 694 695 // Category filter tabs 696 document.querySelectorAll('.hm-cat-tab[data-cat]').forEach(tab => { 697 tab.addEventListener('click', () => { 698 const cat = tab.dataset.cat; 699 if (cat) { 700 currentCategory = cat; 701 renderPage(); 702 } 703 }); 704 }); 705 706 // FAQs event binding 707 bindFaqEvents(appMount); 708 } 709 710 const isAlreadyRendered = appMount && appMount.querySelector('.page-home') && (appMount.getAttribute('data-ssr-path') === '/' || appMount.getAttribute('data-ssr-path') === '/home'); 711 if (isAlreadyRendered) { 712 bindEvents(); 713 } else { 714 renderPage(); 715 } 716}
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.