Seperated landing page into self contained template as gradient stylings were making the dashboard hard to read

This commit is contained in:
Peter Stockings
2024-03-29 22:00:17 +11:00
parent d25e8bb182
commit 3ce976507e
4 changed files with 170 additions and 115 deletions

2
app.py
View File

@@ -102,7 +102,7 @@ def dashboard():
user_id = current_user.id
http_functions = db.get_http_functions_for_user(user_id)
http_functions = create_http_functions_view_model(http_functions)
return render_template("dashboard.html", http_functions=http_functions)
return render_template("dashboard/http_functions/overview.html", http_functions=http_functions)
@ app.route("/dashboard/http_functions", methods=["GET"])
@login_required

View File

@@ -46,7 +46,7 @@
</style>
</head>
<body class="gradient leading-relaxed tracking-wide flex flex-col">
<body class="leading-relaxed tracking-wide flex flex-col">
<div class="container mx-auto p-4 lg:p-1 min-h-screen h-full">
{% block content %}

View File

@@ -90,7 +90,8 @@
</header>
<main class="flex flex-1 flex-col gap-4 p-4 md:p-6" data-id="50" id="container">
{% block page %}
{{ render_partial('dashboard/http_functions/overview.html', http_functions=http_functions) }}
{{ render_block(app.jinja_env, "dashboard/http_functions/overview.html", "page",
http_functions=http_functions) }}
{% endblock %}
</main>
</div>

View File

@@ -1,13 +1,57 @@
{% extends 'base.html' %}
<!DOCTYPE html>
<html>
{% block content %}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Function</title>
<link rel="icon" type="image/svg+xml"
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m6.75 7.5 3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z' /%3E%3C/svg%3E%0A" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap" rel="stylesheet" />
<script src="/static/js/tailwindcss@3.2.4.js"></script>
<script src="/static/js/htmx.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.1/ace.min.js"
integrity="sha512-7QPOFYWq4euLbAVbG/o5YVgkotUdMiwFuFrVQc6lbqZuAcWnLp0sQ6JX2AIWqbm3wWrPuEfu9FqckItCgQzBWw=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.1/mode-javascript.min.js"
integrity="sha512-1OTGICMOnGWxRYfDZRUdv7qut0O8+9s7JPi6JNxlz1pdpHgDwPo1L0dzYKwftuIb0ossdBzWtkAlnyyYpIEp2A=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.1/theme-monokai.min.js"
integrity="sha512-g9yptARGYXbHR9r3kTKIAzF+vvmgEieTxuuUUcHC5tKYFpLR3DR+lsisH2KZJG2Nwaou8jjYVRdbbbBQI3Bo5w=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
@import url("https://rsms.me/inter/inter.css");
html {
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji";
}
.gradient {
background-image: linear-gradient(-225deg, #cbbacc 0%, #2580b3 100%);
}
button,
.gradient2 {
background-color: #f39f86;
background-image: linear-gradient(315deg, #f39f86 0%, #f9d976 74%);
}
</style>
</head>
<body class="gradient leading-relaxed tracking-wide flex flex-col">
<div class="container mx-auto p-4 lg:p-1 min-h-screen h-full">
<nav id="header" class="w-full z-30 top-0 text-white py-1 lg:py-1">
<div class="w-full container mx-auto flex flex-wrap items-center justify-between mt-0 px-2 py-2 lg:py-6">
<div class="pl-4 flex items-center">
<a class="text-white no-underline hover:no-underline font-bold text-2xl lg:text-4xl" href="#">
<svg class="h-10 w-10 inline-block fill-current text-yellow-700" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20">
<svg class="h-10 w-10 inline-block fill-current text-yellow-700"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M13 8V0L8.11 5.87 3 12h4v8L17 8h-4z"></path>
</svg></a>
</div>
@@ -44,10 +88,12 @@
</nav>
<div class="text-center px-3 lg:px-0">
<h1 class="my-4 text-2xl md:text-3xl lg:text-5xl font-black leading-tight">Build HTTP and Timer Functions with Ease
<h1 class="my-4 text-2xl md:text-3xl lg:text-5xl font-black leading-tight">Build HTTP and Timer Functions
with Ease
</h1>
<p class="leading-normal text-gray-800 text-base md:text-xl lg:text-2xl">No DevOps, Git, or command-line - just your
<p class="leading-normal text-gray-800 text-base md:text-xl lg:text-2xl">No DevOps, Git, or command-line -
just your
browser.
</p>
<p class="leading-normal text-gray-800 text-base md:text-xl lg:text-2xl mb-8">
@@ -78,8 +124,10 @@
<a href="#" class="flex flex-wrap no-underline hover:no-underline">
<div class="w-full font-bold text-xl text-gray-800 px-6 mt-6">HTTP Functions</div>
<p class="text-gray-600 text-base px-6 mb-5">Seamlessly create and deploy HTTP functions that can
serve as robust API endpoints. Access request methods, headers, form data, and JSON, while
<p class="text-gray-600 text-base px-6 mb-5">Seamlessly create and deploy HTTP functions
that can
serve as robust API endpoints. Access request methods, headers, form data, and JSON,
while
easily returning responses in various formats
</p>
</a>
@@ -92,9 +140,12 @@
<a href="#" class="flex flex-wrap no-underline hover:no-underline">
<div class="w-full font-bold text-xl text-gray-800 px-6 mt-6">Timer Functions</div>
<p class="text-gray-600 text-base px-6 mb-5">Automate tasks with precision using timer functions.
Schedule recurring jobs or one-time events without the need for external cron services. Manage
timing with ease, whether for regular data processing, periodic updates, or timed notifications
<p class="text-gray-600 text-base px-6 mb-5">Automate tasks with precision using timer
functions.
Schedule recurring jobs or one-time events without the need for external cron services.
Manage
timing with ease, whether for regular data processing, periodic updates, or timed
notifications
</p>
</a>
</div>
@@ -106,8 +157,10 @@
<a href="#" class="flex flex-wrap no-underline hover:no-underline">
<div class="w-full font-bold text-xl text-gray-800 px-6 mt-6">Persistent JSON Storage</div>
<p class=" text-gray-600 text-base px-6 mb-5">Leverage built-in mutable JSON storage, ensuring your
data persists seamlessly within the environment. Store and modify your data in real-time, with
<p class=" text-gray-600 text-base px-6 mb-5">Leverage built-in mutable JSON storage,
ensuring your
data persists seamlessly within the environment. Store and modify your data in
real-time, with
the flexibility to access and update your stored information effortlessly</p>
</a>
</div>
@@ -115,4 +168,5 @@
</div>
</div>
</section>
{% endblock %}
</div>
</body>