144 lines
6.0 KiB
HTML
144 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<title>Homebox AI</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<!-- Login Screen -->
|
|
<div id="login-screen" class="screen">
|
|
<h1>Homebox AI</h1>
|
|
<form id="login-form">
|
|
<input type="email" id="username" placeholder="Email" required autocomplete="username">
|
|
<input type="password" id="password" placeholder="Password" required autocomplete="current-password">
|
|
<button type="submit">Login</button>
|
|
</form>
|
|
<div id="login-error" class="error hidden"></div>
|
|
</div>
|
|
|
|
<!-- Main Screen -->
|
|
<div id="main-screen" class="screen hidden">
|
|
<!-- Camera Section -->
|
|
<div id="camera-section">
|
|
<video id="camera-preview" autoplay playsinline></video>
|
|
<canvas id="photo-canvas" class="hidden"></canvas>
|
|
<img id="photo-preview" class="hidden" alt="Captured photo">
|
|
<div id="camera-controls">
|
|
<button id="capture-btn" class="primary-btn">Capture</button>
|
|
<button id="retake-btn" class="secondary-btn hidden">Retake</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Status/Loading -->
|
|
<div id="status-section" class="hidden">
|
|
<div class="spinner"></div>
|
|
<span id="status-text">Analyzing...</span>
|
|
</div>
|
|
|
|
<!-- Form Section -->
|
|
<div id="form-section" class="hidden">
|
|
<div class="form-group">
|
|
<label for="item-name">Name *</label>
|
|
<input type="text" id="item-name" placeholder="Item name" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="item-description">Description</label>
|
|
<textarea id="item-description" placeholder="Description" rows="2"></textarea>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="item-location">Location *</label>
|
|
<select id="item-location">
|
|
<option value="">Select location...</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="item-quantity">Qty</label>
|
|
<input type="number" id="item-quantity" value="1" min="1">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Labels</label>
|
|
<div id="tags-container">
|
|
<div id="selected-tags"></div>
|
|
<div id="tag-input-wrapper">
|
|
<input type="text" id="tag-input" placeholder="Add label...">
|
|
<div id="tag-suggestions" class="hidden"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Collapsible Details -->
|
|
<details class="more-details">
|
|
<summary>More Details</summary>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="item-manufacturer">Manufacturer</label>
|
|
<input type="text" id="item-manufacturer" placeholder="Brand/Manufacturer">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="item-model">Model</label>
|
|
<input type="text" id="item-model" placeholder="Model number">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="item-serial">Serial Number</label>
|
|
<input type="text" id="item-serial" placeholder="Serial number">
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="item-price">Purchase Price</label>
|
|
<input type="number" id="item-price" placeholder="0.00" step="0.01" min="0">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="item-purchase-from">Purchased From</label>
|
|
<input type="text" id="item-purchase-from" placeholder="Store/Seller">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="item-notes">Notes</label>
|
|
<textarea id="item-notes" placeholder="Additional notes" rows="2"></textarea>
|
|
</div>
|
|
|
|
<div class="form-group checkbox-group">
|
|
<label>
|
|
<input type="checkbox" id="item-insured">
|
|
<span>Insured</span>
|
|
</label>
|
|
</div>
|
|
</details>
|
|
|
|
<button id="save-btn" class="primary-btn">Save to Homebox</button>
|
|
</div>
|
|
|
|
<!-- Success Message -->
|
|
<div id="success-section" class="hidden">
|
|
<div class="success-icon">✓</div>
|
|
<p>Item saved successfully!</p>
|
|
<button id="new-item-btn" class="primary-btn">Add Another Item</button>
|
|
</div>
|
|
|
|
<!-- Error Display -->
|
|
<div id="error-section" class="hidden">
|
|
<p id="error-text"></p>
|
|
<button id="retry-btn" class="secondary-btn">Try Again</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|