{% extends "base.html" %} {% block title %}Home{% endblock %} {% block content
    %}
    <!DOCTYPE html>
    <html>
    <head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
    body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
    
    body, html {
      height: 100%;
      line-height: 1.8;
    }
    
    /* Full height image header */
    .bgimg-1 {
      background-position: center;
      background-size: cover;
      background-image: url("../static/cci.jpg");
      min-height: 100%;
    }
    
    .w3-bar .w3-button {
      padding: 16px;
    }
    </style>
    </head>
    <body>
    
    
        <a href="javascript:void(0)" class="w3-bar-item w3-button w3-right w3-hide-large w3-hide-medium" onclick="w3_open()">
          <i class="fa fa-bars"></i>
        </a>
      </div>
    </div>
    
    <!-- Sidebar on small screens when clicking the menu icon -->
    <nav class="w3-sidebar w3-bar-block w3-black w3-card w3-animate-left w3-hide-medium w3-hide-large" style="display:none" id="mySidebar">
      <a href="javascript:void(0)" onclick="w3_close()" class="w3-bar-item w3-button w3-large w3-padding-16">Close ×</a>
      <a href="#about" onclick="w3_close()" class="w3-bar-item w3-button">ABOUT</a>
      <a href="#team" onclick="w3_close()" class="w3-bar-item w3-button">TEAM</a>
      <a href="#work" onclick="w3_close()" class="w3-bar-item w3-button">WORK</a>
      <a href="#pricing" onclick="w3_close()" class="w3-bar-item w3-button">PRICING</a>
      <a href="#contact" onclick="w3_close()" class="w3-bar-item w3-button">CONTACT</a>
    </nav>
    
    <!-- Header with full-height image -->
    <header class="bgimg-1 w3-display-container w3-grayscale-min" id="home">
      <div class="w3-display-left w3-text-white" style="padding:40px">
        <span class="w3-jumbo w3-hide-small" style="color:  #010c0c; font-family: 'Times New Roman', Times, serif;"><b>FRAUD & CRIME</b></span><br>
        <span class="w3-xxlarge w3-hide-large w3-hide-medium">Start something that matters</span><br>
        <span class="w3-large">Stop wasting valuable time with projects that just isn't you.</span>
        <p><a href="#about" class="w3-button w3-white w3-padding-large w3-large w3-margin-top w3-opacity w3-hover-opacity-off">Learn more and start today</a></p>
      </div> 
      <div class="w3-display-bottomleft w3-text-grey w3-large" style="padding:24px 48px">
        <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>
    </header>
    
    <!-- About Section -->
    <div class="w3-container" style="padding:128px 16px" id="about">
      <h3 class="w3-center">ABOUT THE COMPANY</h3>
      <p class="w3-center w3-large">Key features of our company</p>
      <div class="w3-row-padding w3-center" style="margin-top:64px">
        <div class="w3-quarter">
          <i class="fa fa-desktop w3-margin-bottom w3-jumbo w3-center"></i>
          <p class="w3-large">Responsive</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
        </div>
        <div class="w3-quarter">
          <i class="fa fa-heart w3-margin-bottom w3-jumbo"></i>
          <p class="w3-large">Passion</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
        </div>
        <div class="w3-quarter">
          <i class="fa fa-diamond w3-margin-bottom w3-jumbo"></i>
          <p class="w3-large">Design</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
        </div>
        <div class="w3-quarter">
          <i class="fa fa-cog w3-margin-bottom w3-jumbo"></i>
          <p class="w3-large">Support</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
        </div>
      </div>
    </div>
    
    <!-- Promo Section - "We know design" -->
    <div class="w3-container w3-light-grey" style="padding:128px 16px">
      <div class="w3-row-padding">
        <div class="w3-col m6">
          <h3>We know design.</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod<br>tempor incididunt ut labore et dolore.</p>
          <p><a href="#work" class="w3-button w3-black"><i class="fa fa-th"> </i> View Our Works</a></p>
        </div>
        <div class="w3-col m6">
          <img class="w3-image w3-round-large" src="{{ url_for('static', filename='1.jpg') }}" alt="Buildings" width="700" height="394">
         
        </div>
      </div>
    </div>
    
    <!-- Team Section -->
    <div class="w3-container" style="padding:128px 16px" id="team">
      <h3 class="w3-center">THE TEAM</h3>
      <p class="w3-center w3-large">The ones who runs this company</p>
      <div class="w3-row-padding w3-grayscale" style="margin-top:64px">
        <div class="w3-col l3 m6 w3-margin-bottom">
          <div class="w3-card">
            <img src="../static/3.jpg" alt="John" style="width:100%;height:400px">
            <div class="w3-container">
              <h3>D D P Kumara</h3>
              <p class="w3-opacity">Softwere devolper</p>
              <p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p>
              <p><button class="w3-button w3-light-grey w3-block"><i class="fa fa-envelope"></i> Contact</button></p>
            </div>
          </div>
        </div>
        <div class="w3-col l3 m6 w3-margin-bottom">
          <div class="w3-card">
            <img src="../static/pasi.png" alt="Jane" style="width:100%;height:400px">
            <div class="w3-container">
              <h3>SANKALPA M.G.P</h3>
              <p class="w3-opacity">Art Director</p>
              <p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p>
              <p><button class="w3-button w3-light-grey w3-block"><i class="fa fa-envelope"></i> Contact</button></p>
            </div>
          </div>
        </div>
        <div class="w3-col l3 m6 w3-margin-bottom">
          <div class="w3-card">
            <img src="../static/dilshan.png" alt="Mike" style="width:100%;height:400px" >
            <div class="w3-container">
              <h3>U.D.S. Bandara</h3>
              <p class="w3-opacity">Web Designer</p>
              <p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p>
              <p><button class="w3-button w3-light-grey w3-block"><i class="fa fa-envelope"></i> Contact</button></p>
            </div>
          </div>
        </div>
        <div class="w3-col l3 m6 w3-margin-bottom">
          <div class="w3-card">
            <img src="/w3images/team4.jpg" alt="Dan" style="width:100%">
            <div class="w3-container">
              <h3>Dan Star</h3>
              <p class="w3-opacity">Designer</p>
              <p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p>
              <p><button class="w3-button w3-light-grey w3-block"><i class="fa fa-envelope"></i> Contact</button></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="w3-container w3-row w3-center w3-dark-grey w3-padding-64">
      <div class="w3-quarter">
        <span class="w3-xxlarge" id="partnersCount">14+</span>
        <br>Partners
      </div>
      <div class="w3-quarter">
        <span class="w3-xxlarge" id="projectsCount">55+</span>
        <br>Projects Done
      </div>
      <div class="w3-quarter">
        <span class="w3-xxlarge" id="clientsCount">89+</span>
        <br>Happy Clients
      </div>
      <div class="w3-quarter">
        <span class="w3-xxlarge" id="meetingsCount">150+</span>
        <br>Meetings
      </div>
    </div>
    
    <!-- Work Section -->
    <div class="w3-container" style="padding:128px 16px" id="work">
      <h3 class="w3-center">OUR WORK</h3>
      <p class="w3-center w3-large">What we've done for people</p>
    
      <div class="w3-row-padding" style="margin-top:64px">
        <div class="w3-col l3 m6">
          <img src="/w3images/tech_mic.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="A microphone">
        </div>
        <div class="w3-col l3 m6">
          <img src="/w3images/tech_phone.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="A phone">
        </div>
        <div class="w3-col l3 m6">
          <img src="/w3images/tech_drone.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="A drone">
        </div>
        <div class="w3-col l3 m6">
          <img src="/w3images/tech_sound.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Soundbox">
        </div>
      </div>
    
      <div class="w3-row-padding w3-section">
        <div class="w3-col l3 m6">
          <img src="/w3images/tech_tablet.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="A tablet">
        </div>
        <div class="w3-col l3 m6">
          <img src="/w3images/tech_camera.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="A camera">
        </div>
        <div class="w3-col l3 m6">
          <img src="/w3images/tech_typewriter.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="A typewriter">
        </div>
        <div class="w3-col l3 m6">
          <img src="/w3images/tech_tableturner.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="A tableturner">
        </div>
      </div>
    </div>
    
    <!-- Modal for full size images on click-->
    <div id="modal01" class="w3-modal w3-black" onclick="this.style.display='none'">
      <span class="w3-button w3-xxlarge w3-black w3-padding-large w3-display-topright" title="Close Modal Image">×</span>
      <div class="w3-modal-content w3-animate-zoom w3-center w3-transparent w3-padding-64">
        <img id="img01" class="w3-image">
        <p id="caption" class="w3-opacity w3-large"></p>
      </div>
    </div>
    
    <!-- Skills Section -->
    <div class="w3-container w3-light-grey w3-padding-64">
      <div class="w3-row-padding">
        <div class="w3-col m6">
          <h3>Our Skills.</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod<br>
          tempor incididunt ut labore et dolore.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod<br>
          tempor incididunt ut labore et dolore.</p>
        </div>
        <div class="w3-col m6">
          <p class="w3-wide"><i class="fa fa-camera w3-margin-right"></i>Photography</p>
          <div class="w3-grey">
            <div class="w3-container w3-dark-grey w3-center" style="width:90%">90%</div>
          </div>
          <p class="w3-wide"><i class="fa fa-desktop w3-margin-right"></i>Web Design</p>
          <div class="w3-grey">
            <div class="w3-container w3-dark-grey w3-center" style="width:85%">85%</div>
          </div>
          <p class="w3-wide"><i class="fa fa-photo w3-margin-right"></i>Photoshop</p>
          <div class="w3-grey">
            <div class="w3-container w3-dark-grey w3-center" style="width:75%">75%</div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Pricing Section -->
    
    
    <!-- Contact Section -->
    <div class="w3-container w3-light-grey" style="padding:128px 16px" id="contact">
      <h3 class="w3-center">CONTACT</h3>
      <p class="w3-center w3-large">Lets get in touch. Send us a message:</p>
      <div style="margin-top:48px">
        <p><i class="fa fa-map-marker fa-fw w3-xxlarge w3-margin-right"></i> Chicago, US</p>
        <p><i class="fa fa-phone fa-fw w3-xxlarge w3-margin-right"></i> Phone: +00 151515</p>
        <p><i class="fa fa-envelope fa-fw w3-xxlarge w3-margin-right"> </i> Email: mail@mail.com</p>
        <br>
        <form action="/action_page.php" target="_blank">
          <p><input class="w3-input w3-border" type="text" placeholder="Name" required name="Name"></p>
          <p><input class="w3-input w3-border" type="text" placeholder="Email" required name="Email"></p>
          <p><input class="w3-input w3-border" type="text" placeholder="Subject" required name="Subject"></p>
          <p><input class="w3-input w3-border" type="text" placeholder="Message" required name="Message"></p>
          <p>
            <button class="w3-button w3-black" type="submit">
              <i class="fa fa-paper-plane"></i> SEND MESSAGE
            </button>
          </p>
        </form>
        <!-- Image of location/map -->
        <img src="/w3images/map.jpg" class="w3-image w3-greyscale" style="width:100%;margin-top:48px">
      </div>
    </div>
    
    <!-- Footer -->
    <footer class="w3-center w3-black w3-padding-64">
      <a href="#about" class="w3-button w3-light-grey"><i class="fa fa-arrow-up w3-margin-right"></i>To the top</a>
      <div class="w3-xlarge w3-section">
        <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="#" title="" target="_blank" class="w3-hover-text-green"></a></p>
    </footer>
     
    <script>
    // Modal Image Gallery
    function onClick(element) {
      document.getElementById("img01").src = element.src;
      document.getElementById("modal01").style.display = "block";
      var captionText = document.getElementById("caption");
      captionText.innerHTML = element.alt;
    }
    
    
    // Toggle between showing and hiding the sidebar when clicking the menu icon
    var mySidebar = document.getElementById("mySidebar");
    
    function w3_open() {
      if (mySidebar.style.display === 'block') {
        mySidebar.style.display = 'none';
      } else {
        mySidebar.style.display = 'block';
      }
    }
    
    // Close the sidebar with the close button
    function w3_close() {
        mySidebar.style.display = "none";
    }
    </script>

<script>
  function animateValue(id, start, end, duration) {
    var range = end - start;
    var current = start;
    var increment = end > start ? 1 : -1;
    var stepTime = Math.abs(Math.floor(duration / range));
    var obj = document.getElementById(id);
    var timer = setInterval(function() {
      current += increment;
      obj.textContent = current;
      if (current == end) {
        clearInterval(timer);
      }
    }, stepTime);
  }

  animateValue("partnersCount", 0, 14, 1500);
  animateValue("projectsCount", 0, 55, 1500);
  animateValue("clientsCount", 0, 89, 1500);
  animateValue("meetingsCount", 0, 150, 1500);
</script>
    
    
  
    <h1 align="center">Notes</h1>
    <ul class="list-group list-group-flush" id="notes">
      {% for note in user.notes %}
      <li class="list-group-item">
        {{ note.data }}
        <button type="button" class="close" onClick="deleteNote({{ note.id }})">
          <span aria-hidden="true">&times;</span>
        </button>
      </li>
      {% endfor %}
    </ul>
    <form method="POST">
      <textarea name="note" id="note" class="form-control"></textarea>
      <br />
      <div align="center">
        <button type="submit" class="btn btn-primary">Add Note</button>
      </div>
    </form>


    
    {% endblock %}
   