Feat(fortune): Implement theme switcher (Closes #42)
This commit is contained in:
lifeadventurer
@@ -1,6 +1,8 @@
|
||||
:root {
|
||||
--button-color: #73a3eb;
|
||||
--button-hover-color: #459aef;
|
||||
--toggle-theme-button-color: #000000;
|
||||
--copy-result-button-color: #000000;
|
||||
--bg-color: #ffffff;
|
||||
--good-fortune-color: #e74c3c;
|
||||
--bad-fortune-color: #000000bf;
|
||||
@@ -11,20 +13,6 @@
|
||||
--title-color: #000000cc;
|
||||
}
|
||||
|
||||
.dark-mode {
|
||||
--button-color: #5d99f4;
|
||||
--button-hover-color: #9ac6f1;
|
||||
--bg-color: #1e1d24;
|
||||
--good-fortune-color: #e74c3c;
|
||||
--bad-fortune-color: #d4d4d4d9;
|
||||
--middle-fortune-color: #57c857;
|
||||
--desc-color: #838282;
|
||||
--date-color: #0ed64aed;
|
||||
--special-event-color: #6477f3;
|
||||
--dark-mode-icon-color: #ffffff;
|
||||
--title-color: #cdcdcd;
|
||||
}
|
||||
|
||||
* {
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
@@ -101,16 +89,39 @@ button:hover {
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
#dark-mode-icon {
|
||||
#toggle-theme-button {
|
||||
margin-top: 15px;
|
||||
font-size: 2.4rem;
|
||||
color: var(--dark-mode-icon-color);
|
||||
color: var(--toggle-theme-button-color);
|
||||
cursor: pointer;
|
||||
opacity: 85%;
|
||||
}
|
||||
|
||||
#copy-result {
|
||||
#copy-result-button {
|
||||
margin-top: 20px;
|
||||
font-size: 1.5rem;
|
||||
color: var(--dark-mode-icon-color);
|
||||
color: var(--copy-result-button-color);
|
||||
}
|
||||
|
||||
#themeModal {
|
||||
.modal-content {
|
||||
background-color: var(--bg-color) !important;
|
||||
color: var(--title-color) !important;
|
||||
}
|
||||
|
||||
.modal-header,
|
||||
.modal-footer {
|
||||
background-color: var(--bg-color) !important;
|
||||
color: var(--bg-color) !important;
|
||||
}
|
||||
|
||||
.modal-title,
|
||||
.btn-close {
|
||||
color: var(--title-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
#themeItem {
|
||||
background-color: var(--bg-color);
|
||||
color: var(--title-color);
|
||||
}
|
||||
|
||||
@@ -8,17 +8,11 @@
|
||||
<link rel="manifest" href="./manifest.json" />
|
||||
<!-- bootstrap -->
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
|
||||
rel="stylesheet"
|
||||
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
|
||||
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<!-- box icons -->
|
||||
<link
|
||||
href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<!-- jquery -->
|
||||
<script
|
||||
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"
|
||||
></script>
|
||||
@@ -40,6 +34,7 @@
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
@@ -116,21 +111,67 @@
|
||||
<!-- page after button click end -->
|
||||
|
||||
<div class="row">
|
||||
<i class="col-2 bx bx-moon" id="dark-mode-icon"></i>
|
||||
<i
|
||||
class="col-2 fas fa-palette"
|
||||
id="toggle-theme-button"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#themeModal"
|
||||
></i>
|
||||
<button class="col-4 offset-2 bi bi-files" id="btn" onclick="getLuck()">
|
||||
點擊打卡
|
||||
</button>
|
||||
<i
|
||||
class="col-2 offset-2 fas fa-clone d-none"
|
||||
id="copy-result"
|
||||
id="copy-result-button"
|
||||
onclick="copyResultImageToClipboard()"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Theme Modal -->
|
||||
<div
|
||||
class="modal fade"
|
||||
id="themeModal"
|
||||
tabindex="-1"
|
||||
aria-labelledby="themeModalLabel"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="themeModalLabel">Choose Theme</h5>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close"
|
||||
data-bs-dismiss="modal"
|
||||
aria-label="Close"
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<ul class="list-group" id="themeList">
|
||||
<!-- Theme items will be dynamically populated here -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<canvas id="Matrix"></canvas>
|
||||
<script src="./js/scripts.js"></script>
|
||||
<script src="./js/fortune.js"></script>
|
||||
<script src="./js/matrix.js"></script>
|
||||
<script src="./js/theme.js"></script>
|
||||
|
||||
<script
|
||||
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
|
||||
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
<script
|
||||
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
|
||||
integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -373,7 +373,7 @@ function Appear() {
|
||||
J_l_2_desc.html(l_2_desc);
|
||||
}
|
||||
}
|
||||
$("#copy-result").removeClass("d-none");
|
||||
$("#copy-result-button").removeClass("d-none");
|
||||
}
|
||||
|
||||
function getLuck() {
|
||||
|
||||
@@ -1,10 +1,3 @@
|
||||
let darkModeIcon = document.querySelector("#dark-mode-icon");
|
||||
|
||||
darkModeIcon.onclick = () => {
|
||||
darkModeIcon.classList.toggle("bx-sun");
|
||||
document.body.classList.toggle("dark-mode");
|
||||
};
|
||||
|
||||
function copyResultImageToClipboard() {
|
||||
try {
|
||||
const $title = $("#title").clone().wrap('<div class="row"></div>');
|
||||
|
||||
45
fortune_generator/js/theme.js
Normal file
45
fortune_generator/js/theme.js
Normal file
@@ -0,0 +1,45 @@
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const themeListContainer = document.querySelector("#themeList");
|
||||
const root = document.documentElement;
|
||||
|
||||
async function fetchThemes() {
|
||||
try {
|
||||
const response = await fetch("./json/themes.json");
|
||||
const themes = await response.json();
|
||||
populateThemeList(themes["themes"]);
|
||||
} catch (error) {
|
||||
console.error("Error fetching themes:", error);
|
||||
}
|
||||
}
|
||||
|
||||
// Populate theme list in modal
|
||||
function populateThemeList(themes) {
|
||||
themeListContainer.innerHTML = "";
|
||||
themes.forEach((theme) => {
|
||||
const themeItem = document.createElement("div");
|
||||
themeItem.className =
|
||||
"theme-item list-group-item d-flex justify-content-between align-items-center";
|
||||
themeItem.style.cursor = "pointer";
|
||||
themeItem.id = "themeItem";
|
||||
|
||||
// Add theme name
|
||||
const themeName = document.createElement("span");
|
||||
themeName.textContent = theme.name;
|
||||
themeItem.appendChild(themeName);
|
||||
|
||||
// Apply theme on click
|
||||
themeItem.addEventListener("click", () => applyTheme(theme.properties));
|
||||
|
||||
themeListContainer.appendChild(themeItem);
|
||||
});
|
||||
}
|
||||
|
||||
// Apply theme by setting CSS variables
|
||||
function applyTheme(properties) {
|
||||
Object.entries(properties).forEach(([key, value]) => {
|
||||
root.style.setProperty(`--${key}`, value);
|
||||
});
|
||||
}
|
||||
|
||||
fetchThemes();
|
||||
});
|
||||
38
fortune_generator/json/themes.json
Normal file
38
fortune_generator/json/themes.json
Normal file
@@ -0,0 +1,38 @@
|
||||
{
|
||||
"themes": [
|
||||
{
|
||||
"name": "light",
|
||||
"properties": {
|
||||
"bg-color": "#ffffff",
|
||||
"good-fortune-color": "#e74c3c",
|
||||
"bad-fortune-color": "#000000bf",
|
||||
"desc-color": "#7f7f7f",
|
||||
"button-color": "#73a3eb",
|
||||
"button-hover-color": "#459aef",
|
||||
"toggle-theme-button-color": "#000000",
|
||||
"copy-result-button-color": "#000000",
|
||||
"middle-fortune-color": "#5eb95e",
|
||||
"date-color": "#096e1bc9",
|
||||
"special-event-color": "#3e4fbb",
|
||||
"title-color": "#000000cc"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "dark",
|
||||
"properties": {
|
||||
"bg-color": "#1e1d24",
|
||||
"good-fortune-color": "#e74c3c",
|
||||
"bad-fortune-color": "#d4d4d4d9",
|
||||
"desc-color": "#838282",
|
||||
"button-color": "#5d99f4",
|
||||
"button-hover-color": "#9ac6f1",
|
||||
"toggle-theme-button-color": "#ffffff",
|
||||
"copy-result-button-color": "#ffffff",
|
||||
"middle-fortune-color": "#57c857",
|
||||
"date-color": "#0ed64aed",
|
||||
"special-event-color": "#6477f3",
|
||||
"title-color": "#cdcdcd"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user