Update templates/camera.html
Browse files- templates/camera.html +8 -12
templates/camera.html
CHANGED
|
@@ -3,9 +3,8 @@
|
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
-
<title>Camera
|
| 7 |
-
|
| 8 |
-
<!-- Inline CSS -->
|
| 9 |
<style>
|
| 10 |
body {
|
| 11 |
font-family: Arial, sans-serif;
|
|
@@ -66,8 +65,9 @@
|
|
| 66 |
</head>
|
| 67 |
<body>
|
| 68 |
<div class="container">
|
| 69 |
-
<h1>Camera Capture</h1>
|
| 70 |
-
<
|
|
|
|
| 71 |
<select id="cameraSelect">
|
| 72 |
<option value="user">Front Camera</option>
|
| 73 |
<option value="environment">Back Camera</option>
|
|
@@ -80,13 +80,10 @@
|
|
| 80 |
<img id="capturedImage" style="display: none; max-width: 100%;">
|
| 81 |
<div id="actionButtons" style="display: none; margin-top: 10px;">
|
| 82 |
<button id="retakeButton" class="btn">Retake</button>
|
| 83 |
-
<button id="uploadButton" class="btn">Upload to
|
| 84 |
</div>
|
| 85 |
</div>
|
| 86 |
</div>
|
| 87 |
-
|
| 88 |
-
<!-- Inline JavaScript -->
|
| 89 |
-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
| 90 |
<script>
|
| 91 |
$(document).ready(function() {
|
| 92 |
const video = document.getElementById('videoElement');
|
|
@@ -98,8 +95,7 @@
|
|
| 98 |
let currentImageUrl = null;
|
| 99 |
|
| 100 |
// Open camera
|
| 101 |
-
$('#openCamera').click(function(
|
| 102 |
-
e.preventDefault(); // Prevent link from refreshing page
|
| 103 |
$('#cameraContainer').show();
|
| 104 |
actionButtons.style.display = 'none';
|
| 105 |
capturedImage.style.display = 'none';
|
|
@@ -201,4 +197,4 @@
|
|
| 201 |
});
|
| 202 |
</script>
|
| 203 |
</body>
|
| 204 |
-
</html>
|
|
|
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 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;
|
|
|
|
| 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;">
|
| 71 |
<select id="cameraSelect">
|
| 72 |
<option value="user">Front Camera</option>
|
| 73 |
<option value="environment">Back Camera</option>
|
|
|
|
| 80 |
<img id="capturedImage" style="display: none; max-width: 100%;">
|
| 81 |
<div id="actionButtons" style="display: none; margin-top: 10px;">
|
| 82 |
<button id="retakeButton" class="btn">Retake</button>
|
| 83 |
+
<button id="uploadButton" class="btn">Upload to Zapier</button>
|
| 84 |
</div>
|
| 85 |
</div>
|
| 86 |
</div>
|
|
|
|
|
|
|
|
|
|
| 87 |
<script>
|
| 88 |
$(document).ready(function() {
|
| 89 |
const video = document.getElementById('videoElement');
|
|
|
|
| 95 |
let currentImageUrl = null;
|
| 96 |
|
| 97 |
// Open camera
|
| 98 |
+
$('#openCamera').click(function() {
|
|
|
|
| 99 |
$('#cameraContainer').show();
|
| 100 |
actionButtons.style.display = 'none';
|
| 101 |
capturedImage.style.display = 'none';
|
|
|
|
| 197 |
});
|
| 198 |
</script>
|
| 199 |
</body>
|
| 200 |
+
</html>
|