Skip to content

Commit

Permalink
Merge pull request #70 from VidhanThakur09/main
Browse files Browse the repository at this point in the history 
improve scrollbar and preloader
  • Loading branch information
@vansh-codes
vansh-codes authored Oct 10, 2024
2 parents f522a40 + 5f740d0 commit 1cfae9a
Show file tree
Hide file tree
Showing 8 changed files with 522 additions and 1 deletion.
49 changes: 49 additions & 0 deletions ContactUs.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,57 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us - Chaos</title>
<link rel="stylesheet" href="preloaderStyle.css">
<link rel="stylesheet" href="css/contactus.css">
</head>
<body>
<!-- preloader -->
<div class="container">
<div class="preloader">
<div class="preloader__wheel-wrapper">
<div class="preloader__wheel"><span class="preloader__content">l</span>
<div class="preloader__inner-wheel"></div>
<div class="preloader__second-inner-whell"></div>
</div>
</div>
<div class="preloader__wheel-wrapper">
<div class="preloader__wheel"><span class="preloader__content">o</span>
<div class="preloader__inner-wheel"></div>
<div class="preloader__second-inner-whell"></div>
</div>
</div>
<div class="preloader__wheel-wrapper">
<div class="preloader__wheel"><span class="preloader__content">a</span>
<div class="preloader__inner-wheel"></div>
<div class="preloader__second-inner-whell"></div>
</div>
</div>
<div class="preloader__wheel-wrapper">
<div class="preloader__wheel"><span class="preloader__content">d</span>
<div class="preloader__inner-wheel"></div>
<div class="preloader__second-inner-whell"></div>
</div>
</div>
<div class="preloader__wheel-wrapper">
<div class="preloader__wheel"><span class="preloader__content">i</span>
<div class="preloader__inner-wheel"></div>
<div class="preloader__second-inner-whell"></div>
</div>
</div>
<div class="preloader__wheel-wrapper">
<div class="preloader__wheel"><span class="preloader__content">n</span>
<div class="preloader__inner-wheel"></div>
<div class="preloader__second-inner-whell"></div>
</div>
</div>
<div class="preloader__wheel-wrapper">
<div class="preloader__wheel"><span class="preloader__content">g</span>
<div class="preloader__inner-wheel"></div>
<div class="preloader__second-inner-whell"></div>
</div>
</div>
</div>
</div>
<div class="contact-form-container">
<h1>Contact Us</h1>
<form id="contactForm">
Expand All @@ -28,6 +76,7 @@ <h1>Contact Us</h1>
</form>
<div id="popup" class="popup"></div>
</div>
<script src="preloader.js"></script>
<script src="js/script.js"></script>
<script src="js/night_time.js"></script>
</body>
Expand Down
49 changes: 49 additions & 0 deletions Timeline.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chaotic Timeline</title>
<link rel="stylesheet" href="preloaderStyle.css">
<style>
* {
margin: 0;
Expand Down Expand Up @@ -134,6 +135,53 @@
</head>

<body>
<!-- preloader -->
<div class="container">
<div class="preloader">
<div class="preloader__wheel-wrapper">
<div class="preloader__wheel"><span class="preloader__content">l</span>
<div class="preloader__inner-wheel"></div>
<div class="preloader__second-inner-whell"></div>
</div>
</div>
<div class="preloader__wheel-wrapper">
<div class="preloader__wheel"><span class="preloader__content">o</span>
<div class="preloader__inner-wheel"></div>
<div class="preloader__second-inner-whell"></div>
</div>
</div>
<div class="preloader__wheel-wrapper">
<div class="preloader__wheel"><span class="preloader__content">a</span>
<div class="preloader__inner-wheel"></div>
<div class="preloader__second-inner-whell"></div>
</div>
</div>
<div class="preloader__wheel-wrapper">
<div class="preloader__wheel"><span class="preloader__content">d</span>
<div class="preloader__inner-wheel"></div>
<div class="preloader__second-inner-whell"></div>
</div>
</div>
<div class="preloader__wheel-wrapper">
<div class="preloader__wheel"><span class="preloader__content">i</span>
<div class="preloader__inner-wheel"></div>
<div class="preloader__second-inner-whell"></div>
</div>
</div>
<div class="preloader__wheel-wrapper">
<div class="preloader__wheel"><span class="preloader__content">n</span>
<div class="preloader__inner-wheel"></div>
<div class="preloader__second-inner-whell"></div>
</div>
</div>
<div class="preloader__wheel-wrapper">
<div class="preloader__wheel"><span class="preloader__content">g</span>
<div class="preloader__inner-wheel"></div>
<div class="preloader__second-inner-whell"></div>
</div>
</div>
</div>
</div>
<div class="timeline-container">
<h1>Chaotic Timeline of Historical Events</h1>
<div class="timeline">
Expand Down Expand Up @@ -163,6 +211,7 @@ <h1>Chaotic Timeline of Historical Events</h1>
Pandemic</div>
</div>
</div>
<script src="preloader.js"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
const events = document.querySelectorAll(".even");
Expand Down
49 changes: 49 additions & 0 deletions hypnotic.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hypnotic Chaos</title>
<link rel="stylesheet" href="preloaderStyle.css">
<style>
.parent {
width: 100vw;
Expand Down Expand Up @@ -52,11 +53,59 @@
</head>

<body class="parent">
<!-- preloader -->
<div class="container">
<div class="preloader">
<div class="preloader__wheel-wrapper">
<div class="preloader__wheel"><span class="preloader__content">l</span>
<div class="preloader__inner-wheel"></div>
<div class="preloader__second-inner-whell"></div>
</div>
</div>
<div class="preloader__wheel-wrapper">
<div class="preloader__wheel"><span class="preloader__content">o</span>
<div class="preloader__inner-wheel"></div>
<div class="preloader__second-inner-whell"></div>
</div>
</div>
<div class="preloader__wheel-wrapper">
<div class="preloader__wheel"><span class="preloader__content">a</span>
<div class="preloader__inner-wheel"></div>
<div class="preloader__second-inner-whell"></div>
</div>
</div>
<div class="preloader__wheel-wrapper">
<div class="preloader__wheel"><span class="preloader__content">d</span>
<div class="preloader__inner-wheel"></div>
<div class="preloader__second-inner-whell"></div>
</div>
</div>
<div class="preloader__wheel-wrapper">
<div class="preloader__wheel"><span class="preloader__content">i</span>
<div class="preloader__inner-wheel"></div>
<div class="preloader__second-inner-whell"></div>
</div>
</div>
<div class="preloader__wheel-wrapper">
<div class="preloader__wheel"><span class="preloader__content">n</span>
<div class="preloader__inner-wheel"></div>
<div class="preloader__second-inner-whell"></div>
</div>
</div>
<div class="preloader__wheel-wrapper">
<div class="preloader__wheel"><span class="preloader__content">g</span>
<div class="preloader__inner-wheel"></div>
<div class="preloader__second-inner-whell"></div>
</div>
</div>
</div>
</div>
<div class="content">
<div class="chaotic-text top-text">Welcome to Chaos! Where sanity is overrated.</div>
<canvas id="myCanvas" width="300" height="300"></canvas>
<div class="chaotic-text bottom-text">Relax? Sure, if you like chaos!</div>
</div>
<script src="preloader.js"></script>
<script>
window.onload = function() {
var STEPS = 1;
Expand Down
50 changes: 49 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,61 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ChaosWeb - The Disorderly UI Experiment</title>
<link rel="stylesheet" href="preloaderStyle.css">
<link rel="stylesheet" href="css/style.css">

<link rel="shortcut icon" href="./assets/logo/favicon.ico" type="image/x-icon">

</head>
<body>
<!--ALL SVGs taken from https://undraw.co/-->
<!-- preloader -->
<div class="container">
<div class="preloader">
<div class="preloader__wheel-wrapper">
<div class="preloader__wheel"><span class="preloader__content">l</span>
<div class="preloader__inner-wheel"></div>
<div class="preloader__second-inner-whell"></div>
</div>
</div>
<div class="preloader__wheel-wrapper">
<div class="preloader__wheel"><span class="preloader__content">o</span>
<div class="preloader__inner-wheel"></div>
<div class="preloader__second-inner-whell"></div>
</div>
</div>
<div class="preloader__wheel-wrapper">
<div class="preloader__wheel"><span class="preloader__content">a</span>
<div class="preloader__inner-wheel"></div>
<div class="preloader__second-inner-whell"></div>
</div>
</div>
<div class="preloader__wheel-wrapper">
<div class="preloader__wheel"><span class="preloader__content">d</span>
<div class="preloader__inner-wheel"></div>
<div class="preloader__second-inner-whell"></div>
</div>
</div>
<div class="preloader__wheel-wrapper">
<div class="preloader__wheel"><span class="preloader__content">i</span>
<div class="preloader__inner-wheel"></div>
<div class="preloader__second-inner-whell"></div>
</div>
</div>
<div class="preloader__wheel-wrapper">
<div class="preloader__wheel"><span class="preloader__content">n</span>
<div class="preloader__inner-wheel"></div>
<div class="preloader__second-inner-whell"></div>
</div>
</div>
<div class="preloader__wheel-wrapper">
<div class="preloader__wheel"><span class="preloader__content">g</span>
<div class="preloader__inner-wheel"></div>
<div class="preloader__second-inner-whell"></div>
</div>
</div>
</div>
</div>
<nav class="nav">
<img src="./assets/logo/ChaosWeb.svg" alt="ChaosWeb-Logo" id="chaos-logo">
<h1 id="chaos-header">ChaosWeb - The Disorderly UI Experiment</h1>
Expand Down Expand Up @@ -49,7 +97,7 @@ <h1 id="chaos-header">ChaosWeb - The Disorderly UI Experiment</h1>
<span>Hypnotic Chaos</span>
</div>
</div>

<script src="preloader.js"></script>
<script src="js/script.js"></script>
<script src="js/night_time.js" defer></script>
</body>
Expand Down
49 changes: 49 additions & 0 deletions night_time.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,64 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ChaosWeb - The Disorderly UI Experiment</title>
<link rel="stylesheet" href="preloaderStyle.css">
<link rel="stylesheet" href="style1.css">

</head>
<body>
<!-- preloader -->
<div class="container">
<div class="preloader">
<div class="preloader__wheel-wrapper">
<div class="preloader__wheel"><span class="preloader__content">l</span>
<div class="preloader__inner-wheel"></div>
<div class="preloader__second-inner-whell"></div>
</div>
</div>
<div class="preloader__wheel-wrapper">
<div class="preloader__wheel"><span class="preloader__content">o</span>
<div class="preloader__inner-wheel"></div>
<div class="preloader__second-inner-whell"></div>
</div>
</div>
<div class="preloader__wheel-wrapper">
<div class="preloader__wheel"><span class="preloader__content">a</span>
<div class="preloader__inner-wheel"></div>
<div class="preloader__second-inner-whell"></div>
</div>
</div>
<div class="preloader__wheel-wrapper">
<div class="preloader__wheel"><span class="preloader__content">d</span>
<div class="preloader__inner-wheel"></div>
<div class="preloader__second-inner-whell"></div>
</div>
</div>
<div class="preloader__wheel-wrapper">
<div class="preloader__wheel"><span class="preloader__content">i</span>
<div class="preloader__inner-wheel"></div>
<div class="preloader__second-inner-whell"></div>
</div>
</div>
<div class="preloader__wheel-wrapper">
<div class="preloader__wheel"><span class="preloader__content">n</span>
<div class="preloader__inner-wheel"></div>
<div class="preloader__second-inner-whell"></div>
</div>
</div>
<div class="preloader__wheel-wrapper">
<div class="preloader__wheel"><span class="preloader__content">g</span>
<div class="preloader__inner-wheel"></div>
<div class="preloader__second-inner-whell"></div>
</div>
</div>
</div>
</div>
<div class="moon1">
<img src="assets/moon1.png" width="650px"></img>
</div>
<div class="text">Too late to reach us.</div>
<div class="text">Come back during daylight.</div>
</body>
<script src="preloader.js"></script>
<script src="js/night_time.js"></script>
</html>
6 changes: 6 additions & 0 deletions preloader.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
// preloader styling

let preloader = document.querySelector(".container");
window.addEventListener("load",function(e){
preloader.style.display = "none";
});
Loading

0 comments on commit 1cfae9a

Please sign in to comment.