forked from jfmartinz/ResourceHub
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' of https://github.com/Khushi-Pushkar/ResourceHub
- Loading branch information
Showing
12 changed files
with
988 additions
and
316 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Submodule ResourceHub
added at
270ce7
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,12 +2,15 @@ | |
<html lang="en"> | ||
|
||
<head> | ||
<link rel="stylesheet" href="cursorAnimation.css"> | ||
<script src="https://cdn.jsdelivr.net/npm/[email protected]" defer></script> | ||
<link href="https://fonts.googleapis.com/css2?family=Righteous&display=swap" rel="stylesheet"> | ||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>README Renderer</title> | ||
|
||
<link rel="stylesheet" | ||
href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/4.0.0/github-markdown.min.css"> | ||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/4.0.0/github-markdown.min.css"> | ||
<style> | ||
.markdown-body { | ||
box-sizing: border-box; | ||
|
@@ -16,30 +19,30 @@ | |
margin: 0 auto; | ||
padding: 45px; | ||
} | ||
|
||
nav { | ||
background-color: white !important; | ||
color: black !important; | ||
} | ||
|
||
.dark-mode nav { | ||
background-color: black !important; | ||
color: white !important; | ||
} | ||
|
||
/* Container for aligning items to the right */ | ||
|
||
.right-corner { | ||
display: flex; | ||
align-items: center; | ||
margin-left: auto; | ||
/* Pushes the content to the right */ | ||
} | ||
|
||
/* Dark mode toggle switch styles */ | ||
|
||
.slider { | ||
display: none; | ||
} | ||
|
||
.slider-label { | ||
display: flex; | ||
align-items: center; | ||
|
@@ -53,7 +56,7 @@ | |
position: relative; | ||
transition: background-color 0.5s; | ||
} | ||
|
||
.slider-circle { | ||
width: 10px; | ||
height: 10px; | ||
|
@@ -64,18 +67,18 @@ | |
top: 1px; | ||
left: 2px; | ||
} | ||
|
||
.slider:checked+.slider-label .slider-circle { | ||
transform: translateX(1.3rem); | ||
background: #000000; | ||
/* Sun color */ | ||
} | ||
|
||
.slider:checked+.slider-label { | ||
background: #515151; | ||
/* Dark mode background */ | ||
} | ||
|
||
.slider-circle::before { | ||
position: absolute; | ||
top: 50%; | ||
|
@@ -85,20 +88,19 @@ | |
font-size: 16px; | ||
/* Adjust the font size for the icons */ | ||
} | ||
|
||
.slider:checked+.slider-label .slider-circle::before { | ||
content: '🌙'; | ||
/* Moon icon */ | ||
transform: translate(-50%, -50%); | ||
} | ||
|
||
.slider+.slider-label .slider-circle::before { | ||
content: '☀️'; | ||
/* Sun icon */ | ||
transform: translate(-50%, -50%); | ||
} | ||
|
||
|
||
|
||
#progressBar { | ||
position: fixed; | ||
top: 0; | ||
|
@@ -108,23 +110,22 @@ | |
background-color: #288cff; | ||
z-index: 99; | ||
border-radius: 20px; | ||
|
||
} | ||
|
||
/* Back-to-top */ | ||
|
||
footer { | ||
position: relative; | ||
padding: 50px 0; | ||
} | ||
|
||
#back-to-top-container { | ||
position: fixed; | ||
bottom: 30px; | ||
right: 30px; | ||
cursor: pointer; | ||
z-index: 1000; | ||
} | ||
|
||
.circle1 { | ||
background-color: #fff; | ||
border-radius: 50%; | ||
|
@@ -133,34 +134,41 @@ | |
align-items: center; | ||
transition: background-color 0.3s; | ||
} | ||
|
||
#back-to-top { | ||
width: 40px; | ||
height: 40px; | ||
fill: currentColor; | ||
transition: fill 0.3s; | ||
} | ||
|
||
#back-to-top:hover { | ||
fill: rgb(83, 79, 79); | ||
transform: scale(1.06); | ||
transition: all .2s ease-in-out; | ||
} | ||
|
||
|
||
.home-link { | ||
position: absolute; | ||
top: 25px; | ||
left: 35px; | ||
font-size: 30px; | ||
color: #111210; | ||
text-decoration: none; | ||
} | ||
|
||
.dark-mode .circle1 { | ||
background-color: #000000; | ||
} | ||
|
||
.dark-mode #back-to-top:hover { | ||
fill: rgb(173, 168, 168); | ||
transform: scale(1.06); | ||
transition: all .2s ease-in-out; | ||
} | ||
|
||
/* .dark-mode svg path{ | ||
fill: rgb(255, 255, 255); | ||
} */ | ||
|
||
/* .dark-mode svg path:hover { | ||
fill: rgb(139, 71, 236); | ||
} */ | ||
|
@@ -175,7 +183,7 @@ | |
<!-- Progress Bar --> | ||
<div id="progressBar"></div> | ||
<script> | ||
window.onscroll = function () { | ||
window.onscroll = function() { | ||
var winScroll = document.body.scrollTop || document.documentElement.scrollTop; | ||
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight; | ||
var scrolled = (winScroll / height) * 100; | ||
|
@@ -185,15 +193,14 @@ | |
|
||
<div id="back-to-top-container"> | ||
<div class="circle1"> | ||
<svg id="back-to-top" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" | ||
class="bi bi-arrow-up-circle-fill" viewBox="0 0 16 16"> | ||
<svg id="back-to-top" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-circle-fill" viewBox="0 0 16 16"> | ||
<path | ||
d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z" /> | ||
</svg> | ||
</div> | ||
|
||
<script> | ||
document.addEventListener("DOMContentLoaded", function () { | ||
document.addEventListener("DOMContentLoaded", function() { | ||
const backToTopButton = document.getElementById('back-to-top-container'); | ||
|
||
function checkButtonVisibility() { | ||
|
@@ -207,21 +214,22 @@ | |
window.addEventListener('scroll', checkButtonVisibility); | ||
window.addEventListener('resize', checkButtonVisibility); | ||
|
||
backToTopButton.addEventListener('click', function () { | ||
backToTopButton.addEventListener('click', function() { | ||
window.scrollTo({ | ||
top: 0, | ||
behavior: 'smooth' | ||
}); | ||
}); | ||
checkButtonVisibility(); | ||
}); | ||
|
||
</script> | ||
</div> | ||
</div> | ||
|
||
<nav | ||
class="content-display-nav dark-mode sticky top-0 z-50 py-3 backdrop-blur-lg border-b border-neutral-700/80 text-black"> | ||
<nav class="content-display-nav dark-mode sticky top-0 z-50 py-3 backdrop-blur-lg border-b border-neutral-700/80 text-black"> | ||
<div class="col-md-10"> | ||
<a href="index.html" class="home-link"><i class="fas fa-arrow-left"> </i></a> | ||
</div> | ||
<div class="container px-4 py-0 border-none mx-auto relative lg:text-sm"> | ||
<div class="flex justify-between mt-4 items-center"> | ||
<div class="flex items-center flex-shrink-0"> | ||
|
@@ -233,8 +241,7 @@ | |
<div class="flex items-center ml-auto"> | ||
<!-- Dark mode toggle icon --> | ||
<input type="checkbox" id="slider" class="slider hidden" onclick="toggleDarkMode()"> | ||
<label for="slider" | ||
class="slider-label bg-gray-300 dark:bg-gray-700 w-16 h-8 flex items-center rounded-full p-1 cursor-pointer transition duration-500"> | ||
<label for="slider" class="slider-label bg-gray-300 dark:bg-gray-700 w-16 h-8 flex items-center rounded-full p-1 cursor-pointer transition duration-500"> | ||
<div | ||
class="slider-circle bg-white w-6 h-6 rounded-full shadow-md transform transition duration-500"> | ||
</div> | ||
|
@@ -290,7 +297,6 @@ <h1 id="project-title">project title</h1> | |
document.getElementById('readme-content').innerHTML = marked.parse(readmeContent); | ||
|
||
// Toggle navbar script | ||
|
||
</script> | ||
</body> | ||
|
||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,28 +1,39 @@ | ||
// cursorAnimation.js | ||
|
||
const { JSDOM } = require("jsdom"); | ||
|
||
// Create a new JSDOM instance | ||
const { window } = new JSDOM(`<!DOCTYPE html><html><body><div class="cursor" style="position: absolute;"></div></body></html>`); | ||
const { document } = window; | ||
|
||
// Select the cursor element | ||
const cursor = document.querySelector(".cursor"); | ||
|
||
//follow cursor on mouse move | ||
document.addEventListener("mousemove",(e)=>{ | ||
// Variable to store the timeout | ||
let timeout; | ||
|
||
// Follow cursor on mouse move | ||
document.addEventListener("mousemove", (e) => { | ||
let x = e.pageX; | ||
let y = e.pageY; | ||
|
||
cursor.style.top = y + "px"; | ||
cursor.style.left =x + "px"; | ||
cursor.style.display ="block"; | ||
|
||
//cursor effects on mouse stopped | ||
function mouseStopped(){ | ||
cursor.style.display="none"; | ||
cursor.style.left = x + "px"; | ||
cursor.style.display = "block"; | ||
|
||
// Cursor effects on mouse stopped | ||
function mouseStopped() { | ||
cursor.style.display = "none"; | ||
} | ||
clearTimeout(timeout); | ||
timeout = setTimeout(mouseStopped,1000); | ||
|
||
|
||
clearTimeout(timeout); | ||
timeout = setTimeout(mouseStopped, 1000); | ||
}); | ||
|
||
//cursor effect on mouseout | ||
|
||
document.addEventListener("mouseout",()=>{ | ||
cursor.style.display="none"; | ||
// Cursor effect on mouseout | ||
document.addEventListener("mouseout", () => { | ||
cursor.style.display = "none"; | ||
}); | ||
|
||
}); | ||
// This is just to demonstrate that the script is running | ||
console.log('Cursor animation script running'); |
Oops, something went wrong.