Spaces:

Rilaba
/

splitting-cake

Running

File size: 20,635 Bytes

eb5f874

<!DOCTYPE html>
<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>