coffeeproject20230512/coffeeproject/app/templates/camera_ferment.html

<!-- 宣告我們要套用模板 -->
{% extends "base.html" %}
{% block title %}{{ title }}{% endblock %}

{% block script %}
    <script language="JavaScript">
        // 指定 10秒 刷新網頁一次
        var WebRestart
        var status = '{{status}}';
        var username = '{{username}}';
        // WebRestart = setTimeout(function () { location.reload() }, 10000);
        $(document).ready(function (){
            $("#coffee_title_pc").text("發酵貨櫃攝影機");
            $("#coffee_title_phone").text("發酵貨櫃攝影機");
            $('#navbarDropdown_user_pc').text(username);
            $('#navbarDropdown_user_phone').text(username);
        });
    </script>
    
{% endblock %}

{% block style %}    
    <style>
        .video_1 img{
            padding: 10px 10px 0px 10px;   
            width: 448px;        
            height: 336px;
        }
        .video_2 img{
            margin: 5px 3px 0px 3px;   
            width: 288px;        
            height: 216px;
        }
        .video_22 img{
            margin: 0px 15px 0px 15px;   
            width: 208px;        
            height: 156px;
        }
    </style>
{% endblock %}

{% block main %}
  <div class="album py-5 bg-light">
    <div class="container">

      <div class="row row-cols-1 row-cols-sm-1 row-cols-md-4">
        <div class="col">
        </div>
        <div class="col">
          <div class="card shadow-sm">
            <center><p class="card-text" style="font-size: 20px;font-weight: bold;">發酵貨櫃內部</p></center>
            <a href="/camera_FCargo_in" target="_blank"><img src="../static/img/video_pic_2.png"  width="100%" alt="影片"></a>
            <div class="card-body">
              <div class="d-flex justify-content-between align-items-center">
              </div>
            </div>
          </div>
        </div>
        
        <div class="col">
          <div class="card shadow-sm">
            <center><p class="card-text" style="font-size: 20px;font-weight: bold;">發酵貨櫃外部</p></center>
            <a href="/camera_FCargo_out" target="_blank"><img src="../static/img/video_pic_2.png"   width="100%" alt="影片"></a>
            <div class="card-body">
              <div class="d-flex justify-content-between align-items-center">
              </div>
            </div>
          </div>
        </div>
        
        <div class="col">
        </div>
        
      </div>
    </div>
  </div>
  <div class="album py-5 bg-light">
    <div class="container">

      <div class="row row-cols-1 row-cols-sm-2 row-cols-md-5">
      
        <div class="col">
          <div class="card shadow-sm">
            <center><p class="card-text" style="font-size: 20px; font-weight: bold;">發酵入料槽<br>FI1</p></center>
            <a href="/camera_FI1" target="_blank"><img src="../static/img/video_pic_2.png" width="100%" alt="影片"></a>
            <div class="card-body">
              <div class="d-flex justify-content-between align-items-center">
              </div>
            </div>
          </div>
        </div>
        
        <div class="col">
          <div class="card shadow-sm">
            <center><p class="card-text" style="font-size: 20px; font-weight: bold;">發酵槽<br>F1</p></center>
            <a href="/camera_F1" target="_blank"><img src="../static/img/video_pic_2.png"  width="100%" alt="影片"></a>
            <div class="card-body">
              <div class="d-flex justify-content-between align-items-center">
              </div>
            </div>
          </div>
        </div>
        
        <div class="col">
          <div class="card shadow-sm">
            <center><p class="card-text" style="font-size: 20px;font-weight: bold;">發酵槽<br>F2</p></center>
            <a href="/camera_F2" target="_blank"><img src="../static/img/video_pic_2.png"   width="100%" alt="影片"></a>
            <div class="card-body">
              <div class="d-flex justify-content-between align-items-center">
              </div>
            </div>
          </div>
        </div>
        
        <div class="col">
          <div class="card shadow-sm">
            <center><p class="card-text" style="font-size: 20px;font-weight: bold;">發酵槽<br>F3</p></center>
            <a href="/camera_F3" target="_blank"><img src="../static/img/video_pic_2.png"   width="100%" alt="影片"></a>
            <div class="card-body">
              <div class="d-flex justify-content-between align-items-center">
              </div>
            </div>
          </div>
        </div>
        
        <div class="col">
          <div class="card shadow-sm">
            <center><p class="card-text" style="font-size: 20px;font-weight: bold;">發酵出料槽<br>FO1</p></center>
            <a href="/camera_FO1" target="_blank"><img src="../static/img/video_pic_2.png"   width="100%" alt="影片"></a>
            <div class="card-body">
              <div class="d-flex justify-content-between align-items-center">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="album py-5 bg-light">
    <div class="container">

      <div class="row row-cols-1 row-cols-sm-2 row-cols-md-5">
        
        <div class="col">
        </div>
        
        <div class="col">
          <div class="card shadow-sm">
            <center><p class="card-text" style="font-size: 20px;font-weight: bold;">發酵槽<br>F4</p></center>
            <a href="/camera_F4" target="_blank"><img src="../static/img/video_pic_2.png"   width="100%" alt="影片"></a>
            <div class="card-body">
              <div class="d-flex justify-content-between align-items-center">
              </div>
            </div>
          </div>
        </div>
        
        <div class="col">
          <div class="card shadow-sm">
            <center><p class="card-text" style="font-size: 20px;font-weight: bold;">發酵槽<br>F5</p></center>
            <a href="/camera_F5" target="_blank"><img src="../static/img/video_pic_2.png"   width="100%" alt="影片"></a>
            <div class="card-body">
              <div class="d-flex justify-content-between align-items-center">
              </div>
            </div>
          </div>
        </div>
        
        <div class="col">
          <div class="card shadow-sm">
            <center><p class="card-text" style="font-size: 20px;font-weight: bold;">發酵槽<br>F6</p></center>
            <a href="/camera_F6" target="_blank"><img src="../static/img/video_pic_2.png"   width="100%" alt="影片"></a>
            <div class="card-body">
              <div class="d-flex justify-content-between align-items-center">
              </div>
            </div>
          </div>
        </div>
        
        <div class="col">
        </div>
        
      </div>
    </div>
  </div>
  <div class="album py-5 bg-light">
    <div class="container">

      <div class="row row-cols-1 row-cols-sm-2 row-cols-md-5">
      
        <div class="col">
          <div class="card shadow-sm">
            <center><p class="card-text" style="font-size: 20px; font-weight: bold;">發酵入料槽<br>FI2</p></center>
            <a href="/camera_FI2" target="_blank"><img src="../static/img/video_pic_2.png" width="100%" alt="影片"></a>
            <div class="card-body">
              <div class="d-flex justify-content-between align-items-center">
              </div>
            </div>
          </div>
        </div>
        
        <div class="col">
          <div class="card shadow-sm">
            <center><p class="card-text" style="font-size: 20px; font-weight: bold;">發酵槽<br>F7</p></center>
            <a href="/camera_F7" target="_blank"><img src="../static/img/video_pic_2.png"  width="100%" alt="影片"></a>
            <div class="card-body">
              <div class="d-flex justify-content-between align-items-center">
              </div>
            </div>
          </div>
        </div>
        
        <div class="col">
          <div class="card shadow-sm">
            <center><p class="card-text" style="font-size: 20px;font-weight: bold;">發酵槽<br>F8</p></center>
            <a href="/camera_F8" target="_blank"><img src="../static/img/video_pic_2.png"   width="100%" alt="影片"></a>
            <div class="card-body">
              <div class="d-flex justify-content-between align-items-center">
              </div>
            </div>
          </div>
        </div>
        
        <div class="col">
          <div class="card shadow-sm">
            <center><p class="card-text" style="font-size: 20px;font-weight: bold;">發酵槽<br>F9</p></center>
            <a href="/camera_F9" target="_blank"><img src="../static/img/video_pic_2.png"   width="100%" alt="影片"></a>
            <div class="card-body">
              <div class="d-flex justify-content-between align-items-center">
              </div>
            </div>
          </div>
        </div>
        
        <div class="col">
          <div class="card shadow-sm">
            <center><p class="card-text" style="font-size: 20px;font-weight: bold;">發酵出料槽<br>FO2</p></center>
            <a href="/camera_FO2" target="_blank"><img src="../static/img/video_pic_2.png"   width="100%" alt="影片"></a>
            <div class="card-body">
              <div class="d-flex justify-content-between align-items-center">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="album py-5 bg-light">
    <div class="container">

      <div class="row row-cols-1 row-cols-sm-1 row-cols-md-5">
      
        <div class="col">
        </div>
        
        <div class="col">
          <div class="card shadow-sm">
            <center><p class="card-text" style="font-size: 20px; font-weight: bold;">發酵槽<br>F10</p></center>
            <a href="/camera_F10" target="_blank"><img src="../static/img/video_pic_2.png" width="100%" alt="影片"></a>
            <div class="card-body">
              <div class="d-flex justify-content-between align-items-center">
              </div>
            </div>
          </div>
        </div>
        
        <div class="col">
          <div class="card shadow-sm">
            <center><p class="card-text" style="font-size: 20px; font-weight: bold;">發酵槽<br>F11</p></center>
            <a href="/camera_F11" target="_blank"><img src="../static/img/video_pic_2.png"  width="100%" alt="影片"></a>
            <div class="card-body">
              <div class="d-flex justify-content-between align-items-center">
              </div>
            </div>
          </div>
        </div>
        
        <div class="col">
          <div class="card shadow-sm">
            <center><p class="card-text" style="font-size: 20px;font-weight: bold;">發酵槽<br>F12</p></center>
            <a href="/camera_F12" target="_blank"><img src="../static/img/video_pic_2.png"   width="100%" alt="影片"></a>
            <div class="card-body">
              <div class="d-flex justify-content-between align-items-center">
              </div>
            </div>
          </div>
        </div>
        
        <div class="col">
        </div>
        
      </div>
    </div>
  </div>
{% endblock %}