<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Sidra Nova Studio // Games</title>

<style>

/* =========================================================
   SIDRA NOVA STUDIO
   GAMES DATABASE
   WINDOWS XP / TERMINAL / RETRO WEB
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    background: #000;
}

body {

    margin: 0;
    padding: 0;

    min-height: 100vh;

    background:
        radial-gradient(
            ellipse at 50% 0%,
            #08160d 0%,
            #020502 45%,
            #000 100%
        );

    color: #b8c9be;

    font-family:
        "Courier New",
        Courier,
        monospace;

    font-size: 15px;

    line-height: 1.65;

    overflow-x: hidden;

}


/* =========================================================
   PAGE
   ========================================================= */

#page {

    width: 1050px;

    max-width:
        calc(100% - 28px);

    margin: 25px auto;

    background: #030603;

    border: 2px solid #101710;

    border-radius: 7px;

    box-shadow:

        0 0 0 1px #31503a,

        inset 1px 1px 0 #59655c,

        inset -1px -1px 0 #000,

        0 12px 50px rgba(0,0,0,.85),

        0 0 30px rgba(32,216,121,.035);

    overflow: hidden;

    position: relative;

    animation:
        boot .8s ease-out;

}


@keyframes boot {

    0% {

        opacity: 0;

        transform:
            translateY(10px);

        filter:
            brightness(1.8);

    }

    60% {

        opacity: 1;

        filter:
            brightness(1.1);

    }

    100% {

        opacity: 1;

        transform:
            translateY(0);

        filter:
            brightness(1);

    }

}


/* =========================================================
   TOP SCANNING LIGHT
   ========================================================= */

#page::before {

    content: "";

    position: absolute;

    top: 0;

    left: -30%;

    width: 30%;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #20d879,
            transparent
        );

    box-shadow:
        0 0 12px #20d879;

    animation:
        scan 7s linear infinite;

    z-index: 50;

}


@keyframes scan {

    from {
        left: -30%;
    }

    to {
        left: 130%;
    }

}


/* =========================================================
   XP MAIN TITLE BAR
   ========================================================= */

header {

    position: relative;

    min-height: 72px;

    padding:
        10px 14px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        linear-gradient(
            to bottom,
            #1d5730 0%,
            #164326 45%,
            #0b2815 100%
        );

    border-bottom:
        2px solid #020402;

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.22),

        inset 0 -1px 0 rgba(0,0,0,.8);

}


/* =========================================================
   CENTERED STUDIO NAME
   ========================================================= */

.logo-area {

    text-align:
        center;

}


.logo {

    color:
        #e2ffe9;

    font-size:
        24px;

    font-weight:
        bold;

    letter-spacing:
        4px;

    text-shadow:

        1px 1px 2px #000,

        0 0 10px rgba(32,216,121,.2);

}


.subtitle {

    margin-top:
        2px;

    color:
        #8bd5a3;

    font-size:
        10px;

    letter-spacing:
        3px;

}


/* =========================================================
   XP WINDOW BUTTONS
   ========================================================= */

.window-controls {

    position:
        absolute;

    right:
        10px;

    top:
        9px;

    display:
        flex;

    gap:
        3px;

}


.window-controls span {

    width:
        22px;

    height:
        20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #fff;

    background:
        linear-gradient(
            #438355,
            #12391f
        );

    border:
        1px solid #07130b;

    border-radius:
        3px;

    box-shadow:

        inset 1px 1px 0 rgba(255,255,255,.25),

        inset -1px -1px 0 rgba(0,0,0,.8);

    font-family:
        Arial,
        sans-serif;

    font-size:
        11px;

}


.window-controls span:last-child {

    background:
        linear-gradient(
            #5c9269,
            #163d22
        );

}


.window-controls span:hover {

    background:
        #20d879;

    color:
        #000;

}


/* =========================================================
   NAVIGATION
   ========================================================= */

nav {

    display:
        flex;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        5px;

    padding:
        8px;

    background:
        #030603;

    border-bottom:
        2px solid #111811;

    box-shadow:
        inset 0 1px 0 #3b473e;

}


nav a {

    display:
        inline-block;

    padding:
        5px 15px;

    color:
        #75cf91;

    background:
        linear-gradient(
            #102918,
            #050a07
        );

    border:
        2px solid #111711;

    border-radius:
        3px;

    box-shadow:

        inset 1px 1px 0 #526055,

        inset -1px -1px 0 #000;

    text-decoration:
        none;

    font-size:
        12px;

    transition:
        .2s ease;

}


