Add static html file

2021-03-21 22:46:42 +01:00
1 parent f98418553a
commit f25a834fbd
@@ -0,0 +1,138 @@
 <!DOCTYPE html>
 <html>
  <head>
    <title>Plains Control Panel</title>
    <style>
    #wrapper * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    }
    body {
    margin: 0;
    padding: 0;
    background-color: #000000;
    color: #EEEEEE;
    font-family: sans-serif;
    font-size: 16px;
    }
    #wrapper {
      margin: 0 auto 0 auto;
      vertical-align: top;
      width: 800px;
      min-height: 900px;
    }
    #wrapper section {
      display: block;
    }
    #page {
      margin-top: 40px; /*This has to match hight of #nav_top so nav-top dosesnt overlap as its not in the same flow*/
      width: inherit;
      height: 800px;
      background-color: #FFFFFF;
      color: #000000;
    }
    #nav_top {
      top: 0;
      position: fixed;
      width: inherit;
      height: 40px;
      color: #AAAAFF;
      background-color: #0066FF;
      border-bottom: #000000 1px;
      display: block;
    }
    #nav_top ul {
      height: inherit;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
    }
    /* Sub-menu */
    #nav_top ul ul {
      display: none;
      position: absolute;
      top: 100%;
      height: fit-content;
    }
    /*popup sub-menu*/
    #nav_top ul li:hover > ul {
    display: inherit;
    }
    #nav_top ul ul li {
    min-width: 170px;
    display: block;
    position: relative;
    }
    #nav_top ul li {
      height: inherit;
      text-decoration: none;
      list-style-type: none;
      flex: 20px;
      color: #000000;
      font-weight: bold;
      padding: 10px;
    }
    #nav_top ul li:hover {
      background-color: #0088FF;
    }
    #nav_top ul li a {
    height: inherit;
    color: #8888FF;
    font-weight: bold;
    text-decoration: none;
    }
    /* Sub-menu */
    #nav_top ul li ul {
      height: inherit;
      display: flex; /*change to none*/
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      height: inherit;
    }
    #nav_top ul li ul:hover {
      display: flex;
    }
    </style>
  </head>
  <body>
    <div id="wrapper">
      <section id="nav_top">
        <ul>
          <li>Link1</li>
          <li>Link2</li>
          <li>
            Submenu
            <ul>
              <li>SubLink1</li>
              <li>SubLink2</li>
            </ul>
          </li>
        </ul>
      </section>
      <section id="page">
        <h1>Plains Control Panel</h1>
        <div>Content</div>
      </section>
    </div>
  </body>
 </html>