<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Generate unique Kazakh names with this interactive Kazakh Name Generator. Discover culturally rich names with just a click!">
    <meta name="keywords" content="Kazakh Name Generator, Kazakh Names, Random Name Generator, Kazakh Culture, Name Generator">
    <meta name="author" content="Your Name">
    <meta property="og:title" content="Kazakh Name Generator">
    <meta property="og:description" content="Generate unique Kazakh names with this interactive tool. Perfect for learning and cultural discovery!">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://hello-room.github.io/nameGen">
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico?">
    <meta property="og:image" content="https://hello-room.github.io/nameGen/kazakh-name-generator.png">
    <title>Kazakh Name Generator</title>
    <style>
        #soundcloudPlayer {
            display: none;
        }

        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
            font-family: Arial, sans-serif;
        }

        #shaderCanvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1; /* Places the canvas behind the content */
        }

        body {
            text-align: center;
            padding: 50px;
            background-color: transparent; /* Allow shader to show through */
        }

        h1, p {
            color: #5e5400;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #ff45e6;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        button:hover {
            background-color: #ff94f6;
        }

   
       

 

#name-container {
    display: inline-block;
    perspective: 1000px; /* Добавляет 3D-перспективу */
}

#name {
    margin-top: 20px;
    font-size: 24px;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 0 2px #4cfff6, 0 0 4px #4cfff6, 0 0 6px #00ffff;
    display: inline-block;
    transform-origin: center;
    transform: rotateY(0deg); /* Исходное состояние */
    backface-visibility: visible;
    opacity: 1; /* Текст виден сразу */
    animation: fadeInBloom 3s ease-out forwards, twinkleStars 3s ease-in-out infinite;
}

/* Анимация появления с цветами */
@keyframes fadeInBloom {
    0% {
        opacity: 0;
        text-shadow: 0 0 0px #4cfff6, 0 0 0px #00ffff, 0 0 0px #ff00ff;
    }
    100% {
        opacity: 1;
        text-shadow: 0 0 6px #4cfff6, 0 0 12px #00ffff, 0 0 18px #ff00ff, 0 0 24px #ff00ff;
    }
}

/* Анимация мерцания (twinkle) с цветами */
@keyframes twinkleStars {
    0% {
        text-shadow: 0 0 4px #4cfff6, 0 0 8px #00ffff, 0 0 12px #ff00ff;
    }
    20% {
        text-shadow: 0 0 8px #ff00ff, 0 0 16px #00ffff, 0 0 24px #4cfff6;
    }
    40% {
        text-shadow: 0 0 12px #ff00ff, 0 0 24px #4cfff6, 0 0 18px #ff00ff;
    }
    60% {
        text-shadow: 0 0 6px #4cfff6, 0 0 12px #ff00ff, 0 0 16px #00ffff;
    }
    80% {
        text-shadow: 0 0 10px #ff00ff, 0 0 20px #4cfff6, 0 0 28px #00ffff;
    }
    100% {
        text-shadow: 0 0 6px #4cfff6, 0 0 12px #00ffff, 0 0 18px #ff00ff;
    }
}


@keyframes rotateHorizontal {
    0% {
        transform: rotateY(0deg);
    }
    50% {
        transform: rotateY(180deg); /* Полное зеркальное вращение */
    }
    100% {
        transform: rotateY(360deg); /* Возврат к исходному положению */
    }
}


.animated {
    animation: fadeInBloom 2s ease-out forwards, rotateHorizontal 5s ease-in-out infinite;
    animation-delay: 3s; /* Задержка в 3 секунды */
}





        .buttons-container {
            display: flex;
            justify-content: center;
            gap: 10px; /* Space between buttons */
            margin-top: 20px;
        }

        .copy-button {
            padding: 10px 15px;
            background-color: #00f7ff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .copy-button:hover {
            background-color: #5eff00;
        }

        header, main, footer {
            position: relative; /* Ensure content is above the canvas */
            z-index: 1; /* Stack above the canvas */
        }

        footer {
            margin-top: 20px;
            color: #4c00ff;
        }
    </style>
