user1211x/javascript-wizardry-wagon
0
1@import url(https://fonts2.comparison {3 width: 100%;4 height: 400px;5 max-width: 800px;6 overflow: hidden;7 background: rgba(0, 0, 0, 0.4);8 box-shadow: 0 0 20px rgba(0, 255, 255, 0.6), 9 0 0 40px rgba(255, 0, 255, 0.4);10 border: 1px solid rgba(0, 255, 255, 0.3);11 backdrop-filter: blur(8px);12}13 14.comparison figure {15 width: 100%;16 height: 100%;17 background-size: cover;18 background-position: center;19 margin: 0;20}21 22.comparison figure div {23 position: absolute;24 width: 50%;25 height: 100%;26 background-size: cover;27 background-position: center;28 box-shadow: 0 0 15px rgba(0, 255, 255, 0.6);29 border-right: 1px solid rgba(0, 255, 255, 0.5);30}31googleapis.com/css?family=Raleway);32html {33 background: 34 linear-gradient(135deg, #200122, #6f0000, #0f0c29),35 url('https://images.unsplash.com/photo-1518562180175-34a163b1c9c8?w=1200&q=80') center/cover;36 min-height: 100vh;37 background-blend-mode: overlay;38 animation: bgPulse 15s infinite alternate;39}40 41@keyframes bgPulse {42 0% { background-color: #200122; }43 25% { background-color: #3b0101; }44 50% { background-color: #0f0c29; }45 75% { background-color: #3a1c71; }46 100% { background-color: #200122; }47}48body {49 background: rgba(15, 12, 41, 0.7);50 backdrop-filter: blur(12px) brightness(1.2);51 -webkit-backdrop-filter: blur(12px) brightness(1.2);52 min-height: 100vh;53 margin: 0;54 padding: 0;55 font-family: 'Raleway', sans-serif;56 color: #ff00ff;57 text-shadow: 0 0 8px rgba(255, 0, 255, 0.7);58 border: 1px solid rgba(255, 0, 255, 0.3);59 box-shadow: 0 0 20px rgba(255, 0, 255, 0.4) inset;60}61.gallery-container {62 display: grid;63 grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));64 gap: 2rem;65 padding: 2rem;66 max-width: 1400px;67 margin: 0 auto;68}69 70.comparison-item {71 display: flex;72 flex-direction: column;73 align-items: center;74 gap: 1rem;75}76 77div#comparison, .comparison { 78width: 70vw;79 height: 45vw;80 max-width: 1024px;81 max-height: 768px;82 overflow: hidden;83margin: 30px auto;84background: rgba(0, 0, 0, 0.4);85 box-shadow: 0 0 20px rgba(0, 255, 255, 0.6), 86 0 0 40px rgba(255, 0, 255, 0.4);87 border: 1px solid rgba(0, 255, 255, 0.3);88 backdrop-filter: blur(8px);89}90div#comparison figure, .comparison figure { 91background-image: url(https://s3.amazonaws.com/flashypublic/Antique%2Btrucks%2Band%2Bcars%2Balong%2Bthe%2Broad%2BMontana%2BSeptember-29-2005_Carol%2BM%2BHighsmith_HDR_BW.jpg); 92 background-size: cover;93 position: relative;94 font-size: 0;95 width: 100%; 96 height: 100%;97 margin: 0; 98}99div#comparison figure > img { 100 position: relative;101 width: 100%;102}103div#comparison figure div, .comparison figure div { 104background-image: url(https://s3.amazonaws.com/flashypublic/Antique+trucks+and+cars+along+the+road+Montana+September+29+2005+-+Carol+M+Highsmith.jpg);105 background-size: cover;106 position: absolute;107 width: 50%; 108 box-shadow: 0 0 15px rgba(0, 255, 255, 0.6);109 overflow: hidden;110 bottom: 0;111 height: 100%;112 border-right: 1px solid rgba(0, 255, 255, 0.5);113}114input[type=range] {115 -webkit-appearance: none;116 -moz-appearance: none;117 position: relative;118 top: -2rem; left: -2%;119 background-color: rgba(0, 255, 255, 0.1);120 width: 102%;121 height: 8px;122 border-radius: 4px;123}124input[type=range]:focus { 125 outline: none; 126}127input[type=range]:active { 128 outline: none; 129}130 131input[type=range]::-moz-range-track { 132 -moz-appearance:none;133 height:15px;134 width: 98%;135 background-color: rgba(255,255,255,0.1); 136 position: relative;137 outline: none; 138 }139input[type=range]::active { 140 border: none; 141 outline: none;142 }143input[type=range]::-webkit-slider-thumb {144 -webkit-appearance: none;145 width: 20px;146 height: 20px;147 background: #ff00ff;148 border-radius: 50%;149 position: relative;150 left: 10px;151 box-shadow: 0 0 10px rgba(255, 0, 255, 0.8),152 0 0 5px rgba(255, 255, 255, 0.8) inset;153 cursor: pointer;154 transition: all 0.3s ease;155 animation: thumbPulse 1.5s infinite alternate;156}157 158 159 160input[type=range]::-moz-range-thumb {161 -moz-appearance: none;162 width: 20px;163 height: 20px;164 background: #ff00ff;165 border-radius: 50%;166 position: relative;167 left: 10px;168 box-shadow: 0 0 10px rgb(255 0 255 / 80%),169 0 0 5px rgba(255, 255, 255, 0.8) inset;170 cursor: pointer;171 transition: all 0.3s ease;172 animation: thumbPulse 1.5s infinite alternate;173}174input[type=range]:focus::-webkit-slider-thumb {175 background: #00ffff;176 box-shadow: 0 0 15px rgba(0, 255, 255, 0.8);177 0 0 5px rgba(255, 255, 255, 0.8) inset;178 transform: scale(1.2);179 animation: thumbFocusPulse 0.8s infinite alternate;180}181 182 183@keyframes thumbPulse {184 from { box-shadow: 0 0 10px rgba(255, 0, 255, 0.8); }185 to { box-shadow: 0 0 20px rgba(255, 0, 255, 0.8); }186}187 188@keyframes thumbFocusPulse {189 from { 190 background: #00ffff;191 box-shadow: 0 0 15px rgba(0, 255, 255, 0.8);192 }193 to { 194 background: #24ff00;195 box-shadow: 0 0 25px rgba(255, 0, 255, 0.8);196 }197}198input[type=range]:focus::-moz-range-thumb {199 background: #00ffff;200 box-shadow: 0 0 15px rgba(0, 255, 255, 0.8),201 0 0 5px rgba(255, 255, 255, 0.8) inset;202 transform: scale(1.2);203 animation: thumbFocusPulse 0.8s infinite alternate;204}205.gallery-title {206 text-align: center;207 font-size: 2.5rem;208 color: #00ffff;209 margin: 2rem 0;210 text-shadow: 0 0 15px rgba(0, 255, 255, 0.8);211 animation: textGlow 2s infinite alternate;212}213.upload-section {214 max-width: 800px;215 margin: 2rem auto;216 padding: 2rem;217 background: rgba(0, 0, 0, 0.4);218 border: 1px solid rgba(0, 255, 255, 0.3);219 border-radius: 8px;220 backdrop-filter: blur(5px);221 text-align: center;222}223 224.upload-section h2 {225 color: #00ffff;226 margin-bottom: 1.5rem;227 text-shadow: 0 0 10px rgba(0, 255, 255, 0.7);228}229 230.upload-controls {231 display: flex;232 flex-direction: column;233 gap: 1.5rem;234}235 236.upload-group {237 display: flex;238 flex-direction: column;239 gap: 0.5rem;240 text-align: left;241}242 243.upload-group label {244 color: #00ffff;245 font-size: 1rem;246}247 248.upload-group input {249 padding: 0.5rem;250 background: rgba(255, 255, 255, 0.1);251 border: 1px solid rgba(0, 255, 255, 0.3);252 color: white;253 border-radius: 4px;254}255 256#compare-btn {257 padding: 0.8rem 1.5rem;258 background: linear-gradient(to right, #ff00ff, #00ffff);259 border: none;260 border-radius: 4px;261 color: black;262 font-weight: bold;263 cursor: pointer;264 transition: all 0.3s ease;265 text-transform: uppercase;266 letter-spacing: 1px;267 margin-top: 1rem;268}269 270#compare-btn:hover {271 transform: translateY(-2px);272 box-shadow: 0 0 15px rgba(255, 0, 255, 0.8);273}274 275.image-title {276 font-family: 'Raleway', sans-serif;277text-align: center;278 width: 60%;279 color: #00ffff;280 margin: 20px auto;281 text-shadow: 0 0 10px rgba(0, 255, 255, 0.7),282 0 0 20px rgba(0, 255, 255, 0.5);283 padding: 15px;284 background: rgba(0, 0, 0, 0.5);285 border: 1px solid rgba(0, 255, 255, 0.3);286 box-shadow: 0 0 15px rgb(204 0 255 / 0%),287 0 0 5px rgb(22 200 71 / 23%) inset;288 border-radius: 5px;289 backdrop-filter: blur(5px);290 -webkit-backdrop-filter: blur(5px);291 animation: textGlow 2s infinite alternate;292}293.fullscreen-btn {294 position: absolute;295 bottom: 1rem;296 right: 1rem;297 background: rgba(0, 0, 0, 0.6);298 border: 1px solid rgba(0, 255, 255, 0.5);299 border-radius: 4px;300 padding: 0.5rem;301 cursor: pointer;302 z-index: 10;303 transition: all 0.3s ease;304}305 306.fullscreen-btn svg {307 width: 1.5rem;308 height: 1.5rem;309 color: #00ffff;310 stroke-width: 2;311}312 313.fullscreen-btn:hover {314 background: rgba(0, 255, 255, 0.3);315 box-shadow: 0 0 10px rgba(0, 255, 255, 0.7);316}317 318:fullscreen .fullscreen-btn {319 bottom: 2rem;320 right: 2rem;321}322 323@keyframes textGlow {324from { text-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff; }325 to { text-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff, 0 0 30px #ff00ff; }326}327