mirror of
https://github.com/hnasheralneam/hnasheralneam.github.io.git
synced 2025-05-13 02:15:21 -04:00
Save theme color across pages
This commit is contained in:
parent
9c0a834c71
commit
ebb8568ca1
8 changed files with 46 additions and 85 deletions
|
|
@ -1,6 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta name="description" content="Hamza Nasher-Alneam's developer profile website!">
|
||||
|
|
@ -51,6 +50,7 @@
|
|||
<div w3-include-html="partials/menu.html"></div>
|
||||
</body>
|
||||
<script src="scripts/include-html.js"></script>
|
||||
<script src="scripts/script.js"></script>
|
||||
<script defer src="https://umami.hnasheralneam.dev/script.js"
|
||||
data-website-id="22e45953-378d-4e42-afe7-b31c197d3105"></script>
|
||||
<script src="https://hnasheralneam.github.io/digit/main.js"></script>
|
||||
|
|
|
|||
55
index.html
55
index.html
|
|
@ -12,9 +12,7 @@
|
|||
<title>Hamza Nasher-Alneam</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="progress-parent">
|
||||
<div class="progress"></div>
|
||||
</div>
|
||||
<div class="progress-parent"><div class="progress"></div></div>
|
||||
<br><br>
|
||||
|
||||
<div class="content">
|
||||
|
|
@ -64,63 +62,18 @@
|
|||
<p>Change the website color theme</p>
|
||||
<button onclick="changeTheme()">Random</button>
|
||||
<button onclick="changeThemeHex()" class="hex-code-label">Hex code</button>
|
||||
<button onclick="resetTheme()">Reset</button>
|
||||
</div>
|
||||
<br><br>
|
||||
<!-- Guestbook -->
|
||||
<!-- <div class="guestbook">
|
||||
<h2 class="guestbook-title">Guest book - leave a note!</h2>
|
||||
<div class="messages"></div>
|
||||
<div class="show-all-messages">
|
||||
<button onclick="this.remove(); showAll()">Show all messages</button>
|
||||
</div>
|
||||
<br>
|
||||
<button class="post-button" onclick="toggleElement('new-message')">Post a message</button>
|
||||
<div class="new-message-container" onclick="if (event.target.classList.contains('new-message-container')) toggleElement('new-message')">
|
||||
<div class="new-message">
|
||||
<form class="new-message-form" method="POST" action="https://guestbook-api.hnasheralneam.dev/message">
|
||||
<label class="message-header" for="message">Your message for the world</label><br>
|
||||
<textarea type="text" name="message" placeholder="your post"></textarea><br>
|
||||
<label class="text-label" for="github">Your GitHub username</label><br>
|
||||
<input class="text" type="text" name="github" placeholder="github username">
|
||||
<input type="submit" value="Post" onclick="checkSubmissionValid(event)">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<!-- <div class="thoughts-preview">
|
||||
<h2>Thoughts</h2>
|
||||
<a hre="articles/plasma-widgets.html#publish-widget">
|
||||
<div class="thoughts-bit"
|
||||
<h4>Publish your Plasma widget</h4>
|
||||
<i>May 15 2024</i>
|
||||
<p>A quick tutorial that shows how publish a KDE widget on the widget store. More on KDE widgets coming soon
|
||||
hopefully!</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="thoughts.html#imessage-lockin">
|
||||
<div class="thoughts-bit">
|
||||
<h4>The social issues with iMessage</h4>
|
||||
<i>Dec 1 2022</i>
|
||||
<p>I discusses the technology behind SMS, which is used when messaging between iPhones and other devices, as well as the newer MMS and RCS standards.</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="thoughts.html#reject-folding-phones">
|
||||
<div class="thoughts-bit">
|
||||
<h4>An argument against folding phones</h4>
|
||||
<i>Dec 1 2022</i>
|
||||
<p>I mention the impracticalities in more words than strictly necessary.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div> -->
|
||||
<br><br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
<div w3-include-html="partials/footer.html"></div>
|
||||
<div w3-include-html="partials/menu.html"></div>
|
||||
</body>
|
||||
<script src="scripts/include-html.js"></script>
|
||||
<script src="scripts/script.js"></script>
|
||||
<script src="scripts/main.js"></script>
|
||||
<script src="https://hnasheralneam.github.io/digit/main.js"></script>
|
||||
<script defer src="https://umami.hnasheralneam.dev/script.js"
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
<div w3-include-html="partials/menu.html"></div>
|
||||
</body>
|
||||
<script src="scripts/include-html.js"></script>
|
||||
<script src="scripts/script.js"></script>
|
||||
<script src="scripts/projects.js"></script>
|
||||
<script defer src="https://umami.hnasheralneam.dev/script.js"
|
||||
data-website-id="22e45953-378d-4e42-afe7-b31c197d3105"></script>
|
||||
|
|
|
|||
24
scripts/copypopup.js
Normal file
24
scripts/copypopup.js
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
let url = document.location.href;
|
||||
|
||||
function copy(txt) {
|
||||
let link = `${url}#${txt}`;
|
||||
navigator.clipboard.writeText(link).then(() => {
|
||||
console.log("Copied link!");
|
||||
}, () => { console.log("Error copying link."); });
|
||||
let alert = document.createElement("DIV");
|
||||
alert.textContent = "Copied Link to Heading!";
|
||||
alert.classList.add("tempAlert");
|
||||
document.body.appendChild(alert);
|
||||
setTimeout(() => {
|
||||
alert.style.opacity = "1";
|
||||
alert.style.bottom = ".5rem";
|
||||
}, 200);
|
||||
setTimeout(() => {
|
||||
alert.style.opacity = "0";
|
||||
alert.style.bottom = "-10rem";
|
||||
}, 4200);
|
||||
setTimeout(() => {
|
||||
alert.remove();
|
||||
}, 4400);
|
||||
|
||||
}
|
||||
|
|
@ -1,5 +1,3 @@
|
|||
console.log("hello");
|
||||
|
||||
window.addEventListener("scroll", () => {
|
||||
document.body.style.setProperty("--scroll", window.pageYOffset / (document.body.offsetHeight - window.innerHeight));
|
||||
}, false);
|
||||
|
|
@ -20,8 +18,6 @@ function changeThemeHex() {
|
|||
}
|
||||
}
|
||||
|
||||
function setThemeColor(color) {
|
||||
document.documentElement.style.setProperty("--theme-color", color);
|
||||
let metaThemeColor = document.querySelector("meta[name=theme-color]");
|
||||
metaThemeColor.setAttribute("content", color);
|
||||
function resetTheme() {
|
||||
setThemeColor("#f69b46");
|
||||
}
|
||||
11
scripts/script.js
Normal file
11
scripts/script.js
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
// theme color
|
||||
let themeColor = localStorage.getItem("theme-color");
|
||||
if (!themeColor) themeColor = "#f69b46";
|
||||
setThemeColor(themeColor);
|
||||
|
||||
function setThemeColor(color) {
|
||||
document.documentElement.style.setProperty("--theme-color", color);
|
||||
let metaThemeColor = document.querySelector("meta[name=theme-color]");
|
||||
metaThemeColor.setAttribute("content", color);
|
||||
localStorage.setItem("theme-color", color);
|
||||
}
|
||||
|
|
@ -84,7 +84,7 @@ a {
|
|||
.menu {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: .2rem;
|
||||
left: .3rem;
|
||||
bottom: 0;
|
||||
width: 10rem;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -40,31 +40,7 @@
|
|||
<div w3-include-html="partials/menu.html"></div>
|
||||
</body>
|
||||
<script src="scripts/include-html.js"></script>
|
||||
<script>
|
||||
let url = document.location.href;
|
||||
|
||||
function copy(txt) {
|
||||
let link = `${url}#${txt}`;
|
||||
navigator.clipboard.writeText(link).then(() => {
|
||||
console.log("Copied link!");
|
||||
}, () => { console.log("Error copying link."); });
|
||||
let alert = document.createElement("DIV");
|
||||
alert.textContent = "Copied Link to Heading!";
|
||||
alert.classList.add("tempAlert");
|
||||
document.body.appendChild(alert);
|
||||
setTimeout(() => {
|
||||
alert.style.opacity = "1";
|
||||
alert.style.bottom = ".5rem";
|
||||
}, 200);
|
||||
setTimeout(() => {
|
||||
alert.style.opacity = "0";
|
||||
alert.style.bottom = "-10rem";
|
||||
}, 4200);
|
||||
setTimeout(() => {
|
||||
alert.remove();
|
||||
}, 4400);
|
||||
|
||||
}
|
||||
</script>
|
||||
<script src="scripts/script.js"></script>
|
||||
<script src="scripts/copypopup.js"></script>
|
||||
<script defer src="https://umami.hnasheralneam.dev/script.js" data-website-id="22e45953-378d-4e42-afe7-b31c197d3105"></script>
|
||||
</html>
|
||||
Loading…
Reference in a new issue