PageSourceSearch

https://candy.ai/feed/posts

html candy.ai collected 2026-09-26 02:59:29 UTC 81,934 bytes, 1,742 lines download raw bytes

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&amp;state=ca-co-va&amp;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&amp;origin_controller=posts&amp;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-&gt;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-&gt;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-&gt;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-&gt;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-&gt;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-&gt;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-&gt;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-&gt;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-&gt;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-&gt;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-&gt;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-&gt;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-&gt;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-&gt;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 &amp; 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-&gt;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-&gt;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-&gt;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="{&quot;female&quot;:{&quot;url&quot;:&quot;/ai-girlfriend&quot;,&quot;label&quot;:&quot;Girls&quot;},&quot;anime&quot;:{&quot;url&quot;:&quot;/ai-anime&quot;,&quot;label&quot;:&quot;Anime&quot;},&quot;male&quot;:{&quot;url&quot;:&quot;/ai-boyfriend&quot;,&quot;label&quot;:&quot;Guys&quot;}}"
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-&gt;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-&gt;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-&gt;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-&gt;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 &amp; 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="{&quot;show_again_after_seconds&quot;:null,&quot;expires_at&quot;: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="{&quot;show_again_after_seconds&quot;:null,&quot;expires_at&quot;: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="{&quot;feed&quot;:{&quot;chat_now&quot;:&quot;Chat Now&quot;}}" 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.