Nebula: Matu Edition, 2035'ten gelmiş gibi görünen, Three.js ile üç boyutlu bir arka plana sahip oyun mağazası ve başlatıcı arayüzü. Keşif sayfası, oyun kataloğu, oyun detayı, kitaplık, istek listesi, sepet ve ödeme, kullanıcı profili, oyun stiline göre arkadaş bulma ve etkinlik sayfası tek tek tarif ediliyor.
Logo, renkler ve yazı tipleri ayrıntılı verilmiş; arayüz metinlerinin Türkçe olması isteniyor. Proje birden fazla dosyaya bölünüyor. Prompt İngilizce.
You are an expert frontend developer and creative UI/UX designer.
Build "Nebula: Matu Edition" — a futuristic, next-generation Steam
redesign using Three.js for immersive 3D visuals. All files must be Turkish. This is a multi-file project.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🗂️ FILE STRUCTURE (create all of these)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
index.html → Main shell, CDN imports, layout skeleton
style.css → Full styling: glassmorphism, neon themes,
animations, scrollbars, responsive grid
app.js → App router, state management, page switching
scene.js → Three.js background: animated particle nebula,
floating 3D game card meshes, bloom post-processing
games.js → Game catalog data (50+ games with metadata)
store.js → Cart logic, wishlist, owned library management
ui.js → Dynamic component rendering (cards, modals, toasts)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📦 CDN IMPORTS TO USE (include in index.html)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
- Three.js r128: https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js
- Google Icons: https://fonts.googleapis.com/icon?family=Material+Icons+Round
- Google Fonts: https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;500;700
&family=Orbitron:wght@400;700;900&display=swap
- GSAP (animation): https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🎨 VISUAL IDENTITY — "NEBULA: MATU EDITION"
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Design language: Cyberpunk-Glassmorphism hybrid
Primary color: #00f5d4 (electric cyan)
Accent color: #ff006e (neon magenta)
Background: Deep space #050510 with animated nebula (Three.js)
Cards: Frosted glass panels (backdrop-filter: blur(20px)),
neon border glow on hover, 3D tilt effect on mousemove
Typography: "Orbitron" for headings, "Rajdhani" for body
Icons: Material Icons Round throughout the entire UI
Branding note: The logo must read "Nebula" in Orbitron font with a
cyan glow, followed by a colon and "Matu Edition" in
smaller magenta italic text. Add a subtle "Matu"
watermark in the bottom-right corner of every page.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🌌 THREE.JS SCENE (scene.js) — BE CREATIVE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Create a living background that runs behind ALL pages:
1. Particle nebula: 8,000 particles in a galaxy spiral formation,
slowly rotating, color-shifting between cyan and magenta
2. Floating hex tiles: 20 semi-transparent hexagonal meshes drifting
through space at different depths and speeds
3. Mouse parallax: scene responds to cursor movement with subtle depth shift
4. On page transition: particles converge to center then explode outward
5. Featured game section: render the featured game's "cover art color
palette" as a dynamic point cloud that morphs between shapes
6. Loading screen: particles form the monogram "SME"
(Nebula Matu Edition) then scatter into the nebula
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🛒 PAGES & FEATURES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
[1] HERO / DISCOVERY PAGE
- Auto-rotating featured game spotlight with cinematic fade
- "MatuScore" — AI-generated hype meter (animated radial bar)
- Live "players online" counter (simulated, animates upward)
- Trending tags: #OpenWorld #Roguelike #Multiplayer etc.
- "Matu's Pick of the Week" — a hand-curated featured game slot
with a special glowing crown badge (workspace_premium icon)
[2] STORE PAGE — GAME CATALOG (games.js)
Include 50+ real popular games across these genres.
For each game store: title, genre[], platform[], price (USD),
rating (0-10), releaseYear, tags[], playerCount,
coverGradient (two hex colors for procedural cover art),
shortDescription, isOnSale (bool), discountPercent.
Must include games like:
Cyberpunk 2077, Elden Ring, Red Dead Redemption 2, GTA V,
The Witcher 3, Baldur's Gate 3, Hogwarts Legacy, Starfield,
Counter-Strike 2, Dota 2, Apex Legends, Valorant, Fortnite,
Minecraft, Terraria, Stardew Valley, Hades, Hollow Knight,
Dark Souls III, Sekiro, Monster Hunter: World, Destiny 2,
No Man's Sky, Subnautica, The Forest, Valheim, Rust,
ARK: Survival Evolved, Among Us, Fall Guys, Rocket League,
Deep Rock Galactic, Phasmophobia, It Takes Two, Cuphead,
Celeste, Undertale, DOOM Eternal, Wolfenstein II, Prey,
Disco Elysium, Divinity: Original Sin 2, Pathfinder: WotR,
Total War: Warhammer III, Civilization VI, Anno 1800,
Microsoft Flight Simulator, Euro Truck Simulator 2,
Persona 5 Royal, NieR:Automata, Devil May Cry 5,
Death Stranding, Control, Alan Wake 2, Returnal,
God of War PC, Spider-Man Remastered, Horizon Zero Dawn
Filter sidebar with Material Icons:
tune → Advanced filters panel
grid_view / view_list → Layout toggle
sort → Sort dropdown (Price, Rating, Release, Trending)
search → Search bar with live filtering
local_offer → Sale items only toggle
[3] GAME DETAIL MODAL
When clicking a game card, slide in a full-screen modal:
- Left: Procedural cover art (CSS gradient from coverGradient colors)
with animated scan lines overlay
- Right: All game metadata beautifully laid out
- "MatuScore" animated radial gauge
- Tag pills with neon glow
- Price with strikethrough if on sale
- Three action buttons with Material Icons:
shopping_cart → Add to Cart (with particle burst animation)
favorite → Wishlist (heart fills with neon pink)
play_arrow → "Launch" (for owned games, shows plasma effect)
- Related games horizontal scroll row at bottom
[4] LIBRARY PAGE
- Owned games displayed as a 3D bookshelf (Three.js BoxGeometry
tiles arranged in a shelf grid, each colored by coverGradient)
- Hover over a 3D tile: it pops forward and shows game title
- Click: opens game detail modal with "Launch" option
- Playtime tracker per game (simulated hours, shown with
schedule Material Icon)
- Sort by: Last Played, Most Played, A-Z, Recently Added
- "Matu Edition" exclusive: a "Vault" sub-section for games
added via special Matu Edition promo codes
[5] WISHLIST PAGE
- Draggable priority ranking list (drag_handle icon)
- Price alert badge (notifications icon) — shows when game is on sale
- "Total if bought today" calculator at bottom
- Share wishlist button (share icon) that copies a fake URL
formatted as: nebula-matu.gg/wishlist/matu-user-XXXX
[6] CART & CHECKOUT
- Sliding drawer from right edge (360px wide)
- Itemized list with game covers and prices
- Coupon code field (try "MATU25" for 25% off — hardcoded,
and "MATUEDITION" for 40% off — hardcoded)
- Animated total calculation
- "Complete Purchase" fires a fullscreen celebration particle
explosion in Three.js + moves all cart items to Library
- Receipt shows "Thank you for shopping on Nebula: Matu Edition"
[7] USER PROFILE PAGE
- Animated avatar with neon ring border (account_circle icon fallback)
- Stats grid: Games Owned, Hours Played, Wishlist Count,
Friends, Achievements Unlocked
- Achievement badges grid (20 fake achievements with emoji +
title + locked/unlocked state, military_tech icon)
- Activity feed: "Recently played", "New wishlist item" etc.
- Level / XP bar — "MatuRank: Void Walker Lv.34"
- Exclusive "Matu Edition" gold frame badge on profile card
indicating the user is part of the Matu Edition community
[8] SOCIAL FEATURES (NEW — exclusive to Nebula: Matu Edition)
"MatuMatch" — Friend finder by playstyle:
- Takes user's top 3 genres (selected via toggle chips)
- Shows 6 "compatible players" cards with compatibility % bar
- "Challenge" button sends fake game invite notification
"VaultReviews" — AI-augmented reviews:
- Each game has 5 user reviews
- A "MatuAI Analysis" summary badge above reviews that
shows sentiment: Overwhelmingly Positive / Mixed / etc.
- Reviews have helpful/funny/award reactions (thumb_up,
sentiment_very_satisfied, emoji_events icons)
[9] MATU EVENTS PAGE (NEW — exclusive to Nebula: Matu Edition)
- "Live" weekend events with countdown timers
- Event types: Flash Sales (local_offer), Game Tournaments
(emoji_events), Co-op Challenges (group),
Community Votes (how_to_vote)
- Featured event has a pulsing neon border animation
- "Matu Week" — a special recurring event banner at the top
with animated confetti particles and the tagline:
"Every week is better with Matu Edition 🎮"
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🔔 GLOBAL UI ELEMENTS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
- Top navbar: "Nebula: Matu Edition" logo (Orbitron font, cyan glow
for "Nebula", magenta glow for "Matu Edition"), nav links with
Material Icons, notification bell with badge, cart icon with item
count badge, avatar
- Toast notifications (bottom-right): slide in/out for cart actions,
wishlist adds, achievement unlocks — styled with neon left border.
All toast messages must end with "— Matu Edition"
e.g. "Added to cart — Matu Edition ✓"
- Loading screen: Three.js particle animation forming "SME" monogram
- Keyboard shortcut: press "/" to focus search,
"Escape" to close any modal
- Footer: "Nebula: Matu Edition © 2035 — Crafted with ❤️ by Matu"
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚙️ TECHNICAL REQUIREMENTS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
- Zero build tools — pure HTML/CSS/JS with CDN imports only
- Three.js canvas sits at z-index: 0 behind a transparent
main container at z-index: 1
- All state (cart, wishlist, library, user) stored in a single
AppState object in app.js, mutated via pure functions in store.js
- Page transitions: GSAP timeline — current page slides out left
while particles swirl, new page slides in right
- Fully responsive: mobile hamburger menu,
2-col grid on tablet, 4-col on desktop
- Custom scrollbar styled with neon cyan color
- All hover states must have smooth CSS transitions (0.3s ease)
- Game covers: since real images aren't available, generate stunning
procedural CSS covers using each game's coverGradient array —
add animated gradient shimmer, genre-based geometric overlays
(circuit patterns for sci-fi, organic curves for fantasy, etc.)
and the game title in Orbitron font centered with text-shadow glow
- The <title> tag in index.html must be: "Nebula: Matu Edition"
- The browser tab favicon emoji should be 🎮
Build the complete project now. Output each file separately with
its filename as a header. Make it visually stunning — this should
feel like a AAA game launcher from 2035, personally curated by Matu.
Yorumlar
Yorum Yap