peterstockings/function
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

2
app.py
View File

@@ -102,7 +102,7 @@ def dashboard():
user_id = current_user.id user_id = current_user.id
http_functions = db.get_http_functions_for_user(user_id) http_functions = db.get_http_functions_for_user(user_id)
http_functions = create_http_functions_view_model(http_functions) 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"]) @ app.route("/dashboard/http_functions", methods=["GET"])
@login_required @login_required

2
templates/base.html
View File

@@ -46,7 +46,7 @@
</style> </style>
</head> </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"> <div class="container mx-auto p-4 lg:p-1 min-h-screen h-full">
{% block content %} {% block content %}

3
templates/dashboard.html
View File

@@ -90,7 +90,8 @@
</header> </header>
<main class="flex flex-1 flex-col gap-4 p-4 md:p-6" data-id="50" id="container"> <main class="flex flex-1 flex-col gap-4 p-4 md:p-6" data-id="50" id="container">
{% block page %} {% 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 %} {% endblock %}
</main> </main>
</div> </div>

96
templates/home.html
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">
<nav id="header" class="w-full z-30 top-0 text-white py-1 lg:py-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="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"> <div class="pl-4 flex items-center">
<a class="text-white no-underline hover:no-underline font-bold text-2xl lg:text-4xl" href="#"> <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" <svg class="h-10 w-10 inline-block fill-current text-yellow-700"
viewBox="0 0 20 20"> xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M13 8V0L8.11 5.87 3 12h4v8L17 8h-4z"></path> <path d="M13 8V0L8.11 5.87 3 12h4v8L17 8h-4z"></path>
</svg></a> </svg></a>
</div> </div>
@@ -41,13 +85,15 @@
class="mx-auto lg:mx-0 hover:underline gradient2 text-gray-800 font-extrabold rounded my-6 py-4 px-8 shadow-lg cursor-pointer">Login</a> class="mx-auto lg:mx-0 hover:underline gradient2 text-gray-800 font-extrabold rounded my-6 py-4 px-8 shadow-lg cursor-pointer">Login</a>
</div> </div>
</div> </div>
</nav> </nav>
<div class="text-center px-3 lg:px-0"> <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> </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. browser.
</p> </p>
<p class="leading-normal text-gray-800 text-base md:text-xl lg:text-2xl mb-8"> <p class="leading-normal text-gray-800 text-base md:text-xl lg:text-2xl mb-8">
@@ -61,12 +107,12 @@
<a href="#" <a href="#"
class="inline-block mx-auto lg:mx-0 hover:underline bg-transparent text-gray-600 font-extrabold my-2 md:my-6 py-2 lg:py-4 px-8"> class="inline-block mx-auto lg:mx-0 hover:underline bg-transparent text-gray-600 font-extrabold my-2 md:my-6 py-2 lg:py-4 px-8">
View documentation</a> View documentation</a>
</div> </div>
{{ render_partial('function_editor.html', name=name, script=script, environment_info=environment_info) }} {{ render_partial('function_editor.html', name=name, script=script, environment_info=environment_info) }}
<section class="py-8"> <section class="py-8">
<div class="container mx-auto flex flex-wrap pt-4 pb-12"> <div class="container mx-auto flex flex-wrap pt-4 pb-12">
<h2 class="w-full my-2 text-5xl font-black leading-tight text-center text-gray-800">Features</h2> <h2 class="w-full my-2 text-5xl font-black leading-tight text-center text-gray-800">Features</h2>
<div class="w-full mb-4"> <div class="w-full mb-4">
@@ -78,8 +124,10 @@
<a href="#" class="flex flex-wrap no-underline hover:no-underline"> <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> <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 <p class="text-gray-600 text-base px-6 mb-5">Seamlessly create and deploy HTTP functions
serve as robust API endpoints. Access request methods, headers, form data, and JSON, while that can
serve as robust API endpoints. Access request methods, headers, form data, and JSON,
while
easily returning responses in various formats easily returning responses in various formats
</p> </p>
</a> </a>
@@ -92,9 +140,12 @@
<a href="#" class="flex flex-wrap no-underline hover:no-underline"> <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> <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. <p class="text-gray-600 text-base px-6 mb-5">Automate tasks with precision using timer
Schedule recurring jobs or one-time events without the need for external cron services. Manage functions.
timing with ease, whether for regular data processing, periodic updates, or timed notifications 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> </p>
</a> </a>
</div> </div>
@@ -106,13 +157,16 @@
<a href="#" class="flex flex-wrap no-underline hover:no-underline"> <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> <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 <p class=" text-gray-600 text-base px-6 mb-5">Leverage built-in mutable JSON storage,
data persists seamlessly within the environment. Store and modify your data in real-time, with 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> the flexibility to access and update your stored information effortlessly</p>
</a> </a>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
{% endblock %} </div>
</body>