nav a:hover {

    color:
        #e0ffe8;

    background:
        linear-gradient(
            #1a5530,
            #092112
        );

    border-color:
        #20d879;

    box-shadow:
        0 0 12px rgba(32,216,121,.15);

    transform:
        translateY(-1px);

}


nav a:active {

    transform:
        translateY(1px);

}


/* =========================================================
   MAIN
   ========================================================= */

main {

    padding:
        22px;

}


/* =========================================================
   TOP SYSTEM WINDOWS
   ========================================================= */

.system-dashboard {

    display:
        grid;

    grid-template-columns:
        1fr 1fr 1fr;

    gap:
        13px;

    margin-bottom:
        22px;

}


.system-window {

    background:
        #040704;

    border:
        2px solid #111711;

    border-radius:
        5px;

    box-shadow:

        inset 1px 1px 0 #526055,

        inset -1px -1px 0 #000,

        0 5px 18px rgba(0,0,0,.5);

    overflow:
        hidden;

    transition:
        .25s ease;

}


.system-window:hover {

    transform:
        translateY(-2px);

    border-color:
        #286f46;

    box-shadow:

        inset 1px 1px 0 #65766a,

        inset -1px -1px 0 #000,

        0 7px 22px rgba(0,0,0,.55),

        0 0 12px rgba(32,216,121,.06);

}


.window-header {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        7px 10px;

    color:
        #e0f4e5;

    background:
        linear-gradient(
            #184b29,
            #0b2815
        );

    border-bottom:
        2px solid #020402;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16);

    font-size:
        11px;

    font-weight:
        bold;

    letter-spacing:
        1.5px;

    text-shadow:
        1px 1px 2px #000;

}


.window-dot {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #20d879;

    box-shadow:
        0 0 8px rgba(32,216,121,.8);

    animation:
        pulse 2.5s infinite;

}


@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .35;
    }

}


.window-symbol {

    margin-left:
        auto;

    color:
        #6db985;

}


.window-body {

    padding:
        13px;

    min-height:
        76px;

    background:
        radial-gradient(
            ellipse at top,
            #07100a,
            #030503
        );

}


/* =========================================================
   CLOCK
   ========================================================= */

#clock {

    color:
        #20d879;

    font-size:
        25px;

    line-height:
        1.1;

    letter-spacing:
        1px;

    text-shadow:
        0 0 9px rgba(32,216,121,.3);

}


#date {

    margin-top:
        5px;

    color:
        #668572;

    font-size:
        11px;

}


/* =========================================================
   WEATHER
   ========================================================= */

#weather {

    color:
        #a8c2af;

    font-size:
        12px;

}


.weather-temp {

    color:
        #20d879;

    font-size:
        24px;

    line-height:
        1.1;

    text-shadow:
        0 0 9px rgba(32,216,121,.25);

}


/* =========================================================
   SYSTEM STATUS
   ========================================================= */

.status-line {

    display:
        flex;

    justify-content:
        space-between;

    padding:
        3px 0;

    color:
        #6d8875;

    font-size:
        11px;

}


.online {

    color:
        #20d879;

    text-shadow:
        0 0 5px rgba(32,216,121,.2);

}


/* =========================================================
   PAGE INTRO WINDOW
   ========================================================= */

.intro-window {

    margin-bottom:
        22px;

    border:
        2px solid #111711;

    border-radius:
        5px;

    overflow:
        hidden;

    box-shadow:

        inset 1px 1px 0 #526055,

        inset -1px -1px 0 #000;

}


.intro-window .window-body {

    padding:
        18px;

}


.terminal-label {

    display:
        block;

    margin-bottom:
        12px;

    padding-bottom:
        7px;

    color:
        #20d879;

    border-bottom:
        1px dotted #17452d;

    font-size:
        11px;

    letter-spacing:
        1px;

}


h1 {

    margin:
        0 0 12px;

    color:
        #dcece1;

    font-size:
        25px;

}


h1::before {

    content:
        "> ";

    color:
        #20d879;

}


.intro-text {

    color:
        #b7c8bc;

    font-size:
        15px;

}


/* =========================================================
   SECTION TITLE
   ========================================================= */

.section-window {

    margin-top:
        24px;

    border:
        2px solid #111711;

    border-radius:
        5px;

    overflow:
        hidden;

    box-shadow:

        inset 1px 1px 0 #526055,

        inset -1px -1px 0 #000;

}


.section-window > .window-header {

    padding:
        8px 11px;

}


