{"id":4179,"date":"2024-02-28T23:41:59","date_gmt":"2024-02-28T14:41:59","guid":{"rendered":"https:\/\/p-tomboy.com\/?page_id=4179"},"modified":"2026-08-04T19:21:31","modified_gmt":"2026-08-04T10:21:31","slug":"trike-builder","status":"publish","type":"page","link":"https:\/\/p-tomboy.com\/en\/trike-builder\/","title":{"rendered":"Trike Designer"},"content":{"rendered":"\r\n\r\n<script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"><\/script>\r\n\r\n<script>\r\n$(document).ready()\r\n\r\n<!-- FIRST JAVASCRIPT -->\r\n\r\nvar images = [];\r\nvar imageNames = [\r\n  'skeleton_black.png',\r\n  'skeleton_red.png',\r\n  'skeleton_blue.png',\r\n  'skeleton_white.png',\r\n  'groundEffects_black.png',\r\n  'groundEffects_red.png',\r\n  'groundEffects_blue.png',\r\n  'groundEffects_white.png',\r\n  'chromeWheels.png',\r\n  'blackWheels.png',\r\n  'lightbar_white.png',\r\n  'paint_roller_white.png',\r\n  'paint_roller_blue.jpg',\r\n  'paint_roller_black.png',\r\n  'paint_roller_red.png'\r\n];\r\nvar preloadedCount = 0;\r\n\r\nfor (var i = 0; i < imageNames.length; i++) {\r\n  var imagePath = 'https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/' + imageNames[i];\r\n  var image = new Image();\r\n  image.src = imagePath;\r\n  images.push(image);\r\n  \r\n  \/\/ Event listener to track preloaded images\r\n  image.addEventListener('load', function() {\r\n    preloadedCount++;\r\n    if (preloadedCount === imageNames.length) {\r\n      console.log('All images have been preloaded.');\r\n    }\r\n  });\r\n}\r\n\r\nfunction fadeIn(element) {\r\n  element.style.opacity = 0; \/\/ Set initial opacity to 0\r\n  var tick = function () {\r\n    element.style.opacity = +element.style.opacity + 0.05; \/\/ Increment opacity by 0.05 for fade-in effect\r\n    if (+element.style.opacity < 1) {\r\n      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);\r\n    }\r\n  };\r\n  tick();\r\n}\r\n\r\nfunction fadeOutAndIn(element, newImageSrc) {\r\n  element.style.opacity = 1; \/\/ Set initial opacity to 1\r\n  var tick = function () {\r\n    element.style.opacity = +element.style.opacity - 0.05; \/\/ Decrement opacity by 0.05 for fade-out effect\r\n    if (+element.style.opacity > 0) {\r\n      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);\r\n    } else {\r\n      \/\/ Once fade-out is complete, update the image source and trigger the fade-in animation\r\n      element.src = newImageSrc;\r\n      fadeIn(element);\r\n    }\r\n  };\r\n  tick();\r\n}\r\n\r\n\r\n<\/script>\r\n\r\n\r\n<style>\r\n\r\n.p-page-header {\r\n\r\n}\r\n\r\n  .custom-container {\r\n    position: fixed !important;\r\n    left: 100px;\r\n\r\n\r\n  }\r\n\r\n  @media screen and (max-width: 600px) {\r\n    .custom-container {\r\n      left: 0px;\r\n    }\r\n  }\r\n\r\n  @media screen and (min-width: 601px) and (max-width: 766px) {\r\n    .custom-container {\r\n      left: 0px;\r\n    }\r\n  }\r\n\r\n  @media screen and (min-width: 767px) and (max-width: 991px) {\r\n    .custom-container {\r\n      left: 60px;\r\n    }\r\n  }\r\n\r\n.container1 {\r\n    position: fixed;\r\n    top:0;\r\n    left: 0;\r\n    width: 100%;\r\n    background-color: white;\r\n    z-index: 1;\r\n    margin-bottom:500px;\r\n    height:630px;\r\n}\r\n\r\n.container1::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    bottom: -20px;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 20px;\r\n    background-image: linear-gradient(to bottom, rgba(233, 233, 233, .4) 0%, transparent);\r\n    }\r\n\r\n  .content {\r\n    padding-top: 0px;\r\n    padding-bottom: 0px;\r\n  }\r\n\r\n  .animate-div {\r\n    \/* Add the animation styles here *\/\r\n    animation-name: fadeInOut;\r\n    animation-duration: 3s;\r\n    animation-iteration-count: 1;\r\n  }\r\n\r\n  @keyframes fadeInOut {\r\n    0% {\r\n      opacity: 0;\r\n      transform: translateY(20px);\r\n    }\r\n\r\n    100% {\r\n      opacity: 1;\r\n      transform: translateY(0px);\r\n    }\r\n  }\r\n\r\n  .buttons {\r\n    z-index: 3;\r\n  }\r\n\r\n  img {\r\n    max-width: 100%;\r\n    height: auto;\r\n  }\r\n\r\n  .hidden {\r\n    display: none;\r\n  }\r\n\r\n  .optionSetContainer {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    padding: 0px 0;\r\n    margin-top: 0px;\r\n  }\r\n\r\n  .optionSet {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    margin-top: 0px;\r\n  }\r\n\r\n  .optionSetHeader {\r\n    text-align: center;\r\n    margin-bottom: 10px;\r\n    margin-top: 30px;\r\n  }\r\n\r\n  .optionButtons {\r\n    display: flex;\r\n    justify-content: center;\r\n    gap: 20px;\r\n    padding: 0px;\r\n  }\r\n\r\n  .optionButton {\r\n    padding: 5px;\r\n  }\r\n\r\n  .triKeImageContainer {\r\n    position: fixed;\r\n    z-index: 1;\r\n  }\r\n\r\n  .fade-out {\r\n    opacity: 0;\r\n    transition: opacity 0.5s ease-in-out;\r\n  }\r\n\r\n  .container {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    margin: 0 auto;\r\n    padding-top: 0px;\r\n  }\r\n\r\n  .box {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n  }\r\n\r\n  h3 {\r\n    font-size: 1.2rem;\r\n    margin-bottom: 0.5rem;\r\n  }\r\n\r\n  button {\r\n    padding: 0.5rem 1rem;\r\n    font-size: 1rem;\r\n  }\r\n\r\n  .trikeContainer {\r\n    position: fixed;\r\n    top: 10%;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    z-index: 100;\r\n    max-width: 800px;\r\n    min-width: 500px;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n  }\r\n\r\n@media screen and (max-width: 468px) {\r\n  .trikeContainer {\r\n    max-width: 750px;\r\n    min-width: 300px;\r\n  }\r\n  .container1 {\r\n    height: 300px;\r\n  }\r\n.p-page-header {\r\nheight: 190px;\r\n}\r\n}\r\n\r\n@media screen and (max-width: 499px) and (min-width: 469px) {\r\n  .trikeContainer {\r\n    max-width: 650px;\r\n    min-width: 350px;\r\n  }\r\n  .container1 {\r\n    height: 340px;\r\n  }\r\n\r\n.p-page-header {\r\nheight: 250px;\r\n}\r\n}\r\n\r\n@media screen and (min-width: 500px) and (max-width: 767px) {\r\n  .trikeContainer {\r\n    max-width: 850px;\r\n    min-width: 450px;\r\n  }\r\n  .container1 {\r\n    height: 400px;\r\n  }\r\n.p-page-header {\r\nheight: 290px;\r\n}\r\n}\r\n\r\n@media screen and (min-width: 768px) and (max-width: 1023px) {\r\n  .trikeContainer {\r\n    max-width: 550px;\r\n    min-width: 450px;\r\n  }\r\n  .container1 {\r\n    height: 420px;\r\n  }\r\n\r\n.p-page-header {\r\nheight: 0px;\r\n}\r\n}\r\n\r\n@media screen and (min-width: 1024px) and (max-width: 1448px){\r\n  .trikeContainer {\r\n    max-width: 800px;\r\n    min-width: 700px;\r\n  }\r\n  .container1 {\r\n    height: 550px;\r\n  }\r\n.p-page-header {\r\nheight: 100px;\r\n}\r\n}\r\n\r\n@media screen and (min-width: 1450px){\r\n  .trikeContainer {\r\n    max-width: 800px;\r\n    min-width: 700px;\r\n  }\r\n  .container1 {\r\n    height: 580px;\r\n  }\r\n.p-page-header {\r\nheight: 550px;\r\n}\r\n}\r\n\r\n\r\n\r\n\/* styles for option boxes down the page, groundeffects, wheels, etc *\/\r\n\r\n.informationContainer {\r\n  display: flex;\r\n  padding: 20px;\r\n}\r\n\r\n.options-container {\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  align-items: center;\r\n  padding-right: 20px;\r\n}\r\n\r\n.optionSetHeader {\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.html-content-class {\r\n  text-align: center;\r\n  padding: 20px;\r\n}\r\n\r\n.image-container {\r\n  flex: 1;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.image-content img {\r\n  max-width: 100%;\r\n  height: auto;\r\n}\r\n\r\n@media only screen and (max-width: 600px) {\r\n  .informationContainer {\r\n    flex-direction: column;\r\n  }\r\n}\r\n\r\n\r\n<\/style>\r\n\r\n\r\n\r\n<div class=\"custom-container\">\r\n<div class=\"container1\">\r\n  <div class=\"content\"><\/div>\r\n<\/div>\r\n  <div class=\"buttons\">\r\n\r\n  <div class=\"trikeContainer\" id=\"fade-out\" style=\"display: grid; grid-template-columns: [first-col] 100%; grid-template-rows: [first-row];\">\r\n\r\n    <img decoding=\"async\" class=\"skeletonTrike \" src=\"https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/skeleton_white.png\" style=\"grid-column-start: first-col; grid-row-start: first-row;\">\r\n\r\n    <img decoding=\"async\" class=\"chromeWheels\" style=\"grid-column-start: first-col; grid-row-start: first-row;\" src=\"https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/chromeWheels.png\" \/>\r\n\r\n      <img decoding=\"async\" class=\"blackWheels hidden\" style=\"grid-column-start: first-col; grid-row-start: first-row;\" src=\"https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/blackWheels.png\" \/>\r\n\r\n      <img decoding=\"async\" class=\"groundEffects hidden\" style=\"grid-column-start: first-col; grid-row-start: first-row;\" src=\"https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/groundEffects_white.png\" \/>\r\n\r\n      <img decoding=\"async\" class=\"helmetBox hidden\" style=\"grid-column-start: first-col; grid-row-start: first-row;\" src=\"https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/helmetBox_white.png\" \/>\r\n\r\n      <img decoding=\"async\" class=\"lightbar hidden\" style=\"grid-column-start: first-col; grid-row-start: first-row;\" src=\"https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/lightbar_white.png\" \/>\r\n\r\n      <img decoding=\"async\" class=\"fenderBras hidden\" style=\"grid-column-start: first-col; grid-row-start: first-row;\" src=\"https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/fenderbra.png\" \/>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n<div class=\"informationContainer\">\r\n  <div class=\"options-container\">\r\n    <h3 class=\"optionSetHeader animate-div\">Paint<\/h3>\r\n    <div class=\"optionButtons\">\r\n      <img loading=\"lazy\" decoding=\"async\" class=\"optionButton\" data-option=\"paintcolour1\" id=\"paintcolor1\" src=\"https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/whiteBtn.png\" alt=\"White\" width=\"50\" height=\"50\">\r\n      <img loading=\"lazy\" decoding=\"async\" class=\"optionButton\" data-option=\"paintcolour3\" id=\"paintcolor3\" src=\"https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/blueBtn.png\" alt=\"Blue\" width=\"50\" height=\"50\">\r\n      <img loading=\"lazy\" decoding=\"async\" class=\"optionButton\" data-option=\"paintcolour4\" id=\"paintcolor4\" src=\"https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/blackBtn.png\" alt=\"Black\" width=\"50\" height=\"50\">\r\n      <img loading=\"lazy\" decoding=\"async\" class=\"optionButton\" data-option=\"paintcolour5\" id=\"paintcolor5\" src=\"https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/redBtn.png\" alt=\"Red\" width=\"50\" height=\"50\">\r\n    <\/div>\r\n    <div class=\"html-content-class animate-div\" style=\"margin-top: 20px; width:100%;\">\r\n      <p>\u73fe\u5728\u306e\u30d0\u30a4\u30af\u306e\u4ed5\u4e0a\u3052\u306b\u5408\u308f\u305b\u3066\u9078\u3076\u305f\u3081\u306e4\u3064\u306e\u57fa\u672c\u30aa\u30d7\u30b7\u30e7\u30f3\u304c\u3042\u308a\u307e\u3059\u3002\u9078\u629e\u306f\u3042\u306a\u305f\u306e\u3082\u306e\u3067\u3042\u308a\u3001\u54c1\u8cea\u306f\u5e38\u306b\u898b\u4e8b\u3067\u3059\u3002\u8a73\u7d30\u306b\u3064\u3044\u3066\u306f\u3001\u5f53\u793e\u306e\u55b6\u696d\u30b9\u30bf\u30c3\u30d5\u306b\u304a\u554f\u3044\u5408\u308f\u305b\u304f\u3060\u3055\u3044\u3002<\/p>\r\n    <\/div>\r\n  <\/div>\r\n  <div class=\"image-container\">\r\n    <div class=\"image-content\">\r\n      <img decoding=\"async\" id=\"paintImage\" src=\"https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/paint_roller_white.png\" alt=\"\">\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n\r\n<script>\r\n$(document).ready()\r\nvar colorVar = \"white\";\r\n\r\n\r\n\r\n<!-- PAINT BUTTONS BEGIN -->\r\n\r\n\r\n    function toggleButtonImage(button) {\r\n      var plusImgSrc = 'https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/plusBtn.png';\r\n      var minusImgSrc = 'https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/minusBtn.png';\r\n      if (button.src === plusImgSrc) {\r\n        button.src = minusImgSrc;\r\n      } else {\r\n        button.src = plusImgSrc;\r\n      }\r\n    }\r\n    \/\/ Get image elements\r\n\r\n\r\n    const skeletonTrike = document.querySelector('.skeletonTrike');\r\n    const blackWheelsImage = document.querySelector('.blackWheels');\r\n    const fenderBrasImage = document.querySelector('.fenderBras');\r\n    const helmetBoxImage = document.querySelector('.helmetBox');\r\n    const groundEffectsImage = document.querySelector('.groundEffects');\r\n    const lightbarImage = document.querySelector('.lightbar');\r\n\r\n\r\n\r\n    \/\/ Get button elements\r\n    \r\n    \r\n    const helmetBoxButton = document.querySelector('#helmetBoxButton');\r\n  \r\n   \r\n    const paintcolor3 = document.querySelector('#paintcolor3');\r\n    \/\/ Set up click event listeners on the paint button\r\n    function onload() {\r\n      paintcolor1.addEventListener('click', paintcolor1func);\r\n      paintcolor3.addEventListener('click', paintcolor3func);\r\n      paintcolor4.addEventListener('click', paintcolor4func);\r\n      paintcolor5.addEventListener('click', paintcolor5func);\r\n\r\n\r\n      function functionForEvent(e) {\r\n        console.log('clicked');\r\n      }\r\n    }\r\n\r\n\r\n\r\n    function paintcolor1func() {\r\n      paintcolor1.disabled = true; \/\/ Disable the button\r\n      if (paintcolor1.src === 'https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/whiteBtn.png') {\r\n        paintcolor1.src = 'https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/whiteBtnOn.png';\r\n        paintcolor3.src = 'https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/blueBtn.png';\r\n        paintcolor4.src = 'https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/blackBtn.png';\r\n        paintcolor5.src = 'https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/redBtn.png';\r\n        $('.trikeContainer')\r\n          .not(':hidden')\r\n          .fadeOut(function() {\r\ncolorVar = \"white\";\r\nskeletonTrike.src = 'https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/skeleton_white.png';\r\n\r\n paintImage.src = 'https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/paint_roller_white.png';\r\n    fadeIn(paintImage);\r\n\r\ngroundEffectsImage.src = \"https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/groundEffects_white.png\";\r\n           skeletonTrike.classList.remove('hidden');\r\n            $(this).fadeIn();\r\n          });\r\n      }\r\n    }\r\n    var paintcolor3func = function() {\r\n\r\ncolorVar = \"blue\";\r\n      paintcolor3.disabled = true; \/\/ Disable the button\r\n      if (paintcolor3.src === 'https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/blueBtn.png') {\r\n        paintcolor3.src = 'https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/blueBtnOn.png';\r\n        paintcolor1.src = 'https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/whiteBtn.png';\r\n        paintcolor4.src = 'https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/blackBtn.png';\r\n        paintcolor5.src = 'https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/redBtn.png';\r\n        $('.trikeContainer').not(':hidden').fadeOut(function() {\r\n          skeletonTrike.src = 'https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/skeleton_blue.png';\r\n\r\npaintImage.src = 'https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/paint_roller_blue.jpg';\r\n    fadeIn(paintImage);\r\n\r\ncolorVar = \"blue\";\r\n\r\ngroundEffectsImage.src = \"https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/groundEffects_blue.png\";          skeletonTrike.classList.remove('hidden');\r\n          $(this).fadeIn();\r\n        });\r\n      }\r\n    };\r\n    var paintcolor4func = function() {\r\n      paintcolor4.disabled = true; \/\/ Disable the button\r\n      if (paintcolor4.src === 'https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/blackBtn.png') {\r\n        paintcolor4.src = 'https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/blackBtnOn.png';\r\n        paintcolor1.src = 'https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/whiteBtn.png';\r\n        paintcolor3.src = 'https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/blueBtn.png'\r\n        paintcolor5.src = 'https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/redBtn.png'\r\n        $('.trikeContainer').not(':hidden').fadeOut(function() {\r\n          skeletonTrike.src = 'https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/skeleton_black.png';\r\n\r\ngroundEffectsImage.src = \"https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/groundEffects_black.png\";  \r\n          skeletonTrike.classList.remove('hidden');\r\n\r\ncolorVar = \"black\";\r\n\r\ngroundEffectsImage.src = \"https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/groundEffects_black.png\";          skeletonTrike.classList.remove('hidden');\r\n\r\npaintImage.src = 'https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/paint_roller_black.png';\r\n    fadeIn(paintImage); \/\/ Apply fade-in effect to the paint image\r\n\r\n\r\n\r\n          $(this).fadeIn();\r\n        });\r\n      }\r\n    }\r\n    var paintcolor5func = function() {\r\n      paintcolor5.disabled = true; \/\/ Disable the button\r\n      if (paintcolor5.src === 'https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/redBtn.png') {\r\n        paintcolor5.src = 'https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/redBtnOn.png';\r\n        paintcolor1.src = 'https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/whiteBtn.png';\r\n        paintcolor3.src = 'https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/blueBtn.png'\r\n        paintcolor4.src = 'https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/blackBtn.png'\r\n        $('.trikeContainer').not(':hidden').fadeOut(function() {\r\n          skeletonTrike.src = 'https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/skeleton_red.png';\r\n\r\npaintImage.src = 'https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/paint_roller_red.png';\r\n    fadeIn(paintImage); \/\/ Apply fade-in effect to the paint image      \r\n\r\nskeletonTrike.classList.remove('hidden');\r\n\r\ncolorVar = \"red\";\r\n\r\ngroundEffectsImage.src = \"https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/groundEffects_red.png\";          skeletonTrike.classList.remove('hidden');\r\n          $(this).fadeIn();\r\n        });\r\n      }\r\n    }\r\n\r\n\r\n\r\n        onload();\r\n   <\/script>\r\n\r\n\r\n\r\n<!-- PAINT BUTTONS END -->\r\n\r\n\r\n\r\n\r\n\r\n\r\n<!-- WHEEL BUTTONS BEGIN -->\r\n\r\n<div class=\"informationContainer\">\r\n  <div class=\"options-container\">\r\n    <div class=\"optionSet\">\r\n      <h3 class=\"optionSetHeader\">Wheels<\/h3>\r\n      <div class=\"optionButtons\">\r\n        <img loading=\"lazy\" decoding=\"async\" class=\"optionButton\" data-option=\"chromeWheels\" id=\"chromeWheelsButton\" src=\"https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/wheelBtnChrome.png\" alt=\"Chrome\" width=\"55\" height=\"55\">\r\n        <img loading=\"lazy\" decoding=\"async\" class=\"optionButton\" data-option=\"blackWheels\" id=\"blackWheelsButton\" src=\"https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/wheelBtnBlack.png\" alt=\"blackWheels\" width=\"55\" height=\"55\">\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"html-content-class\" style=\"margin-top: 20px; width:100%;\">\r\n      <p>17\u30a4\u30f3\u30c1\u306e\u30a2\u30f3\u30b3\u30fc\u30eb\u5408\u91d1\u30db\u30a4\u30fc\u30eb\u306f\u30012018\u5e74\u304b\u3089\u73fe\u5728\u306e\u30db\u30f3\u30c0\u30b4\u30fc\u30eb\u30c9\u30a6\u30a3\u30f3\u30b0GL1800\u306e\u30d5\u30ed\u30f3\u30c8\u30db\u30a4\u30fc\u30eb\u306b\u5b8c\u74a7\u306b\u30de\u30c3\u30c1\u3059\u308b\u3088\u3046\u8a2d\u8a08\u3055\u308c\u3066\u3044\u307e\u3059\u3002\u30af\u30ed\u30fc\u30e0\u307e\u305f\u306f\u30d6\u30e9\u30c3\u30af\u304b\u3089\u9078\u629e\u3059\u308b\u304b\u3001\u3088\u308a\u591a\u304f\u306e\u30aa\u30d7\u30b7\u30e7\u30f3\u306b\u3064\u3044\u3066\u306f\u5f53\u793e\u306e\u55b6\u696d\u30c1\u30fc\u30e0\u306b\u304a\u554f\u3044\u5408\u308f\u305b\u304f\u3060\u3055\u3044\u3002<\/p>\r\n    <\/div>\r\n  <\/div>\r\n  <div class=\"image-container\">\r\n    <div class=\"image-content\">\r\n      <img decoding=\"async\" id=\"wheelsImage\" src=\"https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/wheelBtnChrome.png\" alt=\"\">\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n  \r\n\r\n \r\n  <script>\r\n   $(document).ready()\r\n    const chromeWheelsButton = document.querySelector('#chromeWheelsButton');\r\n    const blackWheelsButton = document.querySelector('#blackWheelsButton');\r\n\r\n  function onload() {\r\n     \r\n      chromeWheelsButton.addEventListener('click', chromeWheelsButtonfunc)\r\n      blackWheelsButton.addEventListener('click', blackWheelsButtonfunc)\r\n\r\n      function functionForEvent(e) {\r\n        console.log('clicked');\r\n      }\r\n    \r\n\r\n\r\n      function functionForEvent(e) {\r\n        console.log('clicked');\r\n      }\r\n    }\r\n\r\n    \/\/ Set up click event listeners on the accessory buttons\r\n    var chromeWheelsButtonfunc = function() {\r\n      chromeWheelsButton.disabled = true; \/\/ Disable the button\r\n      if (chromeWheelsButton.src === 'https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/wheelBtnChrome.png') {\r\n        chromeWheelsButton.src = 'https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/wheelBtnChromeOn.png';\r\n        blackWheelsButton.src = 'https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/wheelBtnBlack.png';\r\n        $('.trikeContainer').not(':hidden').fadeOut(function() {\r\n          blackWheelsImage.classList.add('hidden');\r\n          $(this).fadeIn();\r\n        });\r\n      }\r\n    }\r\n    var blackWheelsButtonfunc = function() {\r\n      blackWheelsButton.disabled = true; \/\/ Disable the button\r\n      if (blackWheelsButton.src === 'https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/wheelBtnBlack.png') {\r\n        blackWheelsButton.src = 'https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/wheelBtnBlackOn.png';\r\n        chromeWheelsButton.src = 'https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/wheelBtnChrome.png';\r\n        $('.trikeContainer').not(':hidden').fadeOut(function() {\r\n          blackWheelsImage.classList.remove('hidden');\r\n          $(this).fadeIn();\r\n        });\r\n      }\r\n    }\r\n    onload();\r\n     <\/script>\r\n\r\n\r\n\r\n\r\n<!-- WHEEL BUTTONS END -->\r\n\r\n\r\n\r\n<!-- LIGHTBAR BUTTONS BEGIN -->\r\n\r\n\r\n\r\n<div class=\"informationContainer\">\r\n  <div class=\"options-container\">\r\n    <div class=\"optionSetHeader\">\r\n      <h3>Lightbar<\/h3>\r\n    <\/div>\r\n    <img loading=\"lazy\" decoding=\"async\" class=\"lightbar\" id=\"lightbarButton\" data-option=\"lightbar\" src=\"https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/plusBtn.png\" alt=\"Lightbar\" width=\"50\" height=\"50\">\r\n    <div class=\"html-content-class\">\r\n      <p>\u5f53\u793e\u306e\u30e9\u30a4\u30c8\u30d0\u30fc\u306f\u8ffd\u52a0\u306e\u8996\u8a8d\u6027\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002250\u4ee5\u4e0a\u306eLED\u3092\u642d\u8f09\u3057\u3066\u304a\u308a\u3001\u30e9\u30cb\u30f3\u30b0\u30e9\u30a4\u30c8\u3068\u3057\u3066\u6a5f\u80fd\u3057\u307e\u3059\u3002\u30af\u30ed\u30fc\u30e0\u3001\u30d6\u30e9\u30c3\u30af\u3001\u307e\u305f\u306f\u30dc\u30c7\u30a3\u306b\u5408\u308f\u305b\u3066\u5857\u88c5\u3055\u308c\u305f\u3082\u306e\u304c\u5229\u7528\u53ef\u80fd\u3067\u3059\u3002<\/p>\r\n    <\/div>\r\n  <\/div>\r\n  <div class=\"image-container\">\r\n    <div class=\"image-content\">\r\n      <img decoding=\"async\" id=\"lightbarImage\" src=\"https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/lightbar_Photo_sketch.png\" alt=\"\">\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n\r\n<script>\r\n$(document).ready()\r\n const lightbarButton = document.querySelector('#lightbarButton');\r\n\r\n lightbarButton.addEventListener('click', function() {\r\n      if (this.src.includes('plusBtn')) {\r\n        this.src = 'https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/minusBtn.png';\r\n      } else {\r\n        this.src = 'https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/plusBtn.png';\r\n      }\r\n      $('.trikeContainer').not(':hidden').fadeOut(function() {\r\n        lightbarImage.classList.toggle('hidden');\r\n        $(this).fadeIn();\r\n      });\r\n    });\r\n    <\/script>\r\n\r\n<!-- LIGHTBAR BUTTONS END -->\r\n\r\n<!-- GROUNDEFFECTS BUTTONS BEGIN -->\r\n\r\n\r\n\r\n<div class=\"informationContainer\">\r\n  <div class=\"options-container\">\r\n    <h3 class=\"optionSetHeader\">Ground Effects<\/h3>\r\n    <img loading=\"lazy\" decoding=\"async\" class=\"groundEffects\" id=\"groundEffectsButton\" data-option=\"groundEffects\" src=\"https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/plusBtn.png\" alt=\"Ground Effects\" width=\"50\" height=\"50\">\r\n    <div class=\"html-content-class\">\r\n      <p>CSC\u306f\u3001\u8ca9\u58f2\u3059\u308b\u5404\u30ad\u30c3\u30c8\u306b\u5bfe\u3057\u3066\u8010\u8377\u91cd\u306e\u30b0\u30e9\u30a6\u30f3\u30c9\u30a8\u30d5\u30a7\u30af\u30c8\u3092\u63d0\u4f9b\u3057\u3066\u3044\u307e\u3059\u3002\u3053\u308c\u3089\u306f\u898b\u305f\u76ee\u3082\u7d20\u6674\u3089\u3057\u304f\u3001\u96e8\u306e\u4e2d\u3067\u3082\u8db3\u5143\u3092\u4e7e\u304b\u3057\u3001\u30bf\u30fc\u30f3\u30b7\u30b0\u30ca\u30eb\u304c\u4f5c\u52d5\u3059\u308b\u3068\u30bf\u30fc\u30f3\u3092\u7167\u3089\u3057\u307e\u3059\u3002800\u30dd\u30f3\u30c9\u306e\u5bb9\u91cf\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\r\n    <\/div>\r\n  <\/div>\r\n  <div class=\"image-container\">\r\n    <div class=\"image-content\">\r\n      <img decoding=\"async\" id=\"groundEffectsImage\" src=\"https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/GFX_sketch.jpg\" alt=\"\">\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n<script>\r\n$(document).ready()\r\n  const groundEffectsButton = document.querySelector('#groundEffectsButton');\r\n\r\n    function toggleButtonImage(button) {\r\n      var plusImgSrc = 'https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/plusBtn.png';\r\n      var minusImgSrc = 'https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/minusBtn.png';\r\n      if (button.src === plusImgSrc) {\r\n        button.src = minusImgSrc;\r\n      } else {\r\n        button.src = plusImgSrc;\r\n      }\r\n    }\r\n\r\n           groundEffectsButton.addEventListener('click', function() {\r\n      if (this.src.includes('plusBtn')) {\r\n        this.src = 'https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/minusBtn.png';\r\n      } else {\r\n        this.src = 'https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/plusBtn.png';\r\n      }\r\n      $('.trikeContainer').not(':hidden').fadeOut(function() {\r\n\r\nif (colorVar === 'white') {\r\n  groundEffectsImage.src = \"https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/groundEffects_white.png\";\r\n}\r\nif (colorVar === 'blue') {\r\ngroundEffectsImage.src = \"https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/groundEffects_blue.png\";\r\n}\r\nif (colorVar === 'red') {\r\ngroundEffectsImage.src = \"https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/groundEffects_red.png\";\r\n};\r\nif (colorVar ==='black') {\r\ngroundEffectsImage.src = \"https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/groundEffects_black.png\";\r\n};\r\n\r\n        groundEffectsImage.classList.toggle('hidden');\r\n        $(this).fadeIn();\r\n      });\r\n    });\r\n\r\n     <\/script>\r\n\r\n\r\n\r\n<!-- GROUNDEFFECTS BUTTONS END -->\r\n\r\n\r\n\r\n\r\n<!-- FENDERBRAS BUTTONS BEGIN -->\r\n\r\n\r\n\r\n<\/style>\r\n\r\n<div class=\"informationContainer\">\r\n  <div class=\"options-container\">\r\n    <div class=\"optionSetHeader\">\r\n      <h3>Fender Bras<\/h3>\r\n      <img loading=\"lazy\" decoding=\"async\" class=\"fenderBras\" id=\"fenderBrasButton\" data-option=\"fenderBras\" src=\"https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/plusBtn.png\" alt=\"Fender Bras\" width=\"50\" height=\"50\">\r\n    <\/div>\r\n    <div class=\"html-content-class\" style=\"margin-top: 0px; width:100%;\">\r\n      <p>\u9577\u6301\u3061\u3059\u308b\u6d77\u6d0b\u30b0\u30ec\u30fc\u30c9\u306e\u9ed2\u3044\u30d3\u30cb\u30fc\u30eb\u304b\u3089\u4f5c\u3089\u308c\u305f\u3001\u5f53\u793e\u306e\u30d5\u30a7\u30f3\u30c0\u30fc\u30d6\u30e9\u30bb\u30c3\u30c8\u306b\u306f\u3001CSC\u30ed\u30b4\u304c\u5404\u30d6\u30e9\u306e\u524d\u9762\u306b\u523a\u7e4d\u3055\u308c\u3066\u3044\u307e\u3059\u3002\u30d5\u30a7\u30f3\u30c0\u30fc\u30d6\u30e9\u306f\u3001\u30b9\u30c8\u30ec\u30b9\u30dd\u30a4\u30f3\u30c8\u3067\u4e8c\u91cd\u7e2b\u3044\u3055\u308c\u3066\u304a\u308a\u3001\u5ca9\u3084\u30c1\u30c3\u30d7\u304b\u3089\u5857\u6599\u3092\u4fdd\u8b77\u3059\u308b\u305f\u3081\u306b\u30d5\u30a9\u30fc\u30e0\u3067\u88cf\u6253\u3061\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\r\n    <\/div>\r\n  <\/div>\r\n  <div class=\"image-container\">\r\n    <div class=\"image-content\">\r\n      <img decoding=\"async\" id=\"fenderBrasImage\" src=\"https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/fenderBras_sketch.jpg\" alt=\"\">\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n\r\n<script>\r\n$(document).ready()\r\nconst fenderBrasButton = document.querySelector('#fenderBrasButton');\r\n\r\n fenderBrasButton.addEventListener('click', function() {\r\n      if (this.src.includes('plusBtn')) {\r\n        this.src = 'https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/minusBtn.png';\r\n      } else {\r\n        this.src = 'https:\/\/p-tomboy.com\/wp-content\/uploads\/2024\/03\/plusBtn.png';\r\n      }\r\n      $('.trikeContainer').not(':hidden').fadeOut(function() {\r\n        fenderBrasImage.classList.toggle('hidden');\r\n        $(this).fadeIn();\r\n      });\r\n    });\r\n<\/script>\r\n\r\n<!-- FENDERBRAS BUTTONS END -->\r\n\r\n\r\n\r\n\r\n<style>\r\n  .large-text {\r\n    font-size: 24px;\r\n    margin-top: 50px;\r\n    text-align: center;\r\npadding:30px;\r\n  }\r\n\r\n  .button-container {\r\n    display: flex;\r\n    justify-content: center;\r\n  }\r\n\r\n  .button {\r\n    background: #1e208a;\r\n    box-sizing: border-box;\r\n    color: #fff !important;\r\n    display: inline-block;\r\n    font-size: 24px;\r\n    line-height: 50px; \r\n    text-align: center;\r\n    min-width: 200px;\r\n    padding: 10px 20px; \r\n    font-weight: bold;\r\n    text-decoration: none;\r\n    border-radius: 5px;\r\n  }\r\n\r\n  .button:hover {\r\n    background: #222; \/* Dark grey color on hover *\/\r\n    text-decoration: none !important; \/* Remove underline on hover *\/\r\n  }\r\n\r\n  .spacer {\r\npadding-top: 100px;\r\n    padding-bottom: 200px;\r\n  }\r\n<\/style>\r\n\r\n<div class=\"spacer\">\r\n  <div class=\"large-text\">\u3053\u306e\u30c7\u30b6\u30a4\u30f3\u304c\u3088\u308d\u3057\u3044\u3067\u3057\u3087\u3046\u304b\uff1f<\/div>\r\n  <div class=\"button-container\">\r\n    <a href=\"https:\/\/p-tomboy.com\/contact\/\" class=\"button\">\u304a\u554f\u3044\u5408\u308f\u305b<\/a>\r\n  <\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n  \n","protected":false},"excerpt":{"rendered":"Paint \u73fe\u5728\u306e\u30d0\u30a4\u30af\u306e\u4ed5\u4e0a\u3052\u306b\u5408\u308f\u305b\u3066\u9078\u3076\u305f\u3081\u306e4\u3064\u306e\u57fa\u672c\u30aa\u30d7\u30b7\u30e7\u30f3\u304c\u3042\u308a\u307e\u3059\u3002\u9078\u629e\u306f\u3042\u306a\u305f\u306e\u3082\u306e\u3067\u3042\u308a\u3001\u54c1\u8cea\u306f\u5e38\u306b\u898b\u4e8b\u3067\u3059\u3002\u8a73\u7d30\u306b\u3064\u3044\u3066\u306f\u3001\u5f53\u793e...","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-full.php","meta":{"footnotes":""},"class_list":["post-4179","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/p-tomboy.com\/en\/wp-json\/wp\/v2\/pages\/4179","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/p-tomboy.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/p-tomboy.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/p-tomboy.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/p-tomboy.com\/en\/wp-json\/wp\/v2\/comments?post=4179"}],"version-history":[{"count":350,"href":"https:\/\/p-tomboy.com\/en\/wp-json\/wp\/v2\/pages\/4179\/revisions"}],"predecessor-version":[{"id":9061,"href":"https:\/\/p-tomboy.com\/en\/wp-json\/wp\/v2\/pages\/4179\/revisions\/9061"}],"wp:attachment":[{"href":"https:\/\/p-tomboy.com\/en\/wp-json\/wp\/v2\/media?parent=4179"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}