<head>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script> -->
            <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script> -->
            <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> -->
            <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> -->
            <!-- <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> -->
            <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
            <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
            <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
            <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
            <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> -->
            <!-- <script src="static/js/react.js"></script>
            <script src="static/js/react-dom.js"></script>
            <script src="static/js/jquery.min.js"></script>
            <script src="static/js/bootstrap.min.js"></script>
            <script src="/static/js/sjcl.js"></script> -->
            <link rel="stylesheet" href="/static/css/fileview.css" type="text/css"></link>
            <!-- <link rel="stylesheet" href="/static/css/bootstrap.min.css" type="text/css"></link> -->
            <!-- <link rel="stylesheet" href="/static/css/css.css" type="text/css"></link> -->
            <!-- <link rel="stylesheet" href="/static/css/css1.css" type="text/css"></link> -->
            <!-- <link rel="stylesheet" href="/static/css/font-awesome.min.css" type="text/css"></link> -->
            <link rel="stylesheet" href="/static/css/w3.css" type="text/css"></link>    
    <style>
      body,h1,h2,h3,h4,h5,h6 {
        font-family: "Lato", sans-serif;
        /* background-color: black; */
      }
      .w3-bar,h1,button {font-family: "Montserrat", sans-serif}
      .fa-cloud-download-alt, .fa-laptop{font-size:200px}
      #sidebar{
        height: 100%;
        width: 0;
        float: right;
        position: absolute;
        top: 0;

      }
    </style>
</head>
<body>
    {% load crispy_forms_tags %}
<div id="main">
<div id="mySidebar" class="sidebar">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
    <p style="color:white; font-size: 20px; display: none" id="formtitle">Enter Username and Password</p>
    <div style="color:white">
    <form method="post" style="display:none" id="form">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit">Login</button>
      </form></div>
</div>
  
<!-- Navbar -->
<div class="w3-top">
    <div class="w3-bar w3-red w3-card w3-left-align w3-large" id="topbar">
        <a class="w3-bar-item w3-button w3-hide-medium w3-hide-large w3-right w3-padding-large w3-hover-white w3-large w3-red" href="javascript:void(0);" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>
        <a href="#" class="w3-bar-item w3-button w3-padding-large w3-white">CLOUD 9</a>
        <a href="{% url 'upload_file' %}" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Upload</a>
        <a href="#" class="w3-bar-item w3-button w3-padding-large">Linux Client</a>
        <a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Settings</a>
        <button class="w3-bar-item w3-button w3-padding-large w3-hover-white" onclick="login()" style="float: right">Login</button>
    </div>

    <!-- Navbar on small screens -->
    <div id="navDemo" class="w3-bar-block w3-white w3-hide w3-hide-large w3-hide-medium w3-large">
        <a href="{% url 'upload_file' %}" class="w3-bar-item w3-button w3-padding-large">Upload</a>
        <a href="#" class="w3-bar-item w3-button w3-padding-large">Settings</a>
        <a href="#" class="w3-bar-item w3-button w3-padding-large">Linux Client</a>
        <a href="#" class="w3-bar-item w3-button w3-padding-large">About</a>
        <button class="w3-bar-item w3-button w3-padding-large" onclick="login()">Login</button>
    </div>
</div>
&nbsp;
&nbsp;
<!-- Header -->
<header class="w3-container w3-red w3-center" style="padding:20px 16px; width: 100%">
    <h1 class="w3-margin w3-jumbo">Welcome to CLOUD 9</h1>
    <div>
            <p class="w3-xlarge">Your safety is our concern</p>
    </div>
    <a class="w3-button w3-black w3-padding-large w3-large w3-margin-top w3-hover-white" href="{% url 'signup' %}">Signup</a>
</header>

<!-- First Grid -->
<div class="w3-row-padding w3-padding-64 w3-container" style="width:100%">
    <div class="w3-content">
    <div class="w3-twothird">
        <h1>Access files from any device<br/> Keep your files safe
            </h1>
        <h3 class="w3-padding-32 w3-text-grey">Save your files and photos on Cloud9 <br/> and get them from any device, anywhere</h3>
        <p class="w3-text-grey" style="font-size: 18px">Use your phone, tablet, or computer to continue what you started — wherever you happen to be. Any changes you make will be updated on all your devices</p>
        <p class="w3-text-grey" style="font-size: 18px">
        You can Choose choose how your files are encrypted.<br/>
      The files in the cloud are all encrypted so you don't have to worry about your data being stolen.<br/>
      You can download your files by using the key. the files will be decrypted in your browser.</p>
    </div>

    <div class="w3-third w3-center">
        <i class="fas fa-cloud-download-alt w3-padding-64 w3-text-red"></i>
    </div>
    </div>
</div>

<!-- Second Grid -->
<div class="w3-row-padding w3-light-grey w3-padding-64 w3-container">
    <div class="w3-content">
      <div class="w3-third w3-center">
        <i class="fas fa-laptop w3-padding-64 w3-text-red w3-margin-right"></i>
      </div>
  
      <div class="w3-twothird">
        <h1>Upload files through Linux client <br/>and sync your directories</h3>
        <h3 class="w3-padding-32 w3-text-grey">Download our linux client to Upload files and manage them from your pc.</h5>  
        <p class="w3-text-grey" style="font-size: 18px">With the Linux client, you get  handy command line tool to access your files.<br/>You can choose to periodically sync your directories to the cloud.</p>
        <p class="w3-text-grey" style="font-size: 18px">If something happens to your device, you don't have to worry about losing your files or photos – they're in your Cloud9.</p>
      </div>
    </div>
  </div>

<div class="w3-container w3-black w3-center w3-opacity w3-padding-64">
    <h1 class="w3-margin w3-xlarge">"Privacy - like eating and breathing - <b>is one of Life's basic requirements</b>"<span style="text-align: right; font-size: 16px; float:right"><i>-Katherine Neville</i></span></h1>
</div>

<!-- Footer -->
<footer class="w3-container w3-padding-64 w3-center w3-opacity">  
  <div class="w3-xlarge w3-padding-32">
    <i class="fa fa-facebook-official w3-hover-opacity"></i>
    <i class="fa fa-instagram w3-hover-opacity"></i>
    <i class="fa fa-snapchat w3-hover-opacity"></i>
    <i class="fa fa-pinterest-p w3-hover-opacity"></i>
    <i class="fa fa-twitter w3-hover-opacity"></i>
    <i class="fa fa-linkedin w3-hover-opacity"></i>
 </div>
 <p>Powered by <a href="#" target="_blank">Cloudy Sky Agencies</a></p>
</footer>
</div>
</body>

<script>
// Used to toggle the menu on small screens when clicking on the menu button
function myFunction() {
    var x = document.getElementById("navDemo");
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
    } else { 
        x.className = x.className.replace(" w3-show", "");
    }
};

function login(){
  document.getElementById("mySidebar").style.width = "230px";
  document.getElementById("main").style.marginLeft = "230px";
  document.getElementById('form').style.display = "block";
  document.getElementById('formtitle').style.display = "block";
};

function closeNav() {
    document.getElementById("mySidebar").style.width = "0";
    document.getElementById("main").style.marginLeft= "0";
    document.getElementById('form').style.display = "none";
    document.getElementById('formtitle').style.display = "none";
};

</script>
