50 lines
1.9 KiB
PHP
50 lines
1.9 KiB
PHP
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Level 1 - Studio RIT</title>
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
|
</head>
|
|
<body>
|
|
<main class="container">
|
|
<div class="logo">Studio RIT</div>
|
|
<h2>Level 1: Draw a Logo</h2>
|
|
<p class="instructions mb-4">Draw any simple logo using the pen tool.</p>
|
|
|
|
<div class="canvas-container">
|
|
<canvas id="signature-pad" class="signature-pad" width=400 height=200></canvas>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<button id="clear" class="btn btn-secondary">Clear</button>
|
|
<button id="done" class="btn btn-primary">Done</button>
|
|
</div>
|
|
</main>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.0.0/dist/signature_pad.umd.min.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
var canvas = document.getElementById('signature-pad');
|
|
var signaturePad = new SignaturePad(canvas, {
|
|
backgroundColor: 'rgb(255, 255, 255)'
|
|
});
|
|
|
|
document.getElementById('clear').addEventListener('click', function () {
|
|
signaturePad.clear();
|
|
});
|
|
|
|
document.getElementById('done').addEventListener('click', function () {
|
|
// Here we will handle the completion logic
|
|
window.location.href = 'update_level.php';
|
|
});
|
|
});
|
|
</script>
|
|
</main>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
</body>
|
|
</html> |