Hugging Face's logo

Spaces:
sdurdiyev
/
naildesign-size-guide-2
Running

App Files Community
naildesign-size-guide-2 / index.html
sdurdiyev's picture
sdurdiyev
Add 3 files
f526cc6 verified
raw
history blame contribute delete
22.6 kB
<!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>