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

feat: fancy jinja stuff

This commit is contained in:
Christoph J. Scherr 2025-02-07 16:38:03 +01:00
parent 047f72a490
commit dc37674a77
Signed by: PlexSheep
GPG Key ID: 9EB784BB202BB7BB
4 changed files with 78 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
flaskex/app.py
View File

@ -1,6 +1,6 @@
from pathlib import Path
from flask import Flask, url_for
from flask import Flask, url_for, render_template
from markupsafe import escape
app = Flask(__name__)
@ -10,9 +10,10 @@ TEMPLATES_DIR = Path("./flaskex/templates/")
@app.route("/")
def index():
f = open(TEMPLATES_DIR / "base.jinja")
raw = f.read()
return raw
context = {
"number": 1337
}
return render_template("index.jinja", context=context)
@app.route('/user/<username>')

BIN
flaskex/static/img/tomatos.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 MiB

61
flaskex/templates/base.jinja
View File

@ -8,6 +8,9 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
{% block head %}
{% endblock %}
</head>
<!-- just some components from tailwindcss -->
@ -75,7 +78,7 @@
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"
<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 hidden"
role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button"
tabindex="-1">
<!-- Active: "bg-gray-100 outline-hidden", Not Active: "" -->
@ -169,60 +172,8 @@
</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>
{% block main %}
{% endblock %}
</main>
</div>

67
flaskex/templates/index.jinja Normal file
View File

@ -0,0 +1,67 @@
{% extends "base.jinja" %}
{% block main %}
<div>
<div class="text-center p-6 mt-9">
<h1 class="text-5xl font-semibold tracking-tight text-balance text-gray-900 sm:text-7xl">
sogar deine mamer kauft meine geilen {{ context.number }} tomaten
</h1>
<p class="mt-8 text-lg font-medium text-pretty text-gray-500 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.
</p>
<div class="mt-10 flex items-center justify-center gap-x-6">
<a href="#"
class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Get
started</a>
<a href="#" class="text-sm/6 font-semibold text-gray-900">Learn more <span aria-hidden="true">→</span></a>
</div>
</div>
</div>
<div class="bg-red-400">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="mx-auto max-w-2xl py-16 sm:py-24 lg:max-w-none lg:py-32">
<h2 class="text-2xl font-bold text-gray-900">Collections</h2>
<div class="mt-6 space-y-12 lg:grid lg:grid-cols-3 lg:gap-x-6 lg:space-y-0">
<div class="group relative">
<img src="{{ url_for('static', filename='img/tomatos.jpg') }}"
alt="Desk with leather desk pad, walnut desk organizer, wireless keyboard and mouse, and porcelain mug."
class="w-full rounded-lg bg-white object-cover group-hover:opacity-75 max-sm:h-80 sm:aspect-2/1 lg:aspect-square">
<h3 class="mt-6 text-sm text-gray-500">
<a href="#">
<span class="absolute inset-0"></span>
Desk and Office
</a>
</h3>
<p class="text-base font-semibold text-gray-900">Work from home accessories</p>
</div>
<div class="group relative">
<img src="{{ url_for('static', filename='img/tomatos.jpg') }}"
alt="Wood table with porcelain mug, leather journal, brass pen, leather key ring, and a houseplant."
class="w-full rounded-lg bg-white object-cover group-hover:opacity-75 max-sm:h-80 sm:aspect-2/1 lg:aspect-square">
<h3 class="mt-6 text-sm text-gray-500">
<a href="#">
<span class="absolute inset-0"></span>
Self-Improvement
</a>
</h3>
<p class="text-base font-semibold text-gray-900">Journals and note-taking</p>
</div>
<div class="group relative">
<img src="{{ url_for('static', filename='img/tomatos.jpg') }}"
alt="Collection of four insulated travel bottles on wooden shelf."
class="w-full rounded-lg bg-white object-cover group-hover:opacity-75 max-sm:h-80 sm:aspect-2/1 lg:aspect-square">
<h3 class="mt-6 text-sm text-gray-500">
<a href="#">
<span class="absolute inset-0"></span>
Travel
</a>
</h3>
<p class="text-base font-semibold text-gray-900">Daily commute essentials</p>
</div>
</div>
</div>
</div>
</div>
{{ number }}
{% endblock %}