103 lines
4.8 KiB
PHP
103 lines
4.8 KiB
PHP
<style>
|
|
.camera-container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
video, canvas {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
</style>
|
|
|
|
<div class="modal fade" data-modal="true" id="cameraModal" data-backdrop="" data-keyboard="false">
|
|
<div class="modal-content">
|
|
|
|
<div class="modal-header">
|
|
<h3 class="modal-title">Ambil Foto</h3>
|
|
<button type="button" class="btn btn-xs btn-icon btn-light" data-modal-dismiss="true" id="closeModal">
|
|
<i class="ki-outline ki-cross"></i>
|
|
</button>
|
|
</div>
|
|
<!-- Camera Interface -->
|
|
<div class="modal-body">
|
|
<div class="camera-container relative">
|
|
<video id="video" class="w-full h-auto" autoplay playsinline></video>
|
|
<canvas id="canvas" class="hidden w-full h-auto"></canvas>
|
|
<canvas id="drawingCanvas" class="hidden absolute top-0 left-0 w-full h-full"></canvas>
|
|
<div id="textOverlay" class="position-absolute top-0 left-0 w-100 h-100 pointer-events-none">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-footer mt-2">
|
|
<div id="cameraControls" class="flex justify-center gap-2 mt-4">
|
|
<button type="button" id="startButton" class="btn btn-primary">
|
|
<i class="ki-outline ki-camera"></i> Start Camera
|
|
</button>
|
|
<button type="button" id="takePhotoButton" class="btn btn-success" disabled>
|
|
<i class="ki-outline ki-photograph"></i> Ambil Foto
|
|
</button>
|
|
<button type="button" id="switchButton" class="btn btn-info" disabled>
|
|
<i class="ki-outline ki-arrows-circle"></i> Switch Camera
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Editor Controls -->
|
|
<div id="editorControls" class=" flex flex-wrap gap-2 mt-4">
|
|
<div class="drawing-tools flex gap-2">
|
|
|
|
<button type="button" class="tool-btn btn btn-sm" data-tool="brush">
|
|
<i class="ki-filled ki-brush"></i>
|
|
</button>
|
|
<button type="button" class="tool-btn btn btn-sm" data-tool="rectangle">
|
|
<i class="ki-filled ki-frame"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-light btn-sm tool-btn" data-tool="arrow">
|
|
<i class="ki-duotone ki-arrow-right fs-2"></i>
|
|
</button>
|
|
<button type="button" class="tool-btn btn btn-sm" data-tool="circle">
|
|
<i class="ki-filled ki-mouse-circle"></i>
|
|
</button>
|
|
<button type="button" class="tool-btn btn btn-sm" data-tool="text">
|
|
<i class="ki-filled ki-text"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="drawing-settings flex gap-2">
|
|
<input type="color" id="colorPicker" class="w-8 h-8 rounded">
|
|
<div class="flex items-center gap-2">
|
|
<input type="range" id="brushSize" min="1" max="20" value="5"
|
|
class="range range-sm">
|
|
<span id="brushSizeValue" class="text-sm">5px</span>
|
|
</div>
|
|
<input type="text" id="textInput" class="input" placeholder="Enter text">
|
|
<button type="button" class="btn btn-primary" id="confirmTextBtn">Add Text</button>
|
|
</div>
|
|
|
|
<div class="history-controls flex gap-2">
|
|
<button type="button" id="undoButton" class="btn btn-sm">
|
|
<i class="ki-filled ki-arrows-loop"></i>
|
|
</button>
|
|
<button type="button" id="resetButton" class="btn btn-sm">
|
|
<i class="ki-outline ki-trash"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="final-controls flex gap-2">
|
|
<button type="button" class="btn btn-light btn-sm" data-modal-dismiss="true">Cancel</button>
|
|
<button id="backButton" class="btn btn-warning btn-sm">
|
|
<i class="ki-outline ki-arrow-left"></i> Kembali
|
|
</button>
|
|
<button type="button" id="saveButton" class="btn btn-success btn-sm" data-modal-dismiss="true">
|
|
<i class="ki-outline ki-check"></i> Simpan
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|