Spaces:
Runtime error
Runtime error
Update templates/camera.html
Browse files- templates/camera.html +22 -0
templates/camera.html
CHANGED
|
@@ -5,6 +5,7 @@
|
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
<title>Flask Camera App</title>
|
| 7 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
|
|
|
| 8 |
<style>
|
| 9 |
body {
|
| 10 |
font-family: Arial, sans-serif;
|
|
@@ -17,6 +18,7 @@
|
|
| 17 |
max-width: 800px;
|
| 18 |
margin: 50px auto;
|
| 19 |
text-align: center;
|
|
|
|
| 20 |
}
|
| 21 |
|
| 22 |
h1 {
|
|
@@ -61,10 +63,30 @@
|
|
| 61 |
max-height: 300px;
|
| 62 |
overflow-y: auto;
|
| 63 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 64 |
</style>
|
| 65 |
</head>
|
| 66 |
<body>
|
| 67 |
<div class="container">
|
|
|
|
| 68 |
<h1>Camera Capture App</h1>
|
| 69 |
<button id="openCamera" class="btn">Open Camera</button>
|
| 70 |
<div id="cameraContainer" style="display: none;">
|
|
|
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
<title>Flask Camera App</title>
|
| 7 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
| 8 |
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
|
| 9 |
<style>
|
| 10 |
body {
|
| 11 |
font-family: Arial, sans-serif;
|
|
|
|
| 18 |
max-width: 800px;
|
| 19 |
margin: 50px auto;
|
| 20 |
text-align: center;
|
| 21 |
+
position: relative; /* Ensure container works with absolute positioning of back button */
|
| 22 |
}
|
| 23 |
|
| 24 |
h1 {
|
|
|
|
| 63 |
max-height: 300px;
|
| 64 |
overflow-y: auto;
|
| 65 |
}
|
| 66 |
+
|
| 67 |
+
/* Green Back Button styling */
|
| 68 |
+
.back-button {
|
| 69 |
+
position: absolute;
|
| 70 |
+
top: 15px;
|
| 71 |
+
left: 15px;
|
| 72 |
+
display: inline-block;
|
| 73 |
+
background-color: green;
|
| 74 |
+
color: white;
|
| 75 |
+
padding: 10px 20px;
|
| 76 |
+
text-decoration: none;
|
| 77 |
+
font-weight: bold;
|
| 78 |
+
border-radius: 4px;
|
| 79 |
+
z-index: 10;
|
| 80 |
+
}
|
| 81 |
+
|
| 82 |
+
.back-button:hover {
|
| 83 |
+
background-color: darkgreen;
|
| 84 |
+
}
|
| 85 |
</style>
|
| 86 |
</head>
|
| 87 |
<body>
|
| 88 |
<div class="container">
|
| 89 |
+
<a href="{{ url_for('menu.menu') }}" class="back-button"><i class="fa fa-arrow-left"></i></a>
|
| 90 |
<h1>Camera Capture App</h1>
|
| 91 |
<button id="openCamera" class="btn">Open Camera</button>
|
| 92 |
<div id="cameraContainer" style="display: none;">
|