Skip to content

Update hbd.html(Dark Mode added) #393

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.

Sign up for GitHub

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

Open
KaranMishra3610 wants to merge 1 commit into
base: master
Choose a base branch
from
+169 −132
Open

Update hbd.html(Dark Mode added) #393

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
301 changes: 169 additions & 132 deletions hbd.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,8 @@
<!DOCTYPE HTML>
<html>
<!--

██╗ ██╗ █████╗ ██████╗ ██████╗ ██╗ ██╗ ██████╗ ██╗██████╗ ████████╗██╗ ██╗██████╗ █████╗ ██╗ ██╗ █████╗ █████╗ ███████╗████████╗██╗ ██╗ █████╗
██║ ██║██╔══██╗██╔══██╗██╔══██╗╚██╗ ██╔╝ ██╔══██╗██║██╔══██╗╚══██╔══╝██║ ██║██╔══██╗██╔══██╗╚██╗ ██╔╝ ██╔══██╗██╔══██╗██╔════╝╚══██╔══╝██║ ██║██╔══██╗
███████║███████║██████╔╝██████╔╝ ╚████╔╝ ██████╔╝██║██████╔╝ ██║ ███████║██║ ██║███████║ ╚████╔╝ ███████║███████║███████╗ ██║ ███████║███████║
██╔══██║██╔══██║██╔═══╝ ██╔═══╝ ╚██╔╝ ██╔══██╗██║██╔══██╗ ██║ ██╔══██║██║ ██║██╔══██║ ╚██╔╝ ██╔══██║██╔══██║╚════██║ ██║ ██╔══██║██╔══██║
██║ ██║██║ ██║██║ ██║ ██║ ██████╔╝██║██║ ██║ ██║ ██║ ██║██████╔╝██║ ██║ ██║ ██║ ██║██║ ██║███████║ ██║ ██║ ██║██║ ██║
╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═╝ ╚═╝ ╚═════╝ ╚═╝╚═╝ ╚═╝ ╚═╝ ╚═╝ ╚═╝╚═════╝ ╚═╝ ╚═╝ ╚═╝ ╚═╝ ╚═╝╚═╝ ╚═╝╚══════╝ ╚═╝ ╚═╝ ╚═╝╚═╝ ╚═╝


-->

<!--

▄████████ ███ ▄████████ ▄██ ▄ ▀█████████▄ ▄█ ▄████████ ▄████████ ▄████████ ▄████████ ████████▄
███ ███ ▀█████████▄ ███ ███ ███ ██▄ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ▀███
███ █▀ ▀███▀▀██ ███ ███ ███▄▄▄███ ███ ███ ███ ███ █▀ ███ █▀ ███ █▀ ███ █▀ ███ ███
███ ███ ▀ ███ ███ ▀▀▀▀▀▀███ ▄███▄▄▄██▀ ███ ▄███▄▄▄ ███ ███ ▄███▄▄▄ ███ ███
▀███████████ ███ ▀███████████ ▄██ ███ ▀▀███▀▀▀██▄ ███ ▀▀███▀▀▀ ▀███████████ ▀███████████ ▀▀███▀▀▀ ███ ███
███ ███ ███ ███ ███ ███ ███ ██▄ ███ ███ █▄ ███ ███ ███ █▄ ███ ███
▄█ ███ ███ ███ ███ ███ ███ ███ ███ ███▌ ▄ ███ ███ ▄█ ███ ▄█ ███ ███ ███ ███ ▄███
▄████████▀ ▄████▀ ███ █▀ ▀█████▀ ▄█████████▀ █████▄▄██ ██████████ ▄████████▀ ▄████████▀ ██████████ ████████▀
▀

-->
<head>
<title>Happy Birthday Aastha</title>
<meta charset="utf-8">
<title>Happy Birthday Aastha</title>
<meta charset="utf-8">
<meta name="language" content="en-us"/>
<meta http-equiv="Content-Type" content="text/html" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Expand All @@ -50,131 +25,193 @@
<meta property="og:image" content="https://scontent.cdninstagram.com/t51.2885-19/s320x320/17332840_428978084117611_7673563513641500672_a.jpg" />
<meta property="og:url" content="https://vinitshahdeo.github.io/HBD" />
<meta property="og:site_name" content="Happy Birthday!" />

<meta name="twitter:card" content="website">
<meta name="twitter:site" content="Happy Birthday Aastha!">
<meta name="twitter:title" content="Happy Birthday Aastha!">
<meta name="twitter:description" content="May your birthday bring you as much as you happiness
you give to every one who knows you">
<meta name="twitter:image" content="https://scontent.cdninstagram.com/t51.2885-19/s320x320/17332840_428978084117611_7673563513641500672_a.jpg">

