coffeeproject20230512/coffeeproject/app/templates/index_new.html

<!-- 宣告我們要套用模板 -->
{% extends "base.html" %}
{% block title %}{{ title }}{% endblock %}
{% block script %}
    <script>
        var status = '{{status}}';
        var username = '{{username}}';
  
    </script>
{% endblock %}
{% block style %}
    <style>
        .card:hover {
            border: 5px Gray solid;
            transition-duration: 0.2s;
        }
    </style>
{% endblock %}
{% block main %}    
      <div class="album py-5 bg-light">
    <div class="container">

      <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4 g-3">
      
        <div class="col" role="button" id="CleanContainer">
          <div class="card shadow-sm">
            <center><p class="card-text" style="font-size: 20px; font-weight: bold;">清洗貨櫃</p></center>
            <img src="../static/img/clean.png" width="100%">
            <div class="card-body">
              <div class="d-flex justify-content-between align-items-center">
              </div>
            </div>
          </div>
        </div>
        
        <div class="col" role="button" id="FermentContainer">
          <div class="card shadow-sm">
            <center><p class="card-text" style="font-size: 20px; font-weight: bold;">發酵貨櫃</p></center>
            <img src="../static/img/ferment.png"  width="100%">
            <div class="card-body">
              <div class="d-flex justify-content-between align-items-center">
              </div>
            </div>
          </div>
        </div>
        
        <div class="col" role="button" id="DryContainer">
          <div class="card shadow-sm">
            <center><p class="card-text" style="font-size: 20px;font-weight: bold;">乾燥貨櫃</p></center>
            <img src="../static/img/dry.png"   width="100%">
            <div class="card-body">
              <div class="d-flex justify-content-between align-items-center">
              </div>
            </div>
          </div>
        </div>
        <div class="col" role="button" id="code">
          <div class="card shadow-sm">
            <center><p class="card-text" style="font-size: 20px;font-weight: bold;">板子燒錄</p></center>
            <img src="../static/img/board.png"   width="100%">
            <div class="card-body">
              <div class="d-flex justify-content-between align-items-center">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}
{% block script2 %}
    <script>
            var button_CleanContainer = document.getElementById('CleanContainer');
            button_CleanContainer.addEventListener('click', function () {
                window.location.href = '/clean';
            });
            var button_FermentContainer = document.getElementById('FermentContainer');
            button_FermentContainer.addEventListener('click', function () {
                window.location.href = '/ferment';
            });
            var button_DryContainer = document.getElementById('DryContainer');
            button_DryContainer.addEventListener('click', function () {
                window.location.href = '/dry';
            });
            var button_code = document.getElementById('code');
            button_code.addEventListener('click', function () {
                window.location.href = '/board';
            });
    </script>
{% endblock %}