Spaces:

DiamondVi
/

roblox-project-1

Running

App Files Files Community

DiamondVi commited on Apr 11

Commit

5aa3344

verified ·

1 Parent(s): 641b580

Add 1 files

Browse files

Files changed (1) hide show

index.html +387 -500

index.html CHANGED Viewed

@@ -3,56 +3,81 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Cookie Clicker Roblox Game 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>
-        .code-block {
-            font-family: 'Courier New', monospace;
-            background-color: #1e293b;
-            color: #f8fafc;
-            padding: 1rem;
-            border-radius: 0.5rem;
-            overflow-x: auto;
         }
-        .game-feature {
-            transition: all 0.3s ease;
         }
-        .game-feature:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
         }
-        .skin-preview {
-            transition: all 0.3s ease;
-            cursor: pointer;
         }
-        .skin-preview:hover {
-            transform: scale(1.05);
-            z-index: 10;
         }
-        .tab-content {
-            display: none;
         }
-        .tab-content.active {
-            display: block;
-            animation: fadeIn 0.5s ease;
         }
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(10px); }
-            to { opacity: 1; transform: translateY(0); }
         }
-        .flag-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
-            gap: 10px;
         }
     </style>
 </head>
@@ -62,511 +87,375 @@
         <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">Global Cookie Clicker</h1>
-                    <p class="text-xl opacity-90">Create a Roblox cookie-clicker game with customization and global competition</p>
                 </div>
-                <div class="bg-white/20 p-4 rounded-full">
                     <i class="fas fa-cookie-bite text-4xl"></i>
                 </div>
             </div>
         </header>
-        <!-- Game Overview -->
         <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">Game Concept Overview</h2>
-            <p class="text-gray-700 mb-6">Create a cookie-clicker game where players can:</p>
-            <div class="grid md:grid-cols-3 gap-6 mb-6">
-                <div class="game-feature bg-amber-50 p-4 rounded-lg border border-amber-200">
-                    <div class="bg-amber-100 w-12 h-12 rounded-full flex items-center justify-center mb-3 mx-auto">
-                        <i class="fas fa-mouse-pointer text-amber-600 text-xl"></i>
                     </div>
-                    <h3 class="font-bold text-center mb-2">Cookie Clicking</h3>
-                    <p class="text-gray-700 text-center">Basic clicking mechanics with upgrades and power-ups</p>
                 </div>
-                <div class="game-feature bg-blue-50 p-4 rounded-lg border border-blue-200">
-                    <div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mb-3 mx-auto">
-                        <i class="fas fa-globe text-blue-600 text-xl"></i>
                     </div>
-                    <h3 class="font-bold text-center mb-2">Global Competition</h3>
-                    <p class="text-gray-700 text-center">Leaderboards showing top players worldwide</p>
                 </div>
-                <div class="game-feature bg-purple-50 p-4 rounded-lg border border-purple-200">
-                    <div class="bg-purple-100 w-12 h-12 rounded-full flex items-center justify-center mb-3 mx-auto">
-                        <i class="fas fa-paint-brush text-purple-600 text-xl"></i>
                     </div>
-                    <h3 class="font-bold text-center mb-2">Cookie Customization</h3>
-                    <p class="text-gray-700 text-center">Skins, colors, and flag-themed cookie designs</p>
                 </div>
             </div>
-            <div class="bg-amber-100 border-l-4 border-amber-500 p-4 rounded-lg">
-                <div class="flex items-start">
-                    <div class="flex-shrink-0 pt-1">
-                        <i class="fas fa-lightbulb text-amber-600 text-xl"></i>
                     </div>
-                    <div class="ml-3">
-                        <h3 class="text-lg font-medium text-amber-900">Monetization Strategy</h3>
-                        <div class="mt-1 text-amber-800">
-                            <p>Implement Game Passes for special cookie skins and boosters. Use Developer Products for one-time purchases like flag skins.</p>
                         </div>
                     </div>
                 </div>
             </div>
