Private Vault

Cinevva's analyzer read this game's design doc and its source, then wrote the brief below. "Make your own" hands it to the game creator as your opening message, so you start from a real spec rather than a one-line idea.

Create a responsive single-page interactive app/game titled “Private Vault,” presented as a polished dark privacy-focused media vault rather than an action game. Use a near-black background (#080b10) with a subtle green-tinted radial glow, dark navy translucent panels, thin low-contrast borders, rounded corners, and bright lime-green accent #a8f07b. Use clean sans-serif typography: a geometric bold display face for headings and a modern sans-serif for body text. The experience has three mutually exclusive screens and starts on the authentication screen.

Authentication screen: center a PRIVATE / Vault brand lockup near the top, with a rounded-square outlined icon containing a lime sparkle/star. Below it place a large glass-like rounded card. The card has a rounded green-tinted icon tile containing a simple house/shield-like symbol, the heading “Your files, privately yours.”, and the explanatory text “Sign in with Google to sync your private images and audio across devices.” Add a full-width lime button reading “G Continue with Google,” where the G is visually distinct. Beneath it show the small note “Demo mode is active until you add your Firebase config.” At the bottom show a muted security note with a lime bullet: “Encrypted-looking private vault interface · Firebase-ready.” On narrow screens the layout remains centered with generous padding; on desktop the card is approximately 390px wide.

Authentication behavior: since no Firebase config is present, run in demo mode. Clicking Continue with Google should immediately create/use a demo user with email [email protected], briefly show a toast such as “Demo sign-in complete,” then navigate to the PIN screen. If Firebase is configured, the equivalent flow can use Google sign-in, but the core rebuild must work without external credentials.

PIN screen: keep the compact PRIVATE / Vault brand at the top-left of the centered content. Show another dark rounded glass card with a green-tinted rounded icon tile, heading “Unlock your vault,” text “Enter your 4-digit security PIN.”, four circular PIN indicators, and a numeric keypad arranged 1–9 in a 3-column grid, then Clear, 0, and backspace. Entered digits fill the indicators with lime glow. The default demo PIN is 2468 and should also be stored in local storage. When four digits are entered, open the dashboard if correct; otherwise show “Incorrect PIN” in small red text and clear the entry after a short delay. Include a “Reset demo PIN” text button that restores 2468 and shows a toast. Do not reveal typed digits, only the filled dots.

Dashboard after unlocking: use a sticky translucent top bar with the compact PRIVATE / Vault brand on the left and [email protected] plus a small rounded sign-out icon button (arrow/exiting symbol) on the right. The content is centered in a max-width desktop layout. At the top, show the green eyebrow “SECURE STORAGE,” a very large heading “Good to see you.”, and subcopy “Your personal media, in one quiet place.” On the right show a storage status chip with a glowing green dot, a dynamic file count such as “3 files,” and “Local demo vault.”

Below, create two tabs: “Photos” with a count badge and “Audio” with a count badge. The active tab is white with a lime underline. The Photos panel heading is “Photo library” with the subtitle “JPG and PNG memories,” plus a small outlined green “+ Add photo” button. Display a responsive photo grid: four equal square cards on wide screens and two columns on mobile, with rounded corners, dark borders, cover-cropped images, and the filename subtly overlaid near the bottom. On first launch, seed the local demo vault with three image items named vault-preview-1.jpg, vault-preview-2.jpg, and vault-preview-3.jpg; use attractive office/architecture/travel-like photographic thumbnails if external image URLs are available. The count should update dynamically.

The Audio tab should hide the photo panel and show “Audio library,” subtitle “MP3 recordings and tracks,” and a “+ Add audio” button. Render uploaded audio files as rounded dark rows with a music-note icon tile, filename, an “Added [localized date]” line, and a native audio player with controls. If no audio exists, show an empty state saying “No audio files yet” and “Upload an MP3 to see it here.” If there are no photos, show “Your photo library is empty” and “Use the + button to add your first image.”

File interaction: provide a fixed floating lime-green rounded-square + button at bottom-right that opens a hidden file picker accepting JPEG/PNG images and MP3 audio. The panel-specific add buttons open the picker with the matching file type filter. Accept image/jpeg and image/png as image files and audio/mpeg as audio; reject other formats with a toast saying “Only JPG, PNG, and MP3 files are allowed.” In demo mode, create a local object URL for the selected file, add it to the beginning of the appropriate list, persist metadata in localStorage, rerender counts and content, and show a toast like “[filename] added to demo vault.” Keep the selected file input reset after use. Sign out returns to authentication, clears the current user but does not erase the stored demo files or PIN.

Persist demo files in localStorage under a vault file key and persist the PIN under a vault PIN key. Include short-lived bottom toast notifications with dark background, subtle border, white text, and slide/fade-in behavior. Make all buttons visibly clickable with restrained hover/active states. Use responsive breakpoints so the dashboard hero stacks vertically, the photo grid reduces from four to two columns, the top bar remains usable, and audio rows wrap their native player on narrow screens. The visual style should match a premium encrypted-looking private storage product: quiet, spacious, minimal, dark navy/black surfaces, lime security accents, and no gameplay HUD, enemies, scoring, or fictional security capabilities beyond the interface shown.