add tailwindcss

This commit is contained in:
Waylon S. Walker 2024-10-14 19:56:41 -05:00
parent a426df12c0
commit 16e207000f
20 changed files with 2421 additions and 100 deletions

View file

@ -1,19 +1,23 @@
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>404 {{ requested_path }} not found</title>
</head>
<body>
<h2>Page Not Found</h2>
<hr>
<h3>Suggestions</h3>
{% extends "base.html" %}
{% block title %}Page Not Found{% endblock %}
{% block content %}
<h1>Page Not Found</h1>
<hr>
<h2>Suggestions</h2>
{% if suggestions %}
<p>
You're looking for {{ requested_path }}, but there's nothing here, here are some suggestions:
</p>
{% else %}
<p>
You're looking for {{ requested_path }}, but there's nothing here.
</p>
{% endif %}
{% for suggestion in suggestions %}
<li><a href="{{ suggestion }}">{{ suggestion }}</a> </li>
{% endfor %}
{% for suggestion in suggestions %}
<li><a href="{{ suggestion }}">{{ suggestion }}</a> </li>
{% endfor %}
</body>
</html>
<p> Try checking our <a href='/sitemap'>sitemap</a></p>
{% endblock %}

View file

@ -1,24 +1,20 @@
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<h2>Example</h2>
<p>
{{ data.message }}
</p>
{% extends "base.html" %}
<h3>Items</h3>
<p>
there are {{ data.get('items', [])|length }} items in the list
</p>
<ul>
{% for item in data.get('items', []) %}
<li>{{ item }}</li>
{% endfor %}
</ul>
{% block title %}Another Example{% endblock %}
</body>
</html>
{% block content %}
<h2>Example</h2>
<p>
{{ data.message }}
</p>
<h3>Items</h3>
<p>
there are {{ data.get('items', [])|length }} items in the list
</p>
<ul>
{% for item in data.get('items', []) %}
<li>{{ item }}</li>
{% endfor %}
</ul>
{% endblock %}

26
templates/base.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}FastAPI Dynamic Response{% endblock %}</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="/static/app.css" rel="stylesheet">
</head>
<body class="bg-gray-900 text-gray-200 min-h-screen flex flex-col">
<header class="bg-gray-800 p-4">
<div class="container mx-auto flex justify-between items-center">
<a href="/" class="text-xl font-bold text-teal-400">FastAPI Dynamic Response</a>
{% include "navigation.html" %}
</div>
</header>
<main class="container mx-auto p-4">
{% block content %}{% endblock %}
</main>
<footer class="bg-gray-800 text-center p-4 mt-auto justify-end">
<p>&copy; 2024 FastApi Dynamic Response</p>
</footer>
</body>
</html>

View file

@ -1,18 +1,14 @@
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<h2>Example</h2>
<p>
{{ data.message }}
</p>
{% extends "base.html" %}
<h3>Data</h3>
{% block title %}Example{% endblock %}
{{ data.data }}
</body>
</html>
{% block content %}
<h2>Example</h2>
<p>
{{ data.message }}
</p>
<h3>Data</h3>
{{ data.data }}
{% endblock %}

View file

@ -0,0 +1,6 @@
<nav class="space-x-4">
<a href="/example" class="hover:text-teal-300">Example</a>
<a href="/another-example" class="hover:text-teal-300">Another Example</a>
<a href="/message" class="hover:text-teal-300">Message</a>
<a href="/sitemap" class="hover:text-teal-300">Sitemap</a>
</nav>

View file

@ -1,13 +1,11 @@
<!DOCTYPE html>
<html>
<head>
<title>siemap</title>
</head>
<body>
<h1>Sitemap</h1>
{% extends "base.html" %}
{% for route in data.available_routes %}
<li><a href="{{ route }}">{{ route }}</a> </li>
{% endfor %}
</body>
</html>
{% block title %}Sitemap{% endblock %}
{% block content %}
<h1>Sitemap</h1>
{% for route in data.available_routes %}
<li><a href="{{ route }}">{{ route }}</a> </li>
{% endfor %}
{% endblock %}

9
templates/status.html Normal file
View file

@ -0,0 +1,9 @@
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>{{ data.status }}</title>
</head>
<body>
<h1>{{ data.status }}</h1>
</html>