Spaces:
Running
Running
| <html lang="ur" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>coachproai — Cinematic Story Writer</title> | |
| <style> | |
| :root{ | |
| --primary-color-start:#4F46E5; | |
| --primary-color-end:#8B5CF6; | |
| --background-color:#f8f9fc; | |
| --container-bg:#ffffff; | |
| --text-color:#1f2937; | |
| --label-color:#374151; | |
| --border-color:#d1d5db; | |
| --shadow-color:rgba(0,0,0,0.08); | |
| } | |
| *{box-sizing:border-box} | |
| body{ | |
| margin:0; font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Noto Naskh Arabic",Arial; | |
| background:var(--background-color); color:var(--text-color); | |
| display:flex; align-items:center; justify-content:center; padding:20px; | |
| } | |
| .app{ | |
| width:100%; max-width:500px; background:var(--container-bg); | |
| border-radius:15px; box-shadow:0 4px 15px var(--shadow-color); | |
| padding:28px; border:1px solid var(--border-color); position:relative; overflow:hidden; | |
| } | |
| .app::before{ | |
| content:""; position:absolute; inset:0 0 auto 0; height:6px; | |
| background:linear-gradient(90deg,var(--primary-color-start),var(--primary-color-end)); | |
| } | |
| h1{ | |
| margin:8px 0 16px; font-size:1.95em; font-weight:800; text-align:center; | |
| background:linear-gradient(90deg,var(--primary-color-start),var(--primary-color-end)); | |
| -webkit-background-clip:text; background-clip:text; color:transparent; | |
| } | |
| .label{color:var(--label-color); font-weight:700; margin:10px 0 8px; display:block} | |
| .input{ | |
| width:100%; border:1px solid var(--border-color); border-radius:12px; | |
| padding:16px 16px; font-size:1.06rem; outline:none; background:#fff; | |
| transition:border-color .2s, box-shadow .2s; | |
| } | |
| .input:focus{ border-color:var(--primary-color-start); box-shadow:0 0 0 4px rgba(79,70,229,.15) } | |
| .display{ | |
| margin-top:14px; border:1px dashed var(--border-color); background:#fafafa; | |
| border-radius:12px; padding:16px; min-height:110px; white-space:pre-wrap; line-height:1.7; | |
| position:relative; | |
| } | |
| .cursor{ | |
| display:inline-block; width:10px; margin-right:2px; height:1.2em; vertical-align:baseline; | |
| background:linear-gradient(90deg,var(--primary-color-start),var(--primary-color-end)); | |
| animation:blink .9s steps(1) infinite; | |
| } | |
| @keyframes blink{ 50%{opacity:0} } | |
| .actions{ margin-top:14px; display:grid; gap:10px } | |
| .btn{ | |
| width:100%; border:0; border-radius:12px; padding:14px 16px; font-size:1.12rem; | |
| font-weight:800; cursor:pointer; color:#fff; | |
| background:linear-gradient(90deg,var(--primary-color-start),var(--primary-color-end)); | |
| box-shadow:0 4px 10px rgba(79,70,229,.20); transition:transform .05s ease, box-shadow .2s; | |
| } | |
| .btn:focus{outline:none; box-shadow:0 0 0 4px rgba(79,70,229,.15)} | |
| .btn:active{transform:translateY(1px)} | |
| .footer{margin-top:16px; text-align:center; font-size:.85rem; color:#6b7280} | |
| .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,1px,1px);white-space:nowrap;border:0} | |
| </style> | |
| </head> | |
| <body> | |
| <main class="app" id="app"> | |
| <h1>Story Writer — Cinematic Shot Builder</h1> | |
| <label for="idea" class="label">One-line Idea / ایک جملے کا آئیڈیا</label> | |
| <input id="idea" class="input" type="text" placeholder="مثلاً: بارش کی رات میں چلتی ٹرام، کھڑکی سے باہر دیکھتا ہوا نوجوان…" autocomplete="off" /> | |
| <div id="display" class="display" role="status" aria-live="polite" aria-atomic="true"> | |
| <span id="typed"></span><span class="cursor" aria-hidden="true"></span> | |
| </div> | |
| <div class="actions"> | |
| <button id="generateBtn" class="btn">Generate</button> | |
| <button id="copyBtn" class="btn">Copy & Paste Now</button> | |
| </div> | |
| <p class="footer">© coachproai — PurpleUI</p> | |
| <span id="announce" class="sr-only" aria-live="polite" aria-atomic="true"></span> | |
| </main> | |
| <script> | |
| const GPT_URL = 'https://chatgpt.com/g/g-68d5c0050cdc8191bd321f38b2ecb935-cinematic-story-writer'; | |
| const app = document.getElementById('app'); | |
| const idea = document.getElementById('idea'); | |
| const typed = document.getElementById('typed'); | |
| const generateBtn = document.getElementById('generateBtn'); | |
| const copyBtn = document.getElementById('copyBtn'); | |
| const announce = document.getElementById('announce'); | |
| // Clipboard helper | |
| async function copyText(text){ | |
| try{ await navigator.clipboard.writeText(text); } | |
| catch{ | |
| const ta = document.createElement('textarea'); | |
| ta.value = text; document.body.appendChild(ta); ta.select(); | |
| try{ document.execCommand('copy'); }catch(e){} | |
| ta.remove(); | |
| } | |
| } | |
| // Typewriter | |
| let twState = { timer:null, idx:0, text:'' }; | |
| function resetTypewriter(){ | |
| if(twState.timer){ clearInterval(twState.timer); twState.timer=null; } | |
| twState.idx=0; typed.textContent=''; | |
| } | |
| function startTypewriter(text){ | |
| resetTypewriter(); | |
| twState.text = text; | |
| const speed = 18 + Math.floor(Math.random()*8); | |
| twState.timer = setInterval(()=>{ | |
| if(twState.idx >= twState.text.length){ | |
| clearInterval(twState.timer); twState.timer=null; return; | |
| } | |
| typed.textContent += twState.text.charAt(twState.idx++); | |
| }, speed); | |
| } | |
| function buildText(){ | |
| return (idea.value || '').trim(); | |
| } | |
| generateBtn.addEventListener('click', async ()=>{ | |
| const text = buildText(); | |
| if(!text){ | |
| typed.textContent = 'براہِ کرم پہلے اپنا آئیڈیا لکھیں / Please write your idea first.'; | |
| announce.textContent = 'کوئی آئیڈیا نہیں'; | |
| return; | |
| } | |
| await copyText(text); | |
| startTypewriter(text); | |
| const orig = generateBtn.textContent; | |
| generateBtn.textContent = 'Copied!'; | |
| setTimeout(()=> generateBtn.textContent = orig, 1200); | |
| announce.textContent = 'آئیڈیا کاپی ہو گیا'; | |
| }); | |
| copyBtn.addEventListener('click', async ()=>{ | |
| const text = buildText(); | |
| if(!text){ | |
| typed.textContent = 'براہِ کرم پہلے اپنا آئیڈیا لکھیں / Please write your idea first.'; | |
| announce.textContent = 'کوئی آئیڈیا نہیں'; | |
| return; | |
| } | |
| const orig = copyBtn.textContent; | |
| copyBtn.textContent = 'Copied! • Opening GPT…'; | |
| await copyText(text); | |
| const win = window.open(GPT_URL, '_blank', 'noopener'); | |
| if(!win){ | |
| copyBtn.textContent = 'Popup blocked — Tap again'; | |
| setTimeout(()=> copyBtn.textContent = orig, 1800); | |
| } else { | |
| setTimeout(()=> copyBtn.textContent = orig, 1200); | |
| } | |
| announce.textContent = 'کاپی کر کے نیا ٹیب کھولا گیا'; | |
| }); | |
| idea.addEventListener('keydown', (e)=>{ | |
| if(e.key==='Enter'){ e.preventDefault(); generateBtn.click(); } | |
| }); | |
| let kb=false; | |
| window.addEventListener('keydown',e=>{ | |
| if(e.key==='Tab' && !kb){ kb=true; app.style.boxShadow='0 0 0 4px rgba(79,70,229,.08)'; } | |
| }); | |
| window.addEventListener('mousedown',()=>{ kb=false; app.style.boxShadow='0 4px 15px var(--shadow-color)'; }); | |
| window.addEventListener('DOMContentLoaded',()=> idea.focus()); | |
| </script> | |
| </body> | |
| </html> | |