Use ref images for the vibe Build the complete working expe...

Prompt

Use ref images for the vibe Build the complete working experience described below. Preserve every required feature throughout implementation. CONCEPT AND VISUAL DIRECTION The concept is: “It all started with the web. Without the web, there would be no memecoins. Go back to basics.” The website is an interactive old personal computer desktop with Windows XP-inspired styling: Blue bottom taskbar, colourful controls, softer window shapes and recognisable XP-style interface details. Pixel-art landscape wallpaper showing hills and sky. Recognisable application icons, such as a globe, calculator, paintbrush and chat bubbles. Project branding: thewebp.fun. Nostalgic, playful and personal, with memecoin humour. Apply the design skills within this aesthetic. The finished product should feel like using an old computer, with coherent application windows, controls, menus and interactions. Prioritise desktop. Spend minimal effort on mobile: basic accessibility and viewport handling are sufficient; do not build a separate mobile experience. ASSETS I WILL PROVIDE I will supply the wallpaper, application icon images, project logo and all sound files. Make replacing these files straightforward, without editing component code. Use an organised asset structure and a central asset mapping, for example: public/ assets/ wallpaper.png project-logo.png icons/ browser.ico chat.ico minesweeper.ico calc.ico readme.ico paint.ico contract.ico buy.ico x.ico sounds/ click.mp3 window-open.mp3 window-close.mp3 minimise.mp3 restore.mp3 notification.mp3 content/ readme.md These are agreed default filenames, and the mapping should let me change them easily. Support standard image formats as well as .ico icons. During development, use clearly identifiable placeholders where my files are missing. Missing images or sounds must not break the interface. Do not spend time generating final wallpaper, icon artwork, a logo or sound effects. DESKTOP AND WINDOW SYSTEM Include: Application shortcuts arranged down the left side. Desktop shortcuts for the contract address, buying the coin and visiting its X account. A bottom taskbar with application launch access and buttons for open windows. A bottom-right notification area containing clock/date, volume/mute and connection status. An XP-style Start menu providing access to the required applications. All applications must use a shared window system: Open, close, minimise, restore and maximise. Drag windows using their title bars. Clicking a window brings it to the front. Taskbar buttons switch to or restore their corresponding windows. Opening an already-open app focuses its existing window. Closing a window removes its taskbar entry. Keep title bars and controls accessible after viewport changes. Desktop shortcuts open on double-click; taskbar and menu controls use single-click. On first arrival, open BOTH the browser and live chat. Arrange them beside one another where screen space allows, with chat visible and desktop shortcuts still accessible. Do not add a long boot sequence. REQUIRED APPLICATIONS WEB BROWSER Build a functional browser-style application with: Address bar. Back, forward, home and reload controls. A retro homepage branded thewebp.fun. The project introduction and links to its chart, buy page and socials. Search and useful links. Fictional internal websites visitors can explore. The fictional websites should use memecoin parody: clearly fictional news, ridiculous adverts and trench humour. Give these pages distinctive retro designs and genuinely clickable navigation. Keep their content easy to edit. Implement internal browsing and navigation history properly. Internal addresses should display the corresponding internal pages. For external websites, chart links and search results, open a normal browser tab. Do not pretend to support unrestricted external browsing inside the application. Default homepage search to Google, with the search destination configurable. LIVE CHAT Build an actual shared live chat between visitors, using a real Cloudflare-compatible backend. Requirements: Visitors choose a nickname. No account creation or wallet connection is required. Remember the nickname on that browser. Display the latest 50 messages, including messages sent before the visitor joined. Store this recent history on the backend so it survives a page refresh and new visitors can see it. Show nickname, message and timestamp. Send with Enter or a Send button. Handle connecting, disconnected and reconnecting states clearly. Avoid duplicate messages after reconnecting. Use basic server-side message limits and spam throttling. Render user messages safely as text. Style it like an old chat application, consistent with the XP desktop. COIN PURCHASE MONITOR Integrate purchase alerts into the live chat. When a verified purchase of this project’s token spends MORE THAN 0.75 SOL, post a visually distinct system message in chat. The threshold is strictly greater than 0.75 SOL. Default message format: “BUY DETECTED — [short wallet address] bought with [amount] SOL.” Include a transaction link when available. Requirements: Use actual verified purchase data. Do not count transfers or sales as purchases. Deduplicate events by transaction and relevant purchase event. Do not replay historical buys as new alerts when a visitor connects. Keep event detection on the backend so visitors do not each generate duplicate alerts. Keep provider credentials and private API keys server-side. Purchase alerts belong inside chat only. Do not add purchase popups, taskbar badges or purchase-specific sounds. The contract address and data provider may not be available during development. Build a clean, configurable integration and show an honest inactive status until configured. Do not generate fake live purchases. MINESWEEPER Build a playable retro Minesweeper application. Default to a beginner 9×9 board with 10 mines. Include: Correct mine placement and neighbouring-mine counts. Reveal and flood-reveal behaviour. Right-click flagging. Safe first reveal. Mine counter and timer. Win and loss states. Restart button. CALCULATOR Build a functional retro calculator with: Addition, subtraction, multiplication and division. Decimal input. Equals, clear and backspace. Keyboard support. Clear handling of invalid operations. README VIEWER Create an application that displays public/content/readme.md. I must be able to edit this file’s contents and redeploy without changing application code. Give it readable retro styling and support basic Markdown. Include an initial introduction explaining thewebp.fun and the “back to basics” concept. Keep this editable website content separate from the repository’s developer README and deployment instructions. DRAWING APPLICATION Build a simple retro Paint-style application with: Pencil. Eraser. Colour palette. Adjustable brush sizes. A working drawing canvas. Clear-canvas control. Keep the toolset focused on these features. Preserve the current drawing when the window is minimised or another app is opened. Do not expand this into a drawing-sharing platform. SOUND AND VOLUME Connect my supplied sound files to: Interface clicks. Window opening and closing. Minimising and restoring. Relevant ordinary notifications. Use one central sound manager and sound-event mapping. Include global mute/unmute and volume controls in the taskbar notification area. Remember the user’s settings between visits. Enable audio after an appropriate user interaction. Missing sound files should fail quietly without blocking any action. CONFIGURATION AND SHORTCUTS Keep these values in a central, clearly documented configuration: Display name: thewebp.fun. Token ticker. Solana contract address. Buy URL. Chart URL. X URL. Browser search destination. Public asset paths. Purchase threshold, defaulting to 0.75 SOL. The contract shortcut should open a small retro window displaying the full address and a working copy button. The buy shortcut and X shortcut should open their configured destinations. If the token address or links are missing, display “Not configured yet” rather than inventing addresses or sending visitors to unrelated destinations. The taskbar’s connection indicator should reflect the actual shared-service connection state. IMPLEMENTATION AND DELIVERY Choose the simplest suitable Cloudflare architecture that supports static assets, shared live chat, persistent recent messages and backend purchase monitoring. Use reusable components for windows, taskbar, desktop shortcuts, menus, sound handling and shared controls. Keep application behaviour separate from presentation so visual improvements do not break functionality. Complete the desktop and every required application. If credentials are missing, finish the integration code and document precisely what must be supplied to activate it. Provide: The complete project. Local development instructions. Cloudflare configuration and deployment instructions. An example environment configuration without secrets. A concise guide explaining where to replace my assets and edit project content. A clear list of any genuinely incomplete integrations. Before delivery, verify: Both browser and chat open on arrival. Every desktop shortcut and taskbar control works. Every window opens, closes, minimises, restores, maximises and focuses correctly. Browser navigation, fictional pages and configured links work. Two separate browser sessions can exchange chat messages and load the recent history. Purchase events are filtered and deduplicated correctly. Minesweeper, calculator and drawing tools work. Editing readme.md changes the displayed content. Asset replacement requires no component edits. Mute and volume settings work and persist. Do not mark a feature complete based only on its appearance. Verify its actual behaviour.

A system prompt was added to support web rendering