user1211x/javascript-wizardry-wagon
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Before & After Magic Carousel</title>7 <link rel="stylesheet" href="style.css">8 <script src="script.js" defer></script>9 10 11 12</head>13<nav class="gallery-nav">14 <a href="/">Home</a>15 <a href="gallery.html">Gallery</a>16</nav>17<div id="comparison">18 <figure>19 <div id="divisor"></div>20 </figure>21 <input type="range" min="0" max="100" value="50" id="slider" oninput="moveDivisor()">22 <button id="fullscreen-btn" class="fullscreen-btn" title="Toggle Fullscreen">23 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">24 <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path>25 </svg>26 </button>27</div>28<div class="image-title">Antique Trucks+and cars along the road - Montana - September 29, 2005<br/>Photo: Carol M. Highsmith</div>29 30<div class="upload-section">31 <h2>Upload Your Own Images</h2>32 <div class="upload-controls">33 <div class="upload-group">34 <label for="before-upload">Before Image:</label>35 <input type="file" id="before-upload" accept="image/*">36 </div>37 <div class="upload-group">38 <label for="after-upload">After Image:</label>39 <input type="file" id="after-upload" accept="image/*">40 </div>41 <button id="compare-btn">Compare Images</button>42 </div>43</div>44<style>45 .gallery-nav {46 display: flex;47 justify-content: center;48 gap: 2rem;49 padding: 1.5rem;50 background: rgba(0,0,0,0.5);51 margin-bottom: 2rem;52 border-bottom: 1px solid rgba(0, 255, 255, 0.3);53 }54 55 .gallery-nav a {56 color: #00ffff;57 text-decoration: none;58 font-size: 1.2rem;59 text-shadow: 0 0 10px rgba(0, 255, 255, 0.7);60 padding: 0.5rem 1rem;61 border-radius: 4px;62 transition: all 0.3s ease;63 }64 65 .gallery-nav a:hover {66 background: rgba(0, 255, 255, 0.2);67 box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);68 }69</style>70