/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useRef } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; function FoundationStoneGenerator() { const [columnWidth, setColumnWidth] = useState(20); const [numColumns, setNumColumns] = useState(3); const [specialChars, setSpecialChars] = useState(5); const [inscription, setInscription] = useState(""); const [fontStyle, setFontStyle] = useState("courier"); const [textEffect, setTextEffect] = useState("none"); const inscriptionRef = useRef(null); const fontStyles = [ "courier", "times", "georgia", "palatino", "ancient" ]; const textEffects = [ "none", "engraved", "chiseled", "shadowed", "etched" ]; const words = [ "HONOR", "COURAGE", "DEDICATION", "LEGACY", "FOUNDATION", "PROGRESS", "UNITY", "STRENGTH", "WISDOM", "INNOVATION", "ETERNAL", "RESILIENCE", "TRIUMPH", "HERITAGE", "PROSPERITY", "COURAGE", "VISION", "HARMONY", "SPIRIT", "ACHIEVEMENT" ]; const specialSymbols = [ "★", "✦", "✧", "❖", "❂", "✿", "✾", "❃", "☥", "⚔️", "🔱", "⚜️", "🏛️", "🌟", "🕊️" ]; const generateInscription = () => { const generateText = () => { const totalLength = columnWidth * numColumns; return Array.from({ length: totalLength }, () => Math.random() < (specialChars / 20) ? specialSymbols[Math.floor(Math.random() * specialSymbols.length)] : words[Math.floor(Math.random() * words.length)] ).join(" "); }; setInscription(generateText()); }; const copyToClipboard = () => { if (inscriptionRef.current) { navigator.clipboard.writeText(inscriptionRef.current.innerText); alert("Inscription copied to clipboard!"); } }; return (

🏛️ Foundation Stone Inscription Generator

Column Width: {columnWidth} setColumnWidth(Number(e.target.value))} />

Number of Columns: {numColumns} setNumColumns(Number(e.target.value))} />

Special Characters: {specialChars} setSpecialChars(Number(e.target.value))} />

Font Style

Text Effect

{inscription || "CLICK GENERATE TO CREATE YOUR INSCRIPTION"}

View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response(` Foundation Stone Inscription Generator

`, { headers: { "content-type": "text/html" } }); } const css = ` @import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&family=Playfair+Display:wght@600&display=swap'); :root { --bg-primary: #f4f4f4; --bg-secondary: #f9f9f9; --text-primary: #333; --accent-color: #4a4a4a; } body { font-family: 'Courier Prime', monospace; background-color: var(--bg-primary); display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; padding: 20px; box-sizing: border-box; } .foundation-generator { background-color: white; border-radius: 15px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 6px 10px rgba(0, 0, 0, 0.05); padding: 30px; max-width: 900px; width: 100%; text-align: center; } .controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 20px; } .control-group { display: flex; flex-direction: column; align-items: center; } .inscription { font-size: 18px; text-transform: uppercase; text-align: justify; line-height: 1.6; letter-spacing: 1px; padding: 20px; background-color: var(--bg-secondary); border-radius: 8px; box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.1), inset -2px -2px 5px rgba(255, 255, 255, 0.5); word-spacing: 5px; color: var(--text-primary); min-height: 100px; } .button-group { display: flex; justify-content: center; gap: 10px; margin-top: 15px; } input[type="range"], select { width: 100%; margin-top: 10px; } button { background-color: var(--accent-color); color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; transition: background-color 0.3s, transform 0.1s; display: flex; align-items: center; justify-content: center; gap: 5px; } button:hover { background-color: #666; transform: scale(1.05); } .source-link { display: block; margin-top: 15px; color: #666; text-decoration: none; font-size: 0.8em; } /* Font Styles */ .courier-font { font-family: 'Courier Prime', monospace; } .times-font { font-family: 'Times New Roman', serif; } .georgia-font { font-family: Georgia, serif; } .palatino-font { font-family: Palatino, serif; } .ancient-font { font-family: 'Playfair Display', serif; font-weight: 600; } /* Text Effects */ .engraved-effect { text-shadow: -1px -1px 0 rgba(0,0,0,0.2), 1px 1px 0 rgba(255,255,255,0.2); } .chiseled-effect { text-shadow: -1px -1px 0 rgba(0,0,0,0.3), 1px 1px 0 rgba(255,255,255,0.3); color: #444; } .shadowed-effect { text-shadow: 2px 2px 4px rgba(0,0,0,0.4); } .etched-effect { text-shadow: -1px -1px 0 rgba(255,255,255,0.5), 1px 1px 0 rgba(0,0,0,0.2); color: #555; } `;

foundation

Versions

v0