PlexSheep
/
flaskex
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add tailwindcss with a basic file reader

This commit is contained in:
Christoph J. Scherr 2025-02-07 16:13:29 +01:00
parent 42143eea27
commit 047f72a490
Signed by: PlexSheep
GPG Key ID: 9EB784BB202BB7BB
2 changed files with 245 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
flaskex/app.py
View File

@ -1,47 +1,49 @@
from pathlib import Path
from flask import Flask, url_for
from markupsafe import escape
app = Flask(__name__)
TEMPLATES_DIR = Path("./flaskex/templates/")
@app.route("/")
def index():
return f"""
<head>
<title>Deine Mama</title>
<link rel="stylesheet" type="text/css" href="{url_for('static', filename='style.css')}">
</head>
<body>
<p>Hello, World!</p>
<a href="/user/blabla">blabla</a>
<a href="/user/by_uuid/b36e8035-1337-1337-1337-eab4d505d739">blabla id</a>
</body>
"""
f = open(TEMPLATES_DIR / "base.jinja")
raw = f.read()
return raw
@app.route('/user/<username>')
def user_profile(username):
# show the user profile for that user
return f'User {escape(username)}'
@app.route('/user/by_uuid/<uuid:user_id>')
def user_id(user_id):
# show the user profile for that user
return f'Your mom has this id: {escape(user_id)}'
@app.route('/post/<int:post_id>')
def post_show(post_id):
# show the post with the given id, the id is an integer
return f'Post {post_id}'
@app.route('/path/<path:subpath>')
def subpath_show(subpath):
# show the subpath after /path/
return f'Subpath {escape(subpath)}'
with app.test_request_context():
print("{:=^80}".format("URIs"))
print(url_for('index'))
print(url_for('user_profile', username="yo mama"))
print(url_for('user_id' ,user_id="blabla"))
print(url_for('user_id', user_id="blabla"))
print(url_for('post_show', post_id=1337))
print(url_for('subpath_show', subpath="blablabla"))
print(url_for('static', filename='style.css'))

231
flaskex/templates/base.jinja Normal file
View File

