| Current File : /home/kelaby89/public_html/software/cam-price-calculator/cam-price-calculator.html |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Security Camera Price Calculator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body class="dark-mode">
<div class="container dark-mode">
<h1 class="calc-heading dark-mode">Security Camera Price Calculator</h1>
<div class="content">
<div class="image-container">
<img id="camera-image" src="images/1.jpg" alt="Camera Image">
</div>
<div class="form-container">
<form id="price-form">
<label for="quantity" class="dark-mode">Quantity:</label>
<input type="number" id="quantity" name="quantity" value="1" min="1" required class="dark-mode">
<br>
<label for="model" class="dark-mode">Model:</label>
<select id="model" name="model" required class="dark-mode">
<option value="5MP Model 520A">5MP Model 520A</option>
<option value="8MP Model 820A">8MP Model 820A</option>
</select>
<br>
<label for="story" class="dark-mode">House Type:</label>
<select id="story" name="story" required class="dark-mode">
<option value="single">Single Story</option>
<option value="double">Double Story</option>
</select>
<br>
<button type="submit" class="dark-mode">Calculate</button>
</form>
<div id="results">
<p id="total-price" class="dark-mode">Total Price (with installation): $0.00</p>
</div>
<button id="help-button" class="dark-mode">Help</button>
<button id="toggle-mode" class="dark-mode">Switch to Light Mode</button>
</div>
</div>
</div>
<div id="help-modal" class="modal">
<div class="modal-content dark-mode">
<span class="close">×</span>
<h2 class="calc-heading">How to Use the Security Camera Price Calculator</h2>
<p>1. Enter the quantity of security cameras you need.</p>
<p>2. Select the model of the security camera from the dropdown list.</p>
<p>3. Choose the house type (Single Story or Double Story).</p>
<p>4. Click the "Calculate" button to get the total price with installation.</p>
<p>5. If you need more than 8 cameras, an email will be prepared for you to inquire about the price.</p>
<p>6. You can switch between Dark Mode and Light Mode by clicking the button at the bottom.</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>