coffeeproject20230512/coffeeproject/app/templates/camera_clean.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 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 g-3">
        <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_CCargo_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_CCargo_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 g-3">

        <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>CI1</p></center>
            <a href="/camera_CI1" 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 class="col">
          <div class="card shadow-sm">
            <center><p class="card-text" style="font-size: 20px;font-weight: bold;">清洗入料槽<br>CI2</p></center>
            <a href="/camera_CI2" 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 g-3">
      
        <div class="col">
          <div class="card shadow-sm">
            <center><p class="card-text" style="font-size: 20px; font-weight: bold;">清洗槽<br>C1</p></center>
            <a href="/camera_C1" 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>C2</p></center>
            <a href="/camera_C2" 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 class="col">
          <div class="card shadow-sm">
            <center><p class="card-text" style="font-size: 20px;font-weight: bold;">清洗槽<br>C3</p></center>
            <a href="/camera_C3" 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>C4</p></center>
            <a href="/camera_C4" 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 g-3">
        
        <div class="col">
        </div>
        
        <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>R1</p></center>
            <a href="/camera_R1" 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 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 g-3">
      
        <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>S1</p></center>
            <a href="/camera_S1" 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 class="col">
          <div class="card shadow-sm">
            <center><p class="card-text" style="font-size: 20px;font-weight: bold;">色選機<br>S2</p></center>
            <a href="/camera_S2" 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-1 row-cols-md-5 g-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;">色選機出料槽<br>SO1</p></center>
            <a href="/camera_SO1" 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 class="col">
          <div class="card shadow-sm">
            <center><p class="card-text" style="font-size: 20px;font-weight: bold;">色選機出料槽<br>SO2</p></center>
            <a href="/camera_SO2" 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-1 row-cols-md-5 g-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;">脫皮機<br>P1</p></center>
            <a href="/camera_P1" 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 class="col">
          <div class="card shadow-sm">
            <center><p class="card-text" style="font-size: 20px;font-weight: bold;">脫皮機<br>P2</p></center>
            <a href="/camera_P2" 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-1 row-cols-md-5 g-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;">脫皮機出料槽<br>PO1</p></center>
            <a href="/camera_PO1" 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 class="col">
          <div class="card shadow-sm">
            <center><p class="card-text" style="font-size: 20px;font-weight: bold;">脫皮機出料槽<br>PO2</p></center>
            <a href="/camera_PO2" 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 %}