| <!DOCTYPE html> |
| <html lang="fa" dir="rtl"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>۱۰ ایده دکمه «ساخت با هوش مصنوعی»</title> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800;900&display=swap'); |
| |
| * { box-sizing: border-box; } |
| html,body{margin:0;} |
| body{ |
| font-family:'Vazirmatn',sans-serif; |
| direction:rtl; |
| background-color:#F4F6FB; |
| background-image: radial-gradient(#D8DEEB 0.6px, transparent 0.6px); |
| background-size: 18px 18px; |
| color:#1A202C; |
| line-height:1.7; |
| } |
| |
| .page-header{ max-width:1180px; margin:0 auto; padding:54px 24px 8px; text-align:center; } |
| .page-header h1{ |
| font-size:2rem; font-weight:900; margin:0 0 12px; |
| background:linear-gradient(90deg,#4A6CFA,#0FD4A8); |
| -webkit-background-clip:text; -webkit-text-fill-color:transparent; |
| } |
| .page-header p{ margin:0 auto; max-width:620px; color:#626F86; font-size:.98rem; } |
| .page-header .hint{ |
| display:inline-block; margin-top:18px; font-size:.8rem; font-weight:700; |
| color:#3553D6; background:#E9EDFF; padding:8px 16px; border-radius:30px; |
| } |
| |
| .grid{ |
| display:grid; grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); |
| gap:24px; max-width:1180px; margin:36px auto 70px; padding:0 24px; |
| } |
| |
| .option-card{ |
| background:#fff; border-radius:22px; border:1px solid #EAEFF7; |
| box-shadow:0 4px 16px -6px rgba(20,20,40,.07); |
| padding:22px; display:flex; flex-direction:column; gap:16px; |
| } |
| .option-meta{ display:flex; gap:14px; align-items:flex-start; } |
| .option-num{ font-weight:900; font-size:1.05rem; color:#C7CCDA; min-width:32px; flex-shrink:0; } |
| .option-meta h3{ margin:0 0 4px; font-size:1.02rem; font-weight:800; color:#1A202C; } |
| .option-meta p{ margin:0; font-size:.8rem; color:#626F86; line-height:1.6; } |
| |
| .stage{ |
| background:#F8F9FC; border-radius:16px; padding:20px; |
| background-image: radial-gradient(#D8DEEB 0.5px, transparent 0.5px); |
| background-size:16px 16px; |
| display:flex; align-items:center; justify-content:center; |
| } |
| |
| .ai-btn{ |
| width:100%; border:none; cursor:pointer; font-family:'Vazirmatn',sans-serif; |
| display:flex; align-items:center; transition:transform .25s ease, box-shadow .25s ease; |
| } |
| .ai-btn:hover{ transform:translateY(-3px); } |
| |
| |
| .c1{ |
| background:linear-gradient(135deg,#0B1220 0%,#16213E 55%,#1F3A93 100%); |
| color:#fff; padding:18px 22px; border-radius:18px; gap:18px; |
| box-shadow:0 10px 26px -8px rgba(31,58,147,.5); |
| } |
| .c1-wave{ display:flex; align-items:center; gap:4px; height:32px; flex-shrink:0; } |
| .c1-wave span{ width:4px; height:100%; border-radius:3px; background:linear-gradient(180deg,#7BE0FF,#4A6CFA); animation:c1bar 1.1s ease-in-out infinite; } |
| .c1-wave span:nth-child(1){animation-delay:0s} .c1-wave span:nth-child(2){animation-delay:.15s} |
| .c1-wave span:nth-child(3){animation-delay:.3s} .c1-wave span:nth-child(4){animation-delay:.45s} |
| .c1-wave span:nth-child(5){animation-delay:.6s} |
| @keyframes c1bar{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}} |
| .c1-text{ display:flex; flex-direction:column; gap:3px; text-align:right; } |
| .c1-text strong{ font-size:1.02rem; font-weight:800; } |
| .c1-text small{ font-size:.75rem; color:#9FB3FF; font-weight:500; } |
| .c1-spark{ margin-right:auto; font-size:1.4rem; animation:c1spark 1.8s ease-in-out infinite; } |
| @keyframes c1spark{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.25) rotate(15deg)}} |
| |
| |
| .c2{ |
| background:#fff; border:2px solid #E0E7FF; border-radius:18px; padding:14px 20px; gap:14px; |
| box-shadow:0 6px 16px -6px rgba(74,108,250,.15); |
| } |
| .c2-avatars{ display:flex; align-items:center; gap:6px; flex-shrink:0; } |
| .c2-av{ width:40px; height:40px; border-radius:50%; background:#EEF1FF; border:2px solid #C7D2FE; |
| display:flex; align-items:center; justify-content:center; font-size:1.05rem; } |
| .c2-pulse{ width:24px; height:2px; border-radius:2px; background:linear-gradient(90deg,#C7D2FE,#4A6CFA,#C7D2FE); |
| background-size:200% 100%; animation:c2flow 1.4s linear infinite; } |
| @keyframes c2flow{0%{background-position:0% 0}100%{background-position:200% 0}} |
| .c2-chip{ width:30px; height:30px; border-radius:9px; background:linear-gradient(135deg,#4A6CFA,#0FD4A8); color:#fff; |
| font-size:.62rem; font-weight:800; display:flex; align-items:center; justify-content:center; |
| box-shadow:0 4px 10px rgba(74,108,250,.4); } |
| .c2-text{ display:flex; flex-direction:column; gap:2px; text-align:right; margin-right:auto; } |
| .c2-text strong{ font-size:.96rem; font-weight:800; color:#1A202C; } |
| .c2-text small{ font-size:.74rem; color:#8A94A6; } |
| |
| |
| .c3{ |
| background:#F7F5EF; border:2px solid #E4DFC9; border-radius:14px; padding:12px 16px; gap:12px; |
| box-shadow:inset 0 1px 3px rgba(0,0,0,.04); |
| } |
| .c3-input{ |
| flex-grow:1; background:#fff; border:1px solid #E4DFC9; border-radius:10px; padding:10px 14px; |
| font-size:.88rem; color:#3D3623; text-align:right; white-space:nowrap; overflow:hidden; |
| } |
| .c3-caret{ display:inline-block; margin-right:3px; color:#0DA986; font-weight:800; animation:blink 1s step-end infinite; } |
| @keyframes blink{50%{opacity:0}} |
| .c3-arrow{ font-size:1.2rem; color:#0DA986; flex-shrink:0; } |
| .c3-output{ width:42px; height:42px; border-radius:50%; background:#0FD4A8; color:#fff; flex-shrink:0; |
| display:flex; align-items:center; justify-content:center; font-size:1.25rem; |
| box-shadow:0 4px 12px rgba(15,212,168,.4); } |
| |
| |
| .c4{ |
| background:#fff; border:1px solid #EAEFF7; border-radius:18px; padding:14px 8px; gap:4px; |
| box-shadow:0 6px 16px -6px rgba(0,0,0,.06); justify-content:center; |
| } |
| .c4-step{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:8px 10px; |
| border-radius:12px; font-size:.7rem; font-weight:700; color:#8A94A6; flex:1; } |
| .c4-icon{ font-size:1.25rem; } |
| .c4-s1{ animation:c4pulse 2.4s ease-in-out infinite; animation-delay:0s; } |
| .c4-s2{ animation:c4pulse 2.4s ease-in-out infinite; animation-delay:.8s; } |
| .c4-s3{ animation:c4pulse 2.4s ease-in-out infinite; animation-delay:1.6s; } |
| @keyframes c4pulse{ |
| 0%,70%,100%{ background:transparent; color:#8A94A6; } |
| 20%,50%{ background:linear-gradient(135deg,#EDE9FE,#E0E7FF); color:#5B21B6; } |
| } |
| .c4-arrow{ color:#C7CCDA; font-size:1.1rem; flex-shrink:0; align-self:center; } |
| |
| |
| .c5{ |
| background:linear-gradient(135deg,#2A1A4A,#3B2570); border-radius:20px; padding:14px 20px; gap:16px; |
| box-shadow:0 12px 26px -8px rgba(91,33,182,.45); |
| } |
| .c5-orb{ position:relative; width:52px; height:52px; flex-shrink:0; display:flex; align-items:center; justify-content:center; } |
| .c5-core{ width:15px; height:15px; border-radius:50%; background:#fff; box-shadow:0 0 18px 5px #B794F6; animation:c5pulse 2s infinite; } |
| @keyframes c5pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}} |
| .c5-ring{ position:absolute; border:1.5px dashed rgba(255,255,255,.35); border-radius:50%; } |
| .c5-ring.r1{ width:36px; height:36px; animation:c5spin 6s linear infinite; } |
| .c5-ring.r2{ width:52px; height:52px; animation:c5spin 9s linear infinite reverse; } |
| @keyframes c5spin{from{transform:rotate(0)}to{transform:rotate(360deg)}} |
| .c5-text{ color:#fff; display:flex; flex-direction:column; gap:3px; text-align:right; } |
| .c5-text strong{ font-weight:800; font-size:.98rem; } |
| .c5-text small{ font-size:.74rem; color:#C4B5FD; } |
| |
| |
| .c6{ |
| background:linear-gradient(120deg,#FF6FB5,#FF9472,#FFD36E); border-radius:22px; padding:14px 20px; gap:16px; |
| box-shadow:0 10px 24px -6px rgba(255,111,181,.4); |
| } |
| .c6-bot{ position:relative; width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.25); |
| display:flex; align-items:center; justify-content:center; font-size:1.5rem; flex-shrink:0; |
| animation:c6bounce 1.8s ease-in-out infinite; } |
| @keyframes c6bounce{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-6deg)}} |
| .c6-wave-mini{ position:absolute; left:-9px; bottom:6px; display:flex; gap:2px; } |
| .c6-wave-mini span{ width:2.5px; height:9px; background:#fff; border-radius:2px; animation:c6w 1s ease-in-out infinite; } |
| .c6-wave-mini span:nth-child(2){animation-delay:.2s} .c6-wave-mini span:nth-child(3){animation-delay:.4s} |
| @keyframes c6w{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}} |
| .c6-text{ display:flex; flex-direction:column; gap:2px; text-align:right; color:#fff; } |
| .c6-text strong{ font-weight:800; font-size:.96rem; } |
| .c6-text small{ font-size:.74rem; color:rgba(255,255,255,.85); } |
| |
| |
| .c7{ |
| background:#0D1117; border:1px solid #21262D; border-radius:14px; padding:16px 18px; |
| flex-direction:column; align-items:stretch; gap:0; |
| box-shadow:0 10px 24px -8px rgba(0,0,0,.5); |
| } |
| .c7-dots{ display:flex; gap:6px; margin-bottom:10px; } |
| .c7-dot{ width:9px; height:9px; border-radius:50%; } |
| .c7-dot:nth-child(1){ background:#FF5F56; } .c7-dot:nth-child(2){ background:#FFBD2E; } .c7-dot:nth-child(3){ background:#27C93F; } |
| .c7-prompt{ direction:ltr; text-align:left; color:#3FFFA3; font-family:'Courier New',monospace; font-size:.88rem; } |
| .c7-cursor{ animation:blink 1s step-end infinite; } |
| |
| |
| .c8{ |
| background:#fff; border:1px solid #DCE7FF; border-radius:18px; padding:13px 18px; gap:16px; |
| box-shadow:0 8px 20px -8px rgba(59,130,246,.18); |
| } |
| .c8-text{ display:flex; flex-direction:column; gap:3px; text-align:right; } |
| .c8-text strong{ font-weight:800; font-size:.94rem; color:#1A202C; } |
| .c8-text small{ font-size:.73rem; color:#8A94A6; } |
| .c8-preview{ display:flex; align-items:center; gap:8px; margin-right:auto; background:#EFF6FF; |
| padding:7px 12px; border-radius:30px; flex-shrink:0; } |
| .c8-play{ width:24px; height:24px; border-radius:50%; background:#3B82F6; color:#fff; font-size:.6rem; |
| display:flex; align-items:center; justify-content:center; animation:c8ring 2s infinite; } |
| @keyframes c8ring{0%{box-shadow:0 0 0 0 rgba(59,130,246,.45)}70%{box-shadow:0 0 0 8px rgba(59,130,246,0)}100%{box-shadow:0 0 0 0 rgba(59,130,246,0)}} |
| .c8-bars{ display:flex; align-items:center; gap:2px; height:16px; } |
| .c8-bars span{ width:2.5px; background:#60A5FA; border-radius:2px; height:100%; animation:c8b 1.1s ease-in-out infinite; } |
| .c8-bars span:nth-child(odd){ animation-delay:.2s; } .c8-bars span:nth-child(3n){ animation-delay:.4s; } |
| @keyframes c8b{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}} |
| |
| |
| .c9{ |
| background:linear-gradient(100deg,#FFFBEA,#FFF3D6); border:1px solid #FCE8B5; border-radius:20px; |
| padding:14px 18px; gap:12px; box-shadow:0 10px 22px -8px rgba(217,164,6,.25); |
| } |
| .c9-wand{ font-size:1.5rem; flex-shrink:0; display:inline-block; animation:c9wand 2.2s ease-in-out infinite; } |
| @keyframes c9wand{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}} |
| .c9-trail{ display:flex; gap:3px; flex-shrink:0; } |
| .c9-trail span{ font-size:.65rem; color:#D4A017; animation:c9tw 1.8s ease-in-out infinite; } |
| .c9-trail span:nth-child(2){animation-delay:.3s} .c9-trail span:nth-child(3){animation-delay:.6s} |
| @keyframes c9tw{0%,100%{opacity:.2;transform:scale(.7)}50%{opacity:1;transform:scale(1.2)}} |
| .c9-bars{ display:flex; align-items:center; gap:2px; height:15px; margin-right:auto; flex-shrink:0; } |
| .c9-bars span{ width:3px; border-radius:2px; height:100%; background:linear-gradient(180deg,#0FD4A8,#0DA986); animation:c9b 1s ease-in-out infinite; } |
| .c9-bars span:nth-child(2){animation-delay:.15s} .c9-bars span:nth-child(3){animation-delay:.3s} .c9-bars span:nth-child(4){animation-delay:.45s} |
| @keyframes c9b{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}} |
| .c9-text{ font-weight:800; color:#7C5E10; font-size:.9rem; text-align:right; } |
| |
| |
| .c10{ |
| background:linear-gradient(135deg,#F0FDF9,#EAF6FF); border:1px solid #D7F0E8; border-radius:20px; |
| padding:14px 18px; gap:12px; align-items:center; box-shadow:0 8px 18px -8px rgba(15,212,168,.2); |
| } |
| .c10-avatar{ width:38px; height:38px; border-radius:50%; background:#fff; flex-shrink:0; |
| display:flex; align-items:center; justify-content:center; font-size:1.15rem; box-shadow:0 2px 8px rgba(0,0,0,.08); } |
| .c10-bubble{ background:#fff; border-radius:14px; padding:10px 14px; font-size:.8rem; color:#234; |
| line-height:1.6; text-align:right; box-shadow:0 2px 8px rgba(0,0,0,.05); flex-grow:1; } |
| .c10-cta{ margin-right:0; font-weight:800; color:#0DA986; font-size:.8rem; white-space:nowrap; flex-shrink:0; } |
| |
| @media (max-width:420px){ |
| .ai-btn{ flex-wrap:wrap; } |
| } |
| </style> |
| </head> |
| <body> |
|
|
| <div class="page-header"> |
| <h1>۱۰ ایده طراحی برای دکمه «ساخت پروژه با هوش مصنوعی»</h1> |
| <p>هر کارت یک مفهوم بصری کاملاً متفاوت برای رساندن «ساخت پادکست با هوش مصنوعی» رو نشون میده. هر کدوم رو پسندیدی، همون بلوک HTML/CSS رو بردار و جای دکمه فعلی توی برنامهت بگذار.</p> |
| <span class="hint">فقط برای پیشنمایش و انتخاب — کد نهایی رو خودت کپی کن ✂️</span> |
| </div> |
|
|
| <div class="grid"> |
|
|
| <section class="option-card"> |
| <div class="option-meta"> |
| <span class="option-num">۰۱</span> |
| <div><h3>موج صدا + درخشش هوشمند</h3><p>نوار صدای تپنده کنار یک ستاره چشمکزن؛ همون لحظه یاد «صدا + هوش مصنوعی» میافته.</p></div> |
| </div> |
| <div class="stage"> |
| <button type="button" class="ai-btn c1"> |
| <span class="c1-wave"><span></span><span></span><span></span><span></span><span></span></span> |
| <span class="c1-text"><strong>بساز با هوش مصنوعی</strong><small>از روی یک موضوع، پادکست کامل بساز</small></span> |
| <span class="c1-spark">✨</span> |
| </button> |
| </div> |
| </section> |
|
|
| <section class="option-card"> |
| <div class="option-meta"> |
| <span class="option-num">۰۲</span> |
| <div><h3>اتصال دو گوینده</h3><p>دو آیکون میکروفون که با یک چیپ «AI» به هم وصل میشن؛ یعنی هوش مصنوعی گفتگوی دو نفره میسازه.</p></div> |
| </div> |
| <div class="stage"> |
| <button type="button" class="ai-btn c2"> |
| <span class="c2-avatars"> |
| <span class="c2-av">🎙️</span><span class="c2-pulse"></span> |
| <span class="c2-chip">AI</span><span class="c2-pulse"></span> |
| <span class="c2-av">🎙️</span> |
| </span> |
| <span class="c2-text"><strong>تیم گویندگان هوش مصنوعی</strong><small>یک موضوع بده، گفتگوی چندنفره بگیر</small></span> |
| </button> |
| </div> |
| </section> |
|
|
| <section class="option-card"> |
| <div class="option-meta"> |
| <span class="option-num">۰۳</span> |
| <div><h3>تایپ موضوع → خروجی صوتی</h3><p>دقیقاً همون کاری که کاربر میکنه: یه متن مینویسه و یه پادکست (هدفون) تحویل میگیره.</p></div> |
| </div> |
| <div class="stage"> |
| <button type="button" class="ai-btn c3"> |
| <span class="c3-input">تاریخچه پیدایش قهوه<span class="c3-caret">|</span></span> |
| <span class="c3-arrow">←</span> |
| <span class="c3-output">🎧</span> |
| </button> |
| </div> |
| </section> |
|
|
| <section class="option-card"> |
| <div class="option-meta"> |
| <span class="option-num">۰۴</span> |
| <div><h3>مسیر سهمرحلهای</h3><p>موضوع ← هوش مصنوعی ← پادکست؛ یک نور بهترتیب از مرحلهای به مرحله بعد حرکت میکنه.</p></div> |
| </div> |
| <div class="stage"> |
| <button type="button" class="ai-btn c4"> |
| <span class="c4-step c4-s1"><span class="c4-icon">📝</span><span>موضوع</span></span> |
| <span class="c4-arrow">‹</span> |
| <span class="c4-step c4-s2"><span class="c4-icon">🧠</span><span>هوش مصنوعی</span></span> |
| <span class="c4-arrow">‹</span> |
| <span class="c4-step c4-s3"><span class="c4-icon">🎙️</span><span>پادکست</span></span> |
| </button> |
| </div> |
| </section> |
|
|
| <section class="option-card"> |
| <div class="option-meta"> |
| <span class="option-num">۰۵</span> |
| <div><h3>هاله هوش مصنوعی</h3><p>یک کُره نورانی با حلقههای مداری در حال چرخش؛ حس یک موتور هوشمند زنده.</p></div> |
| </div> |
| <div class="stage"> |
| <button type="button" class="ai-btn c5"> |
| <span class="c5-orb"><span class="c5-ring r1"></span><span class="c5-ring r2"></span><span class="c5-core"></span></span> |
| <span class="c5-text"><strong>تولید پادکست با هوش مصنوعی</strong><small>موتور هوشمند سناریو و صدا</small></span> |
| </button> |
| </div> |
| </section> |
|
|
| <section class="option-card"> |
| <div class="option-meta"> |
| <span class="option-num">۰۶</span> |
| <div><h3>دستیار رباتیک و بازیگوش</h3><p>یک ربات بانمک که موج صدا از کنارش بیرون میزنه؛ حس صمیمی و سرگرمکننده.</p></div> |
| </div> |
| <div class="stage"> |
| <button type="button" class="ai-btn c6"> |
| <span class="c6-bot">🤖<span class="c6-wave-mini"><span></span><span></span><span></span></span></span> |
| <span class="c6-text"><strong>بگو، خودم میسازمش</strong><small>دستیار هوش مصنوعی ساخت پادکست</small></span> |
| </button> |
| </div> |
| </section> |
|
|
| <section class="option-card"> |
| <div class="option-meta"> |
| <span class="option-num">۰۷</span> |
| <div><h3>کنسول هوشمند</h3><p>ظاهر یک ترمینال با خط فرمان چشمکزن؛ مناسب کسایی که حس «تکنولوژی واقعی» میخوان.</p></div> |
| </div> |
| <div class="stage"> |
| <button type="button" class="ai-btn c7"> |
| <span class="c7-dots"><span class="c7-dot"></span><span class="c7-dot"></span><span class="c7-dot"></span></span> |
| <span class="c7-prompt">$ موضوع پادکست را بنویس<span class="c7-cursor">_</span></span> |
| </button> |
| </div> |
| </section> |
|
|
| <section class="option-card"> |
| <div class="option-meta"> |
| <span class="option-num">۰۸</span> |
| <div><h3>پیشنمایش نتیجه</h3><p>بهجای توضیح فرآیند، خود خروجی (پلیر در حال پخش) رو نشون میده؛ تمرکز روی نتیجه نه مسیر.</p></div> |
| </div> |
| <div class="stage"> |
| <button type="button" class="ai-btn c8"> |
| <span class="c8-text"><strong>پادکست را با هوش مصنوعی بساز</strong><small>نتیجه را همین الان ببین</small></span> |
| <span class="c8-preview"> |
| <span class="c8-play">▶</span> |
| <span class="c8-bars"><span></span><span></span><span></span><span></span><span></span><span></span></span> |
| </span> |
| </button> |
| </div> |
| </section> |
|
|
| <section class="option-card"> |
| <div class="option-meta"> |
| <span class="option-num">۰۹</span> |
| <div><h3>جادوی متن به صدا</h3><p>یک چوب جادو با درخششهای پراکنده که به نوار صدا تبدیل میشه؛ استعاره از «تبدیل متن به پادکست».</p></div> |
| </div> |
| <div class="stage"> |
| <button type="button" class="ai-btn c9"> |
| <span class="c9-wand">🪄</span> |
| <span class="c9-trail"><span>✦</span><span>✦</span><span>✦</span></span> |
| <span class="c9-bars"><span></span><span></span><span></span><span></span></span> |
| <span class="c9-text">ساخت پادکست با جادوی هوش مصنوعی</span> |
| </button> |
| </div> |
| </section> |
|
|
| <section class="option-card"> |
| <div class="option-meta"> |
| <span class="option-num">۱۰</span> |
| <div><h3>پیام دستیار</h3><p>شبیه یک حباب چت از طرف دستیار هوش مصنوعی؛ لحن گفتاری و دوستانه بهجای یک دکمه خشک.</p></div> |
| </div> |
| <div class="stage"> |
| <button type="button" class="ai-btn c10"> |
| <span class="c10-avatar">🤖</span> |
| <span class="c10-bubble">موضوع رو بگو، پادکست با چند صدای متفاوت برات میسازم 🎙️</span> |
| <span class="c10-cta">شروع کن ←</span> |
| </button> |
| </div> |
| </section> |
|
|
| </div> |
|
|
| </body> |
| </html> |