@ -0,0 +1,231 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Deine Mama</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<!-- just some components from tailwindcss -->
<body>
<div class="min-h-full">
<nav class="bg-gray-800">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="flex h-16 items-center justify-between">
<div class="flex items-center">
<div class="shrink-0">
<img class="size-8"
src="https://tailwindui.com/plus/img/logos/mark.svg?color=indigo&shade=500"
alt="Your Company">
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
<a href="#" class="rounded-md bg-gray-900 px-3 py-2 text-sm font-medium text-white"
aria-current="page">Dashboard</a>
<a href="#"
class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white">Team</a>
<a href="#"
class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white">Projects</a>
<a href="#"
class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white">Calendar</a>
<a href="#"
class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white">Reports</a>
</div>
</div>
</div>
<div class="hidden md:block">
<div class="ml-4 flex items-center md:ml-6">
<button type="button"
class="relative rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800 focus:outline-hidden">
<span class="absolute -inset-1.5"></span>
<span class="sr-only">View notifications</span>
<svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round"
d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0" />
</svg>
</button>
<!-- Profile dropdown -->
<div class="relative ml-3">
<div>
<button type="button"
class="relative flex max-w-xs items-center rounded-full bg-gray-800 text-sm focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800 focus:outline-hidden"
id="user-menu-button" aria-expanded="false" aria-haspopup="true">
<span class="absolute -inset-1.5"></span>
<span class="sr-only">Open user menu</span>
<img class="size-8 rounded-full"
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt="">
</button>
</div>
<!--
Dropdown menu, show/hide based on menu state.
Entering: "transition ease-out duration-100"
From: "transform opacity-0 scale-95"
To: "transform opacity-100 scale-100"
Leaving: "transition ease-in duration-75"
From: "transform opacity-100 scale-100"
To: "transform opacity-0 scale-95"
-->
<div class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 ring-1 shadow-lg ring-black/5 focus:outline-hidden"
role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button"
tabindex="-1">
<!-- Active: "bg-gray-100 outline-hidden", Not Active: "" -->
<a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem"
tabindex="-1" id="user-menu-item-0">Your Profile</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem"
tabindex="-1" id="user-menu-item-1">Settings</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem"
tabindex="-1" id="user-menu-item-2">Sign out</a>
</div>
</div>
</div>
</div>
<div class="-mr-2 flex md:hidden">
<!-- Mobile menu button -->
<button type="button"
class="relative inline-flex items-center justify-center rounded-md bg-gray-800 p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800 focus:outline-hidden"
aria-controls="mobile-menu" aria-expanded="false">
<span class="absolute -inset-0.5"></span>
<span class="sr-only">Open main menu</span>
<!-- Menu open: "hidden", Menu closed: "block" -->
<svg class="block size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round"
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
<!-- Menu open: "block", Menu closed: "hidden" -->
<svg class="hidden size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<!-- Mobile menu, show/hide based on menu state. -->
<div class="md:hidden" id="mobile-menu">
<div class="space-y-1 px-2 pt-2 pb-3 sm:px-3">
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
<a href="#" class="block rounded-md bg-gray-900 px-3 py-2 text-base font-medium text-white"
aria-current="page">Dashboard</a>
<a href="#"
class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white">Team</a>
<a href="#"
class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white">Projects</a>
<a href="#"
class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white">Calendar</a>
<a href="#"
class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white">Reports</a>
</div>
<div class="border-t border-gray-700 pt-4 pb-3">
<div class="flex items-center px-5">
<div class="shrink-0">
<img class="size-10 rounded-full"
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt="">
</div>
<div class="ml-3">
<div class="text-base/5 font-medium text-white">Tom Cook</div>
<div class="text-sm font-medium text-gray-400">tom@example.com</div>
</div>
<button type="button"
class="relative ml-auto shrink-0 rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800 focus:outline-hidden">
<span class="absolute -inset-1.5"></span>
<span class="sr-only">View notifications</span>
<svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round"
d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0" />
</svg>
</button>
</div>
<div class="mt-3 space-y-1 px-2">
<a href="#"
class="block rounded-md px-3 py-2 text-base font-medium text-gray-400 hover:bg-gray-700 hover:text-white">Your
Profile</a>
<a href="#"
class="block rounded-md px-3 py-2 text-base font-medium text-gray-400 hover:bg-gray-700 hover:text-white">Settings</a>
<a href="#"
class="block rounded-md px-3 py-2 text-base font-medium text-gray-400 hover:bg-gray-700 hover:text-white">Sign
out</a>
</div>
</div>
</div>
</nav>
<header class="bg-white shadow-sm">
<div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
<h1 class="text-3xl font-bold tracking-tight text-gray-900">Dashboard</h1>
</div>
</header>
<main>
<div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
<div class="relative isolate overflow-hidden bg-gray-900 py-24 sm:py-32">
<img src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&crop=focalpoint&fp-y=.8&w=2830&h=1500&q=80&blend=111827&sat=-100&exp=15&blend-mode=multiply"
alt="" class="absolute inset-0 -z-10 size-full object-cover object-right md:object-center">
<div class="hidden sm:absolute sm:-top-10 sm:right-1/2 sm:-z-10 sm:mr-10 sm:block sm:transform-gpu sm:blur-3xl"
aria-hidden="true">
<div class="aspect-1097/845 w-[68.5625rem] bg-linear-to-tr from-[#ff4694] to-[#776fff] opacity-20"
style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)">
</div>
</div>
<div class="absolute -top-52 left-1/2 -z-10 -translate-x-1/2 transform-gpu blur-3xl sm:top-[-28rem] sm:ml-16 sm:translate-x-0 sm:transform-gpu"
aria-hidden="true">
<div class="aspect-1097/845 w-[68.5625rem] bg-linear-to-tr from-[#ff4694] to-[#776fff] opacity-20"
style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)">
</div>
</div>
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:mx-0">
<h2 class="text-5xl font-semibold tracking-tight text-white sm:text-7xl">Work with us</h2>
<p class="mt-8 text-lg font-medium text-pretty text-gray-300 sm:text-xl/8">Anim aute id
magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt
amet fugiat veniam occaecat fugiat.</p>
</div>
<div class="mx-auto mt-10 max-w-2xl lg:mx-0 lg:max-w-none">
<div
class="grid grid-cols-1 gap-x-8 gap-y-6 text-base/7 font-semibold text-white sm:grid-cols-2 md:flex lg:gap-x-10">
<a href="#">Open roles <span aria-hidden="true">&rarr;</span></a>
<a href="#">Internship program <span aria-hidden="true">&rarr;</span></a>
<a href="#">Our values <span aria-hidden="true">&rarr;</span></a>
<a href="#">Meet our leadership <span aria-hidden="true">&rarr;</span></a>
</div>
<dl class="mt-16 grid grid-cols-1 gap-8 sm:mt-20 sm:grid-cols-2 lg:grid-cols-4">
<div class="flex flex-col-reverse gap-1">
<dt class="text-base/7 text-gray-300">Offices worldwide</dt>
<dd class="text-4xl font-semibold tracking-tight text-white">12</dd>
</div>
<div class="flex flex-col-reverse gap-1">
<dt class="text-base/7 text-gray-300">Full-time colleagues</dt>
<dd class="text-4xl font-semibold tracking-tight text-white">300+</dd>
</div>
<div class="flex flex-col-reverse gap-1">
<dt class="text-base/7 text-gray-300">Hours per week</dt>
<dd class="text-4xl font-semibold tracking-tight text-white">40</dd>
</div>
<div class="flex flex-col-reverse gap-1">
<dt class="text-base/7 text-gray-300">Paid time off</dt>
<dd class="text-4xl font-semibold tracking-tight text-white">Unlimited</dd>
</div>
</dl>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>