🎉 Lifetime of Love 🎉

A Journey Through Precious Moments

\n );\n}\n\nfunction WishForm({ onSubmit }) {\n const [wish, setWish] = useState({\n name: '',\n message: '',\n relationship: ''\n });\n\n const handleChange = (e) => {\n const { name, value } = e.target;\n setWish(prev => ({ ...prev, [name]: value }));\n };\n\n const handleSubmit = (e) => {\n e.preventDefault();\n if (wish.name && wish.message) {\n onSubmit(wish);\n setWish({ name: '', message: '', relationship: '' });\n }\n };\n\n return (\n

\n \n \n

\n      <button type=\"submit\">Send Wish 💌</button>\n    </form>\n  );\n}\n\nfunction App() {\n  const [memories, setMemories] = useState([]);\n  const [selectedMemory, setSelectedMemory] = useState(null);\n  const [wishes, setWishes] = useState([]);\n\n  useEffect(() => {\n    fetchMemories();\n    fetchWishes();\n  }, []);\n\n  const fetchMemories = async () => {\n    try {\n      const response = await fetch('/memories');\n      const data = await response.json();\n      setMemories(data);\n    } catch (error) {\n      console.error('Failed to fetch memories:', error);\n    }\n  };\n\n  const fetchWishes = async () => {\n    try {\n      const response = await fetch('/wishes');\n      const data = await response.json();\n      setWishes(data);\n    } catch (error) {\n      console.error('Failed to fetch wishes:', error);\n    }\n  };\n\n  const submitWish = async (newWish) => {\n    try {\n      await fetch('/wishes', {\n        method: 'POST',\n        headers: { 'Content-Type': 'application/json' },\n        body: JSON.stringify(newWish)\n      });\n      await fetchWishes();\n    } catch (error) {\n      console.error('Failed to submit wish:', error);\n    }\n  };\n\n  const defaultMemories = [\n    {\n      year: 1995,\n      title: \"Wedding Day\",\n      description: \"Their beautiful wedding ceremony in traditional attire, marking the beginning of their eternal love story.\",\n      image: \"💒\",\n      location: \"Hyderabad\",\n      link: \"https://photos.app.goo.gl/6bjVnyLtUxH7w57T6\",\n    },\n    {\n      year: 1996,\n      title: \"First Child\",\n      description: \"Welcomed their first child, adding a new dimension of joy and love to their life.\",\n      image: \"👨‍👩‍👧\",\n      location: \"Hyderabad\",\n      link: \"https://photos.app.goo.gl/Xa5HakQ4hSL9Amd98\",\n    },\n    {\n      year: 1999,\n      title: \"Second Child\",\n      description: \"Expanded their family with their second child, bringing more love and happiness.\",\n      image: \"👨‍👩‍👧‍👦\",\n      location: \"Hyderabad\",\n      link: \"https://photos.app.goo.gl/TJtGt2sG7kfeitKx8\",\n    },\n    {\n      year: 2001,\n      title: \"Third Child\",\n      description: \"Welcomed their third child, a baby boy, completing their beautiful family circle.\",\n      image: \"👨‍👩‍👦\",\n      location: \"Hyderabad\",\n      link: \"https://photos.app.goo.gl/4gybF1Lf9mgHrhKn8\",\n    },\n    {\n      year: 2015,\n      title: \"Silver Anniversary\",\n      description: \"Celebrated 20 years of marriage with family and friends, reflecting on their beautiful journey.\",\n      image: \"💍\",\n      location: \"Hyderabad\",\n    },\n    {\n      year: 2023,\n      title: \"Family Photo\",\n      description: \"A beautiful family portrait capturing love, growth, and togetherness.\",\n      image: \"👨‍👩‍👧‍👦\",\n      location: \"Hyderabad\",\n      link: \"https://photos.app.goo.gl/dLW9ZcjsecxchX6n7\",\n    }\n  ];\n\n  return (\n    <>\n      <CelebrationOverlay />\n      <div className=\"anniversary-page\">\n        <div className=\"header-section\">\n          <h2>💖 Our Love Story 💖</h2>\n          <p>A beautiful journey of love, family, and shared moments</p>\n        </div>\n\n        <div className=\"memories-grid\">\n          {(memories.length > 0 ? memories : defaultMemories).map((memory, index) => (\n            <div \n              key={memory.id || index} \n              className=\"memory-card\"\n              onClick={() => setSelectedMemory(memory)}\n            >\n              <div className=\"memory-icon\">{memory.image}</div>\n              <div className=\"memory-details\">\n                <h3>{memory.title} ({memory.year})</h3>\n                <p>{memory.location}</p>\n              </div>\n            </div>\n          ))}\n        </div>\n\n        {selectedMemory && (\n          <div className=\"memory-modal\" onClick={() => setSelectedMemory(null)}>\n            <div className=\"memory-modal-content\">\n              <h2>{selectedMemory.title} ({selectedMemory.year})</h2>\n              <p>{selectedMemory.description}</p>\n              <p><strong>Location:</strong> {selectedMemory.location}</p>\n              {selectedMemory.link && (\n                <a href={selectedMemory.link} target=\"_blank\" className=\"photo-link\">\n                  View Photos 📸\n                </a>\n              )}\n            </div>\n          </div>\n        )}\n\n        <div className=\"wishes-section\">\n          <h2>💌 Wishes & Blessings</h2>\n          <WishForm onSubmit={submitWish} />\n          \n          <div className=\"wishes-grid\">\n            {wishes.map((wish, index) => (\n              <div key={index} className=\"wish-card\">\n                <h3>{wish.name}</h3>\n                <p className=\"wish-relationship\">{wish.relationship}</p>\n                <p className=\"wish-message\">\"{wish.message}\"</p>\n              </div>\n            ))}\n          </div>\n        </div>\n      </div>\n    </>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<App />);\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise<Response> {\n  const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n  const KEY = \"Hi\";\n  const MEMORIES_TABLE = `${KEY}_memories`;\n  const WISHES_TABLE = `${KEY}_wishes`;\n\n  // Initialize memories table\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${MEMORIES_TABLE} (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      year INTEGER NOT NULL,\n      title TEXT NOT NULL,\n      description TEXT NOT NULL,\n      image TEXT,\n      location TEXT,\n      link TEXT\n    )\n  `);\n\n  // Initialize wishes table\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${WISHES_TABLE} (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      name TEXT NOT NULL,\n      message TEXT NOT NULL,\n      relationship TEXT,\n      timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n    )\n  `);\n\n  // Seed memories if empty\n  const existingMemories = await sqlite.execute(`SELECT COUNT(*) as count FROM ${MEMORIES_TABLE}`);\n  if (existingMemories.rows[0].count === 0) {\n    const defaultMemories = [\n      { year: 1995, title: \"Wedding Day\", description: \"Their beautiful wedding ceremony in traditional attire, marking the beginning of their eternal love story.\", image: \"💒\", location: \"Hyderabad\", link: \"https://photos.app.goo.gl/6bjVnyLtUxH7w57T6\" },\n      { year: 1996, title: \"First Child\", description: \"Welcomed their first child, adding a new dimension of joy and love to their life.\", image: \"👨‍👩‍👧\", location: \"Hyderabad\", link: \"https://photos.app.goo.gl/Xa5HakQ4hSL9Amd98\" },\n      { year: 1999, title: \"Second Child\", description: \"Expanded their family with their second child, bringing more love and happiness.\", image: \"👨‍👩‍👧‍👦\", location: \"Hyderabad\", link: \"https://photos.app.goo.gl/TJtGt2sG7kfeitKx8\" },\n      { year: 2001, title: \"Third Child\", description: \"Welcomed their third child, a baby boy, completing their beautiful family circle.\", image: \"👨‍👩‍👦\", location: \"Hyderabad\", link: \"https://photos.app.goo.gl/4gybF1Lf9mgHrhKn8\" },\n      { year: 2015, title: \"Silver Anniversary\", description: \"Celebrated 20 years of marriage with family and friends, reflecting on their beautiful journey.\", image: \"💍\", location: \"Hyderabad\" },\n      { year: 2023, title: \"Family Photo\", description: \"A beautiful family portrait capturing love, growth, and togetherness.\", image: \"👨‍👩‍👧‍👦\", location: \"Hyderabad\", link: \"https://photos.app.goo.gl/dLW9ZcjsecxchX6n7\" }\n    ];\n\n    for (const memory of defaultMemories) {\n      await sqlite.execute(`\n        INSERT INTO ${MEMORIES_TABLE} \n        (year, title, description, image, location, link) \n        VALUES (?, ?, ?, ?, ?, ?)\n      `, [\n        memory.year, \n        memory.title, \n        memory.description, \n        memory.image, \n        memory.location, \n        memory.link\n      ]);\n    }\n  }\n\n  // Handle routes\n  if (request.method === 'GET' && new URL(request.url).pathname === '/memories') {\n    const memories = await sqlite.execute(`SELECT * FROM ${MEMORIES_TABLE} ORDER BY year`);\n    return new Response(JSON.stringify(memories.rows), {\n      headers: { 'Content-Type': 'application/json' }\n    });\n  }\n\n  if (request.method === 'GET' && new URL(request.url).pathname === '/wishes') {\n    const wishes = await sqlite.execute(`SELECT * FROM ${WISHES_TABLE} ORDER BY timestamp DESC LIMIT 20`);\n    return new Response(JSON.stringify(wishes.rows), {\n      headers: { 'Content-Type': 'application/json' }\n    });\n  }\n\n  if (request.method === 'POST' && new URL(request.url).pathname === '/wishes') {\n    const wish = await request.json();\n    await sqlite.execute(`\n      INSERT INTO ${WISHES_TABLE} \n      (name, message, relationship) \n      VALUES (?, ?, ?)\n    `, [\n      wish.name, \n      wish.message, \n      wish.relationship\n    ]);\n    return new Response('Wish added', { status: 201 });\n  }\n\n  return new Response(`\n    <html>\n      <head>\n        <title>Love Story Memories</title>\n        <style>${css}</style>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      </head>\n      <body>\n        <div id=\"root\"></div>\n        <script src=\"https://esm.town/v/std/catch\"></script>\n        <script type=\"module\" src=\"${import.meta.url}\"></script>\n      </body>\n    </html>\n  `, {\n    headers: { 'Content-Type': 'text/html' }\n  });\n}\n\nconst css = `\n:root {\n  --primary-color: #ff6b6b;\n  --secondary-color: #4ecdc4;\n  --background-color: #f7fff7;\n  --text-color: #2c3e50;\n}\n\n* {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\nbody {\n  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n  background-color: var(--background-color);\n  color: var(--text-color);\n  line-height: 1.6;\n}\n\n.anniversary-page {\n  max-width: 1000px;\n  margin: 0 auto;\n  padding: 20px;\n  background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(240,240,240,0.6));\n  border-radius: 15px;\n  box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n}\n\n.header-section {\n  text-align: center;\n  margin-bottom: 30px;\n  padding: 20px;\n  background: linear-gradient(to right, var(--primary-color), var(--secondary-color));\n  color: white;\n  border-radius: 10px;\n}\n\n.header-section h2 {\n  font-size: 2.5em;\n  margin-bottom: 10px;\n}\n\n.memories-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 20px;\n  margin-bottom: 30px;\n}\n\n.memory-card {\n  background: white;\n  border-radius: 10px;\n  padding: 20px;\n  text-align: center;\n  box-shadow: 0 5px 15px rgba(0,0,0,0.1);\n  transition: all 0.3s ease;\n  cursor: pointer;\n}\n\n.memory-card:hover {\n  transform: translateY(-10px);\n  box-shadow: 0 10px 20px rgba(0,0,0,0.15);\n}\n\n.memory-icon {\n  font-size: 4em;\n  margin-bottom: 15px;\n}\n\n.memory-details h3 {\n  color: var(--primary-color);\n  margin-bottom: 10px;\n}\n\n.memory-modal {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0,0,0,0.7);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 1000;\n}\n\n.memory-modal-content {\n  background: white;\n  padding: 30px;\n  border-radius: 15px;\n  max-width: 500px;\n  text-align: center;\n}\n\n.photo-link {\n  display: inline-block;\n  margin-top: 15px;\n  padding: 10px 20px;\n  background: var(--primary-color);\n  color: white;\n  text-decoration: none;\n  border-radius: 5px;\n  transition: background 0.3s ease;\n}\n\n.photo-link:hover {\n  background: var(--secondary-color);\n}\n\n.wishes-section {\n  margin-top: 30px;\n}\n\n.wish-form {\n  display: grid;\n  gap: 15px;\n  margin-bottom: 30px;\n}\n\n.wish-form input, \n.wish-form select,\n.wish-form textarea {\n  width: 100%;\n  padding: 10px;\n  border: 1px solid #ddd;\n  border-radius: 5px;\n}\n\n.wish-form button {\n  background: var(--primary-color);\n  color: white;\n  border: none;\n  padding: 12px;\n  border-radius: 5px;\n  cursor: pointer;\n  transition: background 0.3s ease;\n}\n\n.wish-form button:hover {\n  background: var(--secondary-color);\n}\n\n.wishes-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 20px;\n}\n\n.wish-card {\n  background: white;\n  border-radius: 10px;\n  padding: 20px;\n  box-shadow: 0 5px 15px rgba(0,0,0,0.1);\n  transition: transform 0.3s ease;\n}\n\n.wish-card:hover {\n  transform: translateY(-5px);\n}\n\n.wish-card h3 {\n  color: var(--primary-color);\n  margin-bottom: 10px;\n}\n\n.wish-relationship {\n  color: var(--secondary-color);\n  font-style: italic;\n  margin-bottom: 10px;\n}\n\n.wish-message {\n  font-style: italic;\n}\n\n.celebration-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  color: white;\n  z-index: 1000;\n  text-align: center;\n  animation: fadeOut 3s forwards;\n}\n\n.celebration-overlay h1 {\n  font-size: 3em;\n  margin-bottom: 15px;\n}\n\n@keyframes fadeOut {\n  0% { opacity: 1; }\n  90% { opacity: 1; }\n  100% { \n    opacity: 0;\n    visibility: hidden;\n  }\n}\n\n@media (max-width: 768px) {\n  .memories-grid, .wishes-grid {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}\n\n@media (max-width: 480px) {\n  .memories-grid, .wishes-grid {\n    grid-template-columns: 1fr;\n  }\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/Amir7787/Hi/code/main.tsx","extension","actionData","errors"]
</article></body></html>