Use landing page template and perform minor UI updates on other pages (Still needs alot of work)
This commit is contained in:
Peter Stockings
@@ -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 %}
|
||||
Reference in New Issue
Block a user