Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0"> | |
| <title>Xenesis - Forgot Password</title> | |
| <link rel="stylesheet" href="./static/tailwind.css"> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"> | |
| <style> | |
| .form { | |
| background: radial-gradient(at top left, #211e60 1%, #240a34 50%); | |
| box-shadow: 0 0 100px 0 rgba(0, 0, 0, 0.8); | |
| } | |
| @media screen and (max-width: 376px) { | |
| .form-header-text { | |
| font-size: 1.2rem ; | |
| line-height: 1.4 ; | |
| } | |
| } | |
| @media screen and (max-width: 368px) { | |
| .form-header-text { | |
| width: 100% ; | |
| margin-left: 0 ; | |
| font-size: 1.4rem ; | |
| } | |
| } | |
| @media screen and (max-width: 333px) { | |
| .form-header-text { | |
| font-size: 1.1rem ; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Main --> | |
| <section class="relative flex items-center justify-center w-full h-full min-h-[100vh] overflow-y-hidden"> | |
| <div class="absolute top-0 left-0 w-screen h-[calc((797/1463)*100vw)] h-full min-h-[100vh]"> | |
| <canvas id="canvas" class="h-full w-full object-center block"></canvas> | |
| </div> | |
| <div class="flex items-center justify-center max-w-[500px] w-[90%] h-full"> | |
| <form action="" method="post" class="form w-full h-full md:px-12 sm:px-10 px-8 lg:py-12 sm:py-11 py-10 backdrop-blur z-10 rounded-xl"> | |
| <h1 class="text-white form-header-text text-center md:text-3xl sm:text-3xl text-xl font-bold uppercase text-transparent bg-clip-text bg-gradient-to-tr from-orange-500 to-yellow-300 mb-10 flex justify-center items-center gap-4"><img src="./static/ldrp.png" alt="" class="w-[50px] h-[50px]">Forgot Password ?</h1> | |
| <div class='w-full flex flex-col items-center md:gap-4 gap-0 w-full'> | |
| <div class='flex group relative w-full justify-center font-semibold'> | |
| <input type="email" id='email' spellCheck='false' class='peer bg-transparent w-full pr-3 pl-1 py-2 transition-all duration-300 outline-none text-white border-b-[1px] border-orange-300 | |
| invalid:border-pink-300 invalid:text-red-400 focus:invalid:border-pink-300' placeholder=' ' | |
| tabIndex="1" /> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye absolute right-2 bottom-2 text-white hidden" id="eyeOpen" viewBox="0 0 16 16" onclick="togglEye()"> | |
| <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/> | |
| <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/> | |
| </svg> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye-slash absolute right-2 bottom-2 text-white" viewBox="0 0 16 16" id="eyeClosed" onclick="togglEye()"> | |
| <path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z"/> | |
| <path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z"/> | |
| <path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z"/> | |
| </svg> | |
| <label for='email' | |
| class='absolute left-0 -top-4 text-orange-300 text-sm transition-all duration-300 | |
| peer-focus:text-sm peer-focus:-top-4 peer-invalid:text-red-400 | |
| peer-placeholder-shown:top-2 peer-placeholder-shown:text-base peer-placeholder-shown:text-white'>Email</label> | |
| </div> | |
| <input type="submit" value="Get OTP" tabIndex="2" | |
| class='w-fit bg-gradient-to-tr from-orange-500 to-yellow-300 outline-none mt-5 xl:px-16 lg:px-12 sm:px-10 px-9 py-1.5 text-[#f0e2ea] xl:text-lg lg:text-md font-semibold cursor-pointer transition-all duration-200 focus:-translate-y-1 hover:ring hover:ring-yellow-100 rounded-md' /> | |
| </div> | |
| </form> | |
| </div> | |
| <!-- Link to Home Div --> | |
| <a href="index.html" class="absolute top-5 left-5 flex flex-col items-center cursor-pointer hover:scale-[1.15] z-30 transition-all duration-300"> | |
| <i class="bi bi-house-door text-xl text-white bg-[#240a34] px-3 py-2 rounded-full hover:shadow-white hover:shadow-2xl"></i> | |
| <p class="mt-1 text-white bg-[#240a34] rounded-md px-2 hidden md:block">Home</p> | |
| </a> | |
| </section> | |
| <!-- Tailwind Library --> | |
| <script src="./static/tailwind.js"></script> | |
| <!-- vertex shader --> | |
| <script id="vs" type="f"> | |
| attribute vec2 position; | |
| attribute vec2 texcoord; | |
| uniform mat3 u_matrix; | |
| varying vec2 v_texcoord; | |
| void main() { | |
| gl_Position = vec4(u_matrix * vec3(position, 1), 1); | |
| v_texcoord = texcoord; | |
| } | |
| </script> | |
| <!-- fragment shader --> | |
| <script id="fs" type="f"> | |
| precision mediump float; | |
| uniform vec2 u_mouse; | |
| uniform sampler2D u_originalImage; | |
| uniform sampler2D u_mapImage; | |
| varying vec2 v_texcoord; | |
| void main() { | |
| vec4 depthDistortion = texture2D(u_mapImage, v_texcoord); | |
| float parallaxMult = depthDistortion.r; | |
| vec2 parallax = (u_mouse) * parallaxMult; | |
| vec4 original = texture2D(u_originalImage, (v_texcoord + parallax)); | |
| gl_FragColor = original; | |
| } | |
| </script> | |
| <!-- partial --> | |
| <script src='https://cdn.rawgit.com/greggman/twgl.js/master/dist/4.x/twgl-full.min.js'></script> | |
| <script src='https://webglfundamentals.org/webgl/resources/m3.js'></script> | |
| <!-- Parallax Effect --> | |
| <script> | |
| function main(id,sourceImage,depthMap) { | |
| // Get A WebGL context | |
| /** @type {HTMLCanvasElement} */ | |
| const canvas = document.getElementById(id); | |
| const gl = canvas.getContext("webgl"); | |
| if (!gl) { | |
| return; | |
| } | |
| let originalImage = { width: 0, height: 0 }; // replaced after loading | |
| const originalTexture = twgl.createTexture( | |
| gl, | |
| { | |
| src: sourceImage, | |
| crossOrigin: "", | |
| }, | |
| (err, texture, source) => { | |
| originalImage = source; | |
| } | |
| ); | |
| const mapTexture = twgl.createTexture(gl, { | |
| src: depthMap, | |
| crossOrigin: "", | |
| }); | |
| // compile shaders, link program, lookup location | |
| const programInfo = twgl.createProgramInfo(gl, ["vs", "fs"]); | |
| // calls gl.createBuffer, gl.bindBuffer, gl.bufferData for a quad | |
| const bufferInfo = twgl.primitives.createXYQuadBufferInfo(gl); | |
| const mouse = [0, 0]; | |
| document.addEventListener("mousemove", (event) => { | |
| mouse[0] = ((event.clientX / gl.canvas.clientWidth) * 2 - 1) * -0.02; | |
| mouse[1] = ((event.clientY / gl.canvas.clientHeight) * 2 - 1) * -0.02; | |
| }); | |
| document.addEventListener("touchmove", (event) => { | |
| mouse[0] = ((event.touches[0].clientX / gl.canvas.clientWidth) * 2 - 1) * -0.02; | |
| mouse[1] = ((event.touches[0].clientY / gl.canvas.clientHeight) * 2 - 1) * -0.02; | |
| }); | |
| document.addEventListener("touchend", (event) => { | |
| mouse[0] = 0; | |
| mouse[1] = 0; | |
| }); | |
| var nMouse = [0, 0]; | |
| var oMouse = [0, 0]; | |
| requestAnimationFrame(render); | |
| function render() { | |
| twgl.resizeCanvasToDisplaySize(gl.canvas); | |
| gl.viewport(0, 0, gl.canvas.width, gl.canvas.height); | |
| gl.clearColor(0, 0, 0, 0); | |
| gl.clear(gl.COLOR_BUFFER_BIT); | |
| gl.useProgram(programInfo.program); | |
| // calls gl.bindBuffer, gl.enableVertexAttribArray, gl.vertexAttribPointer | |
| twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo); | |
| const canvasAspect = gl.canvas.clientWidth / gl.canvas.clientHeight; | |
| const imageAspect = originalImage.width / originalImage.height; | |
| const mat = m3.scaling(imageAspect/canvasAspect , -1); | |
| nMouse[0] += (mouse[0] - nMouse[0]) * 0.05; | |
| nMouse[1] += (mouse[1] - nMouse[1]) * 0.05; | |
| // calls gl.activeTexture, gl.bindTexture, gl.uniformXXX | |
| twgl.setUniforms(programInfo, { | |
| u_matrix: mat, | |
| u_originalImage: originalTexture, | |
| u_mapImage: mapTexture, | |
| u_mouse: nMouse, | |
| }); | |
| // calls gl.drawArrays or gl.drawElements | |
| twgl.drawBufferInfo(gl, bufferInfo); | |
| requestAnimationFrame(render); | |
| } | |
| } | |
| main("canvas","./static/register/register-3.png","./static/register/register-depth-map-3.jpeg"); | |
| </script> | |
| <!-- Eye button script for password --> | |
| <script> | |
| let eyeOpen = document.getElementById('eyeOpen') | |
| let eyeClosed = document.getElementById('eyeClosed') | |
| let inputPassword = document.getElementById('password') | |
| function togglEye() { | |
| if(inputPassword.type === "text") { | |
| inputPassword.type = "password" | |
| eyeOpen.classList.toggle('hidden') | |
| eyeClosed.classList.toggle('hidden') | |
| } | |
| else { | |
| inputPassword.type = "text" | |
| eyeOpen.classList.toggle('hidden') | |
| eyeClosed.classList.toggle('hidden') | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |