Back

Version 3

5/23/2024
/** @jsxImportSource https://esm.sh/preact */
import { render } from "npm:preact-render-to-string";

export default async function(req: Request) {
if (req.method === "POST") {
const name = (await req.formData()).get("name");
return new Response(render(<>Hello {name || "World"}!</>));
}
return new Response(
render(
<html>
<head>
<title>Title</title>
<style>{"html { font-family: sans-serif; }"}</style>
<script src="https://unpkg.com/htmx.org@1.9.9"></script>
</head>
<body hx-boost>
<style>@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');</style><div class="newsletter-form-container"><form class="newsletter-form" action="https://app.loops.so/api/newsletter-form/clbv5du7z04g2ju08qcznl56v" method="POST" style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%;"><input class="newsletter-form-input" name="newsletter-form-input" type="email" placeholder="you@best-email.com" required="" style="font-family: Inter, sans-serif; color: rgb(0, 0, 0); font-size: 14px; margin: 0px 0px 10px; width: 100%; max-width: 300px; min-width: 100px; background: rgb(255, 255, 255); border: 1px solid rgb(209, 213, 219); box-sizing: border-box; box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px; border-radius: 6px; padding: 8px 12px;"><button type="submit" class="newsletter-form-button" style="background: rgb(41, 176, 68); font-size: 14px; color: rgb(255, 255, 255); font-family: Inter, sans-serif; display: flex; width: 100%; max-width: 300px; white-space: normal; height: 38px; align-items: center; justify-content: center; flex-direction: row; padding: 9px 17px; box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px; border-radius: 6px; text-align: center; font-style: normal; font-weight: 500; line-height: 20px; border: none; cursor: pointer;">Subscribe to Replicate Intelligence</button><button type="button" class="newsletter-loading-button" style="background: rgb(41, 176, 68); font-size: 14px; color: rgb(255, 255, 255); font-family: Inter, sans-serif; display: none; width: 100%; max-width: 300px; white-space: normal; height: 38px; align-items: center; justify-content: center; flex-direction: row; padding: 9px 17px; box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px; border-radius: 6px; text-align: center; font-style: normal; font-weight: 500; line-height: 20px; border: none; cursor: pointer;">Please wait...</button></form><div class="newsletter-success" style="display: none; align-items: center; justify-content: center; width: 100%;"><p class="newsletter-success-message" style="font-family: Inter, sans-serif; color: rgb(0, 0, 0); font-size: 14px;">You're subscribed! 🚀</p></div><div class="newsletter-error" style="display: none; align-items: center; justify-content: center; width: 100%;"><p class="newsletter-error-message" style="font-family: Inter, sans-serif; color: rgb(185, 28, 28); font-size: 14px;">Oops! Something went wrong, please try again</p></div>
<button
class='newsletter-back-button'
type='button'
style='color:#6b7280;font: 14px, Inter, sans-serif;margin:10px auto;text-align:center;display:none;background:transparent;border:none;cursor:pointer'
onmouseout='this.style.textDecoration="none"'
onmouseover='this.style.textDecoration="underline"'>
&larr; Back
</button>
</div><script>
function submitHandler(event) {
event.preventDefault();
var container = event.target.parentNode;
var form = container.querySelector(".newsletter-form");
var formInput = container.querySelector(".newsletter-form-input");
var success = container.querySelector(".newsletter-success");
var errorContainer = container.querySelector(".newsletter-error");
var errorMessage = container.querySelector(".newsletter-error-message");
var backButton = container.querySelector(".newsletter-back-button");
deepfates-htmx_template.web.val.run
Updated: October 4, 2024