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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="script.js"></script>
    <link rel="stylesheet" href="dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="dist/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="scanlines.css">
    <link rel="stylesheet" href="style.css">
    <link rel="icon" type="image/x-icon" href="img/favicon.ico">
</head>
<style>
    body { 
        visibility: hidden;
        background-color: #383838;
        overflow-y: hidden;
        overflow-x: hidden;  
    }
    hr {
        border-top: 2px solid #fff 
    }

    .navbar-default .navbar-nav > li > a::first-letter {    
        color: #8b0000; 
    }

    .navbar-default .navbar-nav > .active > a::first-letter {
        color: #8b0000; 
    }
    .alertVisible {
    opacity: 1;
    }

    .alertInvisible {
        opacity: 0;
        transition: opacity 1.5s ease-out;
    }

    .ascii-container {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      overflow: hidden;
      border: none;
    }

    .ascii-art {
      font-family: monospace;
      white-space: pre;
      font-size: 5px;
      line-height: 1;
      text-align: center;
      transform-origin: center;
      background: transparent;
      font-weight: bold;
      border: none;
      color: #000000;
      font-size: clamp(3px, 1.2vw, 5px);
    }
    .video-container {
    width: 100%; /* Make the container take full width of its parent */
    aspect-ratio: 16 / 9; /* Standard video aspect ratio (adjust if needed) */
    overflow: hidden; /* Clip any part of the video that overflows */
    }

    #songVideo {
        display: block; /* Remove any default inline display */
        width: 100%;
        height: 100%;
        object-fit: fill;
    }

    @media (max-width: 768px) {
      .ascii-art {
        font-size: 1vw;
        transform: scale(0.8);
      }
    }

    @media (max-width: 480px) {
      .ascii-art {
        font-size: 1.5vw;
        transform: scale(0.6);
      }
    }
</style>
<body class="w-screen h-[100%] crt" style="height: 100%; background-color:#383838">
    <div class="loading fixed w-screen h-screen container-fluid start-up" id="loader" role="main">
        <div class="row"
            style="height:100%; width: 100vw; display: flex; justify-content: center; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); position: absolute;margin-right: 0px;margin-left: 0px;">
            <div class="col-md-3">
                <div class="jumbotron text-center">
                    <h1><span class="badge badge-pill badge-info" style="background-color: #747474">System</span></h1>
                    <br />
                    <p class="lead">Program has successfully loaded, please click the continue button below to load and
                        proceed to the program.</p>
                    <br />
                    <a class="btn btn-lg btn-primary" style="background-color: rgb(170, 170, 170);" onclick="loader"
                        role="button">Continue »</a>
                    <br />
                </div>
            </div>
        </div>
    </div>
    <div class="main hidden max-h-screen h-screen" id="main">

        <nav class="navbar navbar-default">
            <div class="container-fluid">

                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>


                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active">
                            <a href="#">
                                Home <span class="sr-only">(current)</span>
                            </a>
                        </li>
                        <li>
                            <a href="https://steamcommunity.com/id/cIoro" target="_blank" class="info">
                                Steam
                            </a>
                        </li>
                        <li>
                            <a href="#" class="info" onclick="copyDiscord(event)">
                                Discord
                            </a>
                        </li>
                        <li>
                            <a href="https://www.last.fm/user/clorinho" class="info" target="_blank">
                                Last.fm
                            </a>
                        </li>
                        <li>
                            <a href="https://letterboxd.com/clwro/" class="info" target="_blank">
                                Letterboxd
                            </a>
                        </li>
                        <li>
                            <a href="https://x.com/clwro" class="info" target="_blank">
                                Twitter
                            </a>
                        </li>
                        <li>
                            <a class="alertInvisible" id="clipBoardAlert">Copied to clipboard!</a>
                        </li>

                    </ul>

                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a id="clock">
                                15:00
                            </a>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                aria-haspopup="true" aria-expanded="false"> Guest <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">CLWRO</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-3">
                    <div class="panel panel-default" style="justify-content: center; align-items: center; text-align: center; height: 200px">
                        <video id="songVideo" style="height: auto; max-width: 100%; max-height: 100%" muted playsinline></video>
                    </div>


                    <div class="panel bg-transparent col md-3 font-bold overflow-hidden ascii-container">
                        <pre
                            style="overflow: hidden; text-align: center; justify-content: center; align-items: center;" class="ascii-art"><strong>
%%%%%*  :*%%%=%%@@*=%%%%%%%%%%%%= ..*%-#%%@%%%%%%%%%%%%%%%%%%%%%%%@*.--#%%%%%@%%%%%%%%@%%%@%@@@%%%%%%%%%@%%%.#. *%%@#%#:%%%*-+#%%%%%%-%%%%%@@%%%%%%%@@
%%%%%: :*%%%%%%%%%=%%%%%@@%%%%%%=:*.%%-#%#%%%%%%%%%%%%%%%%%%%%%%%%%-=-.%%%@@@%%%%%%%%%@%%%%@%%%%%%%%%%%@%%%*.%.+%%@%%%%%%%*%%%%= -.+%#+%%@@%%%%%%@@%%%
%@@%%. *%%%%%%%%%#=%%%@@@@@@@@@%=:+.%#:#%%%@@@@@@@@@@@@@@@@@@%%%%@%:==.%%%%@@%%%%%%%%%%%%%%%%%%%*%%%%@@%%%%*.% +%%%%%%%%%%@%=.-++%%*-:-**#%%%%%%%%%%%%
%%%%+ .*%%%@@%%%%**%%@%@@@@@@@%%=--=%*-*%%%@@@%@%@@%%%@@@@@@@%%%%#%:=::.#%%%%%%%*--+#**%%%%%%%%%%%%%%%%%%%%*.% =%%%%%#-:=%-.:. -%%%%%%*%#+------==--::
%%%%=.-+*%%%%%%@%+*%%%%@@@@@@@%%* +%%#:#%%%@@@@@%%@%%%@@%@@@%%%#*%%==%*.=-#%%@%%%%%#***#*-----:=#%%#*%%%%%%#.%.*%%%*.=%%+.::.*#+=---=+=%%%%%%%%%%%%%%%
@%%@-.-+*%%%%*%@%++#%@%@@@%%%@%%%+.%%%-##%%%%%%@%%%#%%%@%%%@%%%*=#*-    ...  :#+:===+*#**+===-+**#%%%%%@%%%# + -+=- --: .. +####%%%%%%%%%%%%%%%@@%%%%%
%%%%::-+#@%%#-%%%*+%%%%@@@%%%%%%%%+:%%-##%%%%%%%%%%%@%%%%%%%%*-. .-*#%%%=#%*    +**##%%%%%%%%%%%%%%%*%*+****.+- :. **-. ..###%%%%%@%%%%%%@@@@@@%%%%%%%
%%%%-.-:%%%%%=%%@*=%%%%@@@%%@*=#%%@.*%-#*%%%%%%%%%@%%%%@%%%* ..=+%%##+=*. -%%=   -%%%%#.: %%%%%%%%%+-. ::. -% =+# + .%.-. #%%%%%%%%%@%%@@@%@@@@%%%%%+ 
%%@%-.+:%%%%#-%@%#=%%@%%%%%%%%%%%## +=.=:=++**##%%%%@%%%%%-   : =+: .  *    =%-    +%%%%#=:.:=::.  +####+==*.=%%=. .#+:+.+.%%%@@@@@@@%%%%%%@%%@%%%%:  
%%%%+.=#%%%%#-%%@#-+%#*#++-+++**#%%.+*.*%%%%%%%%%@%@%@%%%:       .           -%:    -%%%%%%%%-=+.:. .-+-.-:+%*%%.+=-= -.-%.#%%@@@@@@@@@%%%%%%%%%%*    
%%%%%#.-%%%#+:=-=#:+%%%%%%%%%%%%%%%%.*-.-*=%%%@%%%%%%%%%:                     -#     =%%%%#+:   .:::..+%%%#=%%%# %--.. --%=+@%@@@@@@@@@%%%%%%%%%:     
****+:- .*#%%+%%%%=+%:#%%%%%%%%%%###+  -: .:   :-=+++*#-      ..               --     *%%%%%%%%%%%%%%%%%%%%%%@%%.%=: :==.*%:%%@@@@@@@@@%%#%%%%*       
:= -=. .  ..=-.:+=..        :===++**#*.. +%*.%*-......        =.                      .##==-----====+*#%%%%%%%%# %-=-== .#@-%%@@@@@@@@@@%%%%%#        
+-.    -  +%#*= %%=+%- :==:  ::..*%%%..= =#--%+-......-      .=                        :*=..      .=#=: :..-%%%#.%.*:* .:%-#%%@@@@@@@@@@%%%%*        :
+%%%%%%+ +%=#+: *%+%%%-*%%%-+%%#:%%%- -::.#%=:%%%@%%%%-                           .     +%%#*+-::  :##@%.: .:%#: - +. ==:@%%%%@@@@@@@@@@%#%:         +
%%%@%%%.  =%=+::-%%%%#*=#%*-@%%@#%%#:.:.%%*+*%%%%%%%%%:                =.         .        ...       :#..= *=:*%.. #..%+:%%%%%@@@@@@@@@%%+           #
%@@%@%=+  %%#=: %=%%%%+%=#++%%%%%%% #%*=%@%%%%@%%%%%%#.       .        :.                 .=##:=- :=. :   .+@@%%  .%.:%# %%%@@@@@@%%%%@%:           .%
%@@%%*-= #%%%%- %=*%%%+%%%+#%%%%%%=:%%*.%%%%%%%%*-  .                  -.            .=:    ..--:     .-#%%%%%%*. :%.-%%%%%%%%@@@@@%%%#.            .%
@%%%%:%- %%%%%* #%*%%*=%%%@@@@@%%@=*%%*.%%*-. ..     *:        .                          :#+:    :+#%%%%@@@@%%+- :% +%%%%@@@@@@%%%%*:              :%
%@%%*=%+.%%%%*%-%%%#=-=%%%@%@@%%%%-#%%+  :: .        .                            :==..=.    :*%%%%%%%%%%@@@@%%=+.:# -%%%@@@@@@@%%%%-               .%
%%%%=*%* %%%%%*+%%%%%%%%%@@@@@%%%%-#::- .-:+. -..-+##=-           ..:-*#---==:  ...          =%%%%%%%%%%%@@@@%%-*.:#  +%%@@@@@%@@@%%%%#=.           .%
@@@%==** %%%%%%.%%%%%@%@@@@@@@%%%%=.-:=:==+-:.:--===+-=- :=*+++=:--:::                       .%%%@@@@@@@@@@@@@%:*  #.-.#%%@@@@@@@@@@%%%%%%           #
@%@%=+=#.#%%%%%:*%%%%%%@@@@@@@%%%% .-...   .:-::::-+-= :  ::.::                               %%%@@@@@@@@@@@%%%.:  -.+=:%%@@@@@@@@@@@%%@%#   .%*=.   #
@@@%==+%-+%%%-%#.%#=%%%%@@@@@%%%%%.=:--.:====-=++-=---.                                       -@%@@@@@@@@%%%%%%.   -.:+:%%@@@@@@@@@@@@@%%=    #%%%%++%
@@@%#:#%:++#%#%% +#-%%%%%%@@@@@%%%:#%%%%%%%%%%%%%%%#-==                                 ..     *@%@%@@@@@@@@@%%. .-:  .+%%@@@@@@@@@@@@@%%.    #%%%%%%%
@@@%%:.%.=%%%%%%.=%-%%=%%%@@@@%%%+ #%%%%@%%%%%@%%%%%%**+                 :               -     .%%%%%%%%%%%%%%%. .#    :%%%%%%%%@@@@@@@%%:    *%%%%%%%
%%%%%-:%-*%%%%%%-+%+=%.#%%%@@@%%%-.%%%%@%%%%@@@@@@%%%%%+        :        .                      :%%%%%%%%%%%%%%. .% *  .:%%%%%%%%@@@@@@%%=    :%%%@@%%
%%%%%= ** %%%%%%%:%%:%-*%%%%%%%%%-+%%%%+%%%%%%%%@%%%%%%%.                        .#-.            +%@%%*:..  .:%.  # +: .= #%-*%%%%%%@@@%%%-    =%%%@%%
#*:.:=  -+.**-%+--=##%+:=%%%%%%%%=:%*+%%%%%%%%%%%%%@%%%%:                         #*                :-.         .-...:+ :# -=%%%%%%%%@@%%%*     %%@%%%
:#%%*#=  #*..+*+-*:%%**:.#=%%*+=:-- :...=-=============-                          .                   :*%%%#+==: + .+.    :  .+**%%%%@@%%%%.    *%##*+
%%%#-:== -%:.+-#%%-*%%@+=%%@%%%%*%%%. ++%@%%%%@@@@%%%@%                             .                     .*%%%%%* :%--+:. =+.+.+#####*+*++=:   .##%#=
        :*::. : =+*..               .:  ##*=. ..... :#=                  :                                          .  -%+=. - #%:.--#%%%%%%%.   -%#%%
%%#+-.*%+#*==  .+.*#-*%:-=%%%%%%%%%%%%%# *=.-*+:. .:-=       :          -.                .                          .--.-##.-= +%%=.:==-::-%#    -.:*
. -:::-  *+:%:#= -:%#:%:.%=%%%%#:%%%%%%. .  :=:%%%%=*+                ..::                 :-                             = . .***#%**#.#%%%%%%:   .%#
+#..#+.**%.:%-*%*  :#:%+=-=##%%%=.#:%##: . :...#%*          =        :==..                                    .               -=:..  =%.*%%%%%%%.   #%
: .#**%%+=+:+-%@%#--.+%+-.:* =%%%%-.:+. : +%%%%*#-          .     . :+.++=.                   :                ..:...:.         .*=*%=  :%%%%%%%*    =
:*::%%%%- %+:%%%%%%%%%%%%+.%%%%%%%%%%%%=  +%%%@%-                  -.-#%+%+         .         ::               ++-                .:%%= .%%:-#%%%*    
:% *%%%- +:=%%%:#%%@@%%#%##%%#%%@%%%%%%- +#%%*.                . .=-#*=*+#-   .-::*%%                          *:                   -%+: =%%%+:..:.   
+::*%%+:.-=%%%*#%%%%%%*:=-.=*%#*+=#%%%%= =*:                 ::  .*##%%%%=::. :*%%%%%:                                     -          .+. -%%%%%%%%.  
*%%*%%--:*.#**+%%%%@@@%:+ .   .=%%%%%%#..                   =...-+-#%%=....+#%@@@@%%@-                              .                  -::*-%%%%@%@%  
%%%%%%..*#*.+#%%%%%@@@%++.-%%+:   :*%#.                    ..::=:#%+.::-*%%%%%@@@@@%%#.      -.             :                           +.===%%%@%%%+ 
%%%%%+:=**%%%%@%%%%@@@%%-+ %%%%%#+:            .           := -=:. .=#%%%%%%%%@@@@@%%%-    -              . :                           .=-%-#%%%@@%%:
@%@%%-*%**%%%@@@@@@@@@@%++ -%%@%%%%%%#=                   --  . .*%%%%@@@%%%%@@@@@%@@%+    =               #             .               .%%%=%%%@@@%*
@@%%%:#%**%%%@@@@@@@@@%%%== #%%%%-+%*-%%%+.           .      .*%%@%%%%%@%%%%-%@@@@@%@%*    :              ..                              =%%.%%%@@@%%
%@%%%:%%+#%%%@@@@@@@@@%%%+  :%%%%@%@#.*%%%%%#-   ..:     .:+%%@@@@@@@%%%%%@@@@@@@@%%@@#                   .:         -                     %%:*%@%@%%%
%%#:#-%%+*%%%@@@@@@@@@@%%%-. +%%@%@%%+:%%%%%%%%%+    =.*%%%@%%@@@@@@@%#-%%@@@@%@@@%@@%%.                  ..                               -%*:%%@%%%%
%%%:#.=%#*%%%@@@@@@@@@%%%%%   -%%%%%%%@%%%@%@%%%= ..*#:%@%%@%%@@@@@@@%%%%@%%%%%%%%%%%@%:                -                                   -%:+%%%%@@
#%%-#. -*%%%%@@@@@@@@@@@@%%:   #%%%@%%%%%%@%%%%%%=   = *%%@@@%%%%%%%%%%%%%%%%*#%%%%%%%%=            *.  -+                                   *%.%%%%@@
%%@%*. +---%%@@@@@@@@@%@@@%#  ::%##%%%%@%%%%#%%%%%   ..:%%@@@%%%%#%%%%%#%%%%*+%-#=#%%%%*          . %=                                        **:%%%%%
%#%%*.:..*#%%%%%%%%%%%%@@@%%= :-+:+**%@%%%%%%%%%%*   *-+%%@@@%%%% %%=%**%%##=*=#=#%%%%%#            -+  .=                                   : =*:#%@%
%%%%+ :-.#+%%%%%%%#%%%%@@%%%+  =:::--#*%@%%%%%%%==:  -#.%%@@%%%%%*#=%*+#+=*=*-+*#%@%%%%%.             =  ::                                     :%:*%@
-+-== -::-%%%%%%%%%@%%@@%%%%   .+ -#---+@%%@@%%%#-:   #.#%%%%+*##%-%#=#==#-#=%%%%%%%%%%%:                  -                                     :%*-%
#*#.- -:.:-*%%*#%%%%%%%%%%%=    :+=.+--:%%%@@%%%%%%. -:==%%%#**+=:#==%:+*-#-%%%%%%#*%%%%=              -   :                                     :@%#-
#*+    - :#%%%%%**=*#%%%%%:      *-#-=--:=%%%%@@%%%+  :+:%%%-*+=:*-=+-*+-#-%%%-.. ..   ..                   .                    .               -@%%#
#%%-:= %  #%%%%%%%%%%%#+:        .%*#:---:+%%%%%%@%#  +::%%-#++=++---+-+#:-.  : :+%%%%%%%**:                :                 ..           .     :@%%%
##++ - -. #%%%%%%%%%%%#:          +:*+=-:-:%%%%@%@%%- :--=*#-+=++--=--+ .=#%%%%+--:::....  .=*=-:           .                              ..    .%%%%
%%%# =..-  *%%%%#*%###            +%#%=+:-::%%@@%@%%#  ==:=-*=++:==:=-    .   .  .    ..=#+-    -*       .  .                                     *%%%
+#%%.   ..  -#%%%%%%#              %%%%*%=+::%%%%%%%%..:.-=#=+#+%%==#%%%%%%%%%%%%%+:.  .+##-:   . *=                                             = %%%
%#+#.- . :::-+.:#%%#               =%@%%%%-*:-%%%%%%@+   -.--#+#%:+*%%@@@@@@@@@%%%#  :.  .=.=%%%%* +%=                                           . =%%
%%%%*--= .#:*=.**  .                    .+%%# +%%%%%%%  -::%%%%%%%%@%%@@@@%%%%%@@%%*  .    .*%%%#%%--@%+                                          : *%
%%%*: .    %.#-                 *-: #%%:#. =%%-+%@%%%%: -+=-%%%%%%%%%%@@%@@@@@%@%%=.  =%%@@%%%#*#%%=..%%%.                                         * #
.         . : +:-=%-           ..=.:.-=*%%%= -#-+%@%@%= .*= %%@@@@@@@@@@@@@@@@@%%%*: +++=*+  .%%%%%%:+:-%%+-:.                                     :.+
%%. --:  +**=--:. +.           +..=  +.+=: . ..#%%%%%%#  -=:+%@@%@@@@@@@@@@@@@@%%@#. .      .:-##**%%+:#.-%%#.                                       :
=*.=+#*#%#: -%%%%%-           :.#     ::%%#:.#=%%%%@%%%+ :=#.%%%@@@@@@@@@@@@%@%@@%%%  =.%%%%%=.===*%%%%=.+.:#%-                                       
%:..    .  .#%%%%+            ::  -+   :+#%%%%%%%%%@%%%%. +=.#@%%@@@@@@@@@@@@@%@@%%*  =:+*#==*%#-++%%%%%%=%#-=%*      -                              .
#++=-:  ...::..:-.              :*-+..   :+#+#%%%%%%%+%%= -+:+%%%%%%%%%%%%%%@%%%%%%#. =+       . -+.=#%%+%%%#@*#.                                     
%%%@#%%%%+=-=%%%%-              .%%=        -#%*%%%%*#%%#  :*:%%%%%#+.%@%%%%%%%%%%*--+ -+-        -*%==%*:+-=+ #*                  .                  
%%%%.#%%%%%%%%%%%%-                .-::.       :*%%%%%##*: ==.+#%%%%##%%%#%%**+-. .     -*##*:          =-::  :%#.     .            -                 
%%%@%%%@%@@@@%%%%%#.               -%%:  .         :=#%%%+  .:*%%%%%%#=:--:..                         . :  :. %%:                   .                 
%%@%%%%@%@@%%%@%%%*.                :  --+-             --    .:-*#=:==-.                                   =%%:       .                              
%@@@@%%@@%%%%%#=.                     .                       .:-.                                           +=                                       
@@@@@@@@@%@%#:                                           ..  :                                             :.        +.                               
@@@@@@@%%%%*      .+                                                                               -.       =        :                                
@@@@@@%%%%%.                =                                                                      .*.             .-                                 
@@@@@@@%%%+                :%=:-     .  .                       .                         *.        .              =                                  
@@@@%@%%%=                 +#.: =+#+       :                       =        .                                  ..                                     
@@@@@%%%*                    .    *#-     . .+                           ::.                                                            ::-           
@@@@@%@%        :          ..      .##:                                .-:             .:  -:   :.                                        .           
@@@@@%%%                             :%:      *:-:                :*#=.         .=*+-*:          +                                      *             
@@@@@@%%.                    .        .-.                       =%-.         ..-#+.            . .:                                                   
%@@@@@@%.                     --       .#=.                  .+*.                           :+.   .   .                                               
%@%@%%%-                       :*.     .=#=:       .     .=#:.               .              :%-   .                                                   
%%%%%*                          +%:    .+#%%*==:::--:.-*-:.                 .*#=           .#=       .#                                               
@%@#.                           =%@=     .-: .      ..                     -*:             -%=      .-*                                               
%%*               ..  .-         -%-+-..                                .=#+:              :+         .=:                                             
%#                 *=            :%%:                                  .++                 -=.       : *:                                             
%#                   .             #%:                             :: .+                   ==        : #                                              
%%                                 *%%+  .                           =#.:.                 :           %+      . . : .:-                              
*.                                .+%%%%=                          =%%:--.                             %%.      - +.-*..:                             
                                    =%%%%%:..  .                :%%#-                                 =#           :-     :                          +
</strong></pre>
                    </div>
                    <audio src="music/affiliations.html" hidden></audio>
                    <div class="music-player col md-3">

                        <div class="panel panel-default" stlye="padding-top: 5px;">
                            <div class="panel-heading">
                                <h3 class="panel-title">Currently Playing</h3>
                            </div>
                            <div class="panel-body">
                                <p>Title: <strong class="Title">N/A</strong></p>
                                <p>Artist: <strong class="Artist">N/A</strong></p>
                                <p><strong id="songTime">N\A</strong><strong> / </strong><strong id="songDuration">N/A</strong></p>
                            </div>
                            <div class="progress progress-info progress-striped" style="background-color: #fff;">
                                <div class="progress-bar" style="width: 10%; height:auto; background-color: #8b0000">
                                </div>
                            </div>
                            <div class="panel-footer">
                                <button class="btn btn-primary" id="prevBtn" style="background-color: #747474">Prev</button>
                                <button class="btn btn-primary" id="playPauseBtn" style="background-color: #747474;">Play</button>
                                <button class="btn btn-primary" id="skipBtn" style="background-color: #747474">Next</button>
                            </div>
                        </div>

                    </div>

                </div>
                <div class="col-md-9">


                    <ol class="breadcrumb">
                        <li>
                            <a href="mailto:cloro@clw.ro"> cloro@clw.ro </a>
                        </li>
                        <li class="active">
                            User Profile
                        </li>
                    </ol>


                    <div class="alert alert-danger" role="alert">
                        <img src="img/2001.gif">
                        <img src="img/alienow.gif">
                        <img src="img/homicidenow.gif">
                        <img src="img/csbanner.gif">
                        <img src="img/hl.gif">
                        <img src="img/clockwork.gif">
                    </div>



                    <div class="row" style="height: 100%;">
                        <div class="col-md-4">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h3 class="panel-title">User Profile</h3>
                                </div>
                                <div class="panel-body">
                                    <p>Username: <strong>CLWRO</strong></p>
                                    <p>Steam: <strong><a href="https://steamcommunity.com/id/cIoro" target="_blank">clwro</a></strong>
                                    </p>
                                    <br>
                                    <p>Discord: <strong><a href="#" class="info"
                                                onclick="copyDiscord(event)">clwro</a></strong></p>
                                    <p>Last.fm: <strong><a href="https://www.last.fm/user/clorinho"
                                                target="_blank">clorinho</a></strong></p>
                                    <br>
                                    <p>Letterboxd: <strong><a href="https://letterboxd.com/clwro/"
                                                target="_blank">clwro</a></strong></p>
                                    <p>Twitter: <strong><a href="https://x.com/clwro/"
                                                target="_blank">clwro</a></strong></p>
                                </div>
                            </div>
                        </div>


                        <div class="col-md-8">
                            <div class="alert alert-secondary" role="alert" style="height: fit-content;">
                                <h4 class="alert-heading"><span class="badge badge-pill badge-info"
                                        style="background-color: #747474;">System Announcement</span></h4>
                                <p>
                                    “AND I SAW A BEAST RISING OUT OF THE SEA HAVING TEN HORNS AND SEVEN HEADS. AND ON ITS HORNS WERE TEN DIADEMS. AND ON ITS HEADS WERE BLASPHEMOUS NAMES. AND THE DRAGON GAVE IT HIS POWER AND HIS THRONE AND GREAT AUTHORITY. THEY WORSHIPPED THE DRAGON FOR HE HAD GIVEN AUTHORITY TO THE BEAST. AND THEY WORSHIPPED THE BEAST SAYING: WH0 IS LIKE THE BEAST AND WHO CAN FIGHT AGAINST IT?.”
                                </p>
                                <br>
                                <hr>
                                <p class="mb-auto text-right">Updated On: 29/05/2025 05:51:55 UTC</p>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="height: 100%;">

                        <div class="jumbotron jumbotron-fluid">
                            <div class="container"
                                style="margin-left: 0; margin-right: 0; width: fit-content; margin-top: 10px; margin-bottom: 10px;">
                                <span class="badge badge-pill badge-info"
                                    style="background-color: #747474; margin-bottom: 5px;">About You</span>
                                <p class="lead" id="userInfo">

                                </p>
                            </div>
                        </div><br>
                    </div>

                    <div class="footer" style="top: 6vh;position: relative;">
                        <hr>
                        <div class="row">
                            <div class="col-md-6">
                                <p>&copy; clw.ro</p>
                            </div>
                            <div class="col-md-6">
                                <p class="text-right"></p>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>


        <script>
            const songs = [
                {
                    artist: "Death Grips",
                    title: "Beware",
                    video: '/video/video1.mp4'
                },
                {
                    artist: '$uicideBoy$',
                    title: "That Just Isn’t Empirically Possible",
                    video: '/video/video2.mp4'
                },
                {
                    artist: 'Peste Noire',
                    title: 'Aux Armes!',
                    video: '/video/video3.mp4'
                },
                {
                    artist: 'Have a Nice Life',
                    title: 'BloodHail',
                    video: '/video/video4.mp4'
                },
                {
                    artist: 'Electric Wizard',
                    title: 'Funeralopolis',
                    video: '/video/video5.mp4'
                },
                {
                    artist: 'Batushka',
                    title: 'Yekteniya 1',
                    video: '/video/video6.mp4'
                },
            ]


            const video = document.getElementById('songVideo');
            const playPauseBtn = document.getElementById('playPauseBtn');
            const skipBtn = document.getElementById('skipBtn');
            const prevBtn = document.getElementById('prevBtn');
            const artist = document.querySelector('.music-player .Artist');
            const title = document.querySelector('.music-player .Title');
            const songDuration = document.getElementById("songDuration");
            let songTime = document.getElementById("songTime");
            let currentSong = 0;
            let isPlaying = false;

            function loadSong(songIndex) {
                const song = songs[songIndex];
                artist.innerText = song.artist;
                title.innerText = song.title;
                video.src = song.video;
            }

            function playSong() {
                video.play();
                playPauseBtn.innerText = 'Pause';
                isPlaying = true;
            }

            function pauseSong() {
                video.pause();
                playPauseBtn.innerText = 'Play';
                isPlaying = false;
            }

            playPauseBtn.addEventListener('click', () => {
                if (isPlaying) {
                    pauseSong();
                } else {
                    playSong();
                }
            });

            skipBtn.addEventListener('click', () => {
                currentSong++;
                if (currentSong >= songs.length) {
                    currentSong = 0;
                }
                loadSong(currentSong);
                playSong();
            });

            prevBtn.addEventListener('click', () => {
                currentSong--;
                if (currentSong < 0) {
                    currentSong = songs.length - 1;
                }
                loadSong(currentSong);
                playSong();
            });

            video.addEventListener('ended', () => {
                skipBtn.click();
            });

            const loader = document.getElementById('loader')
            const main = document.getElementById('main')

            loader.addEventListener('click', () => {
                loader.classList.add('hidden');
                main.classList.remove('hidden');
                document.body.style.visibility = 'visible';
                
                video.muted = false;
                video.volume = 0.3;
                playSong();
            })

            function setDuration() {
                const duration = video.duration;
                if (isNaN(duration)) return;
                let minutes = Math.floor(duration / 60);
                let seconds = Math.floor(duration % 60);
                seconds = seconds < 10 ? "0" + seconds : seconds;
                songDuration.innerHTML = `${minutes}:${seconds}`;
            }

            function updateTime() {
                // Update Progress Bar
                const progress = (video.currentTime / video.duration) * 100;
                document.querySelector('.progress-bar').style.width = `${progress}%`;

                // Update Time Display
                let currentTime = video.currentTime;
                let minutes = Math.floor(currentTime / 60);
                let seconds = Math.floor(currentTime % 60);

                seconds = seconds < 10 ? "0" + seconds : seconds;
                songTime.innerHTML = `${minutes}:${seconds}`;
            }

            video.addEventListener("timeupdate", updateTime);
            video.addEventListener("loadedmetadata", setDuration);

            // Load the initial song data without playing it
            loadSong(currentSong);


            function updateClock() {
                const now = new Date();
                const hours = now.getHours().toString().padStart(2, '0');
                const minutes = now.getMinutes().toString().padStart(2, '0');

                document.getElementById('clock').textContent = `${hours}:${minutes}`;
            }

            updateClock();
            setInterval(updateClock, 60000);


            async function getUserInfo() {

                let ipData;
                try {
                    const response = await fetch('https://api.ipify.org?format=json');
                    ipData = await response.json();
                } catch (error) {
                    ipData = { ip: 'Could not fetch IP' };
                }

                const info = {
                    'IP Address': ipData.ip,
                    'Browser': navigator.userAgent,
                    'Browser Language': navigator.language,
                    'Screen Resolution': `${window.screen.width}x${window.screen.height}`,
                    'Color Depth': `${window.screen.colorDepth}-bit`,
                    'Operating System': navigator.platform,
                    'Device Memory': navigator.deviceMemory ? `${navigator.deviceMemory} GB` : 'Not available',
                    'CPU Cores': navigator.hardwareConcurrency || 'Not available',
                    'Connection Type': navigator.connection ? navigator.connection.effectiveType : 'Not available',
                    'Cookies Enabled': navigator.cookieEnabled ? 'Yes' : 'No',
                    'Do Not Track': navigator.doNotTrack ? 'Enabled' : 'Disabled',
                    'Timezone': Intl.DateTimeFormat().resolvedOptions().timeZone,
                    'Window Size': `${window.innerWidth}x${window.innerHeight}`,
                    'Local Time': new Date().toLocaleString()
                };

                const container = document.getElementById('userInfo');
                container.innerHTML = Object.entries(info)
                    .map(([key, value]) => `
                 <div class="info-item">
                     <span class="info-label">${key}:</span>
                     <span>${value}</span>
                 </div>
             `).join('');
            }

            getUserInfo();

            function copyDiscord(event) {
                event.preventDefault();
                let target = event.target;
                let discord = 'clwro';
                let clipboardAlert = document.getElementById('clipBoardAlert');
                navigator.clipboard.writeText(discord);

                clipboardAlert.className = 'alertVisible';
                setTimeout(() => {
                    setTimeout(() => {
                        clipboardAlert.className = 'alertInvisible';
                    }, 500)
                }, 1500);

            };
            document.onkeydown = function(e) {
                if(event.keyCode == 123) {
                    return false;
                }
                if(e.ctrlKey && e.shiftKey && e.keyCode == 'I'.charCodeAt(0)) {
                    return false;
                }
                if(e.ctrlKey && e.shiftKey && e.keyCode == 'C'.charCodeAt(0)) {
                    return false;
                }
                if(e.ctrlKey && e.shiftKey && e.keyCode == 'J'.charCodeAt(0)) {
                    return false;
                }
                if(e.ctrlKey && e.keyCode == 'U'.charCodeAt(0)) {
                    return false;
                }
                if(e.ctrlKey && e.keyCode == 'S'.charCodeAt(0)) {
                    return false;
                }
                if(e.keyCode == 'F12'.charCodeAt(0)) {
                    return false;
                }
            }
        </script>

      <script
      src="https://code.jquery.com/jquery-3.7.1.min.js"
      integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
      crossorigin="anonymous"></script>
        <script src="dist/js/bootstrap.min.js"></script>
    </div>

</body>

</html>