Spaces:

udd542
/

anycoder-1fb6feb1

Running

App Files Files Community

udd542 commited on Jan 19

Commit

3b472ff

verified ·

1 Parent(s): 6f436ad

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +107 -60

index.html CHANGED Viewed

@@ -3,25 +3,27 @@
 <head>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>AI Prompt Architect | White Hat Edition</title>
   <!-- Importing FontAwesome for Icons -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
   <!-- Google Fonts for a clean look -->
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
   <style>
     :root {
-      --primary-color: #2563eb; /* Royal Blue */
       --glow-color: rgba(37, 99, 235, 0.4);
       --accent-color: #0ea5e9;
       --bg-color: #f8fafc;
-      --card-bg: rgba(255, 255, 255, 0.85);
       --text-color: #1e293b;
       --text-secondary: #64748b;
       --border-radius: 16px;
       --font-main: 'Inter', sans-serif;
-      --font-mono: 'Fira Code', 'Courier New', monospace;
       --shadow-soft: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
       --shadow-glow: 0 0 20px rgba(255, 255, 255, 0.8), 0 0 15px var(--glow-color);
     }
@@ -30,13 +32,14 @@
       box-sizing: border-box;
       margin: 0;
       padding: 0;
     }
     body {
       font-family: var(--font-main);
       background-color: var(--bg-color);
-      /* Subtle white/glowing mesh gradient background */
-      background-image:
         radial-gradient(at 0% 0%, rgba(255, 255, 255, 1) 0px, transparent 50%),
         radial-gradient(at 100% 100%, rgba(200, 220, 255, 0.5) 0px, transparent 50%);
       background-attachment: fixed;
@@ -49,10 +52,10 @@
     /* --- Header --- */
     header {
-      background: rgba(255, 255, 255, 0.7);
       backdrop-filter: blur(12px);
       -webkit-backdrop-filter: blur(12px);
-      padding: 1rem 2rem;
       display: flex;
       justify-content: space-between;
       align-items: center;
@@ -61,15 +64,17 @@
       top: 0;
       z-index: 100;
       box-shadow: var(--shadow-soft);
     }
     .brand {
-      font-size: 1.4rem;
       font-weight: 700;
       color: var(--text-color);
       display: flex;
       align-items: center;
-      gap: 12px;
       letter-spacing: -0.5px;
     }
@@ -79,15 +84,16 @@
     }
     .built-with {
-      font-size: 0.85rem;
       color: var(--text-secondary);
       text-decoration: none;
       transition: all 0.3s ease;
-      padding: 6px 14px;
       border-radius: 20px;
       background: rgba(255, 255, 255, 0.6);
       border: 1px solid rgba(255, 255, 255, 0.8);
-      font-weight: 500;
     }
     .built-with:hover {
@@ -102,22 +108,18 @@
       flex: 1;
       display: flex;
       justify-content: center;
-      align-items: center;
-      padding: 2rem;
     }
     .container {
       width: 100%;
-      max-width: 1100px;
       display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 2.5rem;
-    }
-    @media (max-width: 900px) {
-      .container {
-        grid-template-columns: 1fr;
-      }
     }
     /* --- Panels (Glassmorphism) --- */
@@ -125,14 +127,15 @@
       background: var(--card-bg);
       border: 1px solid rgba(255, 255, 255, 0.6);
       border-radius: var(--border-radius);
-      padding: 2.5rem;
       box-shadow: var(--shadow-glow);
       display: flex;
       flex-direction: column;
-      gap: 1.5rem;
       transition: transform 0.3s ease, box-shadow 0.3s ease;
       position: relative;
       overflow: hidden;
     }
     /* Decorative glow line at top of panel */