</head>
<body>
    <canvas id="shaderCanvas"></canvas>
    <header>
        <h1>Kazakh Name Generator</h1>
    </header>
    <main>
        <p>Generate culturally rich Kazakh names with a single click. Explore and enjoy unique names inspired by Kazakh heritage!</p>
        <div class="buttons-container">
            <button onclick="generateKazakhName(); animateNameWithEffects();">Generate Name</button>
            <button class="copy-button" onclick="copyName()">Copy</button>
            
        </div>
        
        <!-- SoundCloud Embed -->
        <iframe 
            id="soundcloudPlayer"
            width="100%" 
            height="166" 
            scrolling="no" 
            frameborder="no" 
            allow="autoplay"
            src="https://w.soundcloud.com/player/?url=https%3A//soundcloud.com/nicos-nextbots-ost/popular-nicos-nextbots&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true">
        </iframe>
        
        <div id="name-container">
            <div id="name">Your Kazakh name will appear here!</div>
        </div>
        
    </main>
    <footer>
        <p>music credits: Popular - Nico's Nextbots</p>
        <p>&copy; 2024 nameGen. All Rights Reserved.</p>
    </footer>
   

    
    <script>


function generateKazakhName() {
    const soundcloudPlayer = document.getElementById("soundcloudPlayer");

    // Автозапуск SoundCloud
    const src = soundcloudPlayer.src;
    if (!src.includes("auto_play=true")) {
        soundcloudPlayer.src = src + "&auto_play=true";
    }

    // Генерация случайного казахского имени
    const initialSyllables = ["Al", "Nur", "Bai", "Er", "Kan", "Zhan", "Ar", "Tem", "Ai", "Nur", "Altyn", "Gul", "Er", "Temir", "Sultan", "Kaz", "Bek", "As", "Shyn", "Tul", "Dar"];
    const middleSyllables = ["gali", "bek", "dai", "san", "mar", "mur", "sulu", "gul", "batyr", "aidar", "saule", "nur", "sultan", "serik", "temir", "adil"];
    const endSyllables = ["ly", "tan", "bay", "bin", "zar", "kesh", "han", "uly", "yzy", "keldi", "tar", "ken", "dar", "zhan", "tas", "khoja"];

    const randomInitial = initialSyllables[Math.floor(Math.random() * initialSyllables.length)];
    const randomMiddle = middleSyllables[Math.floor(Math.random() * middleSyllables.length)];
    const randomEnd = endSyllables[Math.floor(Math.random() * endSyllables.length)];

    const kazakhName = randomInitial + randomMiddle + randomEnd;

    // Устанавливаем текст и запускаем анимацию с задержкой
    const nameElement = document.getElementById("name");
    nameElement.textContent = kazakhName;

    // Сбрасываем текущую анимацию
    nameElement.style.animation = "none";

    // Устанавливаем начальную анимацию fadeInBloom + twinkleStars
    nameElement.style.animation = `fadeInBloom 2s ease-out forwards, twinkleStars 3s ease-in-out infinite`;

    // Задержка перед добавлением вращения
    setTimeout(() => {
        // Добавляем анимацию вращения вместе с twinkleStars
        nameElement.style.animation = `
            twinkleStars 3s ease-in-out infinite,
            rotateHorizontal 5s ease-in-out infinite
        `;
    }, 3000); // Задержка в 3 секунды
}



        function copyName() {
            const name = document.getElementById('name').textContent;
            const textArea = document.createElement('textarea');
            textArea.value = name;
            document.body.appendChild(textArea);
            textArea.select();
            document.execCommand('copy');
            document.body.removeChild(textArea);

            // Изменить текст кнопки
            const copyButton = document.querySelector('.copy-button');
            copyButton.textContent = 'Copied!';
            
            // Восстановить текст через 1.5 секунды
            setTimeout(() => {
                copyButton.textContent = 'Copy';
            }, 1500);
        }


        
        const canvas = document.getElementById("shaderCanvas");
const gl = canvas.getContext("webgl");

