1<!DOCTYPE html> 2 3<html lang="en"> 4 <head> 5 <title>Feed | Candy.ai</title> 6 7 <meta 8 name="description" 9 content="Discover and explore AI-generated images and videos" 10 > 11 12 <link rel="manifest" href="/manifest.json"> 13 <meta name="mobile-web-app-capable" content="yes"> 14<meta name="apple-mobile-web-app-capable" content="yes"> 15<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> 16<meta name="apple-mobile-web-app-title" content="Candy.ai"> 17<link rel="apple-touch-icon" sizes="20x20" href="/assets/pwa/icons/apple/Icon-App-20x20@1x-a68ddb9a4d795f81cc50a7f8245d34ee25ae7450f6b50bd38ab6d0cc29ba9d82.png"> 18<link rel="apple-touch-icon" sizes="40x40" href="/assets/pwa/icons/apple/Icon-App-20x20@2x-079c311c560debf61bdbd7aefd29e2a5fb64aac3fbe839f6dfdd06e4c896137f.png"> 19<link rel="apple-touch-icon" sizes="60x60" href="/assets/pwa/icons/apple/Icon-App-20x20@3x-e99c82d2029a7be6f5d980707467f618c8d421b68f42acf1f9f6d8dd0be03863.png"> 20<link rel="apple-touch-icon" sizes="29x29" href="/assets/pwa/icons/apple/Icon-App-29x29@1x-48a6a12c55630ca1e50f3181901433a57c3a769844ab220ebcd41e38b53b765f.png"> 21<link rel="apple-touch-icon" sizes="58x58" href="/assets/pwa/icons/apple/Icon-App-29x29@2x-6cb0cf768da130b01c280240007cf83cae55dace137c43c4134f47
215a5a7e1513.png"> 22<link rel="apple-touch-icon" sizes="87x87" href="/assets/pwa/icons/apple/Icon-App-29x29@3x-e3f5dd9cdd3e42ae0b1df37bc29cc11357097bbea83aa15903b7b64d9857c65e.png"> 23<link rel="apple-touch-icon" sizes="80x80" href="/assets/pwa/icons/apple/Icon-App-40x40@2x-fb53caa3aabf8461ad4d7dca6b0aa3dc9b733250557f20fccddf7dc5883e9c66.png"> 24<link rel="apple-touch-icon" sizes="120x120" href="/assets/pwa/icons/apple/Icon-App-60x60@2x-809afb76dbf9457ee733189bf14ec3be6f73289bd3c624f785a58d9a99311f0f.png"> 25<link rel="apple-touch-icon" sizes="180x180" href="/assets/pwa/icons/apple/Icon-App-60x60@3x-010de2e7f02801c7ffc9aef0b5e99559465237d6a1c0a88067e95a6d6970aa4e.png"> 26<link rel="apple-touch-icon" sizes="76x76" href="/assets/pwa/icons/apple/Icon-App-76x76@1x-ae40f606e443ca29174d5c4460a812ce15364ef342c4545fb27ac16c06e47e48.png"> 27<link rel="apple-touch-icon" sizes="152x152" href="/assets/pwa/icons/apple/Icon-App-76x76@2x-82d7f24c4bd6fc4888e8149952aa167a438872b5ee7bd2f4bf326f3dc72a7084.png"> 28<link rel="apple-touch-icon" sizes="167x167" href="/assets/pwa/icons/apple/Icon-App-83.5x83.5@2x-a9516fae099b364a0a0fb606a86ab86f28ffd3160b75c48c92a7ad63bb9cf23e.png"> 29 30 <!-- Facebook Open Graph data --> 31 <meta 32 property="og:title" 33 content="Feed | Candy.ai" 34 > 35 36 <meta property="og:type" content="website"> 37 38 <meta property="og:url" content="https://candy.ai/feed/posts"> 39 40 <meta 41 property="og:description" 42 content="Discover and explore AI-generated images and videos" 43 > 44 45 <meta 46 property="og:site_name" 47 content="Feed | Candy.ai" 48 > 49 50 <meta 51 property="og:image" 52 content="https://candy.ai/assets/logos/social_sharing_1200X630-dc5e40669a70a12c1f6a549ddf5fc46f68c903832665b87565209ccaed673756.png" 53 > 54 <meta name="twitter:card" content="summary_large_image"> 55 56 <!-- Twitter Card data --> 57 58 <meta name="turbo-prefetch" content="false"> 59 60 <meta 61 name="viewport" 62 content="width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no" 63 > 64 65 66 67 <link rel="canonical" href="https://candy.ai/feed/posts"> 68 <link 69 rel="alternate" 70 href="https://candy.ai/feed/posts" 71 hreflang="en" 72 > 73 <link 74 rel="alternate" 75 href="https://candy.ai/feed/posts?locale=fr" 76 hreflang="fr" 77 > 78 <link 79 rel="alternate" 80 href="https://candy.ai/feed/posts?locale=de" 81 hreflang="de" 82 > 83 <link 84 rel="alternate" 85 href="https://candy.ai/feed/posts?locale=es" 86 hreflang="es" 87 > 88 <link 89 rel="alternate" 90 href="https://candy.ai/feed/posts?locale=pt-BR" 91 hreflang="pt-BR" 92 > 93 <link 94 rel="alternate" 95 href="https://candy.ai/feed/posts?locale=it" 96 hreflang="it" 97 > 98 <link 99 rel="alternate" 100 href="https://candy.ai/feed/posts?locale=nl" 101 hreflang="nl" 102 > 103 <link 104 rel="alternate" 105 href="https://candy.ai/feed/posts?locale=sv" 106 hreflang="sv" 107 > 108 <link 109 rel="alternate" 110 href="https://candy.ai/feed/posts?locale=da" 111 hreflang="da" 112 > 113 <link 114 rel="alternate" 115 href="https://candy.ai/feed/posts?locale=no" 116 hreflang="no" 117 > 118 <link 119 rel="alternate" 120 href="https://candy.ai/feed/posts?locale=fi" 121 hreflang="fi" 122 > 123 <link 124 rel="alternate" 125 href="https://candy.ai/feed/posts?locale=ja" 126 hreflang="ja" 127 > 128 <link 129 rel="alternate" 130 href="https://candy.ai/feed/posts?locale=pl" 131 hreflang="pl" 132 > 133 <link 134 rel="alternate" 135 href="https://candy.ai/feed/posts" 136 hreflang="x-default" 137 > 138 139
139<script type="application/ld+json"> 140{ 141 "@context": "https://schema.org", 142 "@type": "BreadcrumbList", 143 "itemListElement": [ 144 { 145 "@type": "ListItem", 146 "position": 1, 147 "name": "Home", 148 "item": "https://candy.ai/" 149 }, 150 { 151 "@type": "ListItem", 152 "position": 2, 153 "name": "Feed | Candy.ai", 154 "item": "https://candy.ai/feed/posts" 155 } 156 ] 157} 158</script>
158 159 160 161 <meta name="csrf-param" content="authenticity_token" /> 162<meta name="csrf-token" content="tQvNhSx8MjEAxZkTfFtTqxHIYMHtCpV9omxnwBQErEhpFOTemWuJOr20T_1Su8Wlh4utBq01znxi3f2LqlOVdw" /> 163 164 <link rel="icon" type="image/x-icon" href="/assets/favico-c002e20e13e2ee0d917bef3242cab0236c1087207a951e9d578b370c519d800a.png" /> 165 <link rel="preconnect" href="https://fonts.googleapis.com"> 166<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 167 <link rel="preconnect" href="https://cdn.candy.ai" crossorigin> 168<link rel="stylesheet" 169 href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=Roboto:wght@300;400;500;700&display=swap" 170 media="print" 171 onload="this.media='all'"> 172<noscript> 173 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=Roboto:wght@300;400;500;700&display=swap"> 174</noscript> 175 176<link rel="stylesheet" href="/assets/application-8ee8a481074c4025471514720f49a183b2d681ef94947cc96604f49cfcc404bd.css" data-turbo-track="reload" /> 177 178
178<script src="/assets/application-8e0f15c7ab8015fa09b9283587ea3992a13e25d296abc53659a4a68d93893d7e.js" data-turbo-track="reload" defer="defer"></script>
vendor: 1 bytes, line 178
178
179<script src="/assets/voice_call_addon-da279304726038af10a93380997f2f630ac7817d459ac09f7e097ea0b428e5c1.js" data-turbo-track="reload" defer="defer"></script>
179 180 181
182<script src="/assets/alpine-69b009b4309a19f099cf57a5f03edb7fbc7a130fdc6a2e9b34bb32a1ca3ef10d.js" data-turbo-track="reload" defer="defer"></script>
182 183 184<meta name="action-cable-url" content="wss://candy.ai/cable" /> 185 186
186<script 187 src="https://code.jquery.com/jquery-3.6.0.min.js" 188 nonce="" 189 ></script>
189 190 191
191<script 192 type="text/javascript" 193 src="https://geo.cookie-script.com/s/4cc9eb3f1bc758e7fcebe1660eae7c25.js?country=gb-br-ca-au-za&state=ca-co-va&region=eu" 194 nonce="" 195 > 196 </script>
196 197
198<script type="text/javascript"> 199 window.mixpanelIdentityConfig = {"skipAlias":false}; 200</script>
200 201
vendor: 2,441 bytes, lines 202-255
202<script type="text/javascript"> 203 (function (f, b) { 204 if (!b.__SV) { 205 var e, g, i, h; 206 window.mixpanel = b; 207 b._i = []; 208 b.init = function (e, f, c) { 209 function g(a, d) { 210 var b = d.split("."); 211 2 == b.length && (a = a[b[0]], d = b[1]); 212 a[d] = function () { 213 a.push([d].concat(Array.prototype.slice.call(arguments, 0))) 214 } 215 } 216 217 var a = b; 218 "undefined" !== typeof c ? a = b[c] = [] : c = "mixpanel"; 219 a.people = a.people || []; 220 a.toString = function (a) { 221 var d = "mixpanel"; 222 "mixpanel" !== c && (d += "." + c); 223 a || (d += " (stub)"); 224 return d 225 }; 226 a.people.toString = function () { 227 return a.toString(1) + ".people (stub)" 228 }; 229 i = "disable time_event track track_pageview track_links track_forms track_with_groups add_group set_group remove_group register register_once alias unregister identify name_tag set_config reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking start_batch_senders people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user people.remove".split(" "); 230 for (h = 0; h < i.length; h++) g(a, i[h]); 231 var j = "set set_once union unset remove delete".split(" "); 232 a.get_group = function () { 233 function b(c) { 234 d[c] = function () { 235 call2_args = arguments; 236 call2 = [c].concat(Array.prototype.slice.call(call2_args, 0)); 237 a.push([e, call2]) 238 } 239 } 240 241 for (var d = {}, e = ["get_group"].concat(Array.prototype.slice.call(arguments, 0)), c = 0; c < j.length; c++) b(j[c]); 242 return d 243 }; 244 b._i.push([e, f, c]) 245 }; 246 b.__SV = 1.2; 247 e = f.createElement("script"); 248 e.type = "text/javascript"; 249 e.async = !0; 250 e.src = "undefined" !== typeof MIXPANEL_CUSTOM_LIB_URL ? MIXPANEL_CUSTOM_LIB_URL : "file:" === f.location.protocol && "//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//) ? "https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js" : "//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js"; 251 g = f.getElementsByTagName("script")[0]; 252 g.parentNode.insertBefore(e, g) 253 } 254 })(document, window.mixpanel || []); 255</script>
255 256
257<script type="text/javascript"> 258 document.addEventListener("turbo:load", function () { 259 // Check if Mixpanel API token is available 260 var mixpanelToken = "a524618d7794c70f8d028f5b045ca8ec"; 261 if (!mixpanelToken || mixpanelToken === "") { 262 return; 263 } 264 265 if (!window.mixpanel.__loaded) { 266 // Base configuration for all sites 267 var config = { 268 debug: false, 269 persistence: 'localStorage', 270 ignore_dnt: true, 271 }; 272 273 274 // Initialize Mixpanel (stub pattern handles async loading automatically) 275 try { 276 mixpanel.init(mixpanelToken, config); 277 } catch (_e) { 278 return; 279 } 280 } 281 282 function trackPageviewOnce(retryCount) { 283 retryCount = retryCount || 0; 284 var maxRetries = 30; // Maximum 30 retries (3 seconds total at 100ms intervals) 285 var currentUrl = window.location.href; 286 287 // Only track if URL has changed or this is the first load 288 if (window.mixpanelLastTrackedUrl !== currentUrl) { 289 if (window.mixpanel && typeof window.mixpanel.track_pageview === 'function') { 290 mixpanel.track_pageview(); 291 window.mixpanelLastTrackedUrl = currentUrl; 292 } else if (retryCount < maxRetries) { 293 // If Mixpanel isn't ready yet, retry after a short delay 294 setTimeout(function() { 295 trackPageviewOnce(retryCount + 1); 296 }, 100); 297 } else { 298 // Max retries reached - Mixpanel may be blocked or failed to load 299 } 300 } 301 } 302 303 304 // Register default properties on every turbo:load to ensure fresh data 305 // (user may log in/out) 306 // Always register properties, including for guests (user_type: "guest") 307 const defaultProps = {"user_type":"guest"}; 308 // Wait for mixpanel to be ready, then register defaults 309 const registerDefaults = function(retryCount) { 310 retryCount = retryCount || 0; 311 const maxRetries = 50; // 5 seconds max wait time (50 * 100ms) 312 313 if (typeof mixpanel !== "undefined" && mixpanel.register) { 314 mixpanel.register(defaultProps); 315 // Store for fallback use 316 window.mixpanelDefaultProperties = defaultProps; 317 } else if (retryCount < maxRetries) { 318 // Retry after a short delay if mixpanel isn't ready yet 319 setTimeout(function() { registerDefaults(retryCount + 1); }, 100); 320 } else { 321 // Fallback: Store in window even if mixpanel isn't ready (mergeWithDefaults will use it) 322 window.mixpanelDefaultProperties = defaultProps; 323 } 324 }; 325 registerDefaults(); 326 327 let userId = "" 328 const guestDistinctId = window.mixpanelIdentityConfig?.guestDistinctId || null; 329 const guestIdentificationEnabled = true; 330 if (userId !== '') { 331 const mxUserId = JSON.parse(localStorage.getItem(`mp_a524618d7794c70f8d028f5b045ca8ec_mixpanel`))?.$user_id || null; 332 const skipAlias = window.mixpanelIdentityConfig?.skipAlias || false; 333 if (skipAlias && mxUserId !== userId) { 334 mixpanel.identify(userId); 335 } else if (mxUserId == null) { 336 mixpanel.alias(userId); 337 mixpanel.identify(userId); 338 } else if (mxUserId !== userId) { 339 mixpanel.identify(userId); 340 } 341 } else if (guestDistinctId && guestIdentificationEnabled) { 342 mixpanel.identify(guestDistinctId); 343 } 344 // Track pageview once per URL (works for both full page loads and Turbo navigations) 345 // Only track if enabled via ENV variable 346 347 }) 348</script>
348 349 350 351 352 353 <!-- Google Tag Manager --> 354
354<script>
vendor: 358 bytes, lines 354-359
354 355 (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': 356 new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], 357 j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 358 "https://www.googletagmanager.com/gtm.js?id="+i+dl;f.parentNode.insertBefore(j,f); 359 })(window,document,'script','dataLayer',"
359GTM-NM6MQN67
vendor: 8 bytes, lines 359-360
359"); 360
360</script>
360 361 <!-- End Google Tag Manager --> 362 363
364<script> 365 (function() { 366 window.I18n = { 367 locale: "en", 368 currency: "USD", 369 translations: {}, 370 t: function(key) { 371 var parts = key.split("."); 372 var result = this.translations; 373 for (var i = 0; i < parts.length; i++) { 374 result = result[parts[i]]; 375 if (result == null) return key; 376 } 377 return result; 378 } 379 }; 380 })(); 381</script>
381 382 383 384 385 <link rel="preload" href="/assets/feed/like-6bfb7f5a54d0259524bf6b37730926d02f493c54d1a3aa1db5fdd3a281f15d37.svg" as="image"> 386 <link rel="preload" href="/assets/feed/unlike-23c7cc4b1dad1fd528bbec4a379fe65416562a43ba49662a4cfe711eae35ff8c.svg" as="image"> 387 <link rel="preload" href="/assets/feed/refresh-icon-cae438bcbf3056679da53834772425e36084e34cfc0329859e34e05173f83e53.svg" as="image"> 388 389 </head> 390 391 <body 392 class="bg-main-v2 posts index" 393 id="app" 394 data-controller="main mobile-scroll-behavior mobile-navbar-visibility modal pwa" 395 396 data-mobile-scroll-behavior-current-page-name="posts" 397 data-main-is-sidebar-opened-value="false" 398 data-main-is-current-user-signed-in="" 399 data-main-selected-character-id-from-generate-image 400 data-main-auth-modals-url-value="/homepage/auth_modals?origin_action=index&origin_controller=posts&origin_path=%2Ffeed%2Fposts" 401 > 402 403 404 <!-- Google Tag Manager (noscript) -->
vendor: 72 bytes, lines 404-405
404 405 <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=
405GTM-NM6MQN67
vendor: 87 bytes, lines 405-407
405" 406height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> 407
407<!-- End Google Tag Manager (noscript) --> 408 409 410 411 412 <div id="js-events-container"></div> 413 414 415 416 <div 417 data-controller="uta-api" 418 data-uta-api-api-url-value="https://uta.candy.ai" 419 data-uta-api-api-token-value="31c5e5ffaae6aa6363dca57282888e9ee66a04de3830b8eb31f3fb9102cdb795" 420 data-uta-api-uta-visitor-id-value="" 421 data-uta-api-email-value="" 422 data-uta-api-experiments-value="[]" 423 data-uta-api-skip-page-view-value="false" 424></div> 425 426 427 <turbo-frame id="layout_extras" src="/cache/layout/extras"></turbo-frame> 428 <div 429 data-main-target="mainSidebarClosedContainer" 430 data-testid="new-shell-closed-sidebar" 431 class=" 432 lg:fixed lg:pt-[63px] z-30 border-[#363636] border-r border-t 433 lg:inset-y-0 lg:left-0 lg:w-[100px] lg:pb-5 w-[100px] fixed top-0 left-0 434 h-full desktop-sidebar desktop-sidebar--collapsed webkit-transform-sidebar 435 " 436 style="background: linear-gradient(0deg, #131313 0%, #131313 100%); max-height: 100vh" 437> 438 <nav class="flex flex-col justify-between h-full"> 439 <div class="flex flex-col flex-1 min-h-0"> 440 <ul 441 role="list" 442 class=" 443 py-8 lg:py-6 flex flex-col gap-2 items-center justify-start px-6 444 flex-1 min-h-0 overflow-y-auto overflow-x-hidden no-scrollbar 445 " 446 > 447 <!-- Home Icon --> 448 <li 449 class="relative w-full" 450 data-controller="navbar-tooltip" 451 data-navbar-tooltip-tooltip-id-value="tooltip-home" 452 > 453 <div 454 id="tooltip-home" 455 role="tooltip" 456 class="z-[9999] hidden invisible px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-grey-tooltip rounded-lg shadow-2xs opacity-0 tooltip tooltip-sidebar dark:bg-gray-700 fixed whitespace-nowrap pointer-events-none" 457 > 458 Home 459 </div> 460 <a class="h-[40px] w-full hover:bg-zinc-700 rounded-[10px] border border-white/10 flex justify-start px-3 items-center gap-2 mx-auto cursor-pointer " href="/"> 461 <img class="w-6 h-6" src="/assets/sidebar-icons/home-18a7d73adabda5674f78dab4a3d6b3acebbdbba31f0ad19053537dabffade496.svg" /> 462</a> </li> 463 <!-- Discover/Feed Icon --> 464 <li 465 class="relative w-full" 466 data-controller="navbar-tooltip" 467 data-navbar-tooltip-tooltip-id-value="tooltip-discover" 468 > 469 <div 470 id="tooltip-discover" 471 role="tooltip" 472 class="z-[9999] hidden invisible px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-grey-tooltip rounded-lg shadow-2xs opacity-0 tooltip tooltip-sidebar dark:bg-gray-700 fixed whitespace-nowrap pointer-events-none" 473 > 474 Discover 475 </div> 476 <a class="h-[40px] w-full hover:bg-zinc-700 rounded-[10px] border border-white/10 flex justify-start px-3 items-center gap-2 mx-auto cursor-pointer bg-[#303030]" href="/feed/posts"> 477 <img class="w-6 h-6" src="/assets/sidebar-icons/explore-3a4a39d3c6126c743969aa14b3a4841763f5b600e0f77e317a32d7c30afbcc13.svg" /> 478</a> </li> 479 <!-- Shorts Icon --> 480 <li 481 class="relative w-full" 482 data-controller="navbar-tooltip" 483 data-navbar-tooltip-tooltip-id-value="tooltip-shorts" 484 > 485 <div 486 id="tooltip-shorts" 487 role="tooltip" 488 class="z-[9999] hidden invisible px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-grey-tooltip rounded-lg shadow-2xs opacity-0 tooltip tooltip-sidebar dark:bg-gray-700 fixed whitespace-nowrap pointer-events-none" 489 > 490 Shorts 491 </div> 492 <a data-turbo-frame="_top" class="h-[40px] w-full hover:bg-zinc-700 rounded-[10px] border border-white/10 flex justify-start px-3 items-center gap-2 mx-auto cursor-pointer " href="/candy-shorts"> 493 <img class="w-6 h-6" src="/assets/sidebar-icons/shorts-86337f4c209f25d6a2e8747130abf65e3777adeb64c691edd55f80c75491f08b.svg" /> 494</a> </li> 495 <li 496 class="relative w-full" 497 data-controller="navbar-tooltip"
498 data-navbar-tooltip-tooltip-id-value="tooltip-chat" 499 > 500 <div 501 id="tooltip-chat" 502 role="tooltip" 503 class="z-[9999] hidden invisible px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-grey-tooltip rounded-lg shadow-2xs opacity-0 tooltip tooltip-sidebar dark:bg-gray-700 fixed whitespace-nowrap pointer-events-none" 504 > 505 Chat 506 </div> 507 <a data-action="click->main#openRegistrationModal" class="h-[40px] w-full hover:bg-zinc-700 rounded-[10px] border border-white/10 flex justify-start px-3 items-center gap-2 mx-auto cursor-pointer" href="#"> 508 <img class="w-6 h-6" src="/assets/sidebar-icons/chat-1f356f466c9023c851a3a185fd1e607229737246758457a3f49b82e17bc5d82b.svg" /> 509</a> </li> 510 <li 511 class="relative w-full" 512 data-controller="navbar-tooltip" 513 data-navbar-tooltip-tooltip-id-value="tooltip-gallery" 514 > 515 <div 516 id="tooltip-gallery" 517 role="tooltip" 518 class="z-[9999] hidden invisible px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-grey-tooltip rounded-lg shadow-2xs opacity-0 tooltip tooltip-sidebar dark:bg-gray-700 fixed whitespace-nowrap pointer-events-none" 519 > 520 Collection 521 </div> 522 <a data-action="click->main#openRegistrationModal" class=" h-[40px] w-full hover:bg-zinc-700 rounded-[10px] border border-white/10 flex justify-start px-3 items-center gap-2 mx-auto cursor-pointer" href="#"> 523 <img class="w-6 h-6" src="/assets/sidebar-icons/gallery-b83c72cb24c980d5e254daba38d4e3690f281b07c3e5665a052e0f76fff031b8.svg" /> 524</a> </li> 525 <li 526 class="relative w-full" 527 data-controller="navbar-tooltip" 528 data-navbar-tooltip-tooltip-id-value="tooltip-image" 529 > 530 <div 531 id="tooltip-image" 532 role="tooltip" 533 class="z-[9999] hidden invisible px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-grey-tooltip rounded-lg shadow-2xs opacity-0 tooltip tooltip-sidebar dark:bg-gray-700 fixed whitespace-nowrap pointer-events-none" 534 > 535 Generate Image 536 </div> 537 <a data-turbo-frame="_top" class="relative h-[40px] w-full hover:bg-zinc-700 rounded-[10px] border border-white/10 flex justify-start px-3 items-center gap-2 mx-auto cursor-pointer" href="/generate-image?origin=sidebar"> 538 <img class="w-6 h-6" src="/assets/home/generate-33f95391d5d800565b7ea9ba3f6effa0a3d0a2b2eeafdba4ccc526aef7ae3498.svg" /> 539</a> </li> 540 <li 541 class="relative w-full" 542 data-controller="navbar-tooltip" 543 data-navbar-tooltip-tooltip-id-value="tooltip-character" 544 > 545 <div 546 id="tooltip-character" 547 role="tooltip" 548 class="z-[9999] hidden invisible px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-grey-tooltip rounded-lg shadow-2xs opacity-0 tooltip tooltip-sidebar dark:bg-gray-700 fixed whitespace-nowrap pointer-events-none" 549 > 550 Create Character 551 </div> 552 <a data-turbo-frame="_top" class="relative h-[40px] w-full hover:bg-zinc-700 rounded-[10px] border border-white/10 flex justify-start px-3 items-center gap-2 mx-auto cursor-pointer" href="/characters/new"> 553 <img class="w-6 h-6" src="/assets/home/magic-wand-bc43a2a37c108cc6308370c0e6fada5385fd848143063f66116694fd9aa075b7.svg" /> 554</a> </li> 555 <li 556 class="relative w-full" 557 data-controller="navbar-tooltip" 558 data-navbar-tooltip-tooltip-id-value="tooltip-my_ai" 559 > 560 <div 561 id="tooltip-my_ai" 562 role="tooltip" 563 class="z-[9999] hidden invisible px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-grey-tooltip rounded-lg shadow-2xs opacity-0 tooltip tooltip-sidebar dark:bg-gray-700 fixed whitespace-nowrap pointer-events-none" 564 > 565 My AI 566 </div> 567 <a data-turbo-frame="_top" class=" h-[40px] w-full hover:bg-zinc-700 rounded-[10px] border border-white/10 flex justify-start px-3 items-center gap-2 mx-auto cursor-pointer" href="/characters"> 568 <img class="w-6 h-6" src="/assets/sidebar-icons/love-lady-760605daa886b7e49e77d5d26c1047bc0f815c005a978a5c76810db20bc355dd.svg" /> 569</a> </li> 570 <li 571 class="relative w-full" 572 data-controller="navbar-tooltip" 573 data-navbar-tooltip-tooltip-id-value="tooltip-private_content" 574 > 575 <div 576 id="tooltip-private_content" 577 role="tooltip" 578 class="z-[9999] hidden invisible px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-grey-tooltip rounded-lg shadow-2xs opacity-0 tooltip tooltip-sidebar dark:bg-gray-700 fixed whitespace-nowrap pointer-events-none" 579 > 580 Private Content 581 </div> 582 <a data-action="click->main#openRegistrationModal" data-turbo-frame="_top" class=" h-[40px] w-full hover:bg-zinc-700 rounded-[10px] border border-white/10 flex justify-start px-3 items-center gap-2 mx-auto cursor-pointer cursor-pointer" href="#"> 583 <img class="w-6 h-6" src="/assets/heart-lock-c322a04a0a80c5ca1b50658063120fa33d2f209b5e0980e7be8e47cc9667f736.svg" /> 584</a> </li> 585 586 587 588<li 589 class="relative w-full" 590 data-controller="navbar-tooltip" 591 data-navbar-tooltip-tooltip-id-value="tooltip-premium" 592> 593 <div 594 id="tooltip-premium" 595 role="tooltip" 596 class="z-[9999] hidden invisible px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-grey-tooltip rounded-lg shadow-2xs opacity-0 tooltip tooltip-sidebar dark:bg-gray-700 fixed whitespace-nowrap pointer-events-none" 597 > 598 Become Premium 599 </div> 600 <a data-turbo-frame="_top" class="h-[40px] w-full hover:bg-zinc-700 rounded-[10px] border border-white/10 justify-start px-3 items-center gap-2 flex mx-auto cursor-pointer bg-linear-to-t from-[#5B4514] to-transparent to-98% from-2%" href="/subscriptions"> 601 <img class="w-2.5 h-2.5 absolute left-[4px] top-[4px] transform scale-x-[-1]" src="/assets/promotions/icon-513af0057e4b673067a8049311ea31fe24a74b04337db95bf10d618a16abcfb7.svg" /> 602 <img class="w-6 h-6" src="/assets/promotions/diamond-a039f6364c40ef964956407067f00bb72540562bfc3ca551b1ae10db3f29c08c.svg" /> 603</a></li> 604 605 </ul> 606 </div> 607 <ul 608 role="list" 609 class=" 610 flex flex-col gap-2 pt-6 px-6 border-[#363636] border-t items-center 611 justify-end shrink-0 612 " 613 > 614 <li class="relative w-full"> 615 616 617 618 619<button data-controller="toggle-modal" 620 data-action="toggle-modal#openModal" 621 data-toggle-modal-modal-outlet="#language-select-modal" 622 class="flex gap-2 items-center border cursor-pointer text-grey-medium text-xs font-medium w-full h-[40px] justify-start px-3 py-[9px] rounded-[10px] border-white/10 hover:bg-zinc-700"> 623 <img class="h-[24px]" alt="en flag icon" src="/assets/sidebar-icons/en-337bbb31fb6de773da4d64ab2e9
6230f99d4706f32ade21156a47b8603dfeccb1e4.svg" /> 624</button> 625 626 </li> 627 <li 628 class="relative w-full" 629 data-testid="sidebar-more-menu" 630 data-controller="sidebar-more-menu" 631 data-action="click@window->sidebar-more-menu#hide keydown@window->sidebar-more-menu#hideOnEscape keydown->sidebar-more-menu#navigate focusout->sidebar-more-menu#hideOnFocusOut resize@window->sidebar-more-menu#close turbo:before-cache@document->sidebar-more-menu#close" 632> 633 <div id="tooltip-more" role="tooltip" class="z-[9999] hidden invisible px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-grey-tooltip rounded-lg shadow-2xs opacity-0 tooltip tooltip-sidebar dark:bg-gray-700 fixed whitespace-nowrap pointer-events-none"> 634 More 635 </div> 636 <button 637 type="button" 638 data-sidebar-more-menu-target="button" 639 data-action="click->sidebar-more-menu#toggle" 640 data-controller="navbar-tooltip" data-navbar-tooltip-tooltip-id-value="tooltip-more" 641 aria-haspopup="menu" 642 aria-expanded="false" 643 aria-controls="sidebar-more-menu-compact" 644 aria-label="More" 645 class="h-[40px] w-full hover:bg-zinc-700 rounded-[10px] border border-white/10 flex justify-start px-3 items-center gap-2 mx-auto cursor-pointer aria-expanded:bg-[#303030]" 646 > 647 <img class="w-6 h-6" alt="" src="/assets/sidebar-icons/more-6f3c9c2566494b849d8726e7bc3d345a20ded262e1fdb20db1f45835eca060e9.svg" /> 648 </button> 649 <div 650 id="sidebar-more-menu-compact" 651 role="menu" 652 popover="manual" 653 data-sidebar-more-menu-target="menu" 654 class="w-[196px] space-y-2 rounded-[10px] border border-[#363636] bg-[#131313] p-2 shadow-[0_4px_16px_rgba(0,0,0,0.4)] text-grey-medium" 655 > 656 <a target="_blank" rel="noopener noreferrer" role="menuitem" data-action="click->sidebar-more-menu#close" class="min-h-[40px] w-full hover:bg-[#303030] rounded-[10px] flex justify-start px-3 items-center gap-2 cursor-pointer text-grey-medium text-xs font-medium leading-4 text-start" href="https://everai.zendesk.com/hc/en-us"> 657 <img class="w-4 h-4" alt="" src="/assets/sidebar-icons/help-center-1abd5651dab8abd889622a19eb9821ab4c19bd275da4ac1b9717820842a98dd8.svg" /> 658 <span>Help Center</span> 659</a> <a target="_blank" rel="noopener noreferrer" role="menuitem" data-action="click->sidebar-more-menu#close" class="min-h-[40px] w-full hover:bg-[#303030] rounded-[10px] flex justify-start px-3 items-center gap-2 cursor-pointer text-grey-medium text-xs font-medium leading-4 text-start" href="https://discord.com/invite/candyai"> 660 <img class="w-4 h-4" alt="" src="/assets/sidebar-icons/discord-526bbe3abf7210fa8bd8e76658d4df5a5c67d569f1349a2441b1d0bbd170c84d.svg" /> 661 <span>Discord</span> 662</a> <button type="button" role="menuitem" data-action="click->main#openRegistrationModal click->sidebar-more-menu#close" class="min-h-[40px] w-full hover:bg-[#303030] rounded-[10px] flex justify-start px-3 items-center gap-2 cursor-pointer text-grey-medium text-xs font-medium leading-4 text-start"> 663 <img class="w-4 h-4" alt="" src="/assets/sidebar-icons/contact-c50065a887c8d0061543beceae78cec1bdaaac55ec7d37f11601912b3250e119.svg" /> 664 <span>Contact Us</span> 665 </button> 666 <a target="_blank" rel="noopener noreferrer" role="menuitem" data-action="click->sidebar-more-menu#close" class="min-h-[40px] w-full hover:bg-[#303030] rounded-[10px] flex justify-start px-3 items-center gap-2 cursor-pointer text-grey-medium text-xs font-medium leading-4 text-start" href="https://webforms.pipedrive.com/f/bYSTErXD8pcDoco3iakbUUKFRtWtAjNDJphn0GpYA3B88R2NYvCzVMM2wsNCjtVMkP"> 667 <img class="w-4 h-4" alt="" src="/assets/sidebar-icons/trophy-55ba15bcf830427b6fc776e11ff4465cce75c1c2a1a27ba0bd2eea0e5c03ff55.svg" /> 668 <span>Affiliate</span> 669</a> </div> 670</li> 671 672 </ul> 673 </nav> 674</div> 675 676 <div data-main-target="mainSidebarOpenedContainer" data-testid="new-shell-opened-sidebar" class="lg:fixed lg:pt-[63px] z-30 border-[#363636] border-r border-t lg:inset-y-0 lg:left-0 lg:w-[220px] lg:pb-5 w-[220px] fixed top-0 left-0 h-full desktop-sidebar desktop-sidebar--expanded webkit-transform-sidebar" 677 style="background: linear-gradient(0deg, #131313 0%, #131313 100%); max-height: 100vh"> 678 <nav class="flex flex-col justify-between h-full"> 679 <div class="flex flex-col flex-1 min-h-0"> 680 <ul role="list" class="py-8 lg:py-6 flex flex-col gap-2 items-center justify-start px-6 flex-1 min-h-0 overflow-y-auto scrollbar"> 681 <!-- Home Icon --> 682 <li class="relative w-full"> 683 <a class=" min-h-[40px] w-full hover:bg-zinc-700 rounded-[10px] border border-white/10 flex justify-start px-3 items-center gap-2 mx-auto cursor-pointer" href="/"> 684 <img class="w-4 h-4" alt="Home" src="/assets/sidebar-icons/home-18a
6847d73adabda5674f78dab4a3d6b3acebbdbba31f0ad19053537dabffade496.svg" /> 685 <span class="text-start text-grey-medium text-xxs font-medium leading-4">Home</span> 686</a> </li> 687 <!-- Discover/Feed Icon --> 688 <li class="relative w-full"> 689 <a class="bg-[#303030] min-h-[40px] w-full hover:bg-zinc-700 rounded-[10px] border border-white/10 flex justify-start px-3 items-center gap-2 mx-auto cursor-pointer" href="/feed/posts"> 690 <img class="w-4 h-4" alt="Discover" src="/assets/sidebar-icons/explore-3a4a39d3c6126c743969aa14b3a4841763f5b600e0f77e317a32d7c30afbcc13.svg" /> 691 <span class="text-start text-grey-medium text-xxs font-medium leading-4">Discover</span> 692</a> </li> 693 <!-- Shorts Icon --> 694 <li class="relative w-full"> 695 <a data-turbo-frame="_top" class=" min-h-[40px] w-full hover:bg-zinc-700 rounded-[10px] border border-white/10 flex justify-start px-3 items-center gap-2 mx-auto cursor-pointer" href="/candy-shorts"> 696 <img class="w-4 h-4" alt="Shorts" src="/assets/sidebar-icons/shorts-86337f4c209f25d6a2e8747130abf65e3777adeb64c691edd55f80c75491f08b.svg" /> 697 <span class="text-start text-grey-medium text-xxs font-medium leading-4">Shorts</span> 698</a> </li> 699 <li class="relative w-full"> 700 <a data-action="click->main#openRegistrationModal" class="min-h-[40px] w-full hover:bg-zinc-700 rounded-[10px] border border-white/10 flex justify-start px-3 items-center gap-2 mx-auto cursor-pointer" href="#"> 701 <img class="w-4 h-4" src="/assets/sidebar-icons/chat-1f356f466c9023c851a3a185fd1e607229737246758457a3f49b82e17bc5d82b.svg" alt="Chat"> 702 <span class="text-start text-grey-medium text-xxs font-medium leading-4">Chat</span> 703</a> </li> 704 <li class="relative w-full"> 705 <a data-action="click->main#openRegistrationModal" class=" min-h-[40px] w-full hover:bg-zinc-700 rounded-[10px] border border-white/10 flex justify-start px-3 items-center gap-2 mx-auto cursor-pointer" href="#"> 706 <img alt="Collection" class="w-4 h-4" src="/assets/sidebar-icons/gallery-b83c72cb24c980d5e254daba38d4e3690f281b07c3e5665a052e0f76fff031b8.svg" /> 707 <div class="text-start text-grey-medium text-xxs font-medium leading-4">Collection</div> 708</a> </li> 709 <li class="relative w-full"> 710 <a data-turbo-frame="_top" class="relative min-h-[40px] w-full hover:bg-zinc-700 rounded-[10px] border border-white/10 flex justify-start px-3 items-center gap-2 mx-auto cursor-pointer" href="/generate-image?origin=sidebar"> 711 <img class="w-4 h-4" src="/assets/home/generate-33f95391d5d800565b7ea9ba3f6effa0a3d0a2b2eeafdba4ccc526aef7ae3498.svg" alt="Generate Image"> 712 <div class="text-start text-grey-medium text-xxs font-medium leading-none"> 713 Generate Image 714 </div> 715</a> </li> 716 <li class="relative w-full"> 717 <a data-turbo-frame="_top" class="relative min-h-[40px] w-full hover:bg-zinc-700 rounded-[10px] border border-white/10 flex justify-start px-3 items-center gap-2 mx-auto cursor-pointer" href="/characters/new"> 718 <img class="w-4 h-4" src="/assets/home/magic-wand-bc43a2a37c108cc6308370c0e6fada5385fd848143063f66116694fd9aa075b7.svg" alt="Create Character"> 719 <div class="text-start text-grey-medium text-xxs font-medium leading-none"> 720 Create Character 721 </div> 722</a> </li> 723 <li class="relative w-full"> 724 <a data-turbo-frame="_top" class=" min-h-[40px] w-full hover:bg-zinc-700 rounded-[10px] border border-white/10 flex justify-start px-3 items-center gap-2 mx-auto cursor-pointer" href="/characters"> 725 <img class="w-4 h-4" src="/assets/sidebar-icons/love-lady-760605daa886b7e49e77d5d26c1047bc0f815c005a978a5c76810db20bc355dd.svg" alt="My AI"> 726 <div class="text-start text-grey-medium text-xxs font-medium leading-none"> 727 My AI 728 </div> 729</a> </li> 730 <li class="relative w-full"> 731 <a data-action="click->main#openRegistrationModal" data-turbo-frame="_top" class=" min-h-[40px] w-full hover:bg-zinc-700 rounded-[10px] border border-white/10 flex justify-start px-3 items-center gap-2 mx-auto cursor-pointer cursor-pointer" href="#"> 732 <img class="w-4 h-4" alt="Private Content" src="/assets/heart-lock-c322a04a0a80c5ca1b50658063120fa33d2f209b5e0980e7be8e47cc9667f736.svg" /> 733 <div class="text-start text-grey-medium text-xxs font-medium leading-none"> 734 Private Content 735 </div> 736</a> </li> 737 738 739<li class="relative w-full"> 740 <a data-turbo-frame="_top" class="h-[40px] hover:bg-zinc-700 rounded-[10px] border border-white/10 justify-start px-3 items-center gap-2 flex mx-auto cursor-pointer" href="/subscriptions"> 741 <img class="w-2.5 h-2.5 absolute left-[4px] top-[4px] transform scale-x-[-1]" src="/assets/promotions/icon-513af0057e4b673067a8049311ea31fe24a74b04337db95bf10d618a16abcfb7.svg" /> 742 <img class="w-4 h-4" src="/assets/promotions/diamond-a039f6364c40ef964956407067f00bb72540562bfc3ca551b1ae10db3f29c08c.svg" /> 743 <div class="flex justify-between items-center w-full min-w-0"> 744 <div class="text-start text-xxs font-medium leading-none truncate bg-linear-to-r from-[#F9D98E] to-[#D0B067] bg-clip-text text-transparent"> 745 Premium 746 </div>
747 <span class="shrink-0 px-1 font-medium text-[10px] rounded-[10px] bg-[#B91923] text-white"> 748 -70% 749 </span> 750 </div> 751</a></li> 752 753 </ul> 754 </div> 755 <ul role="list" class="flex flex-col gap-2 pt-6 px-6 border-[#363636] border-t items-center justify-end shrink-0"> 756 <li class="relative w-full"> 757 758 759 760 761<button data-controller="toggle-modal" 762 data-action="toggle-modal#openModal" 763 data-toggle-modal-modal-outlet="#language-select-modal" 764 class="flex gap-2 items-center border cursor-pointer text-grey-medium text-xs font-medium w-full justify-start px-3 py-[9px] rounded-[10px] border-white/10 hover:bg-zinc-700"> 765 <img class="w-[14px]" alt="en flag icon" src="/assets/sidebar-icons/en-337bbb31fb6de773da4d64ab2e90f99d4706f32ade21156a47b8603dfeccb1e4.svg" /> 766 <div>English</div> 767</button> 768 769 </li> 770 <li 771 class="relative w-full" 772 data-testid="sidebar-more-menu" 773 data-controller="sidebar-more-menu" 774 data-action="click@window->sidebar-more-menu#hide keydown@window->sidebar-more-menu#hideOnEscape keydown->sidebar-more-menu#navigate focusout->sidebar-more-menu#hideOnFocusOut resize@window->sidebar-more-menu#close turbo:before-cache@document->sidebar-more-menu#close" 775> 776 <button 777 type="button" 778 data-sidebar-more-menu-target="button" 779 data-action="click->sidebar-more-menu#toggle" 780 781 aria-haspopup="menu" 782 aria-expanded="false" 783 aria-controls="sidebar-more-menu-expanded" 784 aria-label="More" 785 class="min-h-[40px] w-full hover:bg-zinc-700 rounded-[10px] border border-white/10 flex justify-start px-3 items-center gap-2 mx-auto cursor-pointer aria-expanded:bg-[#303030]" 786 > 787 <img class="w-4 h-4" alt="" src="/assets/sidebar-icons/more-6f3c9c2566494b849d8726e7bc3d345a20ded262e1fdb20db1f45835eca060e9.svg" /> 788 <span class="text-start text-grey-medium text-xs font-medium leading-4">More</span> 789 </button> 790 <div 791 id="sidebar-more-menu-expanded" 792 role="menu" 793 popover="manual" 794 data-sidebar-more-menu-target="menu" 795 class="w-[196px] space-y-2 rounded-[10px] border border-[#363636] bg-[#131313] p-2 shadow-[0_4px_16px_rgba(0,0,0,0.4)] text-grey-medium" 796 > 797 <a target="_blank" rel="noopener noreferrer" role="menuitem" data-action="click->sidebar-more-menu#close" class="min-h-[40px] w-full hover:bg-[#303030] rounded-[10px] flex justify-start px-3 items-center gap-2 cursor-pointer text-grey-medium text-xs font-medium leading-4 text-start" href="https://everai.zendesk.com/hc/en-us"> 798 <img class="w-4 h-4" alt="" src="/assets/sidebar-icons/help-center-1abd5651dab8abd889622a19eb9821ab4c19bd275da4ac1b9717820842a98dd8.svg" /> 799 <span>Help Center</span> 800</a> <a target="_blank" rel="noopener noreferrer" role="menuitem" data-action="click->sidebar-more-menu#close" class="min-h-[40px] w-full hover:bg-[#303030] rounded-[10px] flex justify-start px-3 items-center gap-2 cursor-pointer text-grey-medium text-xs font-medium leading-4 text-start" href="https://discord.com/invite/candyai"> 801 <img class="w-4 h-4" alt="" src="/assets/sidebar-icons/discord-526bbe3abf7210fa8bd8e76658d4df5a5c67d569f1349a2441b1d0bbd170c84d.svg" /> 802 <span>Discord</span> 803</a> <button type="button" role="menuitem" data-action="click->main#openRegistrationModal click->sidebar-more-menu#close" class="min-h-[40px] w-full hover:bg-[#303030] rounded-[10px] flex justify-start px-3 items-center gap-2 cursor-pointer text-grey-medium text-xs font-medium leading-4 text-start"> 804 <img class="w-4 h-4" alt="" src="/assets/sidebar-icons/contact-c50065a887c8d0061543beceae78cec1bdaaac55ec7d37f11601912b3250e119.svg" /> 805 <span>Contact Us</span> 806 </button> 807 <a target="_blank" rel="noopener noreferrer" role="menuitem" data-action="click->sidebar-more-menu#close" class="min-h-[40px] w-full hover:bg-[#303030] rounded-[10px] flex justify-start px-3 items-center gap-2 cursor-pointer text-grey-medium text-xs font-medium leading-4 text-start" href="https://webforms.pipedrive.com/f/bYSTErXD8pcDoco3iakbUUKFRtWtAjNDJphn0GpYA3B88R2NYvCzVMM2wsNCjtVMkP"> 808 <img class="w-4 h-4" alt="" src="/assets/sidebar-icons/trophy-55ba15bcf830427b6fc776e11ff4465cce75c1c2a1a27ba0bd2eea0e5c03ff55.svg" />
809 <span>Affiliate</span> 810</a> </div> 811</li> 812 813 <li class="text-[8px] flex text-grey-medium pt-3 w-full"> 814 <a class="leading-none mr-2" href="/legal-information">Legal Terms</a> 815 <ul class="list-none"> 816 <li class="flex items-center mr-2"> 817 <span class="bg-white h-1 w-1 rounded-full mr-2"></span> 818 <a target="_blank" class="leading-none" href="https://helloeverai.zendesk.com/">Trust & Safety</a> 819 </li> 820 </ul> 821 </li> 822 </ul> 823 </nav> 824</div> 825 826 <div 827 data-main-target="mainMobileSidebarContainer" 828 data-action="click->main#setMobileSidebarValueToDefault" 829 data-testid="new-shell-mobile-drawer" 830 class=" 831 inset-y-0 w-[100vw] z-[110] pr-[40vw] no-scroll fixed left-0 832 webkit-transition-sidebar webkit-transform-sidebar 833 " 834> 835 <nav 836 class="flex flex-col justify-between h-full w-60" 837 > 838 <div class="flex flex-col justify-between h-full"> 839 <ul 840 role="list" 841 class="flex flex-col items-center justify-start px-5 pb-5 pt-[calc(1.25rem_+_env(safe-area-inset-top))] gap-2.5 bg-zinc-900 h-screen overflow-auto [&_a]:min-h-6" 842 > 843 <!-- Home Icon --> 844 <li class="relative w-full"> 845 <a class="w-full flex justify-start items-center gap-2.5" href="/"> 846 <img class="w-5 h-5" alt="Home" src="/assets/sidebar-icons/home-18a7d73adabda5674f78dab4a3d6b3acebbdbba31f0ad19053537dabffade496.svg" /> 847 <span class="text-start text-grey-medium text-xs font-semibold">Home</span> 848</a> </li> 849 <li class="w-full h-px bg-white/10 shrink-0" aria-hidden="true"></li> 850 <!-- Discover/Feed Icon --> 851 <li class="relative w-full"> 852 <a class="w-full flex justify-start items-center gap-2.5" href="/feed/posts"> 853 <img class="w-5 h-5" alt="Discover" src="/assets/sidebar-icons/explore-3a4a39d3c6126c743969aa14b3a4841763f5b600e0f77e317a32d7c30afbcc13.svg" /> 854 <span class="text-start text-grey-medium text-xs font-semibold">Discover</span> 855</a> </li> 856 <li class="w-full h-px bg-white/10 shrink-0" aria-hidden="true"></li> 857 <!-- Shorts Icon --> 858 <li class="relative w-full"> 859 <a data-turbo-frame="_top" class="w-full flex justify-start items-center gap-2.5" href="/candy-shorts"> 860 <img class="w-5 h-5" alt="Shorts" src="/assets/sidebar-icons/shorts-86337f4c209f25d6a2e8747130abf65e3777adeb64c691edd55f80c75491f08b.svg" /> 861 <span class="text-start text-grey-medium text-xs font-semibold">Shorts</span> 862</a> </li> 863 <li class="w-full h-px bg-white/10 shrink-0" aria-hidden="true"></li> 864 <li class="relative w-full"> 865 <a data-action="click->main#closeMobileMenuAndOpenRegistrationModal" class="justify-start items-center gap-2.5 flex mx-auto cursor-pointer" href="#"> 866 <img class="w-5 h-5" alt="Chat" src="/assets/sidebar-icons/chat-1f356f466c9023c851a3a185fd1e607229737246758457a3f49b82e17bc5d82b.svg" /> 867 <div class="text-start text-grey-medium text-xs font-semibold"> 868 Chat 869 </div> 870</a> </li> 871 <li class="w-full h-px bg-white/10 shrink-0" aria-hidden="true"></li> 872 <li class="relative w-full"> 873 <a data-action="click->main#openRegistrationModal" class="justify-start items-center gap-2.5 flex mx-auto cursor-pointer" href="#"> 874 <img alt="Collection" class="w-5 h-5" src="/assets/sidebar-icons/gallery-b83c72cb24c980d5e254daba38d4e3690f281b07c3e5665a052e0f76fff031b8.svg" /> 875 <div class="text-start text-grey-medium text-xs font-semibold"> 876 Collection 877 </div> 878</a> </li> 879 <li class="w-full h-px bg-white/10 shrink-0" aria-hidden="true"></li> 880 <li class="relative w-full"> 881 <a data-turbo-frame="_top" class="relative justify-start items-center gap-2.5 flex mx-auto" href="/generate-image?origin=sidebar"> 882 <img class="w-5 h-5" alt="Generate Image" src="/assets/home/generate-33f95391d5d800565b7ea9ba3f6effa0a3d0a2b2eeafdba4ccc526aef7ae3498.svg" /> 883 <div class="text-start text-grey-medium text-xs font-semibold"> 884 Generate Image 885 </div> 886</a> </li> 887 <li class="w-full h-px bg-white/10 shrink-0" aria-hidden="true"></li> 888 <li class="relative w-full"> 889 <a data-turbo-frame="_top" class="relative justify-start items-center gap-2.5 flex mx-auto" href="/characters/new"> 890 <img class="w-5 h-5" alt="Create Character" src="/assets/home/magic-wand-bc43a2a37c108cc6308370c0e6fada5385fd848143063f66116694fd9aa075b7.svg" /> 891 <div class="text-start text-grey-medium text-xs font-semibold"> 892 Create Character 893 </div> 894</a> </li> 895 <li class="w-full h-px bg-white/10 shrink-0" aria-hidden="true"></li> 896 <li class="relative w-full"> 897 <a data-turbo-frame="_top" class="justify-start items-center gap-2.5 flex mx-auto" href="/characters"> 898 <img class="w-5 h-5" alt="My AI" src="/assets/sidebar-icons/love-lady-760605daa886b7e49e77d5d26c1047bc0f815c005a978a5c76810db20bc355dd.svg" /> 899 <div class="text-start text-grey-medium text-xs font-semibold"> 900 My AI 901 </div> 902</a> </li> 903 <li class="w-full h-px bg-white/10 shrink-0" aria-hidden="true"></li> 904 <li class="relative w-full"> 905 <a data-action="click->main#openRegistrationModal" data-turbo-frame="_top" class="justify-start items-center gap-2.5 flex mx-auto cursor-pointer" href="#"> 906 <img class="w-5 h-5" alt="Private Content" src="/assets/heart-lock-c322a04a0a80c5ca1b50658063120fa33d2f209b5e0980e7be8e47cc9667f736.svg" /> 907 <div class="text-start text-grey-medium text-xs font-semibold"> 908 Private Content 909 </div> 910</a> </li> 911 <li class="w-full h-px bg-white/10 shrink-0" aria-hidden="true"></li> 912 913 914<li class="relative w-full"> 915 <a data-turbo-frame="_top" class="w-full justify-start items-center gap-2.5 flex mx-auto" href="/subscriptions"> 916 <img class="w-2.5 h-2.5 absolute left-0 -top-[3px] transform scale-x-[-1]" src="/assets/promotions/icon-513af0057e4b673067a8049311ea31fe24a74b04337db95bf10d618a16abcfb7.svg" /> 917 <img class="w-5 h-5" src="/assets/promotions/diamond-a039f6364c40ef964956407067f00bb72540562bfc3ca551b1ae10db3f29c08c.svg" /> 918 <div class="text-start text-xs font-semibold bg-linear-to-r from-[#F9D98E] to-[#D0B067] bg-clip-text text-transparent"> 919 Premium 920 </div>
921 <span class="ml-auto px-1 font-medium text-[10px] rounded-[10px] bg-[#B91923] text-white"> 922 -70% 923 </span> 924</a></li> 925 926 </ul> 927 <div class="py-2.5 px-5 flex flex-col justify-center items-center gap-2.5 border-t border-[#2F2F32] bg-[#1E1E1E]"> 928 <div class="py-1 px-2.5 w-full rounded-[10px] border border-grey-default justify-start items-center flex md:hidden"> 929 930 931<div class="flex md:hidden w-full gender-interest-switch-dropdown" 932 data-controller="home--gender-dropdown" 933 data-home--gender-dropdown-current-gender-value="female" 934 data-home--gender-dropdown-sidebar-value="true" 935 data-home--gender-dropdown-gender-labels-info-value="{"female":{"url":"/ai-girlfriend","label":"Girls"},"anime":{"url":"/ai-anime","label":"Anime"},"male":{"url":"/ai-boyfriend","label":"Guys"}}" 936> 937 <div class="relative w-full"> 938 <button type="button" 939 class="w-full bg-transparent rounded-[10px] flex items-center justify-center gap-[3px] transition-colors" 940 data-action="click->home--gender-dropdown#toggle" 941 data-home--gender-dropdown-target="button"> 942 <div class="w-6 h-6 flex items-center justify-center" data-home--gender-dropdown-target="currentIconContainer"> 943 <img class="w-full h-full hidden female-grey" src="/assets/icons/gender_switch/female-grey-f8778c0424271c5cb4b1b50b2e50d7e8d5a2c79851c6f905e5d3ef4069956bef.svg" /> 944 <img class="w-full h-full hidden female-white" src="/assets/icons/gender_switch/female-white-b6edc81820cdf305c0e1644c0c5d2124b2aa2ecef701a01eff46baad9a05dd26.svg" /> 945 <img class="w-full h-full hidden male-grey" src="/assets/icons/gender_switch/male-grey-48c8b386c214b3f674b7ef04bc51c9f7e967c49023e308fc58032fa0cc10c2e7.svg" /> 946 <img class="w-full h-full hidden male-white" src="/assets/icons/gender_switch/male-white-b1c60bef78d9065208e08ef4f03bea1d2d50bc8b33c3fb2fe9361a3c83646a92.svg" /> 947 <img class="w-full h-full hidden anime-grey" src="/assets/icons/gender_switch/anime-grey-1f1c9de8c17364c1634470e5d2ab1d4d05109fa8e80c1e1b83ac0478eb2d5dac.svg" /> 948 <img class="w-full h-full hidden anime-white" src="/assets/icons/gender_switch/anime-white-02986b4e7107a1be01a284a4818231a6edf19aa880d8a9680fb1a7874416f532.svg" /> 949 </div> 950 <div class="flex items-center gap-1"> 951 <span class="text-white text-sm font-medium"> 952 Category: 953 </span> 954 <span class="text-white text-sm font-light" data-home--gender-dropdown-target="currentGenderLabel"> 955 Girls 956 </span> 957 </div> 958 <div class="w-3 h-3 flex items-center justify-center transition-transform duration-200 ml-auto" data-home--gender-dropdown-target="chevron"> 959 <img class="w-full h-full" data-home--gender-dropdown-target="chevronIconGrey" src="/assets/icons/gender_switch/vector-down-grey-ac9e18f44b255e3510c3e32a682be2b5f5f736fb7b6c7df2d867107522ebdd5d.svg" /> 960 <img class="hidden w-full h-full" data-home--gender-dropdown-target="chevronIconWhite" src="/assets/icons/gender_switch/vector-down-white-2dab083dc5b94101cb4ba00b20dc10b922ed7f3368883466624738676b93d0c3.svg" /> 961 </div> 962 </button> 963 964 <div class="absolute top-[70%] left-0 mt-2 bg-[#18181b] rounded-[6px] overflow-hidden z-50 shadow-[0px_0px_24px_0px_rgba(0,0,0,0.45)] w-full hidden" 965 data-home--gender-dropdown-target="menu"> 966 <div class="flex flex-col gap-4 px-4 py-[14px]"> 967 <a data-turbo-frame="main-content-frame" data-turbo-action="advance" data-action="click->home--gender-dropdown#select" data-gender-interest="female" class="flex items-center gap-[7px]" href="/ai-girlfriend"> 968 <div class="w-6 h-6 flex items-center justify-center"> 969 <img class="w-full h-full" alt="female icon" src="/assets/icons/gender_switch/female-white-b6edc81820cdf305c0e1644c0c5d2124b2aa2ecef701a01eff46baad9a05dd26.svg" /> 970 </div>
971 <span class="text-white text-base font-medium"> 972 Girls 973 </span> 974</a> <a data-turbo-frame="main-content-frame" data-turbo-action="advance" data-action="click->home--gender-dropdown#select" data-gender-interest="anime" class="flex items-center gap-[7px]" href="/ai-anime"> 975 <div class="w-6 h-6 flex items-center justify-center"> 976 <img class="w-full h-full" alt="anime icon" src="/assets/icons/gender_switch/anime-white-02986b4e7107a1be01a284a4818231a6edf19aa880d8a9680fb1a7874416f532.svg" /> 977 </div> 978 <span class="text-white text-base font-medium"> 979 Anime 980 </span> 981</a> <a data-turbo-frame="main-content-frame" data-turbo-action="advance" data-action="click->home--gender-dropdown#select" data-gender-interest="male" class="flex items-center gap-[7px]" href="/ai-boyfriend"> 982 <div class="w-6 h-6 flex items-center justify-center"> 983 <img class="w-full h-full" alt="male icon" src="/assets/icons/gender_switch/male-white-b1c60bef78d9065208e08ef4f03bea1d2d50bc8b33c3fb2fe9361a3c83646a92.svg" /> 984 </div> 985 <span class="text-white text-base font-medium"> 986 Guys 987 </span> 988</a> </div> 989 </div> 990 </div> 991</div> 992 993 </div> 994 <div class="grid grid-cols-2 gap-2.5 w-full"> 995 <div class="px-2 py-1.5 min-h-8 min-w-0 rounded-lg border border-grey-default justify-center items-center flex"> 996 <a class="min-w-0 truncate text-center text-neutral-200 text-[11px] font-medium" target="_blank" rel="noopener noreferrer" href="https://discord.com/invite/candyai">Discord</a> 997 </div> 998 <a data-action="click->main#closeMobileMenuAndOpenRegistrationModal" class="px-2 py-1.5 min-h-8 min-w-0 rounded-lg border border-grey-default justify-center items-center flex cursor-pointer" href="#"> 999 <span class="min-w-0 truncate text-center text-neutral-200 text-[11px] font-medium"> 1000 Contact Us 1001 </span> 1002</a> </div> 1003 1004 <div class="grid grid-cols-2 gap-2.5 w-full"> 1005 <a target="_blank" class="px-2 py-1.5 min-h-8 min-w-0 rounded-lg border border-grey-default justify-center items-center flex" href="https://webforms.pipedrive.com/f/bYSTErXD8pcDoco3iakbUUKFRtWtAjNDJphn0GpYA3B88R2NYvCzVMM2wsNCjtVMkP"> 1006 <span class="min-w-0 truncate text-center text-neutral-200 text-[11px] font-medium"> 1007 Affiliate 1008 </span> 1009</a> 1010 1011 1012 1013<button data-controller="toggle-modal" 1014 data-action="toggle-modal#openModal" 1015 data-toggle-modal-modal-outlet="#language-select-modal" 1016 class="flex gap-2 items-center border cursor-pointer text-grey-medium text-xs font-medium w-full justify-between px-2.5 py-1 rounded-[5px] border-neutral-400"> 1017 <img class="w-[14px]" alt="en flag icon" src="/assets/sidebar-icons/en-337bbb31fb6de773da4d64ab2e90f99d4706f32ade21156a47b8603dfeccb1e4.svg" /> 1018 <div>EN</div> 1019 <img class="w-3.5" src="/assets/chats/ask-arrow-5e9e3d502459a09cc6f7a6face21c887f7e5ff747265bdf33f1cc5eb16098469.svg" /> 1020</button> 1021 1022 </div> 1023 1024 <div class="justify-start items-center gap-1 inline-flex"> 1025 <a class="text-neutral-300 text-4xs font-medium" href="/legal-information">Legal Terms</a> 1026 <div class="w-1 h-1 bg-zinc-300 rounded-full"></div> 1027 <a target="_blank" class="text-neutral-300 text-4xs font-medium" href="https://helloeverai.zendesk.com/">Trust & Safety</a> 1028 <div class="w-1 h-1 bg-zinc-300 rounded-full"></div> 1029 <a target="_blank" class="text-neutral-300 text-4xs font-medium" href="https://everai.zendesk.com/hc/en-us">Help Center</a> 1030 </div> 1031 </div> 1032 </div> 1033 </nav> 1034</div> 1035 1036<style> 1037 .no-scroll { 1038 overflow: hidden; 1039 /* Optional: to ensure the layout doesn't shift due to the scrollbar disappearing */ 1040 padding-right: calc(env(safe-area-inset-right, 0px) + (100vw - 100%)); 1041 } 1042</style> 1043 1044 <div class="z-40 w-full" id="navbar" data-testid="new-shell-navbar"> 1045 1046 1047 1048 <div 1049 class="new-shell-navbar fixed top-0 z-40 w-full flex md:h-[calc(64px+e
1049nv(safe-area-inset-top))] h-[calc(53px+env(safe-area-inset-top))] pt-[env(safe-area-inset-top)] shrink-0 items-center border-b border-[#363636] sm:px-4 px-2 shadow-2xs sm:gap-x-2 lg:px-8 transform transition-transform duration-300 " 1050 data-mobile-scroll-behavior-target="navbar" 1051 data-mobile-navbar-visibility-target="navbar" 1052 data-pwa-target="navbar" 1053 > 1054 <button 1055 id="nav-hamburger" 1056 type="button" 1057 class="relative py-2 sm:mr-0 md:mr-[10px] mr-0 text-gray-700 nav-hamburger" 1058 > 1059 <span class="sr-only">Open sidebar</span> 1060 1061 <svg 1062 class="w-8 h-8 mr-1 text-white nav-hamburger" 1063 data-action="click->main#handleMenuClick" 1064 fill="none" 1065 viewBox="0 0 24 24" 1066 stroke-width="1.5" 1067 stroke="currentColor" 1068 aria-hidden="true" 1069 > 1070 <path 1071 stroke-linecap="round" 1072 stroke-linejoin="round" 1073 d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" 1074 /> 1075 </svg> 1076 </button> 1077 1078 1079 <a href="/"> 1080 <img alt="CandyAI" class="h-[30px] w-[100px]" src="/assets/logos/logo-navbar-d321c31d58617371f7caf9e34a4e3f9624dce580afcceb6fecdf48c78beafd83.svg" /> 1081</a> 1082 1083 1084 1085 <div class="flex self-stretch flex-1 items-center justify-end pl-5 md:pl-0 gap-x-2 lg:gap-x-4"> 1086 <div class="flex items-center gap-x-2 md:hidden" data-testid="new-shell-guest-actions-mobile"> 1087 <div 1088 data-action="click->main#openSignInModal" 1089 class="h-[34px] px-[13px] border border-white/[.22] text-white rounded-[100px] justify-center items-center inline-flex cursor-pointer" 1090 > 1091 <div class="text-[13px] font-semibold leading-[18px] whitespace-nowrap"> 1092 Login 1093 </div> 1094 </div> 1095 1096 <div 1097 data-redirect-url="https://candy.ai/feed/posts" 1098 data-action="click->main#openRegistrationModal" 1099 data-main-target="registerButton" 1100 class="h-[34px] px-[13px] bg-[#ee5876] rounded-[100px] justify-center items-center inline-flex cursor-pointer" 1101 > 1102 <div class="text-[13px] font-semibold leading-[18px] text-white whitespace-nowrap"> 1103 Join Free 1104 </div> 1105 </div> 1106</div> 1107 1108<div class="hidden md:flex items-center gap-x-2" data-testid="new-shell-guest-actions-desktop"> 1109 <div 1110 data-redirect-url="https://candy.ai/feed/posts" 1111 data-action="click->main#openRegistrationModal" 1112 data-main-target="registerButton" 1113 class="h-[34px] px-[13px] bg-[#ee5876] rounded-[100px] justify-center items-center inline-flex cursor-pointer" 1114 > 1115 <div class="text-[13px] font-semibold leading-[18px] text-white whitespace-nowrap"> 1116 Create Free Account 1117 </div> 1118 </div> 1119 1120 <div 1121 data-action="click->main#openSignInModal" 1122 class="h-[34px] px-[13px] border border-white/[.22] text-white rounded-[100px] justify-center items-center inline-flex cursor-pointer" 1123 > 1124 <div class="text-[13px] font-semibold leading-[18px] whitespace-nowrap"> 1125 Login 1126 </div> 1127 </div> 1128</div> 1129 1130 </div> 1131 </div> 1132</div> 1133 1134 1135 1136<div id="ios-modal" 1137 data-controller="modal-component" 1138 data-modal-component-target="modal" 1139 data-modal-component-delay-value="0" 1140 data-modal-component-click-outside-value="true" 1141 data-modal-component-escape-closes-value="true" 1142 data-modal-component-after-close-value="{"show_again_after_seconds":null,"expires_at":null}" 1143 data-modal-component-track-mixpanel-value="false" 1144 data-modal-component-mixpanel-data-value="" 1145 data-modal-component-initial-state-value="closed" 1146 data-modal-component-persist-on-cache-value="false" 1147 class="hidden"> 1148 <div class="fixed inset-0 z-50 modal-backdrop bg-black/50 backdrop-blur-xs"></div> 1149 <div class="fixed inset-0 z-50 overflow-y-auto flex justify-center items-center"> 1150 <div class="relative flex justify-center items-center" data-modal-component-target="modalWindow"> 1151 <button class="absolute w-6 h-6 z-50 top-2 right-2" data-action="click->modal-component#closeModal"> 1152 <span class="sr-only">Close</span> 1153 <img src="/assets/close-ec898236eb501d13f4d1343d4a90ed1c0afec71efde2ed1e606916d52f2c5331.svg" /> 1154 </button> 1155 <div class=""></div> 1156 <div class="flex flex-col justify-between items-center md:flex-row relative bg-[linear-gradient(163deg,_#1A1A1A_6.61%,_#2A1E21_88.06%)] border border-black-stroke rounded-[10px] p-0 w-full max-w-[450px]"> 1157 <div class="flex flex-col justify-between z-30 flex flex-col justify-center items-center text-center w-full"> 1158 <div class="flex flex-col items-center justify-center w-full text-center bg-[#3B3B3B] rounded-lg"> 1159 <figure class="w-full max-w-[400px]"> 1160 <img alt="App Installation" class="w-full max-w-full h-auto object-contain rounded-t-lg" src="/assets/pwa/modal-images/ios-modal-40b29571e1375efdfc7a26432094dfc32d3c7e58cfdc180e409e71f966e4a91b.webp" /> 1161 </figure> 1162 1163 <div class="w-full mt-3 flex flex-col"> 1164 <h2 class="pt-5 text-white font-bold text-[14px] w-72 self-center"> 1165 Get App to Receive Notifications from: 1166 </h2> 1167 1168 <section class="mx-5 my-3 bg-[#2E2E2E] rounded-lg p-3"> 1169 <ul class="text-white text-[14px] gap-4 py-2 flex flex-col items-start"> 1170 <li class="flex items-center gap-2"> 1171 <img alt="New Features" src="/assets/pwa/modal-images/new-features-8d91d4198e6b9ca53df4c77ffeacf3a41d166f3675dcd33b9a52d71fd65e1f5a.svg" />
1172 <span>New Features</span> 1173 </li> 1174 <li class="flex items-center gap-2"> 1175 <img alt="Sales and Discounts" src="/assets/pwa/modal-images/tag-3b4615afb2263a898e01967bc8206310c216fa40f33f4a7e416f66e38325e5a9.svg" /> 1176 <span>Sales and Discounts</span> 1177 </li> 1178 <li class="flex items-center gap-2"> 1179 <img alt="New Messages" src="/assets/pwa/modal-images/bubble-wide-notification-7b701200e5b8473f565530a160416620ff0a7ae20ba0db8f17da785808db5e13.svg" /> 1180 <span>New Messages</span> 1181 </li> 1182 </ul> 1183 </section> 1184 1185 <section class="text-white text-[14px] flex flex-col justify-center gap-2 my-3 py-2 px-5"> 1186 <ul class="flex flex-col gap-2"> 1187 <li class="flex items-center gap-2"> 1188 <span>1. Tap âShareâ</span> 1189 <img alt="Share" src="/assets/pwa/modal-images/share-51f21c50ebd8708b137170cfa439749d647335c9d19877b6741808fb566835f8.svg" /> 1190 <span 1191 data-pwa-target="modalInstructions" 1192 data-safari-instruction="below" 1193 data-chrome-instruction="Top right" 1194 ></span> 1195 </li> 1196 <li class="flex items-center gap-2"> 1197 <span> 1198 2. Tap âAdd to Home Screenâ 1199 </span> 1200 <img alt="Add to Home Screen" src="/assets/pwa/modal-images/add-to-home-d9bf063fa60ea41fa35551f89de965f8afaad1139f6024f5bacc4d9bbae90ea2.svg" /> 1201 </li> 1202 </ul> 1203 </section> 1204 </div> 1205 </div> 1206 1207 </div> 1208 </div> 1209 </div> 1210 </div> 1211</div> 1212 1213 1214 1215<div id="android-chrome-modal" 1216 data-controller="modal-component" 1217 data-modal-component-target="modal" 1218 data-modal-component-delay-value="0" 1219 data-modal-component-click-outside-value="true" 1220 data-modal-component-escape-closes-value="true" 1221 data-modal-component-after-close-value="{"show_again_after_seconds":null,"expires_at":null}" 1222 data-modal-component-track-mixpanel-value="false" 1223 data-modal-component-mixpanel-data-value="" 1224 data-modal-component-initial-state-value="closed" 1225 data-modal-component-persist-on-cache-value="false" 1226 class="hidden"> 1227 <div class="fixed inset-0 z-50 modal-backdrop bg-black/50 backdrop-blur-xs"></div> 1228 <div class="fixed inset-0 z-50 overflow-y-auto flex justify-center items-center"> 1229 <div class="relative flex justify-center items-center" data-modal-component-target="modalWindow"> 1230 <button class="absolute w-6 h-6 z-50 top-2 right-2" data-action="click->modal-component#closeModal"> 1231 <span class="sr-only">Close</span> 1232 <img src="/assets/close-ec898236eb501d13f4d1343d4a90ed1c0afec71efde2ed1e606916d52f2c5331.svg" /> 1233 </button> 1234 <div class=""></div> 1235 <div class="flex flex-col justify-between items-center md:flex-row relative bg-[linear-gradient(163deg,_#1A1A1A_6.61%,_#2A1E21_88.06%)] border border-black-stroke rounded-[10px] p-0 w-full max-w-[450px]"> 1236 <div class="flex flex-col justify-between z-30 flex flex-col justify-center items-center text-center w-full"> 1237 <div class="flex flex-col items-center justify-center w-full text-center bg-[#3B3B3B] rounded-lg"> 1238 <figure class="w-full max-w-[400px] relative"> 1239 <img alt="App Installation" class="w-full max-w-full h-auto object-contain rounded-t-lg" src="/assets/pwa/modal-images/android-modal-f106e68bf14b25603c1ea69d915975f22df7ff4b5fa23020155aebafbb19bce5.webp" /> 1240 </figure> 1241 1242 <div class="w-full mt-3 flex flex-col"> 1243 <div class="pt-5 pb-3 text-white font-bold text-[14px] w-72 self-center"> 1244 Get App to Receive Notifications from: 1245 </div> 1246 1247 <section class="mx-5 my-3 bg-[#2E2E2E] rounded-lg p-3"> 1248 <ul class="text-white text-[14px] gap-4 py-2 flex flex-col items-start"> 1249 <li class="flex items-center gap-2"> 1250 <img alt="New Messages" src="/assets/pwa/modal-images/bubble-wide-notification-7b701200e5b8473f565530a160416620ff0a7ae20ba0db8f17da785808db5e13.svg" /> 1251 <span>New Messages</span> 1252 </li> 1253 <li class="flex items-center gap-2"> 1254 <img alt="New Features" src="/assets/pwa/modal-images/new-features-8d91d4198e6b9ca53df4c77ffeacf3a41d166f3675dcd33b9a52d71fd65e1f5a.svg" />
1255 <span>New Features</span> 1256 </li> 1257 <li class="flex items-center gap-2"> 1258 <img alt="Sales and Discounts" src="/assets/pwa/modal-images/tag-3b4615afb2263a898e01967bc8206310c216fa40f33f4a7e416f66e38325e5a9.svg" /> 1259 <span>Sales and Discounts</span> 1260 </li> 1261 </ul> 1262 </section> 1263 1264 <section class="text-white text-[14px] flex flex-col justify-center gap-2 my-5 py-2 px-5"> 1265 <ul class="flex flex-col gap-2"> 1266 <li class="flex items-center gap-2"> 1267 <span> 1268 1. Tap 1269 </span> 1270 <img alt="Menu" src="/assets/pwa/modal-images/dots-2a69a24f9e943ecc76c29829e83f34ea204254c54945cf142d3ddb9555aec149.svg" /> 1271 <span> 1272 in your browser 1273 </span> 1274 </li> 1275 <li class="flex items-center gap-2"> 1276 <span> 1277 2. Tap âAdd to Home Screenâ 1278 </span> 1279 <img alt="Add to Home Screen" src="/assets/pwa/modal-images/add-to-home-android-a92441e4d8c5071e7327003c070dc41072370f91a4875b08f1f2d28b0daee6c2.svg" /> 1280 </li> 1281 </ul> 1282 </section> 1283 </div> 1284 </div> 1285 1286 </div> 1287 </div> 1288 </div> 1289 </div> 1290</div> 1291 1292 1293 <div id="auth-register-modal"></div> 1294 <div id="auth-sign-in-modal"></div> 1295 <div 1296 data-controller="google-one-tap" 1297 data-google-one-tap-client-id-value="32125887183-stf7cldb13ntpb3btishc4b8cfsg3n6t.apps.googleusercontent.com" 1298 data-google-one-tap-url-value="/users/auth/google_one_tap" 1299 data-google-one-tap-store-url-in-cookie-url-value="/store_url_in_cookie" 1300 ></div> 1301 1302 1303 1304 1305 <div class="main-content-container" data-main-target="contentContainer"> 1306 1307 1308 <style> 1309 /* Desktop feed container - scroll-based navigation */ 1310 .feed-desktop-container { 1311 scroll-behavior: smooth; 1312 scroll-snap-type: y mandatory; 1313 overflow-y: scroll; 1314 height: 100vh; 1315 padding-top: 20px; 1316 padding-bottom: 20px; 1317 } 1318 1319 /* Hide scrollbar but keep functionality */ 1320 .feed-desktop-container::-webkit-scrollbar {
1321 display: none; 1322 } 1323 .feed-desktop-container { 1324 -ms-overflow-style: none; 1325 scrollbar-width: none; 1326 } 1327 1328 /* Desktop video card with snap behavior */ 1329 .feed-desktop-video { 1330 scroll-snap-align: start; 1331 scroll-snap-stop: always; 1332 border-radius: 20px; 1333 overflow: hidden; 1334 position: relative; 1335 margin-left: auto; 1336 margin-right: auto; 1337 } 1338 1339 /* Portrait orientation (height > width): 4:5 aspect ratio (1078x1348) */ 1340 @media (orientation: portrait) { 1341 .feed-desktop-video { 1342 width: min(calc((100vh - 45px) * 0.8), calc(100vw - 220px - 72px - 48px)); 1343 height: calc(100vh - 45px); /* Takes almost full viewport for single-slide view */ 1344 min-height: 600px; 1345 } 1346 } 1347 1348 /* Landscape orientation (width > height): 4:5 aspect ratio with viewport constraints */ 1349 @media (orientation: landscape) { 1350 .feed-desktop-video { 1351 width: min(calc((100vh - 45px) * 0.8), 520px, calc(100vw - 220px - 72px - 48px)); 1352 height: calc(100vh - 45px); /* Takes almost full viewport for single-slide view */ 1353 min-height: 600px; /* Ensure reasonable size on short screens */ 1354 } 1355 } 1356 1357 /* Very large screens (width > 2K): maintain 4:5 aspect ratio with larger max */ 1358 @media (min-width: 2000px) { 1359 .feed-desktop-video { 1360 width: min(calc((100vh - 45px) * 0.8), 1078px, calc(100vw - 220px - 72px - 48px)); 1361 height: calc(100vh - 45px); 1362 min-height: 600px; 1363 } 1364 } 1365 1366 /* Gap between videos - minimal spacing */ 1367 .feed-desktop-video:not(:last-child) { 1368 margin-bottom: 10px; 1369 } 1370 1371 /* Video and image styling - scope strictly to media elements */ 1372 .feed-desktop-video .feed-desktop-media { 1373 width: 100%; 1374 height: 100%; 1375 object-fit: cover; 1376 } 1377 1378 /* Gradient overlay for video info */ 1379 .feed-desktop-overlay { 1380 position: absolute; 1381 bottom: 0; 1382 left: 0; 1383 right: 0; 1384 height: 279px; 1385 background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.4)); 1386 padding: 84px 18px 20px; 1387 display: flex; 1388 flex-direction: column; 1389 justify-content: flex-end; 1390 } 1391 1392 /* Loading skeleton for desktop */ 1393 .feed-desktop-skeleton { 1394 border-radius: 20px; 1395 margin: 0 auto 10px; /* match video bottom margin */ 1396 padding-top: 75px; /* align with media top offset while preserving total height */ 1397 position: relative; 1398 overflow: hidden; 1399 } 1400 1401 /* Portrait orientation skeleton - match video dimensions with 4:5 aspect ratio */ 1402 @media (orientation: portrait) { 1403 .feed-desktop-skeleton { 1404 width: min(calc((100vh - 45px) * 0.8), calc(100vw - 220px - 72px - 48px)); 1405 height: calc(100vh - 120px); 1406 min-height: 525px; 1407 } 1408 } 1409 1410 /* Landscape orientation skeleton - match video dimensions with 4:5 aspect ratio */ 1411 @media (orientation: landscape) { 1412 .feed-desktop-skeleton { 1413 width: min(calc((100vh - 45px) * 0.8), 520px, calc(100vw - 220px - 72px - 48px)); 1414 height: calc(100vh - 120px); 1415 min-height: 525px; 1416 } 1417 } 1418 1419 /* Very large screens skeleton - match video dimensions with 4:5 aspect ratio */ 1420 @media (min-width: 2000px) { 1421 .feed-desktop-skeleton { 1422 width: min(calc((100vh - 45px) * 0.8), 1078px, calc(100vw - 220px - 72px - 48px)); 1423 height: calc(100vh - 120px); 1424 min-height: 525px; 1425 } 1426 } 1427 1428 /* Desktop row layout: content + sidebar */ 1429 .feed-desktop-row { 1430 display: flex; 1431 align-items: flex-start; 1432 justify-content: center; 1433 gap: 24px; 1434 } 1435 1436 .feed-desktop-content-column { 1437 /* Width set via media queries to match video dimensions */ 1438 } 1439 1440 /* Portrait orientation content column - match video width with 4:5 aspect ratio */ 1441 @media (orientation: portrait) { 1442 .feed-desktop-content-column { 1443 width: min(calc((100vh - 45px) * 0.8), calc(100vw - 220px - 72px - 48px)); 1444 } 1445 } 1446 1447 /* Landscape orientation content column - match video width with 4:5 aspect ratio */ 1448 @media (orientation: landscape) { 1449 .feed-desktop-content-column { 1450 width: min(calc((100vh - 45px) * 0.8), 520px, calc(100vw - 220px - 72px - 48px)); 1451 } 1452 } 1453 1454 /* Very large screens content column - match video width with 4:5 aspect ratio */ 1455 @media (min-width: 2000px) { 1456 .feed-desktop-content-column { 1457 width: min(calc((100vh - 45px) * 0.8), 1078px, calc(100vw - 220px - 72px - 48px)); 1458 } 1459 } 1460 1461 /* Remove auto-centering margins when inside the content column */ 1462 .feed-desktop-content-column .feed-desktop-video { 1463 margin-left: 0; 1464 margin-right: 0; 1465 } 1466 1467 /* Ensure skeleton aligns exactly like videos inside content column */ 1468 .feed-desktop-content-column .feed-desktop-skeleton { 1469 margin-left: 0; 1470 margin-right: 0; 1471 } 1472 1473 /* Right-hand sidebar with like counter (sticks within scroll container) */ 1474 .feed-desktop-actions-sidebar { 1475 width: 72px; 1476 position: sticky; 1477 top: 20px; /* align with container padding */ 1478 display: flex; 1479 flex-direction: column; 1480 align-items: center; 1481 justify-content: flex-end; /* push like button to the bottom */ 1482 padding-bottom: 56px; /* lift button a bit more to align with visible content */ 1483 overflow: visible; /* prevent Safari from clipping text/shadows */ 1484 } 1485 1486 /* Ensure button and text don't get clipped */ 1487 .feed-desktop-actions-sidebar button { 1488 overflow: visible; 1489 } 1490 1491 /* Portrait orientation actions sidebar */ 1492 @media (orientation: portrait) { 1493 .feed-desktop-actions-sidebar { 1494 height: calc(100vh - 45px); 1495 min-height: 600px; 1496 } 1497 } 1498 1499 /* Landscape orientation actions sidebar */ 1500 @media (orientation: landscape) { 1501 .feed-desktop-actions-sidebar { 1502 height: calc(100vh - 45px); 1503 min-height: 600px; 1504 } 1505 } 1506 1507 /* Spacer to reserve sidebar width during loading skeleton */ 1508 .feed-desktop-actions-spacer { 1509 width: 72px; 1510 } 1511 1512 /* Fade bottom gradient to indicate more content */ 1513 .feed-desktop-container::after { 1514 content: ''; 1515 position: fixed; 1516 bottom: 0; 1517 left: 0; 1518 right: 0; 1519 height: 73px; 1520 background: linear-gradient(to top, #131313, transparent); 1521 pointer-events: none; 1522 z-index: 10; 1523 } 1524 1525 /* Like button splash animation */ 1526 .feed-like-splash { 1527 animation: likeSplash 400ms cubic-bezier(0.34, 1.56, 0.64, 1); 1528 } 1529 1530 @keyframes likeSplash { 1531 0% { 1532 transform: scale(1); 1533 } 1534 50% { 1535 transform: scale(1.3); 1536 } 1537 100% { 1538 transform: scale(1); 1539 } 1540 } 1541 1542 /* Compact play overlay (YouTube/Instagram style) */ 1543 .feed-play-overlay { 1544 position: absolute; 1545 inset: 0; 1546 display: flex; 1547 align-items: center; 1548 justify-content: center; 1549 pointer-events: none; 1550 z-index: 5; 1551 } 1552 .feed-play-button { 1553 width: 64px; /* 64px circle */ 1554 height: 64px; 1555 border-radius: 9999px; 1556 background: rgba(0, 0, 0, 0.45); 1557 backdrop-filter: blur(6px); 1558 display: flex; 1559 align-items: center; 1560 justify-content: center; 1561 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); 1562 border: 1px solid rgba(255, 255, 255, 0.12); 1563 transform: scale(0.92); 1564 opacity: 0; 1565 transition: opacity 150ms ease-out, transform 150ms ease-out; 1566 } 1567 .feed-play-overlay-visible .feed-play-button { 1568 opacity: 1; 1569 transform: scale(1); 1570 } 1571 1572 /* Ensure media itself has rounded corners (not only the container) */ 1573 .feed-desktop-media { 1574 border-radius: 20px; 1575 } 1576 1577 /* Apply top offset only to the currently visible slide */ 1578 .feed-desktop-video.is-visible .feed-desktop-media { 1579 margin-top: 75px; 1580 } 1581</style> 1582 1583 1584<main class="ml-0 lg:ml-[220px] bg-[#131313] min-h-screen"> 1585 <div 1586 class="feed-desktop-container" 1587 data-controller="feed--desktop" 1588 data-feed--desktop-url-value="/feed/posts.json" 1589 data-feed--desktop-user-type-value="Guest"
1590 data-feed--desktop-like-icon-url-value="/assets/feed/like-6bfb7f5a54d0259524bf6b37730926d02f493c54d1a3aa1db5fdd3a281f15d37.svg" 1591 data-feed--desktop-unlike-icon-url-value="/assets/feed/unlike-23c7cc4b1dad1fd528bbec4a379fe65416562a43ba49662a4cfe711eae35ff8c.svg" 1592 data-feed--desktop-refresh-icon-url-value="/assets/feed/refresh-icon-cae438bcbf3056679da53834772425e36084e34cfc0329859e34e05173f83e53.svg" 1593 data-feed--desktop-view-post-url-template-value="/feed/posts/:id/view" 1594 data-js-translations="{"feed":{"chat_now":"Chat Now"}}" data-js-locale="en" 1595 > 1596 <!-- Loading skeleton --> 1597 <div data-feed--desktop-target="loading" aria-live="polite"> 1598 <div class="feed-desktop-row"> 1599 <div class="feed-desktop-content-column"> 1600 <div class="feed-desktop-skeleton"> 1601 <div class="w-full h-full bg-gradient-to-b from-zinc-900 via-zinc-800 to-zinc-900 animate-pulse rounded-[20px] relative"> 1602 <!-- Character info skeleton at bottom --> 1603 <div class="absolute bottom-0 left-0 right-0 p-[18px] pb-[20px] z-10"> 1604 <div class="flex gap-[40px] items-end justify-between"> 1605 <!-- Left side: Character info --> 1606 <div class="flex-1 space-y-3"> 1607 <!-- Avatar and name --> 1608 <div class="flex gap-2 items-center"> 1609 <div class="w-8 h-8 bg-zinc-700 rounded-full animate-pulse"></div> 1610 <div class="h-6 w-32 bg-zinc-700 rounded-lg animate-pulse"></div> 1611 <div class="h-8 w-20 bg-zinc-700 rounded-lg animate-pulse"></div> 1612 </div> 1613 <!-- Description --> 1614 <div class="space-y-2"> 1615 <div class="h-4 w-64 bg-zinc-700 rounded animate-pulse"></div> 1616 <div class="h-4 w-48 bg-zinc-700 rounded animate-pulse"></div> 1617 </div> 1618 </div> 1619 <!-- Right side: View counter --> 1620 <div class="flex flex-col items-center gap-2"> 1621 <div class="w-7 h-6 bg-zinc-700 rounded animate-pulse"></div> 1622 <div class="h-4 w-12 bg-zinc-700 rounded animate-pulse"></div> 1623 </div> 1624 </div> 1625 </div> 1626 </div> 1627 </div> 1628 <!-- Loading text centered --> 1629 <div class="text-center mt-8 mb-8"> 1630 <p class="text-zinc-400 text-sm font-medium">Loading Feed...</p> 1631 </div> 1632 </div> 1633 <div class="feed-desktop-actions-spacer" aria-hidden="true"></div> 1634 </div> 1635 </div> 1636 1637 <!-- Row: videos + actions sidebar --> 1638 <div class="feed-desktop-row"> 1639 <!-- Video container - videos will be dynamically added here --> 1640 <div class="feed-desktop-content-column" data-feed--desktop-target="content"></div> 1641 1642 <!-- Actions sidebar (Like counter) --> 1643 <aside 1644 class="feed-desktop-actions-sidebar" 1645 data-feed--desktop-target="likeHud" 1646 aria-live="polite" 1647 > 1648 <button 1649 type="button" 1650 class="flex flex-col items-center gap-[7px] cursor-pointer select-none" 1651 data-feed--desktop-target="likeHudButton" 1652 data-action="click->feed--desktop#handleLikeFromHud" 1653 aria-label="Like" 1654 > 1655 <div class="relative w-[28px] h-[24px]"> 1656 <img alt="Like" class="w-full h-full" data-feed--desktop-target="likeHudIcon" src="/assets/feed/like-6bfb7f5a54d0259524bf6b37730926d02f493c54d1a3aa1db5fdd3a281f15d37.svg" /> 1657 </div> 1658 <p 1659 class="text-white text-sm leading-5 font-medium font-poppins" 1660 style="text-shadow: rgba(0,0,0,0.35) 0px 0px 5px" 1661 data-feed--desktop-target="likeHudCount" 1662 >0</p> 1663 </button> 1664 </aside> 1665 </div> 1666 1667 <!-- Shared play overlay for paused videos --> 1668 <div 1669 data-feed--desktop-target="playIcon" 1670 style="display: none;" 1671 class="feed-play-overlay" 1672 aria-hidden="true" 1673 > 1674 <div class="feed-play-button"> 1675 <svg xmlns="http://www.w3.org/2000/svg" width="22" height="26" viewBox="0 0 24 26" fill="none"> 1676 <path d="M22.4207 11.5367C23.5856 12.2076 23.5856 13.8995 22.4207 14.5704L2.90388 25.1779C1.74742 25.8433 0.356445 25.0079 0.356445 23.6788L0.356445 2.4283C0.356445 1.09926 1.74742 0.263831 2.90388 0.929215L22.4207 11.5367Z" fill="white"/> 1677 </svg> 1678 </div> 1679 </div> 1680 </div> 1681</main> 1682 1683 1684 <div id="mpc-pack-purchased-notifiers" class="contents"></div> 1685 1686 1687 1688 1689 1690 </div> 1691 1692 1693
1693<script> 1694 var isCookieScriptInitialized = false; 1695 1696 1697 function initializeCookieScript() { 1698 if (!isCookieScriptInitialized) { 1699 isCookieScriptInitialized = true; 1700 CookieScript.init(); 1701 } 1702 } 1703 1704 function checkAndDisplayCookieBanner() { 1705 setTimeout(function () { 1706 if (typeof CookieScript.instance !== "undefined" && CookieScript.instance !== null) { 1707 if (typeof CookieScript.instance.currentState === "function" && CookieScript.instance.currentState().action === void 0) { 1708 CookieScript.instance = null; 1709 initializeCookieScript(); 1710 } 1711 } else { 1712 initializeCookieScript(); 1713 } 1714 }, 500); 1715 } 1716 1717 document.addEventListener("turbo:load", function () { 1718 if (typeof CookieScript === 'undefined') { 1719 return; 1720 } 1721 1722 initializeCookieScript(); 1723 checkAndDisplayCookieBanner(); 1724 }); 1725</script>
1725 1726 1727<div 1728 data-controller="consent-fb-cookies" 1729 data-consent-fb-cookies-fbc-name-value="_lp_fbc" 1730 data-consent-fb-cookies-fbp-name-value="_lp_fbp" 1731 data-consent-fb-cookies-fbc-max-age-value="7776000" 1732 data-consent-fb-cookies-fbp-max-age-value="63072000" 1733 data-consent-fb-cookies-domain-mode-value="all" 1734></div> 1735 1736 1737 1738 1739 1740
1740<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"a4d5023a012f41e0b0324067f7ed0b96","spa":2}' crossorigin="anonymous"></script>
1740 1741</body> 1742</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.