Spaces:

phenixrhyder
/

Checkerboard-Frame-Generator

Sleeping

App Files Files Community

phenixrhyder commited on 12 days ago

Commit

7d51cd1

unverified ·

1 Parent(s): f86798f

Update index.html

Browse files

Files changed (1) hide show

index.html +375 -0

index.html CHANGED Viewed

	@@ -1 +1,376 @@




















1

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Frame Studio</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Poppins', sans-serif;
+            background-color: #f9fafb; /* gray-50 */
+        }
+        /* Custom scrollbar for the new theme */
+        ::-webkit-scrollbar { width: 8px; }
+        ::-webkit-scrollbar-track { background: #e5e7eb; } /* gray-200 */
+        ::-webkit-scrollbar-thumb { background: #f472b6; border-radius: 4px; } /* pink-400 */
+        ::-webkit-scrollbar-thumb:hover { background: #ec4899; } /* pink-500 */
+        /* Custom styles for range inputs - Light Mode */
+        input[type="range"] {
+            -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
+            background: #e5e7eb; /* gray-200 */ border-radius: 3px;
+            outline: none; transition: background 0.2s;
+        }
+        input[type="range"]::-webkit-slider-thumb {
+            -webkit-appearance: none; appearance: none; width: 20px; height: 20px;
+            border-radius: 50%; background: #f9fafb; /* gray-50 */ cursor: pointer;
+            border: 4px solid #ec4899; /* pink-500 */
+            transition: transform 0.2s ease-in-out;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+        }
+        input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.1); }
+        /* Custom styles for color inputs - Light Mode */
+        input[type="color"] {
+            -webkit-appearance: none; -moz-appearance: none; appearance: none;
+            width: 48px; height: 48px; background-color: transparent;
+            border: none; cursor: pointer; border-radius: 0.5rem;
+        }
+        input[type="color"]::-webkit-color-swatch {
+            border-radius: 0.5rem;
+            border: 2px solid #d1d5db; /* gray-300 */
+        }
+        /* Modal styles */
+        #saveModal { display: none; }
+    </style>
+</head>
+<body class="text-gray-800">
+    <div class="container mx-auto p-4 lg:p-8">
+        <!-- Header -->
+        <header class="text-center mb-8 lg:mb-12">
+            <h1 class="text-4xl lg:text-5xl font-bold text-gray-900 tracking-tight">Frame Studio</h1>
+            <p class="text-lg text-gray-500 mt-2">Craft your perfect checkerboard frame.</p>
+        </header>
+        <main class="grid grid-cols-1 lg:grid-cols-5 gap-8">
+            <!-- Controls Column -->
+            <div class="lg:col-span-2 space-y-8">
+                <!-- Appearance Controls -->
+                <div class="bg-white p-6 rounded-2xl border border-gray-200 shadow-sm">
+                    <h2 class="text-2xl font-semibold text-gray-900 mb-5">Appearance</h2>
+                    <div class="flex items-center justify-around space-x-4">
+                        <!-- Color 1 -->
+                        <div class="text-center space-y-2">
+                            <input id="color1" type="color" value="#6b7280">
+                            <label for="color1" class="block text-sm font-medium text-gray-600">Color 1</label>
+                            <span id="color1Value" class="font-mono text-xs text-pink-600">#6b7280</span>
+                            <label class="flex items-center justify-center gap-2 text-gray-500 text-sm pt-1"><input id="color1Transparent" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-pink-500 focus:ring-pink-500"> Transp.</label>
+                        </div>
+                        <!-- Swap & Randomize Buttons -->
+                        <div class="space-y-4">
+                            <button id="swapBtn" title="Swap Colors" class="p-3 bg-gray-100 hover:bg-pink-100 rounded-full transition-all duration-200 group">
+                               <svg class="w-6 h-6 text-gray-500 group-hover:text-pink-600 transition-transform group-hover:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path></svg>
+                            </button>
+                             <button id="randomizeBtn" title="Randomize" class="p-3 bg-gray-100 hover:bg-pink-100 rounded-full transition-all duration-200 group">
+                                <svg class="w-6 h-6 text-gray-500 group-hover:text-pink-600 transition-transform group-hover:rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 16v-2m8-6h-2m-16 0H4m14.485 8.485l-1.414-1.414M5.929 5.929L4.515 4.515m14.97 14.97l-1.414-1.414M5.929 18.071l-1.414 1.414M12 18a6 6 0 100-12 6 6 0 000 12z"></path></svg>
+                            </button>
+                        </div>
+                        <!-- Color 2 -->
+                        <div class="text-center space-y-2">
+                            <input id="color2" type="color" value="#d1d5db">
+                            <label for="color2" class="block text-sm font-medium text-gray-600">Color 2</label>
+                            <span id="color2Value" class="font-mono text-xs text-pink-600">#d1d5db</span>
+                            <label class="flex items-center justify-center gap-2 text-gray-500 text-sm pt-1"><input id="color2Transparent" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-pink-500 focus:ring-pink-500"> Transp.</label>
+                        </div>
+                    </div>
+                </div>
+                <!-- Pattern Controls -->
+                <div class="bg-white p-6 rounded-2xl border border-gray-200 shadow-sm space-y-6">
+                    <h2 class="text-2xl font-semibold text-gray-900 mb-2">Pattern</h2>
+                    <div>
+                        <label for="frameThickness" class="flex justify-between items-center font-medium text-gray-600 mb-2">
+                            <span>Frame Thickness</span>
+                            <span id="frameThicknessValue" class="font-mono text-pink-600 bg-pink-50 px-2 py-1 text-sm rounded-md">3</span>
+                        </label>
+                        <input id="frameThickness" type="range" min="1" max="20" value="3" class="w-full">
+                    </div>
+                    <div>
+                        <label for="checkerSize" class="flex justify-between items-center font-medium text-gray-600 mb-2">
+                            <span>Checker Size</span>
+                            <span id="checkerSizeValue" class="font-mono text-pink-600 bg-pink-50 px-2 py-1 text-sm rounded-md">25</span>
+                        </label>
+                        <input id="checkerSize" type="range" min="5" max="100" value="25" class="w-full">
+                    </div>
+                </div>
+                <!-- Export Button -->
+                <button id="showSaveModalBtn" class="w-full text-lg font-bold py-4 px-4 rounded-xl transition-all duration-300 bg-gradient-to-r from-pink-500 to-orange-400 hover:from-pink-600 hover:to-orange-500 text-white shadow-lg hover:shadow-pink-500/30 transform hover:scale-105">
+                    Export Images...
+                </button>
+            </div>
+            <!-- Canvas Column -->
+            <div class="lg:col-span-3">
+                <div class="aspect-square bg-white rounded-2xl overflow-hidden border-2 border-gray-200 shadow-sm sticky top-8">
+                    <canvas id="checkerboardCanvas"></canvas>
+                </div>
+            </div>
+        </main>
+    </div>
+    <!-- Save Modal -->
+    <div id="saveModal" class="fixed inset-0 bg-gray-900/60 backdrop-blur-sm flex items-center justify-center p-4">
+        <div id="modalContent" class="bg-white rounded-2xl shadow-2xl p-8 w-full max-w-lg border border-gray-200">
+            <!-- View 1: Options -->
+            <div id="modalOptionsView">
+                <h2 class="text-2xl font-bold text-gray-900 mb-2">Export Options</h2>
+                <p class="text-gray-500 mb-6">Select sizes to generate. You can pick multiple.</p>
+                <div id="sizeOptions" class="grid grid-cols-2 sm:grid-cols-3 gap-3 mb-6"></div>
+                <div class="mb-6 space-y-4">
+                    <label class="block text-gray-600 font-medium">Custom Size</label>
+                    <div class="flex items-center gap-3">
+                        <input type="number" id="customWidth" placeholder="Width" class="w-full bg-gray-100 border border-gray-300 rounded-md px-3 py-2 text-gray-800 placeholder-gray-400 focus:ring-pink-500 focus:border-pink-500">
+                        <span class="text-gray-400">x</span>
+                        <input type="number" id="customHeight" placeholder="Height" class="w-full bg-gray-100 border border-gray-300 rounded-md px-3 py-2 text-gray-800 placeholder-gray-400 focus:ring-pink-500 focus:border-pink-500">
+                    </div>
+                </div>
+                <div class="flex gap-4">
+                    <button id="cancelSaveBtn" class="w-full bg-gray-200 hover:bg-gray-300 text-gray-700 font-bold py-3 px-4 rounded-lg transition-colors">Cancel</button>
+                    <button id="generateBtn" class="w-full bg-gradient-to-r from-pink-500 to-orange-400 hover:from-pink-600 hover:to-orange-500 text-white font-bold py-3 px-4 rounded-lg transition-all">Generate</button>
+                </div>
+            </div>
+            <!-- View 2: Results -->
+            <div id="modalResultsView" class="hidden">
+                <h2 class="text-2xl font-bold text-gray-900 mb-2">Your Images</h2>
+                <p class="text-gray-500 mb-6">Long-press or right-click an image to save.</p>
+                <div id="generatedImagesContainer" class="space-y-4 max-h-[60vh] overflow-y-auto p-1 -mr-4 pr-4"></div>
+                <div class="flex mt-6">
+                    <button id="backToOptionsBtn" class="w-full bg-gray-200 hover:bg-gray-300 text-gray-700 font-bold py-3 px-4 rounded-lg transition-colors">Back</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            // --- STATE MANAGEMENT ---
+            const state = {
+                frameThickness: 3,
+                checkerSize: 25,
+                color1: '#6b7280', // gray-500
+                color2: '#d1d5db', // gray-300
+                color1Transparent: false,
+                color2Transparent: false,
+            };
+            // --- DOM ELEMENT SELECTION ---
+            const dom = {
+                canvas: document.getElementById('checkerboardCanvas'),
+                controls: {
+                    frameThickness: document.getElementById('frameThickness'),
+                    checkerSize: document.getElementById('checkerSize'),
+                    color1: document.getElementById('color1'),
+                    color2: document.getElementById('color2'),
+                    color1Transparent: document.getElementById('color1Transparent'),
+                    color2Transparent: document.getElementById('color2Transparent'),
+                    swapBtn: document.getElementById('swapBtn'),
+                    randomizeBtn: document.getElementById('randomizeBtn'),
+                },
+                values: {
+                    frameThickness: document.getElementById('frameThicknessValue'),
+                    checkerSize: document.getElementById('checkerSizeValue'),
+                    color1: document.getElementById('color1Value'),
+                    color2: document.getElementById('color2Value'),
+                },
+                modal: {
+                    element: document.getElementById('saveModal'),
+                    content: document.getElementById('modalContent'),
+                    showBtn: document.getElementById('showSaveModalBtn'),
+                    optionsView: document.getElementById('modalOptionsView'),
+                    cancelBtn: document.getElementById('cancelSaveBtn'),
+                    generateBtn: document.getElementById('generateBtn'),
+                    sizeOptions: document.getElementById('sizeOptions'),
+                    customWidth: document.getElementById('customWidth'),
+                    customHeight: document.getElementById('customHeight'),
+                    resultsView: document.getElementById('modalResultsView'),
+                    imagesContainer: document.getElementById('generatedImagesContainer'),
+                    backBtn: document.getElementById('backToOptionsBtn'),
+                }
+            };
+            const ctx = dom.canvas.getContext('2d');
+            // --- CONFIGURATION ---
+            const PREDEFINED_SIZES = [
+                { w: 256, h: 256 }, { w: 512, h: 512 }, { w: 1024, h: 1024 },
+                { w: 1920, h: 1080 }, { w: 1080, h: 1920 }, { w: 1600, h: 900 }
+            ];
+            // --- CORE LOGIC ---
+            const drawPattern = (targetCtx, width, height, config) => {
+                const { frameThickness, checkerSize, color1, color2, color1Transparent, color2Transparent } = config;
+                const c1 = color1Transparent ? 'transparent' : color1;
+                const c2 = color2Transparent ? 'transparent' : color2;
+                const cols = Math.ceil(width / checkerSize);
+                const rows = Math.ceil(height / checkerSize);
+                targetCtx.clearRect(0, 0, width, height);
+                for (let i = 0; i < rows; i++) {
+                    for (let j = 0; j < cols; j++) {
+                        const isFrame = i < frameThickness || i >= rows - frameThickness || j < frameThickness || j >= cols - frameThickness;
+                        if (isFrame) {
+                            targetCtx.fillStyle = (i + j) % 2 === 0 ? c1 : c2;
+                            if (targetCtx.fillStyle !== 'transparent') {
+                                targetCtx.fillRect(j * checkerSize, i * checkerSize, checkerSize, checkerSize);
+                            }
+                        }
+                    }
+                }
+            };
+            const drawLiveCanvas = () => {
+                const boardSize = dom.canvas.parentElement.clientWidth;
+                dom.canvas.width = boardSize;
+                dom.canvas.height = boardSize;
+                const liveConfig = { ...state };
+                drawPattern(ctx, boardSize, boardSize, liveConfig);
+            };
+            const updateUI = () => {
+                for (const key in dom.controls) {
+                    if (state.hasOwnProperty(key)) {
+                        const el = dom.controls[key];
+                        const value = state[key];
+                        if (el.type === 'checkbox') el.checked = value;
+                        else el.value = value;
+                    }
+                }
+                for (const key in dom.values) {
+                    if (state.hasOwnProperty(key)) {
+                        dom.values[key].textContent = state[key];
+                    }
+                }
+                drawLiveCanvas();
+            };
+            // --- EVENT HANDLERS ---
+            const handleControlInput = (e) => {
+                const { id, value, type, checked } = e.target;
+                state[id] = type === 'checkbox' ? checked : value;
+                if(type === 'range') state[id] = parseInt(value, 10);
+                // BUG FIX: Directly update the UI and redraw on every single input change.
+                updateUI();
+            };
+            const handleSwap = () => {
+                [state.color1, state.color2] = [state.color2, state.color1];
+                [state.color1Transparent, state.color2Transparent] = [state.color2Transparent, state.color1Transparent];
+                updateUI();
+            };
+            const handleRandomize = () => {
+                const randomHex = () => '#' + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0');
+                state.color1 = randomHex();
+                state.color2 = randomHex();
+                state.frameThickness = Math.floor(Math.random() * 19) + 1;
+                state.checkerSize = Math.floor(Math.random() * 95) + 5;
+                state.color1Transparent = false;
+                state.color2Transparent = Math.random() < 0.2;
+                updateUI();
+            };
+            const handleGenerate = () => {
+                const sizesToGenerate = [];
+                document.querySelectorAll('#sizeOptions input:checked').forEach(cb => {
+                    const [w, h] = cb.value.split('x').map(Number);
+                    sizesToGenerate.push({ w, h });
+                });
+                // BUG FIX: Added robust parsing for custom sizes to prevent crashes.
+                const customW = parseInt(dom.modal.customWidth.value, 10) || 0;
+                const customH = parseInt(dom.modal.customHeight.value, 10) || 0;
+                if (customW > 0 && customH > 0) {
+                    sizesToGenerate.push({ w: customW, h: customH });
+                }
+                if (sizesToGenerate.length === 0) {
+                    // Add a visual cue that nothing was selected
+                    dom.modal.generateBtn.textContent = "Select a size!";
+                    dom.modal.generateBtn.classList.add('bg-red-500');
+                    setTimeout(() => {
+                        dom.modal.generateBtn.textContent = "Generate";
+                        dom.modal.generateBtn.classList.remove('bg-red-500');
+                    }, 2000);
+                    return;
+                }
+                dom.modal.imagesContainer.innerHTML = '';
+                sizesToGenerate.forEach(size => {
+                    const offscreenCanvas = document.createElement('canvas');
+                    offscreenCanvas.width = size.w;
+                    offscreenCanvas.height = size.h;
+                    drawPattern(offscreenCanvas.getContext('2d'), size.w, size.h, state);
+                    const imageCard = document.createElement('div');
+                    imageCard.className = 'bg-gray-100 p-3 rounded-lg border border-gray-200';
+                    imageCard.innerHTML = `
+                        <p class="text-gray-700 font-semibold mb-2">${size.w} x ${size.h} px</p>
+                        <img src="${offscreenCanvas.toDataURL('image/png')}" alt="Generated frame" class="rounded-md border border-gray-300 w-full">`;
+                    dom.modal.imagesContainer.appendChild(imageCard);
+                });
+                dom.modal.customWidth.value = dom.modal.customHeight.value = '';
+                document.querySelectorAll('#sizeOptions input:checked').forEach(cb => cb.checked = false);
+                dom.modal.optionsView.classList.add('hidden');
+                dom.modal.resultsView.classList.remove('hidden');
+            };
+            // --- MODAL ---
+            const openModal = () => {
+                dom.modal.element.style.display = 'flex';
+            };
+            const closeModal = () => {
+                dom.modal.element.style.display = 'none';
+                dom.modal.resultsView.classList.add('hidden');
+                dom.modal.optionsView.classList.remove('hidden');
+            };
+            // --- INITIALIZATION ---
+            const initialize = () => {
+                PREDEFINED_SIZES.forEach(size => {
+                    const val = `${size.w}x${size.h}`;
+                    dom.modal.sizeOptions.innerHTML += `
+                        <label class="flex items-center gap-2 p-3 bg-gray-100 rounded-lg cursor-pointer hover:bg-gray-200 border border-gray-200 transition-colors">
+                            <input type="checkbox" value="${val}" class="h-4 w-4 rounded border-gray-300 text-pink-500 focus:ring-pink-500">
+                            <span class="text-gray-700 text-sm font-medium">${val}</span>
+                        </label>`;
+                });
+                Object.values(dom.controls).forEach(el => el.addEventListener('input', handleControlInput));
+                dom.controls.swapBtn.addEventListener('click', handleSwap);
+                dom.controls.randomizeBtn.addEventListener('click', handleRandomize);
+                dom.modal.showBtn.addEventListener('click', openModal);
+                dom.modal.cancelBtn.addEventListener('click', closeModal);
+                dom.modal.generateBtn.addEventListener('click', handleGenerate);
+                dom.modal.backBtn.addEventListener('click', () => {
+                    dom.modal.resultsView.classList.add('hidden');
+                    dom.modal.optionsView.classList.remove('hidden');
+                });
+                new ResizeObserver(drawLiveCanvas).observe(dom.canvas.parentElement);
+                updateUI();
+            };
+            initialize();
+        });
+    </script>
+</body>
+</html>