Embed

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>RaceChip Navigation</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f4f4f9;
    }

    /* Navbar styling */
    .navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #ff5733;
      padding: 10px 20px;
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 1000;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .navbar .brand {
      font-size: 1.2em;
      font-weight: bold;
      color: white;
    }

    .navbar-links {
      display: flex;
      gap: 10px;
    }

    .navbar-links a {
      color: white;
      text-decoration: none;
      font-size: 1em;
      font-weight: bold;
      padding: 10px 20px;
      border-radius: 5px;
      transition: background-color 0.3s;
    }

    .navbar-links a:hover {
      background-color: #e64e2c;
    }

    /* Hamburger menu */
    .hamburger {
      display: none;
      flex-direction: column;
      cursor: pointer;
    }

    .hamburger div {
      width: 25px;
      height: 3px;
      background-color: white;
      margin: 4px 0;
    }

    /* Mobile Menu */
    .mobile-menu {
      display: none;
      flex-direction: column;
      background-color: #ff5733;
      position: fixed;
      top: 50px;
      right: 0;
      width: 100%;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      z-index: 999;
    }

    .mobile-menu a {
      color: white;
      text-decoration: none;
      font-size: 1em;
      font-weight: bold;
      padding: 15px 20px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    .mobile-menu a:last-child {
      border-bottom: none;
    }

    /* Responsive */
    @media (max-width: 1024px) {
      .navbar-links {
        display: none; /* Hide desktop links */
      }

      .hamburger {
        display: flex; /* Show hamburger menu */
      }
    }
  </style>
</head>
<body>
  <div class="navbar">
    <div class="brand">RaceChip</div>
    <div class="navbar-links">
      <a href="https://www.rpmsussex.com/racechip-s" id="s-link">RaceChip S</a>
      <a href="https://www.rpmsussex.com/racechip-rs" id="rs-link">RaceChip RS</a>
      <a href="https://www.rpmsussex.com/racechip-gts-5" id="gts-link">RaceChip GTS</a>
      <a href="https://www.rpmsussex.com/pedal-box-xlr" id="xlr-link">RaceChip XLR</a>
      <a href="https://www.rpmsussex.com/racechip-rx" id="electric-car-rx-link">Electric Car RX</a>
    </div>
    <div class="hamburger" onclick="toggleMenu()">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>

  <div class="mobile-menu" id="mobile-menu">
    <a href="https://www.rpmsussex.com/racechip-s" id="s-link-mobile">RaceChip S</a>
    <a href="https://www.rpmsussex.com/racechip-rs" id="rs-link-mobile">RaceChip RS</a>
    <a href="https://www.rpmsussex.com/racechip-gts-5" id="gts-link-mobile">RaceChip GTS</a>
    <a href="https://www.rpmsussex.com/pedal-box-xlr" id="xlr-link-mobile">RaceChip XLR</a>
    <a href="https://www.rpmsussex.com/racechip-rx" id="electric-car-rx-link-mobile">Electric Car RX</a>
  </div>

  <script>
    function toggleMenu() {
      const mobileMenu = document.getElementById('mobile-menu');
      const isMenuOpen = mobileMenu.style.display === 'flex';
      mobileMenu.style.display = isMenuOpen ? 'none' : 'flex';

      if (!isMenuOpen) {
        document.addEventListener('click', closeMenuOnOutsideClick);
      }
    }

    function closeMenuOnOutsideClick(event) {
      const mobileMenu = document.getElementById('mobile-menu');
      const hamburger = document.querySelector('.hamburger');
      if (!mobileMenu.contains(event.target) && !hamburger.contains(event.target)) {
        mobileMenu.style.display = 'none';
        document.removeEventListener('click', closeMenuOnOutsideClick);
      }
    }
  </script>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>RaceChip RX</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
    }

    .hero-section {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: url('https://www.racechip.co.uk/skin/frontend/racechip/default/images/rx/rx-product-overview-stage-bg_tablet-portrait_1920x1265.jpg') no-repeat center center;
      background-size: cover;
      color: white;
      padding: 40px;
      height: 400px;
    }

    .hero-content {
      max-width: 50%;
    }

    .hero-content img {
      width: 120px;
      margin-bottom: 20px;
    }

    .hero-content h1 {
      font-size: 2.5em;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .hero-content p {
      font-size: 1.2em;
      margin: 10px 0;
    }

    .cta-buttons {
      display: flex;
      align-items: center;
      gap: 15px;
    }

    .cta-buttons .cta {
      background-color: #ff0000;
      color: white;
      padding: 10px 20px;
      font-size: 1em;
      text-align: center;
      text-decoration: none;
      border-radius: 5px;
      transition: all 0.3s ease;
    }

    .cta-buttons .cta:hover {
      background-color: #b30000;
    }

    .cta-buttons .price {
      background-color: #333;
      color: white;
      padding: 10px 20px;
      font-size: 1em;
      text-align: center;
      border-radius: 5px;
    }

    .image-container {
      max-width: 50%;
      text-align: center;
    }

    .image-container img {
      max-width: 200px;
      height: auto;
      display: block;
      margin: 0 auto;
      background-color: white; /* Add white background */
      border-radius: 10px; /* Rounded corners for aesthetic */
      padding: 10px; /* Padding inside the background */
      transition: transform 0.3s ease, box-shadow 0.3s ease; /* Hover animation */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .image-container img:hover {
      transform: scale(1.1); /* Slight zoom effect */
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* Stronger shadow on hover */
    }

    @media (max-width: 1024px) {
      .hero-section {
        flex-direction: column;
        text-align: center;
        height: auto;
        padding: 20px;
      }

      .hero-content {
        max-width: 100%;
        margin-bottom: 20px;
        text-align: center;
      }

      .image-container img {
        max-width: 80%;
      }

      .cta-buttons {
        flex-direction: column;
        gap: 10px;
      }
    }

    @media (max-width: 768px) {
      .hero-content h1 {
        font-size: 2em;
      }

      .hero-content p {
        font-size: 1em;
      }

      .cta-buttons .cta,
      .cta-buttons .price {
        font-size: 0.9em;
        padding: 8px 15px;
      }
    }
  </style>
</head>
<body>
  <section class="hero-section">
    <div class="hero-content">
      <img src="https://www.racechip.co.uk/skin/frontend/racechip/default/images/rx/rx-logo.svg" alt="RaceChip RX Logo">
      <h1>RaceChip RX</h1>
      <p>
        Experience ultimate driving pleasure with the RaceChip RX and unlock additional range for your electric vehicle! 
        Our innovative product offers you a new dimension of driving pleasure and increases the range, making it easier 
        to handle your electric vehicle in everyday life.
      </p>
      <div class="cta-buttons">
        <a href="#" class="cta">Configure Your Chip</a>
        <div class="price">From £200 GBP</div>
      </div>
    </div>
    <div class="image-container">
      <img src="https://www.racechip.co.uk/skin/frontend/racechip/default/images/rx/rx-logo.svg" alt="RaceChip RX">
    </div>
  </section>
</body>
</html>


Video

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>RaceChip RX</title>
  <style>
    .racechip-rx-section {
      margin: 0 auto;
      font-family: Arial, sans-serif;
      background-color: #f4f4f9;
      color: #333;
      max-width: 1200px;
      padding: 20px;
    }

    .racechip-rx-container {
      display: flex;
      flex-wrap: nowrap;
      align-items: flex-start;
      justify-content: center;
      gap: 30px;
    }

    .racechip-rx-container .image-container {
      flex: 1;
      text-align: center;
    }

    .racechip-rx-container .image-container img {
      max-width: 100%;
      height: auto;
      border-radius: 5px;
    }

    .racechip-rx-container .text-content {
      flex: 2;
    }

    .racechip-rx-container .text-content h1 {
      font-size: 2em;
      color: #0b5394;
      margin-bottom: 20px;
    }

    .racechip-rx-container .text-content p {
      font-size: 1em;
      line-height: 1.5;
      margin-bottom: 20px;
    }

    .racechip-rx-container .text-content ul {
      padding-left: 20px;
    }

    .racechip-rx-container .text-content ul li {
      list-style-type: none;
      position: relative;
      padding-left: 20px;
      margin-bottom: 10px;
    }

    .racechip-rx-container .text-content ul li::before {
      content: "✔";
      color: #0b5394;
      position: absolute;
      left: 0;
      top: 0;
    }

    .racechip-rx-icons {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: flex-start;
      margin-top: 20px;
    }

    .racechip-rx-icons .icon-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      flex: 0 1 calc(25% - 20px);
    }

    .racechip-rx-icons .icon-item img {
      width: 50px;
      height: 50px;
      margin-bottom: 10px;
    }

    .racechip-rx-icons .icon-item p {
      font-size: 0.9em;
      color: #333;
    }

    @media (max-width: 768px) {
      .racechip-rx-container {
        flex-direction: column;
        align-items: center;
      }

      .racechip-rx-icons .icon-item {
        flex: 0 1 calc(50% - 10px);
      }
    }

    @media (max-width: 480px) {
      .racechip-rx-icons .icon-item {
        flex: 0 1 100%;
      }
    }
  </style>
</head>
<body>
  <div class="racechip-rx-section">
    <div class="racechip-rx-container">
      <div class="image-container">
        <img src="https://www.racechip.co.uk/skin/frontend/racechip/default/images/rx/rx-sport.png" alt="RaceChip RX">
      </div>
      <div class="text-content">
        <h1>RACECHIP RX</h1>
        <p>
          Specially designed for use in electric vehicles, the RaceChip RX offers significantly more driving pleasure
          thanks to a more agile response of the accelerator pedal. The 3 individually selectable driving modes allow
          the preferred setting to be changed at any time and thus adapted to the situation. The integrated memory
          function also stores the last selected driving mode.
        </p>
        <ul>
          <li>Sport: For sporty driving dynamics</li>
          <li>Comfort: Perfect and pleasant response of the accelerator</li>
          <li>Eco: Optimizes energy recovery and reduces consumption, which can result in an additional range of up to 10%</li>
        </ul>
      </div>
    </div>
    <div class="racechip-rx-icons">
      <div class="icon-item">
        <img src="https://www.racechip.co.uk/skin/frontend/racechip/default/images/icons/rx/icon-feature-pedal-shop.svg" alt="Improved responsiveness">
        <p>Improved responsiveness</p>
      </div>
      <div class="icon-item">
        <img src="https://www.racechip.co.uk/skin/frontend/racechip/default/images/icons/rx/icon-feature-fahrstufen-shop.svg" alt="3 Individual Stages">
        <p>3 Individual Stages</p>
      </div>
      <div class="icon-item">
        <img src="https://www.racechip.co.uk/skin/frontend/racechip/default/images/icons/rx/icon-feature-batterie-shop.svg" alt="Range Extension">
        <p>Range Extension</p>
      </div>
      <div class="icon-item">
        <img src="https://www.racechip.co.uk/skin/frontend/racechip/default/images/icons/rx/icon-for-evs.svg" alt="Developed for EVs">
        <p>Developed specifically for EVs</p>
      </div>
      <div class="icon-item">
        <img src="https://www.racechip.co.uk/skin/frontend/racechip/default/images/icons/rx/icon-feature-einbau-shop.svg" alt="Easy Installation">
        <p>Easy Installation</p>
      </div>
      <div class="icon-item">
        <img src="https://www.racechip.co.uk/skin/frontend/racechip/default/images/icons/rx/icon-signet-racechip.svg" alt="RSS System">
        <p>RSS (Racechip Safety System)</p>
      </div>
      <div class="icon-item">
        <img src="https://www.racechip.co.uk/skin/frontend/racechip/default/images/icons/rx/icon-feature-bluetooth-shop-rx.svg" alt="App Control">
        <p>App Control</p>
      </div>
      <div class="icon-item">
        <img src="https://www.racechip.co.uk/skin/frontend/racechip/default/images/icons/rx/icon-feature-bluetooth-shop.svg" alt="Controller">
        <p>Controller (Optional, +50 GBP)</p>
      </div>
    </div>
  </div>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>How Does the Range Extender Work?</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background-color: #ffffff;
      color: #333;
    }

    .range-extender-section {
      max-width: 1200px;
      margin: 20px auto; /* Reduced vertical margin */
      padding: 10px 20px; /* Reduced padding */
      text-align: center;
      background-color: #fff;
    }

    .range-extender-section h1 {
      font-size: 2em;
      color: #000;
      margin-bottom: 10px; /* Reduced margin below the heading */
      font-weight: bold;
    }

    .range-extender-section p {
      font-size: 1em;
      line-height: 1.6; /* Slightly tighter line spacing */
      color: #333;
      max-width: 800px;
      margin: 0 auto 10px auto; /* Reduced bottom margin */
    }

    .range-extender-section hr {
      border: none;
      border-top: 1px solid #ddd;
      margin: 10px auto; /* Reduced margin for the separator */
      max-width: 800px;
    }

    @media (max-width: 768px) {
      .range-extender-section h1 {
        font-size: 1.8em;
      }

      .range-extender-section p {
        font-size: 0.95em;
        line-height: 1.5; /* Slightly tighter line spacing for smaller screens */
      }
    }
  </style>
