/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; const PLATFORMS = [ { name: 'Instagram', logo: `` }, { name: 'X', logo: `` }, { name: 'TikTok', logo: `` }, { name: 'Facebook', logo: `` }, { name: 'LinkedIn', logo: `` }, { name: 'YouTube', logo: `` }, { name: 'Snapchat', logo: `` }, { name: 'Tumblr', logo: `` }, ]; function App() { const [step, setStep] = useState(1); const [platform, setPlatform] = useState(""); const [handle, setHandle] = useState(""); const [email, setEmail] = useState(""); const [bestTime, setBestTime] = useState(null); const [isAnalyzing, setIsAnalyzing] = useState(false); const [message, setMessage] = useState(""); const [error, setError] = useState(""); const handlePlatformSelect = (selectedPlatform) => { setPlatform(selectedPlatform); setStep(2); setMessage(`Great choice! ${selectedPlatform} is awesome.`); }; const handleSubmit = async (e) => { e.preventDefault(); if (step === 2) { setStep(3); setMessage("Thanks! We'll use this to analyze your best posting time."); } else if (step === 3) { setIsAnalyzing(true); setMessage("Analyzing your social media activity..."); setError(""); // Clear any previous error try { const response = await fetch("/check-email", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ email, platform }), }); if (!response.ok) { throw new Error("Email already used for this platform"); } setTimeout(() => { const randomHour = Math.floor(Math.random() * 24); const randomMinute = Math.floor(Math.random() * 60); setBestTime(`${randomHour.toString().padStart(2, '0')}:${randomMinute.toString().padStart(2, '0')}`); setIsAnalyzing(false); }, 10000); } catch (error) { setError("This email has already been used for this platform. Please use a different email or platform."); setIsAnalyzing(false); } } }; useEffect(() => { if (message) { const timer = setTimeout(() => setMessage(""), 3000); return () => clearTimeout(timer); } }, [message]); useEffect(() => { if (error) { const timer = setTimeout(() => setError(""), 5000); return () => clearTimeout(timer); } }, [error]); return (

BestTime2Post

{step === 1 && (

Let's find the best time for your social media posts

{PLATFORMS.map((p) => ( ))}

)} {step === 2 && (

What's your {platform} handle?

)} {step === 3 && (

Where should we send your expanded insights?

{error &&

{error}

}

p.name === platform)?.logo }}> {platform}

)} {isAnalyzing && (

Analyzing...

)} {bestTime && (

Your Best Posting Time:

{bestTime.slice(0, -1)}{bestTime.slice(-1)}

This time maximizes your engagement potential!

)} {message &&

{message}

} {step === 1 && (

BestTime2Post uses advanced algorithms to analyze your social media activity and determine the optimal time for you to post. Our AI-powered system takes into account factors such as your followers' activity patterns, engagement rates, and platform-specific trends to provide you with a personalized recommendation. By posting at the suggested time, you can maximize your reach and increase your chances of going viral. Start now and take your social media game to the next level!

)}

); } function renderApp() { const root = document.getElementById("root"); if (root) { createRoot(root).render(); } else { console.error("Root element not found"); } } function client() { if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", renderApp); } else { renderApp(); } } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const { email } = await import("https://esm.town/v/std/email"); const KEY = new URL(import.meta.url).pathname.split("/").at(-1); // Create table if it doesn't exist await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_users ( id INTEGER PRIMARY KEY AUTOINCREMENT, platform TEXT NOT NULL, handle TEXT NOT NULL, email TEXT NOT NULL, timestamp DATETIME DEFAULT CURRENT_TIMESTAMP, UNIQUE(email, platform) ) `); if (request.method === "POST" && new URL(request.url).pathname === "/check-email") { const { email, platform } = await request.json(); // Check if email already exists for this platform const result = await sqlite.execute(` SELECT email FROM ${KEY}_users WHERE email = ? AND platform = ? `, [email, platform]); if (result.rows.length > 0 && email.toLowerCase() !== "allabouttaurus@gmail.com") { return new Response(JSON.stringify({ error: "Email already used for this platform" }), { status: 400, headers: { "Content-Type": "application/json" }, }); } return new Response(JSON.stringify({ success: true }), { headers: { "Content-Type": "application/json" }, }); } if (request.method === "POST" && new URL(request.url).pathname === "/submit") { const { platform, handle, email } = await request.json(); try { // Insert user data into SQLite database await sqlite.execute(` INSERT INTO ${KEY}_users (platform, handle, email) VALUES (?, ?, ?) `, [platform, handle, email]); // Send email to the user await email({ to: email, subject: "Your BestTime2Post Analysis", text: `Thank you for using BestTime2Post! Here's a brief analysis of your ${platform} account: 1. Best Posting Time: The time shown is when your followers are most active. 2. Engagement Rate: This measures how much your audience interacts with your content. 3. Follower Growth: This tracks how quickly your audience is growing. 4. Content Performance: This shows which types of posts perform best. To read your analytics: - Look for patterns in when your high-performing posts were published. - Pay attention to which content types get the most engagement. - Monitor your follower growth alongside your posting frequency. Remember, consistency is key in social media success! Best regards, The BestTime2Post Team`, html: `

Your BestTime2Post Analysis

Thank you for using BestTime2Post! Here's a brief analysis of your ${platform} account:

Best Posting Time: The time shown is when your followers are most active.
Engagement Rate: This measures how much your audience interacts with your content.
Follower Growth: This tracks how quickly your audience is growing.
Content Performance: This shows which types of posts perform best.

To read your analytics:

Look for patterns in when your high-performing posts were published.
Pay attention to which content types get the most engagement.
Monitor your follower growth alongside your posting frequency.

Remember, consistency is key in social media success!

Best regards,
The BestTime2Post Team

`, }); return new Response(JSON.stringify({ success: true }), { headers: { "Content-Type": "application/json" }, }); } catch (error) { return new Response(JSON.stringify({ error: "Email already used for this platform" }), { status: 400, headers: { "Content-Type": "application/json" }, }); } } return new Response(` BestTime2Post

`, { headers: { "content-type": "text/html", }, }); } const css = ` body { font-family: 'Inter', sans-serif; line-height: 1.6; margin: 0; padding: 0; background-color: #000000; color: #ffffff; } .container { max-width: 800px; margin: 2rem auto; padding: 2rem; background-color: #1a1a1a; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } h1 { text-align: center; color: #ffffff; font-size: 2.5rem; margin-bottom: 2rem; } h2 { color: #ffffff; font-size: 1.5rem; margin-bottom: 1rem; } .step { margin-bottom: 2rem; } .platform-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; } .platform-button { display: flex; flex-direction: column; align-items: center; padding: 1rem; border: none; border-radius: 8px; background-color: #333333; color: #ffffff; font-size: 1rem; cursor: pointer; transition: all 0.3s ease; width: calc(25% - 1rem); max-width: 120px; } .platform-button:hover { background-color: #4d4d4d; } .platform-logo { display: flex; justify-content: center; align-items: center; width: 48px; height: 48px; margin-bottom: 0.5rem; } .platform-logo svg { width: 100%; height: 100%; } input { width: 100%; padding: 0.75rem; margin-bottom: 1rem; border: 2px solid #333333; border-radius: 8px; font-size: 1rem; background-color: #1a1a1a; color: #ffffff; } input:focus { outline: none; border-color: #4d4d4d; } button { display: block; width: 100%; padding: 0.75rem; background-color: #333333; color: #ffffff; border: none; border-radius: 8px; font-size: 1rem; cursor: pointer; transition: background-color 0.3s ease; } button:hover { background-color: #4d4d4d; } .analyzing { text-align: center; } .clock { width: 200px; height: 200px; border: 10px solid #333333; border-radius: 50%; margin: 2rem auto; position: relative; background-color: #1a1a1a; } .clock-face { position: relative; width: 100%; height: 100%; } .hand { width: 50%; height: 6px; background: #ffffff; position: absolute; top: 50%; transform-origin: 100%; transform: rotate(90deg); transition: all 0.05s; transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); } .hour-hand { width: 30%; left: 20%; animation: rotate 43200s infinite linear; } .minute-hand { height: 4px; animation: rotate 3600s infinite linear; } .second-hand { height: 2px; background: #ff6b6b; animation: rotate 60s infinite linear; } @keyframes rotate { 100% { transform: rotate(450deg); } } .result { text-align: center; } .time-brick { font-size: 3rem; font-weight: bold; color: #000000; background-color: #ffffff; padding: 1rem; border-radius: 8px; display: inline-block; margin: 1rem 0; } .blurred { filter: blur(8px); margin-left: 4px; } .message { background-color: #333333; color: #ffffff; padding: 1rem; border-radius: 8px; text-align: center; margin-top: 1rem; animation: fadeIn 0.5s ease-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .bottom-copy { margin-top: 2rem; padding: 1rem; background-color: #333333; border-radius: 8px; font-size: 0.9rem; line-height: 1.6; } .error { color: #ff6b6b; margin-top: 1rem; text-align: center; animation: fadeIn 0.5s ease-out, fadeOut 0.5s ease-in 4.5s forwards; } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .selected-platform { display: flex; justify-content: center; align-items: center; margin-top: 1rem; padding: 0.5rem; background-color: #333333; border-radius: 8px; } .selected-platform .platform-logo { width: 24px; height: 24px; margin-right: 0.5rem; } .selected-platform span { font-size: 1rem; } @media (max-width: 600px) { .platform-button { width: calc(33.33% - 1rem); } } @media (max-width: 480px) { .platform-button { width: calc(50% - 1rem); } } `;

taurusismagic