Skip to content
Snippets Groups Projects
Commit 37d35265 authored by Miniontoby's avatar Miniontoby :writing_hand_tone1:
Browse files

Updated header, footer and added stylesheet

parent 9cac241a
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
public/css/style.css 0 → 100644
+ 14
− 0
View file @ 37d35265
:root {
--bg-color:#fff;
--font-color: #000;
}
[data-theme="dark"] {
--bg-color: #161625;
--font-color: #e1e1ff;
}
.theme-switch-wrapper { display: flex; align-items: center; } em { margin-left: 10px; font-size: 1rem; } .theme-switch { display: inline-block; height: 34px; position: relative; width: 60px; } .theme-switch input { display:none; } .slider { background-color: #ccc; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: .4s; } .slider:before { background-color: #fff; bottom: 4px; content: ""; height: 26px; left: 4px; position: absolute; transition: .4s; width: 26px; } input:checked + .slider { background-color: #66bb6a; } input:checked + .slider:before { transform: translateX(26px); } .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; }
body{
background-color: var(--bg-color);
color: var(--font-color);
}
public/footer.php
+ 22
− 0
View file @ 37d35265
<?php <?php
$app->db->close(); $app->db->close();
?> ?>
<nav>
<div class="theme-switch-wrapper">
<label class="theme-switch" for="checkbox">
<input id="checkbox" type="checkbox">
<div class="slider round"></div>
</label>
<em>Enable Dark Mode!</em>
</div>
</nav>
<script>
const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]'), currentTheme = localStorage.getItem('theme');
if (currentTheme) { document.documentElement.setAttribute('data-theme', currentTheme); if (currentTheme === 'dark') { toggleSwitch.checked = true; } }
toggleSwitch.addEventListener('change', function(e) {
if (e.target.checked) {
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark');
} else {
document.documentElement.setAttribute('data-theme', 'light');
localStorage.setItem('theme', 'light');
}
}, false);
</script>
<footer> <footer>
<span class="copyright">© Copyright 2021 - TheDutchProgrammers</span> <span class="copyright">© Copyright 2021 - TheDutchProgrammers</span>
</footer> </footer>
......
public/header.php
+ 4
− 4
View file @ 37d35265
...@@ -10,15 +10,15 @@ $app = new MySchoolDay(); ...@@ -10,15 +10,15 @@ $app = new MySchoolDay();
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="<?php echo $page_title; ?> - MySchoolDay"> <meta name="twitter:title" content="<?php echo $page_title; ?> - MySchoolDay">
<meta name="twitter:description" content="MySchoolDay WebApp"> <meta name="twitter:description" content="MySchoolDay WebApp">
<meta name="twitter:image" content=""> <meta name="twitter:image" content="/images/logo.png">
<meta property="og:url" content=""> <meta property="og:url" content="">
<meta property="og:type" content="website"> <meta property="og:type" content="website">
<meta property="og:title" content="<?php echo $page_title; ?> - MySchoolDay"> <meta property="og:title" content="<?php echo $page_title; ?> - MySchoolDay">
<meta property="og:description" content="MySchoolDay WebApp"> <meta property="og:description" content="MySchoolDay WebApp">
<meta property="og:image" content=""> <meta property="og:image" content="/images/logo.png">
<meta property="twitter:domain" content="myschoolday.org"> <meta property="twitter:domain" content="myschoolday.org">
<meta property="twitter:url" content=""> <meta property="twitter:url" content="">
<link rel="shortcut icon" type="image/ico" href="favicon.ico"/>
<link rel="stylesheet" href="css/styles.css"/>
</head> </head>
<body> <body>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment