Below is the source code for the first draft of a game called "Soda Clicker", made with the Sveltekit framework. The UI is too simple. Take a look at the source code, and provide changes to make the UI more complex, beautiful, interesting, and visually appealing:

<script>
    import { fade, fly } from "svelte/transition";
    import { onMount } from "svelte";

    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;

    function activateHappyHour() {
        if (cash >= happyHourCost && !happyHourActive) {
            cash -= happyHourCost;
            happyHourActive = true;
            setTimeout(() => {
                happyHourActive = false;
            }, 60000); // Active for 60 seconds
            calculateSodaPerSecond(); // Recalculate sodaPerSecond
        }
    }

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

    $: if (bartenders >= 10 && !showSecretUpgrade) {
        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;
    }

    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;
        }

        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>

<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}</span
                >
            </p>
        </div>
    </div>

    <!-- Main Content -->
    <main>
        <!-- Display resources -->
        <div class="section resources">
            <p>Soda: <span transition:fade>{soda}</span></p>
            <p>Cash: $<span transition:fade>{cash}</span></p>
        </div>

        <!-- Actions -->
        <div class="section actions">
            <!-- Inline SVG Soda Bottle -->
            <button class="soda-image" on:click={makeSoda}>
                <svg viewBox="0 0 100 200">
                    <!-- Bottle Outline -->
                    <path
                        d="M50 10 L65 50 L65 170 L35 170 L35 50 Z"
                        fill="#222"
                        stroke="#e91e63"
                        stroke-width="2"
                    />
                    <!-- Soda Fill -->
                    <rect x="37" y="90" width="26" height="80" fill="#e91e63" />
                    <!-- Bottle Cap -->
                    <rect x="45" y="5" width="10" height="10" fill="#e91e63" />
                    <!-- Label -->
                    <ellipse
                        cx="50"
                        cy="110"
                        rx="12"
                        ry="20"
                        fill="#fff"
                        opacity="0.2"
                    />
                </svg>
            </button>
        </div>
        <p>Click the soda bottle to make more!</p>
        <button on:click={sellSoda}>Sell All Soda</button>

        <!-- Upgrades -->
        <div class="section upgrades">
            <div>
                <button on:click={activateHappyHour} disabled={happyHourActive}>
                    Activate Happy Hour (Cost: ${happyHourCost})
                </button>
                {#if happyHourActive}
                    <p class="happy-hour">
                        Happy Hour is active! Production is doubled for a
                        limited time.
                    </p>
                {/if}
            </div>
            <h2>Upgrades</h2>
            {#if bartenderUnlocked}
                <div class="upgrade-item" in:fly={{ y: 20, duration: 500 }}>
                    <button on:click={buyBartender}>
                        Hire Fizzician (Cost: ${bartendersCost}) - You have {bartenders}
                    </button>
                    <p>A master of bubbles, shakes up soda faster!</p>
                </div>
                <hr />
            {/if}

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

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

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

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

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

<style>
    /* Dark mode aesthetic with stylish look */
    :global(body) {
        background-color: #121212;
        color: #e0e0e0;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        margin: 0;
        padding: 0;
    }
    /* Title Bar Styles */
    .title-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #1e1e1e;
        padding: 10px 20px;
        border-bottom: 2px solid #e91e63;
    }

    .title-bar h1 {
        margin: 0;
        font-size: 2em;
        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: 800px;
        margin: auto;
        text-align: center;
        padding: 20px;
    }
    h1 {
        font-size: 3em;
        margin-bottom: 10px;
        color: #e91e63;
        text-shadow: 0 0 10px rgba(233, 30, 99, 0.7);
    }
    .emoji {
        font-size: 1.2em;
    }
    .resources,
    .actions,
    .upgrades {
        margin: 30px 0;
    }
    .resources p {
        font-size: 1.5em;
        margin: 10px 0;
    }
    .soda-image {
        cursor: pointer;
        width: 150px; /* Adjusted from 150px to 64px */
        margin: 20px auto;
        transition: transform 0.2s;
    }
    .soda-image:hover {
        transform: scale(1.1);
    }
    .actions p {
        margin: 15px 0;
    }
    button {
        padding: 12px 25px;
        margin: 10px;
        background-color: #0009be;
        border: none;
        color: #fff;
        border-radius: 30px;
        font-weight: bold;
        text-transform: uppercase;
        font-size: 1em;
        cursor: pointer;
        border-radius: 5px;
        transition:
            background-color 0.2s,
            box-shadow 0.2s;
    }

    button:active:not(:disabled) {
        transform: translateY(0);
    }
    button:disabled {
        background-color: #555;
        cursor: not-allowed;
    }
    button:hover:not(:disabled) {
        background-color: #d81b60;
        transform: translateY(-2px);
        box-shadow: 0 0 10px rgba(216, 27, 96, 0.7);
    }
    h2 {
        font-size: 2em;
        margin-bottom: 20px;
        color: #ff4081;
        text-shadow: 0 0 10px rgba(255, 64, 129, 0.7);
    }
    .upgrade-item {
        background-color: #1e1e1e;
        padding: 20px;
        margin: 15px 0;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
    }
    .upgrade-item p {
        margin: 10px 0 0 0;
        color: #b0bec5;
    }
    .happy-hour {
        color: #ffca28;
        font-weight: bold;
        margin-top: 10px;
        text-shadow: 0 0 10px rgba(255, 202, 40, 0.7);
    }
    /* 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;
    }
    .reset-button {
        margin-top: 40px;
        text-align: center;
    }
    .reset-button button {
        background-color: #f44336;
        border-radius: 30px;
        font-weight: bold;
        text-transform: uppercase;
    }
    .reset-button button:hover:not(:disabled) {
        background-color: #e53935;
        box-shadow: 0 0 10px rgba(229, 57, 53, 0.7);
        transform: translateY(-2px);
    }
    .reset-button button:active:not(:disabled) {
        transform: translateY(0);
    }
    .section {
        background-color: #1e1e1e;
        margin: 20px 0;
        padding: 20px;
        border: 1px solid #333;
        border-radius: 10px;
    }
    .section h2 {
        border-bottom: 1px solid #333;
        padding-bottom: 10px;
        margin-bottom: 20px;
    }
    main {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .section {
        flex: 1 1 100%;
    }
    .soda-image svg {
        filter: drop-shadow(0 0 5px #e91e63);
    }
    @media (min-width: 768px) {
        .section {
            flex: 1 1 calc(50% - 20px);
            margin: 10px;
        }
    }
</style>