controls overlay
[carveJwlIkooP6JGAAIwe30JlM.git] / web / index.php
index 7bb7d9eed17dbf7dbfab60df84d2383c9304a70e..4070e217bdfb8a51b9c1660f7b68984b520fea7a 100755 (executable)
 <?php
  $page = "main";
  if( isset( $_GET["page"] ) ){
-      $page = $_GET["page"];
  }
  function srpage($name,$display){
-      global $page;
-      if($name==$page){
-         echo "<div class=\"navitemsel\">";
-         echo "<p>".$display."</p></div>";
-      }
-      else{
-         echo "<a href=\"index.php?page=".$name."\">";
-         echo "<div class=\"navitem\">";
-         echo "<p>".$display."</p></div></a>";
-      }
  }
+ $page = "main";
+ if( isset( $_GET["page"] ) ){
+  $page = $_GET["page"];
+ }
+ function srpage($name,$display){
+  global $page;
+  if($name==$page){
+   echo "<div class=\"navitemsel\">";
+   echo "<p>".$display."</p></div>";
+  }
+  else{
+   echo "<a href=\"index.php?page=".$name."\">";
+   echo "<div class=\"navitem\">";
+   echo "<p>".$display."</p></div></a>";
+  }
+ }
 ?>
 <!DOCTYPE html>
 <html lang="en">
 <head>
-   <link rel="apple-touch-icon" sizes="180x180" 
-         href="/apple-touch-icon.png?v=Gv66x0ewwj">
-   <link rel="icon" type="image/png" sizes="32x32" 
-         href="/favicon-32x32.png?v=Gv66x0ewwj">
-   <link rel="icon" type="image/png" sizes="16x16" 
-         href="/favicon-16x16.png?v=Gv66x0ewwj">
-   <link rel="manifest" href="/site.webmanifest?v=Gv66x0ewwj">
-   <link rel="mask-icon" href="/safari-pinned-tab.svg?v=Gv66x0ewwj" 
-         color="#5bbad5">
-   <link rel="shortcut icon" href="/favicon.ico?v=Gv66x0ewwj">
-   <meta name="msapplication-TileColor" content="#da532c">
-   <meta name="theme-color" content="#ffffff">
-   
-   <meta charset="utf-8">
-   <meta http-equiv="X-UA-Compatible" content="IE=edge">
-   <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="apple-touch-icon" sizes="180x180" 
+   href="/apple-touch-icon.png?v=Gv66x0ewwj">
+ <link rel="icon" type="image/png" sizes="32x32" 
+   href="/favicon-32x32.png?v=Gv66x0ewwj">
+ <link rel="icon" type="image/png" sizes="16x16" 
+   href="/favicon-16x16.png?v=Gv66x0ewwj">
+ <link rel="manifest" href="/site.webmanifest?v=Gv66x0ewwj">
+ <link rel="mask-icon" href="/safari-pinned-tab.svg?v=Gv66x0ewwj" 
+   color="#5bbad5">
+ <link rel="shortcut icon" href="/favicon.ico?v=Gv66x0ewwj">
+ <meta name="msapplication-TileColor" content="#da532c">
+ <meta name="theme-color" content="#ffffff">
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+
+ <style>
+  :root{
+   --k_ui_bg0: #1d2021;
+   --k_ui_bg1: #282828;
+   --k_ui_bg2: #3c3836;
+   --k_ui_bg3: #504945;
+   --k_ui_bg4: #665c54;
+   --k_ui_bg5: #7c6f64;
+   --k_ui_bg6: #928374;
+   --k_ui_bg7: #a89984;
+   --k_ui_fg0: #ebdbb2;
+   --k_ui_fg1: #fbf1c7;
+   --k_ui_fg2: #d5c4a1;
+   --k_ui_fg3: #bdae93;
+   --k_ui_fg4: #a89984;
+   --k_ui_fg5: #000000;
+   --k_ui_fg6: #000000;
+   --k_ui_fg7: #000000;
+   --k_ui_red0:    #cc241d;
+   --k_ui_orange0: #d65d0e;
+   --k_ui_yellow0: #d79921;
+   --k_ui_green0:  #98971a;
+   --k_ui_aqua0:   #689d6a;
+   --k_ui_blue0:   #458588;
+   --k_ui_purple0: #b16286;
+   --k_ui_gray0:   #928374;
+   --k_ui_red1:    #fb4934;
+   --k_ui_orange1: #fe8019;
+   --k_ui_yellow1: #fabd2f;
+   --k_ui_green1:  #b8bb26;
+   --k_ui_aqua1:   #8ec07c;
+   --k_ui_blue1:   #83a598;
+   --k_ui_purple1: #d3869b;
+   --k_ui_gray1:   #a89984;
+  }
+
+  table, th, td {
+   border:1px solid var(--k_ui_bg3);
+  }
+
+  body {
+   font-family:      'Roboto Condensed', sans-serif;
+   color:            var(--k_ui_fg4);
+   background-color: var(--k_ui_bg0);
+   background-image: url("bg.jpg");
+   background-size: cover;
+   background-attachment: fixed;
+   background-position: center;
+   padding-left:     0px;
+  }
+
+  h1, h2 {
+   color:     var(--k_ui_fg0);
+   display:   inline;
+  }
+  h3 {
+   color:   var(--k_ui_fg0);
+   display: inline;
+  }
+  a {
+   color: var(--k_ui_fg2);
+  }
+  a:hover{
+   color: var(--k_ui_orange1);
+  }
+  hr {
+   height: 20px;
+   border: 0;
+   box-shadow: inset 0 20px 12px -17px rgba(0, 0, 0, 0.34);
+  }
+  pre {
+   white-space: pre-wrap;
+  }
+
+
+  /* Content Wrapper */
+  .content {
+   margin: auto;
+   width: 98%;
+   max-width: 1200px;
+   padding-left: 0px;
+   /* background-color: var(--k_ui_bg1); */
+   color: var(--k_ui_fg0);
+  }
+  .realcontent {
+   background-color: var(--k_ui_bg1);
+   color: var(--k_ui_fg2);
+   outline-style: solid;
+   outline-width: 1px;
+   outline-color: var(--k_ui_bg4);
+   margin-left:   201px;
+   overflow-y:scroll;
+   box-shadow: 0px 0px 12px 1px rgba(0,0,0,0.5);
+   min-height: 600px;
+  }
+  .realcontent > p {
+   font-size: 19px;
+  }
+  .subcontent {
+   padding: 10px;
+   box-shadow: inset 0 20px 20px -20px rgba(0, 0, 0, 0.34);
+  }
 
