Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Ken's Tech Translator</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --brand-primary: #6C5CE7; | |
| --brand-primary-light: #a29bfe; | |
| --brand-primary-dark: #4834d4; | |
| --brand-accent: #00cec9; | |
| --brand-accent-warm: #fd79a8; | |
| --brand-text: #0f0f1a; | |
| --brand-text-subtle: #636e82; | |
| --brand-bg: #ffffff; | |
| --brand-page-bg: #f8f7ff; | |
| --brand-surface: #ffffff; | |
| --brand-border: rgba(108, 92, 231, 0.1); | |
| --font-heading: 'Space Grotesk', sans-serif; | |
| --font-body: 'Inter', sans-serif; | |
| --radius: 16px; | |
| --radius-sm: 10px; | |
| --radius-xs: 6px; | |
| --shadow-soft: 0 4px 24px rgba(108, 92, 231, 0.08); | |
| --shadow-elevated: 0 12px 48px rgba(108, 92, 231, 0.12); | |
| --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| ::selection { background: var(--brand-primary); color: white; } | |
| body { | |
| font-family: var(--font-body); | |
| background: var(--brand-page-bg); | |
| color: var(--brand-text); | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| } | |
| body::before { | |
| content: ''; | |
| position: fixed; | |
| inset: 0; | |
| background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"); | |
| pointer-events: none; | |
| z-index: 0; | |
| } | |
| .bg-orbs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } | |
| .bg-orbs .orb { position: absolute; border-radius: 50%; filter: blur(80px); animation: orbFloat 20s ease-in-out infinite; } | |
| .bg-orbs .orb:nth-child(1) { width: 400px; height: 400px; background: rgba(108, 92, 231, 0.08); top: -100px; right: -100px; } | |
| .bg-orbs .orb:nth-child(2) { width: 300px; height: 300px; background: rgba(0, 206, 201, 0.06); bottom: -50px; left: -50px; animation-delay: -7s; } | |
| .bg-orbs .orb:nth-child(3) { width: 250px; height: 250px; background: rgba(253, 121, 168, 0.05); top: 40%; left: 50%; animation-delay: -14s; } | |
| @keyframes orbFloat { | |
| 0%, 100% { transform: translate(0, 0) scale(1); } | |
| 33% { transform: translate(30px, -40px) scale(1.05); } | |
| 66% { transform: translate(-20px, 20px) scale(0.95); } | |
| } | |
| .app-container { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 0 24px; } | |
| /* HEADER */ | |
| header { padding: 28px 0 20px; animation: fadeSlideDown 0.6s ease-out; } | |
| @keyframes fadeSlideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } | |
| .header-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } | |
| .logo-group { display: flex; align-items: center; gap: 14px; } | |
| .logo-icon { | |
| width: 44px; height: 44px; | |
| background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark)); | |
| border-radius: 12px; display: flex; align-items: center; justify-content: center; | |
| font-size: 20px; box-shadow: 0 4px 16px rgba(108, 92, 231, 0.3); | |
| position: relative; overflow: hidden; | |
| } | |
| .logo-icon::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.2)); } | |
| .logo-icon span { position: relative; z-index: 1; } | |
| .logo-text { font-family: var(--font-heading); font-size: 20px; font-weight: 700; letter-spacing: -0.5px; } | |
| .logo-text em { font-style: normal; color: var(--brand-primary); } | |
| .header-badge { | |
| display: flex; align-items: center; gap: 8px; padding: 6px 14px; | |
| border-radius: 100px; background: rgba(108, 92, 231, 0.06); | |
| border: 1px solid var(--brand-border); font-size: 12px; font-weight: 500; color: var(--brand-primary); | |
| } | |
| .header-badge .dot { width: 6px; height: 6px; background: var(--brand-accent); border-radius: 50%; animation: pulse 2s ease-in-out infinite; } | |
| @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.4); } } | |
| /* HERO */ | |
| .hero { text-align: center; padding: 48px 0 40px; animation: fadeSlideUp 0.8s ease-out 0.2s both; } | |
| @keyframes fadeSlideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } | |
| .hero-eyebrow { | |
| display: inline-flex; align-items: center; gap: 8px; | |
| font-size: 13px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--brand-primary); margin-bottom: 20px; | |
| } | |
| .hero-eyebrow::before, .hero-eyebrow::after { content: ''; width: 24px; height: 1px; background: linear-gradient(90deg, transparent, var(--brand-primary)); } | |
| .hero-eyebrow::after { background: linear-gradient(90deg, var(--brand-primary), transparent); } | |
| .hero h1 { font-family: var(--font-heading); font-size: clamp(36px, 5vw, 56px); font-weight: 700; line-height: 1.1; letter-spacing: -1.5px; margin-bottom: 16px; } | |
| .hero h1 .gradient-text { background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } | |
| .hero p { font-size: 17px; line-height: 1.7; color: var(--brand-text-subtle); max-width: 560px; margin: 0 auto; } | |
| /* WORKSPACE */ | |
| .workspace { display: grid; grid-template-columns: 1fr 340px; gap: 20px; padding-bottom: 40px; animation: fadeSlideUp 0.8s ease-out 0.4s both; } | |
| @media (max-width: 900px) { .workspace { grid-template-columns: 1fr; } } | |
| /* CARDS */ | |
| .card { background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-soft); transition: var(--transition); } | |
| .card:hover { box-shadow: var(--shadow-elevated); } | |
| .card-label { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--brand-text-subtle); margin-bottom: 16px; } | |
| .card-label .icon { width: 20px; height: 20px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 11px; } | |
| /* INPUT */ | |
| .input-section { display: flex; flex-direction: column; gap: 16px; } | |
| .mode-switcher { display: flex; background: var(--brand-page-bg); border-radius: var(--radius-sm); padding: 4px; border: 1px solid var(--brand-border); } | |
| .mode-btn { | |
| flex: 1; padding: 10px 16px; border: none; background: transparent; border-radius: 8px; | |
| font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--brand-text-subtle); | |
| cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center; gap: 6px; | |
| } | |
| .mode-btn.active { background: var(--brand-surface); color: var(--brand-primary); box-shadow: 0 2px 8px rgba(108, 92, 231, 0.1); } | |
| .mode-btn:hover:not(.active) { color: var(--brand-text); } | |
| .textarea-wrapper { position: relative; flex: 1; } | |
| .textarea-wrapper textarea { | |
| width: 100%; min-height: 260px; padding: 20px; | |
| border: 2px solid var(--brand-border); border-radius: var(--radius-sm); | |
| font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; font-size: 13.5px; line-height: 1.7; | |
| color: var(--brand-text); background: var(--brand-page-bg); resize: vertical; outline: none; transition: var(--transition); | |
| } | |
| .textarea-wrapper textarea:focus { border-color: var(--brand-primary-light); box-shadow: 0 0 0 4px rgba(108, 92, 231, 0.08); } | |
| .textarea-wrapper textarea::placeholder { color: rgba(99, 110, 130, 0.5); } | |
| .char-count { position: absolute; bottom: 12px; right: 16px; font-size: 11px; color: var(--brand-text-subtle); opacity: 0.6; } | |
| .input-actions { display: flex; gap: 10px; align-items: center; } | |
| .btn-translate { | |
| flex: 1; padding: 14px 28px; | |
| background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark)); | |
| color: white; border: none; border-radius: var(--radius-sm); | |
| font-family: var(--font-heading); font-size: 15px; font-weight: 600; letter-spacing: -0.2px; | |
| cursor: pointer; transition: var(--transition); position: relative; overflow: hidden; | |
| display: flex; align-items: center; justify-content: center; gap: 8px; | |
| } | |
| .btn-translate::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent, rgba(255,255,255,0.15)); opacity: 0; transition: var(--transition); } | |
| .btn-translate:hover::before { opacity: 1; } | |
| .btn-translate:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(108, 92, 231, 0.3); } | |
| .btn-translate:active { transform: translateY(0); } | |
| .btn-translate:disabled { opacity: 0.5; cursor: not-allowed; transform: none ; box-shadow: none ; } | |
| .btn-secondary { | |
| padding: 14px 20px; background: var(--brand-page-bg); color: var(--brand-text-subtle); | |
| border: 1px solid var(--brand-border); border-radius: var(--radius-sm); | |
| font-family: var(--font-body); font-size: 13px; font-weight: 600; cursor: pointer; transition: var(--transition); | |
| } | |
| .btn-secondary:hover { background: var(--brand-surface); color: var(--brand-text); } | |
| /* SNIPPETS */ | |
| .snippets-label { font-size: 11px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--brand-text-subtle); margin-bottom: 10px; opacity: 0.7; } | |
| .snippet-chips { display: flex; flex-wrap: wrap; gap: 8px; } | |
| .snippet-chip { | |
| padding: 7px 14px; border: 1px solid var(--brand-border); border-radius: 100px; | |
| font-size: 12px; font-weight: 500; color: var(--brand-text-subtle); background: var(--brand-surface); | |
| cursor: pointer; transition: var(--transition); | |
| } | |
| .snippet-chip:hover { border-color: var(--brand-primary-light); color: var(--brand-primary); background: rgba(108, 92, 231, 0.04); } | |
| /* SIDEBAR */ | |
| .sidebar { display: flex; flex-direction: column; gap: 16px; } | |
| .audience-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } | |
| .audience-option { | |
| padding: 12px; border: 1.5px solid var(--brand-border); border-radius: var(--radius-sm); | |
| cursor: pointer; transition: var(--transition); text-align: center; background: var(--brand-surface); | |
| } | |
| .audience-option:hover { border-color: var(--brand-primary-light); } | |
| .audience-option.selected { border-color: var(--brand-primary); background: rgba(108, 92, 231, 0.04); } | |
| .audience-option .emoji { font-size: 22px; display: block; margin-bottom: 6px; } | |
| .audience-option .label { font-size: 12px; font-weight: 600; color: var(--brand-text); } | |
| .audience-option .sub { font-size: 10px; color: var(--brand-text-subtle); margin-top: 2px; } | |
| .tone-options { display: flex; flex-direction: column; gap: 6px; } | |
| .tone-option { | |
| padding: 10px 14px; border: 1.5px solid var(--brand-border); border-radius: var(--radius-xs); | |
| cursor: pointer; transition: var(--transition); display: flex; align-items: center; gap: 10px; background: var(--brand-surface); | |
| } | |
| .tone-option:hover { border-color: var(--brand-primary-light); } | |
| .tone-option.selected { border-color: var(--brand-primary); background: rgba(108, 92, 231, 0.04); } | |
| .tone-option .tone-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } | |
| .tone-option .tone-name { font-size: 13px; font-weight: 600; color: var(--brand-text); } | |
| .feature-toggles { display: flex; flex-direction: column; gap: 10px; } | |
| .toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } | |
| .toggle-label { font-size: 13px; color: var(--brand-text); font-weight: 500; flex: 1; } | |
| .toggle-switch { | |
| width: 42px; height: 24px; background: rgba(99, 110, 130, 0.2); border-radius: 12px; | |
| cursor: pointer; position: relative; transition: var(--transition); flex-shrink: 0; | |
| } | |
| .toggle-switch.on { background: var(--brand-primary); } | |
| .toggle-switch .toggle-knob { | |
| width: 18px; height: 18px; background: white; border-radius: 50%; | |
| position: absolute; top: 3px; left: 3px; transition: var(--transition); box-shadow: 0 1px 3px rgba(0,0,0,0.15); | |
| } | |
| .toggle-switch.on .toggle-knob { left: 21px; } | |
| /* OUTPUT */ | |
| .output-area { grid-column: 1 / -1; animation: fadeSlideUp 0.5s ease-out both; } | |
| .output-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; } | |
| .output-header h3 { font-family: var(--font-heading); font-size: 20px; font-weight: 700; letter-spacing: -0.5px; } | |
| .output-actions { display: flex; gap: 8px; } | |
| .btn-icon { | |
| width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; | |
| background: var(--brand-page-bg); border: 1px solid var(--brand-border); border-radius: var(--radius-xs); | |
| cursor: pointer; font-size: 14px; transition: var(--transition); color: var(--brand-text-subtle); | |
| } | |
| .btn-icon:hover { background: var(--brand-surface); color: var(--brand-primary); border-color: var(--brand-primary-light); } | |
| .output-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } | |
| @media (max-width: 768px) { .output-grid { grid-template-columns: 1fr; } } | |
| .output-block { | |
| padding: 20px; border-radius: var(--radius-sm); border-left: 3px solid; | |
| background: var(--brand-surface); box-shadow: var(--shadow-soft); animation: outputReveal 0.4s ease-out both; | |
| } | |
| .output-block:nth-child(1) { border-left-color: var(--brand-primary); animation-delay: 0.1s; } | |
| .output-block:nth-child(2) { border-left-color: var(--brand-accent); animation-delay: 0.2s; } | |
| .output-block:nth-child(3) { border-left-color: var(--brand-accent-warm); animation-delay: 0.3s; } | |
| .output-block:nth-child(4) { border-left-color: #fdcb6e; animation-delay: 0.4s; } | |
| .output-block:nth-child(5) { border-left-color: var(--brand-primary-light); animation-delay: 0.5s; grid-column: 1 / -1; } | |
| .output-block:nth-child(n+6) { border-left-color: var(--brand-accent); animation-delay: 0.6s; grid-column: 1 / -1; } | |
| @keyframes outputReveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } | |
| .output-block-title { | |
| font-family: var(--font-heading); font-size: 13px; font-weight: 700; | |
| letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; | |
| } | |
| .output-block-content { font-size: 14px; line-height: 1.75; color: var(--brand-text); } | |
| .output-block-content ul { list-style: none; padding: 0; } | |
| .output-block-content ul li { position: relative; padding-left: 20px; margin-bottom: 8px; } | |
| .output-block-content ul li::before { content: '\2192'; position: absolute; left: 0; color: var(--brand-primary); font-weight: 600; } | |
| .output-block-content .tag { display: inline-block; padding: 3px 10px; border-radius: 100px; font-size: 11px; font-weight: 600; margin: 2px 4px 2px 0; } | |
| .tag-high { background: rgba(253, 121, 168, 0.1); color: #e84393; } | |
| .tag-medium { background: rgba(253, 203, 110, 0.15); color: #d68910; } | |
| .tag-low { background: rgba(0, 206, 201, 0.1); color: #00a8a3; } | |
| .tag-info { background: rgba(108, 92, 231, 0.08); color: var(--brand-primary); } | |
| /* LOADING */ | |
| .loading-overlay { display: none; position: relative; padding: 60px 20px; text-align: center; grid-column: 1 / -1; } | |
| .loading-overlay.visible { display: block; } | |
| .loader-ring { width: 48px; height: 48px; border: 3px solid var(--brand-border); border-top-color: var(--brand-primary); border-radius: 50%; margin: 0 auto 20px; animation: spin 0.8s linear infinite; } | |
| @keyframes spin { to { transform: rotate(360deg); } } | |
| .loading-text { font-family: var(--font-heading); font-size: 16px; font-weight: 600; margin-bottom: 6px; } | |
| .loading-sub { font-size: 13px; color: var(--brand-text-subtle); } | |
| /* FOOTER */ | |
| footer { text-align: center; padding: 32px 0; border-top: 1px solid var(--brand-border); margin-top: 20px; } | |
| footer p { font-size: 13px; color: var(--brand-text-subtle); } | |
| footer p strong { color: var(--brand-text); font-weight: 600; } | |
| footer .footer-links { margin-top: 8px; display: flex; justify-content: center; gap: 20px; } | |
| footer .footer-links a { font-size: 12px; color: var(--brand-primary); text-decoration: none; font-weight: 500; } | |
| footer .footer-links a:hover { text-decoration: underline; } | |
| /* TOAST */ | |
| .toast { | |
| position: fixed; bottom: 24px; right: 24px; padding: 12px 20px; | |
| background: var(--brand-text); color: white; border-radius: var(--radius-xs); | |
| font-size: 13px; font-weight: 500; z-index: 200; | |
| animation: toastIn 0.3s ease, toastOut 0.3s ease 2.7s forwards; box-shadow: var(--shadow-elevated); | |
| } | |
| @keyframes toastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } | |
| @keyframes toastOut { from { opacity: 1; } to { opacity: 0; } } | |
| /* DEMO BADGE */ | |
| .demo-badge { | |
| display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; | |
| background: rgba(0, 206, 201, 0.1); border: 1px solid rgba(0, 206, 201, 0.3); | |
| border-radius: 100px; font-size: 11px; font-weight: 700; color: var(--brand-accent); | |
| letter-spacing: 0.5px; text-transform: uppercase; | |
| } | |
| ::-webkit-scrollbar { width: 6px; } | |
| ::-webkit-scrollbar-track { background: transparent; } | |
| ::-webkit-scrollbar-thumb { background: rgba(108, 92, 231, 0.15); border-radius: 3px; } | |
| ::-webkit-scrollbar-thumb:hover { background: rgba(108, 92, 231, 0.3); } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="bg-orbs"><div class="orb"></div><div class="orb"></div><div class="orb"></div></div> | |
| <div class="app-container"> | |
| <header> | |
| <div class="header-inner"> | |
| <div class="logo-group"> | |
| <div class="logo-icon"><span>⚡</span></div> | |
| <div class="logo-text">Ken's Tech <em>Translator</em></div> | |
| </div> | |
| <div id="headerBadge" class="header-badge"> | |
| <span class="dot"></span> | |
| <span id="headerBadgeText">AI-Powered</span> | |
| </div> | |
| </div> | |
| </header> | |
| <section class="hero"> | |
| <div class="hero-eyebrow">Bridge the Gap</div> | |
| <h1>Technical jargon in,<br><span class="gradient-text">business clarity out</span></h1> | |
| <p>Paste any technical text — error logs, architecture docs, sprint updates, incident reports — and get structured, actionable summaries your stakeholders will actually read.</p> | |
| </section> | |
| <div class="workspace" id="workspace"> | |
| <!-- LEFT: Input --> | |
| <div class="input-section"> | |
| <div class="card" style="flex:1;display:flex;flex-direction:column;"> | |
| <div class="card-label"> | |
| <span class="icon" style="background:rgba(108,92,231,0.1);color:var(--brand-primary);">📥</span> | |
| Input | |
| </div> | |
| <div class="mode-switcher"> | |
| <button class="mode-btn active" data-mode="standard" onclick="setMode('standard')">⚡ Standard</button> | |
| <button class="mode-btn" data-mode="comparison" onclick="setMode('comparison')">🔄 Compare</button> | |
| <button class="mode-btn" data-mode="reverse" onclick="setMode('reverse')">🔀 Reverse</button> | |
| </div> | |
| <div class="textarea-wrapper" style="margin-top:12px;flex:1;"> | |
| <textarea id="inputText" placeholder="Paste technical content here... Error logs, stack traces, API docs, sprint updates, architecture decisions, incident reports — anything goes."></textarea> | |
| <div class="char-count" id="charCount">0 chars</div> | |
| </div> | |
| <div id="comparisonInput" style="display:none;margin-top:12px;"> | |
| <div class="textarea-wrapper"> | |
| <textarea id="inputText2" placeholder="Paste the second text here for side-by-side comparison..." style="min-height:130px;"></textarea> | |
| </div> | |
| </div> | |
| <div style="margin-top:14px;"> | |
| <div class="snippets-label">Quick start →</div> | |
| <div class="snippet-chips"> | |
| <button class="snippet-chip" onclick="loadSample('error')">🐛 Error Log</button> | |
| <button class="snippet-chip" onclick="loadSample('api')">📡 API Doc</button> | |
| <button class="snippet-chip" onclick="loadSample('sprint')">🏃 Sprint Update</button> | |
| <button class="snippet-chip" onclick="loadSample('incident')">🚨 Incident Report</button> | |
| <button class="snippet-chip" onclick="loadSample('architecture')">🏗️ Architecture</button> | |
| </div> | |
| </div> | |
| <div class="input-actions" style="margin-top:16px;"> | |
| <button class="btn-translate" id="translateBtn" onclick="handleTranslate()"> | |
| <span id="btnIcon">⚡</span> | |
| <span id="btnText">Translate</span> | |
| </button> | |
| <button class="btn-secondary" onclick="clearAll()">Clear</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- RIGHT: Sidebar --> | |
| <div class="sidebar"> | |
| <div class="card"> | |
| <div class="card-label"> | |
| <span class="icon" style="background:rgba(0,206,201,0.1);color:var(--brand-accent);">👥</span> | |
| Audience | |
| </div> | |
| <div class="audience-grid"> | |
| <div class="audience-option selected" data-audience="executive" onclick="selectAudience(this)"> | |
| <span class="emoji">👔</span><div class="label">C-Suite</div><div class="sub">Impact & ROI</div> | |
| </div> | |
| <div class="audience-option" data-audience="pm" onclick="selectAudience(this)"> | |
| <span class="emoji">📋</span><div class="label">PM / Lead</div><div class="sub">Scope & timelines</div> | |
| </div> | |
| <div class="audience-option" data-audience="sales" onclick="selectAudience(this)"> | |
| <span class="emoji">💼</span><div class="label">Sales / Client</div><div class="sub">Benefits & value</div> | |
| </div> | |
| <div class="audience-option" data-audience="general" onclick="selectAudience(this)"> | |
| <span class="emoji">🌐</span><div class="label">General</div><div class="sub">Anyone</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-label"> | |
| <span class="icon" style="background:rgba(253,121,168,0.1);color:var(--brand-accent-warm);">🎨</span> | |
| Tone | |
| </div> | |
| <div class="tone-options"> | |
| <div class="tone-option selected" data-tone="professional" onclick="selectTone(this)"> | |
| <span class="tone-dot" style="background:var(--brand-primary)"></span><span class="tone-name">Professional</span> | |
| </div> | |
| <div class="tone-option" data-tone="casual" onclick="selectTone(this)"> | |
| <span class="tone-dot" style="background:var(--brand-accent)"></span><span class="tone-name">Casual Friendly</span> | |
| </div> | |
| <div class="tone-option" data-tone="urgent" onclick="selectTone(this)"> | |
| <span class="tone-dot" style="background:var(--brand-accent-warm)"></span><span class="tone-name">Urgent / Escalation</span> | |
| </div> | |
| <div class="tone-option" data-tone="educational" onclick="selectTone(this)"> | |
| <span class="tone-dot" style="background:#fdcb6e"></span><span class="tone-name">Educational</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-label"> | |
| <span class="icon" style="background:rgba(253,203,110,0.12);color:#d68910;">⚙️</span> | |
| Features | |
| </div> | |
| <div class="feature-toggles"> | |
| <div class="toggle-row"> | |
| <span class="toggle-label">Layered (TL;DR → Deep)</span> | |
| <div class="toggle-switch on" data-feature="layered" onclick="toggleFeature(this)"><div class="toggle-knob"></div></div> | |
| </div> | |
| <div class="toggle-row"> | |
| <span class="toggle-label">Business Impact</span> | |
| <div class="toggle-switch on" data-feature="impact" onclick="toggleFeature(this)"><div class="toggle-knob"></div></div> | |
| </div> | |
| <div class="toggle-row"> | |
| <span class="toggle-label">Analogies & Examples</span> | |
| <div class="toggle-switch on" data-feature="analogies" onclick="toggleFeature(this)"><div class="toggle-knob"></div></div> | |
| </div> | |
| <div class="toggle-row"> | |
| <span class="toggle-label">Action Items</span> | |
| <div class="toggle-switch on" data-feature="actions" onclick="toggleFeature(this)"><div class="toggle-knob"></div></div> | |
| </div> | |
| <div class="toggle-row"> | |
| <span class="toggle-label">Confidence Notes</span> | |
| <div class="toggle-switch" data-feature="confidence" onclick="toggleFeature(this)"><div class="toggle-knob"></div></div> | |
| </div> | |
| <div class="toggle-row"> | |
| <span class="toggle-label">Slack-Ready Format</span> | |
| <div class="toggle-switch" data-feature="slack" onclick="toggleFeature(this)"><div class="toggle-knob"></div></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Loading --> | |
| <div class="loading-overlay" id="loadingState"> | |
| <div class="loader-ring"></div> | |
| <div class="loading-text" id="loadingText">Translating...</div> | |
| <div class="loading-sub" id="loadingSub">Analyzing technical content and generating structured output</div> | |
| </div> | |
| <!-- Output --> | |
| <div class="output-area card" id="outputArea" style="display:none;"> | |
| <div class="output-header"> | |
| <h3>📤 Translation <span id="demoBadge"></span></h3> | |
| <div class="output-actions"> | |
| <button class="btn-icon" onclick="copyOutput()" title="Copy to clipboard">📋</button> | |
| <button class="btn-icon" onclick="copySlack()" title="Copy for Slack">💬</button> | |
| <button class="btn-icon" onclick="exportMarkdown()" title="Download as file">📄</button> | |
| </div> | |
| </div> | |
| <div id="outputContent"></div> | |
| </div> | |
| <footer> | |
| <p>Built by <strong>Kendrick</strong> · AI Product Manager & Builder</p> | |
| <div class="footer-links"> | |
| <a href="#">Portfolio</a> | |
| <a href="#">LinkedIn</a> | |
| <a href="#">GitHub</a> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| // ════════════════════════════════════════════════════════════════ | |
| // STATE | |
| // ════════════════════════════════════════════════════════════════ | |
| var state = { | |
| mode: 'standard', | |
| audience: 'executive', | |
| tone: 'professional', | |
| features: { layered: true, impact: true, analogies: true, actions: true, confidence: false, slack: false } | |
| }; | |
| // ════════════════════════════════════════════════════════════════ | |
| // SAMPLES | |
| // ════════════════════════════════════════════════════════════════ | |
| var samples = { | |
| error: "java.lang.NullPointerException: Cannot invoke method getName() on null object reference\n at com.app.service.UserService.processUserProfile(UserService.java:142)\n at com.app.controller.ProfileController.updateProfile(ProfileController.java:67)\nCaused by: Failed to fetch user record from PostgreSQL - connection pool exhausted (max: 50, active: 50, idle: 0)\n at com.app.db.ConnectionPool.getConnection(ConnectionPool.java:89)\nThread dump shows 47 threads blocked on DB write operations. Memory usage at 89% heap. GC pause time averaging 340ms.\nLast successful DB write: 2026-03-29T14:23:01Z (47 minutes ago)", | |
| api: "## PATCH /api/v2/users/{userId}/preferences\n\nRate limit: 100 req/min per API key. Requires OAuth2 bearer token with 'user:write' scope.\n\nRequest body (application/json):\n{\n \"notification_channels\": [\"email\", \"sms\", \"push\"],\n \"data_retention_days\": 90,\n \"gdpr_consent_flags\": { \"analytics\": true, \"marketing\": false }\n}\n\nResponse 200: Returns updated UserPreference object with ETag header for optimistic concurrency.\nResponse 429: Rate limit exceeded. Retry-After header included.\n\nBreaking change in v2.1: notification_channels will migrate from string array to object array with priority field. Deprecation of v2.0 scheduled for Q2 2026.", | |
| sprint: "Sprint 23 Retro - Backend Team\n\nVelocity: 34 story points (target was 42). Missed target due to unplanned work.\n\nCompleted:\n- Migrated auth service from JWT to PASETO tokens (8 SP)\n- Implemented Redis-based distributed rate limiter (5 SP)\n- Fixed N+1 query in /dashboard/analytics - latency dropped from 2.3s to 180ms (3 SP)\n- Added OpenTelemetry tracing spans for payment flow (5 SP)\n\nRolled over:\n- Database sharding blocked by schema migration conflicts (13 SP)\n- gRPC migration - dependency on platform team (8 SP)\n\nTech debt:\n- Circuit breaker needed for 3 external API integrations\n- Test coverage dropped from 82% to 74%\n- Docker images grew 40% after monitoring agents\n\nIncidents: 1 P2 (payment latency spike, 23 min MTTR)", | |
| incident: "INCIDENT REPORT - P1 SEV-1\n\nTitle: Complete payment processing failure in production\nDuration: 2026-03-29 14:23 - 15:47 UTC (84 minutes)\nImpact: 100% of payments failed. ~12,400 transactions affected. Estimated revenue impact: $847,000.\n\nRoot Cause: K8s HPA minReplicas set to 0 instead of 3 due to Helm chart override in CI/CD. When traffic dipped at 14:20, all payment-service pods terminated. PodDisruptionBudget misconfigured (maxUnavailable: 100%).\n\nTimeline:\n14:23 - First 503 alerts\n14:28 - On-call paged, assumed DB issue\n14:41 - DB healthy, investigating service mesh\n14:52 - Found zero running pods\n14:58 - Manual scale to 5 replicas, health checks failing\n15:11 - Found readiness probe pointing to deprecated /health endpoint\n15:22 - Fixed probe, pods healthy\n15:31 - Payments restored, running reconciliation\n15:47 - All backlog processed, incident resolved\n\nAction Items:\n1. CI/CD guardrail: block deploys where HPA minReplicas < 1\n2. Readiness probe validation in pipeline\n3. Create runbook for zero-pod scenario\n4. Review all PodDisruptionBudgets for critical services", | |
| architecture: "ADR-042: Migrating from Monolith to Event-Driven Microservices\n\nStatus: Accepted\nContext: Monolith handles 15,000 RPM with p99 latency at 1.2s. Horizontal scaling limited by shared PostgreSQL write bottleneck. Feature teams blocked by merge conflicts and 45-min CI pipeline. Deploy frequency: 2x/week (target: daily).\n\nDecision: Decompose into bounded contexts via DDD. Communication via Apache Kafka event bus. CQRS for read-heavy services. Saga pattern for distributed transactions.\n\nPhase 1 (Q1): Extract user-service and notification-service\nPhase 2 (Q2): Extract payment-service with saga orchestrator\nPhase 3 (Q3): Extract analytics-service with ClickHouse for OLAP\n\nTrade-offs:\n+ Independent deployability, team autonomy, polyglot persistence\n+ Better fault isolation (blast radius containment)\n- Operational complexity: distributed tracing, eventual consistency\n- 30% storage overhead from data duplication\n- 3x dev time for payment sagas vs monolith transactions" | |
| }; | |
| // ════════════════════════════════════════════════════════════════ | |
| // SYSTEM PROMPT (stored as a regular string — no template literal) | |
| // ════════════════════════════════════════════════════════════════ | |
| // ════════════════════════════════════════════════════════════════ | |
| // DEMO RESPONSES (pre-built for each sample, keyed by detection) | |
| // ════════════════════════════════════════════════════════════════ | |
| // ════════════════════════════════════════════════════════════════ | |
| // INIT | |
| // ════════════════════════════════════════════════════════════════ | |
| document.addEventListener('DOMContentLoaded', function() { | |
| updateCharCount(); | |
| document.getElementById('inputText').addEventListener('input', updateCharCount); | |
| }); | |
| // ════════════════════════════════════════════════════════════════ | |
| // UI HANDLERS | |
| // ════════════════════════════════════════════════════════════════ | |
| function setMode(mode) { | |
| state.mode = mode; | |
| document.querySelectorAll('.mode-btn').forEach(function(b) { b.classList.toggle('active', b.dataset.mode === mode); }); | |
| document.getElementById('comparisonInput').style.display = mode === 'comparison' ? 'block' : 'none'; | |
| var ta = document.getElementById('inputText'); | |
| ta.placeholder = mode === 'reverse' | |
| ? 'Paste a business request, feature ask, or stakeholder message here...\n\nWe\'ll turn it into clear technical requirements\nyour engineering team can act on.' | |
| : 'Paste technical content here...\n\nError logs, stack traces, API docs, sprint updates,\narchitecture decisions, incident reports — anything goes.'; | |
| } | |
| function selectAudience(el) { | |
| document.querySelectorAll('.audience-option').forEach(function(o) { o.classList.remove('selected'); }); | |
| el.classList.add('selected'); | |
| state.audience = el.dataset.audience; | |
| } | |
| function selectTone(el) { | |
| document.querySelectorAll('.tone-option').forEach(function(o) { o.classList.remove('selected'); }); | |
| el.classList.add('selected'); | |
| state.tone = el.dataset.tone; | |
| } | |
| function toggleFeature(el) { | |
| el.classList.toggle('on'); | |
| state.features[el.dataset.feature] = el.classList.contains('on'); | |
| } | |
| function loadSample(key) { | |
| document.getElementById('inputText').value = samples[key]; | |
| updateCharCount(); | |
| } | |
| function updateCharCount() { | |
| var count = document.getElementById('inputText').value.length; | |
| document.getElementById('charCount').textContent = count.toLocaleString() + ' chars'; | |
| } | |
| function clearAll() { | |
| document.getElementById('inputText').value = ''; | |
| document.getElementById('inputText2').value = ''; | |
| document.getElementById('outputArea').style.display = 'none'; | |
| updateCharCount(); | |
| } | |
| // ════════════════════════════════════════════════════════════════ | |
| // TRANSLATE — handles both API and Demo mode | |
| // ════════════════════════════════════════════════════════════════ | |
| function handleTranslate() { | |
| var text = document.getElementById('inputText').value.trim(); | |
| if (!text) { showToast('Paste some technical text first, then hit Translate.'); return; } | |
| var btn = document.getElementById('translateBtn'); | |
| btn.disabled = true; | |
| document.getElementById('btnIcon').textContent = '\u23F3'; | |
| document.getElementById('btnText').textContent = 'Translating...'; | |
| document.getElementById('outputArea').style.display = 'none'; | |
| document.getElementById('loadingState').classList.add('visible'); | |
| document.getElementById('loadingText').textContent = 'Translating...'; | |
| document.getElementById('loadingSub').textContent = 'Analyzing your content and structuring the output'; | |
| var text2 = document.getElementById('inputText2').value.trim(); | |
| var featureList = []; | |
| for (var key in state.features) { | |
| if (state.features[key]) featureList.push(key); | |
| } | |
| fetch('/api/translate', { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ | |
| text: text, | |
| text2: text2, | |
| mode: state.mode, | |
| audience: state.audience, | |
| tone: state.tone, | |
| features: featureList | |
| }) | |
| }) | |
| .then(function(response) { return response.json(); }) | |
| .then(function(data) { | |
| if (data.error) { throw new Error(data.error); } | |
| document.getElementById('demoBadge').innerHTML = ''; | |
| renderOutput(data.translation); | |
| }) | |
| .catch(function(error) { | |
| showToast('Error: ' + error.message); | |
| console.error('Translation error:', error); | |
| }) | |
| .finally(function() { | |
| btn.disabled = false; | |
| document.getElementById('btnIcon').textContent = '\u26A1'; | |
| document.getElementById('btnText').textContent = 'Translate'; | |
| document.getElementById('loadingState').classList.remove('visible'); | |
| }); | |
| } | |
| // ════════════════════════════════════════════════════════════════ | |
| // RENDER OUTPUT | |
| // ════════════════════════════════════════════════════════════════ | |
| function renderOutput(markdown) { | |
| var outputArea = document.getElementById('outputArea'); | |
| var outputContent = document.getElementById('outputContent'); | |
| var sections = parseSections(markdown); | |
| var html = '<div class="output-grid">'; | |
| for (var i = 0; i < sections.length; i++) { | |
| var section = sections[i]; | |
| var isFullWidth = section.title.indexOf('Action') !== -1 || | |
| section.title.indexOf('Glossary') !== -1 || | |
| section.title.indexOf('Confidence') !== -1 || | |
| section.title.indexOf('Slack') !== -1 || | |
| section.title.indexOf('Deep Dive') !== -1 || | |
| i >= 4; | |
| html += '<div class="output-block"' + (isFullWidth ? ' style="grid-column:1/-1;"' : '') + '>'; | |
| html += '<div class="output-block-title">' + section.title + '</div>'; | |
| html += '<div class="output-block-content">' + renderMarkdown(section.content) + '</div>'; | |
| html += '</div>'; | |
| } | |
| html += '</div>'; | |
| outputContent.innerHTML = html; | |
| outputArea.style.display = 'block'; | |
| outputArea.scrollIntoView({ behavior: 'smooth', block: 'start' }); | |
| outputArea.dataset.raw = markdown; | |
| } | |
| function parseSections(md) { | |
| var lines = md.split('\n'); | |
| var sections = []; | |
| var current = null; | |
| for (var i = 0; i < lines.length; i++) { | |
| var line = lines[i]; | |
| var heading = line.match(/^#{1,3}\s+(.+)/); | |
| if (heading) { | |
| if (current) sections.push(current); | |
| current = { title: heading[1].trim(), content: '' }; | |
| } else if (current) { | |
| current.content += line + '\n'; | |
| } else if (line.trim()) { | |
| current = { title: '\uD83C\uDFAF Summary', content: line + '\n' }; | |
| } | |
| } | |
| if (current) sections.push(current); | |
| return sections.length > 0 ? sections : [{ title: '\uD83D\uDCE4 Translation', content: md }]; | |
| } | |
| function renderMarkdown(text) { | |
| text = text.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>'); | |
| text = text.replace(/\*(.+?)\*/g, '<em>$1</em>'); | |
| text = text.replace(/`([^`]+)`/g, '<code style="background:rgba(108,92,231,0.08);padding:2px 6px;border-radius:3px;font-size:12px;">$1</code>'); | |
| text = text.replace(/^- (.+)/gm, '<ul><li>$1</li></ul>'); | |
| text = text.replace(/^(\d+)\.\s+(.+)/gm, '<li><strong>$1.</strong> $2</li>'); | |
| // Severity tags | |
| text = text.replace(/\uD83D\uDD34 Critical/g, '<span class="tag tag-high">\uD83D\uDD34 Critical</span>'); | |
| text = text.replace(/\uD83D\uDD34 Immediate/g, '<span class="tag tag-high">\uD83D\uDD34 Immediate</span>'); | |
| text = text.replace(/\uD83D\uDFE1 Moderate/g, '<span class="tag tag-medium">\uD83D\uDFE1 Moderate</span>'); | |
| text = text.replace(/\uD83D\uDFE1 This Sprint/g, '<span class="tag tag-medium">\uD83D\uDFE1 This Sprint</span>'); | |
| text = text.replace(/\uD83D\uDFE2 Low/g, '<span class="tag tag-low">\uD83D\uDFE2 Low</span>'); | |
| text = text.replace(/\uD83D\uDFE2 Backlog/g, '<span class="tag tag-low">\uD83D\uDFE2 Backlog</span>'); | |
| text = text.replace(/\u2139\uFE0F Informational/g, '<span class="tag tag-info">\u2139\uFE0F Informational</span>'); | |
| text = text.replace(/\n\n/g, '<br><br>'); | |
| text = text.replace(/<\/ul>\s*<ul>/g, ''); | |
| return text; | |
| } | |
| // ════════════════════════════════════════════════════════════════ | |
| // COPY / EXPORT | |
| // ════════════════════════════════════════════════════════════════ | |
| function copyOutput() { | |
| var raw = document.getElementById('outputArea').dataset.raw || ''; | |
| navigator.clipboard.writeText(raw).then(function() { showToast('Copied — ready to paste!'); }); | |
| } | |
| function copySlack() { | |
| var raw = document.getElementById('outputArea').dataset.raw || ''; | |
| var slack = raw.replace(/#{1,3}\s+/g, '*').replace(/\*\*(.+?)\*\*/g, '*$1*').replace(/^- /gm, '\u2022 '); | |
| navigator.clipboard.writeText(slack).then(function() { showToast('Copied in Slack format — paste it in any channel!'); }); | |
| } | |
| function exportMarkdown() { | |
| var raw = document.getElementById('outputArea').dataset.raw || ''; | |
| var blob = new Blob([raw], { type: 'text/markdown' }); | |
| var url = URL.createObjectURL(blob); | |
| var a = document.createElement('a'); | |
| a.href = url; a.download = 'translation.md'; a.click(); | |
| URL.revokeObjectURL(url); | |
| showToast('Downloaded as Markdown!'); | |
| } | |
| function showToast(message) { | |
| var existing = document.querySelector('.toast'); | |
| if (existing) existing.remove(); | |
| var toast = document.createElement('div'); | |
| toast.className = 'toast'; | |
| toast.textContent = message; | |
| document.body.appendChild(toast); | |
| setTimeout(function() { if (toast.parentNode) toast.remove(); }, 3000); | |
| } | |
| </script> | |
| </body> | |
| </html> |