Update templates/index.html

templates/index.html

@@ -4,141 +4,259 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>AI Blog Generator</title>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Syne:wght@700;800&display=swap" rel="stylesheet">
   <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
     body {
-      margin: 0;
-      font-family: 'Poppins', sans-serif;
-      color: #333;
+      font-family: 'Inter', sans-serif;
+      background: #f0f0fa;
+      min-height: 100vh;
       display: flex;
-      justify-content: center;
+      flex-direction: column;
       align-items: center;
-      min-height: 100vh;
-      padding: 20px;
-      box-sizing: border-box;
-      position: relative;
-      overflow: hidden;
+      padding: 60px 20px;
+      color: #1a1a2e;
+    }
+
+    .hero {
+      text-align: center;
+      margin-bottom: 36px;
+    }
 
-      /* New background image */
-      background-image: url('/static/images/bjp.jpg');
-      background-size: cover;
-      background-position: center;
-      background-attachment: fixed;
+    .hero h1 {
+      font-family: 'Syne', sans-serif;
+      font-size: clamp(36px, 6vw, 58px);
+      font-weight: 800;
+      color: #1a1a2e;
+      letter-spacing: -1px;
+      line-height: 1.1;
+      margin-bottom: 14px;
     }
 
-    .container {
-      background: linear-gradient(135deg, rgba(88,184,246,0.85), rgba(230,165,227,0.85));
-      border: 1px solid rgba(255, 251, 234, 1);
+    .hero p {
+      font-size: 16px;
+      color: #6b6b8a;
+      max-width: 380px;
+      margin: 0 auto;
+      line-height: 1.6;
+    }
+
+    .card {
+      background: #ffffff;
       border-radius: 20px;
-      padding: 40px 20px;
-      box-shadow: 0 0 25px rgba(255, 251, 239, 0.62);
-      text-align: center;
-      max-width: 500px;
+      padding: 28px;
       width: 100%;
-      backdrop-filter: blur(20px) saturate(180%);
-      -webkit-backdrop-filter: blur(20px) saturate(180%);
-      z-index: 1;
+      max-width: 680px;
+      box-shadow: 0 4px 32px rgba(0,0,0,0.06);
     }
 
-    .container h1 {
-      font-size: clamp(20px, 4vw, 32px);
-      margin-bottom: 20px;
-      color: #ffffff;
-      text-shadow: 0 0 10px rgba(64, 60, 86, 0.29);
+    .input-label {
+      font-size: 10px;
+      font-weight: 600;
+      letter-spacing: 1.5px;
+      text-transform: uppercase;
+      color: #5c6ac4;
+      margin-bottom: 10px;
+      display: block;
+    }
+
+    textarea {
+      width: 100%;
+      border: none;
+      outline: none;
+      resize: none;
+      font-family: 'Inter', sans-serif;
+      font-size: 15px;
+      color: #9999bb;
+      background: transparent;
+      min-height: 100px;
+      line-height: 1.6;
     }
 
-    .input-group {
+    textarea::placeholder { color: #b0b0cc; }
+
+    .card-footer {
       display: flex;
-      flex-direction: column;
-      align-items: stretch;
+      align-items: center;
+      justify-content: space-between;
+      margin-top: 20px;
+      padding-top: 16px;
+      border-top: 1px solid #f0f0f8;
+      flex-wrap: wrap;
       gap: 10px;
     }
 
-    input[type="text"] {
-      padding: 12px 15px;
-      border: 1px solid rgba(255, 255, 255, 0.6);
-      border-radius: 10px;
-      font-size: 16px;
-      background-color: rgba(255, 255, 255, 0.9);
-      color: #333;
-      box-shadow: 0 0 12px rgba(64, 60, 86, 0.29);
-      outline: none;
-      transition: box-shadow 0.3s ease, border-color 0.3s ease;
-      width: 100%;
-      box-sizing: border-box;
+    .tags {
+      display: flex;
+      gap: 8px;
     }
 
-    input[type="text"]::placeholder {
-      color: #777;
+    .tag {
+      font-size: 11px;
+      font-weight: 500;
+      padding: 6px 12px;
+      border-radius: 20px;
+      border: 1px solid #e0e0f0;
+      color: #6b6b8a;
+      background: #fafaff;
+      cursor: default;
+      display: flex;
+      align-items: center;
+      gap: 5px;
     }
 
-    input[type="text"]:focus {
-      box-shadow: 0 0 15px rgba(88,184,246,0.7);
-      border-color: rgba(88,184,246,1);
+    .tag::before {
+      content: '';
+      display: inline-block;
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background: #5c6ac4;
     }
 
-    button {
-      background: linear-gradient(135deg, #d78fd3ff, #49a5e2ff);
-      border: 1px solid rgba(255, 251, 234, 1);
-      border-radius: 10px;
-      padding: 12px 20px;
+    .generate-btn {
+      background: #3d3db8;
       color: #fff;
+      border: none;
+      border-radius: 10px;
+      padding: 12px 24px;
+      font-size: 14px;
+      font-weight: 600;
       cursor: pointer;
-      font-weight: bold;
-      font-size: 16px;
-      transition: 0.3s ease;
-      width: 100%;
-      box-sizing: border-box;
-      box-shadow: 0 0 15px rgba(255, 251, 239, 0.5);
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      transition: background 0.2s ease, transform 0.15s ease;
+      font-family: 'Inter', sans-serif;
     }
 
-    button:hover {
-      background: linear-gradient(135deg, #49a5e2ff, #d78fd3ff);
-      transform: scale(1.05);
-      box-shadow: 0 0 18px rgba(110, 100, 110, 0.51);
+    .generate-btn:hover {
+      background: #2e2ea0;
+      transform: scale(1.02);
     }
 
-    #output {
+    .generate-btn::after { content: '⚡'; font-size: 13px; }
+
+    .output-card {
       margin-top: 20px;
-      border: 1px solid rgba(255,255,255,0.4);
-      background: linear-gradient(135deg, rgba(229, 225, 255, 0.9), rgba(198, 232, 255, 0.9));
-      padding: 15px;
-      border-radius: 10px;
-      color: #2d1818ff;
-      box-shadow: 0 0 15px rgba(176,166,245,0.7);
-      text-align: justify;
+      background: #ffffff;
+      border-radius: 20px;
+      padding: 28px;
+      width: 100%;
+      max-width: 680px;
+      box-shadow: 0 4px 32px rgba(0,0,0,0.06);
+      font-size: 15px;
+      line-height: 1.8;
+      color: #2d2d4e;
+      border-left: 4px solid #5c6ac4;
+    }
+
+    .features {
+      display: flex;
+      gap: 32px;
+      margin-top: 36px;
+      flex-wrap: wrap;
+      justify-content: center;
+    }
+
+    .feature {
+      display: flex;
+      align-items: flex-start;
+      gap: 10px;
+      max-width: 180px;
+    }
+
+    .feature-icon {
+      width: 32px;
+      height: 32px;
+      border-radius: 8px;
+      background: #ececfc;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 15px;
+      flex-shrink: 0;
     }
 
-    @media (min-width: 600px) {
-      .input-group {
-        flex-direction: row;
-        justify-content: center;
-      }
+    .feature-text p {
+      font-size: 10px;
+      font-weight: 700;
+      letter-spacing: 1px;
+      text-transform: uppercase;
+      color: #1a1a2e;
+      margin-bottom: 3px;
+    }
 
-      input[type="text"] {
-        width: 70%;
-      }
+    .feature-text span {
+      font-size: 12px;
+      color: #8888aa;
+      line-height: 1.5;
+    }
 
-      button {
-        width: auto;
-      }
+    .loading {
+      display: none;
+      text-align: center;
+      color: #5c6ac4;
+      font-size: 14px;
+      margin-top: 16px;
     }
+
+    .loading.active { display: block; }
   </style>
 </head>
 <body>
 
-  <div class="container">
+  <div class="hero">
     <h1>AI Blog Generator</h1>
-    <form class="input-group" method="POST">
-      <input type="text" name="topic" placeholder="Enter your topic">
-      <button type="submit">Generate</button>
+    <p>Transform your sparks of thought into professional editorial content in seconds.</p>
+  </div>
+
+  <div class="card">
+    <form method="POST" onsubmit="document.querySelector('.loading').classList.add('active')">
+      <label class="input-label">Concept Input</label>
+      <textarea name="topic" placeholder="Enter your topic here to generate a blog post..." rows="4">{{ request.form.get('topic', '') }}</textarea>
+      <div class="card-footer">
+        <div class="tags">
+          <span class="tag">Creative Mode</span>
+          <span class="tag">English</span>
+        </div>
+        <button type="submit" class="generate-btn">Generate</button>
+      </div>
     </form>
+  </div>
+
+  <div class="loading">Generating your blog post...</div>
 
-    {% if paragraph %}
-      <div id="output">
-        {{ paragraph }}
+  {% if paragraph %}
+  <div class="output-card">
+    {{ paragraph }}
+  </div>
+  {% endif %}
+
+  <div class="features">
+    <div class="feature">
+      <div class="feature-icon">⚙️</div>
+      <div class="feature-text">
+        <p>Cognitive Flow</p>
+        <span>AI analyzes semantic intent and tone.</span>
+      </div>
+    </div>
+    <div class="feature">
+      <div class="feature-icon">✏️</div>
+      <div class="feature-text">
+        <p>Editorial Style</p>
+        <span>High-performance Swiss typography.</span>
+      </div>
+    </div>
+    <div class="feature">
+      <div class="feature-icon">🚀</div>
+      <div class="feature-text">
+        <p>Instant Export</p>
+        <span>Ready for CMS integration immediately.</span>
       </div>
-    {% endif %}
+    </div>
   </div>
 
 </body>
-</html>
+</html>