Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Cake Split - Proportional Division</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .cake-piece { | |
| transition: all 0.3s ease; | |
| } | |
| .cake-piece:hover { | |
| transform: scale(1.05); | |
| z-index: 10; | |
| } | |
| #cakeCanvas { | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| #cameraView { | |
| transform: scaleX(-1); /* Mirror effect for front camera */ | |
| } | |
| .slice-control { | |
| -webkit-appearance: none; | |
| height: 8px; | |
| border-radius: 4px; | |
| background: linear-gradient(90deg, #f59e0b, #ef4444); | |
| } | |
| .slice-control::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| background: #3b82f6; | |
| cursor: pointer; | |
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-amber-50 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <header class="text-center mb-8"> | |
| <h1 class="text-4xl font-bold text-amber-800 mb-2"> | |
| <i class="fas fa-cake-candles mr-2"></i>Cake Split | |
| </h1> | |
| <p class="text-amber-600">Capture your cake and divide it proportionally</p> | |
| </header> | |
| <div class="flex flex-col lg:flex-row gap-8"> | |
| <!-- Camera Section --> | |
| <div class="flex-1 bg-white rounded-xl shadow-lg p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-semibold text-amber-800"> | |
| <i class="fas fa-camera mr-2"></i>Capture Your Cake | |
| </h2> | |
| <div class="flex gap-2"> | |
| <button id="switchCamera" class="bg-amber-100 text-amber-800 p-2 rounded-full"> | |
| <i class="fas fa-camera-retro"></i> | |
| </button> | |
| <button id="flashToggle" class="bg-amber-100 text-amber-800 p-2 rounded-full"> | |
| <i class="fas fa-bolt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="relative aspect-square bg-gray-200 rounded-lg overflow-hidden mb-4"> | |
| <video id="cameraView" autoplay playsinline class="w-full h-full object-cover"></video> | |
| <div id="cameraOverlay" class="absolute inset-0 flex items-center justify-center hidden"> | |
| <div class="cake-overlay-circle w-64 h-64 rounded-full border-4 border-dashed border-white opacity-70"></div> | |
| </div> | |
| </div> | |
| <div class="flex justify-center gap-4"> | |
| <button id="captureBtn" class="bg-amber-600 hover:bg-amber-700 text-white px-6 py-3 rounded-full font-medium flex items-center"> | |
| <i class="fas fa-camera mr-2"></i> Capture Cake | |
| </button> | |
| <button id="uploadBtn" class="bg-amber-100 hover:bg-amber-200 text-amber-800 px-6 py-3 rounded-full font-medium flex items-center"> | |
| <i class="fas fa-upload mr-2"></i> Upload | |
| </button> | |
| <input type="file" id="fileInput" accept="image/*" class="hidden"> | |
| </div> | |
| </div> | |
| <!-- Division Section --> | |
| <div class="flex-1 bg-white rounded-xl shadow-lg p-6"> | |
| <h2 class="text-xl font-semibold text-amber-800 mb-4"> | |
| <i class="fas fa-divide mr-2"></i>Divide Proportionally | |
| </h2> | |
| <div class="mb-6"> | |
| <label class="block text-amber-700 mb-2">Number of People</label> | |
| <div class="flex items-center gap-4"> | |
| <button id="decrementPeople" class="bg-amber-100 text-amber-800 w-10 h-10 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-minus"></i> | |
| </button> | |
| <span id="peopleCount" class="text-2xl font-bold text-amber-800 min-w-[40px] text-center">4</span> | |
| <button id="incrementPeople" class="bg-amber-100 text-amber-800 w-10 h-10 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-amber-700 mb-2">Slice Proportions</label> | |
| <div id="proportionControls" class="space-y-4"> | |
| <!-- Dynamic controls will be added here --> | |
| </div> | |
| </div> | |
| <div class="flex justify-center mb-6"> | |
| <button id="divideBtn" class="bg-amber-600 hover:bg-amber-700 text-white px-6 py-3 rounded-full font-medium flex items-center"> | |
| <i class="fas fa-cut mr-2"></i> Divide Cake | |
| </button> | |
| </div> | |
| <div class="aspect-square bg-gray-100 rounded-lg overflow-hidden flex items-center justify-center relative"> | |
| <canvas id="cakeCanvas" class="max-w-full max-h-full"></canvas> | |
| <div id="noCakeMessage" class="absolute inset-0 flex items-center justify-center text-gray-400"> | |
| <div class="text-center"> | |
| <i class="fas fa-cake-candles text-4xl mb-2"></i> | |
| <p>Capture or upload a cake image</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Results Section (hidden by default) --> | |
| <div id="resultsSection" class="mt-8 bg-white rounded-xl shadow-lg p-6 hidden"> | |
| <h2 class="text-xl font-semibold text-amber-800 mb-4"> | |
| <i class="fas fa-chart-pie mr-2"></i>Division Results | |
| </h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6"> | |
| <!-- Dynamic results will be added here --> | |
| </div> | |
| <div class="flex justify-center gap-4"> | |
| <button id="saveBtn" class="bg-amber-600 hover:bg-amber-700 text-white px-6 py-3 rounded-full font-medium flex items-center"> | |
| <i class="fas fa-save mr-2"></i> Save Division | |
| </button> | |
| <button id="shareBtn" class="bg-amber-100 hover:bg-amber-200 text-amber-800 px-6 py-3 rounded-full font-medium flex items-center"> | |
| <i class="fas fa-share-alt mr-2"></i> Share | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // DOM Elements | |
| const cameraView = document.getElementById('cameraView'); | |
| const cameraOverlay = document.getElementById('cameraOverlay'); | |
| const captureBtn = document.getElementById('captureBtn'); | |
| const uploadBtn = document.getElementById('uploadBtn'); | |
| const fileInput = document.getElementById('fileInput'); | |
| const cakeCanvas = document.getElementById('cakeCanvas'); | |
| const ctx = cakeCanvas.getContext('2d'); | |
| const noCakeMessage = document.getElementById('noCakeMessage'); | |
| const peopleCount = document.getElementById('peopleCount'); | |
| const incrementPeople = document.getElementById('incrementPeople'); | |
| const decrementPeople = document.getElementById('decrementPeople'); | |
| const proportionControls = document.getElementById('proportionControls'); | |
| const divideBtn = document.getElementById('divideBtn'); | |
| const resultsSection = document.getElementById('resultsSection'); | |
| const switchCamera = document.getElementById('switchCamera'); | |
| const flashToggle = document.getElementById('flashToggle'); | |
| // App State | |
| let currentImage = null; | |
| let people = 4; | |
| let proportions = Array(people).fill(1); | |
| let stream = null; | |
| let facingMode = "user"; // front camera by default | |
| let flashOn = false; | |
| // Initialize | |
| setupProportionControls(); | |
| setupCamera(); | |
| resizeCanvas(); | |
| // Event Listeners | |
| window.addEventListener('resize', resizeCanvas); | |
| captureBtn.addEventListener('click', captureCake); | |
| uploadBtn.addEventListener('click', () => fileInput.click()); | |
| fileInput.addEventListener('change', handleFileUpload); | |
| incrementPeople.addEventListener('click', () => updatePeopleCount(1)); | |
| decrementPeople.addEventListener('click', () => updatePeopleCount(-1)); | |
| divideBtn.addEventListener('click', divideCake); | |
| switchCamera.addEventListener('click', toggleCamera); | |
| flashToggle.addEventListener('click', toggleFlash); | |
| // Functions | |
| function setupCamera() { | |
| const constraints = { | |
| video: { | |
| facingMode: facingMode, | |
| width: { ideal: 1280 }, | |
| height: { ideal: 1280 } | |
| } | |
| }; | |
| navigator.mediaDevices.getUserMedia(constraints) | |
| .then(function(mediaStream) { | |
| stream = mediaStream; | |
| cameraView.srcObject = stream; | |
| cameraOverlay.classList.remove('hidden'); | |
| }) | |
| .catch(function(err) { | |
| console.error("Camera error: ", err); | |
| alert("Could not access the camera. Please check permissions."); | |
| }); | |
| } | |
| function toggleCamera() { | |
| if (stream) { | |
| stream.getTracks().forEach(track => track.stop()); | |
| } | |
| facingMode = facingMode === "user" ? "environment" : "user"; | |
| setupCamera(); | |
| } | |
| function toggleFlash() { | |
| flashOn = !flashOn; | |
| flashToggle.classList.toggle('bg-amber-600', flashOn); | |
| flashToggle.classList.toggle('text-white', flashOn); | |
| if (stream) { | |
| const videoTrack = stream.getVideoTracks()[0]; | |
| if (videoTrack && videoTrack.getCapabilities().torch) { | |
| videoTrack.applyConstraints({ | |
| advanced: [{torch: flashOn}] | |
| }).catch(err => console.error("Flash error:", err)); | |
| } | |
| } | |
| } | |
| function captureCake() { | |
| if (!stream) return; | |
| // Temporarily hide overlay for capture | |
| cameraOverlay.classList.add('hidden'); | |
| // Create temporary canvas to capture the video frame | |
| const tempCanvas = document.createElement('canvas'); | |
| tempCanvas.width = cameraView.videoWidth; | |
| tempCanvas.height = cameraView.videoHeight; | |
| const tempCtx = tempCanvas.getContext('2d'); | |
| tempCtx.drawImage(cameraView, 0, 0, tempCanvas.width, tempCanvas.height); | |
| // Restore overlay | |
| cameraOverlay.classList.remove('hidden'); | |
| // Process the captured image | |
| processImage(tempCanvas.toDataURL('image/jpeg')); | |
| } | |
| function handleFileUpload(e) { | |
| const file = e.target.files[0]; | |
| if (!file) return; | |
| const reader = new FileReader(); | |
| reader.onload = function(event) { | |
| processImage(event.target.result); | |
| }; | |
| reader.readAsDataURL(file); | |
| } | |
| function processImage(imageData) { | |
| currentImage = new Image(); | |
| currentImage.onload = function() { | |
| noCakeMessage.classList.add('hidden'); | |
| resizeCanvas(); | |
| drawCake(); | |
| }; | |
| currentImage.src = imageData; | |
| } | |
| function resizeCanvas() { | |
| const container = cakeCanvas.parentElement; | |
| const size = Math.min(container.clientWidth, container.clientHeight); | |
| cakeCanvas.width = size; | |
| cakeCanvas.height = size; | |
| if (currentImage) { | |
| drawCake(); | |
| } | |
| } | |
| function drawCake() { | |
| if (!currentImage) return; | |
| const size = cakeCanvas.width; | |
| ctx.clearRect(0, 0, size, size); | |
| // Draw cake image centered and square | |
| const scale = Math.min(size / currentImage.width, size / currentImage.height); | |
| const width = currentImage.width * scale; | |
| const height = currentImage.height * scale; | |
| const x = (size - width) / 2; | |
| const y = (size - height) / 2; | |
| ctx.drawImage(currentImage, x, y, width, height); | |
| } | |
| function updatePeopleCount(change) { | |
| people = Math.max(1, Math.min(10, people + change)); | |
| peopleCount.textContent = people; | |
| // Update proportions array | |
| if (change > 0) { | |
| proportions.push(1); // Add default proportion for new person | |
| } else { | |
| proportions.pop(); // Remove last proportion | |
| } | |
| setupProportionControls(); | |
| } | |
| function setupProportionControls() { | |
| proportionControls.innerHTML = ''; | |
| for (let i = 0; i < people; i++) { | |
| const controlDiv = document.createElement('div'); | |
| controlDiv.className = 'flex items-center gap-4'; | |
| const label = document.createElement('span'); | |
| label.className = 'text-amber-700 w-8'; | |
| label.textContent = `P${i+1}:`; | |
| const slider = document.createElement('input'); | |
| slider.type = 'range'; | |
| slider.min = '1'; | |
| slider.max = '10'; | |
| slider.value = proportions[i]; | |
| slider.className = 'slice-control flex-1'; | |
| slider.dataset.index = i; | |
| const valueDisplay = document.createElement('span'); | |
| valueDisplay.className = 'text-amber-800 font-medium w-8 text-center'; | |
| valueDisplay.textContent = proportions[i]; | |
| slider.addEventListener('input', function() { | |
| proportions[this.dataset.index] = parseInt(this.value); | |
| valueDisplay.textContent = this.value; | |
| }); | |
| controlDiv.appendChild(label); | |
| controlDiv.appendChild(slider); | |
| controlDiv.appendChild(valueDisplay); | |
| proportionControls.appendChild(controlDiv); | |
| } | |
| } | |
| function divideCake() { | |
| if (!currentImage) { | |
| alert("Please capture or upload a cake image first."); | |
| return; | |
| } | |
| const size = cakeCanvas.width; | |
| ctx.clearRect(0, 0, size, size); | |
| // Draw cake image | |
| const scale = Math.min(size / currentImage.width, size / currentImage.height); | |
| const width = currentImage.width * scale; | |
| const height = currentImage.height * scale; | |
| const x = (size - width) / 2; | |
| const y = (size - height) / 2; | |
| // Calculate total proportions | |
| const totalProportions = proportions.reduce((a, b) => a + b, 0); | |
| // Draw divided cake | |
| let startAngle = 0; | |
| const centerX = size / 2; | |
| const centerY = size / 2; | |
| const radius = Math.min(width, height) / 2; | |
| // Draw each slice | |
| for (let i = 0; i < people; i++) { | |
| const sliceAngle = (proportions[i] / totalProportions) * 2 * Math.PI; | |
| const endAngle = startAngle + sliceAngle; | |
| // Create slice path | |
| ctx.beginPath(); | |
| ctx.moveTo(centerX, centerY); | |
| ctx.arc(centerX, centerY, radius, startAngle, endAngle); | |
| ctx.closePath(); | |
| // Clip and draw cake portion | |
| ctx.save(); | |
| ctx.clip(); | |
| ctx.drawImage(currentImage, x, y, width, height); | |
| ctx.restore(); | |
| // Draw slice border | |
| ctx.beginPath(); | |
| ctx.moveTo(centerX, centerY); | |
| ctx.arc(centerX, centerY, radius, startAngle, endAngle); | |
| ctx.closePath(); | |
| ctx.strokeStyle = 'rgba(255, 255, 255, 0.8)'; | |
| ctx.lineWidth = 4; | |
| ctx.stroke(); | |
| // Draw proportion text | |
| const midAngle = startAngle + sliceAngle / 2; | |
| const textX = centerX + Math.cos(midAngle) * radius * 0.6; | |
| const textY = centerY + Math.sin(midAngle) * radius * 0.6; | |
| ctx.font = `bold ${Math.max(14, radius * 0.15)}px Arial`; | |
| ctx.fillStyle = 'white'; | |
| ctx.strokeStyle = 'rgba(0, 0, 0, 0.5)'; | |
| ctx.lineWidth = 3; | |
| ctx.textAlign = 'center'; | |
| ctx.textBaseline = 'middle'; | |
| ctx.strokeText(`${proportions[i]}`, textX, textY); | |
| ctx.fillText(`${proportions[i]}`, textX, textY); | |
| startAngle = endAngle; | |
| } | |
| // Show results section | |
| showResults(); | |
| } | |
| function showResults() { | |
| resultsSection.classList.remove('hidden'); | |
| const resultsContainer = resultsSection.querySelector('.grid'); | |
| resultsContainer.innerHTML = ''; | |
| // Calculate total proportions | |
| const totalProportions = proportions.reduce((a, b) => a + b, 0); | |
| for (let i = 0; i < people; i++) { | |
| const percentage = ((proportions[i] / totalProportions) * 100).toFixed(1); | |
| const resultCard = document.createElement('div'); | |
| resultCard.className = 'bg-amber-50 rounded-lg p-4 text-center'; | |
| const colorClass = [ | |
| 'bg-amber-200', 'bg-blue-200', 'bg-green-200', 'bg-red-200', | |
| 'bg-purple-200', 'bg-pink-200', 'bg-indigo-200', 'bg-yellow-200', | |
| 'bg-teal-200', 'bg-orange-200' | |
| ][i % 10]; | |
| resultCard.innerHTML = ` | |
| <div class="w-16 h-16 ${colorClass} rounded-full flex items-center justify-center mx-auto mb-2"> | |
| <span class="text-xl font-bold">P${i+1}</span> | |
| </div> | |
| <h3 class="font-semibold text-amber-800">Person ${i+1}</h3> | |
| <p class="text-amber-600">${proportions[i]} part(s)</p> | |
| <p class="text-amber-800 font-bold">${percentage}%</p> | |
| `; | |
| resultsContainer.appendChild(resultCard); | |
| } | |
| // Scroll to results | |
| resultsSection.scrollIntoView({ behavior: 'smooth' }); | |
| } | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Rilaba/splitting-cake" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |