88 lines
6.6 KiB
HTML
88 lines
6.6 KiB
HTML
<html>
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" type="text/css" href="/static/css/index.css" />
|
|
<script src="/static/htmx.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div style="background-image: url(/static/images/ruins_bg1.jpg)" class="relative h-full overflow-hidden bg-cover">
|
|
<div class="relative pt-6 pb-16 md:pb-20 lg:pb-24 xl:pb-32">
|
|
<main class="mx-auto max-w-screen-xl px-4 sm:mt-12 sm:px-6 md:mt-20 xl:mt-24">
|
|
<div class="lg:grid lg:grid-cols-12 lg:gap-8">
|
|
<div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 bg-white p-4 lg:px-12 lg:py-8 rounded lg:text-left">
|
|
<h2 class="sm:mt-1 text-3xl tracking-tight leading-8 sm:leading-10 font-extrabold text-gray-900 sm:leading-none sm:text-6xl lg:text-5xl xl:text-5xl">
|
|
Register for the
|
|
<br class="hidden md:inline" />
|
|
<span class="text-indigo-600">Ourworld Mkusanyiko</span>
|
|
</h2>
|
|
<div flex>
|
|
<div class="bg-gray-800 text-white rounded text-sm w-fit font-medium p-1 mt-2 sm:mt-4">26 October 2022 @@6PM</div>
|
|
</div>
|
|
<div id="content">
|
|
<p class="mt-3 text- text-gray-500 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
|
|
Join us at Mbweni Ruins, Jungle Paradise Resort to celebrate - with music, artists & food - our collective effort to pave the way towards a regenerative, inclusive and empowering digital future in Africa. Shuttles available from conference center.
|
|
</p>
|
|
<div class="mt-3 sm:mt-5 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0">
|
|
<form hx-post="/register" hx-target="#content" class="mt-3 sm:flex flex-col">
|
|
<div>
|
|
<div class="md:flex">
|
|
<div class="flex-col md:mr-2">
|
|
<label for="name" class="block text-sm font-medium leading-5 text-gray-700">Name</label>
|
|
<input id="name" name="name" aria-label="Name" class="appearance-none block w-full mt-1 px-2 py-2 sm:px-3 sm:py-3 border border-gray-300 text-base leading-6 rounded-md placeholder-gray-500 shadow-sm focus:outline-none focus:placeholder-gray-400 focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:flex-1" placeholder="Name Surname" />
|
|
</div>
|
|
<div class="md:ml-2">
|
|
<label for="company_website" class="mt-1 lg:mt-0 block text-sm font-medium leading-5 text-gray-700">Organization Website</label>
|
|
<div class="mt-1 relative rounded-md shadow-sm">
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<span class="text-gray-500 sm:text-base sm:leading-5">
|
|
http://
|
|
</span>
|
|
</div>
|
|
<input id="company_website" name="org_website" class="form-input pl-16 sm:pl-14 appearance-none block w-full px-2 py-2 sm:px-3 sm:py-3 border border-gray-300 text-base leading-6 rounded-md placeholder-gray-500 shadow-sm focus:outline-none focus:placeholder-gray-400 focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:flex-1" placeholder="www.example.com" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-3 sm:flex">
|
|
<input aria-label="Email" name="email" class="appearance-none block w-full px-2 py-2 sm:px-3 sm:py-3 border border-gray-300 text-base leading-6 rounded-md placeholder-gray-500 shadow-sm focus:outline-none focus:placeholder-gray-400 focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:flex-1" placeholder="Enter your email" />
|
|
<button type="submit" class="mt-3 w-full px-6 py-2 sm:py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-gray-800 shadow-sm hover:bg-gray-700 focus:outline-none focus:border-gray-900 focus:shadow-outline-gray active:bg-gray-900 transition duration-150 ease-in-out sm:mt-0 sm:ml-3 sm:flex-shrink-0 sm:inline-flex sm:items-center sm:w-auto">
|
|
Register
|
|
</button>
|
|
</div>
|
|
<div class="relative mt-2 sm:mt-4 flex">
|
|
<div class="flex items-center h-5">
|
|
<input id="settings-option-0" name="plus_one" type="checkbox" class="form-radio h-4 w-4 text-indigo-600 transition duration-150 ease-in-out cursor-pointer" />
|
|
</div>
|
|
<label for="settings-option-0" class="ml-3 flex flex-col cursor-pointer">
|
|
<!-- On: "text-indigo-900", Off: "text-gray-900" -->
|
|
<span class="block text-sm leading-5 font-normal">
|
|
I want to register a plus one to join the event.
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<div class="relative mt-2 sm:mt-4 flex">
|
|
<div class="flex items-center h-5">
|
|
<input id="settings-option-1" name="receive_communication" type="checkbox" class="form-radio h-4 w-4 text-indigo-600 transition duration-150 ease-in-out cursor-pointer" checked />
|
|
</div>
|
|
<label for="settings-option-1" class="ml-3 flex flex-col cursor-pointer">
|
|
<!-- On: "text-indigo-900", Off: "text-gray-900" -->
|
|
<span class="block text-sm leading-5 font-normal">
|
|
I want to receive communication on Ourworld.
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</form>
|
|
<p class="mt-1 sm:mt-3 text-sm leading-5 text-gray-500">
|
|
We won't share your data. Read our
|
|
<a href="https://library.threefold.me/info/legal/#/legal__privacypolicy" target="_blank" class="font-medium text-gray-900 underline">Privacy Policy</a>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|