Rain/Rainyy21.github.io
1
0
Fork 0
mirror of https://github.com/Rainyy21/Rainyy21.github.io.git synced 2026-10-10 22:50:17 -04:00
Code Issues Packages Projects Releases Wiki Activity

add a template for project and try to fix darkmode

Browse Source
This commit is contained in:
Rainyy21
2026-05-28 02:46:42 -04:00
parent 4e40999a0c
commit e76a02b17b
5 changed files with 242 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+4 -4
View File
@@ -56,21 +56,21 @@
<div class="social">
<div class="about_button_placement">
<button class="social_button" onclick="location.href='info.html'">
<button class="social_button" onclick="location.href='page/info.html'">
<svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M448.67-280h66.66v-240h-66.66v240Zm31.32-316q15.01 0 25.18-9.97 10.16-9.96 10.16-24.7 0-15.3-10.15-25.65-10.16-10.35-25.17-10.35-15.01 0-25.18 10.35-10.16 10.35-10.16 25.65 0 14.74 10.15 24.7 10.16 9.97 25.17 9.97Zm.19 516q-82.83 0-155.67-31.5-72.84-31.5-127.18-85.83Q143-251.67 111.5-324.56T80-480.33q0-82.88 31.5-155.78Q143-709 197.33-763q54.34-54 127.23-85.5T480.33-880q82.88 0 155.78 31.5Q709-817 763-763t85.5 127Q880-563 880-480.18q0 82.83-31.5 155.67Q817-251.67 763-197.46q-54 54.21-127 85.84Q563-80 480.18-80Z"/></svg>
<h2 class="social_text">About</h2>
</button>
</div>
<div class="link_button_placement" >
<button class="social_button" onclick="location.href='link.html'">
<button class="social_button" onclick="location.href='page/link.html'">
<svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M446.67-280H280q-83 0-141.5-58.5T80-480q0-83 58.5-141.5T280-680h166.67v66.67H280q-55.56 0-94.44 38.84-38.89 38.84-38.89 94.33 0 55.49 38.89 94.49 38.88 39 94.44 39h166.67V-280ZM323.33-446.67v-66.66h313.34v66.66H323.33Zm190 166.67v-66.67H680q55.56 0 94.44-38.84 38.89-38.84 38.89-94.33 0-55.49-38.89-94.49-38.88-39-94.44-39H513.33V-680H680q83 0 141.5 58.5T880-480q0 83-58.5 141.5T680-280H513.33Z"/></svg>
<h2 class="social_text">Link</h2>
</button>
</div>
<div class="work_button_placement">
<button class="social_button">
<button class="social_button" onclick="location.href='page/project.html'">
<svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M186.67-120q-27.67 0-47.17-19.5T120-186.67v-586.66q0-27.67 19.5-47.17t47.17-19.5h192.66q7.67-35.33 35.84-57.67Q443.33-920 480-920t64.83 22.33Q573-875.33 580.67-840h192.66q27.67 0 47.17 19.5t19.5 47.17v586.66q0 27.67-19.5 47.17T773.33-120H186.67ZM280-280h275.33v-66.67H280V-280Zm0-166.67h400v-66.66H280v66.66Zm0-166.66h400V-680H280v66.67Zm200-181.34q13.67 0 23.5-9.83t9.83-23.5q0-13.67-9.83-23.5t-23.5-9.83q-13.67 0-23.5 9.83t-9.83 23.5q0 13.67 9.83 23.5t23.5 9.83Z"/></svg>
<h2 class="social_text">Project</h2>
</button>
@@ -89,4 +89,4 @@
</body>
</html>
</html>
js/darkmode.js
+24 -18
View File
@@ -1,21 +1,27 @@
let darkmode = localStorage.getItem('dark');
const switch_button = document.getElementById("theme_switch");
const enableDarkmode = () => {
document.body.classList.add('dark');
localStorage.setItem('dark' , 'active');
}
const disableDarkmode = () => {
document.body.classList.remove('dark');
localStorage.removeItem('dark');
// Function to apply the theme based on localStorage
const applyTheme = () => {
const darkmode = localStorage.getItem('dark');
if (darkmode === 'active') {
document.body.classList.add('dark');
} else {
document.body.classList.remove('dark');
}
};
if (darkmode === 'active') enableDarkmode();
switch_button.addEventListener("click", () => {
darkmode = localStorage.getItem('dark');
darkmode !== "active" ? enableDarkmode() : disableDarkmode();
});
// Run on initial load
// Since the script is 'defer', document.body will be available
applyTheme();
// Set up the toggle button listener
const switch_button = document.getElementById("theme_switch");
if (switch_button) {
switch_button.addEventListener("click", () => {
const darkmode = localStorage.getItem('dark');
if (darkmode !== "active") {
localStorage.setItem('dark', 'active');
} else {
localStorage.setItem('dark', 'inactive');
}
applyTheme();
});
}
page/info.html
+98
View File
@@ -0,0 +1,98 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rain about</title>
<!-- add a image -->
<!-- css and js -->
<link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" href="../css/mainpage.css">
<link rel="stylesheet" href="../css/main_button.css">
<link rel="stylesheet" href="../css/about.css">
<script type="text/javascript" src="../js/darkmode.js" defer></script>
<script type="text/javascript" src="../js/main.js" defer></script>
</head>
<body>
<div class="bg_color">
<!-- have a header -->
<div class="header">
<div class="home_locat">
<!-- button to return home -->
<button id="home_button" onclick="location.href='../index.html'" aria-label="Go home">
<svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M160-120v-480l320-240 320 240v480H560v-280H400v280H160Z"/></svg>
</button>
</div>
<!-- topright would be the dark mode -->
<div class="darkmode">
<button id="theme_switch" aria-label="Toggle dark mode">
<!-- add the mood and sun icon here -->
<svg xmlns="http://www.w3.org/2000/svg" class="darkmode" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q10 0 20.5.67 10.5.66 24.17 2-37.67 31-59.17 77.83T444-660q0 90 63 153t153 63q53 0 99.67-20.5 46.66-20.5 77.66-56.17 1.34 12.34 2 21.84.67 9.5.67 18.83 0 150-105 255T480-120Z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="lightmode" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M480-280q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-446.67H40v-66.66h160v66.66Zm720 0H760v-66.66h160v66.66ZM446.67-760v-160h66.66v160h-66.66Zm0 720v-160h66.66v160h-66.66ZM260-655.33l-100.33-97 47.66-49 96 100-43.33 46Zm493.33 496-97.66-100.34 45-45.66 99.66 97.66-47 48.34Zm-98.66-541.34 97.66-99.66 49 47L702-656l-47.33-44.67ZM159.33-207.33 259-305l46.33 45.67-97.66 99.66-48.34-47.66Z"/></svg>
</button>
</div>
</div>
<!-- my info from who i am and my social linke -->
<div class="content_container">
<div class="square_content">
<div class="website_top">
<div class="website_text">
About
</div>
</div>
<!-- this might be where the whole stuff should be in -->
<div class="box_body">
<div class="about_header">
<div class="pfp_placeholder">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
</div>
<div class="title_text">
<h1>Simon Zheng</h1>
<p class="intro_text">Student & Programmer</p>
</div>
</div>
<div class="description">
<div class="about_section">
<div class="section_title">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z"/></svg>
<h2>Education</h2>
</div>
<div class="education_card">
<h3>Bachelor of Science in Computer Science</h3>
<p>Brooklyn College • Class of 2026</p>
</div>
</div>
<div class="about_section">
<div class="section_title">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
<h2>Interests</h2>
</div>
<ul class="hobby_container">
<li class="hobby_item">Gaming</li>
<li class="hobby_item">Coffee</li>
<li class="hobby_item">Mahjong</li>
<li class="hobby_item">Coding</li>
<li class="hobby_item">UI Design</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
page/link.html
+68
View File
@@ -0,0 +1,68 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rain links</title>
<!-- css and js -->
<link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" href="../css/mainpage.css">
<link rel="stylesheet" href="../css/main_button.css">
<link rel="stylesheet" href="../css/about.css">
<script type="text/javascript" src="../js/darkmode.js" defer></script>
<script type="text/javascript" src="../js/main.js" defer></script>
</head>
<body>
<div class="bg_color">
<div class="header">
<div class="home_locat">
<button id="home_button" onclick="location.href='../index.html'" aria-label="Go home">
<svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M160-120v-480l320-240 320 240v480H560v-280H400v280H160Z"/></svg>
</button>
</div>
<div class="darkmode">
<button id="theme_switch" aria-label="Toggle dark mode">
<svg xmlns="http://www.w3.org/2000/svg" class="darkmode" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q10 0 20.5.67 10.5.66 24.17 2-37.67 31-59.17 77.83T444-660q0 90 63 153t153 63q53 0 99.67-20.5 46.66-20.5 77.66-56.17 1.34 12.34 2 21.84.67 9.5.67 18.83 0 150-105 255T480-120Z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="lightmode" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M480-280q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-446.67H40v-66.66h160v66.66Zm720 0H760v-66.66h160v66.66ZM446.67-760v-160h66.66v160h-66.66Zm0 720v-160h66.66v160h-66.66ZM260-655.33l-100.33-97 47.66-49 96 100-43.33 46Zm493.33 496-97.66-100.34 45-45.66 99.66 97.66-47 48.34Zm-98.66-541.34 97.66-99.66 49 47L702-656l-47.33-44.67ZM159.33-207.33 259-305l46.33 45.67-97.66 99.66-48.34-47.66Z"/></svg>
</button>
</div>
</div>
<div class="content_container">
<div class="square_content">
<div class="website_top">
<div class="website_text">
Links
</div>
</div>
<div class="box_body">
<div class="title_text">
<h1>Links</h1>
</div>
<div class="social">
<button class="social_button" onclick="window.open('https://github.com', '_blank')">
<svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 0 24 24" width="40px" fill="#e3e3e3"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22v3.285c0 .315.225.69.825.57C20.565 21.795 24 17.31 24 12c0-6.63-5.37-12-12-12z"/></svg>
<h2 class="social_text">GitHub</h2>
</button>
<button class="social_button" onclick="window.open('https://linkedin.com', '_blank')">
<svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 0 24 24" width="40px" fill="#e3e3e3"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
<h2 class="social_text">LinkedIn</h2>
</button>
<button class="social_button" onclick="location.href='mailto:email@example.com'">
<svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm320-280L160-640v400h640v-400L480-440Zm0-80 320-200H160l320 200ZM160-640v-80 480-400Z"/></svg>
<h2 class="social_text">Email</h2>
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
page/project.html
+48
View File
@@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rain links</title>
<!-- css and js -->
<link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" href="../css/mainpage.css">
<link rel="stylesheet" href="../css/main_button.css">
<link rel="stylesheet" href="../css/about.css">
<script type="text/javascript" src="../js/darkmode.js" defer></script>
<script type="text/javascript" src="../js/main.js" defer></script>
</head>
<body>
<div class="bg_color">
<div class="header">
<div class="home_locat">
<button id="home_button" onclick="location.href='../index.html'" aria-label="Go home">
<svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M160-120v-480l320-240 320 240v480H560v-280H400v280H160Z"/></svg>
</button>
</div>
<div class="darkmode">
<button id="theme_switch" aria-label="Toggle dark mode">
<svg xmlns="http://www.w3.org/2000/svg" class="darkmode" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q10 0 20.5.67 10.5.66 24.17 2-37.67 31-59.17 77.83T444-660q0 90 63 153t153 63q53 0 99.67-20.5 46.66-20.5 77.66-56.17 1.34 12.34 2 21.84.67 9.5.67 18.83 0 150-105 255T480-120Z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="lightmode" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M480-280q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-446.67H40v-66.66h160v66.66Zm720 0H760v-66.66h160v66.66ZM446.67-760v-160h66.66v160h-66.66Zm0 720v-160h66.66v160h-66.66ZM260-655.33l-100.33-97 47.66-49 96 100-43.33 46Zm493.33 496-97.66-100.34 45-45.66 99.66 97.66-47 48.34Zm-98.66-541.34 97.66-99.66 49 47L702-656l-47.33-44.67ZM159.33-207.33 259-305l46.33 45.67-97.66 99.66-48.34-47.66Z"/></svg>
</button>
</div>
</div>
<div class="content_container">
<div class="square_content">
<div class="website_top">
<div class="website_text">
Projects
</div>
</div>
<div class="box_body">
</div>
</div>
</div>
</div>
</body>
</html>