<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
	{% load static %}
	{% load qr_code %}
	<link rel="stylesheet" href="/static/home/css/main.css" />
		<noscript><link rel="stylesheet" href="/static/home/css/noscript.css" /></noscript>
		<script src="http://github.hubspot.com/odometer/odometer.js"></script>
        <link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}"/>

		<link rel="stylesheet" href="https://raw.githubusercontent.com/HubSpot/odometer/master/themes/odometer-theme-car.css" />
	          <!-- Required meta tags -->
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
          <title> reValuate: Putting the value back in recycling </title>
          <!-- Bootstrap CSS and own CSS and AJAX -->

          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
          <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
          <link rel="stylesheet" href="/static/home/css/style.css">

      </head>
      <body>
        <nav class="navbar navbar-expand-lg bg-success">             
		 
		 <a style="color: white; font-size: 200%;" class="navbar-brand mb-0 h1" href="/"> reValuate </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#target" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
	<i class="fas fa-bars" style="color:#000; font-size:28px;"></i>
    </button>
              <div class="collapse navbar-collapse" id="target">
                <ul class="navbar-nav mr-auto">
                  <li class="nav-item d-none d-md-block" >
      
{% if user.is_authenticated %}
                      <a class="nav-link" href="/upload/">Качи</a>
{% endif %}

                       </li>
					   
					   {% if isProcessor %}
					   <li class="nav-item d-none d-md-block" >
						  <a class="nav-link" href="/admin/">Админ</a>
						</li>
						{% endif %}
						
						{% if isCashier %}
						<li class="nav-item d-none d-md-block">
							<a class="nav-link" href="/remove_balance/">Каса</a>
						</li>
						{% endif %}
     
                  </ul>
                  <ul class="navbar-nav ml-auto" style="right: 0; left: auto;">
                  <li class="nav-item dropdown " >
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      {% if user.is_authenticated %}
						{{ user.username }}
						{% else %}
						Акaунт
						{% endif %}
					</a>
                    <div class="dropdown-menu animate slideIn dropdown-menu-right" style="text-align: center;" aria-labelledby="navbarDropdown"  >
                      {% if user.is_authenticated %}
					  <div class="dropdown-item"> {% qr_from_text userQR size="T" %}  </div>
					  <div class="dropdown-divider"></div>
                      <a class="dropdown-item "href="/view_media/">Прогрес</a>
                                            <div class="dropdown-divider"></div>

                       <a class="dropdown-item "href="{%url 'logout'%}">Излизане </a>

                      {% else %}
                      <a class="dropdown-item" href="/users/signup"> Регистрация </a>
                      <div class="dropdown-divider"></div>
                      <a class="dropdown-item" href="/users/login"> Влизане </a>
                        <div class="dropdown-divider"></div>
                      {% endif %}
                    </div>
                  </li>
                </div>
                </ul>
            </nav>
            </div>

            {% block content %}
            {% endblock %}

          <!-- Jquery, popper, bootstrap scripts -->
          <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
          <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
		  
		  
		  <style>
			  .odometer {
				  font-size: 50px;
				}
				</style>
	<body class="is-preload"> 
		
		<!-- Header -->
		<section id="header">
			<div class="inner">
				
				<img src="static/home/images/white.png" width="200" height="200">
				<h1><strong>reValuate</strong><br />
				</h1><br>
				{% if user.is_authenticated %}
				<h2>Здравей, {{ user.username }}!</h2>
				{% if userBalance %}
				<br><h2 >Балансът ти е: <span style="color:rgb(0, 85, 19);">{{ userBalance }}</span>  reCoins</h2>
				{% endif %}
				<ul class="actions special">
					<li><a href="/upload/" class="button scrolly">Качи!</a></li>
                    <li><a href="/view_media/" class="button scrolly">Виж прогреса си!</a></li>

					<li><a href="{% url 'logout' %}" class="button scrolly">Излез!</a></li>
					
				</ul>
		{% else %}
		
		<p>Проект на тема разделно събиране.<br> Разработено от ученици от <a style="color:white;	" href="https://edutech.bg">ЧПГ "Образователни технологии"</a></p>
		<ul class="actions special">
			<li><a href="#one" class="button scrolly">Кои сме ние</a></li>
			{% endif %}
            
			
					</ul>
				</div>
			</section>
		
		<!-- One -->
			<section id="one" class="main style1">
				<div class="container">
					<div class="row gtr-150">
						<div class="col-6 col-12-medium text-left">
							<header class="major">
								<h2>Нашата цел и основни дейности<br /></h2>
							</header><p>
					
	Основната цел на проекта е запознаване с ползите от рециклирането на учениците и подтикването им да започнат да събират разделно боклук<span id="dots">...</span><span id="more"><br>
		Това е сайт, в който може да се качват видеа и снимки как ученици изхвърлят разделно боклуци. За всеки материал получават конкретен брой точки (ел.валута), която обменят в училище за награди. <br>За една снимка получават 2 точки, а за едно видео 3 точки.<br> Допълнителни точки се получават при споделяне в соц. мрежи.</span></p>

		
	</div>
	<div class="col-6 col-12-medium imp-medium">
							<span class="image fit "><img class="pull-right" src="/static/home/images/kofi.jpg" alt=""  /></span>
					</div>
				</div>
			</section>

		<!-- Two -->
			<section id="two" class="main style2">
				<div class="container">
					<div class="row gtr-150">
						<div class="col-6 col-12-medium">
							<header class="major">
								<h2>Остават още:<br />
							</h2>
							</header>

							<div style="
							background:linear-gradient( 292.6deg, rgba(255,255,255,1) -44.1%, rgba(40,167,69,1) 100.5% );background-size: 100%;
							background-repeat: repeat;
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent; 
							-moz-background-clip: text;
							-moz-text-fill-color: transparent;
							font-size:70px;
							">{{ fullbalance }} reCoins</div>

						</div>
					</div>
				</div>
			</section>

		<!-- Three -->
			<section id="three" class="main style1 special">
				<div class="container">
					<header class="major">
						<h2>Защо да участвам? </h2>
					</header>

						<div style="text-align: center;">
							<span class="image fit"><img src="images/logo_green.png" alt="" /></span>
							
							<ul>
								<li>награден фонд за участие в проекта: напитки, вафли, солети и голяма награда ваучер за пазаруване от голяма верига. Наградите се разпределят спрямо натрупаните точки в сайта. </li><br>
								<li>Сертификат за участие в извънкласни дейности от името на училището при натрупани минимум 30 точки.</li><br>
								<li>Извинение на закъснение при натрупани минимум 24 точки.</li><br>
							</ul>
							<ul class="actions special">
							</ul>
						</div>
						
					</div>
				</div>
			</section>

		<!-- Four -->
			<section id="four" class="main style2 special">
				<div class="container">
					<header class="major">
						<h2>Имате интерес?</h2>
					</header>
					<p>Регистрирайте се или влезте в акаунта си! </p>
					<ul class="actions special">
						<li><a href="/users/signup" class="button wide primary">Регистрирайте се!</a></li>
						<li><a href="/users/login" class="button wide">Влезте!</a></li>
					</ul>
				</div>
			</section>

		<!-- Footer -->
			<section id="footer">
				<ul class="icons">
					<!-- <li><a href="#" class="icon brands alt fa-twitter"><span class="label">Twitter</span></a></li> -->
					<!-- <li><a href="#" class="icon brands alt fa-facebook-f"><span class="label">Facebook</span></a></li> -->
					<li><a href="https://github.com/yamozha"><img src="/static/home/images/github.png" width = 64 height=64 /></a></li>
					<li><a href="mailto:boyan+revaluate@bobokara.com"><img src="/static/home/images/mail.png" width = 128 height=128 /></a></li>
				</ul>
				<ul class="copyright">
					<li>&copy; edutech</li><li>Design: <a href="https://github.com/yamozha">yamozha</a> and <a href=https://github.com/vassdeniss>vassdeniss</a></li>
				</ul>
			</section>
		<!-- Scripts -->
			<script src="/static/home/js/jquery.min.js"></script>
			<script src=" /static/home/js/jquery.scrolly.min.js"></script>
			<script src="/static/home/js/browser.min.js"></script>
			<script src=" /static/home/js/breakpoints.min.js"></script>
			<script src=" /static/home/js/util.js"></script>
			<script src="/static/home/js/main.js"></script>

	</body>
</html>