-        </section>
-        <!-- Development 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">Development Guide</h2>
-            <div class="flex mb-4 border-b">
-                <button class="tab-btn py-2 px-4 font-medium border-b-2 border-amber-500 text-amber-600" data-tab="basic">Basic Setup</button>
-                <button class="tab-btn py-2 px-4 font-medium" data-tab="clicker">Clicker Mechanics</button>
-                <button class="tab-btn py-2 px-4 font-medium" data-tab="skins">Cookie Skins</button>
-                <button class="tab-btn py-2 px-4 font-medium" data-tab="leaderboard">Leaderboards</button>
             </div>
-            <!-- Basic Setup Tab -->
-            <div id="basic" class="tab-content active">
-                <h3 class="text-xl font-bold mb-4 text-gray-800">Basic Game Setup</h3>
-                <div class="mb-6">
-                    <h4 class="font-bold text-lg mb-2 text-gray-800">1. Create the Cookie Model</h4>
-                    <p class="text-gray-700 mb-3">Create a cookie model that will be the main clickable object:</p>
-                    <div class="code-block mb-3">
-                        <pre>-- Create a basic cookie model
-local cookie = Instance.new("Part")
-cookie.Name = "Cookie"
-cookie.Size = Vector3.new(4, 1, 4)
-cookie.Shape = Enum.PartType.Cylinder
-cookie.BrickColor = BrickColor.new("Brown")
-cookie.Material = Enum.Material.Sand
-cookie.Anchored = true
-cookie.Parent = workspace
--- Add a click detector
-local clickDetector = Instance.new("ClickDetector")
-clickDetector.Parent = cookie</pre>
                     </div>
                 </div>
-                <div class="mb-6">
-                    <h4 class="font-bold text-lg mb-2 text-gray-800">2. Setup Player Data</h4>
-                    <p class="text-gray-700 mb-3">Create a data saving system to track cookies clicked and skins unlocked:</p>
-                    <div class="code-block mb-3">
-                        <pre>-- Data saving setup
-local DataStoreService = game:GetService("DataStoreService")
-local cookieData = DataStoreService:GetDataStore("CookieData")
-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
-    -- Load player data
-    local success, err = pcall(function()
-        local data = cookieData:GetAsync(player.UserId.."_data")
-        if data then
-            cookies.Value = data.cookies or 0
-            -- Load skins data here
-        end
-    end)
-    if not success then
-        warn("Error loading data: "..err)
-    end
-end)
-game.Players.PlayerRemoving:Connect(function(player)
-    local data = {
-        cookies = player.leaderstats.Cookies.Value,
-        -- Add skins data here
-    }
-    local success, err = pcall(function()
-        cookieData:SetAsync(player.UserId.."_data", data)
-    end)
-    if not success then
-        warn("Error saving data: "..err)
-    end
-end)</pre>
                     </div>
                 </div>
             </div>
-            <!-- Clicker Mechanics Tab -->
-            <div id="clicker" class="tab-content">
-                <h3 class="text-xl font-bold mb-4 text-gray-800">Clicker Mechanics</h3>
-                <div class="mb-6">
-                    <h4 class="font-bold text-lg mb-2 text-gray-800">1. Basic Clicking Functionality</h4>
-                    <p class="text-gray-700 mb-3">Implement the core clicking mechanic that increases the player's cookie count:</p>
-                    <div class="code-block mb-3">
-                        <pre>-- Cookie click functionality
 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 leaderstats then
