ldbetteridge/pantry-management-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Converted web app to react + js

Browse Source
This commit is contained in:
Luke Betteridge
2026-03-27 07:47:39 +00:00
parent 5b31525fbc
commit b2f34e308e
434 changed files with 3218 additions and 225894 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
index.html
View File

@@ -1,47 +1,12 @@
<!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>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webpage Playground</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>