/* =========================================================
   GAMES GRID
   ========================================================= */

.games-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        14px;

    padding:
        14px;

    background:
        #020302;

}


/* =========================================================
   GAME WINDOW
   ========================================================= */

.game {

    position:
        relative;

    min-height:
        330px;

    display:
        flex;

    flex-direction:
        column;

    background:
        linear-gradient(
            145deg,
            #07100a,
            #020402
        );

    border:
        2px solid #111711;

    border-radius:
        5px;

    overflow:
        hidden;

    box-shadow:

        inset 1px 1px 0 #4b574e,

        inset -1px -1px 0 #000,

        0 5px 18px rgba(0,0,0,.5);

    transition:
        .3s ease;

}


.game:hover {

    transform:
        translateY(-4px);

    border-color:
        #20d879;

    box-shadow:

        inset 1px 1px 0 #65766a,

        inset -1px -1px 0 #000,

        0 10px 28px rgba(0,0,0,.65),

        0 0 18px rgba(32,216,121,.08);

}


/* =========================================================
   GAME TITLE BAR
   ========================================================= */

.game-titlebar {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        7px 9px;

    color:
        #d9efdf;

    background:
        linear-gradient(
            #184c2a,
            #0b2815
        );

    border-bottom:
        2px solid #020402;

    font-size:
        11px;

    font-weight:
        bold;

    letter-spacing:
        1px;

    text-shadow:
        1px 1px 2px #000;

}


.game-titlebar .game-status {

    margin-left:
        auto;

    color:
        #5c9d70;

    font-size:
        9px;

}


/* =========================================================
   GAME IMAGE / PLACEHOLDER
   ========================================================= */

.game-image {

    width:
        100%;

    height:
        175px;

    object-fit:
        cover;

    border-bottom:
        1px solid #17452d;

    filter:
        brightness(.75)
        saturate(.7);

    transition:
        .4s ease;

}


.game:hover .game-image {

    filter:
        brightness(.95)
        saturate(.95);

}


/* =========================================================
   AGE OF FINALITY IMAGE
   ========================================================= */

.aofa-image {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    position:
        relative;

    overflow:
        hidden;

    background:

        radial-gradient(
            circle at 50% 45%,
            rgba(32,216,121,.16),
            transparent 32%
        ),

        linear-gradient(
            135deg,
            #07140c,
            #020302
        );

}


.aofa-image::before {

    content:
        "AGE OF FINALITY";

    position:
        absolute;

    color:
        #20d879;

    font-size:
        23px;

    font-weight:
        bold;

    letter-spacing:
        3px;

    text-shadow:
        0 0 15px rgba(32,216,121,.45);

}


.aofa-image::after {

    content:
        "PROJECT // AOFA";

    position:
        absolute;

    bottom:
        14px;

    color:
        #557b61;

    font-size:
        9px;

    letter-spacing:
        2px;

}


/* =========================================================
   SECRET PROJECT IMAGE
   ========================================================= */

.secret-image {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    position:
        relative;

    background:

        radial-gradient(
            circle,
            rgba(32,216,121,.08),
            transparent 35%
        ),

        repeating-linear-gradient(
            45deg,
            #040804,
            #040804 8px,
            #020302 8px,
            #020302 16px
        );

}


.secret-image::before {

    content:
        "CLASSIFIED";

    color:
        #315b3e;

    font-size:
        20px;

    letter-spacing:
        5px;

    text-shadow:
        0 0 10px rgba(32,216,121,.15);

}


.secret-image::after {

    content:
        "◼ ◼ ◼";

    position:
        absolute;

    color:
        #17452d;

    font-size:
        10px;

    bottom:
        13px;

    letter-spacing:
        6px;

}


/* =========================================================
   GAME CONTENT
   ========================================================= */

.game-content {

    padding:
        15px;

    flex:
        1;

    display:
        flex;

    flex-direction:
        column;

}


.game-content h3 {

    margin:
        0 0 8px;

    color:
        #70d894;

    font-size:
        20px;

    text-shadow:
        0 0 5px rgba(32,216,121,.1);

}


.game-content p {

    margin:
        5px 0;

    color:
        #aebfb4;

    font-size:
        14px;

}


.game-meta {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        6px;

    margin-top:
        10px;

}


.meta {

    padding:
        3px 7px;

    color:
        #619875;

    background:
        #040904;

    border:
        1px solid #17452d;

    border-radius:
        2px;

    font-size:
        9px;

    letter-spacing:
        .5px;

}


