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

Use landing page template and perform minor UI updates on other pages (Still needs alot of work)

Browse Source
This commit is contained in:
Peter Stockings
2024-03-24 21:50:21 +11:00
parent 6dcd46fee0
commit fc021d6971
6 changed files with 172 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
templates/base.html
View File

@@ -22,10 +22,60 @@
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%);
}
/* Browser mockup code
* Contribute: https://gist.github.com/jarthod/8719db9fef8deb937f4f
* Live example: https://updown.io
*/
.browser-mockup {
border-top: 2em solid rgba(230, 230, 230, 0.7);
position: relative;
height: 60vh;
}
.browser-mockup:before {
display: block;
position: absolute;
content: "";
top: -1.25em;
left: 1em;
width: 0.5em;
height: 0.5em;
border-radius: 50%;
background-color: #f44;
box-shadow: 0 0 0 2px #f44, 1.5em 0 0 2px #9b3, 3em 0 0 2px #fb5;
}
.browser-mockup>* {
display: block;
}
/* Custom code for the demo */
</style>
</head>
<body class="bg-gray-100 font-roboto">
<div class="container mx-auto p-4">
<body class="gradient leading-relaxed tracking-wide flex flex-col">
<div class="container mx-auto p-4 min-h-screen h-full">
{% block content %}

10
templates/dashboard.html
View File

@@ -3,7 +3,7 @@
{% block content %}
<div class="grid min-h-screen w-full lg:grid-cols-[280px_1fr]" data-id="1">
<div class="hidden border-r bg-gray-100/40 lg:block dark:bg-gray-800/40" data-id="2">
<div class="hidden border-r lg:block" data-id="2">
<div class="flex h-full max-h-screen flex-col gap-2" data-id="3">
<div class="flex h-[60px] items-center border-b px-6" data-id="4"><a
class="flex items-center gap-2 font-semibold" data-id="5" href="#"><svg
@@ -65,10 +65,10 @@
</div>
</div>
<div class="flex flex-col" data-id="28">
<header class="flex h-14 lg:h-[60px] items-center gap-4 border-b bg-gray-100/40 px-6 dark:bg-gray-800/40"
data-id="29"><a class="lg:hidden" data-id="30" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24"
height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="h-6 w-6" data-id="31">
<header class="flex h-14 lg:h-[60px] items-center gap-4 border-b px-6" data-id="29"><a class="lg:hidden"
data-id="30" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="h-6 w-6" data-id="31">
<path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"></path>
</svg><span class="sr-only" data-id="32">Home</span></a>
<div class="w-full flex-1" data-id="33">

6
templates/function_editor.html
View File

@@ -108,7 +108,7 @@
</svg>
</span>
</label>
<label class="mt-px font-light text-gray-700 cursor-pointer select-none" htmlFor="is_public">
<label class="mt-px font-light text-gray-200 cursor-pointer select-none" htmlFor="is_public">
Public
</label>
</div>
@@ -128,7 +128,7 @@
</svg>
</span>
</label>
<label class="mt-px font-light text-gray-700 cursor-pointer select-none" htmlFor="log_request">
<label class="mt-px font-light text-gray-200 cursor-pointer select-none" htmlFor="log_request">
Log Request
</label>
</div>
@@ -148,7 +148,7 @@
</svg>
</span>
</label>
<label class="mt-px font-light text-gray-700 cursor-pointer select-none" htmlFor="log_response">
<label class="mt-px font-light text-gray-200 cursor-pointer select-none" htmlFor="log_response">
Log Response
</label>
</div>

135
templates/home.html
View File