</head>
<body>
  <section class="range-extender-section">
    <h1>How Does the Range Extender Work?</h1>
    <hr>
    <p>
      The RaceChip RX is attached between the accelerator pedal sensor and the engine control unit. Simple plug & play installation means that it can be fitted without any prior technical knowledge. The signals emitted by the accelerator pedal sensor are adjusted via specially tuned characteristic curves. This results in a more linear torque demand on the electric motor and increased energy recovery when the accelerator pedal is released. As a result, less energy is lost and energy recovery is improved during braking; the same battery capacity will cover a longer distance.
    </p>
  </section>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple and Easy Installation</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #0b5394; /* Blue background */
    }

    .installation-section {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      padding: 40px 20px;
    }

    .installation-image {
      flex: 1;
      min-width: 300px;
      max-width: 500px;
      text-align: center;
      margin-bottom: 20px;
    }

    .installation-image img {
      max-width: 100%;
      height: auto;
      border-radius: 10px; /* Slightly rounded corners */
    }

    .installation-text {
      flex: 2;
      margin: 0 20px;
      text-align: left;
      background-color: white; /* White background for the text box */
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow for better separation */
      transition: transform 0.3s, box-shadow 0.3s; /* Hover transition */
    }

    .installation-text:hover {
      transform: scale(1.05); /* Slight zoom on hover */
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Stronger shadow on hover */
    }

    .installation-text h1 {
      font-size: 1.8em;
      font-weight: bold;
      margin-bottom: 20px;
      text-align: center;
      color: black; /* Black text for the title */
    }

    .installation-text ol {
      list-style-type: decimal;
      padding-left: 20px;
      line-height: 1.8;
      margin-bottom: 20px;
    }

    .installation-text ol li {
      font-size: 1em;
      margin-bottom: 10px;
      font-weight: bold; /* Make bullet text bold */
      color: black; /* Black text for the list items */
    }

    .installation-text p {
      font-size: 1.2em;
      font-weight: bold;
      text-align: center;
      margin-top: 20px;
      color: #ff0000; /* Red text for emphasis */
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Add subtle shadow to the text */
    }

    @media (max-width: 768px) {
      .installation-section {
        flex-direction: column;
      }

      .installation-text {
        margin: 20px 0;
        text-align: center;
      }

      .installation-text ol {
        text-align: left;
      }
    }
  </style>
