Spaces:
Runtime error
Runtime error
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Camera Capture App</title> | |
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"> | |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> | |
</head> | |
<body> | |
<div class="container"> | |
<h1>Camera Capture App</h1> | |
{% with messages = get_flashed_messages() %} | |
{% if messages %} | |
<div class="flash-messages"> | |
{% for message in messages %} | |
<p>{{ message }}</p> | |
{% endfor %} | |
</div> | |
{% endif %} | |
{% endwith %} | |
<div id="camera-section"> | |
<div id="camera-icon" class="camera-icon">π·</div> | |
<div id="camera-container" style="display: none;"> | |
<select id="camera-select"> | |
<option value="user">Front Camera</option> | |
<option value="environment">Back Camera</option> | |
</select> | |
<video id="video" autoplay playsinline></video> | |
<button id="capture-btn">Capture</button> | |
</div> | |
</div> | |
<div id="preview-section" style="display: none;"> | |
<canvas id="canvas" style="display: none;"></canvas> | |
<img id="preview-img" src="" alt="Captured Image"> | |
<div class="button-group"> | |
<button id="retake-btn">Retake</button> | |
<button id="upload-btn">Upload to Instagram</button> | |
</div> | |
</div> | |
</div> | |
<script src="{{ url_for('static', filename='js/script.js') }}"></script> | |
</body> | |
</html> |