<meta itemprop="name" content="Happy Birthday Aastha!">
<meta itemprop="description" content="May your birthday bring you as much as you happiness
you give to every one who knows you">
<meta itemprop="image" content="https://scontent.cdninstagram.com/t51.2885-19/s320x320/17332840_428978084117611_7673563513641500672_a.jpg">

<style type="text/css">

*{
background: #fff;
<meta itemprop="name" content="Happy Birthday Aastha!">
<meta itemprop="description" content="May your birthday bring you as much as you happiness
you give to every one who knows you">
<meta itemprop="image" content="https://scontent.cdninstagram.com/t51.2885-19/s320x320/17332840_428978084117611_7673563513641500672_a.jpg">

<link href="css/style1.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="shortcut icon" href="./cake.png" type="image/png" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/birthday.js"></script>
<script type="text/javascript" src="js/hbd.js"></script>

<style>
/* Theme colors using CSS variables */
:root {
--bg-color: #ffffff;
--text-color: #000000;
--link-color: #339933;
}

[data-theme="dark"] {
--bg-color: #121212;
--text-color: #f0f0f0;
--link-color: #76ff03;
}

* {
background-color: var(--bg-color);
color: var(--text-color);
}

a {
color: var(--link-color);
}

a:hover {
color: #00e676;
}
#loveHeart{

#loveHeart {
background: transparent;
background: url('guitarboy.gif') no-repeat center;
}
#copyright{
font-family: 'Montserrat',sans-serif;
opacity: 0.8;
}
#copyright a{
text-decoration: none;
}
#copyright a:hover{
text-decoration: none;
color:#339933;
}
#hbd_song{

#copyright {
font-family: 'Montserrat', sans-serif;
opacity: 0.8;
}

#copyright a {
text-decoration: none;
}

#copyright a:hover {
text-decoration: none;
}

#hbd_song {
display: none;
}
</style>

/* Toggle button */
#themeToggle {
position: fixed;
top: 20px;
right: 20px;
padding: 8px 16px;
background-color: var(--link-color);
color: var(--bg-color);
border: none;
border-radius: 5px;
cursor: pointer;
z-index: 1000;
}
</style>

<script>
window.onload = function() {
document.getElementById("hbd_song").play();
document.getElementById("hbd_song").play();
}
</script>
<link href="css/style1.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="shortcut icon" href="./cake.png" type="image/png" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/birthday.js"></script>
<script type="text/javascript" src="js/hbd.js"></script>
</head>

