Spaces:

Nuzwa
/

_Classic_Collection_

Running

App Files Files Community

Nuzwa commited on Sep 29, 2025

Commit

5c5f81d

verified ·

1 Parent(s): 74846d0

Update index.html

Browse files

Files changed (1) hide show

index.html +29 -39

index.html CHANGED Viewed

@@ -1,17 +1,25 @@
-<!-- Responsive GPT Icon Cards -->
-<div id="gpt-icon-grid">
   <style>
     #gpt-icon-grid{
       --radius:16px;--gap:18px;
       --btnGrad:linear-gradient(135deg,#34d399,#4f46e5); /* سبز → انڈیگو */
       --btnText:#fff;--title:#111;--muted:#555;
-      background:#fff;padding:20px;
     }
     #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;
@@ -45,7 +53,7 @@
     .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}
@@ -59,7 +67,10 @@
     #gpt-icon-grid .section-title{text-align:center;font-weight:800;font-size:22px;margin-bottom:20px;color:#111}
   </style>
   <h2 class="section-title">🚀 My Custom GPTs</h2>
   <div class="grid">
@@ -68,10 +79,7 @@
     <div class="gpt-card">
       <div class="content">
         <div class="icon-wrap">
-          <!-- Pen Nib Icon -->
-          <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>
@@ -85,10 +93,7 @@
     <div class="gpt-card">
       <div class="content">
         <div class="icon-wrap">
-          <!-- Book Icon -->
-          <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>
@@ -102,10 +107,7 @@
     <div class="gpt-card">
       <div class="content">
         <div class="icon-wrap">
-          <!-- Chat Bubbles Icon -->
-          <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>
@@ -119,10 +121,7 @@
     <div class="gpt-card translator-card">
       <div class="content">
         <div class="icon-wrap">
-          <!-- Swap/Translate Icon -->
-          <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>
@@ -136,10 +135,7 @@
     <div class="gpt-card">
       <div class="content">
         <div class="icon-wrap">
-          <!-- Keyboard/Text Icon -->
-          <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>
@@ -153,10 +149,7 @@
     <div class="gpt-card">
       <div class="content">
         <div class="icon-wrap">
-          <!-- Fountain Pen Icon -->
-          <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>
@@ -166,14 +159,11 @@
       </div>
     </div>
-    <!-- 7: Al-Quran — Classical Tafsir Encyclopedia -->
     <div class="gpt-card">
       <div class="content">
         <div class="icon-wrap">
-          <!-- Quran/Book + Crescent Icon -->
-          <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>
@@ -183,14 +173,11 @@
       </div>
     </div>
-    <!-- 8: Al-Wakheel — Research Assistant -->
     <div class="gpt-card">
       <div class="content">
         <div class="icon-wrap">
-          <!-- Magnifying Glass / Research Icon -->
-          <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>
@@ -202,3 +189,6 @@
   </div>
 </div>

+<!DOCTYPE html>
+<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;
     .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}
     #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 Custom GPTs</h2>
   <div class="grid">
     <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 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 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 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 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 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>
+    <!-- 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>
+    <!-- 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>
+</body>
+</html>