Rewrite the following svelte application in a single HTML page with embedded CSS and javascript. Look and behavior should be identical. Replace all use of png images with simple emojis:

<script>
    import { fly, fade } from "svelte/transition";
    import { cubicOut } from 'svelte/easing';
    import { onMount } from "svelte";
    import { tweened } from 'svelte/motion';
    // import { time } from 'svelte/animation';

    // Declare the sodaImage variable
    let sodaImage;

    let bartenderUnlocked = false;
    let managerUnlocked = false;
    let sommelierUnlocked = false;
    let mogulUnlocked = false;
    let showSecretUpgrade = false;
    let boughtSecretUpgrade = false;

    $: if (!bartenderUnlocked && cash >= bartendersCost) {
        bartenderUnlocked = true;
    }

    $: if (!managerUnlocked && cash >= managersCost) {
        managerUnlocked = true;
    }

    $: if (!sommelierUnlocked && cash >= sommeliersCost) {
        sommelierUnlocked = true;
    }

    $: if (!mogulUnlocked && cash >= mogulsCost) {
        mogulUnlocked = true;
    }

    // Resources
    let soda = 0;
    let cash = 0;

    // Rates
    let sodaPerClick = 1;
    let sodaPerSecond = 0;

    // Upgrades
    let bartenders = 0;
    let bartendersCost = 10;

    let managers = 0;
    let managersCost = 100;

    let sommeliers = 0;
    let sommeliersCost = 1000;

    let moguls = 0;
    let mogulsCost = 5000;

    let happyHourActive = false;
    let happyHourCost = 2500;

    // Progress bars
    let happyHourProgress = 0;
    let happyHourDuration = 60000; // 60 seconds
    let happyHourRemaining = 0;

    function activateHappyHour() {
        if (cash >= happyHourCost && !happyHourActive) {
            cash -= happyHourCost;
            happyHourActive = true;
            happyHourRemaining = happyHourDuration;
            const startTime = Date.now();

            const interval = setInterval(() => {
                const elapsed = Date.now() - startTime;
                happyHourRemaining = happyHourDuration - elapsed;
                happyHourProgress = (elapsed / happyHourDuration) * 100;

                if (elapsed >= happyHourDuration) {
                    clearInterval(interval);
                    happyHourActive = false;
                    happyHourProgress = 0;
                }
            }, 100);

            calculateSodaPerSecond();
        }
    }

    $: sodaPerClickBonus = happyHourActive ? 2 : 1;
    $: sodaPerSecondBonus = happyHourActive ? 2 : 1;

    $: if (bartenders >= 10 && !boughtSecretUpgrade) {
        showSecretUpgrade = true;
    }

    function buySecretUpgrade() {
        if (cash >= 10000) {
            cash -= 10000;
            sodaPerSecond += 500;
            alert(
                "You unlocked the Secret Formula! Soda production skyrockets!",
            );
            showSecretUpgrade = false;
            boughtSecretUpgrade = true;
            calculateSodaPerSecond(); // Recalculate sodaPerSecond
        }
    }

    function buySommelier() {
        if (cash >= sommeliersCost) {
            cash -= sommeliersCost;
            sommeliers += 1;
            sodaPerSecond += 20;
            sommeliersCost = Math.floor(sommeliersCost * 1.15);

            calculateSodaPerSecond(); // Recalculate sodaPerSecond
        }
    }

    function buyMogul() {
        if (cash >= mogulsCost) {
            cash -= mogulsCost;
            moguls += 1;
            sodaPerSecond += 100;
            mogulsCost = Math.floor(mogulsCost * 1.15);

            calculateSodaPerSecond(); // Recalculate sodaPerSecond
        }
    }

    // Functions
    function makeSoda() {
        soda += sodaPerClick * sodaPerClickBonus;

        // Animate the soda bottle
        animateBottle();
    }

    let bottleScale = tweened(1, {
        duration: 100,
        easing: cubicOut
    });

    function animateBottle() {
        bottleScale.set(1.1);
        setTimeout(() => {
            bottleScale.set(1);
        }, 100);
    }

    function sellSoda() {
        cash += soda;
        soda = 0;
    }

    function buyBartender() {
        if (cash >= bartendersCost) {
            cash -= bartendersCost;
            bartenders += 1;
            sodaPerSecond += Math.floor(1 * Math.pow(1.1, bartenders));
            bartendersCost = Math.floor(bartendersCost * 1.25);

            calculateSodaPerSecond(); // Recalculate sodaPerSecond
        }
    }

    function buyManager() {
        if (cash >= managersCost) {
            cash -= managersCost;
            managers += 1;
            sodaPerSecond += 5;
            managersCost = Math.floor(managersCost * 1.15);

            calculateSodaPerSecond(); // Recalculate sodaPerSecond
        }
    }

    function calculateSodaPerSecond() {
        sodaPerSecond = 0;

        // Calculate sodaPerSecond from bartenders
        for (let i = 1; i <= bartenders; i++) {
            sodaPerSecond += Math.floor(1 * Math.pow(1.1, i));
        }

        // Add sodaPerSecond from managers
        sodaPerSecond += managers * 5;

        // Add sodaPerSecond from sommeliers
        sodaPerSecond += sommeliers * 20;

        // Add sodaPerSecond from moguls
        sodaPerSecond += moguls * 100;

        // Add sodaPerSecond from the secret upgrade if unlocked
        if (boughtSecretUpgrade) {
            sodaPerSecond += 500; // Secret upgrade boosts production by 500
        }
    }

    // Passive soda production
    onMount(() => {
        const interval = setInterval(() => {
            soda += sodaPerSecond * sodaPerSecondBonus;
        }, 1000);

        return () => clearInterval(interval);
    });

    onMount(() => {
        const savedData = localStorage.getItem("sodaClickerData");
        if (savedData) {
            const data = JSON.parse(savedData);
            soda = data.soda || 0;
            cash = data.cash || 0;
            bartenders = data.bartenders || 0;
            bartendersCost = data.bartendersCost || 10;
            managers = data.managers || 0;
            managersCost = data.managersCost || 100;
            sommeliers = data.sommeliers || 0;
            sommeliersCost = data.sommeliersCost || 1000;
            moguls = data.moguls || 0;
            mogulsCost = data.mogulsCost || 5000;
            happyHourActive = data.happyHourActive || false;
            showSecretUpgrade = data.showSecretUpgrade || false;

            if (happyHourActive) {
                // Recalculate happy hour progress
                const elapsed = happyHourDuration - happyHourRemaining;
                happyHourProgress = (elapsed / happyHourDuration) * 100;

                const startTime = Date.now() - elapsed;
                const interval = setInterval(() => {
                    const elapsed = Date.now() - startTime;
                    happyHourRemaining = happyHourDuration - elapsed;
                    happyHourProgress = (elapsed / happyHourDuration) * 100;

                    if (elapsed >= happyHourDuration) {
                        clearInterval(interval);
                        happyHourActive = false;
                        happyHourProgress = 0;
                    }
                }, 100);
            }
        }

        calculateSodaPerSecond(); // Recalculate sodaPerSecond after loading data

        const saveInterval = setInterval(() => {
            localStorage.setItem(
                "sodaClickerData",
                JSON.stringify({
                    soda,
                    cash,
                    bartenders,
                    bartendersCost,
                    managers,
                    managersCost,
                    sommeliers,
                    sommeliersCost,
                    moguls,
                    mogulsCost,
                    happyHourActive,
                    showSecretUpgrade,
                }),
            );
        }, 5000); // Save every 5 seconds

        return () => clearInterval(saveInterval);
    });

    function resetGame() {
        // Clear saved data
        localStorage.removeItem("sodaClickerData");

        // Reset all variables to their initial values
        soda = 0;
        cash = 0;

        sodaPerClick = 1;
        sodaPerSecond = 0;

        bartenders = 0;
        bartendersCost = 10;

        managers = 0;
        managersCost = 100;

        sommeliers = 0;
        sommeliersCost = 1000;

        moguls = 0;
        mogulsCost = 5000;

        happyHourActive = false;
        happyHourCost = 2500;

        showSecretUpgrade = false;

        bartenderUnlocked = false;
        managerUnlocked = false;
        sommelierUnlocked = false;
        mogulUnlocked = false;

        // Recalculate sodaPerSecond
        calculateSodaPerSecond();
    }

    $: cashPerTick = sodaPerSecond * sodaPerSecondBonus;