<body>
<div id="mainDiv">
<div id="content">
<div id="code" >
<span class="comments">/**</span><br />
<span class="space"/><span class="comments">* Today, the 6th day of May, is your birthday.</span><br />
<span class="space"/><span class="comments">* So I created a webpage to celebrate this special day.</span><br />
<span class="space"/><span class="comments">*/</span><br />
Girl u = <span class="keyword">new</span> Girl(<span class="string">"Aastha Solanki"</span>);<br />
<span class="comments">// May 5th, when the bell rang, your age increased </span><br />
Date currentTime = <span class="keyword">new</span> Date(); <br />
SimpleDateFormat formatter = <span class="keyword">new</span> SimpleDateFormat(<span class="string">"yyyy-MM-dd HH:mm:ss"</span>);<br />
String dateString = formatter.format(currentTime);<br />
if( dateString.equals(<span class="string">"2017-05-06 00:00:00"</span>) ){</br>
u.age ++;</br>
}</br>
<span class="comments">// My best wishes will be with you simultaneously.</span><br />
<span class="keyword">new</span> Thread (){<br />
@Override </br>
<span class="comments">// Forever and ever. I wish</span><br />
while(true){</br>
<span class="comments">// luckiness,</span><br />
u.fortune ++;</br>
<span class="comments">// happiness,</span><br />
u.happiness ++;</br>
<span class="comments">// and everything you wish can be achieved.</span><br />
}.start()</br>
<span class="comments">// The last thing I wanna say, boring and ordinary, is:</span><br />
System.out.println(<span class="string">"Happy Birthday!"</span>);
</div>
<div id="loveHeart">
<canvas id="garden" style="display:none"></canvas>
<!-- Dark/Light mode toggle button -->
<button id="themeToggle">Toggle Dark Mode</button>

<div id="mainDiv">
<div id="content">
<div id="code">
<span class="comments">/**</span><br />
<span class="space"/><span class="comments">* Today, the 6th day of May, is your birthday.</span><br />
<span class="space"/><span class="comments">* So I created a webpage to celebrate this special day.</span><br />
<span class="space"/><span class="comments">*/</span><br />
Girl u = <span class="keyword">new</span> Girl(<span class="string">"Aastha Solanki"</span>);<br />
<span class="comments">// May 5th, when the bell rang, your age increased </span><br />
Date currentTime = <span class="keyword">new</span> Date(); <br />
SimpleDateFormat formatter = <span class="keyword">new</span> SimpleDateFormat(<span class="string">"yyyy-MM-dd HH:mm:ss"</span>);<br />
String dateString = formatter.format(currentTime);<br />
if( dateString.equals(<span class="string">"2017-05-06 00:00:00"</span>) ){</br>
u.age ++;</br>
}</br>
<span class="comments">// My best wishes will be with you simultaneously.</span><br />
<span class="keyword">new</span> Thread (){<br />
@Override </br>
<span class="comments">// Forever and ever. I wish</span><br />
while(true){</br>
<span class="comments">// luckiness,</span><br />
u.fortune ++;</br>
<span class="comments">// happiness,</span><br />
u.happiness ++;</br>
<span class="comments">// and everything you wish can be achieved.</span><br />
}.start()</br>
<span class="comments">// The last thing I wanna say, boring and ordinary, is:</span><br />
System.out.println(<span class="string">"Happy Birthday!"</span>);
</div>

<div id="loveHeart">
<canvas id="garden" style="display:none"></canvas>
<audio id="hbd_song" src="audio/hbd.mp3" loop="loop"></audio>
</div>
</div>
<div id="copyright">
<hr>
<p>Made with love by <a href="https://www.facebook.com/vinit.shahdeo" target="_blank">Vinit Shahdeo</a></p>
</hr>
</div>
</div>
<script type="text/javascript">
var offsetX = $("#loveHeart").width() / 2;
var offsetY = $("#loveHeart").height() / 2 - 55;
var together = new Date();
together.setFullYear(1997,7, 9);
together.setHours(8);
together.setMinutes(0);
together.setSeconds(0);
together.setMilliseconds(0);

if (!document.createElement('canvas').getContext) {
var msg = document.createElement("div");
msg.id = "errorMsg";
msg.innerHTML = "Sorry, browser doesn't support this!";
document.body.appendChild(msg);
$("#code").css("display", "none")
$("#copyright").css("position", "absolute");
$("#copyright").css("bottom", "10px");
document.execCommand("stop");
} else {
setTimeout(function () {
startHeartAnimation();
}, 5000);

timeElapse(together);
setInterval(function () {
timeElapse(together);
}, 500);

adjustCodePosition();
$("#code").typewriter();
}
</script>
</div>
</div>

<div id="copyright">
<hr>
<p>Made with love by <a href="https://www.facebook.com/vinit.shahdeo" target="_blank">Vinit Shahdeo</a></p>
</div>
</div>

<script>
var offsetX = $("#loveHeart").width() / 2;
var offsetY = $("#loveHeart").height() / 2 - 55;
var together = new Date();
together.setFullYear(1997,7, 9);
together.setHours(8);
together.setMinutes(0);
together.setSeconds(0);
together.setMilliseconds(0);

if (!document.createElement('canvas').getContext) {
var msg = document.createElement("div");
msg.id = "errorMsg";
msg.innerHTML = "Sorry, browser doesn't support this!";
document.body.appendChild(msg);
$("#code").css("display", "none")
$("#copyright").css("position", "absolute");
$("#copyright").css("bottom", "10px");
document.execCommand("stop");
} else {
setTimeout(function () {
startHeartAnimation();
}, 5000);

timeElapse(together);
setInterval(function () {
timeElapse(together);
}, 500);

adjustCodePosition();
$("#code").typewriter();
}

// Dark/Light Mode Toggle
const toggleButton = document.getElementById("themeToggle");
const currentTheme = localStorage.getItem("theme");

if (currentTheme) {
document.documentElement.setAttribute("data-theme", currentTheme);
}

toggleButton.addEventListener("click", () => {
let theme = document.documentElement.getAttribute("data-theme");
if (theme === "dark") {
document.documentElement.setAttribute("data-theme", "light");
localStorage.setItem("theme", "light");
} else {
document.documentElement.setAttribute("data-theme", "dark");
localStorage.setItem("theme", "dark");
}
});
</script>
</body>
<!-- Made with love by Vinit Shahdeo -->
</html>