-   <style>
-      body {
-         /*font-family: 'Roboto Condensed', sans-serif;*/
-         color: #CCC;
-         background-color: #050505;
-         padding-left: 0px;
-      }
-      h1, h2 {
-         color: #FFF;
-         display: inline;
-         font-size: 38px;
-      }
-      h3 {
-         color: #FFF;
-         display: inline;
-      }
-      .pagelink{
-      }
-      .right{
-         position: absolute;
-         right: 0;
-         bottom:0;
-      
-         padding-right: 32px;
-      }
-      .gallery-sqr {
-         font-size:0;
-      }
-      .gallery-sqr > div > img {
-         width: 100%;
-      }
-      .gallery-sqr > div {
-         width: 100%;
-         display: inline-block;
-         box-sizing: border-box;
-         padding: 3px;
-         
-         position: relative;
-      }
-      .gallery-big > img {
-         width: 100%;
-      }
-      /* Content Wrapper */
-      .content {
-         margin: auto;
-         width: 98%;
-         
-         box-shadow: 0px 0px 13px 3px rgba(0,0,0,0.5);
-         padding-left: 0px;
-         background-color: #101010;
-         color:#FFF;
-         border: 1px solid #000;
-         position: relative;
-         min-height: 700px;
-      }
-      .subcontent {
-         padding: 8px;
-      }
-      .navside {
-         background-color: #211;
-         color: #EEE;
-         padding: 0px;
-         display:block;
-         width: 100%;
-      }
-      .navside > a {
-         text-decoration:none;
-         color:#ddd;
-      }
-      .navitem {
-         background-color: #301717;
-         padding: 8px;
-         box-shadow: inset -20px 0 18px -22px #150808;
-      }
-      .navitem:hover{
-         background-color: #444;
-      }
-      .navitemsel {
-         background-color: #701010;
-         padding: 8px;
-         border: 1px solid #722;
-         width:auto;
-         /*box-shadow: inset -20px 0 10px -20px #111;*/
-      }
-      .navside > .navselect {
-         background-color: #111;
-      }
-      .realcontent {
-         outline-style: solid;
-         outline-width: 1px;
-         outline-color: #222;
-         min-height: 700px;
-      }
-      .realcontent > p {
-         font-size: 19px;
-      }
-      .nav {
-         background-color: #171717;
-         font-size: 0;
-         color: #EEE;
-         padding: 0px;
-      }
-      .nav > div {
-         background-color: #222;
-         display: inline-block;
-         padding: 0px;
-         font-size: 26px;
-         padding-right: 30px;
-         padding-left: 30px;
-      }
-      .nav > .navselect {
-         background-color: #111;
-      }
-      .superbar {
-         background-color: #111;
-         font-size: 20px;
-      }
-      .header {
-         padding: 8px;
-         background-color: #111;
-      }
-      .overlay {
-         font-size:15px;
-         width: 100%;
-         height: 100%;
-         position: absolute;
-         top: 0;
-         left: 0;
-         padding: 15px;
-         box-sizing: border-box;
-         transition: opacity 0.3s linear;
-         color: #FFF;
-         opacity: 0.7;
-         background-color: rgba( 0, 0, 0, 0.05 );
-         user-select: none;
-      }
-      .overlay:hover{
-         opacity: 0.9;
-         border: 1px solid #888;
-      }
-      .overlay > h1{
-         bottom: 0;
-         position: absolute;
-      }
-      /* Desktop Fixups */
-      @media only screen and (min-width: 768px) {
-         .gallery-sqr > div {
-            width: 50%;
-         }
-         .content {   
-            width: 90%;
-         }
-         .overlay {
-            opacity: 0.0;
-            background-color: rgba( 0, 0, 0, 0.3 );
-         }
-         .navside {
-            display: block;
-            width: 200px;
-            background-color: #211;
-            color: #EEE;
-            padding: 0px;
-            float: left;
-            height: 100%;
-            position: absolute;
-            box-shadow: inset -20px 0 18px -22px #150808;
-         }
-         .realcontent {
-            margin-left: 201px;
-         }
-         .navitemsel {
-            background-color: #101010;
-            border: 1px solid #222;
-            width:184px;
-            border-right: 0;
-         }
-      }
-      /* Big man monitors */
-      @media only screen and (min-width: 1200px) {
-         .gallery-sqr > div {
-            width: 25%;
-         }
-         .content {   
-            width: 80%;
-         }
-      }
-   </style>
-   <title>Skaterift</title>
+  /* Navigation panel */
+  .navpanel {
+   width: 200px;
+   float: left;
+   position: sticky;
+   top: 0;
+  }
+  .navside {
+   padding: 0px;
+   background-color: var(--k_ui_bg2);
+   box-shadow: inset -20px 0 18px -22px #080808;
+  }
+  .navside > a {
+   text-decoration:none;
+   color: var(--k_ui_fg1);
+  }
+
+  .navitem {
+   background-color: var(--k_ui_bg3);/*#301717;*/
+   padding: 8px;
+   box-shadow: inset -20px 0 18px -22px #080808;
+   border: 1px solid var(--k_ui_bg2);
+  }
+  .navitem:hover{
+   background-color: #444;
+  }
+
+  .navitemsel {
+   background-color: var(--k_ui_bg1);
+   color: var(--k_ui_fg0);
+   padding: 8px;
+   border: 1px solid var(--k_ui_bg4);
+   border-right: 0;
+   width:184px;
+  }
+
+  @media only screen and (max-width: 750px) {
+   .navpanel {
+    width: auto;
+    float: none;
+    position: static;
+   }
+   .navitemsel {
+    width: auto;
+    border: 1px solid var(--k_ui_fg0);
+    background-color: var(--k_ui_bg4);
+    color: var(--k_ui_fg1);
+   }
+   .realcontent {
+    margin-left: auto;
+   }
+  }
+ </style>
+ <title>Skaterift</title>
 </head>
 
 <body>
-   <div class="content">
-      <div class="navside">
-         <a href="index.php">
-         <div class="navitem" 
-              style="padding:15px; margin:auto; text-align: center;">
-            <!--<img src="img/cvxr_small.png" width="100%"/>-->
-            <p>Skaterift</p>
-         </div>
-         </a>
-         <div style="padding:15px; text-align: center;">
-            <h3>Menu</h3>
-         </div>
-         <?php
-            srpage( "main", "About" );
-            srpage( "leaderboards", "Leaderboards" );
-         ?>
-         <div style="padding:15px; text-align: center;">
-            <h3>Workshop</h3>
-         </div>
-         <?php
-            srpage( "wiki", "Wiki" );
-            srpage( "board_guide", "Custom board guide" );
-            srpage( "world_guide", "World guide" );
-         ?>
-         <br>
-<!--
-         <a href="index.php?page=building">
-         <div class="navitem">
-            <p>Building</p>
-         </div>
-         </a>
-         <br>
-         <center>
-         <p>
-            <a href="git/?p=convexer.git;a=tree">Source Code</a>
-         </p>
-         </center>
--->
-      </div>   
-      <div class="realcontent">
-      <?php
-         $content = "frag/".$page.".html";
-         if( !file_exists( $content ) ){
-            $content = "frag/sr404.html";
-         }
-         echo file_get_contents( $content );
-      ?>
-      </div>
+ <center>
+  <br>
+  <img src="skaterift.svg" style="max-height:110px; max-width:100%;"/>
+  <br><br>
+ </center>
+ <div class="content">
+  <div class="navpanel">
+   <br>
+   <div class="navside">
+    <div style="padding:15px; text-align: center;">
+     <h3>Menu</h3>
+    </div>
+    <?php
+     srpage( "main", "About" );
+     //srpage( "leaderboards", "Leaderboards" );
+    ?>
+    <div style="padding:15px; text-align: center;">
+     <h3>Workshop</h3>
+    </div>
+    <?php
+     srpage( "workshop_content", "Content" );
+     srpage( "workshop_board", "Custom board guide" );
+     srpage( "workshop_world", "World guide" );
+     srpage( "workshop_player", "Avatar guide" );
+    ?>
    </div>
-   <center><p>Copyright ©2021-2023 Mt.Zero Software. All rights reserved. 
-              All trademarks are property of their respective owners</p>
-   </center>
+  </div>
+  <div class="realcontent">
+  <?php
+   $content = "frag/".$page.".html";
+   if( !file_exists( $content ) ){
+    $content = "frag/sr404.html";
+   }
+   echo file_get_contents( $content );
+  ?>
+  </div>
+ </div>
+ <center><p>Copyright ©2021-2023 Mt.Zero Software. All rights reserved. 
+      All trademarks are property of their respective owners</p>
+ </center>
 </body>
 </html>