[{"_1":2,"_158":-5,"_73":-5},"loaderData",{"_3":4,"_41":42,"_157":-5},"root",{"_5":6,"_19":-5,"_20":-5,"_21":-5,"_22":-5,"_23":-5,"_24":25,"_26":27,"_28":29,"_38":27,"_39":40},"env",{"_7":8,"_9":10,"_11":12,"_13":14,"_15":16,"_17":18},"SUPABASE_URL","https://hello.websim.ai","SUPABASE_ANON_KEY","eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im9jamVmZ2NqamlxeWt3YWR2dnJkIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MTE4MzI5OTMsImV4cCI6MjAyNzQwODk5M30.vsreOYwk8pKsr8NFlzpIzWAiD-vXj6ijv_Bhn1vYtHs","POSTHOG_KEY","phc_VHMOlrdxAbgSZHeF0SdSf07LZLRLAg5pZuTHkJGn050","POSTHOG_API_HOST","https://e.wbsm.ai","POSTHOG_UI_HOST","https://app.posthog.com","NODE_ENV","production","authUser","user","plan","balances","rewards","pinned",[],"has_default_username",false,"origins",{"_30":31,"_32":33,"_34":35,"_36":37},"origin","https://websim.ai","apiOrigin","https://api.websim.ai","contentOrigin","https://{PROJECT_ID}.c.websim.ai","appDomainOrigin","https://{SUBDOMAIN}.on.websim.ai","isMobile","theme","auto","slug",{"_43":44,"_107":108,"_135":136,"_155":156},"site",{"_45":46,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56,"_77":78,"_79":80,"_81":82,"_87":88,"_100":101,"_102":103,"_104":-5,"_105":106},"id","mcVFZzpkPnsJHpWto","parent_id","AmksVsz4S16pm46Ue","created_at","2025-02-21T09:14:00.425901+00:00","state","done","model","o3-mini-high","lore",{"_57":58,"_59":60,"_61":62,"_63":27,"_64":65,"_66":27,"_67":27,"_68":65,"_69":27,"_70":71},"version",1,"attachments",[],"references",[],"enableDatabase","enableApi",true,"enableMultiplayer","enableMobilePrompt","enableDB","enableLLM","features",{"_72":65,"_73":65,"_74":65,"_75":27,"_76":27},"context","errors","htmx","images","navigation","title","WeSee - Social Media","url","","prompt",{"_83":84,"_85":86},"type","plaintext","text","Dont lose videos either when i refresh","owner",{"_45":89,"_49":90,"_91":92,"_93":94,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":27},"104a9579-d244-44a1-a953-c69b26122a6c","2024-07-26T11:09:11.862734+00:00","username","ChuckleMark","avatar_url","https://lh3.googleusercontent.com/a/ACg8ocK15i9nOTfL9Mlutj87BlQZlVaSYEBg63biTep0X-WZGxQg-A=s96-c","description","twitter","discord_username","discord_id","is_admin","link_url","/p/duyaw7bietkvk2cqsv68","versioned_link_url","/p/duyaw7bietkvk2cqsv68/3","deleted_at","yapping","index.html\n\n \n \n \n WeSee - Social Media\n \n \n \n

\n \n \n

WeSee

\n \n

\n```undefined\n```\n\n\nstyle.css\n/* style.css */\nbody {\n margin: 0;\n font-family: Arial, sans-serif;\n background: #f4f4f4;\n color: #333;\n}\n\nheader {\n background: #fff;\n padding: 10px 20px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\nheader .logo {\n display: flex;\n align-items: center;\n}\n\nheader .logo h1 {\n margin: 0 0 0 10px;\n font-size: 24px;\n color: #4caf50;\n}\n\nnav ul {\n list-style: none;\n padding: 0;\n display: flex;\n margin: 0;\n}\n\nnav ul li {\n margin-left: 15px;\n}\n\nnav button {\n background: none;\n border: none;\n font-size: 16px;\n padding: 8px 12px;\n cursor: pointer;\n border-bottom: 2px solid transparent;\n transition: border-bottom 0.3s;\n}\n\nnav button:hover,\nnav button.active {\n border-bottom: 2px solid #4caf50;\n}\n\nmain {\n display: flex;\n flex-wrap: wrap;\n max-width: 1200px;\n margin: 20px auto;\n padding: 0 20px;\n}\n\n.post-form {\n flex: 1 1 300px;\n background: #fff;\n padding: 20px;\n margin-right: 20px;\n border-radius: 4px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.post-form h2 {\n margin-top: 0;\n}\n\n.post-form textarea {\n width: 100%;\n height: 100px;\n resize: none;\n margin-bottom: 10px;\n padding: 10px;\n border: 1px solid #ddd;\n border-radius: 4px;\n}\n\n.post-form input[type=\"file\"] {\n margin-bottom: 10px;\n}\n\n.post-form button {\n background: #4caf50;\n color: #fff;\n border: none;\n padding: 10px 15px;\n cursor: pointer;\n border-radius: 4px;\n transition: background 0.3s;\n}\n\n.post-form button:hover {\n background: #45a049;\n}\n\n/* Hide forms by default, show the active one */\n.form {\n display: none;\n}\n\n.form.active {\n display: block;\n}\n\n.feed {\n flex: 2 1 600px;\n background: #fff;\n padding: 20px;\n border-radius: 4px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.feed h2 {\n margin-top: 0;\n}\n\n.post {\n border-bottom: 1px solid #ddd;\n padding: 10px 0;\n}\n\n.post:last-child {\n border-bottom: none;\n}\n\n.post .post-header {\n display: flex;\n align-items: center;\n}\n\n.post .post-header svg {\n width: 30px;\n height: 30px;\n margin-right: 10px;\n}\n\n.post .post-content {\n padding: 10px 0;\n}\n\n.post .post-video {\n width: 100%;\n max-width: 500px;\n margin-top: 10px;\n}\n\n/* Audio post styling */\n.post-audio {\n width: 100%;\n max-width: 500px;\n margin-top: 10px;\n border-radius: 4px;\n}\n\n/* Video preview styles */\n.video-preview video,\n.video-preview audio {\n max-width: 100%;\n display: block;\n margin-top: 10px;\n border-radius: 4px;\n}\n\n/* Footer styling */\nfooter {\n text-align: center;\n padding: 20px;\n background: #fff;\n margin-top: 20px;\n box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);\n}\n\n/* Responsive adjustments */\n@media (max-width: 768px) {\n main {\n flex-direction: column;\n }\n .post-form {\n margin-right: 0;\n margin-bottom: 20px;\n }\n}\n\napp.js\n// app.js\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n // Tab switching for forms\n const tweetTab = document.getElementById(\"tweet-tab\");\n const videoTab = document.getElementById(\"video-tab\");\n const tweetForm = document.getElementById(\"tweet-form\");\n const videoForm = document.getElementById(\"video-form\");\n\ntweetTab.addEventListener(\"click\", () => {\n tweetTab.classList.add(\"active\");\n videoTab.classList.remove(\"active\");\n tweetForm.classList.add(\"active\");\n videoForm.classList.remove(\"active\");\n });\n\nvideoTab.addEventListener(\"click\", () => {\n videoTab.classList.add(\"active\");\n tweetTab.classList.remove(\"active\");\n videoForm.classList.add(\"active\");\n tweetForm.classList.remove(\"active\");\n });\n\n// Load stored tweets from localStorage and render them (newest at top)\n const storedTweets = JSON.parse(localStorage.getItem(\"tweets\") || \"[]\");\n for (let i = storedTweets.length - 1; i >= 0; i--) {\n addTweetPost(storedTweets[i], false, \"prepend\", false);\n }\n\n// Load stored video posts from localStorage and render them (newest at top)\n const storedVideos = JSON.parse(localStorage.getItem(\"videoPosts\") || \"[]\");\n for (let i = storedVideos.length - 1; i >= 0; i--) {\n addVideoPost(storedVideos[i].mediaUrl, storedVideos[i].mediaType, false, false);\n }\n\n// Handle tweet submission\n const tweetSubmit = document.getElementById(\"tweet-submit\");\n tweetSubmit.addEventListener(\"click\", () => {\n const tweetInput = document.getElementById(\"tweet-input\");\n const content = tweetInput.value.trim();\n if (content.length > 0) {\n addTweetPost(content, true, \"prepend\", true);\n tweetInput.value = \"\";\n }\n });\n\n// Handle video/audio preview\n const videoInput = document.getElementById(\"video-input\");\n const videoPreviewContainer = document.getElementById(\"video-preview\");\n videoInput.addEventListener(\"change\", () => {\n const file = videoInput.files[0];\n if (file) {\n const url = URL.createObjectURL(file);\n videoPreviewContainer.innerHTML = \"\";\n let mediaElem;\n if (file.type.startsWith(\"audio\")) {\n mediaElem = document.createElement(\"audio\");\n mediaElem.src = url;\n mediaElem.controls = true;\n mediaElem.classList.add(\"preview-audio\");\n } else {\n mediaElem = document.createElement(\"video\");\n mediaElem.src = url;\n mediaElem.controls = true;\n mediaElem.classList.add(\"preview-video\");\n }\n videoPreviewContainer.appendChild(mediaElem);\n }\n });\n\n// Handle video/audio submission with persistence\n const videoSubmit = document.getElementById(\"video-submit\");\n videoSubmit.addEventListener(\"click\", () => {\n const file = videoInput.files[0];\n if (file) {\n const reader = new FileReader();\n reader.onload = function (e) {\n const dataUrl = e.target.result;\n let mediaType = \"video\";\n if (file.type.startsWith(\"audio\")) {\n mediaType = \"audio\";\n }\n addVideoPost(dataUrl, mediaType, true, true);\n };\n reader.readAsDataURL(file);\n // Reset video input and preview\n videoInput.value = \"\";\n videoPreviewContainer.innerHTML = \"\";\n }\n });\n});\n\n/**\n* Adds a tweet post to the feed.\n * @param {string} content - The tweet content.\n * @param {boolean} [saveToStorage=true] - Whether to save the tweet to localStorage.\n * @param {string} [insertion=\"prepend\"] - \"prepend\" (for new tweets) or \"append\" (for loaded tweets).\n * @param {boolean} [animate=true] - Whether to animate the tweet post.\n */\nfunction addTweetPost(content, saveToStorage = true, insertion = \"prepend\", animate = true) {\n const container = document.getElementById(\"posts-container\");\n const postDiv = document.createElement(\"div\");\n postDiv.classList.add(\"post\");\n postDiv.innerHTML = `\n

\n \n Tweet\n

${escapeHTML(content)}

\n `;\n if (insertion === \"prepend\") {\n container.prepend(postDiv);\n } else {\n container.appendChild(postDiv);\n }\n if (animate) {\n fadeIn(postDiv);\n }\n if (saveToStorage) {\n let storedTweets = JSON.parse(localStorage.getItem(\"tweets\") || \"[]\");\n storedTweets.unshift(content);\n localStorage.setItem(\"tweets\", JSON.stringify(storedTweets));\n }\n}\n\n/**\n* Adds a video or audio post to the feed.\n * @param {string} mediaUrl - The URL (DataURL) of the media.\n * @param {string} [mediaType=\"video\"] - \"video\" or \"audio\".\n * @param {boolean} [saveToStorage=true] - Whether to save the post to localStorage.\n * @param {boolean} [animate=true] - Whether to animate the post.\n */\nfunction addVideoPost(mediaUrl, mediaType = \"video\", saveToStorage = true, animate = true) {\n const container = document.getElementById(\"posts-container\");\n const postDiv = document.createElement(\"div\");\n postDiv.classList.add(\"post\");\n let headerSvg = \"\";\n let headerText = \"\";\n if (mediaType === \"audio\") {\n headerSvg = ``;\n headerText = \"Audio\";\n } else {\n headerSvg = ``;\n headerText = \"Video\";\n }\n let mediaElementHtml = \"\";\n if (mediaType === \"audio\") {\n mediaElementHtml = `

`;\n } else {\n mediaElementHtml = `

`;\n }\n postDiv.innerHTML = `\n

\n ${headerSvg}\n ${headerText}\n

\n ${mediaElementHtml}\n

\n `;\n container.prepend(postDiv);\n if (animate) {\n fadeIn(postDiv);\n }\n if (saveToStorage) {\n let storedVideos = JSON.parse(localStorage.getItem(\"videoPosts\") || \"[]\");\n storedVideos.unshift({ mediaUrl, mediaType });\n localStorage.setItem(\"videoPosts\", JSON.stringify(storedVideos));\n }\n}\n\n// Simple fade-in animation for new posts\nfunction fadeIn(element) {\n element.style.opacity = 0;\n let last = +new Date();\n const tick = function () {\n element.style.opacity = +element.style.opacity + (new Date() - last) / 400;\n last = +new Date();\n if (+element.style.opacity < 1) {\n requestAnimationFrame(tick);\n }\n };\n tick();\n}\n\n// Utility to escape HTML to prevent XSS\nfunction escapeHTML(str) {\n const div = document.createElement(\"div\");\n div.textContent = str;\n return div.innerHTML;\n}\n","project",{"_45":109,"_49":110,"_111":112,"_77":78,"_113":114,"_41":115,"_116":117,"_118":119,"_47":-5,"_120":-5,"_104":-5,"_121":65,"_122":123,"_129":27,"_95":-5,"_130":131,"_132":-5,"_133":134},"duyaw7bietkvk2cqsv68","2025-02-21T09:08:56.443862+00:00","updated_at","2025-02-21T09:14:28.616+00:00","visibility","public","wesee-social-media","created_by",{"_45":89,"_49":90,"_91":92,"_93":94,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":27},"current_version",3,"parent_version","posted","stats",{"_124":125,"_126":127,"_128":127},"views",28,"likes",0,"comments","auto_set_current","comments_mode","open","from_template","domains",[],"project_revision",{"_45":137,"_57":119,"_49":138,"_139":-5,"_47":-5,"_140":141,"_142":109,"_116":143,"_144":145,"_147":109,"_111":148,"_104":-5,"_122":149,"_151":27,"_152":46,"_153":154},"019527c9-02fb-73ca-af21-0299ad4f0ea2","2025-02-21T09:13:59.803+00:00","visited_at","parent_revision_version",2,"parent_revision_project_id",{"_45":89,"_49":90,"_91":92,"_93":94,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":27},"meta",{"_57":146},"1","project_id","2025-02-21T09:15:47.471+00:00",{"_150":127},"multiplayer_count","draft","site_id","current_screenshot_url","https://project-screenshots.websim.ai/019527ca-8000-70b7-abf1-5b8bb125426d","cursor","eyJpZCI6IjAxOTUyN2M5LTAyZmItNzNjYS1hZjIxLTAyOTlhZDRmMGVhMiJ9","routes/browser/layout","actionData"]