Changes to fid.framehub.pro

root

5 days ago

Initial commit

api.js

Changed around line 1
+ 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 || 'Not Available';
+     const username = untrustedData?.username || 'Unknown';
+ 
+     return res.status(200).json({
+       version: 'vNext',
+       image: {
+         src: `https://fcidframehub.pro/api/render-fid?fid=${fid}&username=${username}`,
+         aspectRatio: '1.91:1'
+       },
+       buttons: [
+         {
+           label: 'View Another',
+           action: 'post'
+         }
+       ]
+     });
+   } catch (error) {
+     console.error('Frame API error:', error);
+     return res.status(500).json({ error: 'Internal server error' });
+   }
+ }

frame.scroll

Changed around line 1
+ main
+  class frameContainer
+  div
+   class frameContent
+   h1 View Your Farcaster ID
+    class frameTitle
+   p Click below to see your Farcaster details
+    class frameDescription
+   div
+    class frameActionArea
+    button View My FID
+     class frameButton
+     data-action post

head.scroll

Changed around line 1
+ 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:image
+  content https://fcidframehub.pro/api/og
+ meta
+  name fc:frame:post_url
+  content https://fcidframehub.pro/api/frame

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://fcidframehub.pro
+ import head.scroll
+ title View Your Farcaster ID
+ description A simple frame to view your Farcaster ID and profile details
+ style.css
+ frame.scroll
+ script.js

manifest.json

Changed around line 1
+ {
+   "version": "vNext",
+   "name": "Farcaster ID Viewer",
+   "description": "View your Farcaster ID and profile details",
+   "image": {
+     "src": "https://fcidframehub.pro/api/og",
+     "aspectRatio": "1.91:1"
+   },
+   "buttons": [
+     {
+       "label": "View My FID",
+       "action": "post"
+     }
+   ],
+   "postUrl": "https://fcidframehub.pro/api/frame"
+ }

meta.json

Changed around line 1
+ {
+   "version": "next",
+   "imageUrl": "https://fcidframehub.pro/api/og",
+   "button": {
+     "title": "View Farcaster ID",
+     "action": {
+       "type": "launch_frame",
+       "name": "Farcaster ID Viewer",
+       "url": "https://fcidframehub.pro",
+       "splashImageUrl": "https://fcidframehub.pro/api/og",
+       "splashBackgroundColor": "#0F172A"
+     }
+   }
+ }

prompt.json

Changed around line 1
+ {
+   "id": "msg_01Bfrc6ndkng5gaNbvs8WDAp",
+   "type": "message",
+   "role": "assistant",
+   "model": "claude-3-5-sonnet-20241022",
+   "content": [
+     {
+       "type": "text",
+       "text": "I'll help you create a Frame for viewing Farcaster IDs. Let's start with a suitable domain:\n\n---domain---\nfcidframehub.pro\n\nNow I'll provide the complete implementation with all required files, customized for a Farcaster ID viewer Frame:\n\n---index.scroll---\nbuildHtml\nbaseUrl https://fcidframehub.pro\nimport head.scroll\ntitle View Your Farcaster ID\ndescription A simple frame to view your Farcaster ID and profile details\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\n\nmeta\n name fc:frame:image\n content https://fcidframehub.pro/api/og\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 View Your Farcaster ID\n   class frameTitle\n  p Click below to see your Farcaster details\n   class frameDescription\n  div\n   class frameActionArea\n   button View 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-gradient-1: #7C3AED;\n  --frame-gradient-2: #4F46E5;\n  --frame-radius: 16px;\n  --frame-shadow: 0 4px 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  line-height: 1.5;\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(135deg, rgba(124, 58, 237, 0.1), rgba(79, 70, 229, 0.1));\n  border-radius: var(--frame-radius);\n  padding: 32px;\n  border: 1px solid rgba(139, 92, 246, 0.2);\n  box-shadow: var(--frame-shadow);\n  backdrop-filter: blur(12px);\n}\n\n.frameTitle {\n  font-size: 28px;\n  font-weight: 800;\n  margin-bottom: 16px;\n  text-align: center;\n  background: linear-gradient(to right, var(--frame-gradient-1), var(--frame-gradient-2));\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  letter-spacing: -0.02em;\n}\n\n.frameDescription {\n  text-align: center;\n  color: rgba(226, 232, 240, 0.8);\n  margin-bottom: 24px;\n  font-size: 16px;\n}\n\n.frameActionArea {\n  display: flex;\n  justify-content: center;\n  margin-top: 24px;\n}\n\n.frameButton {\n  background: linear-gradient(135deg, var(--frame-gradient-1), var(--frame-gradient-2));\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  position: relative;\n  overflow: hidden;\n}\n\n.frameButton::after {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1));\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n\n.frameButton:hover::after {\n  opacity: 1;\n}\n\n.frameButton:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 20px 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: 24px;\n  }\n  \n  .frameButton {\n    padding: 12px 24px;\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: { request: 'getFID' }\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\": \"Farcaster ID Viewer\",\n  \"description\": \"View your Farcaster ID and profile details\",\n  \"image\": {\n    \"src\": \"https://fcidframehub.pro/api/og\",\n    \"aspectRatio\": \"1.91:1\"\n  },\n  \"buttons\": [\n    {\n      \"label\": \"View My FID\",\n      \"action\": \"post\"\n    }\n  ],\n  \"postUrl\": \"https://fcidframehub.pro/api/frame\"\n}\n\n---meta.json---\n{\n  \"version\": \"next\",\n  \"imageUrl\": \"https://fcidframehub.pro/api/og\",\n  \"button\": {\n    \"title\": \"View Farcaster ID\",\n    \"action\": {\n      \"type\": \"launch_frame\",\n      \"name\": \"Farcaster ID Viewer\",\n      \"url\": \"https://fcidframehub.pro\",\n      \"splashImageUrl\": \"https://fcidframehub.pro/api/og\",\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 || 'Not Available';\n    const username = untrustedData?.username || 'Unknown';\n\n    return res.status(200).json({\n      version: 'vNext',\n      image: {\n        src: `https://fcidframehub.pro/api/render-fid?fid=${fid}&username=${username}`,\n        aspectRatio: '1.91:1'\n      },\n      buttons: [\n        {\n          label: 'View Another',\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 for viewing Farcaster IDs with:\n\n1. A gradient-based design with purple/indigo theme\n2. Smooth animations and hover effects\n3. Responsive layout\n4. Proper error handling\n5. Clean semantic HTML\n6. Accessible button states\n7. Modern glass-morphism effects\n8. Dynamic FID display\n9. Proper Frame protocol implementation\n\nThe Frame will display the user's FID and username when they interact with it, and offer an option to view another user's details. The design is both professional and engaging, with careful attention to visual hierarchy and user experience."
+     }
+   ],
+   "stop_reason": "end_turn",
+   "stop_sequence": null,
+   "usage": {
+     "input_tokens": 2293,
+     "cache_creation_input_tokens": 0,
+     "cache_read_input_tokens": 0,
+     "output_tokens": 2202
+   }
+ }

