Fancy index.html
Change-Id: Id34b142c250b0977c8ec884e335c120f2ff01cc9
diff --git a/person_detection/templates/index.html b/person_detection/templates/index.html
index 43a4c6b..0cb83e7 100644
--- a/person_detection/templates/index.html
+++ b/person_detection/templates/index.html
@@ -1,11 +1,30 @@
<html>
<head>
<title>Person Detection - Aether Edge Application</title>
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
- <h1>Person Detection - Aether Edge Application</h1>
- {% for x in devices %}
- <img src="{{ url_for('video_feed', device=x) }}">
- {% endfor %}
+ <main>
+ <div class="container">
+ <div class=row>
+ <h2 class="pb-2 border-bottom">Person Detection - Aether Edge Application</h2>
+ </div>
+ <div class="row">
+ {% for x, y in devices.items() %}
+ <div class="col-6">
+ <div class="card">
+ <img src="{{ url_for('video_feed', device=x) }}" class="card-img-top" alt="...">
+ <div class="card-body">
+ <h5 class="card-title">Camera {{ x }}</h5>
+ <p class="card-text">{{ y }}</p>
+ </div>
+ </div>
+ </div>
+ {% endfor %}
+ </div>
+ </div>
+ </main>
+ <h1></h1>
</body>
</html>