</head>
<body>
  <section class="installation-section">
    <div class="installation-image">
      <img src="https://www.racechip.co.uk/media/wysiwyg/pdp_images/xlr-installation.png" alt="Throttle Installation Diagram">
    </div>
    <div class="installation-text">
      <h1>Simple and easy to understand – installed in a few steps</h1>
      <ol>
        <li>Disconnect the plug from the original plug adapter on the accelerator pedal.</li>
        <li>Connect the Brainbox to this original plug adapter.</li>
        <li>Mount the Brainbox on a smooth surface in the footwell.</li>
        <li>Set up the RaceChip+ app to control the RX.</li>
        <li>Done! Now you can drive and save. Have fun!</li>
      </ol>
      <p>RPM will fit and set up for just £25!</p>
    </div>
  </section>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Performance Highlights</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
    }

    .performance-highlights-section {
      background: url('https://www.racechip.co.uk/media/wysiwyg/racechip-gts/gts_press_bg_desktop.jpg') no-repeat center center;
      background-size: cover;
      padding: 40px 20px;
      color: white;
    }

    .performance-highlights-container {
      display: flex;
      overflow-x: scroll;
      scroll-snap-type: x mandatory;
      gap: 20px;
      padding: 20px 0;
      scrollbar-width: none; /* Hide scrollbar */
    }

    .performance-highlights-container::-webkit-scrollbar {
      display: none; /* Hide scrollbar */
    }

    .performance-highlight-item {
      flex: 0 0 auto;
      scroll-snap-align: center;
      width: 300px;
      height: auto;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
      text-align: center;
      position: relative;
      background-color: rgba(0, 0, 0, 0.5);
      transition: transform 0.3s, box-shadow 0.3s;
    }

    .performance-highlight-item:hover {
      transform: scale(1.05);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
    }

    .performance-highlight-item img {
      width: 100%;
      height: auto;
    }

    .performance-highlight-item span {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0, 0, 0, 0.7);
      color: white;
      padding: 5px 10px;
      border-radius: 5px;
      font-size: 1em;
    }

    @media (max-width: 768px) {
      .performance-highlight-item {
        width: 200px;
      }
    }
  </style>
</head>
<body>
  <section class="performance-highlights-section">
    <div class="performance-highlights-container" id="carousel">
      <div class="performance-highlight-item">
        <img src="https://www.racechip.co.uk/media/wysiwyg/product_overlay/test_badges/absc_mb_c43_amg.png" alt="Mercedes C43 AMG">
        <span>Mercedes C43 AMG</span>
      </div>
      <div class="performance-highlight-item">
        <img src="https://www.racechip.co.uk/media/wysiwyg/product_overlay/test_badges/absc_audi_rs3.png" alt="Audi RS3">
        <span>Audi RS3</span>
      </div>
      <div class="performance-highlight-item">
        <img src="https://www.racechip.co.uk/media/wysiwyg/product_overlay/test_badges/absc_porsche_macan_turbo.png" alt="Porsche Macan Turbo">
        <span>Porsche Macan Turbo</span>
      </div>
      <div class="performance-highlight-item">
        <img src="https://www.racechip.co.uk/media/wysiwyg/product_overlay/test_badges/absc_volkswagen_golf_7_r.png" alt="Volkswagen Golf 7 R">
        <span>Volkswagen Golf 7 R</span>
      </div>
      <div class="performance-highlight-item">
        <img src="https://www.racechip.co.uk/media/wysiwyg/product_overlay/test_badges/absc_porsche_panamera_4s_diesel.png" alt="Porsche Panamera 4S Diesel">
        <span>Porsche Panamera 4S Diesel</span>
      </div>
    </div>
  </section>

  <script>
    const carousel = document.getElementById('carousel');

    let startX = 0;
    let scrollLeft = 0;

    // Touch start event
    carousel.addEventListener('touchstart', (e) => {
      startX = e.touches[0].pageX;
      scrollLeft = carousel.scrollLeft;
    });

    // Touch move event
    carousel.addEventListener('touchmove', (e) => {
      const x = e.touches[0].pageX;
      const walk = startX - x; // Calculate the distance moved
      carousel.scrollLeft = scrollLeft + walk;
    });
  </script>
</body>
</html>
