<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="http://www.tikitaki.ru/static/output.css" rel="stylesheet">
    <title>MyoMouse</title>
    <link rel="icon" type="image/x-icon" href="http://www.tikitaki.ru/static/logo.png">

</head>
<body class="bg-black" style="box-sizing: border-box">
<div class="content " style="box-sizing: border-box; overflow-y: hidden">
    <div class="h-16 items-center flex flex-row mt-2 relative">
        <img src="http://www.tikitaki.ru/static/logo.png" class="z-0 logo ml-0 lg:ml-16 xl:ml-64 w-8 h-8 mt-5" style="width: 4rem; height: 5rem"/>
        <div class="absolute right-0 ml-0 z-1 gradient-bg-pink"></div>
        <nav class="hidden sm:inline-flex flex-row  items-center justify-end absolute right-0 z-10" style="justify-self: flex-end">
            <a class="xl:text-base text-white mr-10 hover:underline" href="#how-it-works">How it works?</a>
            <a class="xl:text-base text-white mr-10 hover:underline" href="#how_it_possible">Why is all this possible</a>
            <a class="xl:text-base text-white mr-10 hover:underline" href="#application-area">Application area</a>
            <a class="xl:text-base text-white mr-10  hover:underline" href="#integrations">Integrations</a>
            <a class="xl:text-base text-white mr-10  hover:underline" href="#our-team">Our team</a>
            <div class="mr-10 hover:underline"  style="width: 24px; height: 0px; border: 1px solid #FFFFFF;transform: rotate(90deg); background-color: white"></div>
            <button class="text-white flex flex-row mr-40 items-center hover:animate-pulse">
                <img class="mr-2.5" src="http://www.tikitaki.ru/static/Vector%20(6).svg"/>
                <a href="/ru" class="xl:text-base text-white hover:underline">En</a>
            </button>
        </nav>
    </div>
    <section id="home" class="z-0  items-center h-fit lg:h-screen">
        <div class=" flex flex-col sm:flex-row mt-0 sm:mt-5 items-center mr-0 xl:ml-64 xl:mr-64 ">
            <div class=" lg:w-1/2 flex flex-col z-10 lg:items-baseline items-center justify-center lg:ml-20">
                <h1 class="text-left text-5xl xl:text-8xl text-white font-bold z-10">MyoMouse</h1>
                <p class="text-center sm:text-left w-full text-base 2xl:text-base text-white mt-7 p-0">MyoMouse is a device that allows you to control the real, digital and virtual worlds with equal ease. It all depends on your desires, the signals of the muscles of your fingers. MyoMouse - limitless opportunities for your business in the metaverses that connect the real and digital worlds.
