7 <title>React Hono Val Town Starter</title>
8 <!-- <link rel="stylesheet" href="/public/style.css"> -->
9 <link rel="icon" href="/public/favicon.svg" sizes="any" type="image/svg+xml">
10 <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
11 <script type="importmap">
26 created_at: string;
27 profile_banner_url: string;
28 profile_image_url_https: string;
29 can_dm: boolean;
30}
152 name: `${user.name} (@${user.screen_name})`,
153 url: `https://x.com/${user.screen_name}`,
154 icon_url: user.profile_image_url_https,
155 },
156 fields: [
165 };
166
167 // Add image if present
168 const mediaEntities = tweet.entities.media;
169 if (mediaEntities && mediaEntities.length > 0) {
170 embed.image = {
171 url: mediaEntities[0].media_url_https,
172 };
104 display: block;
105 border-radius: 4px;
106 image-rendering: pixelated;
107 border: 2px solid #333;
108 }
15made by [jenn](https://jennschiffer.com), forked by stevekrouse
16
17
12
13
14
12
13
14
28 text-shadow: 0 0 10px #00ffff;
29 }
30 .image {
31 max-width: 100%;
32 transition: transform 0.3s ease;
33 }
34 .image:hover {
35 transform: scale(1.05);
36 }
54 <div class="container">
55 <h1 class="title glitch">Cyberpunk Dreamscape</h1>
56 <img src="https://storage.googleapis.com/your-image-url" alt="Cyberpunk cityscape" class="image">
57 <p class="description">
58 An exploration of the harmony between technology and nature, where holographic architecture blends seamlessly with organic life forms. This surreal cityscape invites the viewer into a futuristic world where the lines between the digital and natural blur.
39<body>
40 <h1>Cyberpunk Dreamscape</h1>
41 <img src="https://dhvanil--9967c8c854d611f0bc9cf69ea79377d9.web.val.run/image.png" alt="Cyberpunk cityscape">
42 <p>An exploration of the harmony between technology and nature, where holographic architecture blends seamlessly with organic life forms. This surreal cityscape invites the viewer into a futuristic world where the lines between the digital and natural blur.</p>
43</body>
38 body {
39 background-color: var(--background-color);
40 background-image:
41 linear-gradient(var(--border-color) 1px, transparent 1px),
42 linear-gradient(90deg, var(--border-color) 1px, transparent 1px);
246 const playerIndicator = document.getElementById('player-indicator');
247
248 const imageBasePrompt = "pixel-art-street-fighter-alpha-style-double-dragon";
249 const imageSpecifics = "profile_vs_screen_select_headshot_only_headshot_only_headshot_only+shoulder+up";
250 const imageUrlBase = "https://maxm-imggenurl.web.val.run";
251
252 let selectedCharacter = null;
254 characters.forEach(name => {
255 const safeName = name?.trim() || 'Unknown Character';
256 const characterPrompt = \`\${imageBasePrompt}\${safeName}+\${imageSpecifics}\`;
257 const encodedPrompt = encodeURIComponent(characterPrompt);
258 const imageUrl = \`\${imageUrlBase}/\${encodedPrompt}.png\`;
259
260 const cell = document.createElement('div');
264 const portrait = document.createElement('div');
265 portrait.className = 'portrait';
266 portrait.style.backgroundImage = \`url(\${imageUrl})\`;
267
268 const namePlate = document.createElement('div');
25 author TEXT,
26 price REAL,
27 cover_image_url TEXT
28 )`,
29 `CREATE TABLE IF NOT EXISTS points_of_interest (
50 await sqlite.batch([
51 {
52 sql: `INSERT INTO tours (id, title, description, author, price, cover_image_url) VALUES (?, ?, ?, ?, ?, ?)`,
53 args: [
54 "tour_nyc_1",
57 "Geo-Narrate AI",
58 12.99,
59 "https://images.unsplash.com/photo-1534430480872-3498386e7856?q=80&w=2070&auto=format&fit=crop",
60 ],
61 },
132 author: row[3],
133 price: row[4],
134 cover_image_url: row[5],
135 points_of_interest: [],
136 };
369 content += \`
370 <div class="tour-card" data-tour-id="\${tour.id}">
371 <img src="\${tour.cover_image_url}" alt="\${tour.title}">
372 <h3>\${tour.title}</h3>
373 <p>\${tour.description}</p>
400 <button class="btn btn-secondary back-button">← Back to List</button>
401 <h2>\${tour.title}</h2>
402 <img src="\${tour.cover_image_url}" alt="\${tour.title}" style="width:100%; border-radius: 4px; margin-bottom: 15px;">
403 <p>\${tour.description}</p>
404 <button id="purchase-btn" class="btn" \${isPurchased ? 'disabled' : ''}>
