{"id":271,"date":"2026-03-10T00:00:01","date_gmt":"2026-03-10T00:00:01","guid":{"rendered":"https:\/\/viewanonymous.com\/?page_id=271"},"modified":"2026-03-31T05:41:33","modified_gmt":"2026-03-31T05:41:33","slug":"gallery","status":"publish","type":"page","link":"https:\/\/viewanonymous.com\/tools\/reddit\/gallery\/","title":{"rendered":"Reddit Gallery Viewer &#8211; View Reddit Media Anonymously"},"content":{"rendered":"\n[et_pb_section fb_built=&#8221;1&#8243; fullwidth=&#8221;on&#8221; theme_builder_area=&#8221;post_content&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221;][et_pb_fullwidth_code _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; theme_builder_area=&#8221;post_content&#8221; hover_enabled=&#8221;0&#8243; sticky_enabled=&#8221;0&#8243;]    <link rel=\"canonical\" href=\"\">\r\n  \r\n      <!-- Favicon -->\r\n      <link rel=\"icon\" href=\"https:\/\/americansviewer.com\/media\/1769663809_wSx1bgRoc2_av-favicon.png\" type=\"image\/x-icon\">\r\n      \r\n      <!-- Google Fonts - Premium Typography -->\r\n      <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n      <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin=\"\">\r\n      <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@300;400;500;600;700&family=Manrope:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n      \r\n      <!-- Bootstrap CSS -->\r\n      <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\r\n      <!-- Boxicons -->\r\n      <link href=\"https:\/\/unpkg.com\/boxicons@2.1.4\/css\/boxicons.min.css\" rel=\"stylesheet\">\r\n      <!-- AOS Animation -->\r\n      <link href=\"https:\/\/unpkg.com\/aos@2.3.1\/dist\/aos.css\" rel=\"stylesheet\">\r\n      \r\n  \r\n  \r\n  <style id=\"vvvebjs-styles\">\r\n      html{\r\n          overflow-x: hidden;\r\n      }\r\n  \r\n      :root {\r\n              --rdiv-primary-color: #8A66FF;\r\n              --rdiv-secondary-color: #6A4FE0;\r\n              --rdiv-dark-color: #000000;\r\n              --rdiv-light-color: #FFFFFF;\r\n              --rdiv-gray-color: #F5F3FF;\r\n              --rdiv-muted-on-light: #555555;\r\n              --rdiv-primary-hover: #7758F0;\r\n              --rdiv-secondary-hover: #9B85FF;\r\n              --rdiv-section-padding: 100px 0;\r\n          }\r\n          \r\n\/*           body {\r\n              font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n              scroll-behavior: smooth;\r\n              overflow-x: hidden;\r\n              background-color: var(--rdiv-light-color);\r\n              color: var(--rdiv-dark-color);\r\n          }  \r\n      \r\n      h1, h2, h3, h4, h5, h6 {\r\n          font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\r\n          font-weight: 800;\r\n          letter-spacing: -0.02em;\r\n      } *\/\r\n   \r\n       \r\n          \/* Marketing hero \u2014 white, black text, purple accent *\/\r\n          .rdiv-hero-section {\r\n              padding: var(--rdiv-section-padding);\r\n              text-align: center;\r\n              background-color: var(--rdiv-light-color);\r\n          }\r\n          \r\n          .rdiv-hero-content {\r\n              position: relative;\r\n              z-index: 1;\r\n          }\r\n          \r\n          .rdiv-hero-section h1 {\r\n              font-size: 3.5rem;\r\n              font-weight: 800;\r\n              margin-bottom: 1.5rem;\r\n              color: var(--rdiv-dark-color);\r\n              -webkit-text-fill-color: var(--rdiv-dark-color);\r\n              background: none;\r\n              -webkit-background-clip: unset;\r\n              background-clip: unset;\r\n          }\r\n\r\n          .rdiv-hero-section h1 .va-accent {\r\n              color: var(--rdiv-primary-color);\r\n          }\r\n          \r\n          .rdiv-hero-section p {\r\n              font-size: 1.25rem;\r\n              max-width: 700px;\r\n              margin: 0 auto 2rem;\r\n              font-weight: 400;\r\n              color: var(--rdiv-muted-on-light);\r\n          }\r\n          \r\n          \/* Work process \u2014 lavender strip, black text, white cards *\/\r\n          .rdiv-work-process-section {\r\n              padding: var(--rdiv-section-padding);\r\n              background: linear-gradient(165deg, #F5F3FF 0%, #FFFFFF 52%, #F5F3FF 100%);\r\n              color: #000000;\r\n              position: relative;\r\n              overflow: hidden;\r\n              border-top: 1px solid rgba(138, 102, 255, 0.12);\r\n              border-bottom: 1px solid rgba(138, 102, 255, 0.12);\r\n          }\r\n          \r\n          .rdiv-work-process-section::before {\r\n              content: '';\r\n              position: absolute;\r\n              top: 0;\r\n              left: 0;\r\n              width: 100%;\r\n              height: 100%;\r\n              background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(138, 102, 255, 0.06) 0%, transparent 55%);\r\n              pointer-events: none;\r\n          }\r\n\r\n          .rdiv-work-process-section .rdiv-light-title,\r\n          .rdiv-work-process-section .rdiv-section-title {\r\n              color: #000000;\r\n          }\r\n\r\n          .rdiv-work-process-section .rdiv-light-title::after {\r\n              background: linear-gradient(to right, var(--rdiv-primary-color), var(--rdiv-secondary-color));\r\n          }\r\n\r\n          .rdiv-work-process-section .rdiv-light-subtitle,\r\n          .rdiv-work-process-section .rdiv-section-subtitle {\r\n              color: var(--rdiv-muted-on-light);\r\n          }\r\n\r\n          .rdiv-work-process-section .rdiv-process-step h4.text-white {\r\n              color: #000000 !important;\r\n          }\r\n          \r\n          .rdiv-work-process-content {\r\n              position: relative;\r\n              z-index: 1;\r\n          }\r\n          \r\n          .rdiv-process-step {\r\n              text-align: center;\r\n              padding: 30px 20px;\r\n              position: relative;\r\n              z-index: 1;\r\n              background: #FFFFFF;\r\n              border-radius: 16px;\r\n              margin: 15px;\r\n              border: 1px solid rgba(138, 102, 255, 0.2);\r\n              box-shadow: 0 8px 28px rgba(138, 102, 255, 0.08);\r\n              transition: all 0.3s ease;\r\n              color: #000000;\r\n          }\r\n          \r\n          .rdiv-process-step:hover {\r\n              transform: translateY(-8px);\r\n              box-shadow: 0 16px 40px rgba(138, 102, 255, 0.15);\r\n              border-color: rgba(138, 102, 255, 0.35);\r\n          }\r\n          \r\n          .rdiv-step-number {\r\n              width: 60px;\r\n              height: 60px;\r\n              background: linear-gradient(135deg, var(--rdiv-primary-color), var(--rdiv-secondary-color));\r\n              color: #FFFFFF;\r\n              border-radius: 50%;\r\n              display: flex;\r\n              align-items: center;\r\n              justify-content: center;\r\n              font-weight: 800;\r\n              margin: 0 auto 20px;\r\n              font-size: 1.5rem;\r\n              box-shadow: 0 8px 20px rgba(138, 102, 255, 0.3);\r\n          }\r\n          \r\n          \/* Features Section *\/\r\n          .rdiv-features-section {\r\n              padding: var(--rdiv-section-padding);\r\n              background: white;\r\n          }\r\n          \r\n          .rdiv-feature-card {\r\n              padding: 40px 30px;\r\n              border-radius: 16px;\r\n              background: white;\r\n              box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);\r\n              margin-bottom: 30px;\r\n              transition: all 0.3s ease;\r\n              border: 1px solid rgba(0,0,0,0.05);\r\n              height: 100%;\r\n              position: relative;\r\n              overflow: hidden;\r\n          }\r\n          \r\n          .rdiv-feature-card::before {\r\n              content: '';\r\n              position: absolute;\r\n              top: 0;\r\n              left: 0;\r\n              width: 4px;\r\n              height: 100%;\r\n              background: linear-gradient(to bottom, var(--rdiv-primary-color), var(--rdiv-secondary-color));\r\n              transition: all 0.3s ease;\r\n          }\r\n          \r\n          .rdiv-feature-card:hover {\r\n              transform: translateY(-10px);\r\n              box-shadow: 0 15px 40px rgba(0,0,0,0.1);\r\n          }\r\n          \r\n          .rdiv-feature-card:hover::before {\r\n              width: 100%;\r\n              opacity: 0.1;\r\n          }\r\n          \r\n          .rdiv-feature-icon {\r\n              width: 70px;\r\n              height: 70px;\r\n              border-radius: 20px;\r\n              display: flex;\r\n              align-items: center;\r\n              justify-content: center;\r\n              margin-bottom: 25px;\r\n              background: linear-gradient(45deg, var(--rdiv-primary-color), var(--rdiv-secondary-color));\r\n              color: white;\r\n              font-size: 1.8rem;\r\n              transition: all 0.3s ease;\r\n          }\r\n          \r\n          .rdiv-feature-card:hover .rdiv-feature-icon {\r\n              transform: rotate(15deg) scale(1.1);\r\n              background: linear-gradient(45deg, var(--rdiv-primary-hover), var(--rdiv-secondary-hover));\r\n          }\r\n          \r\n          \/* Why Choose Section *\/\r\n          .rdiv-why-choose-section {\r\n              padding: var(--rdiv-section-padding);\r\n              background: var(--rdiv-gray-color);\r\n          }\r\n          \r\n          .rdiv-why-choose-image {\r\n              border-radius: 16px;\r\n              overflow: hidden;\r\n              box-shadow: 0 20px 40px rgba(0,0,0,0.1);\r\n              transform: perspective(1000px) rotateY(-5deg);\r\n              transition: all 0.5s ease;\r\n          }\r\n          \r\n          .rdiv-why-choose-image:hover {\r\n              transform: perspective(1000px) rotateY(0deg);\r\n          }\r\n          \r\n          .rdiv-benefit-item {\r\n              display: flex;\r\n              align-items: flex-start;\r\n              margin-bottom: 20px;\r\n              padding: 15px;\r\n              border-radius: 12px;\r\n              background: white;\r\n              box-shadow: 0 5px 15px rgba(0,0,0,0.03);\r\n              transition: all 0.3s ease;\r\n          }\r\n          \r\n          .rdiv-benefit-item:hover {\r\n              transform: translateX(10px);\r\n              box-shadow: 0 10px 25px rgba(0,0,0,0.1);\r\n          }\r\n          \r\n          .rdiv-benefit-icon {\r\n              width: 40px;\r\n              height: 40px;\r\n              border-radius: 12px;\r\n              display: flex;\r\n              align-items: center;\r\n              justify-content: center;\r\n              margin-right: 15px;\r\n              background: linear-gradient(45deg, var(--rdiv-primary-color), var(--rdiv-secondary-color));\r\n              color: white;\r\n              font-size: 1.2rem;\r\n              flex-shrink: 0;\r\n          }\r\n          \r\n          \/* FAQ Section *\/\r\n          .rdiv-faq-section {\r\n              padding: var(--rdiv-section-padding);\r\n              background: white;\r\n          }\r\n          \r\n          .rdiv-accordion-item {\r\n              border: none;\r\n              border-radius: 12px !important;\r\n              overflow: hidden;\r\n              margin-bottom: 15px;\r\n              box-shadow: 0 5px 15px rgba(0,0,0,0.05);\r\n          }\r\n          \r\n          .rdiv-accordion-button {\r\n              font-weight: 600;\r\n              color: var(--rdiv-dark-color);\r\n              padding: 20px 25px;\r\n              background: white;\r\n              box-shadow: none;\r\n              border-radius: 12px 12px 0 0 !important;\r\n          }\r\n          \r\n          .rdiv-accordion-button:not(.collapsed) {\r\n              background: white;\r\n              color: var(--rdiv-primary-color);\r\n              box-shadow: none;\r\n          }\r\n          \r\n          .rdiv-accordion-button:focus {\r\n              box-shadow: none;\r\n              border-color: rgba(138, 102, 255, 0.35);\r\n          }\r\n          \r\n          .rdiv-accordion-button::after {\r\n              background-image: url(\"data:image\/svg+xml,%3csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 16 16' fill='%238A66FF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'\/%3e%3c\/svg%3e\");\r\n          }\r\n          \r\n          .rdiv-accordion-body {\r\n              padding: 25px;\r\n              color: var(--rdiv-muted-on-light);\r\n          }\r\n          \r\n          \/* Section Titles *\/\r\n          .rdiv-section-title {\r\n              font-weight: 800;\r\n              color: var(--rdiv-dark-color);\r\n              margin-bottom: 1.5rem;\r\n              position: relative;\r\n              display: inline-block;\r\n          }\r\n          \r\n          .rdiv-section-title::after {\r\n              content: '';\r\n              position: absolute;\r\n              bottom: -10px;\r\n              left: 0;\r\n              width: 60px;\r\n              height: 4px;\r\n              background: linear-gradient(to right, var(--rdiv-primary-color), var(--rdiv-secondary-color));\r\n              border-radius: 2px;\r\n          }\r\n          \r\n          .rdiv-light-title {\r\n              color: white;\r\n          }\r\n          \r\n          .rdiv-light-title::after {\r\n              background: white;\r\n          }\r\n          \r\n          .rdiv-section-subtitle {\r\n              color: var(--rdiv-muted-on-light);\r\n              max-width: 700px;\r\n              margin: 0 auto 3rem;\r\n              font-size: 1.1rem;\r\n          }\r\n          \r\n          .rdiv-light-subtitle {\r\n              color: rgba(255,255,255,0.8);\r\n          }\r\n          \r\n          \/* Responsive Design *\/\r\n          @media (max-width: 991px) {\r\n              :root {\r\n                  --rdiv-section-padding: 80px 0;\r\n              }\r\n              \r\n              .rdiv-hero-section h1 {\r\n                  font-size: 2.8rem;\r\n              }\r\n              \r\n              .rdiv-process-step::before {\r\n                  display: none;\r\n              }\r\n          }\r\n          \r\n          @media (max-width: 767px) {\r\n              :root {\r\n                  --rdiv-section-padding: 70px 0;\r\n              }\r\n              \r\n              .rdiv-hero-section {\r\n                  padding: 100px 0 60px;\r\n              }\r\n              \r\n              .rdiv-hero-section h1 {\r\n                  font-size: 2.2rem;\r\n              }\r\n              \r\n              .rdiv-hero-section p {\r\n                  font-size: 1rem;\r\n              }\r\n              \r\n              .rdiv-section-title {\r\n                  font-size: 1.8rem;\r\n              }\r\n          }\r\n          \r\n          \/* Animation *\/\r\n          @keyframes rdiv-float {\r\n              0% { transform: translateY(0px); }\r\n              50% { transform: translateY(-15px); }\r\n              100% { transform: translateY(0px); }\r\n          }\r\n          \r\n          .rdiv-floating-element {\r\n              animation: rdiv-float 6s ease-in-out infinite;\r\n          }\r\n          \r\n          \/* Custom Scrollbar *\/\r\n          ::-webkit-scrollbar {\r\n              width: 8px;\r\n          }\r\n          \r\n          ::-webkit-scrollbar-track {\r\n              background: #EDE9FE;\r\n          }\r\n          \r\n          ::-webkit-scrollbar-thumb {\r\n              background: linear-gradient(var(--rdiv-primary-color), var(--rdiv-secondary-color));\r\n              border-radius: 10px;\r\n          }\r\n          \r\n          ::-webkit-scrollbar-thumb:hover {\r\n              background: linear-gradient(var(--rdiv-primary-hover), var(--rdiv-secondary-hover));\r\n          }   \r\n  \r\n  \r\n  <\/style>\r\n  <!-- tools -->\r\n  <style>\r\n  \r\n      :root {\r\n          --primary-color: #8A66FF;\r\n          --primary-light: #A385FF;\r\n          --primary-dark: #6A4FE0;\r\n          --secondary-color: #6A4FE0;\r\n          --secondary-light: #8A66FF;\r\n          --accent-color: #8A66FF;\r\n          --accent-light: #A385FF;\r\n          --success-color: #22C55E;\r\n          --success-light: #4ADE80;\r\n          --danger-color: #EF4444;\r\n          --danger-light: #F87171;\r\n          --progress-color: #8A66FF;\r\n          --progress-bg: #F5F3FF;\r\n          --bg-primary: #FFFFFF;\r\n          --bg-secondary: #F5F3FF;\r\n          --bg-tertiary: #EDE9FE;\r\n          --bg-card: #FFFFFF;\r\n          --glass-bg: rgba(138, 102, 255, 0.06);\r\n          --glass-border: rgba(138, 102, 255, 0.22);\r\n          --text-primary: #000000;\r\n          --text-secondary: #333333;\r\n          --text-muted: #666666;\r\n          --text-white: #FFFFFF;\r\n          --shadow-sm: 0 2px 8px rgba(138, 102, 255, 0.08);\r\n          --shadow-md: 0 4px 16px rgba(138, 102, 255, 0.12);\r\n          --shadow-lg: 0 8px 32px rgba(138, 102, 255, 0.14);\r\n          --shadow-xl: 0 16px 48px rgba(138, 102, 255, 0.16);\r\n          --gradient-primary: linear-gradient(135deg, #8A66FF, #6A4FE0);\r\n          --gradient-secondary: linear-gradient(135deg, #6A4FE0, #8A66FF);\r\n          --gradient-accent: linear-gradient(135deg, #8A66FF, #A385FF);\r\n      }\r\n  \r\n     \r\n    \r\n    .rdiv-hero-tool-section {\r\n      font-family: 'Manrope', 'Inter', sans-serif;\r\n      background-color: #FFFFFF;\r\n      background-image:\r\n          radial-gradient(circle at 18% 12%, rgba(138, 102, 255, 0.12) 0%, transparent 42%),\r\n          radial-gradient(circle at 92% 88%, rgba(106, 79, 224, 0.08) 0%, transparent 40%),\r\n          linear-gradient(180deg, #FFFFFF 0%, #F5F3FF 100%);\r\n      padding: 80px 0;\r\n      line-height: 1.6;\r\n      color: var(--text-primary);\r\n      overflow-x: hidden;\r\n      border-bottom: 1px solid rgba(138, 102, 255, 0.15);\r\n  }\r\n  \r\n      .rdiv-custom-container {\r\n          max-width: 1400px;\r\n          margin: 0 auto;\r\n          padding: 20px;\r\n          position: relative;\r\n      }\r\n  \r\n      .header {\r\n          text-align: center;\r\n          margin-bottom: 40px;\r\n          padding: 40px 0;\r\n          animation: slideInDown 1s ease-out;\r\n      }\r\n  \r\n      .logo {\r\n          display: flex;\r\n          align-items: center;\r\n          justify-content: center;\r\n          gap: 20px;\r\n          margin-bottom: 25px;\r\n          flex-wrap: wrap;\r\n      }\r\n  \r\n      .logo-icon {\r\n          width: 80px;\r\n          height: 80px;\r\n          background: var(--gradient-primary);\r\n          border-radius: 20px;\r\n          display: flex;\r\n          align-items: center;\r\n          justify-content: center;\r\n          color: white;\r\n          font-size: 36px;\r\n          font-weight: 800;\r\n          box-shadow: var(--shadow-lg);\r\n          animation: float 3s ease-in-out infinite;\r\n          position: relative;\r\n          overflow: hidden;\r\n      }\r\n  \r\n      .logo-icon::before {\r\n          content: '';\r\n          position: absolute;\r\n          top: -50%;\r\n          left: -50%;\r\n          width: 200%;\r\n          height: 200%;\r\n          background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);\r\n          transform: rotate(45deg);\r\n          animation: shine 3s infinite;\r\n      }\r\n  \r\n      .reddit-badge {\r\n          background: var(--gradient-secondary);\r\n          color: white;\r\n          padding: 8px 16px;\r\n          border-radius: 25px;\r\n          font-size: 14px;\r\n          font-weight: 700;\r\n          box-shadow: var(--shadow-md);\r\n          animation: pulse 2s infinite;\r\n      }\r\n  \r\n    .logo-text {\r\n      font-size: clamp(2.5rem, 6vw, 4rem);\r\n      font-weight: 800;\r\n      font-family: 'Manrope', 'Inter', sans-serif;\r\n      color: #000000;\r\n      -webkit-text-fill-color: #000000;\r\n      background: none;\r\n      -webkit-background-clip: unset;\r\n      background-clip: unset;\r\n      letter-spacing: -0.03em;\r\n  }\r\n\r\n    .logo-text .va-accent {\r\n      color: #8A66FF;\r\n      -webkit-text-fill-color: #8A66FF;\r\n    }\r\n  \r\n      .subtitle {\r\n          color: var(--text-secondary);\r\n          font-size: 20px;\r\n          font-weight: 600;\r\n          margin-bottom: 30px;\r\n          max-width: 700px;\r\n          margin-left: auto;\r\n          margin-right: auto;\r\n      }\r\n  \r\n      .features-grid {\r\n          display: grid;\r\n          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n          gap: 20px;\r\n          margin-bottom: 40px;\r\n      }\r\n  \r\n    .feature-card {\r\n      background: #FFFFFF;\r\n      border: 1px solid rgba(138, 102, 255, 0.2);\r\n      padding: 20px;\r\n      border-radius: 16px;\r\n      text-align: center;\r\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n      position: relative;\r\n      overflow: hidden;\r\n      box-shadow: 0 6px 24px rgba(138, 102, 255, 0.06);\r\n  }\r\n  \r\n      .feature-card::before {\r\n          content: '';\r\n          position: absolute;\r\n          top: 0;\r\n          left: -100%;\r\n          width: 100%;\r\n          height: 100%;\r\n          background: linear-gradient(90deg, transparent, rgba(138, 102, 255, 0.12), transparent);\r\n          transition: left 0.5s;\r\n      }\r\n  \r\n      .feature-card:hover::before {\r\n          left: 100%;\r\n      }\r\n  \r\n      .feature-card:hover {\r\n          transform: translateY(-5px);\r\n          box-shadow: var(--shadow-lg);\r\n          border-color: var(--primary-color);\r\n      }\r\n  \r\n      .feature-icon {\r\n          width: 50px;\r\n          height: 50px;\r\n          background: var(--gradient-primary);\r\n          border-radius: 50%;\r\n          display: flex;\r\n          align-items: center;\r\n          justify-content: center;\r\n          margin: 0 auto 15px;\r\n          font-size: 24px;\r\n          color: white;\r\n      }\r\n  \r\n      .feature-title {\r\n          font-weight: 700;\r\n          color: var(--text-primary);\r\n          margin-bottom: 8px;\r\n      }\r\n  \r\n     .search-container {\r\n      background: #FFFFFF;\r\n      border: 1px solid rgba(138, 102, 255, 0.22);\r\n      padding: 40px;\r\n      border-radius: 24px;\r\n      box-shadow: var(--shadow-xl);\r\n      margin-bottom: 40px;\r\n      animation: slideInUp 1s ease-out 0.2s both;\r\n      position: relative;\r\n      overflow: hidden;\r\n  }\r\n  \r\n      .search-container::before {\r\n          content: '';\r\n          position: absolute;\r\n          top: 0;\r\n          left: 0;\r\n          right: 0;\r\n          height: 4px;\r\n          background: var(--gradient-primary);\r\n      }\r\n  \r\n      .search-form {\r\n          display: flex;\r\n          gap: 20px;\r\n          margin-bottom: 25px;\r\n          position: relative;\r\n      }\r\n  \r\n   .search-input {\r\n      flex: 1 !important;\r\n      padding: 18px 24px !important;\r\n      border: 2px solid rgba(138, 102, 255, 0.28) !important;\r\n      border-radius: 16px !important;\r\n      font-size: 16px !important;\r\n      font-weight: 500 !important;\r\n      background: #FFFFFF !important;\r\n      transition: all 0.3s ease !important;\r\n      outline: none !important;\r\n      color: var(--text-primary) !important;\r\n      font-family: inherit !important;\r\n  }\r\n  \r\n      .search-input:focus {\r\n          border-color: var(--primary-color);\r\n          box-shadow: 0 0 0 4px rgba(138, 102, 255, 0.18);\r\n          transform: translateY(-2px);\r\n      }\r\n  \r\n      .search-input::placeholder {\r\n          color: var(--text-muted);\r\n          font-weight: 400;\r\n      }\r\n  \r\n      .search-btn {\r\n          padding: 18px 36px;\r\n          background: var(--gradient-primary);\r\n          color: white;\r\n          border: none;\r\n          border-radius: 16px;\r\n          font-size: 16px;\r\n          font-weight: 700;\r\n          cursor: pointer;\r\n          transition: all 0.3s ease;\r\n          min-width: 180px;\r\n          position: relative;\r\n          overflow: hidden;\r\n          box-shadow: var(--shadow-md);\r\n          font-family: inherit;\r\n      }\r\n  \r\n      .search-btn::before {\r\n          content: '';\r\n          position: absolute;\r\n          top: 0;\r\n          left: -100%;\r\n          width: 100%;\r\n          height: 100%;\r\n          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);\r\n          transition: left 0.5s;\r\n      }\r\n  \r\n      .search-btn:hover::before {\r\n          left: 100%;\r\n      }\r\n  \r\n      .search-btn:hover:not(:disabled) {\r\n          transform: translateY(-3px);\r\n          box-shadow: var(--shadow-lg);\r\n      }\r\n  \r\n      .search-btn:disabled {\r\n          opacity: 0.6;\r\n          cursor: not-allowed;\r\n          transform: none;\r\n      }\r\n  \r\n      .user-info {\r\n          background: var(--bg-card);\r\n          border: 1px solid var(--glass-border);\r\n          padding: 40px;\r\n          border-radius: 24px;\r\n          box-shadow: var(--shadow-xl);\r\n          margin-bottom: 40px;\r\n          display: none;\r\n          animation: slideInDown 0.8s ease-out;\r\n          position: relative;\r\n          overflow: hidden;\r\n      }\r\n  \r\n      .user-info::before {\r\n          content: '';\r\n          position: absolute;\r\n          top: 0;\r\n          left: 0;\r\n          right: 0;\r\n          height: 4px;\r\n          background: var(--gradient-secondary);\r\n      }\r\n  \r\n      .user-header {\r\n          display: flex;\r\n          align-items: center;\r\n          gap: 30px;\r\n          margin-bottom: 30px;\r\n      }\r\n  \r\n      .user-avatar {\r\n          width: 100px;\r\n          height: 100px;\r\n          border-radius: 50%;\r\n          background: var(--gradient-primary);\r\n          display: flex;\r\n          align-items: center;\r\n          justify-content: center;\r\n          font-size: 3rem;\r\n          color: white;\r\n          font-weight: 900;\r\n          box-shadow: var(--shadow-lg);\r\n          position: relative;\r\n          overflow: hidden;\r\n      }\r\n  \r\n      .user-avatar::before {\r\n          content: '';\r\n          position: absolute;\r\n          top: -50%;\r\n          left: -50%;\r\n          width: 200%;\r\n          height: 200%;\r\n          background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);\r\n          transform: rotate(45deg);\r\n          animation: shine 4s infinite;\r\n      }\r\n  \r\n      .user-details h2 {\r\n          font-size: 2.5rem;\r\n          color: var(--text-primary);\r\n          margin-bottom: 10px;\r\n          font-weight: 900;\r\n      }\r\n  \r\n      .user-description {\r\n          color: var(--text-secondary);\r\n          font-size: 18px;\r\n          font-weight: 500;\r\n      }\r\n  \r\n      .user-stats {\r\n          display: grid;\r\n          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n          gap: 25px;\r\n          margin-top: 30px;\r\n      }\r\n  \r\n      .stat-card {\r\n          background: var(--bg-card);\r\n          border: 1px solid var(--glass-border);\r\n          padding: 25px;\r\n          border-radius: 20px;\r\n          text-align: center;\r\n          transition: all 0.3s ease;\r\n          position: relative;\r\n          overflow: hidden;\r\n      }\r\n  \r\n      .stat-card::before {\r\n          content: '';\r\n          position: absolute;\r\n          top: 0;\r\n          left: 0;\r\n          right: 0;\r\n          height: 3px;\r\n          background: var(--gradient-accent);\r\n      }\r\n  \r\n      .stat-card:hover {\r\n          transform: translateY(-5px);\r\n          box-shadow: var(--shadow-md);\r\n      }\r\n  \r\n      .stat-number {\r\n          font-size: 2.2rem;\r\n          font-weight: 900;\r\n          color: var(--primary-color);\r\n          margin-bottom: 8px;\r\n      }\r\n  \r\n      .stat-label {\r\n          font-size: 1rem;\r\n          color: var(--text-secondary);\r\n          font-weight: 600;\r\n      }\r\n  \r\n      .posts-section {\r\n          display: none;\r\n      }\r\n  \r\n      .section-title {\r\n          color: var(--text-primary);\r\n          font-size: 2.5rem;\r\n          font-weight: 800;\r\n          margin-bottom: 40px;\r\n          text-align: center;\r\n          background: var(--bg-card);\r\n          border: 1px solid var(--glass-border);\r\n          padding: 25px;\r\n          border-radius: 20px;\r\n          position: relative;\r\n          overflow: hidden;\r\n      }\r\n  \r\n      .section-title::before {\r\n          content: '';\r\n          position: absolute;\r\n          top: 0;\r\n          left: 0;\r\n          right: 0;\r\n          height: 4px;\r\n          background: var(--gradient-accent);\r\n      }\r\n  \r\n      .posts-grid {\r\n          display: grid;\r\n          grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));\r\n          gap: 30px;\r\n      }\r\n  \r\n      .post-card {\r\n          background: var(--bg-card);\r\n          border: 1px solid var(--glass-border);\r\n          border-radius: 28px;\r\n          padding: 25px;\r\n          box-shadow: var(--shadow-xl);\r\n          transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n          position: relative;\r\n          overflow: hidden;\r\n          animation: slideUp 0.6s ease forwards;\r\n          display: flex;\r\n          flex-direction: column;\r\n          height: 100%;\r\n      }\r\n  \r\n      .post-card::before {\r\n          content: '';\r\n          position: absolute;\r\n          top: 0;\r\n          left: 0;\r\n          right: 0;\r\n          height: 6px;\r\n          background: var(--gradient-primary);\r\n          border-radius: 28px 28px 0 0;\r\n      }\r\n  \r\n      .post-card:hover {\r\n          transform: translateY(-15px);\r\n          box-shadow: 0 25px 50px rgba(138, 102, 255, 0.16);\r\n          border-color: var(--primary-color);\r\n      }\r\n  \r\n      .post-header {\r\n          display: flex;\r\n          align-items: center;\r\n          justify-content: space-between;\r\n          margin-bottom: 20px;\r\n          padding-bottom: 15px;\r\n          border-bottom: 2px solid var(--bg-tertiary);\r\n      }\r\n  \r\n      .subreddit-info {\r\n          display: flex;\r\n          align-items: center;\r\n          gap: 15px;\r\n          flex-wrap: wrap;\r\n      }\r\n  \r\n      .subreddit-badge {\r\n          background: var(--gradient-primary);\r\n          color: white;\r\n          padding: 8px 16px;\r\n          border-radius: 25px;\r\n          font-size: 0.9rem;\r\n          font-weight: 700;\r\n          box-shadow: var(--shadow-sm);\r\n      }\r\n  \r\n      .post-type {\r\n          background: var(--gradient-secondary);\r\n          color: white;\r\n          padding: 6px 12px;\r\n          border-radius: 20px;\r\n          font-size: 0.8rem;\r\n          font-weight: 600;\r\n          text-transform: capitalize;\r\n      }\r\n  \r\n      .post-meta {\r\n          font-size: 0.9rem;\r\n          color: var(--text-muted);\r\n          font-weight: 500;\r\n          text-align: right;\r\n      }\r\n  \r\n      .post-title {\r\n          font-size: 1.6rem;\r\n          font-weight: 700;\r\n          margin-bottom: 20px;\r\n          color: var(--text-primary);\r\n          line-height: 1.4;\r\n      }\r\n  \r\n      .post-content {\r\n          margin-bottom: 25px;\r\n          flex-grow: 1;\r\n      }\r\n  \r\n      .media-container {\r\n          margin: 20px 0;\r\n          border-radius: 20px;\r\n          overflow: hidden;\r\n          position: relative;\r\n          box-shadow: var(--shadow-md);\r\n          background: #000;\r\n      }\r\n  \r\n      .image-preview {\r\n          width: 100%;\r\n          max-height: 400px;\r\n          object-fit: cover;\r\n          cursor: pointer;\r\n          transition: transform 0.3s ease;\r\n      }\r\n  \r\n      .image-preview:hover {\r\n          transform: scale(1.02);\r\n      }\r\n  \r\n      .gallery-container {\r\n          display: grid;\r\n          grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\r\n          gap: 15px;\r\n          margin: 20px 0;\r\n      }\r\n  \r\n      .gallery-image {\r\n          width: 100%;\r\n          height: 200px;\r\n          object-fit: cover;\r\n          border-radius: 15px;\r\n          cursor: pointer;\r\n          transition: transform 0.3s ease;\r\n          box-shadow: var(--shadow-sm);\r\n      }\r\n  \r\n      .gallery-image:hover {\r\n          transform: scale(1.05);\r\n      }\r\n  \r\n      .media-controls {\r\n          display: flex;\r\n          gap: 15px;\r\n          margin-top: 20px;\r\n          flex-wrap: wrap;\r\n          align-items: center;\r\n      }\r\n  \r\n      .control-btn {\r\n          display: flex;\r\n          align-items: center;\r\n          gap: 10px;\r\n          padding: 14px 24px;\r\n          border: none;\r\n          border-radius: 15px;\r\n          cursor: pointer;\r\n          font-size: 1rem;\r\n          font-weight: 600;\r\n          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n          font-family: inherit;\r\n          position: relative;\r\n          overflow: hidden;\r\n      }\r\n  \r\n      .control-btn::before {\r\n          content: '';\r\n          position: absolute;\r\n          top: 0;\r\n          left: -100%;\r\n          width: 100%;\r\n          height: 100%;\r\n          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);\r\n          transition: left 0.5s;\r\n      }\r\n  \r\n      .control-btn:hover::before {\r\n          left: 100%;\r\n      }\r\n  \r\n      .download-btn {\r\n          background: var(--gradient-accent);\r\n          color: white;\r\n          box-shadow: var(--shadow-md);\r\n      }\r\n  \r\n      .download-btn:hover {\r\n          transform: translateY(-3px);\r\n          box-shadow: var(--shadow-lg);\r\n      }\r\n  \r\n      .download-btn:disabled {\r\n          opacity: 0.6;\r\n          cursor: not-allowed;\r\n          transform: none;\r\n      }\r\n  \r\n      .download-btn.downloading {\r\n          background: var(--gradient-secondary);\r\n      }\r\n  \r\n      .post-stats {\r\n          display: grid;\r\n          grid-template-columns: repeat(2, 1fr);\r\n          gap: 15px;\r\n          margin-top: auto;\r\n          padding-top: 20px;\r\n          border-top: 2px solid var(--bg-tertiary);\r\n      }\r\n  \r\n      .stat-item {\r\n          display: flex;\r\n          flex-direction: column;\r\n          align-items: center;\r\n          gap: 8px;\r\n          padding: 15px;\r\n          background: var(--bg-card);\r\n          border: 1px solid var(--glass-border);\r\n          border-radius: 15px;\r\n          text-align: center;\r\n          transition: all 0.3s ease;\r\n          position: relative;\r\n          overflow: hidden;\r\n      }\r\n  \r\n      .stat-item::before {\r\n          content: '';\r\n          position: absolute;\r\n          top: 0;\r\n          left: 0;\r\n          right: 0;\r\n          height: 3px;\r\n          background: var(--gradient-accent);\r\n      }\r\n  \r\n      .stat-item:hover {\r\n          transform: translateY(-3px);\r\n          box-shadow: var(--shadow-sm);\r\n      }\r\n  \r\n      .stat-value {\r\n          font-weight: 900;\r\n          font-size: 1.4rem;\r\n      }\r\n  \r\n      .stat-label {\r\n          font-size: 0.9rem;\r\n          color: var(--text-muted);\r\n          font-weight: 600;\r\n          text-transform: capitalize;\r\n      }\r\n  \r\n      .upvotes .stat-value { color: var(--primary-color); }\r\n      .comments .stat-value { color: var(--secondary-color); }\r\n  \r\n      .loading {\r\n          text-align: center;\r\n          padding: 60px;\r\n          color: var(--text-primary);\r\n          font-size: 1.3rem;\r\n          display: none;\r\n      }\r\n  \r\n      .spinner {\r\n          border: 4px solid var(--bg-tertiary);\r\n          border-top: 4px solid var(--primary-color);\r\n          border-radius: 50%;\r\n          width: 60px;\r\n          height: 60px;\r\n          animation: spin 1s linear infinite;\r\n          margin: 25px auto;\r\n      }\r\n  \r\n      .error-message {\r\n          background: rgba(252, 70, 107, 0.1);\r\n          border: 1px solid rgba(252, 70, 107, 0.2);\r\n          color: var(--danger-color);\r\n          padding: 25px;\r\n          border-radius: 20px;\r\n          text-align: center;\r\n          margin: 25px 0;\r\n          font-weight: 600;\r\n          display: none;\r\n      }\r\n  \r\n      .modal {\r\n          display: none;\r\n          position: fixed;\r\n          z-index: 1000;\r\n          left: 0;\r\n          top: 0;\r\n          width: 100%;\r\n          height: 100%;\r\n          background-color: rgba(0, 0, 0, 0.95);\r\n          animation: fadeIn 0.3s ease;\r\n      }\r\n  \r\n      .modal-content {\r\n          position: absolute;\r\n          top: 50%;\r\n          left: 50%;\r\n          transform: translate(-50%, -50%);\r\n          max-width: 90%;\r\n          max-height: 90%;\r\n      }\r\n  \r\n      .modal img {\r\n          width: 100%;\r\n          height: auto;\r\n          border-radius: 20px;\r\n      }\r\n  \r\n      .close {\r\n          position: absolute;\r\n          top: 20px;\r\n          right: 40px;\r\n          color: #f1f1f1;\r\n          font-size: 45px;\r\n          font-weight: bold;\r\n          cursor: pointer;\r\n          z-index: 1001;\r\n      }\r\n  \r\n      .close:hover {\r\n          color: var(--primary-color);\r\n      }\r\n  \r\n      .download-progress {\r\n          position: fixed;\r\n          bottom: 25px;\r\n          right: 25px;\r\n          background: var(--bg-secondary);\r\n          border: 1px solid var(--glass-border);\r\n          border-radius: 20px;\r\n          padding: 30px;\r\n          min-width: 380px;\r\n          box-shadow: var(--shadow-xl);\r\n          z-index: 1000;\r\n          display: none;\r\n          color: var(--text-primary);\r\n      }\r\n  \r\n      .download-progress.show {\r\n          display: block;\r\n          animation: slideInRight 0.4s ease-out;\r\n      }\r\n  \r\n      .progress-header {\r\n          display: flex;\r\n          justify-content: space-between;\r\n          align-items: center;\r\n          margin-bottom: 20px;\r\n      }\r\n  \r\n      .progress-text {\r\n          font-weight: 700;\r\n          font-size: 16px;\r\n          color: var(--text-primary);\r\n      }\r\n  \r\n      .cancel-btn {\r\n          background: rgba(252, 70, 107, 0.1);\r\n          border: 1px solid rgba(252, 70, 107, 0.2);\r\n          color: var(--danger-color);\r\n          padding: 10px 20px;\r\n          border-radius: 10px;\r\n          font-size: 13px;\r\n          cursor: pointer;\r\n          transition: all 0.3s ease;\r\n          font-weight: 600;\r\n      }\r\n  \r\n      .cancel-btn:hover {\r\n          background: rgba(252, 70, 107, 0.15);\r\n      }\r\n  \r\n      .progress-bar-container {\r\n          width: 100%;\r\n          height: 14px;\r\n          background: var(--bg-tertiary);\r\n          border-radius: 8px;\r\n          overflow: hidden;\r\n          margin-bottom: 15px;\r\n          box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);\r\n      }\r\n  \r\n      .progress-bar-fill {\r\n          height: 100%;\r\n          background: var(--gradient-primary);\r\n          border-radius: 8px;\r\n          width: 0%;\r\n          transition: width 0.3s ease;\r\n          box-shadow: 0 2px 8px rgba(138, 102, 255, 0.3);\r\n      }\r\n  \r\n      .progress-details {\r\n          display: flex;\r\n          justify-content: space-between;\r\n          font-size: 14px;\r\n          color: var(--text-secondary);\r\n          font-weight: 500;\r\n      }\r\n  \r\n      @keyframes float {\r\n          0%, 100% { transform: translateY(0px) scale(1); }\r\n          50% { transform: translateY(-10px) scale(1.02); }\r\n      }\r\n  \r\n      @keyframes shine {\r\n          0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }\r\n          100% { transform: translateX(100%) translateY(100%) rotate(45deg); }\r\n      }\r\n  \r\n      @keyframes slideInDown {\r\n          from { opacity: 0; transform: translateY(-30px); }\r\n          to { opacity: 1; transform: translateY(0); }\r\n      }\r\n  \r\n      @keyframes slideInUp {\r\n          from { opacity: 0; transform: translateY(30px); }\r\n          to { opacity: 1; transform: translateY(0); }\r\n      }\r\n  \r\n      @keyframes slideInRight {\r\n          from { opacity: 0; transform: translateX(100%); }\r\n          to { opacity: 1; transform: translateX(0); }\r\n      }\r\n  \r\n      @keyframes slideUp {\r\n          from {\r\n               opacity: 0;\r\n              transform: translateY(40px);\r\n          }\r\n          to {\r\n               opacity: 1;\r\n              transform: translateY(0);\r\n          }\r\n      }\r\n  \r\n      @keyframes spin {\r\n          0% { transform: rotate(0deg); }\r\n          100% { transform: rotate(360deg); }\r\n      }\r\n  \r\n      @keyframes pulse {\r\n          0%, 100% { transform: scale(1); }\r\n          50% { transform: scale(1.05); }\r\n      }\r\n  \r\n      @keyframes fadeIn {\r\n          from { opacity: 0; }\r\n          to { opacity: 1; }\r\n      }\r\n  \r\n      @media (max-width: 1200px) {\r\n          .posts-grid {\r\n              grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n          }\r\n  \r\n          .features-grid {\r\n              grid-template-columns: repeat(2, 1fr);\r\n          }\r\n      }\r\n  \r\n      @media (max-width: 768px) {\r\n          .features-grid {\r\n              grid-template-columns: 1fr;\r\n          }\r\n  \r\n          .user-stats {\r\n              grid-template-columns: repeat(2, 1fr);\r\n          }\r\n  \r\n          .post-stats {\r\n              grid-template-columns: 1fr;\r\n          }\r\n  \r\n          .media-controls {\r\n              flex-direction: column;\r\n          }\r\n  \r\n          .control-btn {\r\n              width: 100%;\r\n              justify-content: center;\r\n          }\r\n  \r\n          .search-form {\r\n              flex-direction: column;\r\n          }\r\n  \r\n          .posts-grid {\r\n              grid-template-columns: 1fr;\r\n          }\r\n      }\r\n  \r\n      @media (max-width: 480px) {\r\n          .user-stats {\r\n              grid-template-columns: 1fr;\r\n          }\r\n  \r\n          .rdiv-custom-container {\r\n              padding: 15px;\r\n          }\r\n  \r\n          .search-container,\r\n          .user-info,\r\n          .post-card {\r\n              padding: 25px;\r\n          }\r\n      }\r\n  <\/style>\r\n <body data-aos-easing=\"ease-in-out\" data-aos-duration=\"800\" data-aos-delay=\"0\" data-new-gr-c-s-check-loaded=\"14.1249.0\" data-gr-ext-installed=\"\" data-new-gr-c-s-loaded=\"14.1223.0\" class=\"\" style=\"\">\r\n  \r\n        <!-- hero section tools -->\r\n        <section class=\"rdiv-hero-tool-section\">\r\n           <div class=\"container\">\r\n              <div class=\"rdiv-custom-container\">\r\n                  <div class=\"header\">\r\n                      <div class=\"logo\">\r\n                          <div class=\"logo-icon\">\ud83d\uddbc\ufe0f<\/div>\r\n          \r\n                          <h1 class=\"logo-text\">Reddit Gallery <span class=\"va-accent\">V<\/span>iewer<\/h1>\r\n                      <\/div>\r\n                      <div class=\"subtitle\">Browse and view any Reddit image instantly without logging in. Our Reddit Image Viewer ensures secure, private, and anonymous access to all public Reddit images.<\/div>\r\n                      <div class=\"features-grid\">\r\n                          <div class=\"feature-card\">\r\n                              <div class=\"feature-icon\">\ud83c\udfa8<\/div>\r\n                              <div class=\"feature-title\">Gallery View<\/div>\r\n                          <\/div>\r\n                          <div class=\"feature-card\">\r\n                              <div class=\"feature-icon\">\ud83d\udce5<\/div>\r\n                              <div class=\"feature-title\">Bulk Download<\/div>\r\n                          <\/div>\r\n                          <div class=\"feature-card\">\r\n                              <div class=\"feature-icon\">\ud83d\udd0d<\/div>\r\n                              <div class=\"feature-title\">HD Preview<\/div>\r\n                          <\/div>\r\n                          <div class=\"feature-card\">\r\n                              <div class=\"feature-icon\">\u26a1<\/div>\r\n                              <div class=\"feature-title\">Fast Loading<\/div>\r\n                          <\/div>\r\n                      <\/div>\r\n                  <\/div>\r\n          \r\n                  <div class=\"search-container\">\r\n                      <form class=\"search-form\" id=\"searchForm\">\r\n                          <input type=\"text\" class=\"search-input\" id=\"usernameInput\" placeholder=\"Enter Reddit username to explore their images (e.g., shittymorph, earthporn, pics)\" required=\"\">\r\n                          <button type=\"submit\" class=\"search-btn\" id=\"searchBtn\">\r\n                              <span id=\"searchText\">\ud83d\udd0d Find Images<\/span>\r\n                              <div class=\"spinner\" id=\"searchSpinner\" style=\"display: none; width: 24px; height: 24px; margin: 0;\"><\/div>\r\n                          <\/button>\r\n                      <\/form>\r\n          \r\n                      <div class=\"loading\" id=\"loading\">\r\n                          <div class=\"spinner\"><\/div>\r\n                          <p>Fetching images using single API call...<\/p>\r\n                      <\/div>\r\n          \r\n                      <div class=\"error-message\" id=\"errorMessage\"><\/div>\r\n                  <\/div>\r\n          \r\n                  <div class=\"user-info\" id=\"userInfo\">\r\n                      <div class=\"user-header\">\r\n                          <div class=\"user-avatar\" id=\"userAvatar\">U<\/div>\r\n                          <div class=\"user-details\">\r\n                              <h2 id=\"userName\">Username<\/h2>\r\n                              <p class=\"user-description\" id=\"userDescription\">Reddit Image Collection<\/p>\r\n                          <\/div>\r\n                      <\/div>\r\n                      <div class=\"user-stats\" id=\"userStats\">\r\n                          <!-- Stats will be populated dynamically -->\r\n                      <\/div>\r\n                  <\/div>\r\n          \r\n                  <div class=\"posts-section\" id=\"postsSection\">\r\n                      <h2 class=\"section-title\" id=\"sectionTitle\">Image Gallery<\/h2>\r\n                      <div id=\"postsContainer\" class=\"posts-grid\"><\/div>\r\n                  <\/div>\r\n              <\/div>\r\n          \r\n              <!-- Modal for image preview -->\r\n              <div id=\"imageModal\" class=\"modal\">\r\n                  <span class=\"close\">\u00d7<\/span>\r\n                  <div class=\"modal-content\">\r\n                      <img decoding=\"async\" id=\"modalImage\" src=\"\/placeholder.svg\" alt=\"Full size image\">\r\n                  <\/div>\r\n              <\/div>\r\n          \r\n              <!-- Download Progress -->\r\n              <div class=\"download-progress\" id=\"downloadProgress\">\r\n                  <div class=\"progress-header\">\r\n                      <span class=\"progress-text\" id=\"progressText\">Downloading...<\/span>\r\n                      <button class=\"cancel-btn\" onclick=\"cancelDownload()\">Cancel<\/button>\r\n                  <\/div>\r\n                  <div class=\"progress-bar-container\">\r\n                      <div class=\"progress-bar-fill\" id=\"progressBarFill\"><\/div>\r\n                  <\/div>\r\n                  <div class=\"progress-details\">\r\n                      <span id=\"progressPercent\">0%<\/span>\r\n                      <span id=\"progressSize\">0 MB \/ 0 MB<\/span>\r\n                  <\/div>\r\n              <\/div>\r\n           <\/div>\r\n        <\/section>\r\n  \r\n  <!-- Work Process Section -->\r\n  <section class=\"rdiv-work-process-section\" id=\"how-it-works\">\r\n      <div class=\"container rdiv-work-process-content\">\r\n          <div class=\"text-center mb-5\" data-aos=\"fade-up\">\r\n              <h2 class=\"rdiv-section-title rdiv-light-title\">How Our Reddit Gallery Viewer Works<\/h2>\r\n              <p class=\"rdiv-section-subtitle rdiv-light-subtitle\">View Reddit gallery images anonymously with just 3 simple steps<\/p>\r\n          <\/div>\r\n          \r\n          <div class=\"row\">\r\n              <div class=\"col-md-4\" data-aos=\"fade-up\" data-aos-delay=\"50\">\r\n                  <div class=\"rdiv-process-step\">\r\n                      <div class=\"rdiv-step-number\">1<\/div>\r\n                      <h4 class=\"text-white\">Find Reddit Gallery<\/h4>\r\n                      <p class=\"rdiv-light-subtitle\">Copy the URL of any Reddit gallery post you want to view<\/p>\r\n                  <\/div>\r\n              <\/div>\r\n              \r\n              <div class=\"col-md-4\" data-aos=\"fade-up\" data-aos-delay=\"150\">\r\n                  <div class=\"rdiv-process-step\">\r\n                      <div class=\"rdiv-step-number\">2<\/div>\r\n                      <h4 class=\"text-white\">Paste Gallery URL<\/h4>\r\n                      <p class=\"rdiv-light-subtitle\">Paste the Reddit gallery URL into our viewer tool<\/p>\r\n                  <\/div>\r\n              <\/div>\r\n              \r\n              <div class=\"col-md-4\" data-aos=\"fade-up\" data-aos-delay=\"250\">\r\n                  <div class=\"rdiv-process-step\">\r\n                      <div class=\"rdiv-step-number\">3<\/div>\r\n                      <h4 class=\"text-white\">View Anonymously<\/h4>\r\n                      <p class=\"rdiv-light-subtitle\">See the gallery images without logging in or leaving traces<\/p>\r\n                  <\/div>\r\n              <\/div>\r\n          <\/div>\r\n      <\/div>\r\n  <\/section>\r\n  \r\n  <!-- Features Section -->\r\n  <section class=\"rdiv-features-section\">\r\n      <div class=\"container\">\r\n          <div class=\"text-center mb-5\" data-aos=\"fade-up\">\r\n              <h2 class=\"rdiv-section-title\">Key Features<\/h2>\r\n              <p class=\"rdiv-section-subtitle\">Our Reddit Gallery Viewer offers powerful features for anonymous gallery viewing<\/p>\r\n          <\/div>\r\n          \r\n          <div class=\"row\">\r\n              <div class=\"col-lg-4 mb-4\" data-aos=\"fade-up\" data-aos-delay=\"50\">\r\n                  <div class=\"rdiv-feature-card\">\r\n                      <div class=\"rdiv-feature-icon\">\r\n                          <i class=\"bx bx-image\"><\/i>\r\n                      <\/div>\r\n                      <h4>Complete Anonymity<\/h4>\r\n                      <p>View Reddit gallery images without revealing your identity or account<\/p>\r\n                  <\/div>\r\n              <\/div>\r\n              \r\n              <div class=\"col-lg-4 mb-4\" data-aos=\"fade-up\" data-aos-delay=\"150\">\r\n                  <div class=\"rdiv-feature-card\">\r\n                      <div class=\"rdiv-feature-icon\">\r\n                          <i class=\"bx bx-shield\"><\/i>\r\n                      <\/div>\r\n                      <h4>No Tracking<\/h4>\r\n                      <p>Reddit won't track your gallery views or recommend similar content<\/p>\r\n                  <\/div>\r\n              <\/div>\r\n              \r\n              <div class=\"col-lg-4 mb-4\" data-aos=\"fade-up\" data-aos-delay=\"250\">\r\n                  <div class=\"rdiv-feature-card\">\r\n                      <div class=\"rdiv-feature-icon\">\r\n                          <i class=\"bx bx-download\"><\/i>\r\n                      <\/div>\r\n                      <h4>Download Option<\/h4>\r\n                      <p>Save gallery images directly to your device without additional software<\/p>\r\n                  <\/div>\r\n              <\/div>\r\n              \r\n              <div class=\"col-lg-4 mb-5\" data-aos=\"fade-up\" data-aos-delay=\"50\">\r\n                  <div class=\"rdiv-feature-card\">\r\n                      <div class=\"rdiv-feature-icon\">\r\n                          <i class=\"bx bx-zoom-in\"><\/i>\r\n                      <\/div>\r\n                      <h4>High Resolution<\/h4>\r\n                      <p>View gallery images in full resolution with zoom capabilities<\/p>\r\n                  <\/div>\r\n              <\/div>\r\n              \r\n              <div class=\"col-lg-4 mb-5\" data-aos=\"fade-up\" data-aos-delay=\"150\">\r\n                  <div class=\"rdiv-feature-card\">\r\n                      <div class=\"rdiv-feature-icon\">\r\n                          <i class=\"bx bx-time\"><\/i>\r\n                      <\/div>\r\n                      <h4>No History<\/h4>\r\n                      <p>Your viewing activity isn't stored in your browser history<\/p>\r\n                  <\/div>\r\n              <\/div>\r\n              \r\n              <div class=\"col-lg-4 mb-5\" data-aos=\"fade-up\" data-aos-delay=\"250\">\r\n                  <div class=\"rdiv-feature-card\">\r\n                      <div class=\"rdiv-feature-icon\">\r\n                          <i class=\"bx bx-devices\"><\/i>\r\n                      <\/div>\r\n                      <h4>Cross-Platform<\/h4>\r\n                      <p>Works on all devices - desktop, tablet and mobile<\/p>\r\n                  <\/div>\r\n              <\/div>\r\n          <\/div>\r\n      <\/div>\r\n  <\/section>\r\n  \r\n  <!-- Why Choose Section -->\r\n  <section class=\"rdiv-why-choose-section\">\r\n      <div class=\"container\">\r\n          <div class=\"row align-items-center\">\r\n              <div class=\"col-lg-6 mb-5 mb-lg-0\" data-aos=\"fade-right\">\r\n                  <div class=\"rdiv-why-choose-image rdiv-floating-element\">\r\n                      <img decoding=\"async\" src=\"https:\/\/viewanonymous.com\/wp-content\/uploads\/2026\/03\/Reddit_Gallery_Viewer.webp\" alt=\"Instagram story viewer\" class=\"img-fluid rounded-3\">\r\n                  <\/div>\r\n              <\/div>\r\n              <div class=\"col-lg-6\" data-aos=\"fade-left\">\r\n                  <h2 class=\"rdiv-section-title mb-4\">Why Choose Our Reddit Gallery Viewer?<\/h2>\r\n                  <p class=\"mb-4\">Our tool provides the most private way to view Reddit gallery images without leaving any trace. Whether you're exploring content, avoiding tracking, or valuing your privacy, we make anonymous gallery viewing simple and efficient.<\/p>\r\n                  \r\n                  <div class=\"rdiv-benefit-item\">\r\n                      <div class=\"rdiv-benefit-icon\">\r\n                          <i class=\"bx bx-check\"><\/i>\r\n                      <\/div>\r\n                      <div>\r\n                          <h5 class=\"mb-1\">No account needed<\/h5>\r\n                          <p class=\"mb-0\">View gallery images without logging in or having a Reddit account<\/p>\r\n                      <\/div>\r\n                  <\/div>\r\n                  \r\n                  <div class=\"rdiv-benefit-item\">\r\n                      <div class=\"rdiv-benefit-icon\">\r\n                          <i class=\"bx bx-check\"><\/i>\r\n                      <\/div>\r\n                      <div>\r\n                          <h5 class=\"mb-1\">Bypass restrictions<\/h5>\r\n                          <p class=\"mb-0\">View gallery images even if they're age-restricted or NSFW<\/p>\r\n                      <\/div>\r\n                  <\/div>\r\n                  \r\n                  <div class=\"rdiv-benefit-item\">\r\n                      <div class=\"rdiv-benefit-icon\">\r\n                          <i class=\"bx bx-check\"><\/i>\r\n                      <\/div>\r\n                      <div>\r\n                          <h5 class=\"mb-1\">Fast loading<\/h5>\r\n                          <p class=\"mb-0\">Gallery images load quickly with our optimized delivery<\/p>\r\n                      <\/div>\r\n                  <\/div>\r\n                  \r\n                  <div class=\"rdiv-benefit-item\">\r\n                      <div class=\"rdiv-benefit-icon\">\r\n                          <i class=\"bx bx-check\"><\/i>\r\n                      <\/div>\r\n                      <div>\r\n                          <h5 class=\"mb-1\">Privacy focused<\/h5>\r\n                          <p class=\"mb-0\">No cookies, no tracking, no history stored<\/p>\r\n                      <\/div>\r\n                  <\/div>\r\n              <\/div>\r\n          <\/div>\r\n      <\/div>\r\n  <\/section>\r\n  \r\n  <!-- FAQ Section -->\r\n  <section class=\"rdiv-faq-section\">\r\n      <div class=\"container\">\r\n          <div class=\"text-center mb-5\" data-aos=\"fade-up\">\r\n              <h2 class=\"rdiv-section-title\">Frequently Asked Questions<\/h2>\r\n              <p class=\"rdiv-section-subtitle\">Find answers to common questions about our Reddit Gallery Viewer<\/p>\r\n          <\/div>\r\n          \r\n          <div class=\"row justify-content-center\">\r\n              <div class=\"col-lg-8\">\r\n                  <div class=\"accordion\" id=\"rdiv-faqAccordion\">\r\n                      <div class=\"rdiv-accordion-item mb-3\" data-aos=\"fade-up\" data-aos-delay=\"50\">\r\n                          <h3 class=\"accordion-header\" id=\"rdiv-heading1\">\r\n                              <button class=\"rdiv-accordion-button\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#rdiv-collapse1\" aria-expanded=\"true\" aria-controls=\"rdiv-collapse1\">\r\n                                  Is viewing Reddit gallery images anonymously legal?\r\n                              <\/button>\r\n                          <\/h3>\r\n                          <div id=\"rdiv-collapse1\" class=\"accordion-collapse collapse show\" aria-labelledby=\"rdiv-heading1\" data-bs-parent=\"#rdiv-faqAccordion\">\r\n                              <div class=\"rdiv-accordion-body\">\r\n                                  Yes, our tool is completely legal to use. It only allows you to view publicly available Reddit gallery images through our private viewer. We don't access private content or bypass any security measures.\r\n                              <\/div>\r\n                          <\/div>\r\n                      <\/div>\r\n                      \r\n                      <div class=\"rdiv-accordion-item mb-3\" data-aos=\"fade-up\" data-aos-delay=\"100\">\r\n                          <h3 class=\"accordion-header\" id=\"rdiv-heading2\">\r\n                              <button class=\"rdiv-accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#rdiv-collapse2\" aria-expanded=\"false\" aria-controls=\"rdiv-collapse2\">\r\n                                  Can I view private or deleted gallery images?\r\n                              <\/button>\r\n                          <\/h3>\r\n                          <div id=\"rdiv-collapse2\" class=\"accordion-collapse collapse\" aria-labelledby=\"rdiv-heading2\" data-bs-parent=\"#rdiv-faqAccordion\">\r\n                              <div class=\"rdiv-accordion-body\">\r\n                                  Our tool respects Reddit's privacy settings. We can only show gallery images that are set to public. For private or deleted galleries, the content won't be available.\r\n                              <\/div>\r\n                          <\/div>\r\n                      <\/div>\r\n                      \r\n                      <div class=\"rdiv-accordion-item mb-3\" data-aos=\"fade-up\" data-aos-delay=\"150\">\r\n                          <h3 class=\"accordion-header\" id=\"rdiv-heading3\">\r\n                              <button class=\"rdiv-accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#rdiv-collapse3\" aria-expanded=\"false\" aria-controls=\"rdiv-collapse3\">\r\n                                  Will Reddit know I viewed the gallery?\r\n                              <\/button>\r\n                          <\/h3>\r\n                          <div id=\"rdiv-collapse3\" class=\"accordion-collapse collapse\" aria-labelledby=\"rdiv-heading3\" data-bs-parent=\"#rdiv-faqAccordion\">\r\n                              <div class=\"rdiv-accordion-body\">\r\n                                  No, when you view through our anonymous viewer, your view won't be counted in Reddit's statistics and the platform won't know you viewed the gallery images.\r\n                              <\/div>\r\n                          <\/div>\r\n                      <\/div>\r\n                      \r\n                      <div class=\"rdiv-accordion-item mb-3\" data-aos=\"fade-up\" data-aos-delay=\"200\">\r\n                          <h3 class=\"accordion-header\" id=\"rdiv-heading4\">\r\n                              <button class=\"rdiv-accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#rdiv-collapse4\" aria-expanded=\"false\" aria-controls=\"rdiv-collapse4\">\r\n                                  Do I need to install any software?\r\n                              <\/button>\r\n                          <\/h3>\r\n                          <div id=\"rdiv-collapse4\" class=\"accordion-collapse collapse\" aria-labelledby=\"rdiv-heading4\" data-bs-parent=\"#rdiv-faqAccordion\">\r\n                              <div class=\"rdiv-accordion-body\">\r\n                                  No, our Reddit Gallery Viewer is completely web-based. You don't need to download or install any software. Simply visit our website, paste the gallery URL, and view anonymously.\r\n                              <\/div>\r\n                          <\/div>\r\n                      <\/div>\r\n                      \r\n                      <div class=\"rdiv-accordion-item mb-3\" data-aos=\"fade-up\" data-aos-delay=\"250\">\r\n                          <h3 class=\"accordion-header\" id=\"rdiv-heading5\">\r\n                              <button class=\"rdiv-accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#rdiv-collapse5\" aria-expanded=\"false\" aria-controls=\"rdiv-collapse5\">\r\n                                  Can I download gallery images with your tool?\r\n                              <\/button>\r\n                          <\/h3>\r\n                          <div id=\"rdiv-collapse5\" class=\"accordion-collapse collapse\" aria-labelledby=\"rdiv-heading5\" data-bs-parent=\"#rdiv-faqAccordion\">\r\n                              <div class=\"rdiv-accordion-body\">\r\n                                  Yes, our tool includes a download option that allows you to save Reddit gallery images directly to your device in their original quality.\r\n                              <\/div>\r\n                          <\/div>\r\n                      <\/div>\r\n                  <\/div>\r\n              <\/div>\r\n          <\/div>\r\n      <\/div>\r\n  <\/section>\r\n    \r\n    <!-- Footer -->\r\n    \r\n  \r\n  <!-- Copyright Section -->\r\n  \r\n  \r\n  \r\n  \r\n   <!-- Reddit Image Viewer js -->\r\n    <script src=\"https:\/\/tools.xrespond.com\/api\/rate-limit-handler.js\"><\/script>\r\n    <script src=\"https:\/\/tools.xrespond.com\/api\/js\/client-ip-detector.js\"><\/script>\r\n   <script>\r\n      class RedditImageViewer {\r\n          constructor() {\r\n              this.currentUser = null;\r\n              this.posts = [];\r\n              this.downloadController = null;\r\n              this.init();\r\n          }\r\n  \r\n          init() {\r\n              this.bindEvents();\r\n              this.setupModal();\r\n          }\r\n  \r\n          bindEvents() {\r\n              const searchForm = document.getElementById('searchForm');\r\n              const usernameInput = document.getElementById('usernameInput');\r\n  \r\n              searchForm.addEventListener('submit', (e) => {\r\n                  e.preventDefault();\r\n                  const rawInput = usernameInput.value.trim();\r\n                  const username = this.extractRedditUsername(rawInput);\r\n                  if (username) {\r\n                      this.searchUser(username);\r\n                  } else {\r\n                      this.showError('Please enter a valid Reddit username');\r\n                  }\r\n              });\r\n  \r\n              usernameInput.addEventListener('keypress', (e) => {\r\n                  if (e.key === 'Enter') {\r\n                      e.preventDefault();\r\n                      searchForm.dispatchEvent(new Event('submit'));\r\n                  }\r\n              });\r\n          }\r\n  \r\n          async searchUser(username) {\r\n              this.showLoading(true);\r\n              this.clearError();\r\n  \r\n              try {\r\n                  console.log(`Searching for user: ${username}`);\r\n                  const posts = await this.fetchUserPosts(username);\r\n  \r\n                  \/\/ Filter only image posts\r\n                  const imagePosts = posts.filter(post => this.hasImage(post));\r\n  \r\n                  if (imagePosts && imagePosts.length > 0) {\r\n                      this.currentUser = username;\r\n                      this.posts = imagePosts;\r\n                      this.displayUserInfo(username, imagePosts);\r\n                      this.displayPosts(imagePosts);\r\n                      this.showPostsSection(true);\r\n                      console.log(`Found ${imagePosts.length} image posts for ${username}`);\r\n                  } else {\r\n                      this.showError(`No image posts found for user \"${username}\". Try a different username.`);\r\n                      this.showPostsSection(false);\r\n                  }\r\n              } catch (error) {\r\n                  console.error('Error fetching posts:', error);\r\n                  this.showError(`Failed to fetch images for \"${username}\". Please try again.`);\r\n                  this.showPostsSection(false);\r\n              } finally {\r\n                  this.showLoading(false);\r\n              }\r\n          }\r\n  \r\n          hasImage(post) {\r\n              const hasPreviewImage = post.preview && post.preview.images && post.preview.images.length > 0;\r\n              const isGallery = post.is_gallery && post.media_metadata;\r\n              return hasPreviewImage || isGallery;\r\n          }\r\n  \r\n          async fetchUserPosts(username) {\r\n              try {\r\n                  console.log('Fetching posts from API...');\r\n                  const response = await fetch('https:\/\/tools.xrespond.com\/api\/reddit\/posts', {\r\n                      method: 'POST',\r\n                      headers: {\r\n                          'Content-Type': 'application\/x-www-form-urlencoded',\r\n                      },\r\n                      body: `username=${encodeURIComponent(username)}`\r\n                  });\r\n  \r\n                  if (!response.ok) {\r\n                      throw new Error(`API request failed: ${response.status} ${response.statusText}`);\r\n                  }\r\n  \r\n                  const data = await response.json();\r\n                  console.log('API Response:', data);\r\n  \r\n                  if (data.status === 'success' && data.data && data.data.body && Array.isArray(data.data.body)) {\r\n                      console.log(`Success! Found ${data.data.body.length} posts`);\r\n                      return data.data.body;\r\n                  } else {\r\n                      throw new Error('Invalid API response format or no posts found');\r\n                  }\r\n              } catch (error) {\r\n                  console.error('Fetch error:', error);\r\n                  throw error;\r\n              }\r\n          }\r\n  \r\n          displayUserInfo(username, posts) {\r\n              const userInfo = document.getElementById('userInfo');\r\n              const userAvatar = document.getElementById('userAvatar');\r\n              const userName = document.getElementById('userName');\r\n              const userDescription = document.getElementById('userDescription');\r\n              const userStats = document.getElementById('userStats');\r\n  \r\n              userAvatar.textContent = username.charAt(0).toUpperCase();\r\n              userName.textContent = `u\/${username}`;\r\n              userDescription.textContent = `Image Collection \u2022 ${posts.length} images found`;\r\n  \r\n              \/\/ Calculate image-specific stats\r\n              const totalUpvotes = posts.reduce((sum, post) => sum + (post.ups || 0), 0);\r\n              const totalComments = posts.reduce((sum, post) => sum + (post.num_comments || 0), 0);\r\n              const galleryPosts = posts.filter(post => post.is_gallery).length;\r\n              const singleImages = posts.length - galleryPosts;\r\n  \r\n              userStats.innerHTML = `\r\n                  <div class=\"stat-card\">\r\n                      <div class=\"stat-number\">${this.formatNumber(totalUpvotes)}<\/div>\r\n                      <div class=\"stat-label\">Total Upvotes<\/div>\r\n                  <\/div>\r\n                  <div class=\"stat-card\">\r\n                      <div class=\"stat-number\">${singleImages}<\/div>\r\n                      <div class=\"stat-label\">Single Images<\/div>\r\n                  <\/div>\r\n                  <div class=\"stat-card\">\r\n                      <div class=\"stat-number\">${galleryPosts}<\/div>\r\n                      <div class=\"stat-label\">Gallery Posts<\/div>\r\n                  <\/div>\r\n                  <div class=\"stat-card\">\r\n                      <div class=\"stat-number\">${this.formatNumber(totalComments)}<\/div>\r\n                      <div class=\"stat-label\">Total Comments<\/div>\r\n                  <\/div>\r\n              `;\r\n  \r\n              userInfo.style.display = 'block';\r\n          }\r\n  \r\n          displayPosts(posts) {\r\n              const container = document.getElementById('postsContainer');\r\n              const sectionTitle = document.getElementById('sectionTitle');\r\n  \r\n              sectionTitle.textContent = `${posts.length} Images from u\/${this.currentUser}`;\r\n              container.innerHTML = '';\r\n  \r\n              posts.forEach((post, index) => {\r\n                  const postCard = this.createPostCard(post);\r\n                  postCard.style.animationDelay = `${index * 0.1}s`;\r\n                  container.appendChild(postCard);\r\n              });\r\n          }\r\n  \r\n          createPostCard(post) {\r\n              const card = document.createElement('div');\r\n              card.className = 'post-card';\r\n  \r\n              const hasImage = post.preview && post.preview.images && post.preview.images.length > 0;\r\n              const isGallery = post.is_gallery && post.media_metadata;\r\n  \r\n              let mediaContent = '';\r\n              let postType = 'Image';\r\n  \r\n              if (isGallery) {\r\n                  postType = 'Gallery';\r\n                  const images = [];\r\n                  if (post.gallery_data && post.gallery_data.items) {\r\n                      post.gallery_data.items.forEach(item => {\r\n                          const mediaId = item.media_id;\r\n                          if (post.media_metadata[mediaId]) {\r\n                              const imageData = post.media_metadata[mediaId];\r\n                              if (imageData.s && imageData.s.u) {\r\n                                  images.push(imageData.s.u.replace(\/&\/g, '&'));\r\n                              }\r\n                          }\r\n                      });\r\n                  }\r\n  \r\n                  if (images.length > 0) {\r\n                      mediaContent = `\r\n                          <div class=\"media-container\">\r\n                              <div class=\"gallery-container\">\r\n                                  ${images.map((imageUrl, idx) => `\r\n                                      <img decoding=\"async\" src=\"${imageUrl}\" alt=\"Gallery image ${idx + 1}\" class=\"gallery-image\" onclick=\"redditImageViewer.openImageModal('${imageUrl}')\">\r\n                                  `).join('')}\r\n                              <\/div>\r\n                              <div class=\"media-controls\">\r\n                                  ${images.map((imageUrl, idx) => `\r\n                                      <button class=\"control-btn download-btn\" onclick=\"redditImageViewer.downloadImageBase64WithButtonSpinner(event, this, '${imageUrl}', '${this.sanitizeFilename(post.title)}_${idx + 1}.jpg')\">\r\n                                          <span class=\"btn-text\">\ud83d\udce5 Download Image ${idx + 1}<\/span>\r\n                                          <span class=\"btn-spinner\" style=\"display:none; margin-left:8px;\">\r\n                                              <span class=\"spinner\" style=\"width:18px;height:18px;border:3px solid #eee;border-top:3px solid #8A66FF;border-radius:50%;display:inline-block;vertical-align:middle;animation:spin 1s linear infinite;\"><\/span>\r\n                                          <\/span>\r\n                                      <\/button>\r\n                                  `).join('')}\r\n                              <\/div>\r\n                          <\/div>\r\n                      `;\r\n                  }\r\n              } else if (hasImage) {\r\n                  const image = post.preview.images[0];\r\n                  const imageUrl = image.source.url.replace(\/&\/g, '&');\r\n                  mediaContent = `\r\n                      <div class=\"media-container\">\r\n                          <img decoding=\"async\" src=\"${imageUrl}\" alt=\"${post.title}\" class=\"image-preview\" onclick=\"redditImageViewer.openImageModal('${imageUrl}')\">\r\n                          <div class=\"media-controls\">\r\n                              <button class=\"control-btn download-btn\" onclick=\"redditImageViewer.downloadImageBase64WithButtonSpinner(event, this, '${imageUrl}', '${this.sanitizeFilename(post.title)}.jpg')\">\r\n                                  <span class=\"btn-text\">\ud83d\udce5 Download Image<\/span>\r\n                                  <span class=\"btn-spinner\" style=\"display:none; margin-left:8px;\">\r\n                                      <span class=\"spinner\" style=\"width:18px;height:18px;border:3px solid #eee;border-top:3px solid #8A66FF;border-radius:50%;display:inline-block;vertical-align:middle;animation:spin 1s linear infinite;\"><\/span>\r\n                                  <\/span>\r\n                              <\/button>\r\n                          <\/div>\r\n                      <\/div>\r\n                  `;\r\n              }\r\n  \r\n              card.innerHTML = `\r\n                  <div class=\"post-header\">\r\n                      <div class=\"subreddit-info\">\r\n                          <div class=\"subreddit-badge\">${post.subreddit_name_prefixed || 'r\/unknown'}<\/div>\r\n                          <div class=\"post-type\">${postType}<\/div>\r\n                      <\/div>\r\n                      <div class=\"post-meta\">\r\n                          ${this.formatDate(post.created_utc)}\r\n                      <\/div>\r\n                  <\/div>\r\n  \r\n                  <h2 class=\"post-title\">${post.title || 'Untitled Image'}<\/h2>\r\n  \r\n                  <div class=\"post-content\">\r\n                      ${mediaContent}\r\n                  <\/div>\r\n  \r\n                  <div class=\"post-stats\">\r\n                      <div class=\"stat-item upvotes\">\r\n                          <div class=\"stat-value\">${this.formatNumber(post.ups || 0)}<\/div>\r\n                          <div class=\"stat-label\">Upvotes<\/div>\r\n                      <\/div>\r\n                      <div class=\"stat-item comments\">\r\n                          <div class=\"stat-value\">${this.formatNumber(post.num_comments || 0)}<\/div>\r\n                          <div class=\"stat-label\">Comments<\/div>\r\n                      <\/div>\r\n                  <\/div>\r\n              `;\r\n  \r\n              return card;\r\n          }\r\n  \r\n          async downloadImageBase64WithButtonSpinner(event, btn, imageUrl, filename) {\r\n              event.preventDefault();\r\n              const textSpan = btn.querySelector('.btn-text');\r\n              const spinnerSpan = btn.querySelector('.btn-spinner');\r\n              btn.disabled = true;\r\n              textSpan.style.display = 'none';\r\n              spinnerSpan.style.display = 'inline-block';\r\n              try {\r\n                  const proxyUrl = `https:\/\/tools.xrespond.com\/api\/reddit\/proxy-media-base64?url=${encodeURIComponent(imageUrl)}`;\r\n                  const response = await fetch(proxyUrl);\r\n                  if (!response.ok) throw new Error('Failed to fetch image');\r\n                  const data = await response.json();\r\n                  const base64data = `data:${data.contentType};base64,${data.base64}`;\r\n                  const a = document.createElement('a');\r\n                  a.href = base64data;\r\n                  a.download = filename;\r\n                  document.body.appendChild(a);\r\n                  a.click();\r\n                  document.body.removeChild(a);\r\n                  await new Promise(res => setTimeout(res, 1200)); \/\/ Show spinner briefly\r\n              } catch (error) {\r\n                  this.showError('Could not download image. Please try again later.');\r\n              } finally {\r\n                  btn.disabled = false;\r\n                  textSpan.style.display = '';\r\n                  spinnerSpan.style.display = 'none';\r\n              }\r\n          }\r\n  \r\n          showDownloadProgress(text, progress = 0, downloaded = 0, total = 0) {\r\n              const progressDiv = document.getElementById('downloadProgress');\r\n              const progressText = document.getElementById('progressText');\r\n              const progressFill = document.getElementById('progressBarFill');\r\n              const progressPercent = document.getElementById('progressPercent');\r\n              const progressSize = document.getElementById('progressSize');\r\n  \r\n              progressText.textContent = text;\r\n              progressFill.style.width = `${progress}%`;\r\n              progressPercent.textContent = `${Math.round(progress)}%`;\r\n              progressSize.textContent = `${this.formatFileSize(downloaded)} \/ ${this.formatFileSize(total)}`;\r\n  \r\n              progressDiv.classList.add('show');\r\n          }\r\n  \r\n          hideDownloadProgress() {\r\n              document.getElementById('downloadProgress').classList.remove('show');\r\n          }\r\n  \r\n          cancelDownload() {\r\n              if (this.downloadController) {\r\n                  this.downloadController.abort();\r\n                  this.downloadController = null;\r\n              }\r\n          }\r\n  \r\n          formatFileSize(bytes) {\r\n              if (bytes === 0) return '0 Bytes';\r\n              const k = 1024;\r\n              const sizes = ['Bytes', 'KB', 'MB', 'GB'];\r\n              const i = Math.floor(Math.log(bytes) \/ Math.log(k));\r\n              return parseFloat((bytes \/ Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];\r\n          }\r\n  \r\n          setupModal() {\r\n              const modal = document.getElementById('imageModal');\r\n              const closeBtn = document.querySelector('.close');\r\n  \r\n              closeBtn.onclick = () => {\r\n                  modal.style.display = 'none';\r\n              }\r\n  \r\n              window.onclick = (event) => {\r\n                  if (event.target === modal) {\r\n                      modal.style.display = 'none';\r\n                  }\r\n              }\r\n          }\r\n  \r\n          openImageModal(imageUrl) {\r\n              const modal = document.getElementById('imageModal');\r\n              const modalImg = document.getElementById('modalImage');\r\n              modal.style.display = 'block';\r\n              modalImg.src = imageUrl;\r\n          }\r\n  \r\n          showLoading(show) {\r\n              const searchBtn = document.getElementById('searchBtn');\r\n              const searchText = document.getElementById('searchText');\r\n              const searchSpinner = document.getElementById('searchSpinner');\r\n              const loading = document.getElementById('loading');\r\n  \r\n              if (show) {\r\n                  searchBtn.disabled = true;\r\n                  searchText.style.display = 'none';\r\n                  searchSpinner.style.display = 'block';\r\n                  loading.style.display = 'block';\r\n              } else {\r\n                  searchBtn.disabled = false;\r\n                  searchText.style.display = 'block';\r\n                  searchSpinner.style.display = 'none';\r\n                  loading.style.display = 'none';\r\n              }\r\n          }\r\n  \r\n          showPostsSection(show) {\r\n              const postsSection = document.getElementById('postsSection');\r\n              postsSection.style.display = show ? 'block' : 'none';\r\n          }\r\n  \r\n          showError(message) {\r\n              const errorContainer = document.getElementById('errorMessage');\r\n              errorContainer.textContent = message;\r\n              errorContainer.style.display = 'block';\r\n              setTimeout(() => {\r\n                  errorContainer.style.display = 'none';\r\n              }, 8000);\r\n          }\r\n  \r\n          clearError() {\r\n              document.getElementById('errorMessage').style.display = 'none';\r\n          }\r\n  \r\n          formatNumber(num) {\r\n              if (num >= 1000000) {\r\n                  return (num \/ 1000000).toFixed(1) + 'M';\r\n              } else if (num >= 1000) {\r\n                  return (num \/ 1000).toFixed(1) + 'K';\r\n              }\r\n              return num.toString();\r\n          }\r\n  \r\n          formatDate(timestamp) {\r\n              return new Date(timestamp * 1000).toLocaleDateString('en-US', {\r\n                  year: 'numeric',\r\n                  month: 'short',\r\n                  day: 'numeric'\r\n              });\r\n          }\r\n  \r\n          sanitizeFilename(filename) {\r\n              return filename.replace(\/[^a-z0-9]\/gi, '_').toLowerCase();\r\n          }\r\n  \r\n          extractRedditUsername(input) {\r\n              if (!input) return null;\r\n              input = input.trim();\r\n  \r\n              const urlMatch = input.match(\/reddit\\.com\\\/user\\\/([A-Za-z0-9_\\-\\.]+)\/i);\r\n              if (urlMatch) return urlMatch[1];\r\n  \r\n              const uMatch = input.match(\/^u\\\/(\\w[\\w\\-_.]*)$\/i);\r\n              if (uMatch) return uMatch[1];\r\n  \r\n              const plainMatch = input.match(\/^([A-Za-z0-9_\\-\\.]+)$\/);\r\n              if (plainMatch) return plainMatch[1];\r\n  \r\n              return null;\r\n          }\r\n      }\r\n  \r\n      function cancelDownload() {\r\n          redditImageViewer.cancelDownload();\r\n      }\r\n  \r\n      const redditImageViewer = new RedditImageViewer();\r\n  <\/script>\r\n    \r\n    <!-- Scripts -->\r\n      <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/js\/bootstrap.bundle.min.js\"><\/script>\r\n      <script src=\"https:\/\/unpkg.com\/aos@2.3.1\/dist\/aos.js\"><\/script>\r\n  \r\n    <!-- Vvveb Common Js -->\r\n    <script id=\"popper-js\" src=\"..\/js\/popper.min.js\"><\/script>\r\n  \r\n    <!-- Vvveb Ajax Common Js -->\r\n    <script id=\"app-js\" src=\"..\/js\/app.js\"><\/script>\r\n  \r\n    <!-- Animation -->\r\n  \r\n    <link rel=\"stylesheet\" href=\"..\/js\/aos.css\">\r\n    <noscript>\r\n      <style type=\"text\/css\">\r\n        [data-aos] {\r\n          opacity: 1 !important;\r\n          transform: translate(0) scale(1) !important;\r\n        }\r\n      <\/style>\r\n    <\/noscript>\r\n  \r\n    <script src=\"..\/js\/aos.js\"><\/script>\r\n    <script src=\"..\/js\/theme.js\"><\/script>\r\n  \r\n    <script>\r\n             \/\/ Initialize AOS animation\r\n          AOS.init({\r\n              duration: 800,\r\n              easing: 'ease-in-out',\r\n              once: true\r\n          });\r\n          \r\n          \/\/ Smooth scrolling for anchor links\r\n          document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\r\n              anchor.addEventListener('click', function (e) {\r\n                  e.preventDefault();\r\n                  document.querySelector(this.getAttribute('href')).scrollIntoView({\r\n                      behavior: 'smooth'\r\n                  });\r\n              });\r\n          });\r\n  <\/script>\r\n  \r\n  <grammarly-desktop-integration data-grammarly-shadow-root=\"true\"><\/grammarly-desktop-integration><grammarly-desktop-integration data-grammarly-shadow-root=\"true\"><\/grammarly-desktop-integration>\r\n  <grammarly-desktop-integration data-grammarly-shadow-root=\"true\"><\/grammarly-desktop-integration><script defer=\"\" src=\"https:\/\/static.cloudflareinsights.com\/beacon.min.js\/vcd15cbe7772f49c399c6a5babf22c1241717689176015\" integrity=\"sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==\" data-cf-beacon=\"{\"version\":\"2024.11.0\",\"token\":\"786b797d7952407aac48ed2776a3a826\",\"r\":1,\"server_timing\":{\"name\":{\"cfCacheStatus\":true,\"cfEdge\":true,\"cfExtPri\":true,\"cfL4\":true,\"cfOrigin\":true,\"cfSpeedBrain\":true},\"location_startswith\":null}}\" crossorigin=\"anonymous\"><\/script>\r\n  <script defer=\"\" src=\"https:\/\/static.cloudflareinsights.com\/beacon.min.js\/v8c78df7c7c0f484497ecbca7046644da1771523124516\" integrity=\"sha512-8DS7rgIrAmghBFwoOTujcf6D9rXvH8xm8JQ1Ja01h9QX8EzXldiszufYa4IFfKdLUKTTrnSFXLDkUEOTrZQ8Qg==\" data-cf-beacon=\"{\"version\":\"2024.11.0\",\"token\":\"786b797d7952407aac48ed2776a3a826\",\"r\":1,\"server_timing\":{\"name\":{\"cfCacheStatus\":true,\"cfEdge\":true,\"cfExtPri\":true,\"cfL4\":true,\"cfOrigin\":true,\"cfSpeedBrain\":true},\"location_startswith\":null}}\" crossorigin=\"anonymous\"><\/script>\r\n [\/et_pb_fullwidth_code][\/et_pb_section]\n","protected":false},"excerpt":{"rendered":"    <link rel=\"canonical\" href=\"\">\r\n  \r\n      <!-- Favicon -->\r\n      <link rel=\"icon\" href=\"https:\/\/americansviewer.com\/media\/1769663809_wSx1bgRoc2_av-favicon.png\" type=\"image\/x-icon\">\r\n      \r\n      <!-- Google Fonts - Premium Typography -->\r\n      <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n      <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin=\"\">\r\n      <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@300;400;500;600;700&family=Manrope:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n      \r\n      <!-- Bootstrap CSS -->\r\n      <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\r\n      <!-- Boxicons -->\r\n      <link href=\"https:\/\/unpkg.com\/boxicons@2.1.4\/css\/boxicons.min.css\" rel=\"stylesheet\">\r\n      <!-- AOS Animation -->\r\n      <link href=\"https:\/\/unpkg.com\/aos@2.3.1\/dist\/aos.css\" rel=\"stylesheet\">\r\n      \r\n  \r\n  \r\n  <style id=\"vvvebjs-styles\">\r\n      html{\r\n          overflow-x: hidden;\r\n      }\r\n  \r\n      :root {\r\n              --rdiv-primary-color: #8A66FF;\r\n              --rdiv-secondary-color: #6A4FE0;\r\n              --rdiv-dark-color: #000000;\r\n              --rdiv-light-color: #FFFFFF;\r\n              --rdiv-gray-color: #F5F3FF;\r\n              --rdiv-muted-on-light: #555555;\r\n              --rdiv-primary-hover: #7758F0;\r\n              --rdiv-secondary-hover: #9B85FF;\r\n              --rdiv-section-padding: 100px 0;\r\n          }\r\n          \r\n\/*           body {\r\n              font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n              scroll-behavior: smooth;\r\n              overflow-x: hidden;\r\n              background-color: var(--rdiv-light-color);\r\n              color: var(--rdiv-dark-color);\r\n          }  \r\n      \r\n      h1, h2, h3, h4, h5, h6 {\r\n          font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\r\n          font-weight: 800;\r\n          letter-spacing: -0.02em;\r\n      } *\/\r\n   \r\n       \r\n          \/* Marketing hero \u2014 white, black text, purple accent *\/\r\n          .rdiv-hero-section {\r\n              padding: var(--rdiv-section-padding);\r\n              text-align: center;\r\n              background-color: var(--rdiv-light-color);\r\n          }\r\n          \r\n          .rdiv-hero-content {\r\n              position: relative;\r\n              z-index: 1;\r\n          }\r\n          \r\n          .rdiv-hero-section h1 {\r\n              font-size: 3.5rem;\r\n              font-weight: 800;\r\n              margin-bottom: 1.5rem;\r\n              color: var(--rdiv-dark-color);\r\n              -webkit-text-fill-color: var(--rdiv-dark-color);\r\n              background: none;\r\n              -webkit-background-clip: unset;\r\n              background-clip: unset;\r\n          }\r\n\r\n          .rdiv-hero-section h1 .va-accent {\r\n              color: var(--rdiv-primary-color);\r\n          }\r\n          \r\n          .rdiv-hero-section p {\r\n              font-size: 1.25rem;\r\n              max-width: 700px;\r\n              margin: 0 auto 2rem;\r\n              font-weight: 400;\r\n              color: var(--rdiv-muted-on-light);\r\n          }\r\n          \r\n          \/* Work process \u2014 lavender strip, black text, white cards *\/\r\n          .rdiv-work-process-section {\r\n              padding: var(--rdiv-section-padding);\r\n              background: linear-gradient(165deg, #F5F3FF 0%, #FFFFFF 52%, #F5F3FF 100%);\r\n              color: #000000;\r\n              position: relative;\r\n              overflow: hidden;\r\n              border-top: 1px solid rgba(138, 102, 255, 0.12);\r\n              border-bottom: 1px solid rgba(138, 102, 255, 0.12);\r\n          }\r\n          \r\n          .rdiv-work-process-section::before {\r\n              content: '';\r\n              position: absolute;\r\n              top: 0;\r\n              left: 0;\r\n              width: 100%;\r\n              height: 100%;\r\n              background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(138, 102, 255, 0.06) 0%, transparent 55%);\r\n              pointer-events: none;\r\n          }\r\n\r\n          .rdiv-work-process-section .rdiv-light-title,\r\n          .rdiv-work-process-section .rdiv-section-title {\r\n              color: #000000;\r\n          }\r\n\r\n          .rdiv-work-process-section .rdiv-light-title::after {\r\n              background: linear-gradient(to right, var(--rdiv-primary-color), var(--rdiv-secondary-color));\r\n          }\r\n\r\n          .rdiv-work-process-section .rdiv-light-subtitle,\r\n          .rdiv-work-process-section .rdiv-section-subtitle {\r\n              color: var(--rdiv-muted-on-light);\r\n          }\r\n\r\n          .rdiv-work-process-section .rdiv-process-step h4.text-white {\r\n              color: #000000 !important;\r\n          }\r\n          \r\n          .rdiv-work-process-content {\r\n              position: relative;\r\n              z-index: 1;\r\n          }\r\n          \r\n          .rdiv-process-step {\r\n              text-align: center;\r\n              padding: 30px 20px;\r\n              position: relative;\r\n              z-index: 1;\r\n              background: #FFFFFF;\r\n              border-radius: 16px;\r\n              margin: 15px;\r\n              border: 1px solid rgba(138, 102, 255, 0.2);\r\n              box-shadow: 0 8px 28px rgba(138, 102, 255, 0.08);\r\n              transition: all 0.3s ease;\r\n              color: #000000;\r\n          }\r\n          \r\n          .rdiv-process-step:hover {\r\n              transform: translateY(-8px);\r\n              box-shadow: 0 16px 40px rgba(138, 102, 255, 0.15);\r\n              border-color: rgba(138, 102, 255, 0.35);\r\n          }\r\n          \r\n          .rdiv-step-number {\r\n              width: 60px;\r\n              height: 60px;\r\n              background: linear-gradient(135deg, var(--rdiv-primary-color), var(--rdiv-secondary-color));\r\n              color: #FFFFFF;\r\n              border-radius: 50%;\r\n              display: flex;\r\n              align-items: center;\r\n              justify-content: center;\r\n              font-weight: 800;\r\n              margin: 0 auto 20px;\r\n              font-size: 1.5rem;\r\n              box-shadow: 0 8px 20px rgba(138, 102, 255, 0.3);\r\n          }\r\n          \r\n          \/* Features Section *\/\r\n          .rdiv-features-section {\r\n              padding: var(--rdiv-section-padding);\r\n              background: white;\r\n          }\r\n          \r\n          .rdiv-feature-card {\r\n              padding: 40px 30px;\r\n              border-radius: 16px;\r\n              background: white;\r\n              box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);\r\n              margin-bottom: 30px;\r\n              transition: all 0.3s ease;\r\n              border: 1px solid rgba(0,0,0,0.05);\r\n              height: 100%;\r\n              position: relative;\r\n              overflow: hidden;\r\n          }\r\n          \r\n          .rdiv-feature-card::before {\r\n              content: '';\r\n              position: absolute;\r\n              top: 0;\r\n              left: 0;\r\n              width: 4px;\r\n              height: 100%;\r\n              background: linear-gradient(to bottom, var(--rdiv-primary-color), var(--rdiv-secondary-color));\r\n              transition: all 0.3s ease;\r\n          }\r\n          \r\n          .rdiv-feature-card:hover {\r\n              transform: translateY(-10px);\r\n              box-shadow: 0 15px 40px rgba(0,0,0,0.1);\r\n          }\r\n          \r\n          .rdiv-feature-card:hover::before {\r\n              width: 100%;\r\n              opacity: 0.1;\r\n          }\r\n          \r\n          .rdiv-feature-icon {\r\n              width: 70px;\r\n              height: 70px;\r\n              border-radius: 20px;\r\n              display: flex;\r\n              align-items: center;\r\n              justify-content: center;\r\n              margin-bottom: 25px;\r\n              background: linear-gradient(45deg, var(--rdiv-primary-color), var(--rdiv-secondary-color));\r\n              color: white;\r\n              font-size: 1.8rem;\r\n              transition: all 0.3s ease;\r\n          }\r\n          \r\n          .rdiv-feature-card:hover .rdiv-feature-icon {\r\n              transform: rotate(15deg) scale(1.1);\r\n              background: linear-gradient(45deg, var(--rdiv-primary-hover), var(--rdiv-secondary-hover));\r\n          }\r\n          \r\n          \/* Why Choose Section *\/\r\n          .rdiv-why-choose-section {\r\n              padding: var(--rdiv-section-padding);\r\n              background: var(--rdiv-gray-color);\r\n          }\r\n          \r\n          .rdiv-why-choose-image {\r\n              border-radius: 16px;\r\n              overflow: hidden;\r\n              box-shadow: 0 20px 40px rgba(0,0,0,0.1);\r\n              transform: perspective(1000px) rotateY(-5deg);\r\n              transition: all 0.5s ease;\r\n          }\r\n          \r\n          .rdiv-why-choose-image:hover {\r\n              transform: perspective(1000px) rotateY(0deg);\r\n          }\r\n          \r\n          .rdiv-benefit-item {\r\n              display: flex;\r\n              align-items: flex-start;\r\n              margin-bottom: 20px;\r\n              padding: 15px;\r\n              border-radius: 12px;\r\n              background: white;\r\n              box-shadow: 0 5px 15px rgba(0,0,0,0.03);\r\n              transition: all 0.3s ease;\r\n          }\r\n          \r\n          .rdiv-benefit-item:hover {\r\n              transform: translateX(10px);\r\n              box-shadow: 0 10px 25px rgba(0,0,0,0.1);\r\n          }\r\n          \r\n          .rdiv-benefit-icon {\r\n              width: 40px;\r\n              height: 40px;\r\n              border-radius: 12px;\r\n              display: flex;\r\n              align-items: center;\r\n              justify-content: center;\r\n              margin-right: 15px;\r\n              background: linear-gradient(45deg, var(--rdiv-primary-color), var(--rdiv-secondary-color));\r\n              color: white;\r\n              font-size: 1.2rem;\r\n              flex-shrink: 0;\r\n          }\r\n          \r\n          \/* FAQ Section *\/\r\n          .rdiv-faq-section {\r\n              padding: var(--rdiv-section-padding);\r\n              background: white;\r\n          }\r\n          \r\n          .rdiv-accordion-item {\r\n              border: none;\r\n              border-radius: 12px !important;\r\n              overflow: hidden;\r\n              margin-bottom: 15px;\r\n              box-shadow: 0 5px 15px rgba(0,0,0,0.05);\r\n          }\r\n          \r\n          .rdiv-accordion-button {\r\n              font-weight: 600;\r\n              color: var(--rdiv-dark-color);\r\n              padding: 20px 25px;\r\n              background: white;\r\n              box-shadow: none;\r\n              border-radius: 12px 12px 0 0 !important;\r\n          }\r\n          \r\n          .rdiv-accordion-button:not(.collapsed) {\r\n              background: white;\r\n              color: var(--rdiv-primary-color);\r\n              box-shadow: none;\r\n          }\r\n          \r\n          .rdiv-accordion-button:focus {\r\n              box-shadow: none;\r\n              border-color: rgba(138, 102, 255, 0.35);\r\n          }\r\n          \r\n          .rdiv-accordion-button::after {\r\n              background-image: url(\"data:image\/svg+xml,%3csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 16 16' fill='%238A66FF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'\/%3e%3c\/svg%3e\");\r\n          }\r\n          \r\n          .rdiv-accordion-body {\r\n              padding: 25px;\r\n              color: var(--rdiv-muted-on-light);\r\n          }\r\n          \r\n          \/* Section Titles *\/\r\n          .rdiv-section-title {\r\n              font-weight: 800;\r\n              color: var(--rdiv-dark-color);\r\n              margin-bottom: 1.5rem;\r\n              position: relative;\r\n              display: inline-block;\r\n          }\r\n          \r\n          .rdiv-section-title::after {\r\n              content: '';\r\n              position: absolute;\r\n              bottom: -10px;\r\n              left: 0;\r\n              width: 60px;\r\n              height: 4px;\r\n              background: linear-gradient(to right, var(--rdiv-primary-color), var(--rdiv-secondary-color));\r\n              border-radius: 2px;\r\n          }\r\n          \r\n          .rdiv-light-title {\r\n              color: white;\r\n          }\r\n          \r\n          .rdiv-light-title::after {\r\n              background: white;\r\n          }\r\n          \r\n          .rdiv-section-subtitle {\r\n              color: var(--rdiv-muted-on-light);\r\n              max-width: 700px;\r\n              margin: 0 auto 3rem;\r\n              font-size: 1.1rem;\r\n          }\r\n          \r\n          .rdiv-light-subtitle {\r\n              color: rgba(255,255,255,0.8);\r\n          }\r\n          \r\n          \/* Responsive Design *\/\r\n          @media (max-width: 991px) {\r\n              :root {\r\n                  --rdiv-section-padding: 80px 0;\r\n              }\r\n              \r\n              .rdiv-hero-section h1 {\r\n                  font-size: 2.8rem;\r\n              }\r\n              \r\n              .rdiv-process-step::before {\r\n                  display: none;\r\n              }\r\n          }\r\n          \r\n          @media (max-width: 767px) {\r\n              :root {\r\n                  --rdiv-section-padding: 70px 0;\r\n              }\r\n              \r\n              .rdiv-hero-section {\r\n                  padding: 100px 0 60px;\r\n              }\r\n              \r\n              .rdiv-hero-section h1 {\r\n                  font-size: 2.2rem;\r\n              }\r\n              \r\n              .rdiv-hero-section p {\r\n                  font-size: 1rem;\r\n              }\r\n              \r\n              .rdiv-section-title {\r\n                  font-size: 1.8rem;\r\n              }\r\n          }\r\n          \r\n          \/* Animation *\/\r\n          @keyframes rdiv-float {\r\n              0% { transform: translateY(0px); }\r\n              50% { transform: translateY(-15px); }\r\n              100% { transform: translateY(0px); }\r\n          }\r\n          \r\n          .rdiv-floating-element {\r\n              animation: rdiv-float 6s ease-in-out infinite;\r\n          }\r\n          \r\n          \/* Custom Scrollbar *\/\r\n          ::-webkit-scrollbar {\r\n              width: 8px;\r\n          }\r\n          \r\n          ::-webkit-scrollbar-track {\r\n              background: #EDE9FE;\r\n          }\r\n          \r\n          ::-webkit-scrollbar-thumb {\r\n              background: linear-gradient(var(--rdiv-primary-color), var(--rdiv-secondary-color));\r\n              border-radius: 10px;\r\n          }\r\n          \r\n          ::-webkit-scrollbar-thumb:hover {\r\n              background: linear-gradient(var(--rdiv-primary-hover), var(--rdiv-secondary-hover));\r\n          }   \r\n  \r\n  \r\n  <\/style>\r\n  <!-- tools -->\r\n  <style>\r\n  \r\n      :root {\r\n          --primary-color: #8A66FF;\r\n          --primary-light: #A385FF;\r\n          --primary-dark: #6A4FE0;\r\n          --secondary-color: #6A4FE0;\r\n          --secondary-light: #8A66FF;\r\n          --accent-color: #8A66FF;\r\n          --accent-light: #A385FF;\r\n          --success-color: #22C55E;\r\n          --success-light: #4ADE80;\r\n          --danger-color: #EF4444;\r\n          --danger-light: #F87171;\r\n          --progress-color: #8A66FF;\r\n          --progress-bg: #F5F3FF;\r\n          --bg-primary: #FFFFFF;\r\n          --bg-secondary: #F5F3FF;\r\n          --bg-tertiary: #EDE9FE;\r\n          --bg-card: #FFFFFF;\r\n          --glass-bg: rgba(138, 102, 255, 0.06);\r\n          --glass-border: rgba(138, 102, 255, 0.22);\r\n          --text-primary: #000000;\r\n          --text-secondary: #333333;\r\n          --text-muted: #666666;\r\n          --text-white: #FFFFFF;\r\n          --shadow-sm: 0 2px 8px rgba(138, 102, 255, 0.08);\r\n          --shadow-md: 0 4px 16px rgba(138, 102, 255, 0.12);\r\n          --shadow-lg: 0 8px 32px rgba(138, 102, 255, 0.14);\r\n          --shadow-xl: 0 16px 48px rgba(138, 102, 255, 0.16);\r\n          --gradient-primary: linear-gradient(135deg, #8A66FF, #6A4FE0);\r\n          --gradient-secondary: linear-gradient(135deg, #6A4FE0, #8A66FF);\r\n          --gradient-accent: linear-gradient(135deg, #8A66FF, #A385FF);\r\n      }\r\n  \r\n     \r\n    \r\n    .rdiv-hero-tool-section {\r\n      font-family: 'Manrope', 'Inter', sans-serif;\r\n      background-color: #FFFFFF;\r\n      background-image:\r\n          radial-gradient(circle at 18% 12%, rgba(138, 102, 255, 0.12) 0%, transparent 42%),\r\n          radial-gradient(circle at 92% 88%, rgba(106, 79, 224, 0.08) 0%, transparent 40%),\r\n          linear-gradient(180deg, #FFFFFF 0%, #F5F3FF 100%);\r\n      padding: 80px 0;\r\n      line-height: 1.6;\r\n      color: var(--text-primary);\r\n      overflow-x: hidden;\r\n      border-bottom: 1px solid rgba(138, 102, 255, 0.15);\r\n  }\r\n  \r\n      .rdiv-custom-container {\r\n          max-width: 1400px;\r\n          margin: 0 auto;\r\n          padding: 20px;\r\n          position: relative;\r\n      }\r\n  \r\n      .header {\r\n          text-align: center;\r\n          margin-bottom: 40px;\r\n          padding: 40px 0;\r\n          animation: slideInDown 1s ease-out;\r\n      }\r\n  \r\n      .logo {\r\n          display: flex;\r\n          align-items: center;\r\n          justify-content: center;\r\n          gap: 20px;\r\n          margin-bottom: 25px;\r\n          flex-wrap: wrap;\r\n      }\r\n  \r\n      .logo-icon {\r\n          width: 80px;\r\n          height: 80px;\r\n          background: var(--gradient-primary);\r\n          border-radius: 20px;\r\n          display: flex;\r\n          align-items: center;\r\n          justify-content: center;\r\n          color: white;\r\n          font-size: 36px;\r\n          font-weight: 800;\r\n          box-shadow: var(--shadow-lg);\r\n          animation: float 3s ease-in-out infinite;\r\n          position: relative;\r\n          overflow: hidden;\r\n      }\r\n  \r\n      .logo-icon::before {\r\n          content: '';\r\n          position: absolute;\r\n          top: -50%;\r\n          left: -50%;\r\n          width: 200%;\r\n          height: 200%;\r\n          background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);\r\n          transform: rotate(45deg);\r\n          animation: shine 3s infinite;\r\n      }\r\n  \r\n      .reddit-badge {\r\n          background: var(--gradient-secondary);\r\n          color: white;\r\n          padding: 8px 16px;\r\n          border-radius: 25px;\r\n          font-size: 14px;\r\n          font-weight: 700;\r\n          box-shadow: var(--shadow-md);\r\n          animation: pulse 2s infinite;\r\n      }\r\n  \r\n    .logo-text {\r\n      font-size: clamp(2.5rem, 6vw, 4rem);\r\n      font-weight: 800;\r\n      font-family: 'Manrope', 'Inter', sans-serif;\r\n      color: #000000;\r\n      -webkit-text-fill-color: #000000;\r\n      background: none;\r\n      -webkit-background-clip: unset;\r\n      background-clip: unset;\r\n      letter-spacing: -0.03em;\r\n  }\r\n\r\n    .logo-text .va-accent {\r\n      color: #8A66FF;\r\n      -webkit-text-fill-color: #8A66FF;\r\n    }\r\n  \r\n      .subtitle {\r\n          color: var(--text-secondary);\r\n          font-size: 20px;\r\n          font-weight: 600;\r\n          margin-bottom: 30px;\r\n          max-width: 700px;\r\n          margin-left: auto;\r\n          margin-right: auto;\r\n      }\r\n  \r\n      .features-grid {\r\n          display: grid;\r\n          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n          gap: 20px;\r\n          margin-bottom: 40px;\r\n      }\r\n  \r\n    .feature-card {\r\n      background: #FFFFFF;\r\n      border: 1px solid rgba(138, 102, 255, 0.2);\r\n      padding: 20px;\r\n      border-radius: 16px;\r\n      text-align: center;\r\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n      position: relative;\r\n      overflow: hidden;\r\n      box-shadow: 0 6px 24px rgba(138, 102, 255, 0.06);\r\n  }\r\n  \r\n      .feature-card::before {\r\n          content: '';\r\n          position: absolute;\r\n          top: 0;\r\n          left: -100%;\r\n          width: 100%;\r\n          height: 100%;\r\n          background: linear-gradient(90deg, transparent, rgba(138, 102, 255, 0.12), transparent);\r\n          transition: left 0.5s;\r\n      }\r\n  \r\n      .feature-card:hover::before {\r\n          left: 100%;\r\n      }\r\n  \r\n      .feature-card:hover {\r\n          transform: translateY(-5px);\r\n          box-shadow: var(--shadow-lg);\r\n          border-color: var(--primary-color);\r\n      }\r\n  \r\n      .feature-icon {\r\n          width: 50px;\r\n          height: 50px;\r\n          background: var(--gradient-primary);\r\n          border-radius: 50%;\r\n          display: flex;\r\n          align-items: center;\r\n          justify-content: center;\r\n          margin: 0 auto 15px;\r\n          font-size: 24px;\r\n          color: white;\r\n      }\r\n  \r\n      .feature-title {\r\n          font-weight: 700;\r\n          color: var(--text-primary);\r\n          margin-bottom: 8px;\r\n      }\r\n  \r\n     .search-container {\r\n      background: #FFFFFF;\r\n      border: 1px solid rgba(138, 102, 255, 0.22);\r\n      padding: 40px;\r\n      border-radius: 24px;\r\n      box-shadow: var(--shadow-xl);\r\n      margin-bottom: 40px;\r\n      animation: slideInUp 1s ease-out 0.2s both;\r\n      position: relative;\r\n      overflow: hidden;\r\n  }\r\n  \r\n      .search-container::before {\r\n          content: '';\r\n          position: absolute;\r\n          top: 0;\r\n          left: 0;\r\n          right: 0;\r\n          height: 4px;\r\n          background: var(--gradient-primary);\r\n      }\r\n  \r\n      .search-form {\r\n          display: flex;\r\n          gap: 20px;\r\n          margin-bottom: 25px;\r\n          position: relative;\r\n      }\r\n  \r\n   .search-input {\r\n      flex: 1 !important;\r\n      padding: 18px 24px !important;\r\n      border: 2px solid rgba(138, 102, 255, 0.28) !important;\r\n      border-radius: 16px !important;\r\n      font-size: 16px !important;\r\n      font-weight: 500 !important;\r\n      background: #FFFFFF !important;\r\n      transition: all 0.3s ease !important;\r\n      outline: none !important;\r\n      color: var(--text-primary) !important;\r\n      font-family: inherit !important;\r\n  }\r\n  \r\n      .search-input:focus {\r\n          border-color: var(--primary-color);\r\n          box-shadow: 0 0 0 4px rgba(138, 102, 255, 0.18);\r\n          transform: translateY(-2px);\r\n      }\r\n  \r\n      .search-input::placeholder {\r\n          color: var(--text-muted);\r\n          font-weight: 400;\r\n      }\r\n  \r\n      .search-btn {\r\n          padding: 18px 36px;\r\n          background: var(--gradient-primary);\r\n          color: white;\r\n          border: none;\r\n          border-radius: 16px;\r\n          font-size: 16px;\r\n          font-weight: 700;\r\n          cursor: pointer;\r\n          transition: all 0.3s ease;\r\n          min-width: 180px;\r\n          position: relative;\r\n          overflow: hidden;\r\n          box-shadow: var(--shadow-md);\r\n          font-family: inherit;\r\n      }\r\n  \r\n      .search-btn::before {\r\n          content: '';\r\n          position: absolute;\r\n          top: 0;\r\n          left: -100%;\r\n          width: 100%;\r\n          height: 100%;\r\n          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);\r\n          transition: left 0.5s;\r\n      }\r\n  \r\n      .search-btn:hover::before {\r\n          left: 100%;\r\n      }\r\n  \r\n      .search-btn:hover:not(:disabled) {\r\n          transform: translateY(-3px);\r\n          box-shadow: var(--shadow-lg);\r\n      }\r\n  \r\n      .search-btn:disabled {\r\n          opacity: 0.6;\r\n          cursor: not-allowed;\r\n          transform: none;\r\n      }\r\n  \r\n      .user-info {\r\n          background: var(--bg-card);\r\n          border: 1px solid var(--glass-border);\r\n          padding: 40px;\r\n          border-radius: 24px;\r\n          box-shadow: var(--shadow-xl);\r\n          margin-bottom: 40px;\r\n          display: none;\r\n          animation: slideInDown 0.8s ease-out;\r\n          position: relative;\r\n          overflow: hidden;\r\n      }\r\n  \r\n      .user-info::before {\r\n          content: '';\r\n          position: absolute;\r\n          top: 0;\r\n          left: 0;\r\n          right: 0;\r\n          height: 4px;\r\n          background: var(--gradient-secondary);\r\n      }\r\n  \r\n      .user-header {\r\n          display: flex;\r\n          align-items: center;\r\n          gap: 30px;\r\n          margin-bottom: 30px;\r\n      }\r\n  \r\n      .user-avatar {\r\n          width: 100px;\r\n          height: 100px;\r\n          border-radius: 50%;\r\n          background: var(--gradient-primary);\r\n          display: flex;\r\n          align-items: center;\r\n          justify-content: center;\r\n          font-size: 3rem;\r\n          color: white;\r\n          font-weight: 900;\r\n          box-shadow: var(--shadow-lg);\r\n          position: relative;\r\n          overflow: hidden;\r\n      }\r\n  \r\n      .user-avatar::before {\r\n          content: '';\r\n          position: absolute;\r\n          top: -50%;\r\n          left: -50%;\r\n          width: 200%;\r\n          height: 200%;\r\n          background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);\r\n          transform: rotate(45deg);\r\n          animation: shine 4s infinite;\r\n      }\r\n  \r\n      .user-details h2 {\r\n          font-size: 2.5rem;\r\n          color: var(--text-primary);\r\n          margin-bottom: 10px;\r\n          font-weight: 900;\r\n      }\r\n  \r\n      .user-description {\r\n          color: var(--text-secondary);\r\n          font-size: 18px;\r\n          font-weight: 500;\r\n      }\r\n  \r\n      .user-stats {\r\n          display: grid;\r\n          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n          gap: 25px;\r\n          margin-top: 30px;\r\n      }\r\n  \r\n      .stat-card {\r\n          background: var(--bg-card);\r\n          border: 1px solid var(--glass-border);\r\n          padding: 25px;\r\n          border-radius: 20px;\r\n          text-align: center;\r\n          transition: all 0.3s ease;\r\n          position: relative;\r\n          overflow: hidden;\r\n      }\r\n  \r\n      .stat-card::before {\r\n          content: '';\r\n          position: absolute;\r\n          top: 0;\r\n          left: 0;\r\n          right: 0;\r\n          height: 3px;\r\n          background: var(--gradient-accent);\r\n      }\r\n  \r\n      .stat-card:hover {\r\n          transform: translateY(-5px);\r\n          box-shadow: var(--shadow-md);\r\n      }\r\n  \r\n      .stat-number {\r\n          font-size: 2.2rem;\r\n          font-weight: 900;\r\n          color: var(--primary-color);\r\n          margin-bottom: 8px;\r\n      }\r\n  \r\n      .stat-label {\r\n          font-size: 1rem;\r\n          color: var(--text-secondary);\r\n          font-weight: 600;\r\n      }\r\n  \r\n      .posts-section {\r\n          display: none;\r\n      }\r\n  \r\n      .section-title {\r\n          color: var(--text-primary);\r\n          font-size: 2.5rem;\r\n          font-weight: 800;\r\n          margin-bottom: 40px;\r\n          text-align: center;\r\n          background: var(--bg-card);\r\n          border: 1px solid var(--glass-border);\r\n          padding: 25px;\r\n          border-radius: 20px;\r\n          position: relative;\r\n          overflow: hidden;\r\n      }\r\n  \r\n      .section-title::before {\r\n          content: '';\r\n          position: absolute;\r\n          top: 0;\r\n          left: 0;\r\n          right: 0;\r\n          height: 4px;\r\n          background: var(--gradient-accent);\r\n      }\r\n  \r\n      .posts-grid {\r\n          display: grid;\r\n          grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));\r\n          gap: 30px;\r\n      }\r\n  \r\n      .post-card {\r\n          background: var(--bg-card);\r\n          border: 1px solid var(--glass-border);\r\n          border-radius: 28px;\r\n          padding: 25px;\r\n          box-shadow: var(--shadow-xl);\r\n          transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n          position: relative;\r\n          overflow: hidden;\r\n          animation: slideUp 0.6s ease forwards;\r\n          display: flex;\r\n          flex-direction: column;\r\n          height: 100%;\r\n      }\r\n  \r\n      .post-card::before {\r\n          content: '';\r\n          position: absolute;\r\n          top: 0;\r\n          left: 0;\r\n          right: 0;\r\n          height: 6px;\r\n          background: var(--gradient-primary);\r\n          border-radius: 28px 28px 0 0;\r\n      }\r\n  \r\n      .post-card:hover {\r\n          transform: translateY(-15px);\r\n          box-shadow: 0 25px 50px rgba(138, 102, 255, 0.16);\r\n          border-color: var(--primary-color);\r\n      }\r\n  \r\n      .post-header {\r\n          display: flex;\r\n          align-items: center;\r\n          justify-content: space-between;\r\n          margin-bottom: 20px;\r\n          padding-bottom: 15px;\r\n          border-bottom: 2px solid var(--bg-tertiary);\r\n      }\r\n  \r\n      .subreddit-info {\r\n          display: flex;\r\n          align-items: center;\r\n          gap: 15px;\r\n          flex-wrap: wrap;\r\n      }\r\n  \r\n      .subreddit-badge {\r\n          background: var(--gradient-primary);\r\n          color: white;\r\n          padding: 8px 16px;\r\n          border-radius: 25px;\r\n          font-size: 0.9rem;\r\n          font-weight: 700;\r\n          box-shadow: var(--shadow-sm);\r\n      }\r\n  \r\n      .post-type {\r\n          background: var(--gradient-secondary);\r\n          color: white;\r\n          padding: 6px 12px;\r\n          border-radius: 20px;\r\n          font-size: 0.8rem;\r\n          font-weight: 600;\r\n          text-transform: capitalize;\r\n      }\r\n  \r\n      .post-meta {\r\n          font-size: 0.9rem;\r\n          color: var(--text-muted);\r\n          font-weight: 500;\r\n          text-align: right;\r\n      }\r\n  \r\n      .post-title {\r\n          font-size: 1.6rem;\r\n          font-weight: 700;\r\n          margin-bottom: 20px;\r\n          color: var(--text-primary);\r\n          line-height: 1.4;\r\n      }\r\n  \r\n      .post-content {\r\n          margin-bottom: 25px;\r\n          flex-grow: 1;\r\n      }\r\n  \r\n      .media-container {\r\n          margin: 20px 0;\r\n          border-radius: 20px;\r\n          overflow: hidden;\r\n          position: relative;\r\n          box-shadow: var(--shadow-md);\r\n          background: #000;\r\n      }\r\n  \r\n      .image-preview {\r\n          width: 100%;\r\n          max-height: 400px;\r\n          object-fit: cover;\r\n          cursor: pointer;\r\n          transition: transform 0.3s ease;\r\n      }\r\n  \r\n      .image-preview:hover {\r\n          transform: scale(1.02);\r\n      }\r\n  \r\n      .gallery-container {\r\n          display: grid;\r\n          grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\r\n          gap: 15px;\r\n          margin: 20px 0;\r\n      }\r\n  \r\n      .gallery-image {\r\n          width: 100%;\r\n          height: 200px;\r\n          object-fit: cover;\r\n          border-radius: 15px;\r\n          cursor: pointer;\r\n          transition: transform 0.3s ease;\r\n          box-shadow: var(--shadow-sm);\r\n      }\r\n  \r\n      .gallery-image:hover {\r\n          transform: scale(1.05);\r\n      }\r\n  \r\n      .media-controls {\r\n          display: flex;\r\n          gap: 15px;\r\n          margin-top: 20px;\r\n          flex-wrap: wrap;\r\n          align-items: center;\r\n      }\r\n  \r\n      .control-btn {\r\n          display: flex;\r\n          align-items: center;\r\n          gap: 10px;\r\n          padding: 14px 24px;\r\n          border: none;\r\n          border-radius: 15px;\r\n          cursor: pointer;\r\n          font-size: 1rem;\r\n          font-weight: 600;\r\n          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n          font-family: inherit;\r\n          position: relative;\r\n          overflow: hidden;\r\n      }\r\n  \r\n      .control-btn::before {\r\n          content: '';\r\n          position: absolute;\r\n          top: 0;\r\n          left: -100%;\r\n          width: 100%;\r\n          height: 100%;\r\n          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);\r\n          transition: left 0.5s;\r\n      }\r\n  \r\n      .control-btn:hover::before {\r\n          left: 100%;\r\n      }\r\n  \r\n      .download-btn {\r\n          background: var(--gradient-accent);\r\n          color: white;\r\n          box-shadow: var(--shadow-md);\r\n      }\r\n  \r\n      .download-btn:hover {\r\n          transform: translateY(-3px);\r\n          box-shadow: var(--shadow-lg);\r\n      }\r\n  \r\n      .download-btn:disabled {\r\n          opacity: 0.6;\r\n          cursor: not-allowed;\r\n          transform: none;\r\n      }\r\n  \r\n      .download-btn.downloading {\r\n          background: var(--gradient-secondary);\r\n      }\r\n  \r\n      .post-stats {\r\n          display: grid;\r\n          grid-template-columns: repeat(2, 1fr);\r\n          gap: 15px;\r\n          margin-top: auto;\r\n          padding-top: 20px;\r\n          border-top: 2px solid var(--bg-tertiary);\r\n      }\r\n  \r\n      .stat-item {\r\n          display: flex;\r\n          flex-direction: column;\r\n          align-items: center;\r\n          gap: 8px;\r\n          padding: 15px;\r\n          background: var(--bg-card);\r\n          border: 1px solid var(--glass-border);\r\n          border-radius: 15px;\r\n          text-align: center;\r\n          transition: all 0.3s ease;\r\n          position: relative;\r\n          overflow: hidden;\r\n      }\r\n  \r\n      .stat-item::before {\r\n          content: '';\r\n          position: absolute;\r\n          top: 0;\r\n          left: 0;\r\n          right: 0;\r\n          height: 3px;\r\n          background: var(--gradient-accent);\r\n      }\r\n  \r\n      .stat-item:hover {\r\n          transform: translateY(-3px);\r\n          box-shadow: var(--shadow-sm);\r\n      }\r\n  \r\n      .stat-value {\r\n          font-weight: 900;\r\n          font-size: 1.4rem;\r\n      }\r\n  \r\n      .stat-label {\r\n          font-size: 0.9rem;\r\n          color: var(--text-muted);\r\n          font-weight: 600;\r\n          text-transform: capitalize;\r\n      }\r\n  \r\n      .upvotes .stat-value { color: var(--primary-color); }\r\n      .comments .stat-value { color: var(--secondary-color); }\r\n  \r\n      .loading {\r\n          text-align: center;\r\n          padding: 60px;\r\n          color: var(--text-primary);\r\n          font-size: 1.3rem;\r\n          display: none;\r\n      }\r\n  \r\n      .spinner {\r\n          border: 4px solid var(--bg-tertiary);\r\n          border-top: 4px solid var(--primary-color);\r\n          border-radius: 50%;\r\n          width: 60px;\r\n          height: 60px;\r\n          animation: spin 1s linear infinite;\r\n          margin: 25px auto;\r\n      }\r\n  \r\n      .error-message {\r\n          background: rgba(252, 70, 107, 0.1);\r\n          border: 1px solid rgba(252, 70, 107, 0.2);\r\n          color: var(--danger-color);\r\n          padding: 25px;\r\n          border-radius: 20px;\r\n          text-align: center;\r\n          margin: 25px 0;\r\n          font-weight: 600;\r\n          display: none;\r\n      }\r\n  \r\n      .modal {\r\n          display: none;\r\n          position: fixed;\r\n          z-index: 1000;\r\n          left: 0;\r\n          top: 0;\r\n          width: 100%;\r\n          height: 100%;\r\n          background-color: rgba(0, 0, 0, 0.95);\r\n          animation: fadeIn 0.3s ease;\r\n      }\r\n  \r\n      .modal-content {\r\n          position: absolute;\r\n          top: 50%;\r\n          left: 50%;\r\n          transform: translate(-50%, -50%);\r\n          max-width: 90%;\r\n          max-height: 90%;\r\n      }\r\n  \r\n      .modal img {\r\n          width: 100%;\r\n          height: auto;\r\n          border-radius: 20px;\r\n      }\r\n  \r\n      .close {\r\n          position: absolute;\r\n          top: 20px;\r\n          right: 40px;\r\n          color: #f1f1f1;\r\n          font-size: 45px;\r\n          font-weight: bold;\r\n          cursor: pointer;\r\n          z-index: 1001;\r\n      }\r\n  \r\n      .close:hover {\r\n          color: var(--primary-color);\r\n      }\r\n  \r\n      .download-progress {\r\n          position: fixed;\r\n          bottom: 25px;\r\n          right: 25px;\r\n          background: var(--bg-secondary);\r\n          border: 1px solid var(--glass-border);\r\n          border-radius: 20px;\r\n          padding: 30px;\r\n          min-width: 380px;\r\n          box-shadow: var(--shadow-xl);\r\n          z-index: 1000;\r\n          display: none;\r\n          color: var(--text-primary);\r\n      }\r\n  \r\n      .download-progress.show {\r\n          display: block;\r\n          animation: slideInRight 0.4s ease-out;\r\n      }\r\n  \r\n      .progress-header {\r\n          display: flex;\r\n          justify-content: space-between;\r\n          align-items: center;\r\n          margin-bottom: 20px;\r\n      }\r\n  \r\n      .progress-text {\r\n          font-weight: 700;\r\n          font-size: 16px;\r\n          color: var(--text-primary);\r\n      }\r\n  \r\n      .cancel-btn {\r\n          background: rgba(252, 70, 107, 0.1);\r\n          border: 1px solid rgba(252, 70, 107, 0.2);\r\n          color: var(--danger-color);\r\n          padding: 10px 20px;\r\n          border-radius: 10px;\r\n          font-size: 13px;\r\n          cursor: pointer;\r\n          transition: all 0.3s ease;\r\n          font-weight: 600;\r\n      }\r\n  \r\n      .cancel-btn:hover {\r\n          background: rgba(252, 70, 107, 0.15);\r\n      }\r\n  \r\n      .progress-bar-container {\r\n          width: 100%;\r\n          height: 14px;\r\n          background: var(--bg-tertiary);\r\n          border-radius: 8px;\r\n          overflow: hidden;\r\n          margin-bottom: 15px;\r\n          box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);\r\n      }\r\n  \r\n      .progress-bar-fill {\r\n          height: 100%;\r\n          background: var(--gradient-primary);\r\n          border-radius: 8px;\r\n          width: 0%;\r\n          transition: width 0.3s ease;\r\n          box-shadow: 0 2px 8px rgba(138, 102, 255, 0.3);\r\n      }\r\n  \r\n      .progress-details {\r\n          display: flex;\r\n          justify-content: space-between;\r\n          font-size: 14px;\r\n          color: var(--text-secondary);\r\n          font-weight: 500;\r\n      }\r\n  \r\n      @keyframes float {\r\n          0%, 100% { transform: translateY(0px) scale(1); }\r\n          50% { transform: translateY(-10px) scale(1.02); }\r\n      }\r\n  \r\n      @keyframes shine {\r\n          0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }\r\n          100% { transform: translateX(100%) translateY(100%) rotate(45deg); }\r\n      }\r\n  \r\n      @keyframes slideInDown {\r\n          from { opacity: 0; transform: translateY(-30px); }\r\n          to { opacity: 1; transform: translateY(0); }\r\n      }\r\n  \r\n      @keyframes slideInUp {\r\n          from { opacity: 0; transform: translateY(30px); }\r\n          to { opacity: 1; transform: translateY(0); }\r\n      }\r\n  \r\n      @keyframes slideInRight {\r\n          from { opacity: 0; transform: translateX(100%); }\r\n          to { opacity: 1; transform: translateX(0); }\r\n      }\r\n  \r\n      @keyframes slideUp {\r\n          from {\r\n               opacity: 0;\r\n              transform: translateY(40px);\r\n          }\r\n          to {\r\n               opacity: 1;\r\n              transform: translateY(0);\r\n          }\r\n      }\r\n  \r\n      @keyframes spin {\r\n          0% { transform: rotate(0deg); }\r\n          100% { transform: rotate(360deg); }\r\n      }\r\n  \r\n      @keyframes pulse {\r\n          0%, 100% { transform: scale(1); }\r\n          50% { transform: scale(1.05); }\r\n      }\r\n  \r\n      @keyframes fadeIn {\r\n          from { opacity: 0; }\r\n          to { opacity: 1; }\r\n      }\r\n  \r\n      @media (max-width: 1200px) {\r\n          .posts-grid {\r\n              grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n          }\r\n  \r\n          .features-grid {\r\n              grid-template-columns: repeat(2, 1fr);\r\n          }\r\n      }\r\n  \r\n      @media (max-width: 768px) {\r\n          .features-grid {\r\n              grid-template-columns: 1fr;\r\n          }\r\n  \r\n          .user-stats {\r\n              grid-template-columns: repeat(2, 1fr);\r\n          }\r\n  \r\n          .post-stats {\r\n              grid-template-columns: 1fr;\r\n          }\r\n  \r\n          .media-controls {\r\n              flex-direction: column;\r\n          }\r\n  \r\n          .control-btn {\r\n              width: 100%;\r\n              justify-content: center;\r\n          }\r\n  \r\n          .search-form {\r\n              flex-direction: column;\r\n          }\r\n  \r\n          .posts-grid {\r\n              grid-template-columns: 1fr;\r\n          }\r\n      }\r\n  \r\n      @media (max-width: 480px) {\r\n          .user-stats {\r\n              grid-template-columns: 1fr;\r\n          }\r\n  \r\n          .rdiv-custom-container {\r\n              padding: 15px;\r\n          }\r\n  \r\n          .search-container,\r\n          .user-info,\r\n          .post-card {\r\n              padding: 25px;\r\n          }\r\n      }\r\n  <\/style>\r\n <body data-aos-easing=\"ease-in-out\" data-aos-duration=\"800\" data-aos-delay=\"0\" data-new-gr-c-s-check-loaded=\"14.1249.0\" data-gr-ext-installed=\"\" data-new-gr-c-s-loaded=\"14.1223.0\" class=\"\" style=\"\">\r\n  \r\n        <!-- hero section tools -->\r\n        <section class=\"rdiv-hero-tool-section\">\r\n           <div class=\"container\">\r\n              <div class=\"rdiv-custom-container\">\r\n                  <div class=\"header\">\r\n                      <div class=\"logo\">\r\n                          <div class=\"logo-icon\">\ud83d\uddbc\ufe0f<\/div>\r\n          \r\n                          <h1 class=\"logo-text\">Reddit Gallery <span class=\"va-accent\">V<\/span>iewer<\/h1>\r\n                      <\/div>\r\n                      <div class=\"subtitle\">Browse and view any Reddit image instantly without logging in. Our Reddit Image Viewer ensures secure, private, and anonymous access to all public Reddit images.<\/div>\r\n                      <div class=\"features-grid\">\r\n                          <div class=\"feature-card\">\r\n                              <div class=\"feature-icon\">\ud83c\udfa8<\/div>\r\n                              <div class=\"feature-title\">Gallery View<\/div>\r\n                          <\/div>\r\n                          <div class=\"feature-card\">\r\n                              <div class=\"feature-icon\">\ud83d\udce5<\/div>\r\n                              <div class=\"feature-title\">Bulk Download<\/div>\r\n                          <\/div>\r\n                          <div class=\"feature-card\">\r\n                              <div class=\"feature-icon\">\ud83d\udd0d<\/div>\r\n                              <div class=\"feature-title\">HD Preview<\/div>\r\n                          <\/div>\r\n                          <div class=\"feature-card\">\r\n                              <div class=\"feature-icon\">\u26a1<\/div>\r\n                              <div class=\"feature-title\">Fast Loading<\/div>\r\n                          <\/div>\r\n                      <\/div>\r\n                  <\/div>\r\n          \r\n                  <div class=\"search-container\">\r\n                      <form class=\"search-form\" id=\"searchForm\">\r\n                          <input type=\"text\" class=\"search-input\" id=\"usernameInput\" placeholder=\"Enter Reddit username to explore their images (e.g., shittymorph, earthporn, pics)\" required=\"\">\r\n                          <button type=\"submit\" class=\"search-btn\" id=\"searchBtn\">\r\n                              <span id=\"searchText\">\ud83d\udd0d Find Images<\/span>\r\n                              <div class=\"spinner\" id=\"searchSpinner\" style=\"display: none; width: 24px; height: 24px; margin: 0;\"><\/div>\r\n                          <\/button>\r\n                      <\/form>\r\n          \r\n                      <div class=\"loading\" id=\"loading\">\r\n                          <div class=\"spinner\"><\/div>\r\n                          <p>Fetching images using single API call...<\/p>\r\n                      <\/div>\r\n          \r\n                      <div class=\"error-message\" id=\"errorMessage\"><\/div>\r\n                  <\/div>\r\n          \r\n                  <div class=\"user-info\" id=\"userInfo\">\r\n                      <div class=\"user-header\">\r\n                          <div class=\"user-avatar\" id=\"userAvatar\">U<\/div>\r\n                          <div class=\"user-details\">\r\n                              <h2 id=\"userName\">Username<\/h2>\r\n                              <p class=\"user-description\" id=\"userDescription\">Reddit Image Collection<\/p>\r\n                          <\/div>\r\n                      <\/div>\r\n                      <div class=\"user-stats\" id=\"userStats\">\r\n                          <!-- Stats will be populated dynamically -->\r\n                      <\/div>\r\n                  <\/div>\r\n          \r\n                  <div class=\"posts-section\" id=\"postsSection\">\r\n                      <h2 class=\"section-title\" id=\"sectionTitle\">Image Gallery<\/h2>\r\n                      <div id=\"postsContainer\" class=\"posts-grid\"><\/div>\r\n                  <\/div>\r\n              <\/div>\r\n          \r\n              <!-- Modal for image preview -->\r\n              <div id=\"imageModal\" class=\"modal\">\r\n                  <span class=\"close\">\u00d7<\/span>\r\n                  <div class=\"modal-content\">\r\n                      <img decoding=\"async\" id=\"modalImage\" src=\"\/placeholder.svg\" alt=\"Full size image\">\r\n                  <\/div>\r\n              <\/div>\r\n          \r\n              <!-- Download Progress -->\r\n              <div class=\"download-progress\" id=\"downloadProgress\">\r\n                  <div class=\"progress-header\">\r\n                      <span class=\"progress-text\" id=\"progressText\">Downloading...<\/span>\r\n                      <button class=\"cancel-btn\" onclick=\"cancelDownload()\">Cancel<\/button>\r\n                  <\/div>\r\n                  <div class=\"progress-bar-container\">\r\n                      <div class=\"progress-bar-fill\" id=\"progressBarFill\"><\/div>\r\n                  <\/div>\r\n                  <div class=\"progress-details\">\r\n                      <span id=\"progressPercent\">0%<\/span>\r\n                      <span id=\"progressSize\">0 MB \/ 0 MB<\/span>\r\n                  <\/div>\r\n              <\/div>\r\n           <\/div>\r\n        <\/section>\r\n  \r\n  <!-- Work Process Section -->\r\n  <section class=\"rdiv-work-process-section\" id=\"how-it-works\">\r\n      <div class=\"container rdiv-work-process-content\">\r\n          <div class=\"text-center mb-5\" data-aos=\"fade-up\">\r\n              <h2 class=\"rdiv-section-title rdiv-light-title\">How Our Reddit Gallery Viewer Works<\/h2>\r\n              <p class=\"rdiv-section-subtitle rdiv-light-subtitle\">View Reddit gallery images anonymously with just 3 simple steps<\/p>\r\n          <\/div>\r\n          \r\n          <div class=\"row\">\r\n              <div class=\"col-md-4\" data-aos=\"fade-up\" data-aos-delay=\"50\">\r\n                  <div class=\"rdiv-process-step\">\r\n                      <div class=\"rdiv-step-number\">1<\/div>\r\n                      <h4 class=\"text-white\">Find Reddit Gallery<\/h4>\r\n                      <p class=\"rdiv-light-subtitle\">Copy the URL of any Reddit gallery post you want to view<\/p>\r\n                  <\/div>\r\n              <\/div>\r\n              \r\n              <div class=\"col-md-4\" data-aos=\"fade-up\" data-aos-delay=\"150\">\r\n                  <div class=\"rdiv-process-step\">\r\n                      <div class=\"rdiv-step-number\">2<\/div>\r\n                      <h4 class=\"text-white\">Paste Gallery URL<\/h4>\r\n                      <p class=\"rdiv-light-subtitle\">Paste the Reddit gallery URL into our viewer tool<\/p>\r\n                  <\/div>\r\n              <\/div>\r\n              \r\n              <div class=\"col-md-4\" data-aos=\"fade-up\" data-aos-delay=\"250\">\r\n                  <div class=\"rdiv-process-step\">\r\n                      <div class=\"rdiv-step-number\">3<\/div>\r\n                      <h4 class=\"text-white\">View Anonymously<\/h4>\r\n                      <p class=\"rdiv-light-subtitle\">See the gallery images without logging in or leaving traces<\/p>\r\n                  <\/div>\r\n              <\/div>\r\n          <\/div>\r\n      <\/div>\r\n  <\/section>\r\n  \r\n  <!-- Features Section -->\r\n  <section class=\"rdiv-features-section\">\r\n      <div class=\"container\">\r\n          <div class=\"text-center mb-5\" data-aos=\"fade-up\">\r\n              <h2 class=\"rdiv-section-title\">Key Features<\/h2>\r\n              <p class=\"rdiv-section-subtitle\">Our Reddit Gallery Viewer offers powerful features for anonymous gallery viewing<\/p>\r\n          <\/div>\r\n          \r\n          <div class=\"row\">\r\n              <div class=\"col-lg-4 mb-4\" data-aos=\"fade-up\" data-aos-delay=\"50\">\r\n                  <div class=\"rdiv-feature-card\">\r\n                      <div class=\"rdiv-feature-icon\">\r\n                          <i class=\"bx bx-image\"><\/i>\r\n                      <\/div>\r\n                      <h4>Complete Anonymity<\/h4>\r\n                      <p>View Reddit gallery images without revealing your identity or account<\/p>\r\n                  <\/div>\r\n              <\/div>\r\n              \r\n              <div class=\"col-lg-4 mb-4\" data-aos=\"fade-up\" data-aos-delay=\"150\">\r\n                  <div class=\"rdiv-feature-card\">\r\n                      <div class=\"rdiv-feature-icon\">\r\n                          <i class=\"bx bx-shield\"><\/i>\r\n                      <\/div>\r\n                      <h4>No Tracking<\/h4>\r\n                      <p>Reddit won't track your gallery views or recommend similar content<\/p>\r\n                  <\/div>\r\n              <\/div>\r\n              \r\n              <div class=\"col-lg-4 mb-4\" data-aos=\"fade-up\" data-aos-delay=\"250\">\r\n                  <div class=\"rdiv-feature-card\">\r\n                      <div class=\"rdiv-feature-icon\">\r\n                          <i class=\"bx bx-download\"><\/i>\r\n                      <\/div>\r\n                      <h4>Download Option<\/h4>\r\n                      <p>Save gallery images directly to your device without additional software<\/p>\r\n                  <\/div>\r\n              <\/div>\r\n              \r\n              <div class=\"col-lg-4 mb-5\" data-aos=\"fade-up\" data-aos-delay=\"50\">\r\n                  <div class=\"rdiv-feature-card\">\r\n                      <div class=\"rdiv-feature-icon\">\r\n                          <i class=\"bx bx-zoom-in\"><\/i>\r\n                      <\/div>\r\n                      <h4>High Resolution<\/h4>\r\n                      <p>View gallery images in full resolution with zoom capabilities<\/p>\r\n                  <\/div>\r\n              <\/div>\r\n              \r\n              <div class=\"col-lg-4 mb-5\" data-aos=\"fade-up\" data-aos-delay=\"150\">\r\n                  <div class=\"rdiv-feature-card\">\r\n                      <div class=\"rdiv-feature-icon\">\r\n                          <i class=\"bx bx-time\"><\/i>\r\n                      <\/div>\r\n                      <h4>No History<\/h4>\r\n                      <p>Your viewing activity isn't stored in your browser history<\/p>\r\n                  <\/div>\r\n              <\/div>\r\n              \r\n              <div class=\"col-lg-4 mb-5\" data-aos=\"fade-up\" data-aos-delay=\"250\">\r\n                  <div class=\"rdiv-feature-card\">\r\n                      <div class=\"rdiv-feature-icon\">\r\n                          <i class=\"bx bx-devices\"><\/i>\r\n                      <\/div>\r\n                      <h4>Cross-Platform<\/h4>\r\n                      <p>Works on all devices - desktop, tablet and mobile<\/p>\r\n                  <\/div>\r\n              <\/div>\r\n          <\/div>\r\n      <\/div>\r\n  <\/section>\r\n  \r\n  <!-- Why Choose Section -->\r\n  <section class=\"rdiv-why-choose-section\">\r\n      <div class=\"container\">\r\n          <div class=\"row align-items-center\">\r\n              <div class=\"col-lg-6 mb-5 mb-lg-0\" data-aos=\"fade-right\">\r\n                  <div class=\"rdiv-why-choose-image rdiv-floating-element\">\r\n                      <img decoding=\"async\" src=\"https:\/\/viewanonymous.com\/wp-content\/uploads\/2026\/03\/Reddit_Gallery_Viewer.webp\" alt=\"Instagram story viewer\" class=\"img-fluid rounded-3\">\r\n                  <\/div>\r\n              <\/div>\r\n              <div class=\"col-lg-6\" data-aos=\"fade-left\">\r\n                  <h2 class=\"rdiv-section-title mb-4\">Why Choose Our Reddit Gallery Viewer?<\/h2>\r\n                  <p class=\"mb-4\">Our tool provides the most private way to view Reddit gallery images without leaving any trace. Whether you're exploring content, avoiding tracking, or valuing your privacy, we make anonymous gallery viewing simple and efficient.<\/p>\r\n                  \r\n                  <div class=\"rdiv-benefit-item\">\r\n                      <div class=\"rdiv-benefit-icon\">\r\n                          <i class=\"bx bx-check\"><\/i>\r\n                      <\/div>\r\n                      <div>\r\n                          <h5 class=\"mb-1\">No account needed<\/h5>\r\n                          <p class=\"mb-0\">View gallery images without logging in or having a Reddit account<\/p>\r\n                      <\/div>\r\n                  <\/div>\r\n                  \r\n                  <div class=\"rdiv-benefit-item\">\r\n                      <div class=\"rdiv-benefit-icon\">\r\n                          <i class=\"bx bx-check\"><\/i>\r\n                      <\/div>\r\n                      <div>\r\n                          <h5 class=\"mb-1\">Bypass restrictions<\/h5>\r\n                          <p class=\"mb-0\">View gallery images even if they're age-restricted or NSFW<\/p>\r\n                      <\/div>\r\n                  <\/div>\r\n                  \r\n                  <div class=\"rdiv-benefit-item\">\r\n                      <div class=\"rdiv-benefit-icon\">\r\n                          <i class=\"bx bx-check\"><\/i>\r\n                      <\/div>\r\n                      <div>\r\n                          <h5 class=\"mb-1\">Fast loading<\/h5>\r\n                          <p class=\"mb-0\">Gallery images load quickly with our optimized delivery<\/p>\r\n                      <\/div>\r\n                  <\/div>\r\n                  \r\n                  <div class=\"rdiv-benefit-item\">\r\n                      <div class=\"rdiv-benefit-icon\">\r\n                          <i class=\"bx bx-check\"><\/i>\r\n                      <\/div>\r\n                      <div>\r\n                          <h5 class=\"mb-1\">Privacy focused<\/h5>\r\n                          <p class=\"mb-0\">No cookies, no tracking, no history stored<\/p>\r\n                      <\/div>\r\n                  <\/div>\r\n              <\/div>\r\n          <\/div>\r\n      <\/div>\r\n  <\/section>\r\n  \r\n  <!-- FAQ Section -->\r\n  <section class=\"rdiv-faq-section\">\r\n      <div class=\"container\">\r\n          <div class=\"text-center mb-5\" data-aos=\"fade-up\">\r\n              <h2 class=\"rdiv-section-title\">Frequently Asked Questions<\/h2>\r\n              <p class=\"rdiv-section-subtitle\">Find answers to common questions about our Reddit Gallery Viewer<\/p>\r\n          <\/div>\r\n          \r\n          <div class=\"row justify-content-center\">\r\n              <div class=\"col-lg-8\">\r\n                  <div class=\"accordion\" id=\"rdiv-faqAccordion\">\r\n                      <div class=\"rdiv-accordion-item mb-3\" data-aos=\"fade-up\" data-aos-delay=\"50\">\r\n                          <h3 class=\"accordion-header\" id=\"rdiv-heading1\">\r\n                              <button class=\"rdiv-accordion-button\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#rdiv-collapse1\" aria-expanded=\"true\" aria-controls=\"rdiv-collapse1\">\r\n                                  Is viewing Reddit gallery images anonymously legal?\r\n                              <\/button>\r\n                          <\/h3>\r\n                          <div id=\"rdiv-collapse1\" class=\"accordion-collapse collapse show\" aria-labelledby=\"rdiv-heading1\" data-bs-parent=\"#rdiv-faqAccordion\">\r\n                              <div class=\"rdiv-accordion-body\">\r\n                                  Yes, our tool is completely legal to use. It only allows you to view publicly available Reddit gallery images through our private viewer. We don't access private content or bypass any security measures.\r\n                              <\/div>\r\n                          <\/div>\r\n                      <\/div>\r\n                      \r\n                      <div class=\"rdiv-accordion-item mb-3\" data-aos=\"fade-up\" data-aos-delay=\"100\">\r\n                          <h3 class=\"accordion-header\" id=\"rdiv-heading2\">\r\n                              <button class=\"rdiv-accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#rdiv-collapse2\" aria-expanded=\"false\" aria-controls=\"rdiv-collapse2\">\r\n                                  Can I view private or deleted gallery images?\r\n                              <\/button>\r\n                          <\/h3>\r\n                          <div id=\"rdiv-collapse2\" class=\"accordion-collapse collapse\" aria-labelledby=\"rdiv-heading2\" data-bs-parent=\"#rdiv-faqAccordion\">\r\n                              <div class=\"rdiv-accordion-body\">\r\n                                  Our tool respects Reddit's privacy settings. We can only show gallery images that are set to public. For private or deleted galleries, the content won't be available.\r\n                              <\/div>\r\n                          <\/div>\r\n                      <\/div>\r\n                      \r\n                      <div class=\"rdiv-accordion-item mb-3\" data-aos=\"fade-up\" data-aos-delay=\"150\">\r\n                          <h3 class=\"accordion-header\" id=\"rdiv-heading3\">\r\n                              <button class=\"rdiv-accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#rdiv-collapse3\" aria-expanded=\"false\" aria-controls=\"rdiv-collapse3\">\r\n                                  Will Reddit know I viewed the gallery?\r\n                              <\/button>\r\n                          <\/h3>\r\n                          <div id=\"rdiv-collapse3\" class=\"accordion-collapse collapse\" aria-labelledby=\"rdiv-heading3\" data-bs-parent=\"#rdiv-faqAccordion\">\r\n                              <div class=\"rdiv-accordion-body\">\r\n                                  No, when you view through our anonymous viewer, your view won't be counted in Reddit's statistics and the platform won't know you viewed the gallery images.\r\n                              <\/div>\r\n                          <\/div>\r\n                      <\/div>\r\n                      \r\n                      <div class=\"rdiv-accordion-item mb-3\" data-aos=\"fade-up\" data-aos-delay=\"200\">\r\n                          <h3 class=\"accordion-header\" id=\"rdiv-heading4\">\r\n                              <button class=\"rdiv-accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#rdiv-collapse4\" aria-expanded=\"false\" aria-controls=\"rdiv-collapse4\">\r\n                                  Do I need to install any software?\r\n                              <\/button>\r\n                          <\/h3>\r\n                          <div id=\"rdiv-collapse4\" class=\"accordion-collapse collapse\" aria-labelledby=\"rdiv-heading4\" data-bs-parent=\"#rdiv-faqAccordion\">\r\n                              <div class=\"rdiv-accordion-body\">\r\n                                  No, our Reddit Gallery Viewer is completely web-based. You don't need to download or install any software. Simply visit our website, paste the gallery URL, and view anonymously.\r\n                              <\/div>\r\n                          <\/div>\r\n                      <\/div>\r\n                      \r\n                      <div class=\"rdiv-accordion-item mb-3\" data-aos=\"fade-up\" data-aos-delay=\"250\">\r\n                          <h3 class=\"accordion-header\" id=\"rdiv-heading5\">\r\n                              <button class=\"rdiv-accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#rdiv-collapse5\" aria-expanded=\"false\" aria-controls=\"rdiv-collapse5\">\r\n                                  Can I download gallery images with your tool?\r\n                              <\/button>\r\n                          <\/h3>\r\n                          <div id=\"rdiv-collapse5\" class=\"accordion-collapse collapse\" aria-labelledby=\"rdiv-heading5\" data-bs-parent=\"#rdiv-faqAccordion\">\r\n                              <div class=\"rdiv-accordion-body\">\r\n                                  Yes, our tool includes a download option that allows you to save Reddit gallery images directly to your device in their original quality.\r\n                              <\/div>\r\n                          <\/div>\r\n                      <\/div>\r\n                  <\/div>\r\n              <\/div>\r\n          <\/div>\r\n      <\/div>\r\n  <\/section>\r\n    \r\n    <!-- Footer -->\r\n    \r\n  \r\n  <!-- Copyright Section -->\r\n  \r\n  \r\n  \r\n  \r\n   <!-- Reddit Image Viewer js -->\r\n    <script src=\"https:\/\/tools.xrespond.com\/api\/rate-limit-handler.js\"><\/script>\r\n    <script src=\"https:\/\/tools.xrespond.com\/api\/js\/client-ip-detector.js\"><\/script>\r\n   <script>\r\n      class RedditImageViewer {\r\n          constructor() {\r\n              this.currentUser = null;\r\n              this.posts = [];\r\n              this.downloadController = null;\r\n              this.init();\r\n          }\r\n  \r\n          init() {\r\n              this.bindEvents();\r\n              this.setupModal();\r\n          }\r\n  \r\n          bindEvents() {\r\n              const searchForm = document.getElementById('searchForm');\r\n              const usernameInput = document.getElementById('usernameInput');\r\n  \r\n              searchForm.addEventListener('submit', (e) => {\r\n                  e.preventDefault();\r\n                  const rawInput = usernameInput.value.trim();\r\n                  const username = this.extractRedditUsername(rawInput);\r\n                  if (username) {\r\n                      this.searchUser(username);\r\n                  } else {\r\n                      this.showError('Please enter a valid Reddit username');\r\n                  }\r\n              });\r\n  \r\n              usernameInput.addEventListener('keypress', (e) => {\r\n                  if (e.key === 'Enter') {\r\n                      e.preventDefault();\r\n                      searchForm.dispatchEvent(new Event('submit'));\r\n                  }\r\n              });\r\n          }\r\n  \r\n          async searchUser(username) {\r\n              this.showLoading(true);\r\n              this.clearError();\r\n  \r\n              try {\r\n                  console.log(`Searching for user: ${username}`);\r\n                  const posts = await this.fetchUserPosts(username);\r\n  \r\n                  \/\/ Filter only image posts\r\n                  const imagePosts = posts.filter(post => this.hasImage(post));\r\n  \r\n                  if (imagePosts && imagePosts.length > 0) {\r\n                      this.currentUser = username;\r\n                      this.posts = imagePosts;\r\n                      this.displayUserInfo(username, imagePosts);\r\n                      this.displayPosts(imagePosts);\r\n                      this.showPostsSection(true);\r\n                      console.log(`Found ${imagePosts.length} image posts for ${username}`);\r\n                  } else {\r\n                      this.showError(`No image posts found for user \"${username}\". Try a different username.`);\r\n                      this.showPostsSection(false);\r\n                  }\r\n              } catch (error) {\r\n                  console.error('Error fetching posts:', error);\r\n                  this.showError(`Failed to fetch images for \"${username}\". Please try again.`);\r\n                  this.showPostsSection(false);\r\n              } finally {\r\n                  this.showLoading(false);\r\n              }\r\n          }\r\n  \r\n          hasImage(post) {\r\n              const hasPreviewImage = post.preview && post.preview.images && post.preview.images.length > 0;\r\n              const isGallery = post.is_gallery && post.media_metadata;\r\n              return hasPreviewImage || isGallery;\r\n          }\r\n  \r\n          async fetchUserPosts(username) {\r\n              try {\r\n                  console.log('Fetching posts from API...');\r\n                  const response = await fetch('https:\/\/tools.xrespond.com\/api\/reddit\/posts', {\r\n                      method: 'POST',\r\n                      headers: {\r\n                          'Content-Type': 'application\/x-www-form-urlencoded',\r\n                      },\r\n                      body: `username=${encodeURIComponent(username)}`\r\n                  });\r\n  \r\n                  if (!response.ok) {\r\n                      throw new Error(`API request failed: ${response.status} ${response.statusText}`);\r\n                  }\r\n  \r\n                  const data = await response.json();\r\n                  console.log('API Response:', data);\r\n  \r\n                  if (data.status === 'success' && data.data && data.data.body && Array.isArray(data.data.body)) {\r\n                      console.log(`Success! Found ${data.data.body.length} posts`);\r\n                      return data.data.body;\r\n                  } else {\r\n                      throw new Error('Invalid API response format or no posts found');\r\n                  }\r\n              } catch (error) {\r\n                  console.error('Fetch error:', error);\r\n                  throw error;\r\n              }\r\n          }\r\n  \r\n          displayUserInfo(username, posts) {\r\n              const userInfo = document.getElementById('userInfo');\r\n              const userAvatar = document.getElementById('userAvatar');\r\n              const userName = document.getElementById('userName');\r\n              const userDescription = document.getElementById('userDescription');\r\n              const userStats = document.getElementById('userStats');\r\n  \r\n              userAvatar.textContent = username.charAt(0).toUpperCase();\r\n              userName.textContent = `u\/${username}`;\r\n              userDescription.textContent = `Image Collection \u2022 ${posts.length} images found`;\r\n  \r\n              \/\/ Calculate image-specific stats\r\n              const totalUpvotes = posts.reduce((sum, post) => sum + (post.ups || 0), 0);\r\n              const totalComments = posts.reduce((sum, post) => sum + (post.num_comments || 0), 0);\r\n              const galleryPosts = posts.filter(post => post.is_gallery).length;\r\n              const singleImages = posts.length - galleryPosts;\r\n  \r\n              userStats.innerHTML = `\r\n                  <div class=\"stat-card\">\r\n                      <div class=\"stat-number\">${this.formatNumber(totalUpvotes)}<\/div>\r\n                      <div class=\"stat-label\">Total Upvotes<\/div>\r\n                  <\/div>\r\n                  <div class=\"stat-card\">\r\n                      <div class=\"stat-number\">${singleImages}<\/div>\r\n                      <div class=\"stat-label\">Single Images<\/div>\r\n                  <\/div>\r\n                  <div class=\"stat-card\">\r\n                      <div class=\"stat-number\">${galleryPosts}<\/div>\r\n                      <div class=\"stat-label\">Gallery Posts<\/div>\r\n                  <\/div>\r\n                  <div class=\"stat-card\">\r\n                      <div class=\"stat-number\">${this.formatNumber(totalComments)}<\/div>\r\n                      <div class=\"stat-label\">Total Comments<\/div>\r\n                  <\/div>\r\n              `;\r\n  \r\n              userInfo.style.display = 'block';\r\n          }\r\n  \r\n          displayPosts(posts) {\r\n              const container = document.getElementById('postsContainer');\r\n              const sectionTitle = document.getElementById('sectionTitle');\r\n  \r\n              sectionTitle.textContent = `${posts.length} Images from u\/${this.currentUser}`;\r\n              container.innerHTML = '';\r\n  \r\n              posts.forEach((post, index) => {\r\n                  const postCard = this.createPostCard(post);\r\n                  postCard.style.animationDelay = `${index * 0.1}s`;\r\n                  container.appendChild(postCard);\r\n              });\r\n          }\r\n  \r\n          createPostCard(post) {\r\n              const card = document.createElement('div');\r\n              card.className = 'post-card';\r\n  \r\n              const hasImage = post.preview && post.preview.images && post.preview.images.length > 0;\r\n              const isGallery = post.is_gallery && post.media_metadata;\r\n  \r\n              let mediaContent = '';\r\n              let postType = 'Image';\r\n  \r\n              if (isGallery) {\r\n                  postType = 'Gallery';\r\n                  const images = [];\r\n                  if (post.gallery_data && post.gallery_data.items) {\r\n                      post.gallery_data.items.forEach(item => {\r\n                          const mediaId = item.media_id;\r\n                          if (post.media_metadata[mediaId]) {\r\n                              const imageData = post.media_metadata[mediaId];\r\n                              if (imageData.s && imageData.s.u) {\r\n                                  images.push(imageData.s.u.replace(\/&\/g, '&'));\r\n                              }\r\n                          }\r\n                      });\r\n                  }\r\n  \r\n                  if (images.length > 0) {\r\n                      mediaContent = `\r\n                          <div class=\"media-container\">\r\n                              <div class=\"gallery-container\">\r\n                                  ${images.map((imageUrl, idx) => `\r\n                                      <img decoding=\"async\" src=\"${imageUrl}\" alt=\"Gallery image ${idx + 1}\" class=\"gallery-image\" onclick=\"redditImageViewer.openImageModal('${imageUrl}')\">\r\n                                  `).join('')}\r\n                              <\/div>\r\n                              <div class=\"media-controls\">\r\n                                  ${images.map((imageUrl, idx) => `\r\n                                      <button class=\"control-btn download-btn\" onclick=\"redditImageViewer.downloadImageBase64WithButtonSpinner(event, this, '${imageUrl}', '${this.sanitizeFilename(post.title)}_${idx + 1}.jpg')\">\r\n                                          <span class=\"btn-text\">\ud83d\udce5 Download Image ${idx + 1}<\/span>\r\n                                          <span class=\"btn-spinner\" style=\"display:none; margin-left:8px;\">\r\n                                              <span class=\"spinner\" style=\"width:18px;height:18px;border:3px solid #eee;border-top:3px solid #8A66FF;border-radius:50%;display:inline-block;vertical-align:middle;animation:spin 1s linear infinite;\"><\/span>\r\n                                          <\/span>\r\n                                      <\/button>\r\n                                  `).join('')}\r\n                              <\/div>\r\n                          <\/div>\r\n                      `;\r\n                  }\r\n              } else if (hasImage) {\r\n                  const image = post.preview.images[0];\r\n                  const imageUrl = image.source.url.replace(\/&\/g, '&');\r\n                  mediaContent = `\r\n                      <div class=\"media-container\">\r\n                          <img decoding=\"async\" src=\"${imageUrl}\" alt=\"${post.title}\" class=\"image-preview\" onclick=\"redditImageViewer.openImageModal('${imageUrl}')\">\r\n                          <div class=\"media-controls\">\r\n                              <button class=\"control-btn download-btn\" onclick=\"redditImageViewer.downloadImageBase64WithButtonSpinner(event, this, '${imageUrl}', '${this.sanitizeFilename(post.title)}.jpg')\">\r\n                                  <span class=\"btn-text\">\ud83d\udce5 Download Image<\/span>\r\n                                  <span class=\"btn-spinner\" style=\"display:none; margin-left:8px;\">\r\n                                      <span class=\"spinner\" style=\"width:18px;height:18px;border:3px solid #eee;border-top:3px solid #8A66FF;border-radius:50%;display:inline-block;vertical-align:middle;animation:spin 1s linear infinite;\"><\/span>\r\n                                  <\/span>\r\n                              <\/button>\r\n                          <\/div>\r\n                      <\/div>\r\n                  `;\r\n              }\r\n  \r\n              card.innerHTML = `\r\n                  <div class=\"post-header\">\r\n                      <div class=\"subreddit-info\">\r\n                          <div class=\"subreddit-badge\">${post.subreddit_name_prefixed || 'r\/unknown'}<\/div>\r\n                          <div class=\"post-type\">${postType}<\/div>\r\n                      <\/div>\r\n                      <div class=\"post-meta\">\r\n                          ${this.formatDate(post.created_utc)}\r\n                      <\/div>\r\n                  <\/div>\r\n  \r\n                  <h2 class=\"post-title\">${post.title || 'Untitled Image'}<\/h2>\r\n  \r\n                  <div class=\"post-content\">\r\n                      ${mediaContent}\r\n                  <\/div>\r\n  \r\n                  <div class=\"post-stats\">\r\n                      <div class=\"stat-item upvotes\">\r\n                          <div class=\"stat-value\">${this.formatNumber(post.ups || 0)}<\/div>\r\n                          <div class=\"stat-label\">Upvotes<\/div>\r\n                      <\/div>\r\n                      <div class=\"stat-item comments\">\r\n                          <div class=\"stat-value\">${this.formatNumber(post.num_comments || 0)}<\/div>\r\n                          <div class=\"stat-label\">Comments<\/div>\r\n                      <\/div>\r\n                  <\/div>\r\n              `;\r\n  \r\n              return card;\r\n          }\r\n  \r\n          async downloadImageBase64WithButtonSpinner(event, btn, imageUrl, filename) {\r\n              event.preventDefault();\r\n              const textSpan = btn.querySelector('.btn-text');\r\n              const spinnerSpan = btn.querySelector('.btn-spinner');\r\n              btn.disabled = true;\r\n              textSpan.style.display = 'none';\r\n              spinnerSpan.style.display = 'inline-block';\r\n              try {\r\n                  const proxyUrl = `https:\/\/tools.xrespond.com\/api\/reddit\/proxy-media-base64?url=${encodeURIComponent(imageUrl)}`;\r\n                  const response = await fetch(proxyUrl);\r\n                  if (!response.ok) throw new Error('Failed to fetch image');\r\n                  const data = await response.json();\r\n                  const base64data = `data:${data.contentType};base64,${data.base64}`;\r\n                  const a = document.createElement('a');\r\n                  a.href = base64data;\r\n                  a.download = filename;\r\n                  document.body.appendChild(a);\r\n                  a.click();\r\n                  document.body.removeChild(a);\r\n                  await new Promise(res => setTimeout(res, 1200)); \/\/ Show spinner briefly\r\n              } catch (error) {\r\n                  this.showError('Could not download image. Please try again later.');\r\n              } finally {\r\n                  btn.disabled = false;\r\n                  textSpan.style.display = '';\r\n                  spinnerSpan.style.display = 'none';\r\n              }\r\n          }\r\n  \r\n          showDownloadProgress(text, progress = 0, downloaded = 0, total = 0) {\r\n              const progressDiv = document.getElementById('downloadProgress');\r\n              const progressText = document.getElementById('progressText');\r\n              const progressFill = document.getElementById('progressBarFill');\r\n              const progressPercent = document.getElementById('progressPercent');\r\n              const progressSize = document.getElementById('progressSize');\r\n  \r\n              progressText.textContent = text;\r\n              progressFill.style.width = `${progress}%`;\r\n              progressPercent.textContent = `${Math.round(progress)}%`;\r\n              progressSize.textContent = `${this.formatFileSize(downloaded)} \/ ${this.formatFileSize(total)}`;\r\n  \r\n              progressDiv.classList.add('show');\r\n          }\r\n  \r\n          hideDownloadProgress() {\r\n              document.getElementById('downloadProgress').classList.remove('show');\r\n          }\r\n  \r\n          cancelDownload() {\r\n              if (this.downloadController) {\r\n                  this.downloadController.abort();\r\n                  this.downloadController = null;\r\n              }\r\n          }\r\n  \r\n          formatFileSize(bytes) {\r\n              if (bytes === 0) return '0 Bytes';\r\n              const k = 1024;\r\n              const sizes = ['Bytes', 'KB', 'MB', 'GB'];\r\n              const i = Math.floor(Math.log(bytes) \/ Math.log(k));\r\n              return parseFloat((bytes \/ Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];\r\n          }\r\n  \r\n          setupModal() {\r\n              const modal = document.getElementById('imageModal');\r\n              const closeBtn = document.querySelector('.close');\r\n  \r\n              closeBtn.onclick = () => {\r\n                  modal.style.display = 'none';\r\n              }\r\n  \r\n              window.onclick = (event) => {\r\n                  if (event.target === modal) {\r\n                      modal.style.display = 'none';\r\n                  }\r\n              }\r\n          }\r\n  \r\n          openImageModal(imageUrl) {\r\n              const modal = document.getElementById('imageModal');\r\n              const modalImg = document.getElementById('modalImage');\r\n              modal.style.display = 'block';\r\n              modalImg.src = imageUrl;\r\n          }\r\n  \r\n          showLoading(show) {\r\n              const searchBtn = document.getElementById('searchBtn');\r\n              const searchText = document.getElementById('searchText');\r\n              const searchSpinner = document.getElementById('searchSpinner');\r\n              const loading = document.getElementById('loading');\r\n  \r\n              if (show) {\r\n                  searchBtn.disabled = true;\r\n                  searchText.style.display = 'none';\r\n                  searchSpinner.style.display = 'block';\r\n                  loading.style.display = 'block';\r\n              } else {\r\n                  searchBtn.disabled = false;\r\n                  searchText.style.display = 'block';\r\n                  searchSpinner.style.display = 'none';\r\n                  loading.style.display = 'none';\r\n              }\r\n          }\r\n  \r\n          showPostsSection(show) {\r\n              const postsSection = document.getElementById('postsSection');\r\n              postsSection.style.display = show ? 'block' : 'none';\r\n          }\r\n  \r\n          showError(message) {\r\n              const errorContainer = document.getElementById('errorMessage');\r\n              errorContainer.textContent = message;\r\n              errorContainer.style.display = 'block';\r\n              setTimeout(() => {\r\n                  errorContainer.style.display = 'none';\r\n              }, 8000);\r\n          }\r\n  \r\n          clearError() {\r\n              document.getElementById('errorMessage').style.display = 'none';\r\n          }\r\n  \r\n          formatNumber(num) {\r\n              if (num >= 1000000) {\r\n                  return (num \/ 1000000).toFixed(1) + 'M';\r\n              } else if (num >= 1000) {\r\n                  return (num \/ 1000).toFixed(1) + 'K';\r\n              }\r\n              return num.toString();\r\n          }\r\n  \r\n          formatDate(timestamp) {\r\n              return new Date(timestamp * 1000).toLocaleDateString('en-US', {\r\n                  year: 'numeric',\r\n                  month: 'short',\r\n                  day: 'numeric'\r\n              });\r\n          }\r\n  \r\n          sanitizeFilename(filename) {\r\n              return filename.replace(\/[^a-z0-9]\/gi, '_').toLowerCase();\r\n          }\r\n  \r\n          extractRedditUsername(input) {\r\n              if (!input) return null;\r\n              input = input.trim();\r\n  \r\n              const urlMatch = input.match(\/reddit\\.com\\\/user\\\/([A-Za-z0-9_\\-\\.]+)\/i);\r\n              if (urlMatch) return urlMatch[1];\r\n  \r\n              const uMatch = input.match(\/^u\\\/(\\w[\\w\\-_.]*)$\/i);\r\n              if (uMatch) return uMatch[1];\r\n  \r\n              const plainMatch = input.match(\/^([A-Za-z0-9_\\-\\.]+)$\/);\r\n              if (plainMatch) return plainMatch[1];\r\n  \r\n              return null;\r\n          }\r\n      }\r\n  \r\n      function cancelDownload() {\r\n          redditImageViewer.cancelDownload();\r\n      }\r\n  \r\n      const redditImageViewer = new RedditImageViewer();\r\n  <\/script>\r\n    \r\n    <!-- Scripts -->\r\n      <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/js\/bootstrap.bundle.min.js\"><\/script>\r\n      <script src=\"https:\/\/unpkg.com\/aos@2.3.1\/dist\/aos.js\"><\/script>\r\n  \r\n    <!-- Vvveb Common Js -->\r\n    <script id=\"popper-js\" src=\"..\/js\/popper.min.js\"><\/script>\r\n  \r\n    <!-- Vvveb Ajax Common Js -->\r\n    <script id=\"app-js\" src=\"..\/js\/app.js\"><\/script>\r\n  \r\n    <!-- Animation -->\r\n  \r\n    <link rel=\"stylesheet\" href=\"..\/js\/aos.css\">\r\n    <noscript>\r\n      <style type=\"text\/css\">\r\n        [data-aos] {\r\n          opacity: 1 !important;\r\n          transform: translate(0) scale(1) !important;\r\n        }\r\n      <\/style>\r\n    <\/noscript>\r\n  \r\n    <script src=\"..\/js\/aos.js\"><\/script>\r\n    <script src=\"..\/js\/theme.js\"><\/script>\r\n  \r\n    <script>\r\n             \/\/ Initialize AOS animation\r\n          AOS.init({\r\n              duration: 800,\r\n              easing: 'ease-in-out',\r\n              once: true\r\n          });\r\n          \r\n          \/\/ Smooth scrolling for anchor links\r\n          document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\r\n              anchor.addEventListener('click', function (e) {\r\n                  e.preventDefault();\r\n                  document.querySelector(this.getAttribute('href')).scrollIntoView({\r\n                      behavior: 'smooth'\r\n                  });\r\n              });\r\n          });\r\n  <\/script>\r\n  \r\n  <grammarly-desktop-integration data-grammarly-shadow-root=\"true\"><\/grammarly-desktop-integration><grammarly-desktop-integration data-grammarly-shadow-root=\"true\"><\/grammarly-desktop-integration>\r\n  <grammarly-desktop-integration data-grammarly-shadow-root=\"true\"><\/grammarly-desktop-integration><script defer=\"\" src=\"https:\/\/static.cloudflareinsights.com\/beacon.min.js\/vcd15cbe7772f49c399c6a5babf22c1241717689176015\" integrity=\"sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==\" data-cf-beacon=\"{\"version\":\"2024.11.0\",\"token\":\"786b797d7952407aac48ed2776a3a826\",\"r\":1,\"server_timing\":{\"name\":{\"cfCacheStatus\":true,\"cfEdge\":true,\"cfExtPri\":true,\"cfL4\":true,\"cfOrigin\":true,\"cfSpeedBrain\":true},\"location_startswith\":null}}\" crossorigin=\"anonymous\"><\/script>\r\n  <script defer=\"\" src=\"https:\/\/static.cloudflareinsights.com\/beacon.min.js\/v8c78df7c7c0f484497ecbca7046644da1771523124516\" integrity=\"sha512-8DS7rgIrAmghBFwoOTujcf6D9rXvH8xm8JQ1Ja01h9QX8EzXldiszufYa4IFfKdLUKTTrnSFXLDkUEOTrZQ8Qg==\" data-cf-beacon=\"{\"version\":\"2024.11.0\",\"token\":\"786b797d7952407aac48ed2776a3a826\",\"r\":1,\"server_timing\":{\"name\":{\"cfCacheStatus\":true,\"cfEdge\":true,\"cfExtPri\":true,\"cfL4\":true,\"cfOrigin\":true,\"cfSpeedBrain\":true},\"location_startswith\":null}}\" crossorigin=\"anonymous\"><\/script>\r\n \n","protected":false},"author":1,"featured_media":0,"parent":264,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-271","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/viewanonymous.com\/wp-json\/wp\/v2\/pages\/271","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/viewanonymous.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/viewanonymous.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/viewanonymous.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/viewanonymous.com\/wp-json\/wp\/v2\/comments?post=271"}],"version-history":[{"count":5,"href":"https:\/\/viewanonymous.com\/wp-json\/wp\/v2\/pages\/271\/revisions"}],"predecessor-version":[{"id":581,"href":"https:\/\/viewanonymous.com\/wp-json\/wp\/v2\/pages\/271\/revisions\/581"}],"up":[{"embeddable":true,"href":"https:\/\/viewanonymous.com\/wp-json\/wp\/v2\/pages\/264"}],"wp:attachment":[{"href":"https:\/\/viewanonymous.com\/wp-json\/wp\/v2\/media?parent=271"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}