/* =========================================================
   GAME BUTTON
   ========================================================= */

.button {

    display:
        inline-block;

    align-self:
        flex-start;

    margin-top:
        auto;

    padding:
        6px 13px;

    color:
        #70d894;

    background:
        linear-gradient(
            #102a18,
            #050a07
        );

    border:
        2px solid #111711;

    border-radius:
        3px;

    box-shadow:

        inset 1px 1px 0 #526055,

        inset -1px -1px 0 #000;

    text-decoration:
        none;

    font-size:
        11px;

    transition:
        .2s ease;

}


.button:hover {

    color:
        #000;

    background:
        #20d879;

    border-color:
        #20d879;

    box-shadow:
        0 0 15px rgba(32,216,121,.3);

}


.button:active {

    transform:
        translateY(1px);

}


/* =========================================================
   CLASSIFIED BUTTON
   ========================================================= */

.locked-button {

    color:
        #3e644a;

    cursor:
        default;

}


.locked-button:hover {

    color:
        #70a47d;

    background:
        #071009;

    border-color:
        #245c38;

    box-shadow:
        none;

}


/* =========================================================
   DEV NOTE
   ========================================================= */

.dev-note {

    margin:
        14px;

    padding:
        12px 14px;

    color:
        #698573;

    background:
        #030603;

    border:
        1px solid #163b25;

    border-left:
        3px solid #20d879;

    font-size:
        11px;

}


/* =========================================================
   DIVIDER
   ========================================================= */

.divider {

    margin:
        25px 0;

    text-align:
        center;

    color:
        #246b45;

    letter-spacing:
        4px;

    opacity:
        .7;

}


/* =========================================================
   FOOTER
   ========================================================= */

footer {

    padding:
        15px;

    text-align:
        center;

    color:
        #4d7459;

    background:
        #010201;

    border-top:
        2px solid #111711;

    box-shadow:
        inset 0 1px 0 #3b473e;

    font-size:
        11px;

}


/* =========================================================
   CRT
   ========================================================= */

.crt {

    pointer-events:
        none;

    position:
        fixed;

    inset:
        0;

    z-index:
        999;

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,.012),
            rgba(255,255,255,.012) 1px,
            transparent 1px,
            transparent 4px
        );

    opacity:
        .14;

}


/* =========================================================
   CURSOR
   ========================================================= */

.cursor {

    display:
        inline-block;

    width:
        8px;

    height:
        15px;

    margin-left:
        4px;

    background:
        #20d879;

    vertical-align:
        middle;

    animation:
        blink 1s steps(1) infinite;

}


@keyframes blink {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

    #page {

        max-width:
            calc(100% - 12px);

        margin:
            6px auto;

    }


    header {

        min-height:
            65px;

    }


    .logo {

        font-size:
            18px;

        letter-spacing:
            2px;

    }


    .subtitle {

        font-size:
            8px;

    }


    .window-controls {

        display:
            none;

    }


    main {

        padding:
            12px;

    }


    .system-dashboard {

        grid-template-columns:
            1fr;

    }


    .games-grid {

        grid-template-columns:
            1fr;

        padding:
            9px;

    }


    .game {

        min-height:
            0;

    }


    .game-image {

        height:
            160px;

    }


    .intro-text {

        font-size:
            14px;

    }

}

</style>

</head>


<body>


<div id="page">


<!-- =======================================================
     MAIN XP TITLE BAR
     ======================================================= -->

<header>

    <div class="logo-area">

        <div class="logo">
            SIDRA NOVA STUDIO
        </div>

        <div class="subtitle">
            Ω · EVEN FURTHER BEYOND
        </div>

    </div>


    <div class="window-controls">

        <span>—</span>
        <span>□</span>
        <span>×</span>

    </div>

</header>


<!-- =======================================================
     NAVIGATION
     ======================================================= -->

<nav>

    <a href="index.html">
        HOME
    </a>

    <a href="games.html">
        GAMES
    </a>

    <a href="devlog.html">
        DEVLOG
    </a>

    <a href="about.html">
        ABOUT
    </a>

    <a href="support.html">
        SUPPORT
    </a>

</nav>


<main>


<!-- =======================================================
     SYSTEM WINDOWS
     ======================================================= -->

<div class="system-dashboard">


<!-- TIME -->

<div class="system-window">

    <div class="window-header">

        <span class="window-dot"></span>

        LOCAL TIME

        <span class="window-symbol">
            Ω
        </span>

    </div>

    <div class="window-body">

        <div id="clock">
            00:00:00
        </div>

        <div id="date">
            Loading...
        </div>

    </div>

