added css

Namit2111 · Namit2111 · commit 7ac30a0a2223 · 2024-09-02T20:43:54.000+05:30
diff --git a/templates/index.html b/templates/index.html
@@ -4,22 +4,105 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Bible Verse Similarity</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f5f5f5;
+            color: #333;
+            margin: 0;
+            padding: 20px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+        }
+
+        h1 {
+            color: #4CAF50;
+            font-size: 2em;
+            text-align: center;
+        }
+
+        form {
+            background-color: #fff;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+            max-width: 400px;
+            width: 100%;
+        }
+
+        label {
+            font-weight: bold;
+        }
+
+        input[type="text"] {
+            width: 100%;
+            padding: 10px;
+            margin-top: 8px;
+            margin-bottom: 20px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            box-sizing: border-box;
+        }
+
+        input[type="submit"] {
+            background-color: #4CAF50;
+            color: white;
+            padding: 10px 15px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 1em;
+            width: 100%;
+        }
+
+        input[type="submit"]:hover {
+            background-color: #45a049;
+        }
+
+        h2 {
+            color: #333;
+            font-size: 1.5em;
+            margin-top: 20px;
+            text-align: center;
+        }
+
+        ul {
+            list-style-type: none;
+            padding: 0;
+        }
+
+        li {
+            background-color: #fff;
+            margin-bottom: 15px;
+            padding: 15px;
+            border-radius: 8px;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+        }
+
+        li strong {
+            color: #4CAF50;
+        }
+    </style>
 </head>
 <body>
-    <h1>Bible Verse Similarity</h1>
-    <form method="POST">
-        <label for="user_input">Enter a theme:</label><br>
-        <input type="text" id="user_input" name="user_input" required><br><br>
-        <input type="submit" value="Find Similar Verses">
-    </form>
-
-    {% if results %}
-        <h2>Results for "{{ user_input }}"</h2>
-        <ul>
-            {% for verse, similarity in results %}
-                <li><strong>Verse:</strong> {{ verse }} <br> <strong>Similarity:</strong> {{ similarity }}</li>
-            {% endfor %}
-        </ul>
-    {% endif %}
+    <div>
+        <h1>Bible Verse Similarity</h1>
+        <form method="POST">
+            <label for="user_input">Enter a theme:</label><br>
+            <input type="text" id="user_input" name="user_input" required><br><br>
+            <input type="submit" value="Find Similar Verses">
+        </form>
+
+        {% if results %}
+            <h2>Results for "{{ user_input }}"</h2>
+            <ul>
+                {% for verse, similarity in results %}
+                    <li><strong>Verse:</strong> {{ verse }} <br> <strong>Similarity:</strong> {{ similarity }}</li>
+                {% endfor %}
+            </ul>
+        {% endif %}
+    </div>
 </body>
 </html>
