Dinosaur

Prompt

Create a complete, polished, interactive HTML website for a **“Dinosaur Inspector”** designed to feel like a high-quality Roblox in-game interface. The experience should let the player select a dinosaur, inspect it visually, rotate it, zoom in, view statistics, traits, species information, and interact with inspection hotspots. The website should NOT look like a traditional website. It should feel like an actual Roblox game menu/UI. ## Core Design Direction Use a modern Roblox-inspired visual style with: - Studded / brick-like surfaces - Roblox-style plastic materials - Chunky UI panels - Slightly rounded corners - Strong hierarchy - Bold game-style buttons - Clear icons - Soft shadows - Subtle depth - Smooth hover and click animations - Modern game UI spacing - Responsive layout - High readability Avoid making it look childish or overly cartoony. The visual quality should resemble a polished Roblox simulator, tycoon, collection game, or creature game. ## Stud / Brick Design Studs should be an important visual motif. Use them in places such as: - Main background - Platforms - Panel headers - Selected cards - Decorative UI sections - Buttons - Borders Prefer creating studs through CSS rather than using a background image. Studs should look similar to classic Roblox baseplates or plastic bricks. Keep them subtle enough that the interface remains clean. ## Full-Screen Layout The interface should fill the entire browser window. Suggested desktop layout: ```text ┌────────────────────────────────────────────────────────────┐ │ DINOSAUR INSPECTOR Level / Currency │ ├───────────────┬──────────────────────────────┬─────────────┤ │ │ │ │ │ Dinosaur List │ │ Dino Info │ │ │ │ │ │ T-Rex │ 3D DINOSAUR │ Overview │ │ Velociraptor │ │ Stats │ │ Triceratops │ INSPECTION │ Traits │ │ Spinosaurus │ │ Species │ │ Stegosaurus │ │ │ │ │ │ │ ├───────────────┴──────────────────────────────┴─────────────┤ │ Rotate • Zoom • Reset Camera │ └────────────────────────────────────────────────────────────┘ ``` The dinosaur viewer should be the visual focus of the page. ## Dinosaur Selection Create a dinosaur list on the left side. Include at least: - Tyrannosaurus Rex - Velociraptor - Triceratops - Spinosaurus - Stegosaurus Each dinosaur should have a compact card containing: - Dinosaur name - Small silhouette or preview - Rarity - Optional level - Selected state Example rarities: - Common - Uncommon - Rare - Epic - Legendary The currently selected dinosaur should be clearly highlighted. Switching dinosaurs should smoothly update the viewer, information panel, statistics, traits, and species information. Use JavaScript data objects so adding more dinosaurs later is easy. ## 3D Dinosaur Viewer The center of the experience should contain an interactive dinosaur viewer. Use **Three.js through a CDN** if possible. The user should be able to: - Hold and drag to rotate the dinosaur - Rotate horizontally - Slightly rotate vertically - Zoom with the mouse wheel - Use touch controls on mobile - Reset the camera - Return to the default view If no real dinosaur model is available, create a stylized placeholder creature using simple Three.js geometry. Structure the code so a `.glb` or `.gltf` dinosaur model can later be inserted easily. Clearly comment where a real GLTF model should be loaded. Example structure: ```javascript // Replace placeholder dinosaur with real GLTF model here. ``` The dinosaur should stand on a Roblox-style circular or square studded platform. Add: - Soft shadow - Key light - Rim light - Ambient lighting - Slight environmental glow - Subtle idle animation Optionally slowly rotate the dinosaur when the user is not interacting. The automatic rotation should stop while the user is dragging or inspecting the model. ## Inspection Hotspots Create an inspection hotspot system. Place interactive markers around important body areas. For the Tyrannosaurus Rex, examples include: - Head - Teeth - Arms - Torso - Legs - Tail Hotspots should appear as floating circular game-style markers. When a hotspot is clicked: 1. Smoothly move the camera closer to that body region. 2. Highlight the selected hotspot. 3. Display an information panel. 4. Dim or reduce emphasis on unrelated hotspots. Example: **Teeth** Large serrated teeth designed for gripping, crushing, and tearing prey. Include a button: `BACK TO FULL VIEW` This should restore the default camera position. The hotspot system should be data-driven so different dinosaurs can have different inspection points. ## Dinosaur Information Panel Create a detailed panel on the right side. At the top show: **TYRANNOSAURUS REX** Below it show the rarity: `LEGENDARY` Also show: - Geological period - Diet - Classification - Habitat Example: **Period** Late Cretaceous **Diet** Carnivore **Classification** Theropod **Habitat** Forests and floodplains Then provide a short description: “A massive apex predator known for its powerful build, enormous skull, and devastating bite force.” ## Tabs The right-side information panel should contain tabs: - Overview - Stats - Traits - Species Tab changes should use smooth transitions. Do not reload the page. ### Overview Show: - Name - Rarity - Period - Diet - Classification - Description - Size information ### Stats Show game-style statistics using animated progress bars. Example: Health ████████░░ 80 Damage ██████████ 100 Speed ██████░░░░ 60 Stamina ███████░░░ 70 Also show physical information: - Weight - Height - Length - Bite Force Example: Weight: 8,400 kg Height: 4.0 m Length: 12.3 m Bite Force: Extreme When switching dinosaurs, progress bars should animate toward the new values. ### Traits Create visually distinct trait cards. Example: **CRUSHING BITE** Deals extremely high bite damage. **PREDATOR VISION** Improved awareness and target detection. **APEX PREDATOR** Deals bonus damage against smaller dinosaurs. Each trait should contain: - Icon - Trait name - Description Make the cards feel similar to Roblox inventory or ability cards. ### Species Show educational information such as: - Scientific name - Family - Time period - Fossil locations - Estimated size - Interesting facts Keep the content concise and easy to scan. ## Controls Bar At the bottom of the dinosaur viewer, include a small control bar. Examples: `Drag to Rotate` `Scroll to Zoom` `Inspect` `Reset Camera` Use simple icons where appropriate. The controls should visually resemble Roblox keybind hints. ## Top Navigation Add a compact top navigation/header. Left side: **DINOSAUR INSPECTOR** Optional subtitle: `CREATURE DATABASE` Right side could contain fictional game information such as: - Player Level - Fossils - Coins - Collection percentage Example: `LVL 12` `2,450 FOSSILS` `68% DISCOVERED` These values can be mock data. ## Animations Use polished microinteractions throughout the interface. Include: - Button hover movement - Small scale animations - Selection transitions - Animated stat bars - Panel transitions - Smooth dinosaur changes - Camera interpolation - Hotspot pulse animations - Tab transitions Animations should feel responsive and game-like. Avoid excessive bouncing. ## Color Direction Use a slightly dark neutral game interface. Possible palette: - Dark charcoal background - Dark gray panels - Muted green - Earth tones - Light beige - Off-white text - Accent colors for rarity Rarity colors can include: Common = Gray Uncommon = Green Rare = Blue Epic = Purple Legendary = Gold Do not overuse gradients. Avoid excessive neon effects. ## Roblox Plastic Appearance Try to reproduce the feeling of Roblox plastic surfaces through CSS. Use: - Subtle highlights - Inner shadows - Strong edges - Slight embossing - Stud patterns - Layered borders Panels should feel physical rather than completely flat. ## Responsive Design The page must work on: - Desktop - Laptop - Tablet - Mobile Desktop should use the full three-column layout. On smaller screens: - Dinosaur list can become a horizontal carousel - Dino information panel can move underneath the viewer - Viewer should remain large - Tabs should remain accessible - Touch rotation should work ## Technical Requirements Create everything inside a single HTML file unless external libraries are required. Include: - HTML - CSS - JavaScript Use Three.js through CDN if needed. Do not require a backend. Do not require installation. The file should run by simply opening it in a browser. Keep the code: - Well structured - Maintainable - Clearly commented - Easy to expand - Data-driven where possible Use reusable JavaScript functions. Avoid unnecessary duplicated code. ## Dinosaur Data Store dinosaur information in a JavaScript structure similar to: ```javascript const dinosaurs = { trex: { name: "Tyrannosaurus Rex", rarity: "Legendary", period: "Late Cretaceous", diet: "Carnivore", stats: { health: 80, damage: 100, speed: 60, stamina: 70 } } }; ``` Extend this structure for every dinosaur. Changing the selected dinosaur should update the entire interface based on this data. ## Visual Polish Add small details that make the interface feel like a real game: - Selection sounds can be represented visually but do not require audio - Small rarity badges - Tooltips - Animated hotspot rings - Button press effects - Studded platform - Hover highlights - Subtle vignette - Decorative panel bolts or studs - Dinosaur nameplate - Collection indicator - Small loading indicator when changing dinosaurs Do not clutter the interface. ## Important Do not create a generic dashboard. Do not create a normal scientific museum website. Do not use a standard Bootstrap-style layout. The final result should strongly communicate: **“This is a dinosaur inspection screen inside a polished Roblox game.”** The dinosaur viewer must be the hero element. Prioritize visual quality, interaction, game feel, and Roblox-inspired stud/plastic design. Deliver the complete working HTML code.

A system prompt was added to support web rendering