  <!----      
                                        _                  _____ _____ 
          /\ /\___  ___ _ __   __ _  __| | ___  ___        \_   \\_   \
        / //_/ _ \/ __| '_ \ / _` |/ _` |/ _ \/ __|_____   / /\/ / /\/
      / __ \ (_) \__ \ |_) | (_| | (_| |  __/\__ \_____/\/ /_/\/ /_  
      \/  \/\___/|___/ .__/ \__,_|\__,_|\___||___/     \____/\____/  
                    |_|                                             
      
      welcome to the code for my site , this is my first website
      it has been reiterated multiple times as i've learned bits and
      pieces from looking at other codes, keep in mind my code may be
      confusing and outright trash ! (ᵕ ´ ∇  ˋ ˶)
      if you're here it's because you really wanted to see the code so
      help yourself !
       ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠖⠃⠀⠀⠀⡁⠀⠀⠀⠀⠀⠐⠆⠀⠀⠀⠀⠀⠀⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡠⢔⡤⠊⠁⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠁⠀⠀⠀⠁⠀⠀⠘⠁⢀⠀⠀⠀⠀⢈⠓⠂⠠⡄⠀⠈⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⣶⠿⠞⠋⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠒⠁⠀⠠⡚⠁⢀⣙⣀⣈⡩⠬⢁⠀⢑⠶⠤⡆⠤⡀⠀⠀⠀⠀⠀⠀⢀⠴⢲⣋⣽⣷⠟⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠁⠀⢠⠀⠀⣶⠃⠗⣡⣶⣮⣿⡿⠿⠿⢿⣿⣷⣶⣤⣤⠤⠴⠦⠬⣤⣤⠄⣉⠉⠝⢲⣿⡷⠻⠂⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠀⠀⠀⠀⠁⡀⡸⠁⣰⣿⡿⠛⠋⣁⡀⠤⠤⢄⡀⠈⠛⢯⣿⣟⣾⣶⣶⣮⣭⣵⣾⣿⣟⠿⠉⢨⠖⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⠀⢠⠳⡧⣻⡿⠋⢀⠒⠉⠀⠀⠀⠀⠀⠀⠉⠢⠀⠀⠙⠛⣻⣿⣿⣿⢿⣿⣿⠟⡱⠖⠊⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠁⢠⣧⠓⣾⣿⠁⠀⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⢦⣠⣾⣿⠿⣿⣿⣿⡿⣫⠏⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡀⠀⠂⢃⣸⣿⠇⢠⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⣴⣿⠟⢿⠁⠸⡿⣿⣯⡶⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠁⢘⡄⠘⣿⣿⠀⠸⡀⠀⠀⠀⠀⠀⢀⣀⣴⣾⣿⡿⡟⡋⠐⡇⠀⢸⣿⣿⠃⠀⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢡⠘⢰⣿⡿⡆⠀⣇⠀⣀⣠⣤⣶⣿⢷⢟⠻⠀⠈⠀⠀⠀⡇⠀⣼⣿⣿⠂⠀⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⠔⢀⡴⢯⣾⠟⡏⢀⣠⣿⣿⣿⣟⢟⡋⠅⠘⠉⠀⠀⠀⠀⢀⠀⠁⢠⣿⣟⠃⠀⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⠞⣻⣷⡿⢙⣩⣶⡿⠿⠛⠉⠑⢡⡁⠀⠀⠀⠀⠀⠀⢀⠔⠁⠀⣰⣿⣿⡟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣡⣾⣥⣾⢫⡦⠾⠛⠙⠉⠀⠀⢀⣀⠀⠈⠙⠓⠦⠤⠤⠀⠘⠁⢀⡤⣾⡿⠏⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠔⣴⣾⣿⣿⢟⢝⠢⠃⢀⣤⢴⣾⣮⣷⣶⢿⣶⡤⣐⡀⠀⣠⣤⢶⣪⣿⣿⡿⠟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⡀⣦⣾⡿⡛⠵⠺⢈⡠⠶⠿⠥⠥⡭⠉⠉⢱⡛⠻⠿⣿⣿⣿⣿⣿⠿⠿⠿⠟⠭⠛⠂⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⢀⢴⠕⣋⠝⠕⠐⠀⠔⠉⠀⠀⠀⠀⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠁⠉⠁⠁⠁⠁⠈⠀⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⢀⣠⠁⠈⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ --->


<!DOCTYPE html>
<html>
   <head>
      <title>KOSPADES-II</title>
      <meta name="description" content="interstellar traveling with kospades-ii" />
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <link href="/img/favicons/ezgif.com-animated-gif-maker.gif" rel="icon" type="image/x-icon" />
      <script src="example.js"></script>
      <link rel="stylesheet" href="example.css" />
      <style>
      
      
      /*--------------- main container  --------------*/
      html, body, .container {
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
     background-color: #3c3836;

    font-family: MS PGothic;
     font-family: "MS UI Gothic", Tahoma;
            font-size: 12px;
            line-height: 13px;
            color:#504945;
            
            
              /*---------------no select--------------*/
              user-select: none; /* general */
              -webkit-user-select: none; /* chrome / safari */
              -moz-user-select: none; /* firefox */
              -ms-user-select: none; /* ie / edge */
              }

              /*---------------no image drag--------------*/
              img {
              user-drag: none;         /* general */
              -webkit-user-drag: none; /* chrome / safari */
              }

}

/*---------------crt--------------*/

/*on*/
.crt::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  background-size: 100% 2px, 3px 100%;
  z-index: 9999;
  pointer-events: none;
}

/*off*/
.crt.crt-off::before {
  content: none;
}

#toggleCRT { 
  padding: 4px 18px; 
  background: #f2f2f2;
  color: #000;
  border: 1px solid #000;
  font-family: PC98;
  cursor: pointer;
  z-index: 9999;  
  border-width: 1px;
  border-style: solid;
  border-color: #5e5e5e;
  box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
}

#toggleCRT:hover { 
  background: #fff;
  color: #000;
}

#toggleCRT:active {
  background: #fff;
  color: #000;
}

/*---------------crt end--------------*/


/*---------------main grid--------------*/


.container {  display: grid;
  grid-template-columns: 0.7fr 2.2fr 0.1fr;
  grid-template-rows: 0.5fr 2.1fr 1.1fr 0.3fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "home topbar topbar"
    "sidebar frame filler"
    "sidebar optionbox filler"
    "sidebar footer footer";
    width: 1200px;
    height: 880px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #3c3836;
    border: 1px solid #1d2021
    
}


.home { grid-area: home; padding:8px; background-color: #928374; }

.sidebar {  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 0.5fr 0.5fr 2fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "interaction 1"
    "interaction 2"
    ".";
  grid-area: sidebar;
  border: 2px solid #928374; background-color: #ebdbb2; }

.interaction 1 { grid-area: interaction 1; }

.interaction 2 { grid-area: interaction 2; }

.topbar { grid-area: topbar; border: 1px solid #928374; background-color: #ebdbb2; }

.optionbox {  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "button 1 button 4"
    "button 2 button 5"
    "button 3 button 6";
  grid-area: optionbox;
border: 1px solid #928374; background-color: #bdae93; }

.button 1 { grid-area: button 1; }

.button 2 { grid-area: button 2; }

.button 3 { grid-area: button 3; }

.button 5 { grid-area: button 5; }

.button 6 { grid-area: button 6; }

.button 4 { grid-area: button 4; }

.footer { grid-area: footer; border: 2px solid #928374; background-color: #ebdbb2;}

.filler { grid-area: filler; border: 1px solid #bdae93; background-color: #ebdbb2;}


    #homelink {
      border: 2px solid #928374;
      padding: 0.5px;
    text-decoration: none;
    color: rgb(0, 0, 0); 
    display: inline-block;
    background-color: #ebdbb2;
    border-radius: 5px;
    transition-property: background-image, color;
    height:60px;
    width: 420px;
    display: flex;
  justify-content: center;
  align-items: center; 

  }

  #homelink:hover {
    background-image: linear-gradient(to right, #ebdbb2 ,#eed1ab  );
    color: #d65d0e;
    
  }

.center {
  display: flex;
  justify-content: center;
  align-items: center; 
}

.pagedoll { grid-area: pagedoll; 
  position: absolute; 
  top: 410px;
  left: 0px;
  z-index: 30;}
  
  
#contentBox{
    position:absolute;
    top:109px;
    right:40px;
    width:878px;
    height:462px;
    overflow:hidden;
    z-index:1;
}

#scroller{
    width:100%;
    height:100%;
    border:none;
    background:white;
    overflow: auto;

    z-index:-1;
    position:absolute;
}

#scroller iframe {
    width: 100%;
    height: 100%;
    border: none;
    overflow: auto;
}

/*---------------grid end--------------*/

      /*--------------- aaaaaaaaaaaa --------------*/

</style>
   </head>
  <body>
  
  
  <div class="crt"></div>
  <div class="container">

<div class="pagedoll"><img id="pagedoll" src="https://kospades.neocities.org/webmaster/sprites/sona1.png" alt="banner" width="AUTO" height="500px">
            </div>
  <div class="home"></div>
  <div class="sidebar">
    <div class="interaction 1"></div>
    <div class="interaction 2"></div>
  </div>
  <div class="topbar"></div>
  <div class="center" id="contentBox" style="color:#d65d0e;"><iframe style="overflow:scroll;" ID="scroller" name="texter" scrolling="no"  src="https://kospades.neocities.org/img/movies/not_images/oversaturated_moon.jpg">
                </iframe></div>
  <div class="optionbox">
  

<div class="button 1 , center">
    <a id="homelink"
       href="#"
       onclick="showSection('home'); return false;">
        <p style="font-family:MS PGothic;font-size:12px;display:inline;padding:5px;">
            rEALLY COOL BUTTON
        </p>
    </a>
</div>

<div class="button 2 , center">
    <a id="homelink"
       href="#"
       onclick="showSection('about'); return false;">
        <p style="font-family:MS PGothic;font-size:12px;display:inline;padding:5px;">
            Who are you ??
        </p>
    </a>
</div>

<div class="button 3 , center">
    <a id="homelink"
       href="#"
       onclick="showSection('movies'); return false;">
        <p style="font-family:MS PGothic;font-size:12px;display:inline;padding:5px;">
            mvo
        </p>
    </a>
</div>

<div class="button 5 , center">
    <a id="homelink"
       href="#"
       onclick="showSection('games'); return false;">
        <p style="font-family:MS PGothic;font-size:12px;display:inline;padding:5px;">
            AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
        </p>
    </a>
</div>
    
    
    <div class="button 6 , center">
    <a id="homelink" target="_blank">
                  
                  <p style="font-family: MS PGothic; font-size: 12px; display: inline; padding: 5px;"> AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
                </a></div>
    
    
    <div class="button 4 , center">
    <a id="homelink" target="_blank">
                  
                  <p style="font-family: MS PGothic; font-size: 12px; display: inline; padding: 5px;"> AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
                </a></div>
  </div>
  <div class="footer"></div>
  <div class="filler"></div>
</div>
  
  
<script>
  
             // your friendly local website idk
     var originalTitle = document.title;
        
        document.addEventListener('visibilitychange', function() {
            if (document.visibilityState === 'hidden') {
                document.title = "no wait come back i miss you!";
            } else if (document.visibilityState === 'visible' && document.hasFocus()) {
                setTimeout(function() {
                    document.title = "YAAY HIII !! <3";
                    setTimeout(function() {
                        document.title = originalTitle;
                    }, 3000);
                }, 1000); 
            }
        });
        
        
/* ===========================
   PAGEDOLLS
=========================== */

const pagedolls = {

home:
"https://kospades.neocities.org/webmaster/sprites/sona1.png",

about:
"https://kospades.neocities.org/webmaster/sprites/sona1.png",

movies:
"https://kospades.neocities.org/images/haiii.png",

games:
"https://neocities.org/site_thumbnails/42/44/kospades/images/woohoo.jpg.210x158.webp"

};

/* ===========================
   SECTION SWITCHING
=========================== */
function showSection(section){

    document.getElementById("pagedoll").src =
        pagedolls[section];

    const frame =
        document.getElementById("scroller");

    if(section === "home"){
        frame.src = "/webmaster/likes.html";
    }

    if(section === "about"){
        frame.src = "/webmaster/yapping/about";
    }

    if(section === "movies"){
        frame.src = "/webmaster/games.html";
    }

    if(section === "games"){
        frame.src = "/webmaster/games.html";
    }

}
        
        
      //  no right click and no image dragging, 
    //  i don't like when my art is stolen
    
  // disable right-click context menu
  
  document.addEventListener('contextmenu', function (event) {
    event.preventDefault();
  });

  // disable image dragging
  window.onload = function() {
    const images = document.getElementsByTagName('img');
    for (let i = 0; i < images.length; i++) {
      images[i].setAttribute('draggable', 'false');
    }
  };
  
  
</script>
  
  </body>
</html>