readme.scroll

Changed around line 1

+ # fcidframehub.proNow I'll provide the complete implementation with all required files, customized for a Farcaster ID viewer Frame:.framehub.pro

+ frame generated by Claude from prompt: a frame for seeing your farcaster id

script.js

Changed around line 1
+ 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: { request: 'getFID' }
+         });
+       } catch (error) {
+         console.error('Frame action error:', error);
+       }
+     });
+ 
+     await window.frames.ready();
+   } catch (error) {
+     console.error('Frame initialization error:', error);
+   }
+ };
+ 
+ document.addEventListener('DOMContentLoaded', initializeFrame);

style.css

Changed around line 1
+ :root {
+   --frame-bg: #0F172A;
+   --frame-text: #E2E8F0;
+   --frame-accent: #8B5CF6;
+   --frame-gradient-1: #7C3AED;
+   --frame-gradient-2: #4F46E5;
+   --frame-radius: 16px;
+   --frame-shadow: 0 4px 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;
+   line-height: 1.5;
+ }
+ 
+ .frameContainer {
+   width: 100%;
+   max-width: 600px;
+   margin: 0 auto;
+   padding: 24px;
+ }
+ 
+ .frameContent {
+   background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(79, 70, 229, 0.1));
+   border-radius: var(--frame-radius);
+   padding: 32px;
+   border: 1px solid rgba(139, 92, 246, 0.2);
+   box-shadow: var(--frame-shadow);
+   backdrop-filter: blur(12px);
+ }
+ 
+ .frameTitle {
+   font-size: 28px;
+   font-weight: 800;
+   margin-bottom: 16px;
+   text-align: center;
+   background: linear-gradient(to right, var(--frame-gradient-1), var(--frame-gradient-2));
+   -webkit-background-clip: text;
+   -webkit-text-fill-color: transparent;
+   letter-spacing: -0.02em;
+ }
+ 
+ .frameDescription {
+   text-align: center;
+   color: rgba(226, 232, 240, 0.8);
+   margin-bottom: 24px;
+   font-size: 16px;
+ }
+ 
+ .frameActionArea {
+   display: flex;
+   justify-content: center;
+   margin-top: 24px;
+ }
+ 
+ .frameButton {
+   background: linear-gradient(135deg, var(--frame-gradient-1), var(--frame-gradient-2));
+   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;
+   position: relative;
+   overflow: hidden;
+ }
+ 
+ .frameButton::after {
+   content: '';
+   position: absolute;
+   top: 0;
+   left: 0;
+   width: 100%;
+   height: 100%;
+   background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1));
+   opacity: 0;
+   transition: opacity 0.3s ease;
+ }
+ 
+ .frameButton:hover::after {
+   opacity: 1;
+ }
+ 
+ .frameButton:hover {
+   transform: translateY(-2px);
+   box-shadow: 0 6px 20px rgba(139, 92, 246, 0.3);
+ }
+ 
+ @media (max-width: 480px) {
+   .frameContainer {
+     padding: 16px;
+   }
+ 
+   .frameTitle {
+     font-size: 24px;
+   }
+ 
+   .frameButton {
+     padding: 12px 24px;
+   }
+ }