https://candynetwork.ai/

スキャンID：
f609a458-26f7-4ff0-8b9a-67e1f8a6d78d終了
送信済みURL：
https://candynetwork.ai/
レポート終了日：

リンク · 0件検出

ページから特定された発信リンク

JavaScript変数 · 22件検出

ページのウィンドウオブジェクトにロードされたグローバルのJavaScript変数は関数以外の場所で宣言された変数で、現在のスコープ内であればコードのどこからでもアクセス可能です

名前規模
onbeforetoggleobject
documentPictureInPictureobject
onscrollendobject
$function
jQueryfunction
tailwindobject
/template.htmlstring
initPartialsfunction
setLocalStoragefunction
initSlidersfunction

コンソールログメッセージ · 1件検出

Webコンソールにログ記録されたメッセージ

規模分類ログ
warningother
URL
https://cdn.tailwindcss.com/
テキスト
cdn.tailwindcss.com should not be used in production. To use Tailwind CSS in production, install it as a PostCSS plugin or use the Tailwind CLI: https://tailwindcss.com/docs/installation

HTML

未加工のHTMLページ本文

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Candy.ai - Enjoy The Ultimate AI Girlfriend Experiencee</title>
    <!-- Tailwind CSS -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="icon" type="image/x-icon" href="/favico.png">
  <style>*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/* ! tailwindcss v3.4.16 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.bottom-0{bottom:0px}.right-1{right:0.25rem}.top-2{top:0.5rem}.top-0{top:0px}.bottom-1{bottom:0.25rem}.left-1\/2{left:50%}.z-10{z-index:10}.mx-auto{margin-left:auto;margin-right:auto}.my-auto{margin-top:auto;margin-bottom:auto}.mx-10{margin-left:2.5rem;margin-right:2.5rem}.mb-3{margin-bottom:0.75rem}.mb-4{margin-bottom:1rem}.mb-2{margin-bottom:0.5rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mb-5{margin-bottom:1.25rem}.mb-10{margin-bottom:2.5rem}.mb-8{margin-bottom:2rem}.mt-6{margin-top:1.5rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.h-2{height:0.5rem}.h-7{height:1.75rem}.h-screen{height:100vh}.h-auto{height:auto}.h-full{height:100%}.h-12{height:3rem}.h-\[72px\]{height:72px}.h-3\.5{height:0.875rem}.h-1{height:0.25rem}.max-h-screen{max-height:100vh}.w-72{width:18rem}.w-\[288px\]{width:288px}.w-full{width:100%}.w-1\/3{width:33.333333%}.w-auto{width:auto}.min-w-20{min-width:5rem}.max-w-\[500px\]{max-width:500px}.flex-none{flex:none}.grow{flex-grow:1}.-translate-x-1\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.appearance-none{-webkit-appearance:none;appearance:none}.grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.gap-1{gap:0.25rem}.gap-5{gap:1.25rem}.gap-4{gap:1rem}.gap-10{gap:2.5rem}.gap-3{gap:0.75rem}.gap-y-4{row-gap:1rem}.overflow-hidden{overflow:hidden}.whitespace-nowrap{white-space:nowrap}.rounded-full{border-radius:9999px}.rounded-2xl{border-radius:1rem}.rounded-\[10px\]{border-radius:10px}.rounded-lg{border-radius:0.5rem}.rounded-xl{border-radius:0.75rem}.border-0{border-width:0px}.border-b-4{border-bottom-width:4px}.border-\[\#953747\]{--tw-border-opacity:1;border-color:rgb(149 55 71 / var(--tw-border-opacity, 1))}.bg-zinc-900{--tw-bg-opacity:1;background-color:rgb(24 24 27 / var(--tw-bg-opacity, 1))}.bg-transparent{background-color:transparent}.bg-zinc-800{--tw-bg-opacity:1;background-color:rgb(39 39 42 / var(--tw-bg-opacity, 1))}.bg-opacity-50{--tw-bg-opacity:0.5}.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.from-red-600{--tw-gradient-from:#dc2626 var(--tw-gradient-from-position);--tw-gradient-to:rgb(220 38 38 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-rose-500{--tw-gradient-from:#f43f5e var(--tw-gradient-from-position);--tw-gradient-to:rgb(244 63 94 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.via-orange-400{--tw-gradient-to:rgb(251 146 60 / 0)  var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), #fb923c var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-rose-400{--tw-gradient-to:#fb7185 var(--tw-gradient-to-position)}.object-cover{object-fit:cover}.p-4{padding:1rem}.py-2\.5{padding-top:0.625rem;padding-bottom:0.625rem}.px-10{padding-left:2.5rem;padding-right:2.5rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-3\.5{padding-top:0.875rem;padding-bottom:0.875rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-2{padding-left:0.5rem;padding-right:0.5rem}.py-0\.5{padding-top:0.125rem;padding-bottom:0.125rem}.py-1\.5{padding-top:0.375rem;padding-bottom:0.375rem}.pl-2\.5{padding-left:0.625rem}.pr-72{padding-right:18rem}.pb-4{padding-bottom:1rem}.pb-2{padding-bottom:0.5rem}.pt-4{padding-top:1rem}.text-center{text-align:center}.text-\[16px\]{font-size:16px}.text-\[20px\]{font-size:20px}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-\[32px\]{font-size:32px}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-xs{font-size:0.75rem;line-height:1rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.font-black{font-weight:900}.font-light{font-weight:300}.font-medium{font-weight:500}.capitalize{text-transform:capitalize}.leading-tight{line-height:1.25}.leading-7{line-height:1.75rem}.tracking-tight{letter-spacing:-0.025em}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-zinc-500{--tw-text-opacity:1;color:rgb(113 113 122 / var(--tw-text-opacity, 1))}.placeholder-gray-500::placeholder{--tw-placeholder-opacity:1;color:rgb(107 114 128 / var(--tw-placeholder-opacity, 1))}.opacity-30{opacity:0.3}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.hover\:border-b-\[12px\]:hover{border-bottom-width:12px}.focus\:border-transparent:focus{border-color:transparent}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.focus\:ring-purple-600:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(147 51 234 / var(--tw-ring-opacity, 1))}.active\:scale-95:active{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.active\:border-b-4:active{border-bottom-width:4px}.active\:shadow-none:active{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.group:hover .group-hover\:scale-125{--tw-scale-x:1.25;--tw-scale-y:1.25;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@media (min-width: 640px){.sm\:px-0{padding-left:0px;padding-right:0px}}@media (min-width: 768px){.md\:relative{position:relative}.md\:top-6{top:1.5rem}.md\:mx-4{margin-left:1rem;margin-right:1rem}.md\:mb-0{margin-bottom:0px}.md\:mb-2{margin-bottom:0.5rem}.md\:mb-10{margin-bottom:2.5rem}.md\:block{display:block}.md\:hidden{display:none}.md\:h-auto{height:auto}.md\:h-\[107px\]{height:107px}.md\:w-\[60\%\]{width:60%}.md\:flex-1{flex:1 1 0%}.md\:flex-row{flex-direction:row}.md\:px-0{padding-left:0px;padding-right:0px}.md\:px-\[80px\]{padding-left:80px;padding-right:80px}.md\:pb-10{padding-bottom:2.5rem}.md\:pt-10{padding-top:2.5rem}.md\:text-3xl{font-size:1.875rem;line-height:2.25rem}.md\:text-xl{font-size:1.25rem;line-height:1.75rem}.md\:text-zinc-500{--tw-text-opacity:1;color:rgb(113 113 122 / var(--tw-text-opacity, 1))}}</style></head>
  <body>
    <div class="bg-purple-dark" data-controller="create-ai-flow">
      <div class="flex flex-col md:flex-row h-screen form-partial bg-gradient-mobile" data-create-ai-flow-target="formPartial">
        <div class="overflow-hidden hidden md:block md:flex-1 justify-center items-center mx-auto my-auto">
          <img src="assets/cover_image.webp" class="w-full max-h-screen object-cover">
        </div>

        <div class="md:flex-1 container justify-center items-center mx-auto my-auto bg-purple-dark">
          <div id="step1"><div data-create-ai-flow-target="step1" class="step1 flex h-screen flex-col justify-center items-center gap-10 mx-auto p-4 w-full bg-gradient-mobile">
<img src="assets/cover_mobile.webp" class="z-1 w-full md:hidden absolute h-auto object-cover">
<img src="assets/logo.png" class="w-auto mt-6 mx-auto fixed top-0 md:relative mb-10 md:mb-0 md:h-[107px] h-[72px]" alt="Logo">
  <div class="w-full md:w-[60%] mb-8 px-6 absolute md:relative bottom-0">
    <div class="z-10 mb-8">
    <div class="flex-col justify-center items-center flex">
      <div class="text-center text-white md:text-zinc-500 mb-4 md:mb-2 font-light text-lg md:text-xl">
        Welcome to Candy.ai
      </div>
      <div class="text-center text-white text-[32px] leading-7 md:text-3xl font-black capitalize">
        EXPERIENCE YOUR DEEPEST SEXUAL
      </div>
    </div>
  </div>
    <button class="cursor-pointer w-full py-3.5 bg-gradient-to-r from-rose-500 to-rose-400 rounded-full justify-center items-center inline-flex border-b-4 border-[#953747] hover:border-b-[12px] active:shadow-none active:scale-95 active:border-b-4 transition duration-300 ease-in-out next-button custom-button" data-create-ai-flow-target="nextButton" data-create-ai-flow-step="1" data-action="click->create-ai-flow#goToNextStep">
      <span class="flex items-center justify-center text-white text-3xl font-bold">CREATE NOW</span>
    </button>
  </div>
</div>
</div>
          <div id="step2"><div data-create-ai-flow-target="step2" class="hidden block w-full mx-auto step2">
  <div class="flex-col items-center h-screen md:h-auto flex mx-auto w-full">
    <div class="">
        <img src="assets/logo.png" class="mx-auto mt-4 mb-2 w-1/3" alt="Logo">
        <img src="assets/step2/step_2_progressbar.svg" alt="Progress bar" class="w-full px-10">
    </div>
    <div class="flex justify-center items-center flex-col text-center">
      <div class="text-center text-zinc-500 text-sm mb-4">Enter new name</div>
      <input class="mb-5 w-full h-12 px-6 py-2.5 bg-grey-dark text-white placeholder-gray-500 border-0 rounded-lg leading-tight focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent" type="text" id="name-input" placeholder="Enter new name">
      <div class="text-center text-zinc-500 text-sm mb-4">
        Choose relationship
      </div>
      <div class="flex flex-col gap-y-4">
        <div class="flex gap-4 w-full">
          <div data-create-ai-flow-target="pill" data-create-ai-flow-step="2" data-relationship="Step Sister" data-target-for="relationship" class="group px-10 pb-2 pt-4 md:px-[80px] md:pb-10 md:pt-10 rounded-2xl pill cursor-pointer flex flex-col items-center gap-4 justify-center bg-grey-dark rounded-[10px] bg-secondary-grey">
            <img src="assets/step2/step_sister.svg" alt="Step Sister" class="rounded-xl transition duration-300 ease-in-out transform group-hover:scale-125">
            <div class="text-grey flex items-center justify-center">
              Step Sister
            </div>
          </div>
          <div data-create-ai-flow-target="pill" data-create-ai-flow-step="2" data-relationship="Step Mom" data-target-for="relationship" class="group px-10 pb-2 pt-4 md:px-[80px] md:pb-10 md:pt-10 rounded-2xl pill cursor-pointer flex flex-col items-center gap-4 justify-center bg-grey-dark rounded-[10px] bg-secondary-grey">
            <img src="assets/step2/step_mom.svg" alt="Step Mom" class="rounded-xl transition duration-300 ease-in-out transform group-hover:scale-125">
            <div class="text-grey flex items-center justify-center">
              Step Mom
            </div>
          </div>
        </div>
        <div class="flex gap-4 w-full">
          <div data-create-ai-flow-target="pill" data-create-ai-flow-step="2" data-relationship="Sex Friend" data-target-for="relationship" class="group px-10 pb-2 pt-4 md:px-[80px] md:pb-10 md:pt-10 rounded-2xl pill cursor-pointer flex flex-col items-center gap-4 justify-center bg-grey-dark rounded-[10px] bg-secondary-grey">
            <img src="assets/step2/sex_friend.svg" alt="Sex Friend" class="rounded-xl transition duration-300 ease-in-out transform group-hover:scale-125">
            <div class="text-grey flex items-center justify-center">
              Sex Friend
            </div>
          </div>
          <div data-create-ai-flow-target="pill" data-create-ai-flow-step="2" data-relationship="Girlfriend" data-target-for="relationship" class="group px-10 pb-2 pt-4 md:px-[80px] md:pb-10 md:pt-10 rounded-2xl pill cursor-pointer flex flex-col items-center gap-4 justify-center bg-grey-dark rounded-[10px] bg-secondary-grey">
            <img src="assets/step2/girlfriend.svg" alt="Girlfriend" class="rounded-xl transition duration-300 ease-in-out transform group-hover:scale-125">
            <div class="text-grey flex items-center justify-center">
              Girlfriend
            </div>
          </div>
        </div>
      </div>
      <div class="mt-4 w-full pb-4 mx-10 md:relative absolute bottom-0 mt-5 px-5 md:px-0">
        <button class="w-full py-3.5 bg-gradient-to-r from-rose-500 to-rose-400 rounded-full justify-center items-center inline-flex border-b-4 hover:border-b-[12px] border-[#953747] hover:shadow-custom-glow active:shadow-none active:scale-95 active:border-b-4 transition duration-300 ease-in-out opacity-30 cursor-not-allowed next-button" data-create-ai-flow-target="nextButton" data-create-ai-flow-step="2" data-action="click->create-ai-flow#goToNextStep" disabled="">
          <span class="flex items-center justify-center text-white text-3xl font-bold">Next</span>
        </button>
      </div>
    </div>
  </div>
</div>
</div>
          <div id="step3"><div data-create-ai-flow-target="step3" class="hidden block h-screen flex items-center step3">
  <div class="flex-col items-center h-screen md:h-auto flex mx-auto w-full">
    <div class="">
      <img src="assets/logo.png" class="mx-auto mt-4 mb-2 w-1/3" alt="Logo">
      <img src="assets/step3/step_3_progressbar.svg" alt="Progress bar" class="w-full px-10">
    </div>
    <div class="flex justify-center items-center flex-col text-center">
      <div class="mt-5 text-center w-full px-5 md:px-0">
        <div class="text-center text-zinc-500 text-sm mb-2">Choose Ethnicity</div>
        <div class="flex flex-col justify-around gap-5">
          <div data-action="click->create-ai-flow#activatePill" data-create-ai-flow-target="pill" data-create-ai-flow-step="3" data-ethnicity="Caucasian" data-target-for="ethnicity" class="rounded-2xl relative pill cursor-pointer h-full mx-auto">
            <img src="assets/step3/caucasian.webp" class="rounded-2xl h-full w-full" alt="Caucasian">
            <div class="right-1 top-2 md:top-6 px-5 py-2.5 absolute text-white bg-zinc-900 bg-opacity-50 rounded-full backdrop-blur-sm blur-title">
              Caucasian
            </div>
          </div>

          <div data-action="click->create-ai-flow#activatePill" data-create-ai-flow-target="pill" data-create-ai-flow-step="3" data-ethnicity="Black" data-target-for="ethnicity" class="rounded-2xl relative pill cursor-pointer h-full mx-auto">
            <img src="assets/step3/black.webp" class="rounded-2xl h-auto" alt="Black">
            <div class="right-1 top-2 md:top-6 px-4 py-2.5 absolute text-white bg-zinc-900 bg-opacity-50 rounded-full backdrop-blur-sm blur-title">
              Black
            </div>
          </div>

          <div data-action="click->create-ai-flow#activatePill" data-create-ai-flow-target="pill" data-create-ai-flow-step="3" data-ethnicity="Asian" data-target-for="ethnicity" class="rounded-2xl relative pill cursor-pointer h-full mx-auto">
            <img src="assets/step3/asian.webp" class="rounded-2xl h-auto" alt="Asian">
            <div class="right-1 top-2 md:top-6 px-4 py-2.5 absolute text-white bg-zinc-900 bg-opacity-50 rounded-full backdrop-blur-sm blur-title">
              Asian
            </div>
          </div>

          <div data-action="click->create-ai-flow#activatePill" data-create-ai-flow-target="pill" data-create-ai-flow-step="3" data-ethnicity="Latina" data-target-for="ethnicity" class="rounded-2xl relative pill cursor-pointer h-full mx-auto">
            <img src="assets/step3/latina.webp" class="rounded-2xl h-auto" alt="Latina">
            <div class="right-1 top-2 md:top-6 px-4 py-2.5 absolute text-white bg-zinc-900 bg-opacity-50 rounded-full backdrop-blur-sm blur-title">
              Latina
            </div>
          </div>

          <div data-action="click->create-ai-flow#activatePill" data-create-ai-flow-target="pill" data-create-ai-flow-step="3" data-ethnicity="Arab" data-target-for="ethnicity" class="rounded-2xl relative pill cursor-pointer h-full mx-auto">
            <img src="assets/step3/arab.webp" class="rounded-2xl h-auto" alt="Arab">
            <div class="right-1 top-2 md:top-6 px-4 py-2.5 absolute text-white bg-zinc-900 bg-opacity-50 rounded-full backdrop-blur-sm blur-title">
              Arab
            </div>
          </div>
        </div>
      </div>
      <div class="mt-4 w-full pb-4 mx-10 gap-1 flex md:relative absolute bottom-0 mt-5 px-5 md:px-0">
        <div>
          <button class="back-button" data-create-ai-flow-step="3">
            <img src="assets/back_arrow.svg" alt="back arrow">
          </button>
        </div>
        <button class="w-full py-3.5 bg-gradient-to-r from-rose-500 to-rose-400 rounded-full justify-center items-center inline-flex border-b-4 hover:border-b-[12px] border-[#953747] hover:shadow-custom-glow active:shadow-none active:scale-95 active:border-b-4 transition duration-300 ease-in-out opacity-30 cursor-not-allowed next-button" data-create-ai-flow-target="nextButton" data-create-ai-flow-step="3" data-action="click->create-ai-flow#goToNextStep" disabled="">
          <span class="flex items-center justify-center text-white text-3xl font-bold">Next</span>
        </button>
      </div>
    </div>
  </div>
</div>
</div>
          <div id="step4"><div data-create-ai-flow-target="step4" class="hidden block h-screen flex items-center step4">
  <div class="flex-col items-center h-screen md:h-auto flex mx-auto w-full">
    <div class="">
      <img src="assets/logo.png" class="mx-auto mt-4 mb-2 w-1/3" alt="Logo">
      <img src="assets/step4/step_4_progressbar.svg" alt="Progress bar" class="w-full px-10">
    </div>
  <div class="flex flex-col justify-center items-center px-5">
    <div id="body-type"><div class="text-center text-zinc-500 text-sm mb-4">Choose Body Type</div>
<div class="grid grid-cols-3 gap-3 mb-3">
	<div data-action="click->create-ai-flow#activatePill" data-create-ai-flow-target="pill" data-create-ai-flow-step="4" data-category="body_type" data-body-type="Slim" data-target-for="body_type" class="rounded-2xl relative pill cursor-pointer h-full mx-auto">
		<img src="assets/step4/body_type/desktop/slim.webp" class="hidden md:block rounded-2xl h-auto" alt="Caucasian">
		<img src="assets/step4/body_type/mobile/slim.webp" class="block md:hidden rounded-2xl h-auto" alt="Caucasian">
		<div class="bottom-1 left-1/2 transform -translate-x-1/2 px-2 py-0.5 absolute text-xs text-white bg-zinc-900 bg-opacity-50 rounded-full backdrop-blur-sm blur-title">
			Slim
		</div>
	</div>
	<div data-action="click->create-ai-flow#activatePill" data-create-ai-flow-target="pill" data-create-ai-flow-step="4" data-category="body_type" data-body-type="Athletic" data-target-for="body_type" class="rounded-2xl relative pill cursor-pointer h-full mx-auto">
		<img src="assets/step4/body_type/desktop/athletic.webp" class="hidden md:block rounded-2xl h-auto" alt="Caucasian">
		<img src="assets/step4/body_type/mobile/athletic.webp" class="block md:hidden rounded-2xl h-auto" alt="Caucasian">
		<div class="bottom-1 left-1/2 transform -translate-x-1/2 px-2 py-0.5 absolute text-xs text-white bg-zinc-900 bg-opacity-50 rounded-full backdrop-blur-sm blur-title">
			Athletic
		</div>
	</div>
	<div data-action="click->create-ai-flow#activatePill" data-create-ai-flow-target="pill" data-create-ai-flow-step="4" data-category="body_type" data-body-type="Curvy" data-target-for="body_type" class="rounded-2xl relative pill cursor-pointer h-full mx-auto">
		<img src="assets/step4/body_type/desktop/curvy.webp" class="hidden md:block rounded-2xl h-auto" alt="Caucasian">
		<img src="assets/step4/body_type/mobile/curvy.webp" class="block md:hidden rounded-2xl h-auto" alt="Caucasian">
		<div class="bottom-1 left-1/2 transform -translate-x-1/2 px-2 py-0.5 absolute text-xs text-white bg-zinc-900 bg-opacity-50 rounded-full backdrop-blur-sm blur-title">
			Curvy
		</div>
	</div>
</div>
</div>
    <div id="breast-size"><div class="text-center text-zinc-500 text-sm mb-4">Choose Breast Size</div>
<div class="grid grid-cols-3 gap-3 mb-3">
	<div data-action="click->create-ai-flow#activatePill" data-create-ai-flow-target="pill" data-create-ai-flow-step="4" data-category="breast_size" data-breast-size="Small" data-target-for="breast_size" class="rounded-2xl relative pill cursor-pointer h-full mx-auto">
		<img src="assets/step4/breast_size/desktop/small.webp" class="hidden md:block rounded-2xl h-auto" alt="Small">
		<img src="assets/step4/breast_size/mobile/small.webp" class="block md:hidden rounded-2xl h-auto" alt="Small">
		<div class="bottom-1 left-1/2 transform -translate-x-1/2 px-2 py-0.5 absolute text-xs text-white bg-zinc-900 bg-opacity-50 rounded-full backdrop-blur-sm blur-title">
			Small
		</div>
	</div>
	<div data-action="click->create-ai-flow#activatePill" data-create-ai-flow-target="pill" data-create-ai-flow-step="4" data-category="breast_size" data-breast-size="Medium" data-target-for="breast_size" class="rounded-2xl relative pill cursor-pointer h-full mx-auto">
		<img src="assets/step4/breast_size/desktop/medium.webp" class="hidden md:block rounded-2xl h-auto" alt="Medium">
		<img src="assets/step4/breast_size/mobile/medium.webp" class="block md:hidden rounded-2xl h-auto" alt="Medium">
		<div class="bottom-1 left-1/2 transform -translate-x-1/2 px-2 py-0.5 absolute text-xs text-white bg-zinc-900 bg-opacity-50 rounded-full backdrop-blur-sm blur-title">
			Medium
		</div>
	</div>
	<div data-action="click->create-ai-flow#activatePill" data-create-ai-flow-target="pill" data-create-ai-flow-step="4" data-category="breast_size" data-breast-size="Huge" data-target-for="breast_size" class="rounded-2xl relative pill cursor-pointer h-full mx-auto">
		<img src="assets/step4/breast_size/desktop/huge.webp" class="hidden md:block rounded-2xl h-auto" alt="Huge">
		<img src="assets/step4/breast_size/mobile/huge.webp" class="block md:hidden rounded-2xl h-auto" alt="Huge">
		<div class="bottom-1 left-1/2 transform -translate-x-1/2 px-2 py-0.5 absolute text-xs text-white bg-zinc-900 bg-opacity-50 rounded-full backdrop-blur-sm blur-title">
			Huge
		</div>
	</div>
</div>
</div>
    <div id="butt-size"><div class="text-center text-zinc-500 text-sm mb-4">Choose Butt Size</div>
<div class="grid grid-cols-3 gap-3 mb-3">
	<div data-action="click->create-ai-flow#activatePill" data-create-ai-flow-target="pill" data-create-ai-flow-step="4" data-category="butt_size" data-butt-size="Small" data-target-for="butt_size" class="rounded-2xl relative pill cursor-pointer h-full mx-auto">
		<img src="assets/step4/butt_size/desktop/small.webp" class="hidden md:block rounded-2xl h-auto" alt="Small">
		<img src="assets/step4/butt_size/mobile/small.webp" class="block md:hidden rounded-2xl h-auto" alt="Small">
		<div class="bottom-1 left-1/2 transform -translate-x-1/2 px-2 py-0.5 absolute text-xs text-white bg-zinc-900 bg-opacity-50 rounded-full backdrop-blur-sm blur-title">
			Small
		</div>
	</div>
	<div data-action="click->create-ai-flow#activatePill" data-create-ai-flow-target="pill" data-create-ai-flow-step="4" data-category="butt_size" data-butt-size="Medium" data-target-for="butt_size" class="rounded-2xl relative pill cursor-pointer h-full mx-auto">
		<img src="assets/step4/butt_size/desktop/medium.webp" class="hidden md:block rounded-2xl h-auto" alt="Medium">
		<img src="assets/step4/butt_size/mobile/medium.webp" class="block md:hidden rounded-2xl h-auto" alt="Medium">
		<div class="bottom-1 left-1/2 transform -translate-x-1/2 px-2 py-0.5 absolute text-xs text-white bg-zinc-900 bg-opacity-50 rounded-full backdrop-blur-sm blur-title">
			Medium
		</div>
	</div>
	<div data-action="click->create-ai-flow#activatePill" data-create-ai-flow-target="pill" data-create-ai-flow-step="4" data-category="butt_size" data-butt-size="Large" data-target-for="butt_size" class="rounded-2xl relative pill cursor-pointer h-full mx-auto">
		<img src="assets/step4/butt_size/desktop/large.webp" class="hidden md:block rounded-2xl h-auto" alt="Large">
		<img src="assets/step4/butt_size/mobile/large.webp" class="block md:hidden rounded-2xl h-auto" alt="Large">
		<div class="bottom-1 left-1/2 transform -translate-x-1/2 px-2 py-0.5 absolute text-xs text-white bg-zinc-900 bg-opacity-50 rounded-full backdrop-blur-sm blur-title">
			Large
		</div>
	</div>
</div>
</div>
    <div class="mt-4 w-full pb-4 mx-10 gap-1 flex md:relative absolute bottom-0 mt-5 px-5 md:px-0">
      <div>
        <button class="back-button" data-create-ai-flow-step="4">
          <img src="assets/back_arrow.svg" alt="back arrow">
        </button>
      </div>
      <button class="w-full py-3.5 bg-gradient-to-r from-rose-500 to-rose-400 rounded-full justify-center items-center inline-flex border-b-4 hover:border-b-[12px] border-[#953747] hover:shadow-custom-glow active:shadow-none active:scale-95 active:border-b-4 transition duration-300 ease-in-out opacity-30 cursor-not-allowed next-button" data-create-ai-flow-target="nextButton" data-create-ai-flow-step="4" data-action="click->create-ai-flow#goToNextStep" disabled="">
        <span class="flex items-center justify-center text-white text-3xl font-bold">Next</span>
      </button>
    </div>
  </div>
  
</div>
</div></div>
          <div id="step5"><div data-create-ai-flow-target="step5" class="hidden block h-screen flex items-center step5 px-4 md:px-0">
  <div class="flex-col items-center h-screen md:h-auto flex mx-auto w-full">
    <div class="">
      <img src="assets/logo.png" class="mx-auto mt-4 mb-2 w-1/3" alt="Logo">
      <img src="assets/step5/step_5_progressbar.svg" alt="Progress bar" class="w-full px-10">
    </div>
    <div class="mt-5 w-full max-w-[500px]">
      <div class="text-center text-zinc-500 text-[20px] mb-5">
        Choose Age
      </div>
      <div id="slider-age"><div class="flex flex-col items-center md:mb-10 mb-10 w-full">
  <!-- Flex container for the labels and slider -->
  <div data-create-ai-flow-target="tooltipAge" class="text-white bg-zinc-800 px-5 py-1.5 rounded-full mb-5">24</div>
  <div class="flex items-center justify-between w-full sm:px-0">
    <!-- Labels "Teen (18+)" and "Milf (30+)" are now inline with the slider, making use of Flexbox for positioning -->
    <div class="hidden md:block text-zinc-500 tracking-tight whitespace-nowrap">
      Teen (18+)
    </div>
    <input type="range" class="w-full h-3.5 md:mx-4 rounded-full h-1 appearance-none bg-transparent slider-input-age-create-ai-landing" min="18" max="30" id="slider-input-age-create-ai-landing" step="0.01" value="24" data-action="input->create-ai-flow#updateSliderAgeValue change->create-ai-flow#saveValueAge" data-create-ai-flow-target="sliderAge" style="background: linear-gradient(to right, rgb(230, 80, 115) 0%, rgb(252, 118, 138) 50%, rgb(57, 55, 66) 50%, rgb(57, 55, 66) 100%);">
    <div class="hidden md:block text-zinc-500 tracking-tight whitespace-nowrap">
      Milf (30+)
    </div>
  </div>
  <!-- Tooltip positioning needs a different approach since we're avoiding absolute positions -->
</div>
</div>
      <div class="text-center text-zinc-500 text-[20px] mb-8">
        Choose Skills
      </div>
      <div id="slider-sucking"><div class="flex flex-col items-center mb-10">
  <!-- Flex container for the slider and labels -->
  <div class="flex items-center justify-between gap-5 w-full">
    <div class="flex-none min-w-20">
      <div class="text-white text-xl font-medium w-full">
        Sucking
      </div>
    </div>
    <div class="flex grow justify-between items-center gap-5">
      <input type="range" data-skill-target="sucking" class="rounded-full w-full h-3.5 appearance-none bg-transparent" min="0" max="100" id="slider-input-skill-create-ai-landing" step="1" value="0" data-action="input->create-ai-flow#updateSliderSkillValue change->create-ai-flow#saveValueSkills" data-create-ai-flow-target="sliderSkill" style="background: linear-gradient(to right, rgb(230, 80, 115) 0%, rgb(252, 118, 138) 0%, rgb(57, 55, 66) 0%, rgb(57, 55, 66) 100%);">
      <!-- Tooltip or value label, hidden on smaller screens for simplicity or space -->
      <div data-skill-tooltip="sucking" class="flex-none text-white font-medium tracking-tight">0 %</div>
    </div>
  </div>
</div>
</div>
      <div id="slider-spancking"><div class="flex flex-col items-center mb-10">
  <!-- Flex container for the slider and labels -->
  <div class="flex items-center justify-between gap-5 w-full">
    <div class="">
      <div class="text-white text-xl font-medium w-full">
        Spanking
      </div>
    </div>
    <div class="flex grow justify-between items-center gap-5">
      <input type="range" data-skill-target="spanking" class="rounded-full w-full h-3.5 appearance-none bg-transparent" min="0" max="100" id="slider-input-skill-create-ai-landing" step="1" value="0" data-action="input->create-ai-flow#updateSliderSkillValue change->create-ai-flow#saveValueSkills" data-create-ai-flow-target="sliderSkill" style="background: linear-gradient(to right, rgb(230, 80, 115) 0%, rgb(252, 118, 138) 0%, rgb(57, 55, 66) 0%, rgb(57, 55, 66) 100%);">
      <!-- Tooltip or value label, hidden on smaller screens for simplicity or space -->
    </div>
    <div data-skill-tooltip="spanking" class="text-white font-medium tracking-tight">0 %</div>
  </div>
</div>
</div>
      <div id="slider-anal"><div class="flex flex-col items-center mb-10">
  <!-- Flex container for the slider and labels -->
  <div class="flex items-center justify-between gap-5 w-full">
    <div class="flex-none min-w-20">
      <div class="text-white text-xl font-medium w-full">
        Anal
      </div>
    </div>
    <div class="flex grow justify-between items-center gap-5">
      <input type="range" data-skill-target="anal" class="rounded-full w-full h-3.5 appearance-none bg-transparent" min="0" max="100" id="slider-input-skill-create-ai-landing" step="1" value="0" data-action="input->create-ai-flow#updateSliderSkillValue change->create-ai-flow#saveValueSkills" data-create-ai-flow-target="sliderSkill" style="background: linear-gradient(to right, rgb(230, 80, 115) 0%, rgb(252, 118, 138) 0%, rgb(57, 55, 66) 0%, rgb(57, 55, 66) 100%);">
      <!-- Tooltip or value label, hidden on smaller screens for simplicity or space -->
    </div>
    <div data-skill-tooltip="anal" class="flex-none text-white font-medium tracking-tight">0 %</div>
  </div>
</div>
</div>
      <div id="slider-feet"><div class="flex flex-col items-center mb-10">
  <div class="flex items-center justify-between gap-5 w-full">
    <div class="flex-none min-w-20">
      <div class="text-white text-xl font-medium w-full">
        Feet
      </div>
    </div>
    <div class="flex grow justify-between items-center gap-5">
      <input type="range" data-skill-target="feet" class="rounded-full w-full h-3.5 appearance-none bg-transparent" min="0" max="100" id="slider-input-skill-create-ai-landing" step="1" value="0" data-action="input->create-ai-flow#updateSliderSkillValue change->create-ai-flow#saveValueSkills" data-create-ai-flow-target="sliderSkill" style="background: linear-gradient(to right, rgb(230, 80, 115) 0%, rgb(252, 118, 138) 0%, rgb(57, 55, 66) 0%, rgb(57, 55, 66) 100%);">
      <div data-skill-tooltip="feet" class="flex-none text-white font-medium tracking-tight">0 %</div>
    </div>
  </div>
</div>
</div>
    </div>
    <div class="mt-4 w-full max-w-[500px] pb-4 mx-10 gap-1 flex md:relative absolute bottom-0 mt-5 px-5 md:px-0">
      <div>
        <button class="back-button" data-create-ai-flow-step="5">
          <img src="assets/back_arrow.svg" alt="back arrow">
        </button>
      </div>
      <button class="w-full py-3.5 bg-gradient-to-r from-rose-500 to-rose-400 rounded-full justify-center items-center inline-flex border-b-4 hover:border-b-[12px] border-[#953747] hover:shadow-custom-glow active:shadow-none active:scale-95 active:border-b-4 transition duration-300 ease-in-out next-button" data-create-ai-flow-target="nextButton" data-create-ai-flow-step="5" data-action="click->create-ai-flow#goToNextStep">
        <span class="flex items-center justify-center text-white text-3xl font-bold">Next</span>
      </button>
    </div>
  </div>
</div>
</div>
        </div>
      </div>
      <div data-create-ai-flow-target="loaderPartial" class="hidden loader-partial hidden">
        <div class="flex flex-wrap loader-background desktop hidden">
        <!-- Juan - trying something here for the animation -->
          <div class="flex justify-around photo-col column-1">
            <img src="assets/loading_frames/desktop/frame_1.webp" alt="background pictures" class="background-frame">
          </div>
          <div class="flex justify-around photo-col column-2">
            <img src="assets/loading_frames/desktop/frame_2.webp" alt="background pictures" class="background-frame">
          </div>
          <div class="flex justify-around photo-col column-1">
            <img src="assets/loading_frames/desktop/frame_3.webp" alt="background pictures" class="background-frame">
          </div>
          <div class="flex justify-around photo-col column-2">
            <img src="assets/loading_frames/desktop/frame_4.webp" alt="background pictures" class="background-frame">
          </div>
          <div class="flex justify-around photo-col column-1">
            <img src="assets/loading_frames/desktop/frame_1.webp" alt="background pictures" class="background-frame">
          </div>
          <div class="flex justify-around photo-col column-2">
            <img src="assets/loading_frames/desktop/frame_2.webp" alt="background pictures" class="background-frame">
          </div>
        </div>
        <div class="flex flex-wrap loader-background mobile hidden">
          <!-- Juan - trying something here for the animation -->
            <div class="flex justify-around photo-col column-1">
              <img src="assets/loading_frames/mobile/frame_1.webp" alt="background pictures" class="background-frame">
            </div>
            <div class="flex justify-around photo-col column-2">
              <img src="assets/loading_frames/mobile/frame_2.webp" alt="background pictures" class="background-frame">
            </div>
            <div class="flex justify-around photo-col column-1">
              <img src="assets/loading_frames/mobile/frame_3.webp" alt="background pictures" class="background-frame">
            </div>
            <div class="flex justify-around photo-col column-2">
              <img src="assets/loading_frames/mobile/frame_4.webp" alt="background pictures" class="background-frame">
            </div>
            <div class="flex justify-around photo-col column-1">
              <img src="assets/loading_frames/mobile/frame_3.webp" alt="background pictures" class="background-frame">
            </div>
            <div class="flex justify-around photo-col column-2">
              <img src="assets/loading_frames/mobile/frame_4.webp" alt="background pictures" class="background-frame">
            </div>
          </div>
        <div class="loader-content h-screen flex flex-col items-center justify-center">
          <img src="assets/logo.png" class="w-[288px] mb-3" alt="Logo">
          <div class="text-center text-white text-[20px]">
            Creation in Progress
          </div>
          <div class="text-center text-zinc-500 text-[16px] mb-4">
            Your Girlfriend will be ready soon
          </div>
          <div class="w-72 h-7 pl-2.5 pr-72 py-2.5 flex-col">
            <div class="w-72 h-2 bg-gradient-to-r from-red-600 via-orange-400 to-rose-400 rounded-full"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- JavaScript file -->
    <script src="script.js"></script>
  

</body></html>