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"> | |
| <title>Xenesis - Account Setup</title> | |
| <link rel="stylesheet" href="/static/tailwind.css"> | |
| <link rel="stylesheet" href="/static/css/style.css"> | |
| <link rel="icon" type="image/png" href="/static/logoCus.png" /> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/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: 382px) { | |
| .form-header-text { | |
| font-size: 1rem ; | |
| line-height: 1.4 ; | |
| gap: 9px ; | |
| } | |
| .form-header-text img { | |
| width: 50px; | |
| height: 50px; | |
| } | |
| } | |
| .custom-file-input::-webkit-file-upload-button { visibility: hidden; } | |
| datalist option:hover, datalist option:focus { | |
| color: #fff; | |
| background-color: #036; | |
| outline: 0 none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Main --> | |
| <section class="relative flex items-center justify-center w-full h-full min-h-[100vh] md:py-10 py-12 overflow-y-scroll"> | |
| <div class="absolute top-0 left-0 w-screen md: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 lg:justify-end justify-center w-[80%] h-full"> | |
| <form action="" method="post" class="form max-w-[500px] w-full lg:w-[90%] h-full md:px-10 sm:px-7 px-8 lg:py-12 sm:py-8 py-10 backdrop-blur z-10 rounded-xl"> | |
| {%csrf_token%} | |
| <h1 class="text-white form-header-text text-center md:text-3xl sm:text-2xl 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-3"><img src="/static/logoCus.png" alt="" class="sm:w-[70px] sm:h-[70px] w-[55px] h-[55px] shadow-white">Enter Personal Details</h1> | |
| <div class='w-full flex flex-col items-center gap-8 w-full mb-2'> | |
| <div class='flex group relative w-full justify-center -mb-2'> | |
| <img src="https://storage.fleek.zone/4fd5a424-208b-4a62-a92c-49af4b184f6a-bucket/Avatars/0001.png" alt="" class="sm:w-32 w-24 sm:h-32 h-24 bg-slate-500/50 rounded-full cursor-pointer" id="profile-img" onclick="changeProfileImage()"> | |
| <input type="text" id="profilePic" name="profilePic" value="0001" hidden> | |
| </div> | |
| <div class='flex group relative w-full justify-center font-semibold'> | |
| <input type="text" id='name' name='firstname' 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" /> | |
| <label for='name' | |
| 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'>Name</label> | |
| </div> | |
| <div class='flex group relative w-full justify-center'> | |
| <input type="text" id='mobile' name='mobileNo' 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=' ' | |
| minLength="10" maxLength="10" tabIndex="2" onkeypress="if ( isNaN(this.value + String.fromCharCode(event.keyCode) )) return false;" /> | |
| <label for='mobile' | |
| 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'>Mobile</label> | |
| </div> | |
| <!-- Datalist For College --> | |
| <div class='flex group relative w-full justify-center -mb-4'> | |
| <div class="peer relative w-full"> | |
| <input list="college-name" size="4" name="college" id='college' autocomplete="off" 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' placeholder="Select Your College" /> | |
| <datalist id="college-name" class="absolute top-9 left-0 h-0 w-fit opacity-0 peer-focus:!h-28 overflow-y-scroll peer-focus:opacity-100 transition-all duration-300"> | |
| <option value="LDRP ITR" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">LDRP ITR</option> | |
| <option value="VSITR" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">VSITR</option> | |
| <option value="Ahmedabad institute of Technology" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">Ahmedabad institute of Technology</option> | |
| <option value="Amiraj" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">Amiraj</option> | |
| <option value="Central Institute" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">Central Institute</option> | |
| <option value="LD" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">LD</option> | |
| <option value="LJ" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">LJ</option> | |
| <option value="Narnarayan Shastri" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">Narnarayan Shastri</option> | |
| <option value="SAL" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">SAL</option> | |
| <option value="Rai" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">Rai</option> | |
| <option value="Silver Oak" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">Silver Oak </option> | |
| <option value="VGEC" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">VGEC</option> | |
| <option value="IIT Ram" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">IIT Ram</option> | |
| <option value="Nirma" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">Nirma</option> | |
| <option value="Indus" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">Indus</option> | |
| <option value="Khyati" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">Khyati</option> | |
| <option value="Hasmukh Goswami" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">Hasmukh Goswami</option> | |
| <option value="Universal Institute" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">Universal Institute</option> | |
| <option value="Ahmedabad university" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">Ahmedabad university</option> | |
| <option value="Apollo" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">Apollo</option> | |
| <option value="Adani" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">Adani</option> | |
| <option value="Asia Pacific" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">Asia Pacific</option> | |
| <option value="Anant Institute" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">Anant Institute</option> | |
| <option value="K.B Raval" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200"> K.B Raval</option> | |
| <option value="RC Technical" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">RC Technical</option> | |
| <option value="Shri NM Gopani" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">Shri NM Gopani</option> | |
| <option value="Government Polytechnic for Girls" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">Government Polytechnic for Girls</option> | |
| <option value="GLS" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">GLS</option> | |
| <option value="RB" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">RB</option> | |
| <option value="Amrut Mody" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">Amrut Mody</option> | |
| <option value="Somlalit" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">Somlalit</option> | |
| <option value="GEC Gandhinagar" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">GEC Gandhinagar</option> | |
| <option value="GIT" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">GIT</option> | |
| <option value="Shankarsingh Vaghela" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">Shankarsingh Vaghela</option> | |
| <option value="PDPU" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">PDPU</option> | |
| <option value="DAIICT" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">DAIICT</option> | |
| <option value="Venus" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">Venus</option> | |
| <option value="Saraswati" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">Saraswati</option> | |
| <option value="Arihant" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">Arihant</option> | |
| <option value="FD Institute" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">FD Institute</option> | |
| <option value="Jain Institute" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">Jain Institute</option> | |
| <option value="Excel" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">Excel</option> | |
| <option value="RRU" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">RRU</option> | |
| <option value="Shri Jairambhai Patel" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">Shri Jairambhai Patel</option> | |
| <option value="Chaudhary" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">Chaudhary</option> | |
| <option value="Old GNLU" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">Old GNLU</option> | |
| <option value="S.V.KSV" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">S.V.KSV</option> | |
| <option value="Grow More" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">Grow More</option> | |
| <option value="Samarth" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">Samarth</option> | |
| <option value="Sabar" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">Sabar</option> | |
| <option value="Alpha" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">Alpha</option> | |
| <option value="KIT" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">KIT</option> | |
| <option value="Swami Narayan" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">Swami Narayan</option> | |
| <option value="Ganpat" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">Ganpat</option> | |
| <option value="GPERI" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">GPERI</option> | |
| <option value="Satsangi" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">Satsangi</option> | |
| <option value="Merchant" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">Merchant</option> | |
| <option value="SK Patel" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">SK Patel</option> | |
| <option value="Tatva " class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">Tatva</option> | |
| <option value="GEC Palanpur" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">GEC Palanpur</option> | |
| <option value="GEC Patan" class="bg-gray-600 first-of-type:rounded-t last-of-type:rounded-b text-orange-300 text-sm px-3 py-2 cursor-pointer transition-colors duration-200">GEC Patan</option> | |
| </datalist> | |
| </div> | |
| <label for='college' | |
| 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'>College Name</label> | |
| </div> | |
| <input type="submit" value="Register" tabIndex="4" | |
| class='w-fit bg-gradient-to-tr from-orange-500 to-yellow-300 outline-none sm:mt-3 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> | |
| </section> | |
| <!-- Tailwind Library --> | |
| <script src="/static/tailwind.js"></script> | |
| <!-- <script src="https://cdn.jsdelivr.net/npm/datalist-css/dist/datalist-css.min.js" defer></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> | |
| <!-- Custom Script for this Page --> | |
| <script> | |
| function changeProfileImage() { | |
| let profileImage = document.getElementById('profile-img') | |
| let imgCount = "0001" | |
| imgCount = parseInt(imgCount) + 1 | |
| if(imgCount < 10) | |
| imgCount = "000" + imgCount | |
| else if(imgCount > 9 || imgCount < 100) | |
| imgCount = "00" + imgCount | |
| else | |
| imgCount = "0" + imgCount | |
| profileImage.src = "/static/avatars/" + imgCount + ".png" | |
| document.getElementById("profilePic").value = imgCount | |
| } | |
| (() => { | |
| let t; | |
| function e(t) { | |
| t && t.shown && (t.style.display = 'none', t.shown = !1) | |
| } | |
| function n(t) { | |
| const e = c(t); | |
| if (!e || !e.datalist) return; | |
| const n = e.value.trim().toLowerCase(); | |
| Array.from(e.datalist.getElementsByTagName('option')).forEach((t => { | |
| t.setAttribute('tabindex', 0), t.style.display = !n || t.value.toLowerCase().includes(n) ? 'block' : 'none' | |
| })) | |
| } | |
| function i(t) { | |
| const n = c(t); | |
| if (n && n.datalist) switch (t.keyCode) { | |
| case 40: { | |
| let t = n.datalist.firstElementChild; | |
| t.offsetHeight || (t = a(t, 1)), t && t.focus(); | |
| break | |
| } | |
| case 9: | |
| e(n.datalist); | |
| break; | |
| case 13: | |
| case 32: | |
| l(t) | |
| } | |
| } | |
| document.body.addEventListener('focusin', (function (s) { | |
| const a = c(s); | |
| if (!a) return; | |
| if (a.list) { | |
| const t = a.list; | |
| a.datalist = t, a.removeAttribute('list'), t.input = a, t.setAttribute('tabindex', -1), a.addEventListener('input', n), a.addEventListener('keydown', i), t.addEventListener('keydown', o), t.addEventListener('click', l) | |
| } | |
| const r = a.datalist; | |
| r && !r.shown && (e(t), r.shown = !0, n(s), r.style.width = a.offsetWidth + 'px', r.style.left = a.offsetLeft + 'px', r.style.display = 'block', t = r) | |
| })); | |
| const s = { | |
| 33: -12, | |
| 34: 12, | |
| 38: -1, | |
| 40: 1 | |
| }; | |
| function o(t) { | |
| const n = c(t); | |
| if (!n) return; | |
| const i = t.keyCode, | |
| o = s[i], | |
| r = n.parentElement; | |
| if (o) { | |
| let e = a(n, o); | |
| e && e.focus(), t.preventDefault() | |
| } else 9 === i || 13 === i || 32 === i ? l(t) : 8 === i ? r.input.focus() : 27 === i && e(r) | |
| } | |
| function a(t, e) { | |
| let n = t; | |
| do { | |
| e < 0 ? n = n.previousElementSibling : e > 0 && (n = n.nextElementSibling), n && n.offsetHeight && (t = n, e -= Math.sign(e)) | |
| } while (n && e); | |
| return t | |
| } | |
| function l(t) { | |
| const n = c(t), | |
| i = n && n.parentElement; | |
| i && i.input && (i.input.value = n && n.value || '', e(i)) | |
| } | |
| function c(t) { | |
| return t && t.target | |
| } | |
| })(); | |
| </script> | |
| </body> | |
| </html> |