47 lines
2.2 KiB
HTML
47 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="main.css">
|
|
<title>Homepage</title>
|
|
</head>
|
|
<body>
|
|
<div id="navbar-placeholder"></div>
|
|
<div id="page-content">
|
|
<h2>Homepage</h2>
|
|
<hr>
|
|
<h3>To use</h3>
|
|
<div id="item-component-demo"></div>
|
|
<script type="module">
|
|
console.log('Demo script running');
|
|
import createItemComponent from './item-component.js';
|
|
const demoRoot = document.getElementById('item-component-demo');
|
|
demoRoot.className = 'item-component-grid';
|
|
|
|
const items = [
|
|
{ imgSrc: 'https://picsum.photos/seed/1/200/200', imgAlt: 'Chicken Salad', text1: 'Chicken Salad', text2: 'Fresh — 2 left', text3: 'Use within 3 days' },
|
|
{ imgSrc: 'https://picsum.photos/seed/2/200/200', imgAlt: 'Yogurt', text1: 'Greek Yogurt', text2: 'Chilled — 6 left', text3: 'Best before 5 days' },
|
|
{ imgSrc: 'https://picsum.photos/seed/3/200/200', imgAlt: 'Apples', text1: 'Red Apples', text2: 'Room temp — 12 left', text3: 'Keep away from moisture' }, ];
|
|
|
|
items.forEach(data => {
|
|
const comp = createItemComponent({ ...data, editable: false });
|
|
demoRoot.appendChild(comp);
|
|
});
|
|
</script>
|
|
<hr>
|
|
<h3>Inventory Breakdown</h3>
|
|
<div class="chart-container">
|
|
<svg width="350" height="350" viewBox="0 0 42 42">
|
|
<circle cx="21" cy="21" r="10" fill="transparent" stroke="#f2f2f2" stroke-width="20"></circle>
|
|
<circle id="seg-1" cx="21" cy="21" r="10" fill="transparent" stroke-width="20"></circle>
|
|
<circle id="seg-2" cx="21" cy="21" r="10" fill="transparent" stroke-width="20"></circle>
|
|
<circle id="seg-3" cx="21" cy="21" r="10" fill="transparent" stroke-width="20"></circle>
|
|
</svg>
|
|
<div id="legend"></div>
|
|
</div>
|
|
</div>
|
|
<script src="navbar.js"></script>
|
|
<script src="piechart.js"></script>
|
|
</body>
|
|
</html> |