-        local cookies = leaderstats:FindFirstChild("Cookies")
-        if cookies then
-            -- Increment cookie count
-            cookies.Value = cookies.Value + 1
-            -- Visual feedback
-            local effect = Instance.new("ParticleEmitter")
-            effect.Texture = "rbxassetid://9430770660" -- Cookie crumb texture
-            effect.LightEmission = 1
-            effect.Size = NumberSequence.new(0.5)
-            effect.Lifetime = NumberRange.new(0.5)
-            effect.Speed = NumberRange.new(5)
-            effect.EmissionDirection = Enum.NormalId.Top
-            effect.Parent = cookie
-            game.Debris:AddItem(effect, 0.5)
-        end
-    end
-end)</pre>
-                    </div>
-                </div>
-                <div class="mb-6">
-                    <h4 class="font-bold text-lg mb-2 text-gray-800">2. Auto-Clickers and Upgrades</h4>
-                    <p class="text-gray-700 mb-3">Add upgrades that automatically generate cookies over time:</p>
-                    <div class="code-block mb-3">
-                        <pre>-- Auto-clicker system
-local autoClickers = {
-    {name = "Grandma", cost = 100, rate = 1},
-    {name = "Oven", cost = 500, rate = 5},
-    {name = "Factory", cost = 3000, rate = 20}
-}
-local function setupAutoClicker(player, upgrade)
-    while player and player.Parent do
-        local leaderstats = player:FindFirstChild("leaderstats")
-        if leaderstats then
-            local cookies = leaderstats:FindFirstChild("Cookies")
-            if cookies then
-                cookies.Value = cookies.Value + upgrade.rate
-            end
-        end
-        wait(1) -- Rate per second
-    end
-end
--- Example of purchasing an upgrade
-local function buyUpgrade(player, upgradeName)
-    local upgrade
-    for _, u in ipairs(autoClickers) do
-        if u.name == upgradeName then
-            upgrade = u
-            break
-        end
-    end
-    if not upgrade then return end
-    local leaderstats = player:FindFirstChild("leaderstats")
-    if leaderstats then
-        local cookies = leaderstats:FindFirstChild("Cookies")
-        if cookies and cookies.Value >= upgrade.cost then
-            cookies.Value = cookies.Value - upgrade.cost
-            coroutine.wrap(setupAutoClicker)(player, upgrade)
-            return true
-        end
-    end
-    return false
-end</pre>
-                    </div>
-                </div>
-            </div>
-            <!-- Cookie Skins Tab -->
-            <div id="skins" class="tab-content">
-                <h3 class="text-xl font-bold mb-4 text-gray-800">Cookie Customization</h3>
-                <div class="mb-6">
-                    <h4 class="font-bold text-lg mb-2 text-gray-800">1. Basic Skin System</h4>
-                    <p class="text-gray-700 mb-3">Implement a system to change the cookie's appearance:</p>
-                    <div class="code-block mb-3">
-                        <pre>-- Cookie skin system
-local skins = {
-    default = {color = Color3.fromRGB(139, 69, 19), texture = ""},
-    chocolate = {color = Color3.fromRGB(60, 35, 10), texture = "rbxassetid://9430770660"},
-    strawberry = {color = Color3.fromRGB(222, 111, 161), texture = "rbxassetid://9430770777"},
-    // Add more skins here
-}
-local function applySkin(player, skinName)
-    local skin = skins[skinName]
-    if not skin then return end
-    -- Save to player data (not shown here)
-    -- Apply to cookie
-    local cookie = workspace:FindFirstChild("Cookie")
-    if cookie then
-        cookie.BrickColor = BrickColor.new(skin.color)
-        if skin.texture ~= "" then
-            local decal = Instance.new("Decal")
-            decal.Texture = skin.texture
-            decal.Face = Enum.NormalId.Top
-            decal.Parent = cookie
-        else
-            -- Remove existing decals
-            for _, child in ipairs(cookie:GetChildren()) do
-                if child:IsA("Decal") then
-                    child:Destroy()
-                end
-            end
-        end
     end
-end</pre>
-                    </div>
                 </div>
-                <div class="mb-6">
-                    <h4 class="font-bold text-lg mb-2 text-gray-800">2. Flag-Themed Cookie Skins</h4>
-                    <p class="text-gray-700 mb-3">Create country flag skins that players can unlock:</p>
-                    <div class="flag-grid mb-4">
-                        <div class="skin-preview bg-white border rounded p-2">
-                            <div class="w-full h-16 bg-gradient-to-r from-blue-900 to-white to-red-600 mb-1"></div>
-                            <p class="text-xs text-center">France</p>
-                        </div>
-                        <div class="skin-preview bg-white border rounded p-2">
-                            <div class="w-full h-16 bg-gradient-to-b from-red-600 to-white to-red-600 mb-1"></div>
-                            <p class="text-xs text-center">Austria</p>
-                        </div>
-                        <div class="skin-preview bg-white border rounded p-2">
-                            <div class="w-full h-16 bg-gradient-to-b from-yellow-400 to-blue-600 mb-1"></div>
-                            <p class="text-xs text-center">Ukraine</p>
                         </div>