We created it because we are interested in the future -
because we live in it.</p>
                <div class="flex flex-row w-full" style="justify-content: space-around;">
                    <a href="#form_section" class=" flex w-32 h-7 xl:w-32 xl:h-11 mt-10 button-gradient hover:bg-transparent items-center justify-center" >
                        <span  class="text-sm xl:text-base animate-pulse hover:text-white text-custom-blue ">
                            Order
                        </span>
                    </a>
                    <a href="#form_section" class="flex w-1/2 h-7  xl:h-11 mt-10 button-gradient hover:bg-transparent items-center justify-center" >
                        <span  class="text-sm xl:text-base animate-pulse hover:text-white text-custom-blue ">
                            Order integration
                        </span>
                    </a>
                </div>
            </div>
            <div class="flex flex-col items-center">
                <div class="flex flex-row">
                    <div class="mt-0  mr-25" id="canvas_wrapper">
                        <div id="loading_status_wrapper" class="flex flex-col items-center justify-center">
                            <p class="text-white">Creating your MyoMouse</p>
                            <progress id="loading_status" max="100" value="0" style="border-radius: 10px; width: 80%; "></progress>
                        </div>
                    </div>
                    <div class="hidden lg:flex flex-col z-10" style="align-self: center">
                        <h3 class="text-white">Change color</h3>
                        <p class="text-white mt-7">Lines</p>
                        <div class="flex flex-row justify-between content-between z-10 mt-2 bottom-0 lg:bottom-1/3">
                            <button id="white-line-button-mobile" class="bg-white mr-2" style="border-radius: 10px; width: 20px; height: 20px"></button>
                            <button id="grey-line-button-mobile" class="mr-2" style=" background-color: #9e9e9e; border-radius: 10px; width: 20px; height: 20px"></button>
                            <button id="black-line-button-mobile" class="bg-white mr-2" style="background-color: #212121; border-radius: 10px; width: 20px; height: 20px"></button>
                            <button id="blue-line-button-mobile" class="bg-white mr-2" style="background-color: #3f51b5; border-radius: 10px; width: 20px; height: 20px"></button>
                            <button id="green-line-button-mobile" class="bg-white mr-2" style="background-color: #4caf50; border-radius: 10px; width: 20px; height: 20px"></button>
                            <button id="red-line-button-mobile" class="bg-white mr-2" style="background-color: #f44336; border-radius: 10px; width: 20px; height: 20px"></button>
                            <button id="orange-line-button-mobile" class="bg-white mr-2" style="background-color: #ff5722; border-radius: 10px; width: 20px; height: 20px"></button>
                            <button id="yellow-line-button-mobile" class="bg-white mr-2" style="background-color: #fbc02d; border-radius: 10px; width: 20px; height: 20px"></button>
                        </div>
                        <p class="text-white mt-7">Band</p>
                        <div class="flex flex-row justify-between content-between z-10 bottom-0 lg:bottom-1/3 mt-2">
                            <button id="white-band-button-mobile" class="bg-white mr-2" style="border-radius: 10px; width: 20px; height: 20px"></button>
                            <button id="grey-band-button-mobile" class="mr-2" style=" background-color: #9e9e9e; border-radius: 10px; width: 20px; height: 20px"></button>
                            <button id="black-band-button-mobile" class="bg-white mr-2" style="background-color: #212121; border-radius: 10px; width: 20px; height: 20px"></button>
                            <button id="blue-band-button-mobile" class="bg-white mr-2" style="background-color: #3f51b5; border-radius: 10px; width: 20px; height: 20px"></button>
                            <button id="green-band-button-mobile" class="bg-white mr-2" style="background-color: #4caf50; border-radius: 10px; width: 20px; height: 20px"></button>
                            <button id="red-band-button-mobile" class="bg-white mr-2" style="background-color: #f44336; border-radius: 10px; width: 20px; height: 20px"></button>
                            <button id="orange-band-button-mobile" class="bg-white mr-2" style="background-color: #ff5722; border-radius: 10px; width: 20px; height: 20px"></button>
                            <button id="yellow-band-button-mobile" class="bg-white mr-2" style="background-color: #fbc02d; border-radius: 10px; width: 20px; height: 20px"></button>
                        </div>
                    </div>
                </div>
                <div class="lg:hidden flex flex-col" style="align-self: center">
                    <h3 class="text-white">Change color</h3>
                    <p class="text-white">Lines</p>
                    <div class="flex flex-row justify-between content-between z-10 bottom-0 lg:bottom-1/3 ">
                        <button id="white-line-button" class="bg-white mr-2" style="border-radius: 10px; width: 20px; height: 20px"></button>
                        <button id="grey-line-button" class="mr-2" style=" background-color: #9e9e9e; border-radius: 10px; width: 20px; height: 20px"></button>
                        <button id="black-line-button" class="bg-white mr-2" style="background-color: #212121; border-radius: 10px; width: 20px; height: 20px"></button>
                        <button id="blue-line-button" class="bg-white mr-2" style="background-color: #3f51b5; border-radius: 10px; width: 20px; height: 20px"></button>
                        <button id="green-line-button" class="bg-white mr-2" style="background-color: #4caf50; border-radius: 10px; width: 20px; height: 20px"></button>
                        <button id="red-line-button" class="bg-white mr-2" style="background-color: #f44336; border-radius: 10px; width: 20px; height: 20px"></button>
                        <button id="orange-line-button" class="bg-white mr-2" style="background-color: #ff5722; border-radius: 10px; width: 20px; height: 20px"></button>
                        <button id="yellow-line-button" class="bg-white mr-2" style="background-color: #fbc02d; border-radius: 10px; width: 20px; height: 20px"></button>
                    </div>
                    <p class="text-white mt-5">Band</p>
                    <div class="flex flex-row justify-between content-between z-10 bottom-0 lg:bottom-1/3">
                        <button id="white-band-button" class="bg-white mr-2" style="border-radius: 10px; width: 20px; height: 20px"></button>
                        <button id="grey-band-button" class="mr-2" style=" background-color: #9e9e9e; border-radius: 10px; width: 20px; height: 20px"></button>
                        <button id="black-band-button" class="bg-white mr-2" style="background-color: #212121; border-radius: 10px; width: 20px; height: 20px"></button>
                        <button id="blue-band-button" class="bg-white mr-2" style="background-color: #3f51b5; border-radius: 10px; width: 20px; height: 20px"></button>
                        <button id="green-band-button" class="bg-white mr-2" style="background-color: #4caf50; border-radius: 10px; width: 20px; height: 20px"></button>
                        <button id="red-band-button" class="bg-white mr-2" style="background-color: #f44336; border-radius: 10px; width: 20px; height: 20px"></button>
                        <button id="orange-band-button" class="bg-white mr-2" style="background-color: #ff5722; border-radius: 10px; width: 20px; height: 20px"></button>
                        <button id="yellow-band-button" class="bg-white mr-2" style="background-color: #fbc02d; border-radius: 10px; width: 20px; height: 20px"></button>
                    </div>
                </div>
            </div>
        </div>
        <a class=" lg:flex hidden 2xl:mt-60 absolute bottom-2 xl:bottom-10 animate-bounce" href="#how-it-works">
            <img class="" src="http://www.tikitaki.ru/static/Arrow%202.svg"/>
        </a>
    </section>
    <section id="how-it-works" class="h-fit lg:h-screen" >
        <h2 class="text-white mt-20 lg:mt-10 absolute z-10">How it works?</h2>
        <div class="gradient-bg-blue z-10"></div>
        <p class=" absolute mt-32 text-white text-center w-3/4 lg:w-1/2 z-10">MyoMouse is a fitness band-sized device that receives electrical brain signals that control the movements of your fingers and converts them using special software into commands for external real, digital and virtual devices. Their list is endless.
        </p>
<!--        <div id="canvas-wrapper" style="" class="items-center w-1/2 h-screen mt-72">-->
<!--            <canvas class="ml-0 2xl:ml-0 w-1/2"  id="hero-lightpass"></canvas>-->
<!--        </div>-->
        <img src="../static/mm.png" class="mt-10 absolute -z-1" style="width: 30rem; height: 30rem; opacity: 0.5">
    </section>
    <section id="how_it_possible" class="h-fit xl:h-screen relative mt-20 items-center">
        <h2 class="2xl:mt-32 text-white z-10 text-center">Why is all this possible</h2>
        <div class="absolute gradient-bg-blue z-10"></div>
        <div class="flex flex-col ml-2 mr-2 mt-10 lg:ml-20 2xl:ml-32 lg:mr-24 items-center">
            <h3 class=" mt-10 lg:w-1/2 text-white text-center">The bracelet itself is divided into two parts:</h3>
            <div class="grid grid-cols-2 gap-6 lg:w-1/2 mt-5">
                <p class=" text-white z-10" style="white-space: pre-wrap;">These are the sensors themselves, which are located on the strap. They register incoming signals from your muscles and brain;
                <p class=" text-white pl-20 z-10" style="white-space: pre-wrap;">A removable module with a microcontroller and other electronics, which is separately connected to the strap and determines its final purpose. It will be created anew for all your custom integrations.
            </div>
        </div>
        <div class="flex flex-col ml-2 mr-2 lg:ml-20 2xl:ml-32 lg:mr-24 items-center">
            <h3 class=" mt-10 lg:w-3/4 text-white text-center">Three modifications of removable modules have already been developed:</h3>
                <div class="grid grid-cols-2 lg:grid-cols-3 gap-6 lg:w-3/4 mt-5" >
                <p class=" text-white z-10" style="white-space: pre-wrap;">General purpose module. Management of presentations on displays, neuromachines, drones, robots.
                <p class=" text-white z-10" style="white-space: pre-wrap;">Personalized secure module - with a hardware encryption system (to protect transmitted signals and unique identification of the myo-key itself)
                <p class=" text-white z-10" style="white-space: pre-wrap;">Long-range module - with hardware encryption and a signaling system through a smart home control module based on Lora-Wan (the signal passes well through various concrete floors)
            </div>
        </div>
    </section>
    <section id="application-area" class="h-fit relative  mt-20">
        <h2 class=" mt-10 text-white z-10">Application area</h2>
        <div class="gradient-bg-pink z-1 absolute right-0"></div>
        <div class=" hidden lg:grid lg:grid-cols-2 gap-6 2xl:gap-44 mt-10 2xl:mt-40 lg:ml-24 2xl:ml-32 lg:mr-32 items-center">
            <div class=" flex flex-col items-center justify-center lg:items-start">
                <h3 class="text-white">CONTROL OF DISPLAYS AND METAVIVERS</h3>
                <p class=" mt-10 text-white">Converts your finger movements using galvanic and volumetric sensors into electrical control signals. Incredible control, ultra-precise wristbands track your body&#39;s every impulse. We have developed a cutting-edge device that can reimagine your experience of interacting with technological objects.</p>
            </div>
            <iframe class="w-full z-10" width="560" height="315" src="https://www.youtube.com/embed/KVuQVTFDcEc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            <iframe class="w-full z-10" width="560" height="315" src="https://www.youtube.com/embed/LKMlw2pHpDM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            <div class=" flex flex-col items-center justify-center lg:items-start">
                <h3 class="text-white z-10">UAV CONTROL</h3>
                <p class="mt-10 text-white w-3/4 xl:w-full text-center lg:text-left z-10">This solution has been tested with great success 
