Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add dark mode theme in Virtual planner #2422

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 18 additions & 52 deletions .github/ISSUE_TEMPLATE/documentation.yml
Original file line number Diff line number Diff line change
@@ -1,71 +1,37 @@
name: 📝 Documentation Update
description: Improve Documentation
title: "[Doc]: "
labels: [documentation]
name: "📝 Documentation Update"
description: "Propose an update or correction to the documentation"
title: "DOC UPDATE:"
labels: ["Documentation"]
body:
- type: checkboxes
id: existing-issue
attributes:
label: Is there an existing issue for this?
description: Please search to see if an issue already exists for the updates you want to make.
options:
- label: I have searched the existing issues
required: true

- type: textarea
id: issue-description
attributes:
label: Issue Description
description: Please provide a clear description of the documentation update you are suggesting.
placeholder: Describe the improvement or correction you'd like to see in the documentation.
label: "Documentation Page"
description: "Which page or section of the documentation needs to be updated?"
validations:
required: true

- type: textarea
id: suggested-change
attributes:
label: Suggested Change
description: Provide details of the proposed change to the documentation.
placeholder: Explain how the documentation should be updated or corrected.
label: "Description of Changes"
description: "Describe the changes you propose for the documentation."
validations:
required: true

- type: textarea
id: rationale
attributes:
label: Rationale
description: Why is this documentation update necessary or beneficial?
placeholder: Explain the importance or reasoning behind the suggested change.
label: "Reason for Update"
description: "Explain why these changes are necessary or beneficial."
validations:
required: false

- type: dropdown
id: urgency
- type: textarea
attributes:
label: Urgency
description: How urgently do you believe this documentation update is needed?
options:
- High
- Medium
- Low
default: 0
label: "Screenshots/Logs"
description: "If applicable, add screenshots or logs that can help us understand the issue better."
validations:
required: true

required: false
- type: checkboxes
id: terms
attributes:
label: Acknowledgements
description: Ensure you have read and agree to the project's guidelines.
label: "Additional Information"
options:
- label: I have read the [Contributing Guidelines](https://github.com/alo7lika/master-web-development/blob/test/CONTRIBUTING.md)*
required: true
- label: I'm a GSSOC'24-Extd contributor
- label: I'm a Hacktoberfest contributor
- label: I have starred the repository
- label: "I have checked the documentation for accuracy"
required: true
- label: 'I am willing to work on this issue (optional)'
required: false



- label: "I am willing to help with this update"
- label: "I can provide further clarification if needed"
11 changes: 8 additions & 3 deletions css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -739,9 +739,14 @@ body {
}

.icon {
position: fixed;
top: 1rem;
right: 1rem;
position: absolute;
right: 0rem;
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
align-content: center;
justify-content: flex-end;
align-items: flex-end;
}

#toggle-mode-btn {
Expand Down
112 changes: 109 additions & 3 deletions garden-planner.html
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>Virtual Gardening Planner</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
/* Basic styling for the layout */
body {
Expand Down Expand Up @@ -65,9 +66,114 @@
.dragging {
opacity: 0.5;
}
</style>
</head>
<body>
:root { /* Light theme colors */
--background-color: linear-gradient(to right, #ffcccb, #ffebcd);
--text-color: #000000;
--navbar-background: #f8f9fa;
--navbar-text: #000000;
--link-color: #1a73e8;
--button-background: #008cba;
--button-text: #ffffff;
} [data-theme="dark"] { /* Dark theme colors */
--background-color: #121212;
--text-color: #ffffff;
--navbar-background: #333333;
--navbar-text: #ffffff;
--link-color: #bb86fc;
--button-background: #3d3d3d;
--button-text: #ffffff;
}
[data-theme="dark"] #container {
background-color: #222;
border-radius: 8px;
box-shadow: 0 4px 20px #f1f1f15c;
padding: 20px;
width: 80%;
max-width: 800px;
text-align: center;
}
[data-theme="dark"]
.story-builder-container {
width: 90%;
max-width: 700px;
background: #222;
padding: 20px;
box-shadow: -1px 0px 11px 6px #3d3d3d;
border-radius: 10px;
}
[data-theme="dark"]
input[type="text"] {
width: 70%;
padding: 10px;
color: #ddd;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #333;
}
[data-theme="dark"]
th {
background-color: #222;
}


* {
padding: 0;
margin: 0; box-sizing:
border-box;
}
body {
font-family: "Poppins", sans-serif;
/* background-color: var(--background-color); */
color: var(--text-color);
font-family: 'Roboto', sans-serif;
background: var(--background-color);
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* Full height */
}
#navbar ul { list-style: none;
padding: 0;
} #navbar ul li {
display: inline;
margin-right: 10px;
}
#navbar ul li a {
color: var(--navbar-text);
text-decoration: none;
}
button {
border: none;
display: inline-flex;
appearance: none;
align-items: center;
justify-content: center;
border-radius: 9999px;
padding: 8px;
align-items: center;
background-color: #f43f5e;
color: #ffffff;
cursor: pointer;
}
#theme-toggle
{ position: fixed;
top: 10px;
right: 10px;
} </style>
</head>
<body data-theme="light">
<button id="theme-toggle"> <i class="fas fa-sun"></i> </button>
<section id="content"> </section>
<script> const toggleButton = document.getElementById('theme-toggle');
const body = document.body;
toggleButton.addEventListener('click', () => { if (body.getAttribute('data-theme') === 'light') { body.setAttribute('data-theme', 'dark');
toggleButton.innerHTML = '<i class="fas fa-moon"></i>';
} else {
body.setAttribute('data-theme', 'light');
toggleButton.innerHTML = '<i class="fas fa-sun"></i>';
} });
</script>

