Last 10 Commits for warpstatsframehub.pro.framehub.pro

commit b676a38f89d3a19b5d2a681493f3822db8764de5 Author: root <root@hub.scroll.pub> Date: 2025-01-16 23:26:52 +0000 Subject: Initial commit diff --git a/api.js b/api.js new file mode 100644 index 0000000..92864ce --- /dev/null +++ b/api.js @@ -0,0 +1,35 @@ +export default async function handler(req, res) { + if (req.method !== 'POST') { + return res.status(405).json({ error: 'Method not allowed' }); + } + + try { + const { untrustedData, trustedData } = req.body; + const fid = trustedData?.fid; + + if (!fid) { + return res.status(400).json({ error: 'No FID provided' }); + } + + // Calculate users after (this would need actual API integration) + const totalUsers = 1000000; // Example total users + const usersAfter = totalUsers - fid; + + return res.status(200).json({ + version: 'vNext', + image: { + src: `https://warpstatsframehub.pro/api/render-stats?fid=${fid}&usersAfter=${usersAfter}`, + aspectRatio: '1.91:1' + }, + buttons: [ + { + label: 'Share Stats', + action: 'post' + } + ] + }); + } catch (error) { + console.error('Frame API error:', error); + return res.status(500).json({ error: 'Internal server error' }); + } +} diff --git a/frame.scroll b/frame.scroll new file mode 100644 index 0000000..67091af --- /dev/null +++ b/frame.scroll @@ -0,0 +1,29 @@ +main + class frameContainer + div + class frameContent + h1 WarpStats + class frameTitle + p Discover your Farcaster journey + class frameSubtitle + div + class statsDisplay + div + class statCard + span Warpcast ID + class statLabel + span #loading... + class statValue + id warpcastId + div + class statCard + span Users After You + class statLabel + span Loading... + class statValue + id usersAfter + div + class frameActionArea + button Check My Stats + class frameButton + data-action post diff --git a/head.scroll b/head.scroll new file mode 100644 index 0000000..d9bd502 --- /dev/null +++ b/head.scroll @@ -0,0 +1,16 @@ +metaTags +meta + name viewport + content width=device-width, initial-scale=1.0 + +replaceNodejs + module.exports = {JSONCONTENTS: JSON.stringify(JSON.parse(require("fs").readFileSync("meta.json")))} + +<meta name="fc:frame" content='JSONCONTENTS' /> + +meta + name fc:frame:image + content https://warpstatsframehub.pro/api/render-stats +meta + name fc:frame:post_url + content https://warpstatsframehub.pro/api/frame diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..13363d3 --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://warpstatsframehub.pro +import head.scroll +title WarpStats: Your Farcaster Journey +description Discover your Warpcast ID and see how early you joined the Farcaster community +style.css +frame.scroll +script.js diff --git a/manifest.json b/manifest.json new file mode 100644 index 0000000..f39de26 --- /dev/null +++ b/manifest.json @@ -0,0 +1,16 @@ +{ + "version": "vNext", + "name": "WarpStats", + "description": "Discover your Warpcast ID and early adopter status", + "image": { + "src": "https://warpstatsframehub.pro/api/render-stats", + "aspectRatio": "1.91:1" + }, + "buttons": [ + { + "label": "Check My Stats", + "action": "post" + } + ], + "postUrl": "https://warpstatsframehub.pro/api" +} diff --git a/meta.json b/meta.json new file mode 100644 index 0000000..20e813b --- /dev/null +++ b/meta.json @@ -0,0 +1,14 @@ +{ + "version": "next", + "imageUrl": "https://warpstatsframehub.pro/api/render-stats", + "button": { + "title": "Launch WarpStats", + "action": { + "type": "launch_frame", + "name": "WarpStats", + "url": "https://warpstatsframehub.pro", + "splashImageUrl": "https://warpstatsframehub.pro/splash.png", + "splashBackgroundColor": "#0F172A" + } + } +} diff --git a/prompt.json b/prompt.json new file mode 100644 index 0000000..640160a --- /dev/null +++ b/prompt.json @@ -0,0 +1,20 @@ +{ + "id": "msg_01CrwW9RjKd1qNqooVJpf8Hk", + "type": "message", + "role": "assistant", + "model": "claude-3-5-sonnet-20241022", + "content": [ + { + "type": "text", + "text": "I'll help you create a Frame that shows a user's Warpcast ID and their \"early adopter\" status by displaying how many users joined after them.\n\n---domain---\nwarpstatsframehub.pro\n\n---index.scroll---\nbuildHtml\nbaseUrl https://warpstatsframehub.pro\nimport head.scroll\ntitle WarpStats: Your Farcaster Journey\ndescription Discover your Warpcast ID and see how early you joined the Farcaster community\nstyle.css\nframe.scroll\nscript.js\n\n---head.scroll---\nmetaTags\nmeta\n name viewport\n content width=device-width, initial-scale=1.0\n\nreplaceNodejs\n module.exports = {JSONCONTENTS: JSON.stringify(JSON.parse(require(\"fs\").readFileSync(\"meta.json\")))}\n\n<meta name=\"fc:frame\" content='JSONCONTENTS' />\n\nmeta\n name fc:frame:image\n content https://warpstatsframehub.pro/api/render-stats\nmeta\n name fc:frame:post_url\n content https://warpstatsframehub.pro/api/frame\n\n---frame.scroll---\nmain\n class frameContainer\n div\n class frameContent\n h1 WarpStats\n class frameTitle\n p Discover your Farcaster journey\n class frameSubtitle\n div\n class statsDisplay\n div\n class statCard\n span Warpcast ID\n class statLabel\n span #loading...\n class statValue\n id warpcastId\n div\n class statCard\n span Users After You\n class statLabel\n span Loading...\n class statValue\n id usersAfter\n div\n class frameActionArea\n button Check My Stats\n class frameButton\n data-action post\n\n---style.css---\n:root {\n --frame-bg: #0F172A;\n --frame-text: #E2E8F0;\n --frame-accent: #8B5CF6;\n --frame-card: #1E293B;\n --frame-radius: 16px;\n --frame-glow: 0 0 20px rgba(139, 92, 246, 0.15);\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n background: var(--frame-bg);\n color: var(--frame-text);\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n}\n\n.frameContainer {\n width: 100%;\n max-width: 600px;\n margin: 0 auto;\n padding: 24px;\n}\n\n.frameContent {\n background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.9));\n border-radius: var(--frame-radius);\n padding: 32px;\n box-shadow: var(--frame-glow);\n backdrop-filter: blur(10px);\n border: 1px solid rgba(139, 92, 246, 0.1);\n}\n\n.frameTitle {\n font-size: 32px;\n font-weight: 800;\n background: linear-gradient(135deg, #A78BFA, #8B5CF6);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n text-align: center;\n margin-bottom: 8px;\n}\n\n.frameSubtitle {\n text-align: center;\n color: #94A3B8;\n margin-bottom: 24px;\n}\n\n.statsDisplay {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 16px;\n margin-bottom: 24px;\n}\n\n.statCard {\n background: var(--frame-card);\n padding: 20px;\n border-radius: var(--frame-radius);\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n transition: transform 0.2s ease;\n}\n\n.statCard:hover {\n transform: translateY(-2px);\n}\n\n.statLabel {\n font-size: 14px;\n color: #94A3B8;\n font-weight: 500;\n}\n\n.statValue {\n font-size: 24px;\n font-weight: 700;\n color: var(--frame-text);\n}\n\n.frameActionArea {\n display: flex;\n justify-content: center;\n}\n\n.frameButton {\n background: linear-gradient(135deg, #A78BFA, #8B5CF6);\n color: white;\n border: none;\n padding: 14px 28px;\n border-radius: var(--frame-radius);\n font-size: 16px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s ease;\n box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25);\n}\n\n.frameButton:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 16px rgba(139, 92, 246, 0.3);\n}\n\n@media (max-width: 480px) {\n .frameContainer {\n padding: 16px;\n }\n \n .frameTitle {\n font-size: 28px;\n }\n \n .statsDisplay {\n grid-template-columns: 1fr;\n }\n \n .statCard {\n padding: 16px;\n }\n}\n\n---script.js---\nconst initializeFrame = async () => {\n try {\n const frameContext = await window.frames.getContext();\n console.log('Frame context:', frameContext);\n\n if (frameContext.fid) {\n document.getElementById('warpcastId').textContent = `#${frameContext.fid}`;\n \n // Calculate users after based on total users (this would need actual API integration)\n const totalUsers = 1000000; // Example total users\n const usersAfter = totalUsers - frameContext.fid;\n document.getElementById('usersAfter').textContent = usersAfter.toLocaleString();\n }\n\n document.querySelector('.frameButton').addEventListener('click', async () => {\n try {\n await window.frames.postMessage({\n action: 'post'\n });\n } catch (error) {\n console.error('Frame action error:', error);\n }\n });\n\n await window.frames.ready();\n } catch (error) {\n console.error('Frame initialization error:', error);\n }\n};\n\ndocument.addEventListener('DOMContentLoaded', initializeFrame);\n\n---manifest.json---\n{\n \"version\": \"vNext\",\n \"name\": \"WarpStats\",\n \"description\": \"Discover your Warpcast ID and early adopter status\",\n \"image\": {\n \"src\": \"https://warpstatsframehub.pro/api/render-stats\",\n \"aspectRatio\": \"1.91:1\"\n },\n \"buttons\": [\n {\n \"label\": \"Check My Stats\",\n \"action\": \"post\"\n }\n ],\n \"postUrl\": \"https://warpstatsframehub.pro/api\"\n}\n\n---meta.json---\n{\n \"version\": \"next\",\n \"imageUrl\": \"https://warpstatsframehub.pro/api/render-stats\",\n \"button\": {\n \"title\": \"Launch WarpStats\",\n \"action\": {\n \"type\": \"launch_frame\",\n \"name\": \"WarpStats\",\n \"url\": \"https://warpstatsframehub.pro\",\n \"splashImageUrl\": \"https://warpstatsframehub.pro/splash.png\",\n \"splashBackgroundColor\": \"#0F172A\"\n }\n }\n}\n\n---api.js---\nexport default async function handler(req, res) {\n if (req.method !== 'POST') {\n return res.status(405).json({ error: 'Method not allowed' });\n }\n\n try {\n const { untrustedData, trustedData } = req.body;\n const fid = trustedData?.fid;\n\n if (!fid) {\n return res.status(400).json({ error: 'No FID provided' });\n }\n\n // Calculate users after (this would need actual API integration)\n const totalUsers = 1000000; // Example total users\n const usersAfter = totalUsers - fid;\n\n return res.status(200).json({\n version: 'vNext',\n image: {\n src: `https://warpstatsframehub.pro/api/render-stats?fid=${fid}&usersAfter=${usersAfter}`,\n aspectRatio: '1.91:1'\n },\n buttons: [\n {\n label: 'Share Stats',\n action: 'post'\n }\n ]\n });\n } catch (error) {\n console.error('Frame API error:', error);\n return res.status(500).json({ error: 'Internal server error' });\n }\n}\n\n---end---\n\nThis Frame implementation creates a beautiful, responsive interface that shows the user's Warpcast ID and calculates how many users joined after them. The design features:\n\n1. A modern, gradient-based color scheme with purple accents\n2. Smooth animations and hover effects\n3. Responsive layout that works well on mobile\n4. Clear typography and hierarchy\n5. Glassmorphism effects with backdrop-filter\n6. Interactive stat cards\n7. Accessible color contrast and semantic HTML\n\nThe domain \"warpstatsframehub.pro\" is memorable and clearly indicates the purpose of the Frame.\n\nNote: The actual calculation of users who joined after would need integration with Farcaster's API to get the total number of users. The current implementation uses a placeholder value of 1 million users." + } + ], + "stop_reason": "end_turn", + "stop_sequence": null, + "usage": { + "input_tokens": 2302, + "cache_creation_input_tokens": 0, + "cache_read_input_tokens": 0, + "output_tokens": 2539 + } +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..9baa80f --- /dev/null +++ b/readme.scroll @@ -0,0 +1,3 @@ +# warpstatsframehub.pro.framehub.pro + +frame generated by Claude from prompt: build me a frame that shows my warpcast id and how many users came after me \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..2c8001a --- /dev/null +++ b/script.js @@ -0,0 +1,31 @@ +const initializeFrame = async () => { + try { + const frameContext = await window.frames.getContext(); + console.log('Frame context:', frameContext); + + if (frameContext.fid) { + document.getElementById('warpcastId').textContent = `#${frameContext.fid}`; + + // Calculate users after based on total users (this would need actual API integration) + const totalUsers = 1000000; // Example total users + const usersAfter = totalUsers - frameContext.fid; + document.getElementById('usersAfter').textContent = usersAfter.toLocaleString(); + } + + document.querySelector('.frameButton').addEventListener('click', async () => { + try { + await window.frames.postMessage({ + action: 'post' + }); + } catch (error) { + console.error('Frame action error:', error); + } + }); + + await window.frames.ready(); + } catch (error) { + console.error('Frame initialization error:', error); + } +}; + +document.addEventListener('DOMContentLoaded', initializeFrame); diff --git a/style.css b/style.css new file mode 100644 index 0000000..1ed3a19 --- /dev/null +++ b/style.css @@ -0,0 +1,130 @@ +:root { + --frame-bg: #0F172A; + --frame-text: #E2E8F0; + --frame-accent: #8B5CF6; + --frame-card: #1E293B; + --frame-radius: 16px; + --frame-glow: 0 0 20px rgba(139, 92, 246, 0.15); +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + background: var(--frame-bg); + color: var(--frame-text); + min-height: 100vh; + display: flex; + flex-direction: column; +} + +.frameContainer { + width: 100%; + max-width: 600px; + margin: 0 auto; + padding: 24px; +} + +.frameContent { + background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.9)); + border-radius: var(--frame-radius); + padding: 32px; + box-shadow: var(--frame-glow); + backdrop-filter: blur(10px); + border: 1px solid rgba(139, 92, 246, 0.1); +} + +.frameTitle { + font-size: 32px; + font-weight: 800; + background: linear-gradient(135deg, #A78BFA, #8B5CF6); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + text-align: center; + margin-bottom: 8px; +} + +.frameSubtitle { + text-align: center; + color: #94A3B8; + margin-bottom: 24px; +} + +.statsDisplay { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 16px; + margin-bottom: 24px; +} + +.statCard { + background: var(--frame-card); + padding: 20px; + border-radius: var(--frame-radius); + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + transition: transform 0.2s ease; +} + +.statCard:hover { + transform: translateY(-2px); +} + +.statLabel { + font-size: 14px; + color: #94A3B8; + font-weight: 500; +} + +.statValue { + font-size: 24px; + font-weight: 700; + color: var(--frame-text); +} + +.frameActionArea { + display: flex; + justify-content: center; +} + +.frameButton { + background: linear-gradient(135deg, #A78BFA, #8B5CF6); + color: white; + border: none; + padding: 14px 28px; + border-radius: var(--frame-radius); + font-size: 16px; + font-weight: 600; + cursor: pointer; + transition: all 0.2s ease; + box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25); +} + +.frameButton:hover { + transform: translateY(-2px); + box-shadow: 0 6px 16px rgba(139, 92, 246, 0.3); +} + +@media (max-width: 480px) { + .frameContainer { + padding: 16px; + } + + .frameTitle { + font-size: 28px; + } + + .statsDisplay { + grid-template-columns: 1fr; + } + + .statCard { + padding: 16px; + } +}