within the StartUP Academy in Skolkovo.</p>
            </div>
            <div>
                <h3 class="text-white">CAR CONTROL</h3>
                <p class="mt-10 text-white">The unique possibilities of toys and games based on myo-mouse develop fine motor skills in children. And that means intelligence and speech.</p>
            </div>
            <iframe width="560" class="w-full" height="315" src="https://www.youtube.com/embed/2ka9743pCmM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        <div class=" lg:hidden w-full z-10 ">
            <div class="flex flex-col items-center z-10 mr-2 ml-2">
                <div class="flex flex-col items-center z-10">
                    <h3 class=" mt-10 text-white text-center">CONTROL OF DISPLAYS AND METAVIVERS</h3>
                    <p class="mt-10 text-white w-full">Converts your finger movements using galvanic and volumetric sensors into electrical control signals. Incredible control, ultra-precise wristbands track your body&#39;s every impulse. We have developed a cutting-edge device that can reimagine your experience of interacting with technological objects.</p>
                </div>
                <iframe class="w-full mt-10" style="height: 20rem"  width="560" height="315" src="https://www.youtube.com/embed/KVuQVTFDcEc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
            <div class="flex flex-col items-center z-10 mt-20 mr-2 ml-2">
                <div class="flex flex-col items-center z-10">
                    <h3 class="text-white text-center">UAV CONTROL</h3>
                    <p class="mt-10 text-white w-full">This solution has been tested with great success 
within the StartUP Academy in Skolkovo.</p>
                </div>
                <iframe class="w-full mt-10" style="height: 20rem" width="560" height="315" src="https://www.youtube.com/embed/LKMlw2pHpDM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
            <div class="flex flex-col items-center z-10 mt-20 mr-2 ml-2">
                <div class="flex flex-col items-center z-10">
                    <h3 class="text-white text-center">CAR CONTROL</h3>
                    <p class=" mt-10 text-white text-center">The unique possibilities of toys and games based on myo-mouse develop fine motor skills in children. And that means intelligence and speech.</p>
                </div>
                <iframe class="w-full mt-10" style="height: 20rem" src="https://www.youtube.com/embed/2ka9743pCmM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
        </div>
    </section>
    <section id="integrations" class="h-fit lg:h-screen relative  mt-20  items-center">
        <h2 class="2xl:mt-32 mt-20 text-white h-1/3 z-10 text-center">Integrations</h2>
        <div class=" hidden lg:grid lg:grid-cols-2 gap-6 2xl:gap-44 mt-10 2xl:mt-40 lg:ml-24 2xl:ml-32 lg:mr-32 items-center">
            <div>
                <h3 class="text-white text-center">Smart House</h3>
                <p class="mt-10 text-white w-full z-10">Miomysh, for example, can control any locks in a personalized and programmable way</p>
            </div>
            <div></div>
            <div></div>
            <div>
                <h3 class="text-white text-center">Game interface control</h3>
            </div>
            <div>
                <h3 class="text-white text-center">Equipment management for exhibitions and mass shows</h3>
            </div>
        </div>
        <div class=" lg:hidden w-full z-10 ">
            <div class="flex flex-col items-center z-10 mt-10 mr-2 ml-2">
                <div class="text-center">
                    <h3 class="text-white text-center">Smart House</h3>
                    <p class="mt-10 text-white w-full z-10">Miomysh, for example, can control any locks in a personalized and programmable way</p>
                </div>
            </div>
            <div class="flex flex-col items-center z-10 mt-10 mr-2 ml-2">
                <div class="text-center">
                    <h3 class="text-white text-center">Game interface control</h3>

                </div>
            </div>
            <div class="flex flex-col items-center z-10 mt-10 mr-2 ml-2">
                <div class="text-center">
                    <h3 class="text-white text-center">Equipment management for exhibitions and mass shows</h3>

                </div>
            </div>
        </div>
    </section>
    <section id="our-team"  class="flex flex-col relative mt-32 pb-20 lg:h-fit ">
        <h2 class=" mt-10 text-white z-10 text-center" style="text-align: center;">Our team</h2>
        <div class="grid grid-cols-2 xl:mt-20 xl:grid-cols-3 mt-5 2xl:gap-32 gap-10 2xl:h-fit 2xl:mt-20 2xl:mt-44 z-10">
            <div class="team-member items-center justify-center align-middle flex flex-col">
                <img class="h-1/2 w-1/2 2xl:h-fit 2xl:w-fit" src="http://www.tikitaki.ru/static/KozylyaevAvatar.svg"/>
                <h4 class="pt-6 text-white text-center">Alexey Kozulyaev</h4>
                <p class=" text-xs text-white text-center lg:text-base">Promotion, marketing, financing</p>
            </div>
            <div class="team-member items-center justify-center align-middle flex flex-col">
                <img class="h-1/2 w-1/2 2xl:h-fit 2xl:w-fit" src="http://www.tikitaki.ru/static/KonotopovaAvatar.svg"/>
                <h4 class="pt-6 text-white text-center">Elena Konotopova</h4>
                <p class="text-xs text-white z-10 text-center lg:text-base">Patent and organizational issues</p>
            </div>
            <div class="team-member items-center justify-center align-middle flex flex-col">
                <img class="h-1/2 w-1/2 2xl:h-fit 2xl:w-fit" src="http://www.tikitaki.ru/static/SavelievAvatar.svg"/>
                <h4 class="pt-6 text-white text-center z-10">Anton Saveliev</h4>
                <p class=" text-xs text-white z-10 text-center lg:text-base">Development and production</p>
            </div>
            <div class="team-member items-center justify-center align-middle flex flex-col">
                <img class="h-1/2 w-1/2 2xl:h-fit 2xl:w-fit" src="http://www.tikitaki.ru/static/AndreevaAvatar.svg"/>
                <h4 class="pt-6 text-white text-center">Polina Andreeva</h4>
                <p class=" text-xs text-white text-center lg:text-base">Sales and project coordination</p>
            </div>
            <div class="team-member items-center justify-center align-middle flex flex-col">
                <img class="h-1/2 w-1/2 2xl:h-fit 2xl:w-fit" src="http://www.tikitaki.ru/static/BorschevskiyAvatar.svg"/>
                <h4 class="pt-6 text-white text-center">Ivan Borshevsky</h4>
                <p class=" text-xs text-white text-center lg:text-base">Cognitive research and gestural signals</p>
            </div>
        </div>
        <div class="lg:w-1/2 lg:h-1/2 gradient-bg-blue z-1 absolute left-0 top-0"></div>
        <div class="lg:w-1/2 lg:h-1/2 gradient-bg-pink z-1 absolute right-10"></div>
        <div class="lg:w-1/2 lg:h-1/2 gradient-bg-pink z-1 absolute  bottom-0 right-0 xl:pt-64"></div>
    </section>
    <section id="form_section" class="flex flex-col items-center bg-white z-10 xl:h-2/6">
        <div class="mt-24  lg:ml-32 lg:mr-32 xl:mb-24 flex flex-col">
            <div class="flex flex-col">
                <h3 class="text-black text-xl xl:text-2xl text-center xl:text-left">Leave a pre-order for a device or integration. </h3>
            </div>
            <form id="form" name="form" class="hidden lg:grid grid-cols-4 gap-6 pt-6 items-center">
                <p>Enter your name</p>
                <p>Phone number*</p>
                <p>Email*</p>
                <p>Comment
