santa-template/index.html at main · Tavus-Engineering/santa-template · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link href="favicon-light.png" rel="icon" media="(prefers-color-scheme: light)" />
    <link href="favicon-dark.png" rel="icon" media="(prefers-color-scheme: dark)" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="Permissions-Policy" content="keyboard-map=*" />
    <title>AI Bad Santa by Tavus: Talk to Bad Santa</title>
    <meta name="description" content="Live video chat with Bad Santa anytime, anywhere! Talk to Bad Santa in real-time across 30+ languages, check if you're on the Naughty or Nice list, and even have fun testing Bad Santa's patience—all for free! Perfect for spreading holiday cheer.">
    <meta property="og:type" content="website">
    <meta property="og:title" content="Talk to Bad Santa | AI Bad Santa by Tavus">
    <meta property="og:description" content="Live video chat with Bad Santa anytime, anywhere! Talk to Bad Santa in real-time across 30+ languages, check if you're on the Naughty or Nice list, and even have fun testing Bad Santa's patience—all for free! Perfect for spreading holiday cheer.">
    <meta property="og:image" content="https://cdn.prod.website-files.com/68c8e57d6e512b9573db146f/6924e91b7a820811679681fd_metaog.png">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta name="twitter:title" content="Talk to Bad Santa | AI Bad Santa by Tavus">
    <meta name="twitter:description" content="Live video chat with Bad Santa anytime, anywhere! Talk to Bad Santa in real-time across 30+ languages, check if you're on the Naughty or Nice list, and even have fun testing Bad Santa's patience—all for free! Perfect for spreading holiday cheer.">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:image" content="https://cdn.prod.website-files.com/68c8e57d6e512b9573db146f/6924e91b7a820811679681fd_metaog.png">
    <meta name="twitter:site" content="@tavus">
    <meta name="twitter:creator" content="@tavus">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
    <!-- Preload critical assets for faster initial load -->
    <link rel="preload" href="/wonderland.mp4" as="video" type="video/mp4" />
    <link rel="preload" href="/mobileback.mp4" as="video" type="video/mp4" />
    <link rel="preload" href="/elf.png" as="image" />
    <link rel="preload" href="/santa2.png" as="image" />
    <link rel="preload" href="/game-background-long.png" as="image" />

    <!-- Swiper CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

    <!-- Plyr CSS -->
    <link rel="stylesheet" href="https://cdn.plyr.io/3.7.2/plyr.css" />
    <style>
      html {
        --plyr-color-main: white;
        --plyr-tab-focus-color: transparent;
        --plyr-video-control-color-hover: black;
        --plyr-control-icon-size: 1.5em;
        --plyr-range-thumb-height: 0px;
        --plyr-range-track-height: 0.6em;
      }
      .plyr__control--overlaid {
        color: black;
      }
      .plyr__volume {
        width: auto;
        min-width: auto;
        max-width: auto;
      }
      .plyr {
        width: 100%;
        height: 100%;
      }
      .plyr video {
        object-fit: cover;
      }
      .contain-video video {
        object-fit: contain;
      }
      .hide-cover .plyr_cover {
        opacity: 0;
        pointer-events: none;
      }
      .hide-cover .plyr_cover-img {
        transform: scale(1.4);
      }
      .banner {
        display: none;
      }
      .grecaptcha-badge{
        z-index: 99;
      }
      section{
        content-visibility: unset !important;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>