- ID de l'analyse :
- f609a458-26f7-4ff0-8b9a-67e1f8a6d78dTerminée
- URL soumise :
- https://candynetwork.ai/
- Fin du rapport :
Liens : 0 trouvé(s)
Liens sortants identifiés à partir de la page
Variables JavaScript : 22 trouvée(s)
Les variables JavaScript globales chargées dans l'objet fenêtre d'une page sont des variables déclarées en dehors des fonctions et accessibles depuis n'importe quel endroit du code au sein du champ d'application actuel
| Nom | Type |
|---|---|
| onbeforetoggle | object |
| documentPictureInPicture | object |
| onscrollend | object |
| $ | function |
| jQuery | function |
| tailwind | object |
| /template.html | string |
| initPartials | function |
| setLocalStorage | function |
| initSliders | function |
Messages de journal de console : 1 trouvé(s)
Messages consignés dans la console web
| Type | Catégorie | Enregistrement |
|---|---|---|
| warning | other |
|
HTML
Le corps HTML de la page en données brutes
<!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>