|
|
<!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 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> |
|
|
|
|
|
|
|
|
<div class="flex flex-col lg:flex-row gap-8 items-center justify-center"> |
|
|
|
|
|
<div class="relative w-full lg:w-1/2 max-w-lg hand-animation"> |
|
|
<div class="relative"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div class="absolute w-full h-full" id="nailContainer"> |
|
|
|
|
|
</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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
</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"> |
|
|
|
|
|
</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> |
|
|
|
|
|
|
|
|
<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() { |
|
|
|
|
|
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 } } |
|
|
}; |
|
|
|
|
|
|
|
|
let selectedSizes = { |
|
|
thumb: null, |
|
|
index: null, |
|
|
middle: null, |
|
|
ring: null, |
|
|
pinky: null |
|
|
}; |
|
|
|
|
|
|
|
|
let currentFinger = null; |
|
|
|
|
|
|
|
|
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); |
|
|
|
|
|
|
|
|
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)'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
nail.addEventListener('click', () => { |
|
|
selectFinger(finger); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const fingerButtons = document.querySelectorAll('.finger-btn'); |
|
|
fingerButtons.forEach(button => { |
|
|
button.addEventListener('click', () => { |
|
|
const finger = button.getAttribute('data-finger'); |
|
|
selectFinger(finger); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
function selectFinger(finger) { |
|
|
currentFinger = finger; |
|
|
|
|
|
|
|
|
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'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('sizeOptions').classList.remove('hidden'); |
|
|
document.getElementById('currentFinger').textContent = finger; |
|
|
|
|
|
|
|
|
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); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function selectSize(finger, size) { |
|
|
selectedSizes[finger] = size; |
|
|
|
|
|
|
|
|
const nails = document.querySelectorAll(`[data-finger="${finger}"] path`); |
|
|
nails.forEach(nail => { |
|
|
nail.setAttribute('fill', 'rgba(255, 105, 180, 0.8)'); |
|
|
}); |
|
|
|
|
|
|
|
|
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'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
updateSelectedSizesDisplay(); |
|
|
} |
|
|
|
|
|
|
|
|
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'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('measureBtn').addEventListener('click', () => { |
|
|
document.getElementById('sizeGuideModal').classList.remove('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('closeModal').addEventListener('click', () => { |
|
|
document.getElementById('sizeGuideModal').classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
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.'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
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> |
