Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>🚀 My Custom GPTs</title> | |
| <style> | |
| body { | |
| margin:0; | |
| background:#f9fafb; | |
| } | |
| #gpt-icon-grid{ | |
| --radius:16px;--gap:18px; | |
| --btnGrad:linear-gradient(135deg,#34d399,#4f46e5); /* سبز → انڈیگو */ | |
| --btnText:#fff;--title:#111;--muted:#555; | |
| background:#fff;padding:20px;max-width:1200px;margin:auto; | |
| } | |
| #gpt-icon-grid *{box-sizing:border-box;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial} | |
| #gpt-icon-grid .grid{ | |
| display:grid;gap:var(--gap); | |
| grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); | |
| align-items:stretch; | |
| } | |
| .gpt-card{ | |
| aspect-ratio:2/3; | |
| background:#fff; | |
| border:1px solid #eee; | |
| border-radius:var(--radius); | |
| display:flex; | |
| flex-direction:column; | |
| justify-content:space-between; | |
| text-align:center; | |
| box-shadow:0 4px 16px rgba(0,0,0,.08); | |
| transition:transform .18s ease, box-shadow .18s ease; | |
| } | |
| .gpt-card:hover{ transform:translateY(-4px); box-shadow:0 10px 28px rgba(0,0,0,.15); } | |
| .content{ | |
| flex:1; | |
| display:flex; | |
| flex-direction:column; | |
| justify-content:center; | |
| align-items:center; | |
| padding:20px; | |
| } | |
| .icon-wrap{ | |
| width:70px;height:70px;margin-bottom:12px; | |
| border-radius:20px;display:grid;place-items:center; | |
| background:linear-gradient(135deg,#34d399,#4f46e5); | |
| } | |
| .icon-wrap svg{width:38px;height:38px;fill:#fff} | |
| .title{margin:6px 0;font-weight:800;font-size:18px;color:var(--title)} | |
| .desc{ | |
| margin:0;color:var(--muted);font-size:13px; | |
| line-height:1.4;min-height:48px; | |
| } | |
| .actions{padding:14px} | |
| .btn{ | |
| display:inline-block;width:100%; | |
| padding:10px 14px;border-radius:999px; | |
| background:var(--btnGrad);color:var(--btnText); | |
| font-weight:700;text-decoration:none;transition:opacity .2s ease; | |
| } | |
| .btn:hover{opacity:0.9} | |
| #gpt-icon-grid .section-title{text-align:center;font-weight:800;font-size:22px;margin-bottom:20px;color:#111} | |
| </style> | |
| </head> | |
| <body> | |
| <div id="gpt-icon-grid"> | |
| <h2 class="section-title">My Classic Collection</h2> | |
| <div class="grid"> | |
| <!-- 1: Urdu Writer --> | |
| <div class="gpt-card"> | |
| <div class="content"> | |
| <div class="icon-wrap"> | |
| <svg viewBox="0 0 24 24"><path d="M14.5 2l7.5 7.5-6.8 2-4.7 4.7-4.5 1 1-4.5 4.7-4.7 2-6.8zM7 17l2 2-2.5.6L6.4 19 7 17z"/></svg> | |
| </div> | |
| <h3 class="title">Urdu Writer — اردو نویس</h3> | |
| <p class="desc">خالص اُردو میں تخلیق، تدوین اور نثر/مضامین لکھنے میں مدد۔</p> | |
| </div> | |
| <div class="actions"> | |
| <a class="btn" href="https://chatgpt.com/g/g-688799eb9000819183113787e6423764-rdw-nwys-urdu-writer" target="_blank">Start Chat</a> | |
| </div> | |
| </div> | |
| <!-- 2: Urdu AI Official --> | |
| <div class="gpt-card"> | |
| <div class="content"> | |
| <div class="icon-wrap"> | |
| <svg viewBox="0 0 24 24"><path d="M3 5a3 3 0 013-3h12a2 2 0 012 2v14a2 2 0 01-2 2H7a3 3 0 01-4-3V5zm4-1h11v14H7a1 1 0 110-2h10V6H7a3 3 0 00-3 3V6a2 2 0 012-2z"/></svg> | |
| </div> | |
| <h3 class="title">Urdu AI Official</h3> | |
| <p class="desc">اردو زبان کی جامع رہنمائی، سوالات کے جوابات اور عمومی مدد۔</p> | |
| </div> | |
| <div class="actions"> | |
| <a class="btn" href="https://chatgpt.com/g/g-pE1VKxczG-urdu-ai-official" target="_blank">Start Chat</a> | |
| </div> | |
| </div> | |
| <!-- 3: Urdu Dan --> | |
| <div class="gpt-card"> | |
| <div class="content"> | |
| <div class="icon-wrap"> | |
| <svg viewBox="0 0 24 24"><path d="M2 12a8 8 0 1114.9 4.6L22 22l-5.4-4.1A8 8 0 012 12zm5-1h6v2H7v-2zm-2-3h10v2H5V8z"/></svg> | |
| </div> | |
| <h3 class="title">Urdu Dan</h3> | |
| <p class="desc">اردو فہم، مکالمہ اور روزمرہ گفتگو میں ہوشیار معاون۔</p> | |
| </div> | |
| <div class="actions"> | |
| <a class="btn" href="https://chatgpt.com/g/g-E3BkYMbpC-urdu-dan" target="_blank">Start Chat</a> | |
| </div> | |
| </div> | |
| <!-- 4: English ↔ Urdu Translator --> | |
| <div class="gpt-card translator-card"> | |
| <div class="content"> | |
| <div class="icon-wrap"> | |
| <svg viewBox="0 0 24 24"><path d="M7 7h10l-2 2h-3v4h-2V9H7L7 7zm10 10H7l2-2h3v-4h2v4h3l2 2z"/></svg> | |
| </div> | |
| <h3 class="title" style="font-size:16px;">English ↔ Urdu Translator</h3> | |
| <p class="desc">انگلش اور اُردو کے درمیان تیز، درست اور سیاق کے مطابق ترجمہ۔</p> | |
| </div> | |
| <div class="actions"> | |
| <a class="btn" href="https://chatgpt.com/g/g-pt2nK73A5-english-urdu-translator" target="_blank">Start Chat</a> | |
| </div> | |
| </div> | |
| <!-- 5: English → Roman Urdu --> | |
| <div class="gpt-card"> | |
| <div class="content"> | |
| <div class="icon-wrap"> | |
| <svg viewBox="0 0 24 24"><path d="M4 4h16v4H4V4zm0 6h16v10H4V10zm2 2v6h12v-6H6zM7 6h2v2H7V6zm4 0h2v2h-2V6zm4 0h2v2h-2V6z"/></svg> | |
| </div> | |
| <h3 class="title">English → Roman Urdu</h3> | |
| <p class="desc">انگلش متن کو آسان اور پڑھنے لائق رومن اُردو میں بدلیں۔</p> | |
| </div> | |
| <div class="actions"> | |
| <a class="btn" href="https://chatgpt.com/g/g-sSxVlPCON-english-to-roman-urdu-translator" target="_blank">Start Chat</a> | |
| </div> | |
| </div> | |
| <!-- 6: Roman Urdu → Urdu --> | |
| <div class="gpt-card"> | |
| <div class="content"> | |
| <div class="icon-wrap"> | |
| <svg viewBox="0 0 24 24"><path d="M12 2l3 3-6 6-3-3 6-6zm-7 9l3 3-3 6 6-3 3-3-6-6-3 3zM17 7l2 2-5 5-2-2 5-5z"/></svg> | |
| </div> | |
| <h3 class="title">Roman Urdu → Urdu</h3> | |
| <p class="desc">رومن اُردو کو صحیح املا اور رواں اردو رسم الخط میں تبدیل کریں۔</p> | |
| </div> | |
| <div class="actions"> | |
| <a class="btn" href="https://chatgpt.com/g/g-XKvOnI5ZT-roman-urdu-to-urdu" target="_blank">Start Chat</a> | |
| </div> | |
| </div> | |
| <!-- 7: Al-Quran — Classical Tafsir --> | |
| <div class="gpt-card"> | |
| <div class="content"> | |
| <div class="icon-wrap"> | |
| <svg viewBox="0 0 24 24"><path d="M4 4a2 2 0 012-2h9a2 2 0 012 2v14a2 2 0 01-2 2H6a3 3 0 01-3-3V6a2 2 0 012-2zm2 0h9v14H6a1 1 0 110-2h8V6H6a2 2 0 00-2 2V6a2 2 0 012-2zm12 3a5 5 0 004 4 5 5 0 01-4 4 5 5 0 010-8z"/></svg> | |
| </div> | |
| <h3 class="title">Al-Quran — Classical Tafsir</h3> | |
| <p class="desc">کلاسیکی تفاسیر، لغوی تحقیق اور سیاقی مطالعہ—ایک جگہ پر۔</p> | |
| </div> | |
| <div class="actions"> | |
| <a class="btn" href="https://chatgpt.com/g/g-68bd75dea5e4819197c0691fb96e8da4-al-quran-the-classical-tafsir-encyclopedia" target="_blank">Start Chat</a> | |
| </div> | |
| </div> | |
| <!-- 8: Al-Wakheel --> | |
| <div class="gpt-card"> | |
| <div class="content"> | |
| <div class="icon-wrap"> | |
| <svg viewBox="0 0 24 24"><path d="M15.5 14h-.8l-.3-.3A6.5 6.5 0 1015.5 14l4.5 4.5-1.5 1.5L14 15.5zm-5 0A4.5 4.5 0 1115 9.5 4.5 4.5 0 0110.5 14z"/></svg> | |
| </div> | |
| <h3 class="title">Al-Wakheel — Research Assistant</h3> | |
| <p class="desc">اسمارٹ تحقیق، خلاصہ نویسی اور حوالہ جات کی تلاش میں معاون۔</p> | |
| </div> | |
| <div class="actions"> | |
| <a class="btn" href="https://chatgpt.com/g/g-68acdef13f988191b285c6842b99197c-wkhyl-rth" target="_blank">Start Chat</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |