|
|
|
|
HTML+Django/Jinja
|
52 lines
|
48 sloc
|
1.796 kB
  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4.     <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" /> 
  5.     <title>{% block title %}Gauntlet{% endblock %}</title> 
  6.     <meta name="viewport" content="width=device-width, initial-scale=1"> 
  7. </head> 
  8. <body> 
  9.     <div id="navigation" class="w3-sidebar w3-bar-block w3-card-2 w3-animate-left" style="display:none"> 
  10.         <a href="#" class="w3-bar-item w3-button">Home</a> 
  11.         <a href="#" class="w3-bar-item w3-button">Link 1</a> 
  12.         <a href="#" class="w3-bar-item w3-button">Link 2</a> 
  13.         <a href="#" class="w3-bar-item w3-button">Link 3</a> 
  14.     </div> 
  15.  
  16.     <div zclass = "w3-main" id="main"> 
  17.         <div class="w3-teal"> 
  18.             <button class="w3-button w3-teal w3-xlarge" onclick="navflip()">&#9778;</button> 
  19.             <div class="w3-container"> 
  20.                 <h1> Gauntlet </h1> 
  21.             </div> 
  22.         </div> 
  23.  
  24.         <div id="content" class="w3-container"> 
  25.             {% block content %}{% endblock %} 
  26.         </div> 
  27.     </div> 
  28.  
  29.     <script> 
  30.         var enabled = 0; 
  31.         function navflip(){ 
  32.             if(enabled = 0 ){ 
  33.                 w3_open(); 
  34.             } 
  35.             if(enabled = 1){ 
  36.                 w3_close(); 
  37.             } 
  38.         } 
  39.  
  40.         function w3_open() { 
  41.             enabled = 1; 
  42.             document.getElementById("main").style.marginLeft = "25%"; 
  43.             document.getElementById("navigation").style.width = "25%"; 
  44.             document.getElementById("navigation").style.display = "block"; 
  45.         } 
  46.         function w3_close() { 
  47.             enabled = 0; 
  48.             document.getElementById("main").style.marginLeft = "0%"; 
  49.             document.getElementById("navigation").style.display = "none"; 
  50.         } 
  51.     </script> 
  52. </body>