1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <link rel="canonical" href="https://retroshine.eu/"> 5 <link rel="alternate" hreflang="en" href="https://retroshine.eu/"> 6 <link rel="alternate" hreflang="da" href="https://retroshine.eu/da/"> 7 <link rel="alternate" hreflang="de" href="https://retroshine.eu/de/"> 8 <link rel="alternate" hreflang="es" href="https://retroshine.eu/es/"> 9 <link rel="alternate" hreflang="fi" href="https://retroshine.eu/fi/"> 10 <link rel="alternate" hreflang="fr" href="https://retroshine.eu/fr/"> 11 <link rel="alternate" hreflang="it" href="https://retroshine.eu/it/"> 12 <link rel="alternate" hreflang="nl" href="https://retroshine.eu/nl/"> 13 <link rel="alternate" hreflang="pl" href="https://retroshine.eu/pl/"> 14 <link rel="alternate" hreflang="pt" href="https://retroshine.eu/pt/"> 15 <link rel="alternate" hreflang="ro" href="https://retroshine.eu/ro/"> 16 <link rel="alternate" hreflang="sv" href="https://retroshine.eu/sv/"> 17 <link rel="alternate" hreflang="uk" href="https://retroshine.eu/uk/"> 18 <link rel="alternate" hreflang="cs" href="https://retroshine.eu/cs/"> 19 <link rel="alternate" hreflang="el" href="https://retroshine.eu/el/"> 20 <link rel="alternate" hreflang="hu" href="https://retroshine.eu/hu/"> 21 <link rel="icon" type="image/x-icon" href="/favicon.ico"> 22 <link rel="icon" href="/images/icon16.png" sizes="16x16" type="image/png"> 23 <link rel="icon" href="/images/icon32.png" sizes="32x32" type="image/png"> 24 <link rel="icon" href="/images/icon48.png" sizes="48x48" type="image/png"> 25 <link rel="apple-touch-icon" sizes="180x180" href="/images/icon180.png"> 26 <meta charset="UTF-8"> 27 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 28 <meta name="description" content="Transform faded scanned photos instantly with our free image-processing tool. Automated color correction and batch processing included!"> 29 <title>RetroShine - Bring Your Old Photos to Life</title> 30
30<script type="application/ld+json"> 31 { 32 "@context": "https://schema.org", 33 "@type": "SoftwareApplication", 34 "name": "RetroShine", 35 "description": "Photo enhancement software that automatically corrects color, contrast, and exposure in scanned analog photographs and digitized film slides. Features batch processing, AI-powered curve adjustment, and manual control.", 36 "operatingSystem": ["Windows", "Linux", "macOS"], 37 "applicationCategory": "MultimediaApplication", 38 "applicationSubCategory": "Photo Enhancement Software", 39 "downloadUrl": "https://retroshine.eu/download.html", 40 "url": "https://retroshine.eu", 41 "softwareVersion": "1.2.3", 42 "datePublished": "2025-05-17", 43 "dateModified": "2025-12-19", 44 "featureList": [ 45 "Automatic curve adjustment based on image content", 46 "Manual Control: Advanced tools for perfect results", 47 "Batch processing: Process entire folders of images", 48 "Full Quality: <!-- delimit msgid -->Preserves original resolution and EXIF metadata", 49 "Simple Interface: No editing experience needed" 50 ], 51 "author": { 52 "@type": "Organization", 53 "name": "RetroShine Team" 54 }, 55 "image": "https://retroshine.eu/images/retroshine-logo-25A.webp" 56 } 57 </script>
57 58 <style> 59 /* Base styles */ 60 :root { 61 --primary: #1661b9; 62 --gold: #b99616; 63 --black: #000000; 64 --white: #ffffff; 65 --gray: #aaaaaa; 66 --light-gray: #f5f5f5; 67 } 68 69 * { 70 margin: 0; 71 padding: 0; 72 box-sizing: border-box; 73 } 74 75 body { 76 font-family: 'Inter', 'Helvetica Neue', sans-serif; 77 color: var(--black); 78 line-height: 1.6; 79 } 80 81 h1, h2, h3, h4 { 82 font-weight: 700; 83 line-height: 1.3; 84 } 85 86 h1 { 87 font-size: 2.75rem; 88 margin-bottom: 1.5rem; 89 } 90 91 h2 { 92 font-size: 2.25rem; 93 margin-bottom: 1rem; 94 color: var(--primary); 95 } 96 97 h3 { 98 font-size: 1.5rem; 99 margin-bottom: 1rem; 100 } 101 102 p { 103 margin-bottom: 1rem; 104 font-size: 1.1rem; 105 } 106 107 .container { 108 width: 100%; 109 max-width: 1200px; 110 margin: 0 auto; 111 padding: 0 2rem; 112 } 113 114 .btn { 115 display: inline-block; 116 padding: 0.8rem 1.8rem; 117 border-radius: 5px; 118 font-weight: 600; 119 font-size: 1rem; 120 cursor: pointer; 121 text-decoration: none; 122 transition: all 0.3s ease; 123 margin-right: 1rem; 124 margin-bottom: 1rem; 125 } 126 127 .btn-primary { 128 background-color: var(--primary); 129 color: var(--white); 130 border: none; 131 } 132 133 .btn-primary:hover { 134 background-color: #0d4b94; 135 } 136 137 .btn-outline { 138 background-color: transparent; 139 color: var(--primary); 140 border: 2px solid var(--primary); 141 } 142 143 .btn-outline:hover { 144 background-color: var(--primary); 145 color: var(--white); 146 } 147 148 /* Header */ 149 header { 150 background-color: var(--white); 151 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); 152 position: fixed; 153 width: 100%; 154 top: 0; 155 z-index: 100; 156 } 157 158 .header-content { 159 display: flex; 160 justify-content: space-between; 161 align-items: center; 162 padding: 1rem 0; 163 } 164 165 .logo { 166 display: flex; 167 align-items: center; 168 } 169 170 .logo img { 171 height: 40px; 172 } 173 174 .logo-text { 175 margin: 0; 176 margin-left: 0.5rem; 177 color: var(--primary); 178 font-size: 1.5rem; 179 font-weight: 700; 180 line-height: 1.3; 181 } 182 183 .logo span { 184 color: var(--gold); 185 } 186 187 nav ul { 188 display: flex; 189 list-style: none; 190 } 191 192 nav ul li { 193 margin-left: 2rem; 194 } 195 196 nav ul li a { 197 text-decoration: none; 198 color: var(--black); 199 font-weight: 500; 200 transition: color 0.3s ease; 201 } 202 203 nav ul li a:hover, nav ul li a.active { 204 color: var(--primary); 205 } 206 207 .language-switcher { 208 position: relative; 209 } 210 211 #langButton { 212 background: none; 213 border: none; 214 font-size: 1.5rem; 215 cursor: pointer; 216 /*padding: 0;*/ 217 /*color: var(--primary);*/ 218 transition: color 0.3s ease; 219 display: flex; 220 align-items: center; 221 } 222 223 #langButton:hover { 224 opacity: 0.7; 225 } 226 227 .lang-menu { 228 position: absolute; 229 top: calc(100% + 10px); 230 right: 0; 231 background: white; 232 border: 1px solid #ccc; 233 border-radius: 8px; 234 box-shadow: 0 4px 12px rgba(0,0,0,0.15); 235 min-width: 160px; 236 z-index: 1000; 237 overflow: hidden; 238 } 239 240 .lang-menu.hidden { 241 display: none; 242 } 243 244 .lang-menu a { 245 display: block; 246 padding: 0.75rem 1rem; 247 text-decoration: none; 248 color: #333; 249 font-size: 0.95rem; 250 transition: background 0.2s ease; 251 } 252 253 .lang-menu a:hover { 254 background: #f5f5f5; 255 } 256 257 .lang-menu a[data-lang="en"] { 258 font-weight: 600; 259 background: #f9f9f9; 260 } 261 262 /* Hero section */ 263 .hero { 264 padding: 8rem 0 5rem; 265 background-color: var(--white); 266 } 267 268 .hero-content { 269 display: flex; 270 align-items: center; 271 justify-content: space-between; 272 } 273 274 .hero-text { 275 flex: 1; 276 padding-right: 3rem; 277 } 278 279 .hero-image { 280 flex: 1; 281 position: relative; 282 } 283 284 .before-after-slider { 285 border-radius: 10px; 286 overflow: hidden; 287 height: 400px; 288 position: relative; 289 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); 290 } 291 292 .slider-image { 293 position: absolute; 294 top: 0; 295 left: 0; 296 width: 100%; 297 height: 100%; 298 object-fit: cover; 299 } 300 301 .slider-before { 302 width: 50%; /* Initial width */ 303 clip-path: none; 304 position: absolute; 305 left: 0; 306 top: 0; 307 bottom: 0; 308 overflow: hidden; 309 } 310 311 .slider-before img { 312 position: absolute; 313 width: 100vw; /* Full viewport width to ensure the correct position */ 314 max-width: none; 315 height: 100%; 316 object-fit: cover; 317 object-position: left; 318 } 319 320 .slider-after { 321 position: absolute; 322 left: 0; 323 top: 0; 324 width: 100%; 325 height: 100%; 326 } 327 328 .slider-after img { 329 width: 100%; 330 height: 100%; 331 object-fit: cover; 332 object-position: left; 333 } 334 335 .slider-handle { 336 position: absolute; 337 top: 0; 338 bottom: 0; 339 width: 4px; 340 background: var(--white); 341 left: 50%; 342 transform: translateX(-50%); 343 cursor: col-resize; 344 z-index: 10; 345 } 346 347 .slider-handle::after { 348 content: ''; 349 position: absolute; 350 width: 40px; 351 height: 40px; 352 background: var(--white); 353 border: 3px solid var(--primary); 354 border-radius: 50%; 355 top: 50%; 356 left: 50%; 357 transform: translate(-50%, -50%); 358 cursor: col-resize; 359 } 360 361 .image-label { 362 position: absolute; 363 background: var(--primary); 364 color: var(--white); 365 padding: 0.4rem 0.8rem; 366 border-radius: 4px; 367 font-size: 0.8rem; 368 font-weight: bold; 369 z-index: 5; 370 top: 20px; 371 } 372 373 .left-label { 374 left: 20px; 375 } 376 377 .right-label { 378 right: 20px; 379 } 380 381 /* Features section */ 382 .features { 383 padding: 5rem 0; 384 background-color: var(--light-gray); 385 } 386 387 .features-heading { 388 text-align: center; 389 margin-bottom: 3rem; 390 } 391 392 .features-grid { 393 display: flex; 394 justify-content: space-between; 395 flex-wrap: wrap; 396 } 397 398 .feature-item { 399 flex-basis: calc(20% - 2rem); 400 margin: 1rem 0rem; /* outside border (HW) */ 401 text-align: center; 402 padding: 2rem 1rem; /* inside border (HW) */ 403 border-radius: 10px; 404 background-color: var(--white); 405 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); 406 transition: transform 0.3s ease, box-shadow 0.3s ease; 407 } 408 409 .feature-item:hover { 410 transform: translateY(-10px); 411 box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); 412 } 413 414 .feature-icon { 415 font-size: 2.5rem; 416 color: var(--primary); 417 margin-bottom: 1rem; 418 } 419 420 .feature-title { 421 font-size: 1.2rem; 422 margin-bottom: 0.5rem; 423 } 424 425 /* Use cases section */ 426 .use-cases { 427 padding: 5rem 0; 428 } 429 430 .use-case { 431 display: flex; 432 align-items: center; 433 margin-bottom: 5rem; 434 } 435 436 .use-case:nth-child(even) { 437 flex-direction: row-reverse; 438 } 439 440 .use-case-text { 441 flex: 1; 442 padding: 0 3rem; 443 } 444 445 .use-case-image { 446 flex: 1; 447 border-radius: 10px; 448 overflow: hidden; 449 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); 450 display: flex; 451 flex-direction: column; 452 gap: 10px; 453 } 454 455 .use-case-image .image-container { 456 position: relative; 457 border-radius: 10px; 458 overflow: hidden; 459 } 460 461 .use-case-image img { 462 width: 100%; 463 height: auto; 464 display: block; 465 } 466 467 .use-case-image .image-label { 468 position: absolute; 469 background: var(--primary); 470 color: var(--white); 471 padding: 0.4rem 0.8rem; 472 border-radius: 4px; 473 font-size: 0.8rem; 474 font-weight: bold; 475 z-index: 5; 476 top: 10px; 477 } 478 479 .use-case-image .top-label { 480 left: 10px; 481 } 482 483 .use-case-image .bottom-label { 484 left: 10px; 485 top: 50%; 486 transform: translateY(+10px); 487 } 488 489 .use-case-image .top-33-label { 490 left: 10px; 491 top: 33.333%; 492 transform: translateY(+10px); 493 } 494 495 .use-case-image .top-66-label { 496 left: 10px; 497 top: 66.667%; 498 transform: translateY(+10px); 499 } 500 501 /* CTA section */ 502 .cta { 503 padding: 5rem 0; 504 background: linear-gradient(135deg, var(--primary), #0d4b94); 505 color: var(--white); 506 text-align: center; 507 } 508 509 .cta h2 { 510 color: var(--white); 511 } 512 513 .cta-buttons { 514 margin-top: 2rem; 515 } 516 517 .btn-white { 518 background-color: var(--white); 519 color: var(--primary); 520 border: none; 521 } 522 523 .btn-white:hover { 524 background-color: var(--light-gray); 525 } 526 527 .btn-outline-white { 528 background-color: transparent; 529 color: var(--white); 530 border: 2px solid var(--white); 531 } 532 533 .btn-outline-white:hover { 534 background-color: var(--white); 535 color: var(--primary); 536 } 537 538 /* Footer */ 539 footer { 540 background-color: var(--black); 541 color: var(--white); 542 padding: 3rem 0 1rem; 543 } 544 545 .footer-content { 546 display: flex; 547 justify-content: space-between; 548 margin-bottom: 2rem; 549 } 550 551 .footer-links { 552 flex: 1; 553 } 554 555 .footer-section-title { 556 color: var(--white); 557 margin-bottom: 1.5rem; 558 position: relative; 559 display: inline-block; 560 font-weight: 700; 561 line-height: 1.3; 562 } 563 564 .footer-section-title::after { 565 content: ''; 566 position: absolute; 567 left: 0; 568 bottom: -0.5rem; 569 width: 40px; 570 height: 3px; 571 background-color: var(--gold); 572 } 573 574 .footer-links ul { 575 list-style: none; 576 } 577 578 .footer-links ul li { 579 margin-bottom: 0.75rem; 580 } 581 582 .footer-links ul li a { 583 color: var(--white); 584 text-decoration: none; 585 transition: color 0.3s ease; 586 } 587 588 .footer-links ul li a:hover { 589 color: var(--gold); 590 } 591 592 .copyright { 593 text-align: center; 594 padding-top: 2rem; 595 border-top: 1px solid rgba(255, 255, 255, 0.1); 596 color: var(--gray); 597 font-size: 0.9rem; 598 } 599 600 /* Responsive */ 601 @media (max-width: 992px) { 602 .hero-content, .use-case { 603 flex-direction: column; 604 } 605 606 .hero-text, .use-case-text { 607 padding-right: 0; 608 padding-bottom: 3rem; 609 text-align: center; 610 } 611 612 .use-case:nth-child(even) { 613 flex-direction: column; 614 } 615 616 .feature-item { 617 flex-basis: calc(33.333% - 2rem); 618 } 619 } 620 621 @media (max-width: 768px) { 622 h1 { 623 font-size: 2.25rem; 624 } 625 626 h2 { 627 font-size: 1.75rem; 628 } 629 630 .feature-item { 631 flex-basis: calc(50% - 2rem); 632 } 633 634 .footer-content { 635 flex-direction: column; 636 } 637 638 .footer-links { 639 margin-bottom: 2rem; 640 } 641 } 642 643 @media (max-width: 576px) { 644 .feature-item { 645 flex-basis: 100%; 646 } 647 } 648 </style> 649</head> 650<body> 651 <!-- Header --> 652 <header> 653 <div class="container"> 654 <div class="header-content"> 655 <div class="logo"> 656 <img src="/images/retroshine-logo-25A.webp" alt="RetroShine Logo"> 657 <div class="logo-text">Retro<span>Shine</span></div> 658 </div> 659 <nav> 660 <ul> 661 <li><a href="index.html" class="active">Home</a></li> 662 <li><a href="https://web.retroshine.eu">Web App</a></li> 663 <li><a href="download.html">Download</a></li> 664 <li><a href="contact.html">Contact</a></li> 665 <li class="language-switcher"> 666 <button id="langButton" aria-label="Select language">ð</button> 667 <div id="langMenu" class="lang-menu hidden"> 668 <a href="/" data-lang="en">English</a> 669 <a href="/da/" data-lang="da">Dansk</a> 670 <a href="/de/" data-lang="de">
670Deutsch</a> 671 <a href="/es/" data-lang="es">Español</a> 672 <a href="/fi/" data-lang="fi">Suomi</a> 673 <a href="/fr/" data-lang="fr">Français</a> 674 <a href="/it/" data-lang="it">Italiano</a> 675 <a href="/nl/" data-lang="nl">Nederlands</a> 676 <a href="/pl/" data-lang="pl">Polski</a> 677 <a href="/pt/" data-lang="pt">Português</a> 678 <a href="/ro/" data-lang="ro">RomânÄ</a> 679 <a href="/sv/" data-lang="sv">Svenska</a> 680 <a href="/uk/" data-lang="uk">УкÑаÑнÑÑка</a> 681 <a href="/cs/" data-lang="cs">ÄeÅ¡tina</a> 682 <a href="/el/" data-lang="el">ÎÎα Îλληνικά</a> 683 <a href="/hu/" data-lang="hu">Magyar</a> 684 </div> 685 </li> 686 </ul> 687 </nav> 688 </div> 689 </div> 690 </header> 691 692 <!-- Hero Section --> 693 <section class="hero"> 694 <div class="container"> 695 <div class="hero-content"> 696 <div class="hero-text"> 697 <h1>Enhance Your Scanned Photos with Professional Precision</h1> 698 <p>RetroShine intelligently restores color and contrast to digitized analog 699 photos â clean, accurate, and built for photographers and archivists. 700 Historically faithful, refined for today's standards.</p> 701 <div class="hero-buttons"> 702 <a href="https://web.retroshine.eu" class="btn btn-outline">Try Web App</a> 703 <a href="download.html" class="btn btn-primary">Download for Desktop</a> 704 </div> 705 </div> 706 <div class="hero-image"> 707 <div class="before-after-slider"> 708 <div class="slider-after"> 709 <img src="/images/after_m2_42.jpg" alt="After restoration"> 710 <div class="image-label right-label">After</div> 711 </div> 712 <div class="slider-before"> 713 <img src="/images/before_m2_42.jpg" alt="Before restoration"> 714 <div class="image-label left-label">Before</div> 715 </div> 716 <div class="slider-handle"></div> 717 </div> 718 </div> 719 </div> 720 </div> 721 </section> 722 723 <!-- Features Section --> 724 <section class="features"> 725 <div class="container"> 726 <div class="features-heading"> 727 <h2>Key Features</h2> 728 <p>RetroShine delivers professional results with minimal effort</p> 729 </div> 730 <div class="features-grid"> 731 <div class="feature-item"> 732 <div class="feature-icon">ð§ </div> 733 <h3 class="feature-title">Smart Color Correction</h3> 734 <p>Automatic curve adjustment based on image content</p> 735 </div> 736 <div class="feature-item"> 737 <div class="feature-icon">ð ï¸</div> 738 <h3 class="feature-title">Manual Control</h3> 739 <p>Advanced tools for perfect results</p> 740 </div> 741 <div class="feature-item"> 742 <div class="feature-icon">â¡</div> 743 <h3 class="feature-title">Batch Processing</h3> 744 <p>Process entire folders at once</p> 745 </div> 746 <div class="feature-item"> 747 <div class="feature-icon">ð¼ï¸</div> 748 <h3 class="feature-title">Full Quality</h3> 749 <p>Preserves original resolution and EXIF metadata</p> 750 </div> 751 <div class="feature-item"> 752 <div class="feature-icon">ðª</div> 753 <h3 class="feature-title">Simple Interface</h3> 754 <p>No editing experience needed</p> 755 </div> 756 </div> 757 </div> 758 </section> 759 760 <!-- Use Cases Section --> 761 <section class="use-cases"> 762 <div class="container"> 763 <div class="use-case"> 764 <div class="use-case-text"> 765 <h2>Bleached Colors Recovered</h2> 766 <p>Aged color films often suffer from dye bleaching and loss of contrast. 767 RetroShine analyzes color spectrum and content to find the optimal 768 correction curve for each channel. It rebalances the image to restore 769 natural skin tones and vivid scenery without artifacts.</p> 770 <a href="#" class="btn btn-outline">See More Examples</a> 771 </div> 772 <div class="use-case-image"> 773 <div class="image-container"> 774 <img src="/images/m1_34_raw.jpg" alt="Before"> 775 <div class="image-label top-label">Before</div> 776 <img src="/images/m1_34_icc.jpg" alt="After"> 777 <div class="image-label bottom-label">After</div> 778 </div> 779 </div> 780 </div> 781 782 <div class="use-case"> 783 <div class="use-case-text"> 784 <h2>Underexposure Fixed</h2> 785 <p>Underexposed photos are often developed longer to compensate for darkness. 786 This leads to artificially high black points. RetroShine's advanced algorithm 787 detects this and carefully adjusts shadows and highlights, revealing hidden 788 details without producing glow effects.</p> 789 <a href="#" class="btn btn-outline">See More Examples</a> 790 </div> 791 <div class="use-case-image"> 792 <div class="image-container"> 793 <img src="/images/m2_25_before.jpg" alt="Underexposed photo before"> 794 <div class="image-label top-label">Before</div> 795 <img src="/images/m2_25_after.jpg" alt="Underexposed photo after"> 796 <div class="image-label bottom-label">After</div> 797 </div> 798 </div> 799 </div> 800 801 <div class="use-case"> 802 <div class="use-case-text"> 803 <h2>Scanner Software vs. RetroShine</h2> 804 <p>All examples above were produced with the same settings, running Retroshine in full-auto mode. 805 Standard scanner software features automatic correction functions that often fail to produce consistent results. 806 We developed RetroShine to avoid the time-consuming tinkering with consumer-level scan and editing software. 807 Let RetroShine's algorithm take over, you have better things to do!</p> 808 <a href="#" class="btn btn-outline">See More Examples</a> 809 </div> 810 <div class="use-case-image"> 811 <div class="image-container"> 812 <img src="/images/m1_07_orig.jpg" alt="Scanner software"> 813 <div class="image-label top-label">Scanner Software</div> 814 <img src="/images/m1_07_wa14.jpg" alt="RetroShine"> 815 <div class="image-label bottom-label">RetroShine</div> 816 </div> 817 </div> 818 </div> 819 820 <div class="use-case"> 821 <div class="use-case-text"> 822 <h2>Pro Workflow</h2> 823 <p>If you are ambitious, you can leverage RetroShine's full capacity by 824 processing raw 16-bit scans (PNG or TIFF). You can load your scanner's 825 ICC profile into RetroShine for best results. It will convert the images 826 to sRGB after curve corrections to avoid any channel bleeding. 827 See the FAQ for how to do this.<br> 828 While RetroShine aims at ease of use, its underlying AutoLevels engine 829 is a command-line tool that seamlessly fits into professional automated 830 archiving workflows. 831 Perfect for museums, archives, and professional photographers. 832 Please let us know if you require camera raw formats.</p> 833 <a href="https://github.com/yellowdolphin/autolevels" class="btn btn-outline">Learn About AutoLevels</a> 834 </div> 835 <div class="use-case-image"> 836 <div class="image-container"> 837 <img src="/images/m1_41_raw.jpg" alt="16-bit scanner raw image"> 838 <div class="image-label top-label">Raw Scan</div> 839 <img src="/images/m1_41_wa14.jpg" alt="Automatic Curve Correction"> 840 <div class="image-label top-33-label">Automatic Curve Correction</div> 841 <img src="/images/m1_41_icc.jpg" alt="sRGB output image"> 842 <div class="image-label top-66-label">Final sRGB Output</div> 843 </div> 844 </div> 845 </div> 846 </div> 847 </section> 848 849 <!-- CTA Section --> 850 <section class="cta"> 851 <div class="container"> 852 <h2>Ready to Bring Your Photos to Life?</h2> 853 <p>No subscriptions. No ads. No data collection. Your privacy is guaranteed.</p> 854 <div class="cta-buttons"> 855 <a href="download.html" class="btn btn-white">Download for Desktop</a> 856 <a href="https://web.retroshine.eu" class="btn btn-outline-white">Try Web App</a> 857 </div> 858 </div> 859 </section> 860 861 <!-- Footer --> 862 <footer> 863 <div class="container"> 864 <div class="footer-content"> 865 <div class="footer-links"> 866 <div class="footer-section-title">RetroShine</div> 867 <ul> 868 <li><a href="index.html">Home</a></li> 869 <li><a href="https://web.retroshine.eu">Web App</a></li> 870 <li><a href="download.html">Download</a></li> 871 <li><a href="contact.html">Contact</a></li> 872 </ul> 873 </div> 874 <div class="footer-links"> 875 <div class="footer-section-title">Help</div> 876 <ul> 877 <li><a href="faq.html">FAQ</a></li> 878 <li><a href="tutorial.html">
878Tutorial</a></li> 879 <!-- <li><a href="support.html">Support</a></li> --> 880 </ul> 881 </div> 882 <div class="footer-links"> 883 <div class="footer-section-title">Legal</div> 884 <ul> 885 <li><a href="privacy_policy.html">Privacy Policy</a></li> 886 <li><a href="legal_notice.html">Legal Notice</a></li> 887 <li><a href="legal_notice.html">Impressum</a></li> 888 </ul> 889 </div> 890 <div class="footer-links"> 891 <div class="footer-section-title">Connect</div> 892 <ul> 893 <li><a href="mailto:[email protected]">Email Us</a></li> 894 <li><a href="donate.html">Donate</a></li> 895 </ul> 896 </div> 897 </div> 898 <div class="copyright"> 899 <p>© 2026 RetroShine. All rights reserved.</p> 900 </div> 901 </div> 902 </footer> 903 904
904<script> 905 // Language switcher functionality 906 const langButton = document.getElementById('langButton'); 907 const langMenu = document.getElementById('langMenu'); 908 909 langButton.addEventListener('click', () => { 910 langMenu.classList.toggle('hidden'); 911 }); 912 913 // Close menu when clicking outside 914 document.addEventListener('click', (e) => { 915 if (!langButton.contains(e.target) && !langMenu.contains(e.target)) { 916 langMenu.classList.add('hidden'); 917 } 918 }); 919 920 // Set language cookie when clicking a language link 921 document.querySelectorAll('.lang-menu a').forEach(link => { 922 link.addEventListener('click', (e) => { 923 const lang = e.target.dataset.lang; 924 document.cookie = `lang=${lang}; path=/; max-age=31536000; SameSite=Lax`; 925 }); 926 }); 927 </script>
927 928 929
929<script> 930 // Simple implementation of the before/after slider 931 document.addEventListener('DOMContentLoaded', function() { 932 const slider = document.querySelector('.slider-handle'); 933 const beforeContainer = document.querySelector('.slider-before'); 934 const beforeImg = beforeContainer.querySelector('img'); 935 const sliderContainer = document.querySelector('.before-after-slider'); 936 937 // Initialize the before image with the correct width 938 function initializeSlider() { 939 const initialPercent = 50; // Default starting at 50% 940 beforeContainer.style.width = `${initialPercent}%`; 941 slider.style.left = `${initialPercent}%`; 942 943 // Set the initial width factor for the before image 944 const widthFactor = 100 / initialPercent; 945 beforeImg.style.width = `${widthFactor * 100}%`; 946 } 947 948 // Run initialization on page load 949 initializeSlider(); 950 951 function updateSlider(x) { 952 const sliderRect = sliderContainer.getBoundingClientRect(); 953 let percent = ((x - sliderRect.left) / sliderRect.width) * 100; 954 percent = Math.min(Math.max(percent, 0), 100); 955 956 beforeContainer.style.width = `${percent}%`; 957 slider.style.left = `${percent}%`; 958 959 // Update the width factor based on the current slider position 960 const widthFactor = 100 / percent; 961 if (percent > 0) { 962 beforeImg.style.width = `${widthFactor * 100}%`; 963 } 964 } 965 966 let isDragging = false; 967 968 slider.addEventListener('mousedown', (e) => { 969 isDragging = true; 970 e.preventDefault(); // Prevent text selection during drag 971 }); 972 973 window.addEventListener('mousemove', (e) => { 974 if (isDragging) { 975 updateSlider(e.clientX); 976 } 977 }); 978 979 window.addEventListener('mouseup', () => { 980 isDragging = false; 981 }); 982 983 // For touch devices 984 slider.addEventListener('touchstart', (e) => { 985 isDragging = true; 986 e.preventDefault(); // Prevent default touch action 987 }, { passive: false }); 988 989 window.addEventListener('touchmove', (e) => { 990 if (isDragging) { 991 updateSlider(e.touches[0].clientX); 992 e.preventDefault(); // Prevent page scrolling while dragging 993 } 994 }, { passive: false }); 995 996 window.addEventListener('touchend', () => { 997 isDragging = false; 998 }); 999 }); 1000 </script>
1000 1001</body> 1002</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.