<h1>Virtual Gardening Planner</h1>
<div class="planner-container">
Expand Down
10 changes: 5 additions & 5 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,7 @@

</style>
<!-- Navbar Component with Centered Links and Title Update -->
<!DOCTYPE html>
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
Expand All @@ -176,7 +176,7 @@
</head>
<body>
<header>
<nav class="navbar">
<nav class="navbar">
<a href="#" class="logo">
Master-Web<br>
<span>Development</span>
Expand All @@ -192,10 +192,10 @@
<li><a href="#">Projects</a></li>
<li><a href="./feedback.html">Feedback</a></li>
</ul>
</nav>
</nav>
</header>
</body>
</html>
</html> -->

<link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remix.css" rel="stylesheet" />
<link rel="stylesheet" href="styles.css">
Expand Down Expand Up @@ -590,7 +590,7 @@ <h3 class="card-heading">Virtual Garden Planner</h3>

<a href="./story-builder.html" class="card Generators" target="_blank">
<div class="card-cover">
<img src="assets/image/story-builder.webp" alt="">
<img src="assets/image/-builder.webp" alt="">
</div>
<div class="card-content">
<h3 class="card-heading">Story Builder</h3>
Expand Down
2 changes: 2 additions & 0 deletions navbar.css
Original file line number Diff line number Diff line change
Expand Up @@ -230,7 +230,9 @@ body {
align-items: center;
justify-content: center;
border-bottom: 1px solid var(--accent-color);
margin-top: -18px;
}

/* Navbar list */
.navbar ul {
list-style: none;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,7 @@ object-assign

/**
* @license
* jsPDF virtual FileSystem functionality
* jsPDF FileSystem functionality
*
* Licensed under the MIT License.
* http://opensource.org/licenses/mit-license
Expand Down
16 changes: 15 additions & 1 deletion projects/guess_the_shape/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,22 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Guess the Shape!</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

</head>
<body>
<body data-theme="light">
<button id="theme-toggle"> <i class="fas fa-sun"></i> </button>
<section id="content"> </section>
<script> const toggleButton = document.getElementById('theme-toggle');
const body = document.body;
toggleButton.addEventListener('click', () => { if (body.getAttribute('data-theme') === 'light') { body.setAttribute('data-theme', 'dark');
toggleButton.innerHTML = '<i class="fas fa-moon"></i>';
} else {
body.setAttribute('data-theme', 'light');
toggleButton.innerHTML = '<i class="fas fa-sun"></i>';
} });
</script>

<div class="game-container">
<h1>Guess the Shape!</h1>
<div id="shape-display" class="shape"></div>
Expand Down
Loading