</div>


<!-- WEATHER -->

<div class="system-window">

    <div class="window-header">

        <span class="window-dot"></span>

        WEATHER

        <span class="window-symbol">
            ◌
        </span>

    </div>

    <div class="window-body">

        <div id="weather">
            Connecting...
        </div>

    </div>

</div>


<!-- SYSTEM -->

<div class="system-window">

    <div class="window-header">

        <span class="window-dot"></span>

        SYSTEM

        <span class="window-symbol">
            +
        </span>

    </div>

    <div class="window-body">

        <div class="status-line">

            <span>
                NETWORK
            </span>

            <span class="online">
                ONLINE
            </span>

        </div>

        <div class="status-line">

            <span>
                STUDIO
            </span>

            <span class="online">
                ACTIVE
            </span>

        </div>

        <div class="status-line">

            <span>
                PROJECTS
            </span>

            <span class="online">
                04
            </span>

        </div>

    </div>

</div>


</div>


<!-- =======================================================
     INTRO WINDOW
     ======================================================= -->

<div class="intro-window">


<div class="window-header">

    <span class="window-dot"></span>

    SIDRA_NOVA://GAME_DATABASE

    <span class="window-symbol">
        Ω
    </span>

</div>


<div class="window-body">

    <span class="terminal-label">
        PROJECT DIRECTORY // ACCESS GRANTED
    </span>

    <h1>
        Games<span class="cursor"></span>
    </h1>

    <div class="intro-text">

        A collection of worlds currently being
        developed by Sidra Nova Studio.

        <br><br>

        Some are known.

        Some are still beyond the signal.

    </div>

</div>


</div>


<!-- =======================================================
     GAME COLLECTION
     ======================================================= -->

<div class="section-window">


<div class="window-header">

    <span class="window-dot"></span>

    GAME DIRECTORY

    <span class="window-symbol">
        [ 04 ]
    </span>

</div>


<div class="games-grid">


<!-- =====================================================
     AGE OF FINALITY
     ===================================================== -->

<div class="game">


<div class="game-titlebar">

    <span class="window-dot"></span>

    AGE_OF_FINALITY.EXE

    <span class="game-status">
        ACTIVE
    </span>

</div>


<div class="game-image aofa-image">
</div>


<div class="game-content">

    <h3>
        Age of Finality
    </h3>


    <p>

        A dark fantasy dungeon crawler set within
        a world of ancient civilizations,
        supernatural forces and forgotten mythology.

    </p>


    <p>

        Inspired by Arabian mythology, fantasy
        and cultural influences, the game explores
        an Arabian-inspired region within a much
        larger fantasy world.

    </p>


    <div class="game-meta">

        <span class="meta">
            DARK FANTASY
        </span>

        <span class="meta">
            DUNGEON CRAWLER
        </span>

        <span class="meta">
            RPG
        </span>

        <span class="meta">
            IN DEVELOPMENT
        </span>

    </div>


    <a
        class="button"
        href="age-of-finality.html">

        ENTER PROJECT →

    </a>

</div>


</div>


<!-- =====================================================
     UNANNOUNCED 02
     ===================================================== -->

<div class="game">


<div class="game-titlebar">

    <span class="window-dot"></span>

    PROJECT_02.EXE

    <span class="game-status">
        CLASSIFIED
    </span>

</div>


<div class="game-image secret-image">
</div>


<div class="game-content">

    <h3>
        Unannounced Project
    </h3>


    <p>

        There is something else being developed
        beyond the current signal.

    </p>


    <p>

        Details are currently classified.

    </p>


    <div class="game-meta">

        <span class="meta">
            UNANNOUNCED
        </span>

        <span class="meta">
            IN DEVELOPMENT
        </span>

    </div>


    <span class="button locked-button">

        ACCESS DENIED

    </span>

</div>


</div>


<!-- =====================================================
     UNANNOUNCED 03
     ===================================================== -->

<div class="game">


<div class="game-titlebar">

    <span class="window-dot"></span>

    PROJECT_03.EXE

    <span class="game-status">
        UNKNOWN
    </span>

</div>


<div class="game-image secret-image">
</div>


