update

app/templates/index.html

@@ -3,12 +3,38 @@
 {% block title %}Home Page{% endblock %}
 
 {% block content %}
-<div class="container">
-  <h1>Hello World</h1>
+<div class="container mx-auto px-4 py-8">
+  <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-6">Available Endpoints</h1>
+  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+    {% for route in routes %}
+    <div
+      class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden border border-gray-200 dark:border-gray-700">
+      <div class="p-6">
+        <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">{{ route.name }}</h2>
+        <div class="mb-4">
+          <span
+            class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300">
+            {{ route.methods | join(', ') }}
+          </span>
+        </div>
+        <div class="flex items-center justify-between">
+          <code
+            class="text-sm text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded">{{ route.path }}</code>
+          {% if 'GET' in route.methods %}
+          <a href="{{ route.path }}"
+            class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">
+            Visit
+          </a>
+          {% endif %}
+        </div>
+      </div>
+    </div>
+    {% endfor %}
+  </div>
 </div>
 
 {% endblock %}
 
 {% block css %}
 {{ super() }}
-{% endblock %}
+{% endblock %}