@@ -153,9 +156,9 @@
     }
     h2 {
-      font-size: 1.1rem;
       color: var(--text-color);
-      margin-bottom: 0.5rem;
       text-transform: uppercase;
       letter-spacing: 1px;
       font-weight: 700;
@@ -163,20 +166,20 @@
       align-items: center;
       gap: 10px;
     }
     h2 i {
-        color: var(--primary-color);
     }
     /* --- Form Elements --- */
     .form-group {
       display: flex;
       flex-direction: column;
-      gap: 0.6rem;
     }
     label {
-      font-size: 0.85rem;
       color: var(--text-secondary);
       font-weight: 600;
       text-transform: uppercase;
@@ -186,16 +189,17 @@
     select,
     textarea,
     input {
-      background: rgba(255, 255, 255, 0.8);
       border: 1px solid #e2e8f0;
       border-radius: 8px;
       color: var(--text-color);
-      padding: 14px;
       font-family: var(--font-main);
-      font-size: 0.95rem;
       outline: none;
       transition: all 0.3s ease;
-      box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
     }
     select:focus,
@@ -208,8 +212,8 @@
     textarea {
       resize: vertical;
-      min-height: 140px;
-      line-height: 1.6;
     }
     /* --- Button (White Glow Effect) --- */
@@ -218,7 +222,7 @@
       color: var(--primary-color);
       font-weight: 700;
       border: 1px solid white;
-      padding: 16px;
       border-radius: 8px;
       cursor: pointer;
       text-transform: uppercase;
@@ -228,9 +232,10 @@
       justify-content: center;
       align-items: center;
       gap: 10px;
-      font-size: 1rem;
       margin-top: auto;
       box-shadow: 0 4px 15px rgba(37, 99, 235, 0.15);
     }
     .btn-generate:hover {
@@ -248,21 +253,24 @@
       flex: 1;
       display: flex;
       flex-direction: column;
     }
     .output-wrapper {
       background: #fff;
       border: 1px solid #e2e8f0;
       border-radius: 8px;
-      padding: 1.5rem;
       flex: 1;
       overflow-y: auto;
       font-family: var(--font-mono);
       color: #334155;
       white-space: pre-wrap;
       position: relative;
-      min-height: 350px;
-      box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
     }
     .output-placeholder {
@@ -273,17 +281,18 @@
       color: #94a3b8;
       text-align: center;
       pointer-events: none;
     }
     .actions {
       display: flex;
-      gap: 12px;
       margin-top: 12px;
     }
     .btn-action {
       flex: 1;
-      padding: 12px;
       border-radius: 8px;
       border: 1px solid #e2e8f0;
       background: white;
@@ -293,15 +302,15 @@
       display: flex;
       justify-content: center;
       align-items: center;
-      gap: 8px;
       font-weight: 500;
-      font-size: 0.9rem;
     }
     .btn-action:hover {
       border-color: var(--primary-color);
       color: var(--primary-color);
-      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
     }
     .btn-clear:hover {
@@ -312,7 +321,7 @@
     /* --- Toast Notification --- */
     .toast {
       position: fixed;
-      bottom: 30px;
       left: 50%;
       transform: translateX(-50%) translateY(100px);
       background: white;
@@ -320,6 +329,7 @@
       padding: 12px 24px;
       border-radius: 50px;
       font-weight: 600;
       box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 0 15px rgba(37, 99, 235, 0.3);
       opacity: 0;
       transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
@@ -328,6 +338,7 @@
       align-items: center;
       gap: 10px;
       border: 1px solid rgba(37, 99, 235, 0.1);
     }
     .toast.show {
@@ -337,9 +348,17 @@
     /* --- Animations --- */
     @keyframes pulse-glow {
-      0% { text-shadow: 0 0 5px rgba(37, 99, 235, 0.2); }
-      50% { text-shadow: 0 0 15px rgba(37, 99, 235, 0.6); }
-      100% { text-shadow: 0 0 5px rgba(37, 99, 235, 0.2); }
     }
     .brand i {
@@ -348,7 +367,8 @@
     /* Scrollbar Styling */
     ::-webkit-scrollbar {
-      width: 8px;
     }
     ::-webkit-scrollbar-track {
@@ -357,12 +377,39 @@
     ::-webkit-scrollbar-thumb {
       background: #cbd5e1;
-      border-radius: 4px;
     }
     ::-webkit-scrollbar-thumb:hover {
       background: var(--primary-color);
     }
   </style>
 </head>
@@ -392,9 +439,9 @@
           <label for="aiSelect">Select AI Model</label>
           <select id="aiSelect">
             <option value="gpt4">ChatGPT (GPT-4)</option>
-            <option value="gpt3">ChatGPT (GPT-3.5)</option>
-            <option value="claude">Anthropic Claude</option>
             <option value="deepseek">DeepSeek (V3)</option>
             <option value="llama">Meta Llama</option>
             <option value="mistral">Mistral AI</option>
           </select>
@@ -457,7 +504,6 @@
   <script>
     // --- Data: Strategy Templates (White Hat/Ethical) ---
-    // These templates focus on enhancing performance through structure.
     const strategies = {
       standard: {
         name: "Standard Professional",
@@ -521,7 +567,7 @@
         // Typewriter effect setup
         outputArea.innerHTML = '';
         let i = 0;
-        const speed = 10; // ms per character (slightly slower for readability)
         function typeWriter() {
           if (i < finalText.length) {
@@ -535,7 +581,7 @@
         typeWriter();
         showToast("Prompt Constructed Successfully!");
-      }, 800);
     }
     // 2. Copy to Clipboard
@@ -608,4 +654,5 @@
   </script>
 </body>
 </html>

 <head>
   <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <title>AI Prompt Architect | Ultimate Edition</title>
   <!-- Importing FontAwesome for Icons -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
   <!-- Google Fonts for a clean look -->
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
   <style>
     :root {
+      --primary-color: #2563eb;
+      /* Royal Blue */
       --glow-color: rgba(37, 99, 235, 0.4);
       --accent-color: #0ea5e9;
       --bg-color: #f8fafc;
+      --card-bg: rgba(255, 255, 255, 0.9);
       --text-color: #1e293b;
       --text-secondary: #64748b;
       --border-radius: 16px;
       --font-main: 'Inter', sans-serif;
+      --font-mono: 'Fira Code', monospace;
       --shadow-soft: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
       --shadow-glow: 0 0 20px rgba(255, 255, 255, 0.8), 0 0 15px var(--glow-color);
     }
       box-sizing: border-box;
       margin: 0;
       padding: 0;
+      -webkit-tap-highlight-color: transparent;
     }
     body {
       font-family: var(--font-main);
       background-color: var(--bg-color);
+      /* Responsive Mesh Gradient Background */
+      background-image:
         radial-gradient(at 0% 0%, rgba(255, 255, 255, 1) 0px, transparent 50%),
         radial-gradient(at 100% 100%, rgba(200, 220, 255, 0.5) 0px, transparent 50%);
       background-attachment: fixed;
     /* --- Header --- */
     header {
+      background: rgba(255, 255, 255, 0.85);
       backdrop-filter: blur(12px);
       -webkit-backdrop-filter: blur(12px);
+      padding: 1rem 1.5rem;
       display: flex;
       justify-content: space-between;
       align-items: center;
       top: 0;
       z-index: 100;
       box-shadow: var(--shadow-soft);
+      flex-wrap: wrap; /* Allows wrapping on very small screens */
+      gap: 10px;
     }
     .brand {
+      font-size: 1.25rem;
       font-weight: 700;
       color: var(--text-color);
       display: flex;
       align-items: center;
+      gap: 10px;
       letter-spacing: -0.5px;
     }
     }
     .built-with {
+      font-size: 0.75rem;
       color: var(--text-secondary);
       text-decoration: none;
       transition: all 0.3s ease;
+      padding: 6px 12px;
       border-radius: 20px;
       background: rgba(255, 255, 255, 0.6);
       border: 1px solid rgba(255, 255, 255, 0.8);
+      font-weight: 600;
+      white-space: nowrap;
     }
     .built-with:hover {
       flex: 1;
       display: flex;
       justify-content: center;
+      padding: 1.5rem;
+      width: 100%;
     }
     .container {
       width: 100%;
+      max-width: 1200px;
       display: grid;
+      /* Responsive Grid: 2 columns on desktop, 1 on mobile */
+      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+      gap: 2rem;
+      align-items: start; /* Prevents panels from stretching to same height if content differs */
     }
     /* --- Panels (Glassmorphism) --- */
       background: var(--card-bg);
       border: 1px solid rgba(255, 255, 255, 0.6);
       border-radius: var(--border-radius);
+      padding: 2rem;
       box-shadow: var(--shadow-glow);
       display: flex;
       flex-direction: column;
+      gap: 1.25rem;
       transition: transform 0.3s ease, box-shadow 0.3s ease;
       position: relative;
       overflow: hidden;
+      width: 100%;
     }
     /* Decorative glow line at top of panel */
     }
     h2 {
+      font-size: 1rem;
       color: var(--text-color);
+      margin-bottom: 0.25rem;
       text-transform: uppercase;
       letter-spacing: 1px;
       font-weight: 700;
       align-items: center;
       gap: 10px;
     }
     h2 i {
+      color: var(--primary-color);
     }
     /* --- Form Elements --- */
     .form-group {
       display: flex;
       flex-direction: column;
+      gap: 0.5rem;
     }
     label {
+      font-size: 0.75rem;
       color: var(--text-secondary);
       font-weight: 600;
       text-transform: uppercase;
     select,
     textarea,
     input {
+      background: rgba(255, 255, 255, 0.9);
       border: 1px solid #e2e8f0;
       border-radius: 8px;
       color: var(--text-color);
+      padding: 12px;
       font-family: var(--font-main);
+      font-size: 0.9rem;
       outline: none;
       transition: all 0.3s ease;
+      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
+      width: 100%; /* Ensures full width in flex/grid */
     }
     select:focus,
     textarea {
       resize: vertical;
+      min-height: 120px;
+      line-height: 1.5;
     }
     /* --- Button (White Glow Effect) --- */
       color: var(--primary-color);
       font-weight: 700;
       border: 1px solid white;
+      padding: 14px;
       border-radius: 8px;
       cursor: pointer;
       text-transform: uppercase;
       justify-content: center;
       align-items: center;
       gap: 10px;
+      font-size: 0.9rem;
       margin-top: auto;
       box-shadow: 0 4px 15px rgba(37, 99, 235, 0.15);
+      width: 100%;
     }
     .btn-generate:hover {
       flex: 1;
       display: flex;
       flex-direction: column;
+      min-height: 300px; /* Ensure height on mobile */
     }
     .output-wrapper {
       background: #fff;
       border: 1px solid #e2e8f0;
       border-radius: 8px;
+      padding: 1.25rem;
       flex: 1;
       overflow-y: auto;
       font-family: var(--font-mono);
+      font-size: 0.85rem;
       color: #334155;
       white-space: pre-wrap;
       position: relative;
+      min-height: 250px;
+      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
+      width: 100%;
     }
     .output-placeholder {
       color: #94a3b8;
       text-align: center;
       pointer-events: none;
+      width: 80%;
     }
     .actions {
       display: flex;
+      gap: 10px;
       margin-top: 12px;
     }
     .btn-action {
       flex: 1;
+      padding: 10px;
       border-radius: 8px;
       border: 1px solid #e2e8f0;
       background: white;
       display: flex;
       justify-content: center;
       align-items: center;
+      gap: 6px;
       font-weight: 500;
+      font-size: 0.85rem;
     }
     .btn-action:hover {
       border-color: var(--primary-color);
       color: var(--primary-color);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
     }
     .btn-clear:hover {
     /* --- Toast Notification --- */
     .toast {
       position: fixed;
+      bottom: 20px;
       left: 50%;
       transform: translateX(-50%) translateY(100px);
       background: white;
       padding: 12px 24px;
       border-radius: 50px;
       font-weight: 600;
+      font-size: 0.9rem;
       box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 0 15px rgba(37, 99, 235, 0.3);
       opacity: 0;
       transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
       align-items: center;
       gap: 10px;
       border: 1px solid rgba(37, 99, 235, 0.1);
+      white-space: nowrap;
     }
     .toast.show {
     /* --- Animations --- */
     @keyframes pulse-glow {
+      0% {
+        text-shadow: 0 0 5px rgba(37, 99, 235, 0.2);
+      }
+      50% {
+        text-shadow: 0 0 15px rgba(37, 99, 235, 0.6);
+      }
+      100% {
+        text-shadow: 0 0 5px rgba(37, 99, 235, 0.2);
+      }
     }
     .brand i {
     /* Scrollbar Styling */
     ::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
     }
     ::-webkit-scrollbar-track {
     ::-webkit-scrollbar-thumb {
       background: #cbd5e1;
+      border-radius: 3px;
     }
     ::-webkit-scrollbar-thumb:hover {
       background: var(--primary-color);
     }
+    /* --- Mobile Specific Adjustments --- */
+    @media (max-width: 600px) {
+      main {
+        padding: 1rem;
+      }
+      .container {
+        gap: 1.5rem;
+      }
+      .panel {
+        padding: 1.5rem;
+      }
+      h2 {
+        font-size: 0.9rem;
+      }
+      .brand span {
+        font-size: 1.1rem;
+      }
+      .output-wrapper {
+        font-size: 0.8rem;
+      }
+    }
   </style>
 </head>
           <label for="aiSelect">Select AI Model</label>
           <select id="aiSelect">
             <option value="gpt4">ChatGPT (GPT-4)</option>
+            <option value="gemini">Google Gemini (Pro/Ultra)</option>
             <option value="deepseek">DeepSeek (V3)</option>
+            <option value="claude">Anthropic Claude</option>
             <option value="llama">Meta Llama</option>
             <option value="mistral">Mistral AI</option>
           </select>
   <script>
     // --- Data: Strategy Templates (White Hat/Ethical) ---
     const strategies = {
       standard: {
         name: "Standard Professional",
         // Typewriter effect setup
         outputArea.innerHTML = '';
         let i = 0;
+        const speed = 5; // Faster typing for better UX
         function typeWriter() {
           if (i < finalText.length) {
         typeWriter();
         showToast("Prompt Constructed Successfully!");
+      }, 600);
     }
     // 2. Copy to Clipboard
   </script>
 </body>
 </html>