{% extends "base.html" %}
{% load static %}
{% block extra_css %}
  <style>
   :root {
     --primary-color: #ffb606;
   }
   .hero.is-dark .navbar-dropdown .navbar-item {
     color: #4a4a4a !important;
   }
   .hero.is-dark .navbar-dropdown .navbar-item:hover {
     color: inherit !important;
   }
   .button.is-warning {
     background: var(--primary-color) !important;
   }
   .hero {
     {#background-image: url('{% static "server/img/bg1.jpg" %}');#}
     background-size: cover;
     background-position: center;
   }
   .hero-body{
     min-height: 800px;
   }
  </style>
{% endblock %}
{% block navbar %}
  {% include "navbar.html" %}
{% endblock %}
{% block content %}
    <div class="hero-body" >
      <div class="container" >
	<p class="title mb-4 is-size-1" >Bulma Css</p>
    <p class="subtitle mt-4 is-size-3" >Bulma is a simple and beautiful css framework, <br>Django-Bulmacss provide many common templates for multiple usage.<br>including allauth, basic form, flatpages, etc</p>
	<a href="https://github.com/ChanMo/django-bulma/" class="button is-warning has-text-weight-bold">TRY NOW</a>
      </div>
    </div>
  </section>
  {% comment %}
  <section class="section" >
    <div class="container" style="max-width:900px;">
      <h3 class="title is-4 mb-6">功能特性</h3>
      <div class="level">
        <div class="level-left">
          <div class="level-item">
            <figure class="image">
              <img src="{% static "server/img/img1.png" %}"  style="width:320px;" />
            </figure>
          </div>
        </div>
        <div class="level-right">
          <div class="level-item">
            <div class="content">
              <h4>极简代码架构</h4>
              <p>只包含必要功能模块, 让定制开发更容易</p>
            </div>
          </div>
        </div>
      </div>
      <div class="level">
        <div class="level-left">
          <div class="level-item">
            <div class="content">
              <h4>使用最新技术</h4>
              <p>Django4.0, BulmaCSS</p>
            </div>
          </div>
        </div>
        <div class="level-right">
          <div class="level-item">
            <figure class="image">
              <img src="{% static "server/img/img2.png" %}" style="width:320px;" />
            </figure>
          </div>
        </div>
      </div>
      <div class="has-text-centered mt-5 mb-6">
      <a class="button is-dark" href="/courses/">了解更多</a>
      </div>
    </div>
  </section>
  <section class="section has-background-info">
    <div class="container" style="max-width:480px;">
      <form>
        <div class="field has-addons">
          <p class="control">
            <input type="email" class="input is-fullwidth is-medium" />
          </p>
          <p class="control">
            <button class="button is-warning is-medium">订阅</button>
          </p>
        </div>
      </form>
    </div>
  </section>
      {% endcomment %}
{% endblock %}

{% block extra_js %}
  <script>
   document.addEventListener('DOMContentLoaded', () => {

     // Get all "navbar-burger" elements
     const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);

     // Check if there are any navbar burgers
     if ($navbarBurgers.length > 0) {

       // Add a click event on each of them
       $navbarBurgers.forEach( el => {
	 el.addEventListener('click', () => {

	   // Get the target from the "data-target" attribute
	   const target = el.dataset.target;
	   const $target = document.getElementById(target);

	   // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
	   el.classList.toggle('is-active');
	   $target.classList.toggle('is-active');

	 });
       });
     }

   });
  </script>
{% endblock %}