</script>

<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet" />


<div class="container">
    <!-- Title Bar -->
    <div class="title-bar">
        <div class="title-bar-left">
            <h1>Soda Clicker <span class="emoji">🍹</span></h1>
        </div>
        <div class="title-bar-right">
            <p>
                <span class="emoji">💰</span> Cash per Tick: $<span>{cashPerTick.toFixed(2)}</span>
            </p>
        </div>
    </div>

    <!-- Main Content -->
    <main>
        <!-- Display resources -->
        <div class="section resources">
            <div class="resource-item">
                <div class="resource-icon">
                    <span class="emoji">🍹</span>
                </div>
                <div class="resource-info">
                    <p>Soda</p>
                    <p class="resource-count">{soda}</p>
                </div>
            </div>
            <div class="resource-item">
                <div class="resource-icon">
                    <span class="emoji">💰</span>
                </div>
                <div class="resource-info">
                    <p>Cash</p>
                    <p class="resource-count">${cash}</p>
                </div>
            </div>
        </div>

        <!-- Actions -->
        <div class="section actions">
            <button class="soda-container" on:click={makeSoda} title="Click to make soda!">
                <svg id="sodaImage" viewBox="0 0 100 300" width="150">
                    <defs>
                      <!-- Gradient for the bottle glass -->
                      <linearGradient id="glassGradient" x1="0%" y1="0%" x2="0%" y2="100%">
                        <stop offset="0%" stop-color="#d1eefc" />
                        <stop offset="50%" stop-color="#a0d8ef" stop-opacity="0.8"/>
                        <stop offset="100%" stop-color="#7bc4e3" stop-opacity="0.6"/>
                      </linearGradient>
                  
                      <!-- Gradient for the soda liquid -->
                      <linearGradient id="sodaGradient" x1="0%" y1="0%" x2="0%" y2="100%">
                        <stop offset="0%" stop-color="#f44336"/>
                        <stop offset="100%" stop-color="#b71c1c"/>
                      </linearGradient>
                  
                      <!-- Path for the wrapping text -->
                      <path id="textPath" d="
                        M30,185
                        C35,175 65,175 70,185
                      " />
                    </defs>
                  
                    <!-- Bottle Outline -->
                    <path d="
                      M50,10
                      C35,10 27.5,30 27.5,50
                      C27.5,70 20,100 20,130
                      C20,160 27.5,190 27.5,220
                      C27.5,250 42.5,270 50,270
                      C57.5,270 72.5,250 72.5,220
                      C72.5,190 80,160 80,130
                      C80,100 72.5,70 72.5,50
                      C72.5,30 65,10 50,10
                      Z
                    " fill="url(#glassGradient)" stroke="#555" stroke-width="2"/>
                  
                    <!-- Soda Fill -->
                    <path d="
                      M29,130
                      C29,160 35,190 35,220
                      C35,250 42.5,260 50,260
                      C57.5,260 65,250 65,220
                      C65,190 71,160 71,130
                      Z
                    " fill="url(#sodaGradient)" />
                  
                    <!-- Bottle Cap -->
                    <rect x="39.5" y="5" width="21" height="10" fill="#555" rx="2" ry="2" />
                  
                    <!-- Label Text -->
                    <text font-family="Impact" font-size="24" fill="blue">
                      <textPath href="#textPath" startOffset="50%" text-anchor="middle">
                        YUM
                      </textPath>
                    </text>
                  
                    <!-- Highlights -->
                    <path d="
                      M47,20
                      C42.5,20 38,50 38,80
                      C38,110 42.5,140 47,140
                    " stroke="#fff" stroke-width="2" stroke-opacity="0.2" fill="none"/>
                  
                    <path d="
                      M53,20
                      C57.5,20 62,50 62,80
                      C62,110 57.5,140 53,140
                    " stroke="#fff" stroke-width="2" stroke-opacity="0.1" fill="none"/>
                  
                    <!-- Base Reflection -->
                    <ellipse cx="50" cy="260" rx="15" ry="5" fill="#fff" opacity="0.1"/>
                  </svg>
            </button>
            <p>Click the soda bottle to make more!</p>
            <button class="sell-button" on:click={sellSoda}>Sell All Soda</button>
        </div>

        <!-- Upgrades -->
        <div class="section upgrades">
            <div class="happy-hour-container">
                <button
                    class="happy-hour-button"
                    on:click={activateHappyHour}
                    disabled={happyHourActive}
                    title="Doubles production for 60 seconds"
                >
                    Activate Happy Hour (Cost: ${happyHourCost})
                </button>
                {#if happyHourActive}
                    <div class="happy-hour">
                        <p>Happy Hour is active! Production is doubled for a limited time.</p>
                        <div class="progress-bar">
                            <div
                                class="progress"
                                style="width: {happyHourProgress}%"
                            ></div>
                        </div>
                    </div>
                {/if}
            </div>
            <h2>Upgrades</h2>
            {#if bartenderUnlocked}
                <div class="upgrade-item" in:fly={{ y: 20, duration: 500 }}>
                    <div class="upgrade-icon">
                        <img src="/images/bartender.png" alt="Fizzician" />
                    </div>
                    <div class="upgrade-info">
                        <button
                            on:click={buyBartender}
                            title="A master of bubbles, shakes up soda faster!"
                        >
                            Hire Fizzician (Cost: ${bartendersCost})
                        </button>
                        <p>You have {bartenders}</p>
                        <p class="upgrade-description">A master of bubbles, shakes up soda faster!</p>
                    </div>
                </div>
                <hr />
            {/if}

            {#if managerUnlocked}
                <div class="upgrade-item" in:fly={{ y: 20, duration: 500 }}>
                    <div class="upgrade-icon">
                        <img src="/images/manager.png" alt="Bubble Manager" />
                    </div>
                    <div class="upgrade-info">
                        <button
                            on:click={buyManager}
                            title="Keeps the fizz flowing by managing your Fizzicians."
                        >
                            Appoint Bubble Manager (Cost: ${managersCost})
                        </button>
                        <p>You have {managers}</p>
                        <p class="upgrade-description">
                            Keeps the fizz flowing by managing your Fizzicians.
                        </p>
                    </div>
                </div>
                <hr />
            {/if}

            {#if sommelierUnlocked}
                <div class="upgrade-item" in:fly={{ y: 20, duration: 500 }}>
                    <div class="upgrade-icon">
                        <img src="/images/sommelier.png" alt="Soda Sommelier" />
                    </div>
                    <div class="upgrade-info">
                        <button
                            on:click={buySommelier}
                            title="Enhances the flavor profile, attracting more customers!"
                        >
                            Hire Soda Sommelier (Cost: ${sommeliersCost})
                        </button>
                        <p>You have {sommeliers}</p>
                        <p class="upgrade-description">
                            Enhances the flavor profile, attracting more customers!
                        </p>
                    </div>
                </div>
                <hr />
            {/if}

            {#if mogulUnlocked}
                <div class="upgrade-item" in:fly={{ y: 20, duration: 500 }}>
                    <div class="upgrade-icon">
                        <img src="/images/mogul.png" alt="Soda Mogul" />
                    </div>
                    <div class="upgrade-info">
                        <button
                            on:click={buyMogul}
                            title="Big business moves that skyrocket your production!"
                        >
                            Partner with Soda Mogul (Cost: ${mogulsCost})
                        </button>
                        <p>You have {moguls}</p>
                        <p class="upgrade-description">
                            Big business moves that skyrocket your production!
                        </p>
                    </div>
                </div>
                <hr />
            {/if}

            {#if showSecretUpgrade}
                <div class="upgrade-item" in:fly={{ y: 20, duration: 500 }}>
                    <div class="upgrade-icon">
                        <img src="/images/secret_formula.png" alt="Secret Formula" />
                    </div>
                    <div class="upgrade-info">
                        <button
                            on:click={buySecretUpgrade}
                            title="Rumor has it this formula can boost your production immensely!"
                        >
                            Unlock Secret Formula (Cost: $10000)
                        </button>
                        <p class="upgrade-description">
                            Rumor has it this formula can boost your production immensely!
                        </p>
                    </div>
                </div>
                <hr />
            {/if}

            <div class="reset-button">
                <button on:click={resetGame}>Reset Game</button>
            </div>
        </div>
    </main>
</div>

<style>
    /* Import Google Font */
    :global(body) {
        background-color: #1d1f20;
        color: #e0e0e0;
        font-family: 'Montserrat', sans-serif;
        margin: 0;
        padding: 0;
    }

    /* Scrollbar styling for webkit browsers */
    ::-webkit-scrollbar {
        width: 10px;
    }
    ::-webkit-scrollbar-track {
        background: #1e1e1e;
    }
    ::-webkit-scrollbar-thumb {
        background: #e91e63;
        border-radius: 5px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: #d81b60;
    }

    /* Title Bar Styles */
    .title-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #2b2d2f;
        padding: 15px 30px;
        border-bottom: 2px solid #e91e63;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    }

    .title-bar h1 {
        margin: 0;
        font-size: 2.5em;
        color: #e91e63;
        text-shadow: 0 0 5px rgba(233, 30, 99, 0.7);
    }

    .title-bar-right p {
        margin: 0;
        font-size: 1.2em;
        color: #ffca28;
        text-shadow: 0 0 5px rgba(255, 202, 40, 0.7);
    }

    .title-bar .emoji {
        margin-right: 5px;
    }

    .container {
        max-width: 1200px;
        margin: auto;
        padding: 0 20px;
    }

    h1 {
        font-size: 3em;
        margin-bottom: 10px;
        color: #e91e63;
        text-shadow: 0 0 10px rgba(233, 30, 99, 0.7);
    }

    h2 {
        font-size: 2em;
        margin-bottom: 20px;
        color: #ff4081;
        text-shadow: 0 0 10px rgba(255, 64, 129, 0.7);
        text-align: center;
    }

    .emoji {
        font-size: 1.2em;
    }

    /* Resources Section */
    .resources {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .resource-item {
        display: flex;
        align-items: center;
        background-color: #2b2d2f;
        margin: 10px;
        padding: 15px 20px;
        border-radius: 10px;
        width: 200px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
    }

    .resource-icon {
        font-size: 2em;
        margin-right: 15px;
    }

    .resource-info {
        text-align: left;
    }

    .resource-info p {
        margin: 0;
    }

    .resource-count {
        font-size: 1.5em;
        color: #ffca28;
    }

    /* Actions Section */
    .actions {
        text-align: center;
        margin: 30px 0;
    }

    .soda-container {
        cursor: pointer;
        display: inline-block;
        transition: transform 0.2s;
        margin: 20px;
    }

    .soda-container:hover {
        transform: scale(1.05);
    }

    .actions p {
        margin: 15px 0;
    }

    .sell-button {
        background-color: #ff7043;
        border: none;
        color: #fff;
        padding: 12px 25px;
        margin: 10px;
        font-weight: bold;
        font-size: 1em;
        cursor: pointer;
        border-radius: 30px;
        transition: background-color 0.2s, transform 0.2s;
        text-transform: uppercase;
    }

    .sell-button:hover {
        background-color: #f4511e;
        transform: translateY(-2px);
        box-shadow: 0 0 10px rgba(244, 81, 30, 0.7);
    }

    /* Upgrades Section */
    .upgrades {
        margin: 30px 0;
    }

    .happy-hour-container {
        text-align: center;
        margin-bottom: 30px;
    }

    .happy-hour-button {
        background-color: #29b6f6;
        border: none;
        color: #fff;
        padding: 12px 25px;
        margin: 10px;
        font-weight: bold;
        font-size: 1em;
        cursor: pointer;
        border-radius: 30px;
        transition: background-color 0.2s, transform 0.2s;
        text-transform: uppercase;
    }

    .happy-hour-button:hover {
        background-color: #0288d1;
        transform: translateY(-2px);
        box-shadow: 0 0 10px rgba(2, 136, 209, 0.7);
    }

    .happy-hour-button:disabled {
        background-color: #555;
        cursor: not-allowed;
    }

    .happy-hour {
        margin-top: 10px;
    }

    .happy-hour p {
        color: #ffca28;
        font-weight: bold;
        text-shadow: 0 0 10px rgba(255, 202, 40, 0.7);
    }

    .progress-bar {
        background-color: #555;
        border-radius: 10px;
        overflow: hidden;
        height: 20px;
        margin: 10px auto;
        width: 80%;
    }

    .progress {
        background-color: #ffca28;
        height: 100%;
        transition: width 0.1s linear;
    }

    /* Upgrade Items */
    .upgrade-item {
        display: flex;
        align-items: center;
        background-color: #2b2d2f;
        padding: 20px;
        margin: 15px 0;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
    }

    .upgrade-icon img {
        width: 80px;
        height: 80px;
        margin-right: 20px;
    }

    .upgrade-info {
        flex: 1;
        text-align: left;
    }

    .upgrade-info button {
        background-color: #7e57c2;
        border: none;
        color: #fff;
        padding: 12px 20px;
        font-weight: bold;
        font-size: 1em;
        cursor: pointer;
        border-radius: 30px;
        transition: background-color 0.2s, transform 0.2s;
        text-transform: uppercase;
        width: 100%;
        text-align: center;
    }

    .upgrade-info button:hover {
        background-color: #5e35b1;
        transform: translateY(-2px);
        box-shadow: 0 0 10px rgba(94, 53, 177, 0.7);
    }

    .upgrade-info p {
        margin: 10px 0 0 0;
    }

    .upgrade-description {
        color: #b0bec5;
    }

    /* Reset Button */
    .reset-button {
        margin-top: 40px;
        text-align: center;
    }

    .reset-button button {
        background-color: #f44336;
        border: none;
        color: #fff;
        padding: 12px 25px;
        font-weight: bold;
        font-size: 1em;
        cursor: pointer;
        border-radius: 30px;
        transition: background-color 0.2s, transform 0.2s;
        text-transform: uppercase;
    }

    .reset-button button:hover {
        background-color: #d32f2f;
        transform: translateY(-2px);
        box-shadow: 0 0 10px rgba(211, 47, 47, 0.7);
    }

    /* General Button Styles */
    button {
        font-family: 'Montserrat', sans-serif;
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        .upgrade-item {
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .upgrade-icon img {
            margin-bottom: 15px;
        }

        .resource-item {
            width: 100%;
        }
    }
</style>