whiteboard / templates /index.html
5m4ck3r's picture
Update templates/index.html
d5562bc verified
raw
history blame
3.08 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Whiteboard</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
</head>
<body>
<div class="whiteboard-container">
<div style="display: flex; justify-content: center; align-items: center; height: 100vh;">
<canvas id="whiteboard"></canvas>
</div>
<div class="brush-preview" id="brushPreview"></div>
<div class="bottom-toolbar">
<button id="toggleToolbar" class="tool-btn toggle-btn" title="Toggle Toolbar">
<span class="material-icons">keyboard_arrow_up</span>
</button>
<div id="toolbarContent" class="toolbar-content">
<div class="tool-group">
<button id="undoBtn" class="tool-btn" title="Undo (Ctrl+Z)">
<span class="material-icons">undo</span>
</button>
<button id="redoBtn" class="tool-btn" title="Redo (Ctrl+Y)">
<span class="material-icons">redo</span>
</button>
</div>
<div class="tool-group">
<input type="color" id="colorPicker" value="#000000" title="Color">
<button id="eraserBtn" class="tool-btn" title="Eraser">
<span class="material-icons">auto_fix_high</span>
</button>
</div>
<div class="tool-group">
<input type="range" id="brushSize" min="1" max="50" value="2" title="Brush Size">
<span id="brushSizeLabel">2px</span>
</div>
<div class="page-controls">
<button id="prevBtn" class="tool-btn" title="Previous Page">
<span class="material-icons">navigate_before</span>
</button>
<span id="pageInfo">Page 1</span>
<button id="nextBtn" class="tool-btn" title="Next Page">
<span class="material-icons">navigate_next</span>
</button>
</div>
<div class="action-buttons">
<button id="clearBtn" class="tool-btn" title="Clear Page">
<span class="material-icons">delete_outline</span>
</button>
<button id="aiBtn" class="action-btn ai-btn">
<span class="material-icons">psychology</span>
</button>
<button id="submitBtn" class="action-btn submit-btn">
<span class="material-icons">upload_file</span>
</button>
</div>
</div>
</div>
</div>
<script src="{{ url_for('static', filename='js/utils.js') }}"></script>
<script src="{{ url_for('static', filename='js/history.js') }}"></script>
<script src="{{ url_for('static', filename='js/tools.js') }}"></script>
<script src="{{ url_for('static', filename='js/pages.js') }}"></script>
<script src="{{ url_for('static', filename='js/script.js') }}"></script>
</body>
</html>