-                        <div class="skin-preview bg-white border rounded p-2">
-                            <div class="w-full h-16 bg-gradient-to-b from-green-600 to-white to-red-600 mb-1"></div>
-                            <p class="text-xs text-center">Italy</p>
                         </div>
-                        <div class="skin-preview bg-white border rounded p-2">
-                            <div class="w-full h-16 bg-gradient-to-b from-red-600 to-yellow-400 mb-1"></div>
-                            <p class="text-xs text-center">Spain</p>
-                        </div>
-                    </div>
-                    <div class="code-block mb-3">
-                        <pre>-- Flag skins implementation
-local flagSkins = {
-    france = {
-        colors = {
-            Color3.fromRGB(0, 35, 149), -- Blue
-            Color3.fromRGB(255, 255, 255), -- White
-            Color3.fromRGB(237, 41, 57) -- Red
-        },
-        pattern = "vertical" -- or "horizontal"
-    },
-    // Add more flag skins here
-}
-local function applyFlagSkin(player, flagName)
-    local flag = flagSkins[flagName]
-    if not flag then return end
-    local cookie = workspace:FindFirstChild("Cookie")
-    if not cookie then return end
-    -- Clear existing decals
-    for _, child in ipairs(cookie:GetChildren()) do
-        if child:IsA("Decal") then
-            child:Destroy()
-        end
-    end
-    -- Apply flag pattern
-    if flag.pattern == "vertical" then
-        local partWidth = cookie.Size.X / #flag.colors
-        for i, color in ipairs(flag.colors) do
-            local part = Instance.new("Part")
-            part.Size = Vector3.new(partWidth, cookie.Size.Y, cookie.Size.Z)
-            part.Position = cookie.Position + Vector3.new(
-                -cookie.Size.X/2 + partWidth/2 + (i-1)*partWidth,
-                0,
-                0
-            )
-            part.BrickColor = BrickColor.new(color)
-            part.Anchored = true
-            part.Parent = cookie
-        end
-    else
-        -- Horizontal pattern implementation
-    end
-end</pre>
                     </div>
                 </div>
             </div>
-            <!-- Leaderboards Tab -->
-            <div id="leaderboard" class="tab-content">
-                <h3 class="text-xl font-bold mb-4 text-gray-800">Global Leaderboards</h3>
-                <div class="mb-6">
-                    <h4 class="font-bold text-lg mb-2 text-gray-800">1. Global Leaderboard Setup</h4>
-                    <p class="text-gray-700 mb-3">Create a global leaderboard to show top players worldwide:</p>
-                    <div class="code-block mb-3">
-                        <pre>-- Global leaderboard system
-local DataStoreService = game:GetService("DataStoreService")
-local leaderboardStore = DataStoreService:GetOrderedDataStore("GlobalCookieLeaderboard")
-local function updateLeaderboard()
-    -- Get top 10 players
-    local success, data = pcall(function()
-        return leaderboardStore:GetSortedAsync(false, 10)
-    end)
-    if success and data then
-        local leaderboardGui = game.ServerStorage:FindFirstChild("LeaderboardGui")
-        if leaderboardGui then
-            -- Clear existing entries
-            local frame = leaderboardGui:FindFirstChild("Frame")
-            if frame then
-                frame:ClearAllChildren()
-                -- Add header
-                local header = Instance.new("TextLabel")
-                header.Text = "TOP COOKIE CLICKERS"
-                header.Font = Enum.Font.GothamBold
-                header.TextSize = 18
-                header.TextColor3 = Color3.new(1, 1, 1)
-                header.BackgroundTransparency = 1
-                header.Size = UDim2.new(1, 0, 0, 30)
-                header.Parent = frame
-                -- Add entries
-                local entries = data:GetCurrentPage()
-                for rank, entry in ipairs(entries) do
-                    local playerName
-                    local success, result = pcall(function()
-                        return game:GetService("Players"):GetNameFromUserIdAsync(entry.key)
-                    end)
-                    if success then
-                        playerName = result
-                    else
-                        playerName = "Player "..entry.key
-                    end
-                    local entryFrame = Instance.new("Frame")
-                    entryFrame.BackgroundTransparency = 0.8
-                    entryFrame.BackgroundColor3 = rank % 2 == 0 and Color3.new(0.2, 0.2, 0.2) or Color3.new(0.3, 0.3, 0.3)
-                    entryFrame.Size = UDim2.new(1, 0, 0, 30)
-                    entryFrame.Position = UDim2.new(0, 0, 0, 30 + (rank-1)*30)
-                    entryFrame.Parent = frame
-                    local rankLabel = Instance.new("TextLabel")
-                    rankLabel.Text = rank.."."
-                    rankLabel.Font = Enum.Font.Gotham
-                    rankLabel.TextSize = 14
-                    rankLabel.TextColor3 = Color3.new(1, 1, 1)
-                    rankLabel.BackgroundTransparency = 1
-                    rankLabel.Size = UDim2.new(0.1, 0, 1, 0)
-                    rankLabel.Parent = entryFrame
-                    local nameLabel = Instance.new("TextLabel")
-                    nameLabel.Text = playerName
-                    nameLabel.Font = Enum.Font.Gotham
-                    nameLabel.TextSize = 14
-                    nameLabel.TextColor3 = Color3.new(1, 1, 1)
-                    nameLabel.BackgroundTransparency = 1
-                    nameLabel.Size = UDim2.new(0.6, 0, 1, 0)
-                    nameLabel.Position = UDim2.new(0.1, 0, 0, 0)
-                    nameLabel.Parent = entryFrame
-                    local scoreLabel = Instance.new("TextLabel")
-                    scoreLabel.Text = tostring(entry.value)
-                    scoreLabel.Font = Enum.Font.GothamBold
-                    scoreLabel.TextSize = 14
-                    scoreLabel.TextColor3 = Color3.new(1, 0.8, 0)
-                    scoreLabel.BackgroundTransparency = 1
-                    scoreLabel.Size = UDim2.new(0.3, 0, 1, 0)
-                    scoreLabel.Position = UDim2.new(0.7, 0, 0, 0)
-                    scoreLabel.Parent = entryFrame
-                end
-            end
-        end
-    end
-end
--- Update leaderboard periodically
-while true do
-    updateLeaderboard()
-    wait(60) -- Update every minute
-end</pre>
-                    </div>
-                </div>
-                <div class="mb-6">
-                    <h4 class="font-bold text-lg mb-2 text-gray-800">2. Updating Player Scores</h4>
-                    <p class="text-gray-700 mb-3">Update the global leaderboard when players earn cookies:</p>
-                    <div class="code-block mb-3">
-                        <pre>-- Update player score in global leaderboard
 game.Players.PlayerAdded:Connect(function(player)
-    local leaderstats = player:WaitForChild("leaderstats")
-    local cookies = leaderstats:WaitForChild("Cookies")
-    cookies.Changed:Connect(function(value)
-        -- Update global leaderboard
-        local success, err = pcall(function()
-            leaderboardStore:SetAsync(player.UserId, value)
-        end)
-        if not success then
-            warn("Error updating leaderboard: "..err)
-        end
-    end)
 end)</pre>
-                    </div>
                 </div>
             </div>
         </section>
-        <!-- Monetization Tips -->
-        <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">Monetization Strategies</h2>
             <div class="grid md:grid-cols-2 gap-6">
-                <div class="bg-green-50 border border-green-200 rounded-lg p-4">
-                    <h3 class="font-bold text-green-800 mb-3"><i class="fas fa-tag mr-2"></i>Game Passes</h3>
                     <ul class="list-disc pl-5 space-y-1 text-gray-700">
-                        <li><strong>Double Click Power</strong> - 2x cookies per click (200 Robux)</li>
-                        <li><strong>Golden Cookie Skin</strong> - Exclusive golden cookie (150 Robux)</li>
-                        <li><strong>Auto-Clicker Boost</strong> - 2x auto-clicker speed (300 Robux)</li>
                     </ul>
                 </div>
-                <div class="bg-purple-50 border border-purple-200 rounded-lg p-4">
-                    <h3 class="font-bold text-purple-800 mb-3"><i class="fas fa-shopping-cart mr-2"></i>Developer Products</h3>
                     <ul class="list-disc pl-5 space-y-1 text-gray-700">
-                        <li><strong>Flag Skin Pack</strong> - 5 country flag skins (50 Robux)</li>
-                        <li><strong>Premium Flag Pack</strong> - 10 rare flag skins (100 Robux)</li>
-                        <li><strong>Cookie Booster</strong> - 1 hour of 3x cookies (25 Robux)</li>
                     </ul>
                 </div>
             </div>
         </section>
-        <!-- Final Tips -->
         <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 Tips</h2>
             <div class="space-y-4">
                 <div class="flex items-start">
@@ -574,7 +463,7 @@ end)</pre>
                         <i class="fas fa-check-circle text-amber-700"></i>
                     </div>
                     <div class="ml-3">
-                        <p class="text-amber-900 font-medium">Start with basic functionality first, then add skins and leaderboards</p>
                     </div>
                 </div>
@@ -583,7 +472,7 @@ end)</pre>
                         <i class="fas fa-check-circle text-amber-700"></i>
                     </div>
                     <div class="ml-3">
-                        <p class="text-amber-900 font-medium">Test your game thoroughly before publishing</p>
                     </div>
                 </div>
@@ -592,7 +481,7 @@ end)</pre>
                         <i class="fas fa-check-circle text-amber-700"></i>
                     </div>
                     <div class="ml-3">
-                        <p class="text-amber-900 font-medium">Promote your game on social media and Roblox groups</p>
                     </div>
                 </div>
@@ -601,7 +490,7 @@ end)</pre>
                         <i class="fas fa-check-circle text-amber-700"></i>
                     </div>
                     <div class="ml-3">
-                        <p class="text-amber-900 font-medium">Update regularly with new skins and features to keep players engaged</p>
                     </div>
                 </div>
             </div>
@@ -609,46 +498,44 @@ end)</pre>
         <!-- Footer -->
         <footer class="mt-12 text-center text-gray-600">
-            <p>© 2023 Roblox Cookie Clicker Guide | Created with <i class="fas fa-cookie-bite text-amber-600"></i> for aspiring developers</p>
         </footer>
     </div>
     <script>
-        // Tab functionality
-        document.querySelectorAll('.tab-btn').forEach(btn => {
-            btn.addEventListener('click', () => {
-                // Remove active class from all buttons
-                document.querySelectorAll('.tab-btn').forEach(b => {
-                    b.classList.remove('border-b-2', 'border-amber-500', 'text-amber-600');
-                });
-                // Add active class to clicked button
-                btn.classList.add('border-b-2', 'border-amber-500', 'text-amber-600');
-                // Hide all tab contents
-                document.querySelectorAll('.tab-content').forEach(tab => {
-                    tab.classList.remove('active');
-                });
-                // Show corresponding tab
-                const tabId = btn.getAttribute('data-tab');
-                document.getElementById(tabId).classList.add('active');
             });
         });
-        // Preview skin hover effect
-        document.querySelectorAll('.skin-preview').forEach(skin => {
-            skin.addEventListener('mouseenter', () => {
-                skin.style.transform = 'scale(1.1)';
-                skin.style.zIndex = '10';
-                skin.style.boxShadow = '0 10px 15px -3px rgba(0, 0, 0, 0.2)';
-            });
-            skin.addEventListener('mouseleave', () => {
-                skin.style.transform = 'scale(1)';
-                skin.style.zIndex = '1';
-                skin.style.boxShadow = 'none';
             });
         });
     </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>

 <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>
         <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">
                         <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>
                         <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>
                         <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>
                         <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>
         <!-- 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>