Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Cookie Model Creation Guide</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .step-card { | |
| transition: all 0.3s ease; | |
| perspective: 1000px; | |
| } | |
| .step-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| .step-card-inner { | |
| position: relative; | |
| width: 100%; | |
| height: 100%; | |
| transition: transform 0.6s; | |
| transform-style: preserve-3d; | |
| } | |
| .step-card:hover .step-card-inner { | |
| transform: rotateY(5deg); | |
| } | |
| .image-container { | |
| border-radius: 0.5rem; | |
| overflow: hidden; | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); | |
| } | |
| .image-container img { | |
| transition: transform 0.3s ease; | |
| } | |
| .image-container:hover img { | |
| transform: scale(1.03); | |
| } | |
| .tooltip { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .tooltip .tooltiptext { | |
| visibility: hidden; | |
| width: 200px; | |
| background-color: #555; | |
| color: #fff; | |
| text-align: center; | |
| border-radius: 6px; | |
| padding: 5px; | |
| position: absolute; | |
| z-index: 1; | |
| bottom: 125%; | |
| left: 50%; | |
| margin-left: -100px; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .tooltip:hover .tooltiptext { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-amber-50 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="bg-gradient-to-r from-amber-600 to-amber-800 text-white rounded-xl p-6 mb-8 shadow-lg"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h1 class="text-4xl font-bold mb-2">Cookie Model Creation Guide</h1> | |
| <p class="text-xl opacity-90">Step-by-step visual tutorial for creating a clickable cookie in Roblox</p> | |
| </div> | |
| <div class="bg-white/20 p-4 rounded-full pulse"> | |
| <i class="fas fa-cookie-bite text-4xl"></i> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Introduction --> | |
| <section class="bg-white rounded-xl p-6 mb-8 shadow-md"> | |
| <h2 class="text-2xl font-bold mb-4 text-gray-800 border-b pb-2">Introduction</h2> | |
| <p class="text-gray-700 mb-4">This guide will walk you through creating a 3D cookie model in Roblox Studio that players can click to earn points. We'll cover everything from basic part creation to adding visual effects.</p> | |
| <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-lg"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 pt-1"> | |
| <i class="fas fa-info-circle text-blue-600 text-xl"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h3 class="text-lg font-medium text-blue-900">Before You Begin</h3> | |
| <div class="mt-1 text-blue-800"> | |
| <p>Make sure you have Roblox Studio installed and a basic understanding of the interface. We'll be working in the 3D view and Explorer panel.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Step-by-Step Guide --> | |
| <section class="bg-white rounded-xl p-6 mb-8 shadow-md"> | |
| <h2 class="text-2xl font-bold mb-6 text-gray-800 border-b pb-2">Step-by-Step Creation</h2> | |
| <!-- Step 1 --> | |
| <div class="step-card bg-amber-50 border border-amber-200 rounded-lg p-6 mb-6"> | |
| <div class="step-card-inner"> | |
| <div class="flex flex-col md:flex-row gap-6"> | |
| <div class="md:w-1/2"> | |
| <h3 class="text-xl font-bold mb-3 text-amber-800 flex items-center"> | |
| <span class="bg-amber-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">1</span> | |
| Create the Base Part | |
| </h3> | |
| <ol class="list-decimal pl-5 space-y-2 text-gray-700"> | |
| <li>Open Roblox Studio and create a new Baseplate</li> | |
| <li>Go to the <strong>Home</strong> tab and click <strong>Part</strong></li> | |
| <li>In the Properties window: | |
| <ul class="list-disc pl-5 mt-1"> | |
| <li>Set <span class="font-mono bg-gray-200 px-1 rounded">Name</span> to "Cookie"</li> | |
| <li>Set <span class="font-mono bg-gray-200 px-1 rounded">Size</span> to (4, 1, 4)</li> | |
| <li>Set <span class="font-mono bg-gray-200 px-1 rounded">Shape</span> to Cylinder</li> | |
| </ul> | |
| </li> | |
| </ol> | |
| </div> | |
| <div class="md:w-1/2 image-container"> | |
| <img src="https://tr.rbxcdn.com/9f1e5a7d4b4b0c0c1b4f5f5f5f5f5f5f/420/420/Image/Png" alt="Creating a cylinder part" class="w-full h-auto rounded-lg"> | |
| <p class="text-sm text-gray-500 mt-1 text-center">Creating a cylinder part in Roblox Studio</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 2 --> | |
| <div class="step-card bg-amber-50 border border-amber-200 rounded-lg p-6 mb-6"> | |
| <div class="step-card-inner"> | |
| <div class="flex flex-col md:flex-row gap-6"> | |
| <div class="md:w-1/2"> | |
| <h3 class="text-xl font-bold mb-3 text-amber-800 flex items-center"> | |
| <span class="bg-amber-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">2</span> | |
| Customize Appearance | |
| </h3> | |
| <ol class="list-decimal pl-5 space-y-2 text-gray-700"> | |
| <li>With the part selected, go to Properties</li> | |
| <li>Set these properties: | |
| <ul class="list-disc pl-5 mt-1"> | |
| <li><span class="font-mono bg-gray-200 px-1 rounded">Material</span>: Sand</li> | |
| <li><span class="font-mono bg-gray-200 px-1 rounded">Color</span>: Brown (RGB 139, 69, 19)</li> | |
| <li><span class="font-mono bg-gray-200 px-1 rounded">Anchored</span>: Checked ✔️</li> | |
| <li><span class="font-mono bg-gray-200 px-1 rounded">CanCollide</span>: Checked ✔️</li> | |
| </ul> | |
| </li> | |
| <li>Position the cookie above the baseplate</li> | |
| </ol> | |
| </div> | |
| <div class="md:w-1/2 image-container"> | |
| <img src="https://tr.rbxcdn.com/9f1e5a7d4b4b0c0c1b4f5f5f5f5f5f5f/420/420/Image/Png" alt="Customizing part properties" class="w-full h-auto rounded-lg"> | |
| <p class="text-sm text-gray-500 mt-1 text-center">Setting part properties for cookie appearance</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 3 --> | |
| <div class="step-card bg-amber-50 border border-amber-200 rounded-lg p-6 mb-6"> | |
| <div class="step-card-inner"> | |
| <div class="flex flex-col md:flex-row gap-6"> | |
| <div class="md:w-1/2"> | |
| <h3 class="text-xl font-bold mb-3 text-amber-800 flex items-center"> | |
| <span class="bg-amber-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">3</span> | |
| Add Chocolate Chips | |
| </h3> | |
| <ol class="list-decimal pl-5 space-y-2 text-gray-700"> | |
| <li>Create small spherical parts (Size 0.5, 0.5, 0.5)</li> | |
| <li>Set their: | |
| <ul class="list-disc pl-5 mt-1"> | |
| <li><span class="font-mono bg-gray-200 px-1 rounded">Material</span>: Plastic</li> | |
| <li><span class="font-mono bg-gray-200 px-1 rounded">Color</span>: Dark brown (RGB 60, 35, 10)</li> | |
| </ul> | |
| </li> | |
| <li>Position them on top of the cookie</li> | |
| <li>Select all chips and group them (Ctrl+G)</li> | |
| <li>Name the group "ChocolateChips"</li> | |
| </ol> | |
| </div> | |
| <div class="md:w-1/2 image-container"> | |
| <img src="https://tr.rbxcdn.com/9f1e5a7d4b4b0c0c1b4f5f5f5f5f5f5f/420/420/Image/Png" alt="Adding chocolate chips" class="w-full h-auto rounded-lg"> | |
| <p class="text-sm text-gray-500 mt-1 text-center">Creating and positioning chocolate chips</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 4 --> | |
| <div class="step-card bg-amber-50 border border-amber-200 rounded-lg p-6 mb-6"> | |
| <div class="step-card-inner"> | |
| <div class="flex flex-col md:flex-row gap-6"> | |
| <div class="md:w-1/2"> | |
| <h3 class="text-xl font-bold mb-3 text-amber-800 flex items-center"> | |
| <span class="bg-amber-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">4</span> | |
| Add Click Detection | |
| </h3> | |
| <ol class="list-decimal pl-5 space-y-2 text-gray-700"> | |
| <li>Right-click the Cookie part in Explorer</li> | |
| <li>Select <strong>Insert Object</strong> → <strong>ClickDetector</strong></li> | |
| <li>In ClickDetector properties: | |
| <ul class="list-disc pl-5 mt-1"> | |
| <li><span class="font-mono bg-gray-200 px-1 rounded">MaxActivationDistance</span>: 10</li> | |
| <li><span class="font-mono bg-gray-200 px-1 rounded">CursorIcon</span>: (optional) Custom cursor</li> | |
| </ul> | |
| </li> | |
| <li>Test by clicking the cookie in Play mode</li> | |
| </ol> | |
| </div> | |
| <div class="md:w-1/2 image-container"> | |
| <img src="https://tr.rbxcdn.com/9f1e5a7d4b4b0c0c1b4f5f5f5f5f5f5f/420/420/Image/Png" alt="Adding ClickDetector" class="w-full h-auto rounded-lg"> | |
| <p class="text-sm text-gray-500 mt-1 text-center">Inserting and configuring a ClickDetector</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 5 --> | |
| <div class="step-card bg-amber-50 border border-amber-200 rounded-lg p-6 mb-6"> | |
| <div class="step-card-inner"> | |
| <div class="flex flex-col md:flex-row gap-6"> | |
| <div class="md:w-1/2"> | |
| <h3 class="text-xl font-bold mb-3 text-amber-800 flex items-center"> | |
| <span class="bg-amber-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">5</span> | |
| Add Visual Effects | |
| </h3> | |
| <ol class="list-decimal pl-5 space-y-2 text-gray-700"> | |
| <li>Right-click Cookie → <strong>Insert Object</strong> → <strong>ParticleEmitter</strong></li> | |
| <li>Configure the emitter: | |
| <ul class="list-disc pl-5 mt-1"> | |
| <li><span class="font-mono bg-gray-200 px-1 rounded">Texture</span>: Use crumb texture (ID 9430770660)</li> | |
| <li><span class="font-mono bg-gray-200 px-1 rounded">LightEmission</span>: 0.5</li> | |
| <li><span class="font-mono bg-gray-200 px-1 rounded">Size</span>: 0.3</li> | |
| <li><span class="font-mono bg-gray-200 px-1 rounded">Speed</span>: 2</li> | |
| <li><span class="font-mono bg-gray-200 px-1 rounded">Enabled</span>: False (we'll trigger this in code)</li> | |
| </ul> | |
| </li> | |
| <li>Name the emitter "ClickEffect"</li> | |
| </ol> | |
| </div> | |
| <div class="md:w-1/2 image-container"> | |
| <img src="https://tr.rbxcdn.com/9f1e5a7d4b4b0c0c1b4f5f5f5f5f5f5f/420/420/Image/Png" alt="Configuring ParticleEmitter" class="w-full h-auto rounded-lg"> | |
| <p class="text-sm text-gray-500 mt-1 text-center">Setting up visual click effects</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 6 --> | |
| <div class="step-card bg-amber-50 border border-amber-200 rounded-lg p-6 mb-6"> | |
| <div class="step-card-inner"> | |
| <div class="flex flex-col md:flex-row gap-6"> | |
| <div class="md:w-1/2"> | |
| <h3 class="text-xl font-bold mb-3 text-amber-800 flex items-center"> | |
| <span class="bg-amber-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">6</span> | |
| Add Sound Effects | |
| </h3> | |
| <ol class="list-decimal pl-5 space-y-2 text-gray-700"> | |
| <li>Right-click Cookie → <strong>Insert Object</strong> → <strong>Sound</strong></li> | |
| <li>Configure the sound: | |
| <ul class="list-disc pl-5 mt-1"> | |
| <li><span class="font-mono bg-gray-200 px-1 rounded">SoundId</span>: Use cookie crunch sound (ID 357420354)</li> | |
| <li><span class="font-mono bg-gray-200 px-1 rounded">Volume</span>: 0.5</li> | |
| <li><span class="font-mono bg-gray-200 px-1 rounded">PlayOnRemove</span>: False</li> | |
| </ul> | |
| </li> | |
| <li>Name the sound "ClickSound"</li> | |
| <li>Test in Play mode to verify sound plays</li> | |
| </ol> | |
| </div> | |
| <div class="md:w-1/2 image-container"> | |
| <img src="https://tr.rbxcdn.com/9f1e5a7d4b4b0c0c1b4f5f5f5f5f5f5f/420/420/Image/Png" alt="Adding sound effects" class="w-full h-auto rounded-lg"> | |
| <p class="text-sm text-gray-500 mt-1 text-center">Configuring click sound effects</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Final Result --> | |
| <div class="bg-green-50 border border-green-200 rounded-lg p-6 mb-6"> | |
| <h3 class="text-xl font-bold mb-4 text-green-800 flex items-center"> | |
| <i class="fas fa-check-circle mr-3"></i> Final Cookie Model Structure | |
| </h3> | |
| <div class="flex flex-col md:flex-row gap-6 items-center"> | |
| <div class="md:w-1/2"> | |
| <div class="bg-gray-800 text-green-400 p-4 rounded-lg font-mono text-sm overflow-x-auto"> | |
| <pre>Workspace | |
| └── Cookie (Part) | |
| ├── ClickDetector | |
| ├── ClickEffect (ParticleEmitter) | |
| ├── ClickSound (Sound) | |
| └── ChocolateChips (Model) | |
| ├── ChocolateChip1 (Part) | |
| ├── ChocolateChip2 (Part) | |
| └── ...</pre> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 image-container"> | |
| <img src="https://tr.rbxcdn.com/9f1e5a7d4b4b0c0c1b4f5f5f5f5f5f5f/420/420/Image/Png" alt="Final cookie model" class="w-full h-auto rounded-lg"> | |
| <p class="text-sm text-gray-500 mt-1 text-center">Completed cookie model in Roblox Studio</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Scripting Section --> | |
| <section class="bg-white rounded-xl p-6 mb-8 shadow-md"> | |
| <h2 class="text-2xl font-bold mb-4 text-gray-800 border-b pb-2">Adding Functionality with Scripts</h2> | |
| <div class="mb-6"> | |
| <h3 class="text-xl font-bold mb-3 text-gray-800">1. Basic Click Script</h3> | |
| <p class="text-gray-700 mb-3">Create a Script in ServerScriptService to handle cookie clicks:</p> | |
| <div class="bg-gray-800 text-gray-100 p-4 rounded-lg font-mono text-sm overflow-x-auto mb-4"> | |
| <pre>-- ServerScriptService/CookieClickHandler.lua | |
| local cookie = workspace:WaitForChild("Cookie") | |
| local clickDetector = cookie:WaitForChild("ClickDetector") | |
| clickDetector.MouseClick:Connect(function(player) | |
| -- Get player's leaderstats | |
| local leaderstats = player:FindFirstChild("leaderstats") | |
| if not leaderstats then return end | |
| local cookies = leaderstats:FindFirstChild("Cookies") | |
| if not cookies then return end | |
| -- Increment cookie count | |
| cookies.Value = cookies.Value + 1 | |
| -- Play sound effect | |
| local sound = cookie:FindFirstChild("ClickSound") | |
| if sound then | |
| sound:Play() | |
| end | |
| -- Show particle effect | |
| local emitter = cookie:FindFirstChild("ClickEffect") | |
| if emitter then | |
| emitter.Enabled = true | |
| wait(0.2) | |
| emitter.Enabled = false | |
| end | |
| -- Small animation | |
| local originalSize = cookie.Size | |
| cookie.Size = originalSize * 0.95 | |
| wait(0.1) | |
| cookie.Size = originalSize | |
| end)</pre> | |
| </div> | |
| <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-lg"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 pt-1"> | |
| <i class="fas fa-code text-blue-600"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h3 class="text-lg font-medium text-blue-900">Script Explanation</h3> | |
| <div class="mt-1 text-blue-800 text-sm"> | |
| <p>This script listens for clicks on the cookie and:</p> | |
| <ul class="list-disc pl-5 mt-1"> | |
| <li>Increments the player's cookie count</li> | |
| <li>Plays a crunch sound effect</li> | |
| <li>Triggers particle effects</li> | |
| <li>Adds a small "squish" animation</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-xl font-bold mb-3 text-gray-800">2. Leaderstats Setup</h3> | |
| <p class="text-gray-700 mb-3">Add this script to create player statistics:</p> | |
| <div class="bg-gray-800 text-gray-100 p-4 rounded-lg font-mono text-sm overflow-x-auto"> | |
| <pre>-- ServerScriptService/PlayerStatsSetup.lua | |
| game.Players.PlayerAdded:Connect(function(player) | |
| -- Create leaderstats folder | |
| local leaderstats = Instance.new("Folder") | |
| leaderstats.Name = "leaderstats" | |
| leaderstats.Parent = player | |
| -- Create cookies value | |
| local cookies = Instance.new("IntValue") | |
| cookies.Name = "Cookies" | |
| cookies.Value = 0 | |
| cookies.Parent = leaderstats | |
| -- Optional: Create CPS (Cookies Per Second) value | |
| local cps = Instance.new("IntValue") | |
| cps.Name = "CPS" | |
| cps.Value = 0 | |
| cps.Parent = leaderstats | |
| end)</pre> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Advanced Tips --> | |
| <section class="bg-purple-50 border border-purple-200 rounded-xl p-6 mb-8"> | |
| <h2 class="text-2xl font-bold mb-4 text-purple-800 border-b border-purple-300 pb-2">Advanced Enhancement Tips</h2> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div class="bg-white p-4 rounded-lg shadow-sm"> | |
| <h3 class="font-bold text-purple-700 mb-3 flex items-center"> | |
| <i class="fas fa-star mr-2 text-yellow-500"></i> Visual Enhancements | |
| </h3> | |
| <ul class="list-disc pl-5 space-y-1 text-gray-700"> | |
| <li>Add a <strong>SurfaceGui</strong> with cookie texture for more realism</li> | |
| <li>Create multiple cookie models with different toppings</li> | |
| <li>Add glow effects for special cookies</li> | |
| <li>Implement cookie "cracking" animation when clicked</li> | |
| </ul> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm"> | |
| <h3 class="font-bold text-purple-700 mb-3 flex items-center"> | |
| <i class="fas fa-cogs mr-2 text-blue-500"></i> Functional Enhancements | |
| </h3> | |
| <ul class="list-disc pl-5 space-y-1 text-gray-700"> | |
| <li>Add critical hits (random chance for bonus cookies)</li> | |
| <li>Implement cookie combos (faster clicks = multipliers)</li> | |
| <li>Create power-ups that temporarily boost click value</li> | |
| <li>Add achievement system for milestones</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Final Notes --> | |
| <section class="bg-amber-100 border border-amber-200 rounded-xl p-6 shadow-md"> | |
| <h2 class="text-2xl font-bold mb-4 text-amber-900 border-b border-amber-300 pb-2">Final Notes</h2> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <i class="fas fa-check-circle text-amber-700"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-amber-900 font-medium">Test your cookie model thoroughly in different lighting conditions</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <i class="fas fa-check-circle text-amber-700"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-amber-900 font-medium">Consider performance - too many particles can lag the game</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <i class="fas fa-check-circle text-amber-700"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-amber-900 font-medium">Document your asset IDs for easy reference later</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <i class="fas fa-check-circle text-amber-700"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-amber-900 font-medium">Create variations of your cookie model for different game modes</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="mt-12 text-center text-gray-600"> | |
| <p>© 2023 Roblox Cookie Model Guide | Created with <i class="fas fa-cookie-bite text-amber-600"></i> for aspiring developers</p> | |
| <p class="text-sm mt-2">Note: Placeholder images shown - replace with actual screenshots from your Roblox Studio</p> | |
| </footer> | |
| </div> | |
| <script> | |
| // Add tooltip functionality | |
| document.querySelectorAll('.tooltip').forEach(el => { | |
| el.addEventListener('mouseenter', function() { | |
| this.querySelector('.tooltiptext').style.opacity = '1'; | |
| this.querySelector('.tooltiptext').style.visibility = 'visible'; | |
| }); | |
| el.addEventListener('mouseleave', function() { | |
| this.querySelector('.tooltiptext').style.opacity = '0'; | |
| this.querySelector('.tooltiptext').style.visibility = 'hidden'; | |
| }); | |
| }); | |
| // Add animation to step cards on scroll | |
| const observerOptions = { | |
| threshold: 0.1 | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.style.opacity = '1'; | |
| entry.target.style.transform = 'translateY(0)'; | |
| } | |
| }); | |
| }, observerOptions); | |
| document.querySelectorAll('.step-card').forEach((card, index) => { | |
| card.style.opacity = '0'; | |
| card.style.transform = 'translateY(20px)'; | |
| card.style.transition = `all 0.5s ease ${index * 0.1}s`; | |
| observer.observe(card); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=DiamondVi/roblox-project-1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |