<!--GRRRRRR GET OUT OF HERE WHAT ARE YOU DOING GRRRRRR
                                                      :---:.                                                                  
                                                  .+#+: .:++#@@#-.                                                            
                                                 :%-             :*@=                                                         
                                                -%.                 .%+.                                                      
                                               -%.                    :%: :%%@%%%##=:....-*%*.                                
                                              -%                       .%.                  .#-                               
                                             .%:    ..          .::.    =*                    *%                              
                                             -#   -*##*:      .+####-   .@.                   :@                              
                                             #=   -*##*:      .-*##+.   .@.                   -%                              
                                       :+#@= #=     ...         ...     .@.                   +*     --.                      
                                 .+#%#=.     .%.   ...=*###%###*#=.  *@.:%.                   +*    #+..#=                    
                            .-#@*-            :%#@+@-::@*  %#  .@%#-+@@@@-  .:       .        +*  :@-    -@=                  
                           :%.          .:+*=  :@@+%@. *@# +@#  %-+# ##%%    :#%..=%@+        +* +#        -@-                
                           .%:      .*%+:.      +=%@+%:=*+#-#-%.@* =#-#%:       -%*.:@.       +%@:        -- :@=              
                            @.     :@.         =# .%=.%#*=+@# :@@#..*@#%-          +%@:       ##        :%-.*%*=%*.           
                            @.     :%          @-  ..  --++:-  =@#++===@=*@-.        .-%%-    +%      .%=       ...           
                            @.     :@          @.  %=  .+%%%+ +@:..        .+@+          :@:         +#.                      
                            @.     .@.         #*     =%    :  :.:=#@%+.-#@%%%%+%#.       %:       +%.                        
                            @.      %-          :%*:  :%            .%@#          =%      %:     *%.                          
                            @.      *-             +#          %%****+:            %:     *@. -##.                            
                            @:      +*             %- -         +#                 %:     +%**-                               
                            #=      =*            =# +@-  =#.    -%.               %:     -%                                  
                           .*#      =*..         .@:+#-%  .%%#    .%-              %:     .@                                  
                      .=@%=:        .:..=%%:     =%%=  #-  ++.#+    #=             %:     .@.                                 
                    +%=-**%@#      .++-.   =#.   ..    .%. *+  .*%=:=#            :@       #+.                                
                    .::=%*.  .: :%%=  .:=*###:          .%.+=      ::.          .:#+        .*@:                              
                     .%-  -#@@-#+                        :%%=                .*%=:            .**.                            
                     +#*@*::%.+#                                            =%..-+#+          #=:#+                           
                           :@**                                            .%*-.   +#   -@:   .%*#@@*.                        
                            ::                                                      +#  :#+%:  .%.                            
                                                                                     ** :#  =%=:%.                            
                                                                                      **-#     :=.                            
                                                                                       #%-                                    
                                                                                                                              
                                                                                                                              
                          =:-= =:  - : :- .:=. ..-=.:+-:+-.=.: :: ... :+:.. :-+- - :+:-+-+: =+:= .+=:+-.=..=                  
      .=##%*.       -#*- *+@#%-%%.#%:#**#*#+%*-%#*%=:+ :* +*=%*##*#-#**%#-#**.* *%-:*.:*.%@+.+*@@@*::+.*#**#=++      :%@=     
          .+@@#-       .. . -       .         . .    .  . ..                 ..   . . ...#+:@***.%=  . .. .*@:     -%@+       
                -*:         .+#@+     . .  .  .            .     .  .:=#@@-  .:%@+..  -@-=#.+%*#-       .#@=     =@%.         
         .#%=     .*%=   =##+*#.*%%@#*+*%+=##@%#+#%:*#.###%**##%@@#%#*#*-%%%@@@@%@%@@%*+-. .-:    -#. :%@*#@. .+@-            
   :.        :*: =.   :#%+. :..: ::+:-@@@#=:.. .:+@@*-:: :-+.: :: .-+.: .. :-=.:-@*..-=         +#=.%@@@#.  =@@%.             
   +#-+%%*:   .#@@=+%=    :#%*-          - :#@#-   .: .:=#@%=:.               -...=%#.         ..#:.@@-  -%*%:                
     :%*.  :#%+. *##%:-@+  ..+**#@=             :*%%=-#@#-.    .:-:        .-%@@@-      .+*--   -           .*#.              
        :%*.   :*%=+%-+%-.+%-  .:+*+:..               :---::=*%@##*=-.:-#@@%=:       .-*#**+.            +@+.                 
           .#%-    -%+=%+*%:+.  **-.-*#**=:.    +#%#=.           :==-.             .=++#+..=+.        .*-   -.                
          #@**%%@%+.  :#@#%%%@@%+:.-+######***=:      .=-:                     ..-+=:*=.        .*.+%@@# .#= .#=              
            :*@=.        *%%@@@##*@@@#:.:=*#*##**-:        =*+=-:..           .-:.      .==   :#+   ..:@=*-    .#-            
                .=#%%*++--.    .@@-#=.@@%=             .:.=+--**######*+=.           -%#.+* =%-:.      %+    .-. .%.          
                  .*%%+:.    .:-:=@@@@%=-@@%-    -=:.    .:-==**=.....            :#*. :%:##.  .%. .:+%@@%%@=% .*%=-%.        
                 %-   .:+=:.*@@@@#==*@@@+. .:#@@@*-:....                      :#@#.  :@%%- .:=#%#+:..:=@@#=#=      -%@%.      
                  .......  -*%@%@@@@*:   --.=%@#=+%@+:=+#@@@%@%@@@%@%##++#@+%%%.   .-=#**=.  :*@@#+-:..@-             .**     
                              #-  .%+*%@@#-.      -*%@@@*:    -%+-@@*-=@@@@#*-                  .     :@=.=%@*                
                              .#-  .%      .-#@%+    +=  :=:      +@@*@@@@.            .**%@@@@@@@%%%%@@%##+:                 
                                %:  :%               -@@@:    .+#%@@@@@@@@@@#*=-+**+-. ...:=%@%*#.    -@-                     
                                 #=  **              .@:::::*%#=      .............:---------::#-.    ++%=                    
                                 .%-  :%-                                                    .-%      +@--%                   
                             .*%+:.      ::-#%*-                                         -#%+-:*      :%. :%.                 
                          :%#+#@%-=@=  #%****%%@@@*                                  #@@%#%%@#-%=@#-#@@#:  .%.                
                        :@#:.*%%@=%: +#                                                         **%=+%=*%+%#.=*               
                        :  .@@- .%:.%:                                                           :@+#  -%*%#:*@@=             
                          +@:  :%:#+                                                               -%@:   :*@@:               
                              +@%:                                                                   =@%                      
                                                                                                       ..                     
                                                                                                                            
-->

<!------------------------------
|   Author: Sandra Johansen     |
|   filename: FrontPage.html    |
 ------------------------------->
<!--  
    ACCESIBILITY:
    https://www.quora.com/How-do-you-add-alt-tags-to-links
    Aria labels used for recognizable names for interacting
    Alt labels used for non-interactable, like img's

-->


<!DOCTYPE html>
<html>
    <head>

        <!--------------------------------- 
        |   fancy pants styling section   |
        ----------------------------------->

        <!-- stylesheets -->
         <link rel="stylesheet" href="/code/CSS/FRONTPAGECSS/frontPage.css">
         <link rel="stylesheet" href="/code/CSS/FRONTPAGECSS/updates.css">
         <link rel="stylesheet" href="/code/CSS/FRONTPAGECSS/fireFlies.css">


        <!-- javascript import -->
        <script src="/code/JS/updates.js"></script>
        <script src="/code/JS/ratSnooze.js"></script>
        <script src="/code/JS/Ok.js"></script>

        <title>
            Lil'sibs Neocity!
        </title>

    </head>
    
    <body class="body">

        <!-- background image -->
        <img 
        class="backgroundImage pixel" 
        src="/code/IMG/frontpage/frontPage.png"
        alt="A hallway with a post in the middle. 
             On the post is a cork board with various 
             signs showing my interests, a sign
             you can click to link back to here, and a 
             recents board, showing recent updates.
             At the bottom of the post there is a table,
             with a guest book to the left, a little note 
             with drawings on it in the middle, and two candles
             you can click on/off to the right.
             To the left of the post is a gallery wall,
             containing clickable frames with mock-ups of
             different famous paintings. Clicking any frame
             will allow you to navigate freely between the categories,
             each of which contains some category of my art.
             To the right of the post is a library wall. Here, there's
             a cabinet with different categories, which all link to some
             version of information regarding me or the projects I have done."   
        >

        <!---------------
            FIREFLIES
        ----------------->

        <div class="fireContainerLeft">
            <img 
            class="fireFlies f1"
            src="/code/IMG/frontpage/Fireflies.gif"
            >

            <img 
            class="fireFlies f2"
            src="/code/IMG/frontpage/Fireflies.gif"
            >

            <img 
            class="fireFlies f3"
            src="/code/IMG/frontpage/Fireflies.gif"
            >
        </div>

        <div class="fireContainerMid">
            <img 
            class="fireFlies f4"
            src="/code/IMG/frontpage/Fireflies.gif"
            >

            <img 
            class="fireFlies f5"
            src="/code/IMG/frontpage/Fireflies.gif"
            >

            <img 
            class="fireFlies f6"
            src="/code/IMG/frontpage/Fireflies.gif"
            >

            <img 
            class="fireFlies f7"
            src="/code/IMG/frontpage/Fireflies.gif"
            >

            <img 
            class="fireFlies f8"
            src="/code/IMG/frontpage/Fireflies.gif"
            >
        </div>

        <div class="bug">
            <img 
            class="b1"
            src="/code/IMG/frontpage/bug1.gif"
            >
        </div>
        

        <!--------------
        |   CLICKABLES  |
        ---------------->

        <!-- gallery wall -->
        <a href="/code/HTML/GALLERY/allArt.html"
            class="frame1 clickZone"
            aria-label="All Art. This is a frame, clicking it will link to the
                        All Art section of the gallery"
            style="text-decoration: none;"
            >
            <img class="fit one pixel" src="/code/IMG/frontpage/allArtHover.png">
        </a>

        <a href="/code/HTML/GALLERY/pen-on-paper.html"
            class="frame2 clickZone"
            aria-label="Pen on paper. This is a frame, clicking it will link to the
                        Pen on Paper section of the gallery"
            style="text-decoration: none;"
            >
            <img class="fit two pixel" src="/code/IMG/frontpage/irlArtHover.png">
        </a>

        <a href="/code/HTML/GALLERY/sprites.html"
            class="frame3 clickZone"
            aria-label="Sprites. This is a frame, clicking it will link to the
                        Sprites section of the gallery"
            style="text-decoration: none;"
            >
            <img class="fit three pixel" src="/code/IMG/frontpage/spritesHover.png">
        </a>

        <a href="/code/HTML/GALLERY/favourites.html"
            class="frame4 clickZone"
            aria-label="Favourites. This is a frame, clicking it will link to the 
                        Favourites section of the gallery"
            style="text-decoration: none;"
            >
            <img class="fit four pixel" src="/code/IMG/frontpage/favoritesHover.png">
        </a>

        <a href="/code/HTML/GALLERY/NSFW.html"
            class="frame5 clickZone"
            aria-label="Commisions. This is a frame, clicking it will link to the
                        commisions section of the gallery"
            style="text-decoration: none;"
            >
            <img class="fit five pixel" src="/code/IMG/frontpage/commisionsHover.png">
        </a>

        <a href="/code/HTML/GALLERY/gallerySketchyard.html"
            class="frame6 clickZone" 
            aria-label="Sketches. This is a frame, clicking it will link to the sketchyard,
                where I keep my overview of sketches I'll never finish."
            style="text-decoration: none;"
            >
            <img class="fit six pixel" src="/code/IMG/frontpage/sketchyardHover.png">
        </a>

        <a href="/code/HTML/GALLERY/purgatory.html"
        class="frame7 clickZone" 
        aria-label="Sketches. This is a frame, clicking it will link to the sketchyard,
            where I keep my overview of sketches I'll never finish."
        style="text-decoration: none;"
        >
            <img class="fit seven pixel" src="/code/IMG/frontpage/purgatoryHover.png">
        </a>

        <!-- library cabinet -->
        <a href="/code/HTML/LIBRARY/AllCodeLib.html"
            class="allCode clickZone"
            aria-label="This is the 'All Code' cabinet drawer in the
                        library. Click it to go to all code I have ever written"   
            >
        </a>

        <a href="/code/HTML/LIBRARY/PersonalLib.html"
            class="Personal clickZone"
            aria-label="This is the 'Personal' cabinet drawer in the
                        library. Click it to learn a little about me"   
            >
        </a>

        <a href="/code/HTML/LIBRARY/ProfessionalLib.html"
            class="Professional clickZone"
            aria-label="This is the 'Professional' cabinet drawer in the
                        library. Click it to learn a little about my professional life"   
            >
        </a>

        <a href="/code/HTML/LIBRARY/FindMeLib.html"
            class="findMe clickZone"
            aria-label="This is the 'Find Me' cabinet drawer in the
                        library. Click it to find me on any internet site I'm
                        on and willing to link to"   
            >
        </a>

        <a href="/code/HTML/LIBRARY/PeersEtAlLib.html"
            class="peersEtAl clickZone"
            aria-label="This is the 'Peers/Et.Al' cabinet drawer in the
                        library. Click it to go to Peers/Et.Al, where I'll
                        give a quick overview of people I've worked with"   
            >
        </a>

        <!-- board -->
        <a href="/code/HTML/GUESTBOOK/GuestBook.html"
            class="guestBook clickZone"
            aria-label="This is the guest book. Click here
                        to see previous messages!
                        non functional"
            >
        </a>

        <a href="/code/HTML/GUESTBOOK/GuestBook.html"
            class="quill clickZone"
            aria-label="This is the quill for the guest book.
                        Click here to leave a message of your own! 
                        non functional."
            >
        </a>

        <!-- RAT -->
        <img id="ratIMG" 
        class="ratIMG pixel" 
        src="/code/IMG/frontpage/rat-47x103.png"
        >
        <script>
            ratSnooze()
        </script>

        <!-- SIB SIGN / LINK BACK -->
        <div class="sibSign"
            id="linkBack"
            onclick="copyToBoard()"
            aria-label="This is a sign with my name on it.
                        click here to copy the link to this webpage!"   
        >
            <div class="tooltip">
                link copied to clipboard! 
            </div>
        </div>

        <!-- candles -->
        <img id="candles" 
        class="candlesIMG pixel" 
        src="/code/IMG/frontpage/candle1-272x363.png"
        onclick="candleClick()"
        >

        <!-- lil guy -->
         <!-- <div class="lilGuy"
         onclick="changeGuy"
         aria-label="This is a little drawing. Click it
                    to change between drawings!"  
         >

         </div> -->

        <!-- recent updates board -->
        <div class="recent">
            <img class="recentOG" id="recentIMG" src="/code/IMG/frontpage/recentBasic.png">
            <div class="date" id="recentDate">
                19/11/2025
            </div>
            <div class="content" id="recentContent">
                Uploaded! have to fix the urls situation. Oh well
            </div>
            <div>
                <div class="rightArrow"
                onclick="pgFwd()"
                >                
                    <button
                        class="buttonArrowRight"
                    >
                    </button>
                    <img class="tempArrow" src="/code/IMG/frontpage/recentOldNewsOnlyFlip - Copy.png">

                </div>
                <div class="leftArrow"
                onclick="pgBck()"
                >
                    <button
                        class="buttonArrowLeft"
                    >
                    </button>
                    <img class="tempArrow" src="/code/IMG/frontpage/recentNewNews - Copy.png">
                </div>
            </div>
        </div>
   
        <!-- intro text -->
         <div class="introText">
            <p class="text">
                hello hello, welcome welcome!
                This is my hub of most things my life.
                You'll find art, code, personal interests, and hidden treassures.
                Every art-esque thing is by me, and as thus
                may NOT be used for anything by anyone at any point.
                The watermarks are due to my silly fear of people stealing art... sorry <br>
                Feel free to explore around and look at all the stuff! <br>
                I might keep it updated, if not then oh well.
            </p>
         </div>

         <div class="warning" id="warning">
            <p class="sysMessage">
                System Message
            </p>
            <p class="warningText">
                page still under development!
            </p>
            <p class="fakeButton" onclick="okay()">
                OK
            </p>
         </div>

    </body>

</html>