64 lines
1.6 KiB
HTML
64 lines
1.6 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>Landing Page</title>
|
||
|
||
<!-- Component scripts -->
|
||
<script
|
||
type="module"
|
||
src="./components/side-menu/side-menu.js"
|
||
></script>
|
||
<script
|
||
type="module"
|
||
src="./components/color-picker/color-picker.js"
|
||
></script>
|
||
<script
|
||
type="module"
|
||
src="./components/grid-selector/grid-selector.js"
|
||
></script>
|
||
|
||
<script
|
||
type="module"
|
||
src="./components/canvas-display/canvas-display.js"
|
||
></script>
|
||
|
||
<style>
|
||
html,
|
||
body {
|
||
margin: 0;
|
||
height: 100%;
|
||
font-family: sans-serif;
|
||
}
|
||
#container {
|
||
display: flex;
|
||
height: 100%;
|
||
}
|
||
side-menu-component {
|
||
flex: 0 0 var(--side-menu-width, 250px);
|
||
}
|
||
#main {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
canvas-display {
|
||
flex: 1;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="container">
|
||
<!-- Side menu (slide‑out) -->
|
||
<side-menu-component></side-menu-component>
|
||
|
||
<!-- Main area -->
|
||
<div id="main">
|
||
<!-- Canvas that will display the drawing area and grid overlay -->
|
||
<canvas-display></canvas-display>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|