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"> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"> | |
| <script src="./static/tailwind.js"></script> | |
| <link rel="stylesheet" href="./static/tailwind.css"> | |
| <title>Xenesis - About Us</title> | |
| <style> | |
| * { | |
| scroll-behavior: smooth; | |
| } | |
| .eventName { | |
| text-shadow: -1px 1px 0 #000, | |
| 1px 1px 0 #000, | |
| 1px -1px 0 #000, | |
| -1px -1px 0 #000; | |
| } | |
| .customScrollbar::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .radial-gradient-container { | |
| background: radial-gradient(at top left, #211e60 1%, #240a34 50%); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Navbar --> | |
| <nav class="flex items-center justify-between text-white fixed w-full top-0 py-[calc(3vh)] px-[calc(3vh)] z-50 transition-all duration-300" id="navbar"> | |
| <div> | |
| <h1 class="text-[calc(3vh)]">Logo</h1> | |
| </div> | |
| <div class="relative flex items-center justify-center gap-4 lg:hidden"> | |
| {% if isUser == True %} | |
| <!-- Profile Image --> | |
| <img src="/static/avatars/{{profilePic}}.png" alt="" class="w-[45px] h-[45px] rounded-full object-cover bg-slate-300" onclick="toggleProfileDropdown()" /> | |
| <!-- Profile --> | |
| <div class="fixed right-10 top-6 z-[999] overflow-visible flex items-center justify-center gap-4 px-[calc(2vh)]"> | |
| <div class="absolute bg-slate-600 top-16 right-0 w-full min-w-[200px] rounded-md z-[999] h-0 overflow-hidden transition-all duration-300" id="profile-dropdown-mobile"> | |
| <p class="w-full px-4 text-white"><i class="bi bi-person mr-2.5"></i>{{userName}}</p> | |
| <hr class="w-full my-2" /> | |
| <a href="/logout" class=""> | |
| <p class="w-full px-4 text-white truncate capitalize"><i class="bi bi-box-arrow-right mr-2.5"></i>Logout</p> | |
| </a> | |
| </div> | |
| </div> | |
| {%endif%} | |
| <!-- Menu Toggle Button --> | |
| <button class="text-2xl block lg:hidden !outline-none" onclick="toggleMobileMenu()"><i class="bi bi-list"></i></button> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div class="absolute top-0 left-0 flex flex-col gap-5 items-center justify-center w-screen h-screen z-50 bg-slate-900 bg-opacity-95 hidden" id="mobile-menu"> | |
| <button class="absolute top-5 right-5 !outline-none" onclick="toggleMobileMenu()"><i class="bi bi-x-lg"></i></button> | |
| <a href="/" class="text-2xl">Home</a> | |
| <a href="/events" class="text-2xl">Events</a> | |
| <a href="#" class="text-2xl">Event Confirm</a> | |
| <a href="/aboutus" class="text-2xl">About Us</a> | |
| <a href="/login" class="text-2xl">Login</a> | |
| <a href="/register" class="text-2xl">Register</a> | |
| </div> | |
| <!-- Tablet | Laptop Menu --> | |
| <ul class="flex items-center hidden lg:flex"> | |
| <li class="px-[calc(2vh)] font-semibold text-[calc(3vh)]"><a href="/">Home</a></li> | |
| <li class="px-[calc(2vh)] font-semibold text-[calc(3vh)]"><a href="/events">Events</a></li> | |
| <li class="px-[calc(2vh)] font-semibold text-[calc(3vh)]"><a href="#">Event Confirm</a></li> | |
| <li class="px-[calc(2vh)] font-semibold text-[calc(3vh)]"><a href="/aboutus">About Us</a></li> | |
| <li class="px-[calc(2vh)] font-semibold text-[calc(3vh)]"><a href="/login">Login</a></li> | |
| <li class="px-[calc(2vh)] font-semibold text-[calc(3vh)]"><a href="/register">Register</a></li> | |
| <div class="px-[calc(2vh)] font-semibold text-[calc(3vh)]"> | |
| <button>Register for Event</button> | |
| </div> | |
| <div class="relative flex items-center justify-center gap-4 px-[calc(2vh)]"> | |
| <img src="./static/event-images/4.jpg" alt="" class=" w-[50px] h-[50px] rounded-full object-cover" onclick="toggleProfileDropdown()"> | |
| <div class="absolute bg-slate-600 bg-opacity-50 top-16 right-0 w-full min-w-[200px] rounded-md border-slate-400 z-50 h-0 overflow-hidden transition-all duration-300" id="profile-dropdown"> | |
| <a href="#" class=""> | |
| <p class="w-full px-4"><i class="bi bi-gear mr-2.5"></i>Profile Settings</p> | |
| </a> | |
| <hr class="my-3 border-b-slate-400"> | |
| <a href="#" class=""> | |
| <p class="w-full px-4"><i class="bi bi-box-arrow-right mr-2.5"></i>Logout</p> | |
| </a> | |
| </div> | |
| </div> | |
| </ul> | |
| </nav> | |
| <!-- Parallax Div --> | |
| <div class="w-full min-h-screen h-full overflow-hidden customScrollbar relative"> | |
| <canvas id="canvas" class="w-screen min-h-screen h-[calc((1024/1536)*100vw)] object-cover absolute top-0 z-0"></canvas> | |
| <div class="absolute top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2 px-[calc(3vh)] text-center z-20"> | |
| <h1 class="text-[calc(12vh)] text-white uppercase font-bold z-20"> | |
| About Us | |
| </h1> | |
| </div> | |
| <div class="w-full h-full bg-[rgba(0,0,0,0.4)] absolute top-0 left-0 z-10"></div> | |
| </div> | |
| <!-- Content Div --> | |
| <section class="w-full bg-[#240A35]"> | |
| <div class="absolute w-full h-full top-0 bg-gradient-to-t from-[#240A35] via-transparent to-transparent z-10"> | |
| </div> | |
| <div class="py-8 px-6"> | |
| <h1 class="text-white text-3xl capitalize font-bold mb-5">Something about us</h1> | |
| <p class="text-white my-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia maxime distinctio, error asperiores voluptatem maiores reprehenderit sint, impedit dolore excepturi sequiLorem ipsum dolor sit amet consectetur adipisicing elit. Quia maxime distinctio, error asperiores voluptatem maiores reprehenderit sint, impedit dolore excepturi sequi, autem aliquid suscipit ducimus rem deserunt quaerat aliquam debitis!</p> | |
| <p class="text-white my-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia maxime distinctio, error asperiores voluptatem maiores reprehenderit sint, impedit dolore excepturi sequi, autem aliquid suscipit ducimus rem deserunt quaerat aliquam debitis!</p> | |
| <p class="text-white my-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia maxime distinctio, error asperiores voluptatem maiores reprehenderit sinLorem ipsum dolor sit amet consectetur adipisicing elit. Quia maxime distinctio, error asperiores voluptatem maiores reprehenderit sinLorem ipsum dolor sit amet consectetur adipisicing elit. Quia maxime distinctio, error asperiores voluptatem maiores reprehenderit sinLorem ipsum dolor sit amet consectetur adipisicing elit. Quia maxime distinctio, error asperiores voluptatem maiores reprehenderit sint, impedit dolore excepturi sequi, autem aliquid suscipit ducimus rem deserunt quaerat aliquam debitis!</p> | |
| <p class="text-white my-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia maxime distinctio, error asperiores voluptatem maiores reprehenderit sint, impedit dolore excepturi sequi, autem aliquid suscipit ducimus rem deserunt quaerat aliquam debitis!</p> | |
| <p class="text-white my-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia maxime distinctio, error asperiores voluptatem maiores reprehenderit sinLorem ipsum dolor sit amet consectetur adipisicing elit. Quia maxime distinctio, error asperiores voluptatem maiores reprehenderit sinLorem ipsum dolor sit amet consectetur adipisicing elit. Quia maxime distinctio, error asperiores voluptatem maiores reprehenderit sinLorem ipsum dolor sit amet consectetur adipisicing elit. Quia maxime distinctio, error asperiores voluptatem maiores reprehenderit sint, impedit dolore excepturi sequi, autem aliquid suscipit ducimus rem deserunt quaerat aliquam debitis!</p> | |
| <p class="text-white my-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia maxime distinctio, error asperiores voluptatem maiores reprehenderit sint, impedit dolore excepturi sequi, autem aliquid suscipit ducimus rem deserunt quaerat aliquam debitis!</p> | |
| </div> | |
| </section> | |
| <script> | |
| function handleLeft() { | |
| let slider = document.getElementById("eventSlider"); | |
| let event = document.getElementById("event"); | |
| slider.scrollLeft += (event.offsetWidth + 20); | |
| } | |
| function handleRight() { | |
| let slider = document.getElementById("eventSlider"); | |
| let event = document.getElementById("event"); | |
| slider.scrollLeft -= (event.offsetWidth + 20); | |
| } | |
| window.addEventListener('scroll', function () { | |
| const header = document.getElementById("navbar"); | |
| header.classList.toggle('backdrop-blur-md', window.scrollY > 0); | |
| }); | |
| // Menu Dropdown Code | |
| let mobileMenu = document.querySelector('#mobile-menu'); | |
| function toggleMobileMenu() { | |
| mobileMenu.classList.toggle('hidden'); | |
| } | |
| // Profile Dropdown Code | |
| let profileDropdownMobile = document.querySelector('#profile-dropdown-mobile'); | |
| let profileDropdown = document.querySelector('#profile-dropdown'); | |
| function toggleProfileDropdown() { | |
| // Dropdown for Mobile | |
| profileDropdownMobile.classList.toggle('h-none') | |
| profileDropdownMobile.classList.toggle('h-auto') | |
| profileDropdownMobile.classList.toggle('border') | |
| profileDropdownMobile.classList.toggle('py-3') | |
| // Dropdown for Laptop - Tablet | |
| profileDropdown.classList.toggle('h-none') | |
| profileDropdown.classList.toggle('h-auto') | |
| profileDropdown.classList.toggle('border') | |
| profileDropdown.classList.toggle('py-3') | |
| } | |
| </script> | |
| <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> | |
| <script> | |
| function main(id, sourceImage, depthMap, parallaxSpeed) { | |
| // 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) * parallaxSpeed; | |
| mouse[1] = ((event.clientY / gl.canvas.clientHeight) * 2 - 1) * parallaxSpeed; | |
| }); | |
| document.addEventListener("touchmove", (event) => { | |
| mouse[0] = ((event.touches[0].clientX / gl.canvas.clientWidth) * 2 - 1) * parallaxSpeed; | |
| mouse[1] = ((event.touches[0].clientY / gl.canvas.clientHeight) * 2 - 1) * parallaxSpeed; | |
| }); | |
| 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/about-us/aboutUsHero.png", "./static/about-us/aboutUsHeroDepthMap3.jpeg", -0.03); | |
| </script> | |
| </body> | |
| </html> |