<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coming Soon - Umut Pirinci</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            height: 100vh;
            margin: 0;
            overflow: hidden;
            background-color: #000;
            background-repeat: no-repeat;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-family: Arial, sans-serif;
        }

        .container {
            text-align: center;
            position: absolute;
            z-index: 10;
        }

        h1 {
            font-size: 3rem;
            animation: fadeInDown 2s ease-in-out;
            text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
        }

        p {
            font-size: 1.5rem;
            animation: fadeInUp 2s ease-in-out;
            text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.6);
        }

        @keyframes fadeInDown {
            0% {
                opacity: 0;
                transform: translateY(-50px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeInUp {
            0% {
                opacity: 0;
                transform: translateY(50px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="1400" height="600"></canvas>
    <div class="container">
        <h1>Umut Pirinci</h1>
        <p>Launching soon. Stay tuned!</p>
    </div>
    <script>
        var canvas = document.getElementById("canvas");

        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        // Initialize the GL context
        var gl = canvas.getContext('webgl');
        if(!gl){
          console.error("Unable to initialize WebGL.");
        }

        //Time
        var time = 0.0;

        //************** Shader sources **************

        var vertexSource = `
        attribute vec2 position;
        void main() {
            gl_Position = vec4(position, 0.0, 1.0);
        }
        `;

        var fragmentSource = `
        precision highp float;

        uniform float width;
        uniform float height;
        vec2 resolution = vec2(width, height);

        uniform float time;

        float getWaveGlow(vec2 pos, float radius, float intensity, float speed, float amplitude, float frequency, float shift){
          float dist = abs(pos.y + amplitude * sin(shift + speed * time + pos.x * frequency));
          dist = 1.0/dist;
          dist *= radius;
          dist = pow(dist, intensity);
          return dist;
        }

        void main(){
            vec2 uv = gl_FragCoord.xy/resolution.xy;
            float widthHeightRatio = resolution.x/resolution.y;
            vec2 centre = vec2(0.5, 0.5);
            vec2 pos = centre - uv;
            pos.y /= widthHeightRatio;

            float intensity = 1.5;
            float radius = 0.02;

            vec3 col = vec3(0.0);
            float dist = 0.0;

            dist = getWaveGlow(pos, radius,intensity, 2.0, 0.018, 3.7, 0.0);
            col += dist * (vec3(0.1) + 0.5 + 0.5*cos(3.14+time+vec3(0,2,4)));

            dist = getWaveGlow(pos, radius, intensity, 4.0, 0.018, 6.0, 2.0);
            col += dist * (vec3(0.1) + 0.5 + 0.5*cos(1.57+time+vec3(0,2,4)));

            dist = getWaveGlow(pos, radius*0.5, intensity, -5.0, 0.018, 4.0, 1.0);
            col += dist * (vec3(0.1) + 0.5 + 0.5*cos(time+vec3(0,2,4)));

            col = 1.0 - exp(-col);

            col = pow(col, vec3(0.4545));

            gl_FragColor = vec4(col, 1.0);
        }
        `;

        window.addEventListener( 'resize', onWindowResize, false );

        function onWindowResize(){
          canvas.width  = window.innerWidth;
          canvas.height = window.innerHeight;
          gl.viewport(0, 0, canvas.width, canvas.height);
          gl.uniform1f(widthHandle, window.innerWidth);
          gl.uniform1f(heightHandle, window.innerHeight);
        }

        function compileShader(shaderSource, shaderType){
          var shader = gl.createShader(shaderType);
          gl.shaderSource(shader, shaderSource);
          gl.compileShader(shader);
          if(!gl.getShaderParameter(shader, gl.COMPILE_STATUS)){
            throw "Shader compile failed with: " + gl.getShaderInfoLog(shader);
          }
          return shader;
        }

        function getAttribLocation(program, name) {
          var attributeLocation = gl.getAttribLocation(program, name);
          if (attributeLocation === -1) {
            throw 'Cannot find attribute ' + name + '.';
          }
          return attributeLocation;
        }

        function getUniformLocation(program, name) {
          var attributeLocation = gl.getUniformLocation(program, name);
          if (attributeLocation === -1) {
            throw 'Cannot find uniform ' + name + '.';
          }
          return attributeLocation;
        }

        var vertexShader = compileShader(vertexSource, gl.VERTEX_SHADER);
        var fragmentShader = compileShader(fragmentSource, gl.FRAGMENT_SHADER);

        var program = gl.createProgram();
        gl.attachShader(program, vertexShader);
        gl.attachShader(program, fragmentShader);
        gl.linkProgram(program);

        gl.useProgram(program);

        var vertexData = new Float32Array([
          -1.0,  1.0,
          -1.0, -1.0,
           1.0,  1.0,
           1.0, -1.0,
        ]);

        var vertexDataBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexDataBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW);

        var positionHandle = getAttribLocation(program, 'position');

        gl.enableVertexAttribArray(positionHandle);
        gl.vertexAttribPointer(positionHandle,
          2,
          gl.FLOAT,
          false,
          2 * 4,
          0
          );

        var timeHandle = getUniformLocation(program, 'time');
        var widthHandle = getUniformLocation(program, 'width');
        var heightHandle = getUniformLocation(program, 'height');

        gl.uniform1f(widthHandle, window.innerWidth);
        gl.uniform1f(heightHandle, window.innerHeight);

        var lastFrame = Date.now();
        var thisFrame;

        function draw(){
            thisFrame = Date.now();
            time += (thisFrame - lastFrame)/3000;    
            lastFrame = thisFrame;

            gl.uniform1f(timeHandle, time);
            gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

            requestAnimationFrame(draw);
        }

        draw();
    </script>
</body>
</html>
