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>Image Comparison Gallery</title>7 <link rel="stylesheet" href="style.css">8 <script src="script.js" defer></script>9</head>10<body>11 <h1 class="gallery-title">Before & After Gallery</h1>12 <div class="gallery-container">13 <div class="comparison-item">14 <div class="comparison">15 <figure>16 <div class="divisor" style="width:50%"></div>17 </figure>18 <input type="range" min="0" max="100" value="50" class="slider" oninput="moveDivisor(this)">19 <button class="fullscreen-btn" title="Toggle Fullscreen" onclick="toggleFullscreen(this)">20 <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">21 <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>22 </svg>23 </button>24 </div>25<div class="image-title">Nature Landscape - Original vs Enhanced</div>26 </div>27 28 <div class="comparison-item">29 <div class="comparison">30 <figure>31 <div class="divisor" style="width:50%"></div>32 </figure>33 <input type="range" min="0" max="100" value="50" class="slider" oninput="moveDivisor(this)">34 </div>35 <div class="image-title">Urban Development - 2010 vs 2020</div>36 </div>37 38 <div class="comparison-item">39 <div class="comparison">40 <figure>41 <div class="divisor" style="width:50%"></div>42 </figure>43 <input type="range" min="0" max="100" value="50" class="slider" oninput="moveDivisor(this)">44 </div>45 <div class="image-title">Portrait - Natural vs Professional Edit</div>46 </div>47 </div>48 <script>49 function moveDivisor(slider) {50 const comparison = slider.closest('.comparison');51 const divisor = comparison.querySelector('.divisor');52 divisor.style.width = slider.value + "%";53 }54 </script>55</body>56</html>