<!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">
    <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 {
            margin-top: 20px;
            font-size: 24px;
            font-weight: bold;
            color: #4cfff6;
        }

        .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: #399c00;
        }

        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()">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">Your Kazakh name will appear here!</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");
    
    // Modify the iframe's source to autoplay
    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;
            document.getElementById('name').textContent = kazakhName;
        }

        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>
