coffeeproject20230512/coffeeproject/app/templates/camera_dry.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);
        var camera_title = '{{camera_title}}';

        $(document).ready(function (){
            $("#coffee_title_pc").text("乾燥貨櫃攝影機");
            $("#coffee_title_phone").text("乾燥貨櫃攝影機");
            $('#navbarDropdown_user_pc').text(username);
            $('#navbarDropdown_user_phone').text(username);
        });
    </script>
{% 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_DCargo_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_DCargo_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>DI1</p></center>
            <a href="/camera_DI1" 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>D1</p></center>
            <a href="/camera_D1" 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>D2</p></center>
            <a href="/camera_D2" 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>D3</p></center>
            <a href="/camera_D3" 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>DO1</p></center>
            <a href="/camera_DO1" 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>D4</p></center>
            <a href="/camera_D4" 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>D5</p></center>
            <a href="/camera_D5" 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>D6</p></center>
            <a href="/camera_D6" 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>DI2</p></center>
            <a href="/camera_DI2" 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>D7</p></center>
            <a href="/camera_D7" 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>D8</p></center>
            <a href="/camera_D8" 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>D9</p></center>
            <a href="/camera_D9" 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>DO2</p></center>
            <a href="/camera_DO2" 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>D10</p></center>
            <a href="/camera_D10" 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>D11</p></center>
            <a href="/camera_D11" 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>D12</p></center>
            <a href="/camera_D12" 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 %}