Upload files to 'templates'

Added clear button, and some button styling

templates/index.html

@@ -12,6 +12,27 @@
         a {
             color: #E4E7EB;
         }
+        .button {
+            padding: 8px 12px;
+            margin: 3px;
+            border: none;
+            border-radius: 5px;
+            background-color: #52606D;
+            color: white;
+            cursor: pointer;
+            text-decoration: none;
+            display: inline-block;
+            border-radius: 12px;
+            box-shadow: 0 9px #999;
+        }
+        .button:hover {
+            background-color: #616E7C;
+        }
+        .button:active {
+            background-color: #9AA5B1;
+            box-shadow: 0 5px #666;
+            transform: translateY(4px);
+        }
     </style>
     <script>
         // Function to focus on the input field
@@ -24,7 +45,7 @@
     <h1>Checklist</h1>
     <form method="POST" onsubmit="focusInput()">
         <input type="text" id="itemInput" name="item" placeholder="Add a new item" required>
-        <button type="submit">Add</button>
+        <button type="submit" class="button">Add</button>
     </form>
     <ul>
         {% for item in items %}
@@ -34,6 +55,11 @@
             </li>
         {% endfor %}
     </ul>
-    <a href="{{ url_for('list') }}">View List</a>
+    <form action="{{ url_for('list') }}" method="get" style="display: inline;">
+        <button type="submit" class="button">View List</button>
+    </form>
+    <form action="{{ url_for('clear') }}" method="get" style="display: inline;">
+        <button type="submit" class="button">Clear List</button>
+    </form>
 </body>
 </html>