Spaces:

sdurdiyev
/

naildesign-size-guide-2

Running

App Files Files Community

sdurdiyev commited on Apr 25

Commit

f526cc6

verified ·

1 Parent(s): 10c9a9b

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +467 -19
prompts.txt +0 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Naildesign Size Guide 2
-emoji: 😻
-colorFrom: purple
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: naildesign-size-guide-2
+emoji: 🐳
+colorFrom: red
+colorTo: yellow
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,467 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Press-On Nail Size Guide</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>
+        @keyframes float {
+            0%, 100% {
+                transform: translateY(0);
+            }
+            50% {
+                transform: translateY(-10px);
+            }
+        }
+        @keyframes pulse {
+            0%, 100% {
+                transform: scale(1);
+            }
+            50% {
+                transform: scale(1.05);
+            }
+        }
+        .nail-shadow {
+            box-shadow: 0 10px 20px rgba(0,0,0,0.1),
+                        inset 0 -5px 10px rgba(0,0,0,0.1),
+                        inset 0 5px 10px rgba(255,255,255,0.5);
+        }
+        .skeuomorphic-btn {
+            background: linear-gradient(145deg, #ff9a9e, #fad0c4);
+            box-shadow: 5px 5px 15px rgba(0,0,0,0.1),
+                       -5px -5px 15px rgba(255,255,255,0.5),
+                       inset 2px 2px 5px rgba(255,255,255,0.3),
+                       inset -2px -2px 5px rgba(0,0,0,0.1);
+            transition: all 0.3s ease;
+        }
+        .skeuomorphic-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 7px 7px 20px rgba(0,0,0,0.15),
+                       -7px -7px 20px rgba(255,255,255,0.6);
+        }
+        .skeuomorphic-btn:active {
+            transform: translateY(1px);
+            box-shadow: inset 3px 3px 7px rgba(0,0,0,0.2),
+                       inset -3px -3px 7px rgba(255,255,255,0.3);
+        }
+        .skeuomorphic-card {
+            background: linear-gradient(145deg, #fff5f5, #ffecec);
+            box-shadow: 10px 10px 30px rgba(0,0,0,0.1),
+                       -10px -10px 30px rgba(255,255,255,0.5);
+            border-radius: 20px;
+        }
+        .nail-tip {
+            position: relative;
+            overflow: hidden;
+        }
+        .nail-tip::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 30%;
+            background: linear-gradient(to bottom, rgba(255,255,255,0.7), rgba(255,255,255,0));
+            border-radius: 50% 50% 0 0 / 30% 30% 0 0;
+        }
+        .hand-animation {
+            animation: float 3s ease-in-out infinite;
+        }
+        .size-option:hover {
+            animation: pulse 0.5s ease;
+        }
+    </style>
+</head>
+<body class="bg-pink-50 min-h-screen font-sans">
+    <div class="container mx-auto px-4 py-8">
+        <!-- Header -->
+        <header class="text-center mb-12">
+            <h1 class="text-4xl md:text-5xl font-bold text-pink-800 mb-4">Nail Size Guide</h1>
+            <p class="text-lg text-pink-600 max-w-2xl mx-auto">Find your perfect fit with our interactive size guide</p>
+        </header>
+        <!-- Main Content -->
+        <div class="flex flex-col lg:flex-row gap-8 items-center justify-center">
+            <!-- Hand Illustration -->
+            <div class="relative w-full lg:w-1/2 max-w-lg hand-animation">
+                <div class="relative">
+                    <!-- Hand base -->
+                    <div class="absolute w-full h-full">
+                        <svg viewBox="0 0 300 400" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M150,50 Q180,100 180,150 Q180,250 150,350 Q120,250 120,150 Q120,100 150,50"
+                                  fill="#FFD1DC" stroke="#FF9EB5" stroke-width="2"/>
+                        </svg>
+                    </div>
+                    <!-- Nails - will be updated with JS -->
+                    <div class="absolute w-full h-full" id="nailContainer">
+                        <!-- Nails will be inserted here by JavaScript -->
+                    </div>
+                </div>
+                <div class="mt-8 text-center">
+                    <button id="measureBtn" class="skeuomorphic-btn text-pink-800 font-semibold py-3 px-6 rounded-full text-lg">
+                        <i class="fas fa-ruler-combined mr-2"></i> Measure My Nails
+                    </button>
+                </div>
+            </div>
+            <!-- Size Guide -->
+            <div class="w-full lg:w-1/2">
+                <div class="skeuomorphic-card p-6 md:p-8">
+                    <h2 class="text-2xl font-bold text-pink-800 mb-6">How to Find Your Size</h2>
+                    <div class="space-y-6">
+                        <div class="flex items-start">
+                            <div class="bg-pink-100 text-pink-800 rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mr-4 mt-1">
+                                <span class="font-bold">1</span>
+                            </div>
+                            <div>
+                                <h3 class="font-semibold text-pink-700 mb-1">Print Our Size Guide</h3>
+                                <p class="text-pink-600">Download and print our sizing chart at 100% scale to match your nails.</p>
+                            </div>
+                        </div>
+                        <div class="flex items-start">
+                            <div class="bg-pink-100 text-pink-800 rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mr-4 mt-1">
+                                <span class="font-bold">2</span>
+                            </div>
+                            <div>
+                                <h3 class="font-semibold text-pink-700 mb-1">Match Your Nails</h3>
+                                <p class="text-pink-600">Place each press-on over your natural nail to find the best fit.</p>
+                            </div>
+                        </div>
+                        <div class="flex items-start">
+                            <div class="bg-pink-100 text-pink-800 rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mr-4 mt-1">
+                                <span class="font-bold">3</span>
+                            </div>
+                            <div>
+                                <h3 class="font-semibold text-pink-700 mb-1">Note Your Sizes</h3>
+                                <p class="text-pink-600">Each finger may need a different size for the perfect fit.</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-8">
+                        <h3 class="font-semibold text-pink-700 mb-4">Select a finger to see size options:</h3>
+                        <div class="grid grid-cols-5 gap-2 mb-6">
+                            <button class="size-option finger-btn bg-pink-100 hover:bg-pink-200 text-pink-800 py-2 rounded-lg transition-all" data-finger="thumb">
+                                Thumb
+                            </button>
+                            <button class="size-option finger-btn bg-pink-100 hover:bg-pink-200 text-pink-800 py-2 rounded-lg transition-all" data-finger="index">
+                                Index
+                            </button>
+                            <button class="size-option finger-btn bg-pink-100 hover:bg-pink-200 text-pink-800 py-2 rounded-lg transition-all" data-finger="middle">
+                                Middle
+                            </button>
+                            <button class="size-option finger-btn bg-pink-100 hover:bg-pink-200 text-pink-800 py-2 rounded-lg transition-all" data-finger="ring">
+                                Ring
+                            </button>
+                            <button class="size-option finger-btn bg-pink-100 hover:bg-pink-200 text-pink-800 py-2 rounded-lg transition-all" data-finger="pinky">
+                                Pinky
+                            </button>
+                        </div>
+                        <div id="sizeOptions" class="hidden">
+                            <h4 class="font-medium text-pink-700 mb-3">Available sizes for <span id="currentFinger" class="font-bold">thumb</span>:</h4>
+                            <div class="grid grid-cols-3 gap-3" id="sizeButtons">
+                                <!-- Size buttons will be inserted here by JavaScript -->
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="skeuomorphic-card p-6 md:p-8 mt-6">
+                    <h2 class="text-2xl font-bold text-pink-800 mb-4">Your Selected Sizes</h2>
+                    <div id="selectedSizes" class="bg-pink-50 rounded-lg p-4 min-h-20">
+                        <p class="text-pink-500 italic" id="noSelectionText">No sizes selected yet. Click on fingers above to choose sizes.</p>
+                        <div id="sizeList" class="hidden grid grid-cols-5 gap-2">
+                            <!-- Selected sizes will be inserted here by JavaScript -->
+                        </div>
+                    </div>
+                    <button id="saveBtn" class="skeuomorphic-btn text-pink-800 font-semibold py-3 px-6 rounded-full text-lg w-full mt-6">
+                        <i class="fas fa-save mr-2"></i> Save My Size Preferences
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Size Guide Modal -->
+    <div id="sizeGuideModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+        <div class="skeuomorphic-card p-6 max-w-2xl mx-4 max-h-[90vh] overflow-y-auto">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-xl font-bold text-pink-800">How to Measure Your Nails</h3>
+                <button id="closeModal" class="text-pink-600 hover:text-pink-800">
+                    <i class="fas fa-times text-2xl"></i>
+                </button>
+            </div>
+            <div class="space-y-4 text-pink-700">
+                <div class="flex items-start">
+                    <div class="bg-pink-100 rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mr-4">
+                        <i class="fas fa-print text-pink-600"></i>
+                    </div>
+                    <div>
+                        <h4 class="font-semibold">Print the Size Guide</h4>
+                        <p>Make sure to print at 100% scale (no scaling). Check the ruler on the page matches a real ruler.</p>
+                    </div>
+                </div>
+                <div class="flex items-start">
+                    <div class="bg-pink-100 rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mr-4">
+                        <i class="fas fa-hand-paper text-pink-600"></i>
+                    </div>
+                    <div>
+                        <h4 class="font-semibold">Prepare Your Nails</h4>
+                        <p>Push back your cuticles and file your nails to your desired shape before measuring.</p>
+                    </div>
+                </div>
+                <div class="flex items-start">
+                    <div class="bg-pink-100 rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mr-4">
+                        <i class="fas fa-ruler-horizontal text-pink-600"></i>
+                    </div>
+                    <div>
+                        <h4 class="font-semibold">Measure Width</h4>
+                        <p>Measure across the widest part of your natural nail (usually near the cuticle).</p>
+                    </div>
+                </div>
+                <div class="flex items-start">
+                    <div class="bg-pink-100 rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mr-4">
+                        <i class="fas fa-arrows-alt-v text-pink-600"></i>
+                    </div>
+                    <div>
+                        <h4 class="font-semibold">Compare Sizes</h4>
+                        <p>Match your measurement to our size chart. If between sizes, go with the larger size.</p>
+                    </div>
+                </div>
+            </div>
+            <div class="mt-6">
+                <button class="skeuomorphic-btn text-pink-800 font-semibold py-2 px-6 rounded-full">
+                    <i class="fas fa-download mr-2"></i> Download Size Guide PDF
+                </button>
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // Nail data
+            const nailData = {
+                thumb: { sizes: ['XL', 'L', 'M'], position: { x: 50, y: 50 } },
+                index: { sizes: ['L', 'M', 'S'], position: { x: 120, y: 80 } },
+                middle: { sizes: ['L', 'M', 'S'], position: { x: 180, y: 100 } },
+                ring: { sizes: ['M', 'S', 'XS'], position: { x: 220, y: 120 } },
+                pinky: { sizes: ['S', 'XS', 'XXS'], position: { x: 260, y: 140 } }
+            };
+            // Current selections
+            let selectedSizes = {
+                thumb: null,
+                index: null,
+                middle: null,
+                ring: null,
+                pinky: null
+            };
+            // Current selected finger
+            let currentFinger = null;
+            // Create nail SVGs on the hand
+            const nailContainer = document.getElementById('nailContainer');
+            Object.keys(nailData).forEach(finger => {
+                const nail = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+                nail.setAttribute('viewBox', '0 0 300 400');
+                nail.setAttribute('class', 'absolute transition-all duration-300');
+                nail.setAttribute('style', `left: ${nailData[finger].position.x}px; top: ${nailData[finger].position.y}px; width: 40px;`);
+                nail.setAttribute('data-finger', finger);
+                const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                path.setAttribute('d', 'M10,0 Q15,5 20,0 Q25,15 20,30 Q15,35 10,30 Q5,15 10,0');
+                path.setAttribute('fill', 'rgba(255, 192, 203, 0.5)');
+                path.setAttribute('stroke', 'rgba(255, 105, 180, 0.7)');
+                path.setAttribute('stroke-width', '1');
+                path.setAttribute('class', 'transition-all duration-300');
+                path.setAttribute('data-finger', finger);
+                nail.appendChild(path);
+                nailContainer.appendChild(nail);
+                // Add hover effect
+                nail.addEventListener('mouseenter', () => {
+                    path.setAttribute('fill', 'rgba(255, 182, 193, 0.7)');
+                });
+                nail.addEventListener('mouseleave', () => {
+                    if (selectedSizes[finger]) {
+                        path.setAttribute('fill', 'rgba(255, 105, 180, 0.8)');
+                    } else {
+                        path.setAttribute('fill', 'rgba(255, 192, 203, 0.5)');
+                    }
+                });
+                // Click to select finger
+                nail.addEventListener('click', () => {
+                    selectFinger(finger);
+                });
+            });
+            // Finger buttons
+            const fingerButtons = document.querySelectorAll('.finger-btn');
+            fingerButtons.forEach(button => {
+                button.addEventListener('click', () => {
+                    const finger = button.getAttribute('data-finger');
+                    selectFinger(finger);
+                });
+            });
+            // Select a finger
+            function selectFinger(finger) {
+                currentFinger = finger;
+                // Update UI
+                fingerButtons.forEach(btn => {
+                    if (btn.getAttribute('data-finger') === finger) {
+                        btn.classList.add('bg-pink-300', 'text-pink-900');
+                        btn.classList.remove('bg-pink-100');
+                    } else {
+                        btn.classList.add('bg-pink-100');
+                        btn.classList.remove('bg-pink-300', 'text-pink-900');
+                    }
+                });
+                // Show size options
+                document.getElementById('sizeOptions').classList.remove('hidden');
+                document.getElementById('currentFinger').textContent = finger;
+                // Create size buttons
+                const sizeButtonsContainer = document.getElementById('sizeButtons');
+                sizeButtonsContainer.innerHTML = '';
+                nailData[finger].sizes.forEach(size => {
+                    const button = document.createElement('button');
+                    button.className = `size-option bg-pink-100 hover:bg-pink-200 text-pink-800 py-2 rounded-lg transition-all ${selectedSizes[finger] === size ? 'bg-pink-300 font-bold' : ''}`;
+                    button.textContent = size;
+                    button.addEventListener('click', () => {
+                        selectSize(finger, size);
+                    });
+                    sizeButtonsContainer.appendChild(button);
+                });
+            }
+            // Select a size for current finger
+            function selectSize(finger, size) {
+                selectedSizes[finger] = size;
+                // Update the nail color
+                const nails = document.querySelectorAll(`[data-finger="${finger}"] path`);
+                nails.forEach(nail => {
+                    nail.setAttribute('fill', 'rgba(255, 105, 180, 0.8)');
+                });
+                // Update size buttons
+                const sizeButtons = document.querySelectorAll(`#sizeButtons button`);
+                sizeButtons.forEach(button => {
+                    if (button.textContent === size) {
+                        button.classList.add('bg-pink-300', 'font-bold');
+                    } else {
+                        button.classList.remove('bg-pink-300', 'font-bold');
+                    }
+                });
+                // Update selected sizes display
+                updateSelectedSizesDisplay();
+            }
+            // Update the selected sizes display
+            function updateSelectedSizesDisplay() {
+                const sizeList = document.getElementById('sizeList');
+                const noSelectionText = document.getElementById('noSelectionText');
+                let hasSelection = false;
+                for (const finger in selectedSizes) {
+                    if (selectedSizes[finger]) {
+                        hasSelection = true;
+                        break;
+                    }
+                }
+                if (hasSelection) {
+                    noSelectionText.classList.add('hidden');
+                    sizeList.classList.remove('hidden');
+                    sizeList.innerHTML = '';
+                    Object.keys(selectedSizes).forEach(finger => {
+                        const div = document.createElement('div');
+                        div.className = 'text-center';
+                        const p1 = document.createElement('p');
+                        p1.className = 'text-sm font-semibold text-pink-700 capitalize';
+                        p1.textContent = finger;
+                        const p2 = document.createElement('p');
+                        p2.className = 'text-lg font-bold text-pink-800';
+                        p2.textContent = selectedSizes[finger] || '-';
+                        div.appendChild(p1);
+                        div.appendChild(p2);
+                        sizeList.appendChild(div);
+                    });
+                } else {
+                    noSelectionText.classList.remove('hidden');
+                    sizeList.classList.add('hidden');
+                }
+            }
+            // Measure button
+            document.getElementById('measureBtn').addEventListener('click', () => {
+                document.getElementById('sizeGuideModal').classList.remove('hidden');
+            });
+            // Close modal
+            document.getElementById('closeModal').addEventListener('click', () => {
+                document.getElementById('sizeGuideModal').classList.add('hidden');
+            });
+            // Save button
+            document.getElementById('saveBtn').addEventListener('click', () => {
+                let allSelected = true;
+                for (const finger in selectedSizes) {
+                    if (!selectedSizes[finger]) {
+                        allSelected = false;
+                        break;
+                    }
+                }
+                if (allSelected) {
+                    alert('Your size preferences have been saved!');
+                } else {
+                    alert('Please select sizes for all fingers before saving.');
+                }
+            });
+            // Initialize with thumb selected
+            selectFinger('thumb');
+        });
+    </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=sdurdiyev/naildesign-size-guide-2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

File without changes