(Terms of reference for integration with your needs)</p>
                <input id="name" type="text" class="h-10 w-56 2xl:w-72" style="border: 1px solid #DBDBDB;border-radius: 8px;"/>
                <input id="phone" type="tel" required placeholder="+X(XXX)XXX-XX-XX" class="h-10 w-56 2xl:w-72" style="border: 1px solid #DBDBDB;border-radius: 8px;"/>
                <input id="email" type="email" class="h-10 w-56 2xl:w-72" style="border: 1px solid #DBDBDB;border-radius: 8px;"/>
                <input id="comment" type="text" class="h-10 w-56 2xl:w-72" style="border: 1px solid #DBDBDB;border-radius: 8px;"/>
                <button type="submit" onclick="send_form_data()" class="bg-black w-56 h-14" style="border-radius: 32px">
                    <a href="#form_section"></a>
                    <h4  class="text-white text-base">Submit</h4>
                </button>
            </form>
            <form id="mobile_form" name="form" class="flex mx-auto flex-col lg:hidden mt-20 items-center">
                <p class="text-left">Enter your name</p>
                <input id="name_mobile" type="text" class="h-10 w-56 2xl:w-72" style="border: 1px solid #DBDBDB;border-radius: 8px;"/>
                <p>Phone number*</p>
                <input id="phone_mobile" type="tel" required placeholder="+7(xxx)xxx-xx-xx" class="h-10 w-56 2xl:w-72" style="border: 1px solid #DBDBDB;border-radius: 8px;">
                <p>Email*</p>
                <input id="email_mobile" type="email" class="h-10 w-56 2xl:w-72" style="border: 1px solid #DBDBDB;border-radius: 8px;"/>
                <p class="w-3/4 text-center">Comment
