Snack 2 Win

Призы

 Georgia TTT NCP 2024

Authorization - Email

Authorization - Phone number

Receipt - Date

Second name

Last name

First name

Штрих-код

ID участника

T&Cs

ADS subscription

Delivery city

Fiscal terms

Receipt - Photo

Feedbacks - Question

Feedbacks - Topic

Receipt - FD

Receipt - FP

Receipt - FN

Receipt - Price

Delivery zip

Registration city

Registration zip

Delivery state

Registration state

Delivery address

Passport issued by

Registration address

Payout card

Passport number

Passport issue date

Birthday date

Phone number

Passport photo

Email

Promotional items photo

Уровень участника

Язык

Страна

Authorization - Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gyroscope Cookie</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/fflate@0.7.3/umd/index.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/FBXLoader.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>
    <script type="module" src="https://cdn.jsdelivr.net/npm/ldrs/dist/auto/lineSpinner.js"></script>
    <style>
        #sensor-data {
            position: absolute;
            top: 20px;
            left: 20px;
            font-size: 16px;
        }

        #cookie-container {
            position: relative;
            width: 150px;
            height: 150px;
        }

        #back-image, #front-cookie-wrapper {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            transition: transform 0.1s ease-in-out;
        }

        #front-cookie-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #front-cookie {
            width: 100%;
            height: 100%;
            transform-origin: center;
        }

        #buttons-container {
            position: absolute;
            top: 70%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1000;
            display: flex;
            gap: 10px;
        }

        .buttonG {
            background-color: white;
            color: #0029a3;
            border: none;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            border-radius: 5px;
        }

        .buttonG:hover {
            background-color: #f0f0f0;
        }

        #instruction-text {
            position: absolute;
            top: 30%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1000;
            color: white;
            font-size: 18px;
            text-align: center;
            width: 80%;
        }

        #loading-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #0029a3;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            color: white;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <div id="loading-screen">
        <l-line-spinner
          size="40"
          stroke="3"
          speed="1"
          color="white" 
        ></l-line-spinner></div>
    <div id="3d-container" style="width: 100%; height: 800px; position: relative;">
        <div id="instruction-text"></div>
        <div id="buttons-container">
            <button id="start_demo" class="buttonG">Twist by gyroscope</button>
            <button id="rotate_random" class="buttonG">Just twist</button>
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const container = document.getElementById('3d-container');
            let scene, camera, renderer, model, imageMesh1, imageMesh2;
            let leftPart, rightPart, creamPart;
            let mixer, clipAction;
            const planA = ['Game1', 'Game2'];
            let totalFrames = 135;
            let currentFrame = 0;
        
            const THRESHOLD_HIGH_POS = 4;
            const THRESHOLD_HIGH_NEG = -4;
        
            let isPlayingClip = false;
            let isAnimationTriggered = false;
            let selectedGame = '';
        
            let imageMeshControls = {
                mesh1: { x: 0.001, y: 0.00, z: -0.06, rotX: 6.3, rotY: Math.PI, rotZ: -0.5 },
                mesh2: { x: 0.00, y: -0.001, z: -0.05, rotX: -0.1, rotY: Math.PI, rotZ: -0.75 }
            };
        
            let interactiveLight;
            let interactiveLightControls = {
                x: 8,
                y: 6,
                z: 6
            };
        
            async function initThree() {
                scene = new THREE.Scene();
                scene.background = new THREE.Color(0x0029a3);
        
                camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
                renderer = new THREE.WebGLRenderer({ antialias: true });
                renderer.setSize(container.clientWidth, container.clientHeight);
                container.appendChild(renderer.domElement);
        
                const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
                scene.add(ambientLight);
        
                const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
                directionalLight.position.set(0, 1, 0);
                scene.add(directionalLight);
        
                interactiveLight = new THREE.PointLight(0xffffff, 1, 100);
                updateInteractiveLightPosition();
                scene.add(interactiveLight);
        
                camera.position.set(0, 0, 5);
                camera.lookAt(0, 0, 0);
        
                await loadModel();
        
                animate();
            }
        
            function updateInteractiveLightPosition() {
                interactiveLight.position.set(
                    interactiveLightControls.x,
                    interactiveLightControls.y,
                    interactiveLightControls.z
                );
            }
        
            async function loadModel() {
                const loader = new THREE.GLTFLoader();
        
                try {
                    const gltf = await new Promise((resolve, reject) => {
                        loader.load(
                            'https://cdn.jsdelivr.net/gh/timememe/o_files@719efb0dc18f04d14586f9adbb6c61a48c2c8d9f/oreo.glb',
                            resolve,
                            (xhr) => {
                                console.log((xhr.loaded / xhr.total * 100) + '% loaded');
                            },
                            reject
                        );
                    });
        
                    model = gltf.scene;
                    model.scale.set(3, 3, 3);
                    model.position.set(0, 0, 0);
                    model.rotation.set(0, -1.55, 0);
                    model.userData.fixedRotation = new THREE.Euler(0, -1.55, 0);
        
                    leftPart = findObjectByNamePattern(model, /left/i);
                    rightPart = findObjectByNamePattern(model, /right/i);
                    creamPart = findObjectByNamePattern(model, /cream/i);
        
                    const cookieMaterial = new THREE.MeshStandardMaterial({
                        color: 0x4a3624,
                        roughness: 1,
                        metalness: 0,
                        transparent: true,
                        opacity: 1
                    });
        
                    const creamMaterial = new THREE.MeshStandardMaterial({
                        color: 0xffffff,
                        roughness: 1,
                        metalness: 0,
                        transparent: true,
                        opacity: 1
                    });
        
                    if (leftPart) leftPart.material = cookieMaterial;
                    if (rightPart) rightPart.material = cookieMaterial;
                    if (creamPart) creamPart.material = creamMaterial;
        
                    scene.add(model);
        
                    if (gltf.animations && gltf.animations.length > 0) {
                        mixer = new THREE.AnimationMixer(model);
                        const clip = gltf.animations[0];
                        clipAction = mixer.clipAction(clip);
                        clipAction.setLoop(THREE.LoopOnce);
                        clipAction.clampWhenFinished = true;
                    }
        
                    createImageMeshes();
                } catch (error) {
                    console.error('Произошла ошибка при загрузке:', error);
                }
            }
        
            function findObjectByNamePattern(object, pattern) {
                let result = null;
                object.traverse((child) => {
                    if (pattern.test(child.name) && !result) {
                        result = child;
                    }
                });
                return result;
            }
        
            function createImageMeshes() {
                const loader = new THREE.TextureLoader();
                
                loader.load('https://cdn.jsdelivr.net/gh/timememe/o_files@main/icon_find2.png', function(texture) {
                    const material = new THREE.MeshBasicMaterial({ map: texture, transparent: true });
                    const geometry = new THREE.PlaneGeometry(0.02, 0.02);
                    imageMesh1 = new THREE.Mesh(geometry, material);
                    imageMesh1.position.set(imageMeshControls.mesh1.x, imageMeshControls.mesh1.y, imageMeshControls.mesh1.z);
                    imageMesh1.rotation.set(imageMeshControls.mesh1.rotX, imageMeshControls.mesh1.rotY, imageMeshControls.mesh1.rotZ);
                    leftPart.add(imageMesh1);
                    imageMesh1.visible = false;
                });
        
                loader.load('https://cdn.jsdelivr.net/gh/timememe/o_files@main/icon_match3.png', function(texture) {
                    const material = new THREE.MeshBasicMaterial({ map: texture, transparent: true });
                    const geometry = new THREE.PlaneGeometry(0.02, 0.02);
                    imageMesh2 = new THREE.Mesh(geometry, material);
                    imageMesh2.position.set(imageMeshControls.mesh2.x, imageMeshControls.mesh2.y, imageMeshControls.mesh2.z);
                    imageMesh2.rotation.set(imageMeshControls.mesh2.rotX, imageMeshControls.mesh2.rotY, imageMeshControls.mesh2.rotZ);
                    rightPart.add(imageMesh2);
                    imageMesh2.visible = false;
                });
            }
        
            function getRandomPhrase(array) {
                return array[Math.floor(Math.random() * array.length)];
            }
        
            function animate() {
                requestAnimationFrame(animate);
                if (scene && camera && renderer) {
                    if (mixer) {
                        mixer.update(0.016);
                    }
                    renderer.render(scene, camera);
                }
            }
        
            function handleMotion(event) {
                if (isAnimationTriggered) return;
        
                if (model && clipAction) {
                    if (event.rotationRate.alpha) {
                        model.rotation.x = model.userData.fixedRotation.x + THREE.MathUtils.degToRad(event.rotationRate.alpha);
                    }
        
                    let accelerationX = event.accelerationIncludingGravity.x;
                    updateAnimationFromAcceleration(accelerationX);
                }
            }
        
            function updateAnimationFromAcceleration(accelerationX) {
                if (isAnimationTriggered) return;
        
                if (accelerationX >= THRESHOLD_HIGH_POS || accelerationX <= THRESHOLD_HIGH_NEG) {
                    triggerRandomAnimation();
                }
            }
        
            function triggerRandomAnimation() {
                if (Math.random() < 0.5) {
                    triggerAnimation(1, 50);
                    selectedGame = 'Game1';
                    if (imageMesh1) imageMesh1.visible = true;
                    if (imageMesh2) imageMesh2.visible = false;
                } else {
                    triggerAnimation(70, 120);
                    selectedGame = 'Game2';
                    if (imageMesh1) imageMesh1.visible = false;
                    if (imageMesh2) imageMesh2.visible = true;
                }
            }
        
            function triggerAnimation(startFrame, endFrame) {
                isAnimationTriggered = true;
                playClip(startFrame, endFrame);
            }
        
            function playClip(startFrame, endFrame) {
                if (clipAction && !isPlayingClip) {
                    setClipState(true);
                    
                    const clip = clipAction.getClip();
                    const duration = clip.duration;
                    
                    const startTime = (startFrame / totalFrames) * duration;
                    const endTime = (endFrame / totalFrames) * duration;
                    
                    clipAction.time = startTime;
                    
                    clipAction.setLoop(THREE.LoopOnce);
                    clipAction.clampWhenFinished = true;
                    clipAction.setEffectiveTimeScale(1);
                    clipAction.setEffectiveWeight(1);
                    
                    mixer.stopAllAction();
                    
                    clipAction.play();
                    
                    const animationDuration = (endTime - startTime) * 1000;
                    setTimeout(() => {
                        onAnimationFinished();
                    }, animationDuration + 100);
                    
                    setTimeout(() => {
                        clipAction.halt((endTime - startTime) / duration);
                    }, animationDuration);
                }
            }
        
            function onAnimationFinished() {
                setClipState(false);
                isAnimationTriggered = false;
                mixer.removeEventListener('finished', onAnimationFinished);

                if (selectedGame === 'Game1') {
                        instruction_text.textContent = "Plan A is chosen! Find a pair will start in 3, 2, 1...";
                    } else if (selectedGame === 'Game2') {
                        instruction_text.textContent = "Plan B is chosen! Match3 Oreo will start in 3, 2, 1...";
                    }
                
                setTimeout(() => {
                    if (selectedGame === 'Game1') {
                        window.location.assign('/find2');
                    } else if (selectedGame === 'Game2') {
                        window.location.assign('/match3');
                    }
                }, 4000); 
            }
        
            function setClipState(playing) {
                isPlayingClip = playing;
            }
        
            let is_running = false;
            let demo_button = document.querySelector("#buttons-container .buttonG:first-child");
            let instruction_text = document.getElementById("instruction-text");

            instruction_text.textContent = "Twist the Oreo!";
            
            demo_button.onclick = function(e) {
                e.preventDefault();
        
                if (DeviceMotionEvent && typeof DeviceMotionEvent.requestPermission === "function") {
                    DeviceMotionEvent.requestPermission();
                }
        
                if (is_running) {
                    window.removeEventListener("devicemotion", handleMotion);
                    demo_button.innerHTML = "Spin it yourself";
                    is_running = false;
                    
                    if (model) {
                        model.rotation.set(model.userData.fixedRotation.x, model.userData.fixedRotation.y, model.userData.fixedRotation.z);
                    }
                    currentFrame = 1;
                    setClipState(false);
                    if (imageMesh1) imageMesh1.visible = false;
                    if (imageMesh2) imageMesh2.visible = false;
                    instruction_text.textContent = "";
                } else {
                    window.addEventListener("devicemotion", handleMotion);
                    demo_button.innerHTML = "Stop";
                    is_running = true;
                    instruction_text.textContent = "Turn the phone left or right!";
                }
            };
        
            let random_animation_button = document.querySelector("#buttons-container .buttonG:last-child");
            random_animation_button.onclick = function(e) {
                e.preventDefault();
                instruction_text.textContent = "The cookie will choose your game now!";
                triggerRandomAnimation();
            };
        
            async function init() {
                await initThree();
                document.getElementById('loading-screen').style.display = 'none';
            }
        
            // Ждем полной загрузки всех ресурсов
            window.addEventListener('load', () => {
                setTimeout(init, 100);
            });
        });
    </script>
</body>
</html>

Участвуй в акции и получай ценные призы

Промо