if (!gl) {
    alert("WebGL not supported. Please use a compatible browser.");
    throw new Error("WebGL not supported");
}

// Set up canvas size and resize handling
function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    gl.viewport(0, 0, canvas.width, canvas.height);
}

window.addEventListener("resize", resizeCanvas);
resizeCanvas();

// Vertex Shader
const vertexShaderSource = `
    attribute vec4 a_position;
    void main() {
        gl_Position = a_position;
    }
`;

// Fragment Shader
const fragmentShaderSource = `
    precision highp float;
    
    uniform vec3 iResolution;
    uniform float iTime;

    vec3 hash(vec3 p) {
        p = vec3(dot(p, vec3(127.1, 311.7, 74.7)),
                 dot(p, vec3(269.5, 183.3, 246.1)),
                 dot(p, vec3(113.5, 271.9, 124.6)));
        return -1.0 + 2.0 * fract(sin(p) * 43758.5453123);
    }

    float noise(vec3 p) {
        vec3 i = floor(p);
        vec3 f = fract(p);
        vec3 u = f * f * (3.0 - 2.0 * f);

        return mix(mix(mix(dot(hash(i + vec3(0.0, 0.0, 0.0)), f - vec3(0.0, 0.0, 0.0)),
                            dot(hash(i + vec3(1.0, 0.0, 0.0)), f - vec3(1.0, 0.0, 0.0)), u.x),
                       mix(dot(hash(i + vec3(0.0, 1.0, 0.0)), f - vec3(0.0, 1.0, 0.0)),
                            dot(hash(i + vec3(1.0, 1.0, 0.0)), f - vec3(1.0, 1.0, 0.0)), u.x), u.y),
                   mix(mix(dot(hash(i + vec3(0.0, 0.0, 1.0)), f - vec3(0.0, 0.0, 1.0)),
                            dot(hash(i + vec3(1.0, 0.0, 1.0)), f - vec3(1.0, 0.0, 1.0)), u.x),
                       mix(dot(hash(i + vec3(0.0, 1.0, 1.0)), f - vec3(0.0, 1.0, 1.0)),
                            dot(hash(i + vec3(1.0, 1.0, 1.0)), f - vec3(1.0, 1.0, 1.0)), u.x), u.y), u.z);
    }

    void main() {
        vec2 uv = gl_FragCoord.xy / iResolution.xy;
        vec3 starDir = normalize(vec3(uv * 2.0 - 1.0, 1.0));
        
        float starsThreshold = 8.0;
        float starsExposure = 200.0;
        float stars = pow(clamp(noise(starDir * 200.0), 0.0, 1.0), starsThreshold) * starsExposure;
        stars *= mix(0.4, 1.4, noise(starDir * 100.0 + vec3(iTime)));

        gl_FragColor = vec4(vec3(stars), 1.0);
    }
`;

// Helper to create shader
function createShader(gl, type, source) {
    const shader = gl.createShader(type);
    gl.shaderSource(shader, source);
    gl.compileShader(shader);
    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        console.error("Shader compilation failed:", gl.getShaderInfoLog(shader));
        gl.deleteShader(shader);
        return null;
    }
    return shader;
}

// Create shaders
const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);

// Create program
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
    console.error("Program linking failed:", gl.getProgramInfoLog(program));
    gl.deleteProgram(program);
}
gl.useProgram(program);

// Set up position buffer
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
const positions = [
    -1, -1,
    1, -1,
    -1, 1,
    -1, 1,
    1, -1,
    1, 1,
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

// Bind position to attribute
const positionLocation = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);

// Set up uniforms
const iResolutionLocation = gl.getUniformLocation(program, "iResolution");
const iTimeLocation = gl.getUniformLocation(program, "iTime");

// Rendering loop
function render(time) {
    gl.uniform3f(iResolutionLocation, canvas.width, canvas.height, 1.0);
    gl.uniform1f(iTimeLocation, time * 0.001);

    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.TRIANGLES, 0, 6);

    requestAnimationFrame(render);
}

render(0);

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