{% extends "bases/base.html" %}

{% block title %}SmileOS 2.0{% endblock %}
{% block description %}SmileOS 2.0{% endblock %}

{% block head %}
<link rel="stylesheet" href="/static/css/terminal.css">
{% endblock %}

{% block content %}
<section id="terminal">
    <div class="smileos-header">
        <img src="/static/content/smileos/SmileOS_2_icon_smile.webp" alt="smile">
        SmileOS 2.0
        <img src="/static/content/smileos/SmileOS_2_top_button_5.png" alt="minimize" style="margin-left: auto;">
        <img src="/static/content/smileos/SmileOS_2_top_button_4.png" alt="maximize">
        <img src="/static/content/smileos/SmileOS_2_top_button_3.png" alt="close">
    </div>
    <div id="terminal-container">
        <img src="/static/content/smileos/SmileOS2.webp" alt="logo" id="smileos-logo">
        <div id="terminal-buttons">
            <button class="terminal-button" id="smileos-tip">
                Tip of the Day
            </button>
            <button class="terminal-button" id="smileos-snake">
                Snake
            </button>
            <button class="terminal-button" id="smileos-leaderboard">
                Leaderboard
            </button>
            <button class="terminal-button" id="smileos-about">
                About
            </button>
        </div>
        <div id="terminal-window">
            <div class="smileos-header">
                <img src="/static/content/smileos/SmileOS_2_icon_tip.webp" alt="tip">
                <span id="smileos-window-title">Tip of the Day</span>
                <img src="/static/content/smileos/SmileOS_2_top_button_5.png" alt="minimize" style="margin-left: auto;">
                <img src="/static/content/smileos/SmileOS_2_top_button_4.png" alt="maximize">
                <img src="/static/content/smileos/SmileOS_2_top_button_3.png" alt="close">
            </div>
            <div id="window-container">
                <div id="window-content">
                    <span id="smileos-window-content"><span class="red">SLAM BOUNCING</span>: Jump immediately after landing from a <span class="red">ground slam</span> to jump higher. The longer the ground slam fall, the higher the bounce.</span>
                </div>
            </div>
        </div>
    </div>
</section>
<section>
    <p>
    Note: this page has background music, you may have to allow the music in the browser and refesh to let it play, or you can try 
    press <a id="smileos-restart-music">this</a> to restart it
    </p>
</section>
{% endblock %}

{% block scripts %}
<script src="/static/js/smileos.js"></script>
{% endblock %}