(Terms of reference for integration with your needs)</p>
                <input id="comment_mobile" type="text" class="h-10 w-56 2xl:w-72" style="border: 1px solid #DBDBDB;border-radius: 8px;"/>
                <button type="submit" onclick="send_form_data()" type="submit" value="Submit" class="bg-black w-56 h-14 mt-10 mb-30" style="border-radius: 32px">
                    <h4  class="text-white text-base">Submit</h4>
                </button>
            </form>
        </div>
    </section>
    </div>
    <script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll@15.0.0/dist/smooth-scroll.polyfills.min.js"></script>
    <script src="http://www.tikitaki.ru/static/main.js"></script>
            <script type="module">

                import * as THREE from './static/js/three.module.js';
                import { APP } from './static/js/app.js';
                import { VRButton } from './static/js/VRButton.js';

                window.THREE = THREE; // Used by APP Scripts.
                window.VRButton = VRButton; // Used by APP Scripts.

                var canvas_wrapper = document.getElementById('canvas_wrapper')
                let loading_status_wrapper = document.getElementById('loading_status_wrapper')
                if (window.screen.width >= 1700){
                        loading_status_wrapper.style.width = '640px';
                        loading_status_wrapper.style.height = '640px';
                    }
                    else
                    {
                        loading_status_wrapper.style.width = '300px';
                        loading_status_wrapper.style.height = '300px';
                    }
                var loader = new THREE.FileLoader();
                

                    var player = new APP.Player();
                    




                    



                
                
                
                
                
                





            </script>
</body>
</html>

<style>
.button-gradient {
    position: relative;
    border: 1px solid transparent;
    border-radius: 32px;
    background-clip: padding-box;
    background: black;
}
.button-gradient::after {
    position: absolute;
    top: -4px; bottom: -4px;
    left: -4px; right: -4px;
    border: 1px solid;
    background: linear-gradient(99.43deg, #5243FD 7.43%, #8A79F2 59.53%, #B643FD 91.49%);
    content: '';
    z-index: -1;
    border-radius: 32px;
    }
.content{
    overflow: hidden;
    scroll-behavior: smooth;
}
body{
    /*overflow:hidden;*/
}
section{
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    height: 100vh;
    scroll-snap-align: center;

}
.gradient-bg-pink {
    width: 656px;
    height: 499px;
    background: rgba(190, 0, 221, 0.2);
    filter: blur(100px);
    transform: rotate(-3.87deg);
}
.gradient-bg-blue {
    width: 450px;
    height: 400px;
    background: rgba(93, 147, 252, 0.2);
    filter: blur(100px);
    align-self: start;
}
/*canvas {*/
/*    left: 50%;*/
/*    top: 50%;*/
/*    max-height: 100vh;*/
/*    max-width: 100vw;*/
/*}*/
canvas{
    justify-self: center;
    
    padding: 0;

}
/*.fixed-canvas{*/
/*    position: fixed;*/
/*}*/
.team-member{

}
progress{
    align-self: center;
    justify-self: center;
    margin-top: 5rem;
}
progress[value]::-webkit-progress-bar {
      background-color: #000000;
      border-radius: 2px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
        color: -webkit-linear-gradient(99.43deg, #5243FD 7.43%, #8A79F2 59.53%, #B643FD 91.49%);
    background-size: 35px 20px, 100% 100%, 100% 100%;
}
progress[value]::-webkit-progress-value {
  position: relative;
  background-size: 35px 20px, 100% 100%, 100% 100%;
  border-radius:5px;
  background: linear-gradient(99.43deg, #5243FD 7.43%, #8A79F2 59.53%, #B643FD 91.49%);
  animation: animate-stripes 5s linear infinite;
}
p{
    white-space: pre-wrap
}
</style>