app.py

import gradio as gr
import random

css = """
#logo {
    position: relative;
    top: 10px;
    right: 0px;
    width: 150px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

body {
    background-color: var(--background-color);
    font-family: 'Comic Sans MS', cursive, sans-serif;
}

#guess-input {
    width: 100%;
}

body.dark-mode {
    --background-color: #333;
    --text-color: white;
}

body.light-mode {
    --background-color: #f0f8ff;
    --text-color: black;
}

#output-text {
    font-size: 3.5em;  /* Larger text for result output */
    color: var(--text-color);  /* Dynamic text color */
}

#attempts-text {
    font-size: 2em;  /* Larger size for attempts left */
    color: var(--text-color);  /* Dynamic text color */
}

p {
    font-size: 2em;  /* Larger size for "Aim higher!" or similar messages */
    color: var(--text-color);  /* Dynamic text color */
}

@keyframes backgroundAnimation {
    0% { background-color: #1e90ff; }
    50% { background-color: #ff6347; }
    100% { background-color: #1e90ff; }
}

body.animated-background {
    animation: backgroundAnimation 10s infinite;
}

#toggle-theme-button {
    font-size: 1.2em;
    padding: 10px 20px;
    margin-top: 20px;
    cursor: pointer;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
}

#toggle-theme-button:hover {
    background-color: #f0f0f0;
}
"""

# JavaScript for theme toggle embedded directly in HTML
js = """
<script>
function toggleTheme() {
    var body = document.body;
    if (body.classList.contains('dark-mode')) {
        body.classList.remove('dark-mode');
        body.classList.add('light-mode');
    } else {
        body.classList.remove('light-mode');
        body.classList.add('dark-mode');
    }
}
</script>
"""

def guess_number_wrapper(guess, target_number, num_attempts):
    max_attempts = 10
    num_attempts += 1
    attempts_left = max_attempts - num_attempts
    too_small_messages = [
        "Too small!",
        "Your guess is too low!",
        "Aim higher!",
        "Think bigger!",
        "Not quite, try a larger number!"
    ]
    too_big_messages = [
        "Too big!",
        "Whoa! That's too high!",
        "Aim lower!",
        "Think smaller!",
        "Not quite, try a smaller number!"
    ]
    if num_attempts > max_attempts:
        message = f"<p style='color:red;'>😞 Sorry, you've reached the maximum number of attempts! The number was {target_number}</p>"
        attempts_text = "Attempts left: 0"
    elif guess == target_number:
        message = f"<p class='win-message'>🎉 Congratulations! You've guessed the number in {num_attempts} tries!</p>"
        attempts_text = f"Attempts left: {attempts_left}"
    elif guess < target_number:
        message = f"<p style='color:blue;'>{random.choice(too_small_messages)}</p>"
        attempts_text = f"Attempts left: {attempts_left}"
    else:
        message = f"<p style='color:orange;'>{random.choice(too_big_messages)}</p>"
        attempts_text = f"Attempts left: {attempts_left}"
    return message, target_number, num_attempts, attempts_text

def reset_game():
    target_number = random.randint(1, 1000)
    num_attempts = 0
    message = "<p>Game has been reset. Guess a number between 1 and 1000.</p>"
    attempts_text = "Attempts left: 10"
    return message, target_number, num_attempts, attempts_text

with gr.Blocks(css=css) as demo:
    target_number = gr.State(random.randint(1, 1000))
    num_attempts = gr.State(0)

    logo = gr.Image(value="bidc.png", show_label=False, elem_id="logo")

    gr.Markdown("# 🎲 Guess the Number Game")
    gr.Markdown("Guess a number between **1** and **1000**. You have **10** attempts.")

    with gr.Row():
        guess_input = gr.Number(label="Your Guess", value=0, elem_id="guess-input")
        submit_button = gr.Button("Submit")
        reset_button = gr.Button("Reset")

    output_text = gr.HTML(label="Result", elem_id="output-text")
    attempts_text = gr.Markdown("Attempts left: 10", elem_id="attempts-text")

    submit_button.click(
        fn=guess_number_wrapper,
        inputs=[guess_input, target_number, num_attempts],
        outputs=[output_text, target_number, num_attempts, attempts_text]
    )

    reset_button.click(
        fn=reset_game,
        inputs=[],
        outputs=[output_text, target_number, num_attempts, attempts_text]
    )

    # Add Dark/Light mode toggle button using JS embedded in HTML
    gr.HTML(f'''
        {js}
        <button id="toggle-theme-button" onclick="toggleTheme()" style="font-size: 1.2em; padding: 10px 20px; margin-top: 20px; cursor: pointer; background-color: #fff; border: 1px solid #ddd; border-radius: 8px;">Toggle Dark/Light Mode</button>
    ''')

demo.launch()