@@ -2,36 +2,117 @@
{% block content %}
<header class="flex h-14 lg:h-[60px] items-center gap-4 border-b bg-gray-100/40 dark:bg-gray-800/40" data-id="29"><a
class="lg:hidden" data-id="30" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="h-6 w-6" data-id="31" data-darkreader-inline-stroke=""
style="--darkreader-inline-stroke: currentColor;">
<path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"></path>
</svg><span class="sr-only" data-id="32">Home</span></a>
<div class="w-full flex-1" data-id="33">
<h1 class="text-4xl font-bold text-gray-800 mb-2">Function</h1>
</div><a
class="inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground rounded-full border border-gray-200 w-8 h-8 dark:border-gray-800"
data-id="40" type="button" id="radix-:r1u:" aria-haspopup="menu" aria-expanded="false" data-state="closed"
href="{{ url_for('dashboard') }}"><svg 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" data-darkreader-inline-stroke=""
style="--darkreader-inline-stroke: currentColor;">
<path stroke-linecap="round" stroke-linejoin="round"
d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"></path>
</svg>
<span class="sr-only" data-id="42">Toggle user menu</span></a>
</header>
<h5 class="text-xl md:text-2xl lg:text-3xl font-semibold text-gray-700 mb-4">Create your own JavaScript HTTP & Timer
handlers</h5>
<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">
<path d="M13 8V0L8.11 5.87 3 12h4v8L17 8h-4z"></path>
</svg></a>
</div>
<p class="text-base md:text-lg text-gray-600 leading-relaxed mb-6">
This tool allows you to write and execute JavaScript code for HTTP and timer-based functions. Utilize the on-page
code editor to develop and modify your scripts. Once executed, view the responses and logs immediately, providing
direct insight into the behavior and output of your handlers.
</p>
<div class="block lg:hidden pr-4">
<button id="nav-toggle"
class="flex items-center px-3 py-2 border rounded text-gray-500 border-gray-600 hover:text-gray-800 hover:border-green-500 appearance-none focus:outline-none">
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<title>Menu</title>
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
</svg>
</button>
</div>
<div class="w-full flex-grow lg:flex lg:items-center lg:w-auto hidden lg:block mt-2 lg:mt-0 text-black p-4 lg:p-0 z-20"
id="nav-content">
<ul class="list-reset lg:flex justify-end flex-1 items-center">
<li class="mr-3">
<a class="inline-block py-2 px-4 text-black font-bold no-underline" href="#">Home</a>
</li>
<li class="mr-3">
<a class="inline-block text-black no-underline hover:text-gray-800 hover:text-underline py-2 px-4"
href="#">Documentation</a>
</li>
<li class="mr-3">
<a class="inline-block text-black no-underline hover:text-gray-800 hover:text-underline py-2 px-4"
href="#">About</a>
</li>
</ul>
<a href="{{ url_for('dashboard') }}"
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>
</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>
<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">
Focus on coding; we handle the deployment seamlessly.
</p>
<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"
href="/signup">
Sign Up
</a>
<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">
View documentation</a>
</div>
{{ render_partial('function_editor.html', name=name, script=script, environment_info=environment_info) }}
<section class="py-8">
<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>
<div class="w-full mb-4">
<div class="h-1 mx-auto gradient w-64 opacity-25 my-0 py-0 rounded-t"></div>
</div>
<div class="w-full md:w-1/3 p-6 flex flex-col flex-grow flex-shrink">
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow">
<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
easily returning responses in various formats
</p>
</a>
</div>
</div>
<div class="w-full md:w-1/3 p-6 flex flex-col flex-grow flex-shrink">
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow">
<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>
</a>
</div>
</div>
<div class="w-full md:w-1/3 p-6 flex flex-col flex-grow flex-shrink">
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow">
<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
the flexibility to access and update your stored information effortlessly</p>
</a>
</div>
</div>
</div>
</section>
{% endblock %}

4
templates/login.html
View File

@@ -2,8 +2,8 @@
{% block content %}
<div class="w-full h-screen flex items-center justify-center bg-gray-100" data-id="1">
<div class="rounded-lg border bg-card text-card-foreground shadow-sm w-full max-w-md mx-4" data-id="2"
<div class="w-full h-screen flex items-center justify-center" data-id="1">
<div class="rounded-lg border bg-card text-card-foreground shadow-sm w-full max-w-md mx-4 bg-gray-100" data-id="2"
data-v0-t="card">
<div class="flex flex-col space-y-1.5 p-6" data-id="3">
<h1 class="text-3xl font-bold text-center" data-id="4">

4
templates/signup.html
View File

@@ -2,8 +2,8 @@
{% block content %}
<div class="w-full h-screen flex items-center justify-center bg-gray-100" data-id="1">
<div class="rounded-lg border bg-card text-card-foreground shadow-sm w-full max-w-md mx-4" data-id="2"
<div class="w-full h-screen flex items-center justify-center" data-id="1">
<div class="rounded-lg border bg-card text-card-foreground shadow-sm w-full max-w-md mx-4 bg-gray-100" data-id="2"
data-v0-t="card">
<div class="flex flex-col space-y-1.5 p-6" data-id="3">
<h1 class="text-3xl font-bold text-center" data-id="4">