Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>A Tolka - Egg Pack Calculator</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary: #5d8b6f; | |
| --primary-light: #7cb292; | |
| --secondary: #f8f8f8; | |
| --text: #333; | |
| --light-text: #777; | |
| --border: #e0e0e0; | |
| --shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| body { | |
| background-color: #f5f5f5; | |
| color: var(--text); | |
| line-height: 1.6; | |
| } | |
| .container { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| header { | |
| text-align: center; | |
| margin-bottom: 40px; | |
| padding: 20px 0; | |
| position: relative; | |
| } | |
| header::after { | |
| content: ""; | |
| display: block; | |
| width: 100px; | |
| height: 4px; | |
| background: var(--primary); | |
| margin: 15px auto; | |
| border-radius: 2px; | |
| } | |
| h1 { | |
| font-size: 2.5rem; | |
| color: var(--primary); | |
| font-weight: 700; | |
| margin-bottom: 10px; | |
| } | |
| .subtitle { | |
| color: var(--light-text); | |
| font-size: 1.1rem; | |
| } | |
| .calculator { | |
| background: white; | |
| border-radius: 10px; | |
| padding: 30px; | |
| box-shadow: var(--shadow); | |
| margin-bottom: 30px; | |
| } | |
| .calculator-title { | |
| font-size: 1.5rem; | |
| margin-bottom: 20px; | |
| color: var(--primary); | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .calculator-title i { | |
| font-size: 1.3rem; | |
| } | |
| .form-group { | |
| margin-bottom: 20px; | |
| } | |
| label { | |
| display: block; | |
| margin-bottom: 8px; | |
| font-weight: 500; | |
| } | |
| select, input { | |
| width: 100%; | |
| padding: 12px 15px; | |
| border: 1px solid var(--border); | |
| border-radius: 5px; | |
| font-size: 1rem; | |
| transition: all 0.3s; | |
| } | |
| select:focus, input:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| box-shadow: 0 0 0 3px rgba(93, 139, 111, 0.2); | |
| } | |
| .results { | |
| background: var(--secondary); | |
| border-radius: 8px; | |
| padding: 20px; | |
| margin-top: 30px; | |
| border-left: 4px solid var(--primary); | |
| } | |
| .result-item { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-bottom: 10px; | |
| padding: 10px 0; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .result-item:last-child { | |
| border-bottom: none; | |
| } | |
| .result-label { | |
| font-weight: 600; | |
| } | |
| .result-value { | |
| font-weight: 700; | |
| color: var(--primary); | |
| font-size: 1.1rem; | |
| } | |
| .highlight { | |
| background-color: rgba(93, 139, 111, 0.1); | |
| padding: 2px 5px; | |
| border-radius: 3px; | |
| } | |
| footer { | |
| text-align: center; | |
| padding: 20px; | |
| color: var(--light-text); | |
| font-size: 0.9rem; | |
| } | |
| @media (max-width: 600px) { | |
| h1 { | |
| font-size: 2rem; | |
| } | |
| .calculator { | |
| padding: 20px; | |
| } | |
| .calculator-title { | |
| font-size: 1.3rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <h1>A Tolka</h1> | |
| <p class="subtitle">Egg Pack Calculator</p> | |
| </header> | |
| <div class="calculator"> | |
| <h2 class="calculator-title"><i class="fas fa-calculator"></i> Pack Calculator</h2> | |
| <div class="form-group"> | |
| <label for="product">Product Type</label> | |
| <select id="product" class="form-control"> | |
| <option value="">Select a product...</option> | |
| <option value="6vlarge">6 Very Large Eggs (20 packs/box, 67/bundle)</option> | |
| <option value="6large">6 Large Eggs (30 packs/box, 67/bundle)</option> | |
| <option value="6medium">6 Medium Eggs (30 packs/box, 67/bundle)</option> | |
| <option value="12large">12 Large Eggs (15 packs/box, 67/bundle)</option> | |
| <option value="12medium">12 Medium Eggs (30 packs/box, 67/bundle)</option> | |
| <option value="18small">18 Small Eggs (20 packs/box, 210/bundle)</option> | |
| <option value="20xl">20 XL Eggs (9 packs/box, 410/bundle)</option> | |
| <option value="20large">20 Large Eggs (12 packs/box, 410/bundle)</option> | |
| <option value="20medium">20 Medium Eggs (12 packs/box, 410/bundle)</option> | |
| <option value="30medium">30 Medium Eggs (8 packs/box, 205/bundle)</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="boxes">Number of Boxes</label> | |
| <input type="number" id="boxes" class="form-control" min="0" placeholder="Enter number of boxes"> | |
| </div> | |
| <div class="results" id="results"> | |
| <p style="text-align: center; color: var(--light-text);">Please select a product and enter the number of boxes</p> | |
| </div> | |
| </div> | |
| <footer> | |
| <p>© 2023 A Tolka. All calculations are estimates.</p> | |
| </footer> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const productSelect = document.getElementById('product'); | |
| const boxesInput = document.getElementById('boxes'); | |
| const resultsDiv = document.getElementById('results'); | |
| // Product data: packs per box and packs per bundle | |
| const products = { | |
| '6vlarge': { name: '6 Very Large Eggs', ppb: 20, bundle: 67 }, | |
| '6large': { name: '6 Large Eggs', ppb: 30, bundle: 67 }, | |
| '6medium': { name: '6 Medium Eggs', ppb: 30, bundle: 67 }, | |
| '12large': { name: '12 Large Eggs', ppb: 15, bundle: 67 }, | |
| '12medium': { name: '12 Medium Eggs', ppb: 30, bundle: 67 }, | |
| '18small': { name: '18 Small Eggs', ppb: 20, bundle: 210 }, | |
| '20xl': { name: '20 XL Eggs', ppb: 9, bundle: 410 }, | |
| '20large': { name: '20 Large Eggs', ppb: 12, bundle: 410 }, | |
| '20medium': { name: '20 Medium Eggs', ppb: 12, bundle: 410 }, | |
| '30medium': { name: '30 Medium Eggs', ppb: 8, bundle: 205 } | |
| }; | |
| function calculate() { | |
| const productId = productSelect.value; | |
| const boxes = parseInt(boxesInput.value) || 0; | |
| if (!productId || isNaN(boxes) || boxes < 0) { | |
| return; | |
| } | |
| const product = products[productId]; | |
| const totalPacks = boxes * product.ppb; | |
| const bundles = Math.floor(totalPacks / product.bundle); | |
| const loosePacks = totalPacks % product.bundle; | |
| // Format the results | |
| resultsDiv.innerHTML = ` | |
| <div class="result-item"> | |
| <span class="result-label">Product:</span> | |
| <span class="result-value">${product.name}</span> | |
| </div> | |
| <div class="result-item"> | |
| <span class="result-label">Boxes entered:</span> | |
| <span class="result-value">${boxes}</span> | |
| </div> | |
| <div class="result-item"> | |
| <span class="result-label">Total Packs:</span> | |
| <span class="result-value">${totalPacks} <span class="highlight">(${boxes} × ${product.ppb})</span></span> | |
| </div> | |
| <div class="result-item"> | |
| <span class="result-label">Full Bundles:</span> | |
| <span class="result-value">${bundles} <span class="highlight">of ${product.bundle} packs each</span></span> | |
| </div> | |
| <div class="result-item"> | |
| <span class="result-label">Loose Packs:</span> | |
| <span class="result-value">${loosePacks}</span> | |
| </div> | |
| <div class="result-item" style="margin-top: 20px; padding-top: 15px; border-top: 1px dashed var(--border);"> | |
| <span class="result-label">Total:</span> | |
| <span class="result-value">${bundles} bundles + ${loosePacks} loose packs</span> | |
| </div> | |
| `; | |
| } | |
| // Add event listeners | |
| productSelect.addEventListener('change', calculate); | |
| boxesInput.addEventListener('input', calculate); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: absolute; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">This website has been generated by <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body> | |
| </html> |