Last 10 Commits for fcidframehub.pro.framehub.pro

commit 5a09d74c8d2d105d300346607a4855c5d6952593 Author: root <root@hub.scroll.pub> Date: 2025-01-16 23:31:14 +0000 Subject: Initial commit diff --git a/api.js b/api.js new file mode 100644 index 0000000..a2cb914 --- /dev/null +++ b/api.js @@ -0,0 +1,30 @@ +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 || 'Unknown'; + + // Generate dynamic image with FID + const imageUrl = `https://fcidframehub.pro/api/generate-image?fid=${fid}`; + + return res.status(200).json({ + version: 'vNext', + image: { + src: imageUrl, + aspectRatio: '1.91:1' + }, + buttons: [ + { + label: 'Share My FID', + 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..253569f --- /dev/null +++ b/frame.scroll @@ -0,0 +1,13 @@ +main + class frameContainer + div + class frameContent + h1 My Farcaster ID + class frameTitle + p Your Farcaster identity will be revealed + class frameDescription + div + class frameActionArea + button Show My FID + class frameButton + data-action post diff --git a/head.scroll b/head.scroll new file mode 100644 index 0000000..1d9ae7d --- /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://fcidframehub.pro/api/initial-frame.png +meta + name fc:frame:post_url + content https://fcidframehub.pro/api/frame diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..1a6065a --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://fcidframehub.pro +import head.scroll +title My Farcaster ID +description A simple frame to display your Farcaster ID +style.css +frame.scroll +script.js diff --git a/manifest.json b/manifest.json new file mode 100644 index 0000000..f7cb129 --- /dev/null +++ b/manifest.json @@ -0,0 +1,16 @@ +{ + "version": "vNext", + "name": "My Farcaster ID", + "description": "Discover your Farcaster ID", + "image": { + "src": "https://fcidframehub.pro/api/initial-frame.png", + "aspectRatio": "1.91:1" + }, + "buttons": [ + { + "label": "Show My FID", + "action": "post" + } + ], + "postUrl": "https://fcidframehub.pro/api" +} diff --git a/meta.json b/meta.json new file mode 100644 index 0000000..46dc4f0 --- /dev/null +++ b/meta.json @@ -0,0 +1,14 @@ +{ + "version": "next", + "imageUrl": "https://fcidframehub.pro/api/initial-frame.png", + "button": { + "title": "Show My FID", + "action": { + "type": "post", + "name": "FID Reveal", + "url": "https://fcidframehub.pro", + "splashImageUrl": "https://fcidframehub.pro/api/initial-frame.png", + "splashBackgroundColor": "#0F172A" + } + } +} diff --git a/prompt.json b/prompt.json new file mode 100644 index 0000000..1d9cf84 --- /dev/null +++ b/prompt.json @@ -0,0 +1,20 @@ +{ + "id": "msg_01RF21HRbfPYdfbgi9b8F657", + "type": "message", + "role": "assistant", + "model": "claude-3-5-sonnet-20241022", + "content": [ + { + "type": "text", + "text": "I'll help you create a Frame that shows the user's Farcaster ID. Here's a complete implementation:\n\n---domain---\nfcidframehub.pro\n\n---index.scroll---\nbuildHtml\nbaseUrl https://fcidframehub.pro\nimport head.scroll\ntitle My Farcaster ID\ndescription A simple frame to display your Farcaster ID\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://fcidframehub.pro/api/initial-frame.png\nmeta\n name fc:frame:post_url\n content https://fcidframehub.pro/api/frame\n\n---frame.scroll---\nmain\n class frameContainer\n div\n class frameContent\n h1 My Farcaster ID\n class frameTitle\n p Your Farcaster identity will be revealed\n class frameDescription\n div\n class frameActionArea\n button Show My FID\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-radius: 16px;\n --frame-glow: 0 0 20px rgba(139, 92, 246, 0.3);\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 background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);\n}\n\n.frameContainer {\n width: 100%;\n max-width: 600px;\n margin: 0 auto;\n padding: 20px;\n}\n\n.frameContent {\n background: rgba(255, 255, 255, 0.03);\n border-radius: var(--frame-radius);\n padding: 32px;\n backdrop-filter: blur(10px);\n border: 1px solid rgba(255, 255, 255, 0.1);\n box-shadow: var(--frame-glow);\n}\n\n.frameTitle {\n font-size: 28px;\n font-weight: 700;\n margin-bottom: 16px;\n text-align: center;\n background: linear-gradient(to right, #8B5CF6, #6366F1);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.frameDescription {\n text-align: center;\n color: #94A3B8;\n margin-bottom: 24px;\n}\n\n.frameActionArea {\n display: flex;\n justify-content: center;\n margin-top: 24px;\n}\n\n.frameButton {\n background: linear-gradient(135deg, #8B5CF6 0%, #6366F1 100%);\n color: var(--frame-text);\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.3s ease;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.frameButton:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4);\n}\n\n@media (max-width: 480px) {\n .frameContainer {\n padding: 16px;\n }\n \n .frameTitle {\n font-size: 24px;\n }\n \n .frameButton {\n padding: 12px 24px;\n font-size: 14px;\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 document.querySelector('.frameButton').addEventListener('click', async () => {\n try {\n await window.frames.postMessage({\n action: 'post',\n data: { type: 'show_fid' }\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\": \"My Farcaster ID\",\n \"description\": \"Discover your Farcaster ID\",\n \"image\": {\n \"src\": \"https://fcidframehub.pro/api/initial-frame.png\",\n \"aspectRatio\": \"1.91:1\"\n },\n \"buttons\": [\n {\n \"label\": \"Show My FID\",\n \"action\": \"post\"\n }\n ],\n \"postUrl\": \"https://fcidframehub.pro/api\"\n}\n\n---meta.json---\n{\n \"version\": \"next\",\n \"imageUrl\": \"https://fcidframehub.pro/api/initial-frame.png\",\n \"button\": {\n \"title\": \"Show My FID\",\n \"action\": {\n \"type\": \"post\",\n \"name\": \"FID Reveal\",\n \"url\": \"https://fcidframehub.pro\",\n \"splashImageUrl\": \"https://fcidframehub.pro/api/initial-frame.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 || 'Unknown';\n\n // Generate dynamic image with FID\n const imageUrl = `https://fcidframehub.pro/api/generate-image?fid=${fid}`;\n\n return res.status(200).json({\n version: 'vNext',\n image: {\n src: imageUrl,\n aspectRatio: '1.91:1'\n },\n buttons: [\n {\n label: 'Share My FID',\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 implementation creates a beautiful, modern Frame that:\n1. Shows an initial welcome screen\n2. Has a button to reveal the user's FID\n3. Uses a gorgeous purple gradient design scheme\n4. Is fully responsive\n5. Includes proper error handling\n6. Follows accessibility guidelines\n7. Uses modern CSS features like variables and gradients\n8. Has smooth animations and hover effects\n\nThe domain \"fcidframehub.pro\" is short, memorable, and clearly indicates the frame's purpose (Farcaster ID Frame Hub).\n\nThe Frame will need an image generation API endpoint (not shown here) to create dynamic images with the user's FID when revealed. The implementation uses proper Frame v2 specifications and includes all necessary meta tags and handlers." + } + ], + "stop_reason": "end_turn", + "stop_sequence": null, + "usage": { + "input_tokens": 2293, + "cache_creation_input_tokens": 0, + "cache_read_input_tokens": 0, + "output_tokens": 2025 + } +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..21219f4 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,3 @@ +# fcidframehub.pro.framehub.pro + +frame generated by Claude from prompt: a frame that shows my farcaster id \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..e9afd91 --- /dev/null +++ b/script.js @@ -0,0 +1,23 @@ +const initializeFrame = async () => { + try { + const frameContext = await window.frames.getContext(); + console.log('Frame context:', frameContext); + + document.querySelector('.frameButton').addEventListener('click', async () => { + try { + await window.frames.postMessage({ + action: 'post', + data: { type: 'show_fid' } + }); + } 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..ef0c8bc --- /dev/null +++ b/style.css @@ -0,0 +1,95 @@ +:root { + --frame-bg: #0F172A; + --frame-text: #E2E8F0; + --frame-accent: #8B5CF6; + --frame-radius: 16px; + --frame-glow: 0 0 20px rgba(139, 92, 246, 0.3); +} + +* { + 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; + background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%); +} + +.frameContainer { + width: 100%; + max-width: 600px; + margin: 0 auto; + padding: 20px; +} + +.frameContent { + background: rgba(255, 255, 255, 0.03); + border-radius: var(--frame-radius); + padding: 32px; + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: var(--frame-glow); +} + +.frameTitle { + font-size: 28px; + font-weight: 700; + margin-bottom: 16px; + text-align: center; + background: linear-gradient(to right, #8B5CF6, #6366F1); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.frameDescription { + text-align: center; + color: #94A3B8; + margin-bottom: 24px; +} + +.frameActionArea { + display: flex; + justify-content: center; + margin-top: 24px; +} + +.frameButton { + background: linear-gradient(135deg, #8B5CF6 0%, #6366F1 100%); + color: var(--frame-text); + border: none; + padding: 14px 28px; + border-radius: var(--frame-radius); + font-size: 16px; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.frameButton:hover { + transform: translateY(-2px); + box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4); +} + +@media (max-width: 480px) { + .frameContainer { + padding: 16px; + } + + .frameTitle { + font-size: 24px; + } + + .frameButton { + padding: 12px 24px; + font-size: 14px; + } +}