<div class="game-content">

    <h3>
        Unannounced Project
    </h3>


    <p>

        A world that has not yet been revealed.

    </p>


    <p>

        Its signal has been detected,
        but nothing more can be confirmed.

    </p>


    <div class="game-meta">

        <span class="meta">
            UNANNOUNCED
        </span>

        <span class="meta">
            CLASSIFIED
        </span>

    </div>


    <span class="button locked-button">

        SIGNAL LOCKED

    </span>

</div>


</div>


<!-- =====================================================
     UNANNOUNCED 04
     ===================================================== -->

<div class="game">


<div class="game-titlebar">

    <span class="window-dot"></span>

    PROJECT_04.EXE

    <span class="game-status">
        UNKNOWN
    </span>

</div>


<div class="game-image secret-image">
</div>


<div class="game-content">

    <h3>
        Unannounced Project
    </h3>


    <p>

        Somewhere beyond the known projects,
        another world is taking shape.

    </p>


    <p>

        Information will be released
        when the time is right.

    </p>


    <div class="game-meta">

        <span class="meta">
            UNANNOUNCED
        </span>

        <span class="meta">
            UNKNOWN
        </span>

    </div>


    <span class="button locked-button">

        TRANSMISSION PENDING

    </span>

</div>


</div>


</div>


<!-- =====================================================
     DIRECTORY NOTE
     ===================================================== -->

<div class="dev-note">

    <strong style="color:#20d879;">
        SYSTEM NOTE:
    </strong>

    Three projects remain outside the public
    transmission range.

    <br>

    Their details will become available
    when their time comes.

</div>


</div>


<div class="divider">
    ─────────── Ω ───────────
</div>


<!-- =======================================================
     FOOTER
     ======================================================= -->

<footer>

    SIDRA NOVA STUDIO

    <br>

    Ω · EVEN FURTHER BEYOND

    <br><br>

    GAME DATABASE:
    <span style="color:#20d879;">
        ONLINE
    </span>

    <br>

    01 PUBLIC PROJECT // 03 CLASSIFIED

</footer>


</main>


<div class="crt"></div>


</div>


<!-- =======================================================
     CLOCK
     ======================================================= -->

<script>

function updateClock() {

    const now = new Date();

    const time =
        now.toLocaleTimeString(
            "en-US",
            {
                timeZone: "Asia/Riyadh",
                hour: "2-digit",
                minute: "2-digit",
                second: "2-digit",
                hour12: false
            }
        );

    const date =
        now.toLocaleDateString(
            "en-US",
            {
                timeZone: "Asia/Riyadh",
                weekday: "long",
                year: "numeric",
                month: "long",
                day: "numeric"
            }
        );

    document.getElementById(
        "clock"
    ).textContent = time;

    document.getElementById(
        "date"
    ).textContent = date;

}

updateClock();

setInterval(
    updateClock,
    1000
);

</script>


<!-- =======================================================
     WEATHER
     ======================================================= -->

<script>

async function updateWeather() {

    const box =
        document.getElementById(
            "weather"
        );

    try {

        const response =
            await fetch(
                "https://api.open-meteo.com/v1/forecast?latitude=21.3891&longitude=39.8579&current=temperature_2m,weather_code,wind_speed_10m&timezone=Asia%2FRiyadh"
            );

        const data =
            await response.json();

        const temp =
            Math.round(
                data.current.temperature_2m
            );

        const wind =
            Math.round(
                data.current.wind_speed_10m
            );

        const code =
            data.current.weather_code;

        let condition =
            "UNKNOWN";


        if (code === 0) {

            condition =
                "CLEAR SKY";

        }

        else if (code <= 3) {

            condition =
                "PARTLY CLOUDY";

        }

        else if (code <= 48) {

            condition =
                "FOG";

        }

        else if (code <= 67) {

            condition =
                "RAIN";

        }

        else if (code <= 77) {

            condition =
                "SNOW";

        }

        else if (code <= 82) {

            condition =
                "RAIN SHOWERS";

        }

        else {

            condition =
                "STORM";

        }


        box.innerHTML = `

            <div class="weather-temp">
                ${temp}°C
            </div>

            <div>
                ${condition}
            </div>

            <div style="
                margin-top:5px;
                color:#557963;
                font-size:10px;
            ">

                WIND
                ${wind}
                KM/H

            </div>

            <div style="
                color:#355a42;
                font-size:9px;
                margin-top:3px;
            ">

                MAKKAH, SAUDI ARABIA

            </div>

        `;

    }

    catch (error) {

        box.innerHTML = `

            <span style="color:#527a62;">
                WEATHER OFFLINE
            </span>

        `;

    }

}

updateWeather();

</script>


</body>

</html>