-
Notifications
You must be signed in to change notification settings - Fork 0
/
Happy Birthday.html
121 lines (109 loc) · 4.55 KB
/
Happy Birthday.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<html class="gr__localhost"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Happy Birthday</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Happy%20Birthday_files/bootstrap.css"><link rel="stylesheet" href="Happy%20Birthday_files/style.css"></head>
<body data-gr-c-s-loaded="true">
<div>
<div class="container">
<div>
<div class="row">
<div class="loader" style="display: none;">
<button id="play">Start</button>
</div>
</div>
</div>
</div>
</div>
<audio class="song" controls="controls" loop="">
<source src="Happy%20Birthday_files/music.mp3">
Your browser isn't invited for super fun audio time.
</audio>
<canvas id="confetti" width="438" height="726"></canvas>
<div class="container pt-5">
<div class="row">
<div class="col-12 col-xl-6 mx-auto">
<img src="Happy%20Birthday_files/banner.png" alt="">
</div>
<div class="col-12 text-center">
<div id="name" class="area">fdsafgfdsfsfdsgfg</div>
</div>
<div class="col-12 text-center">
<div class="type-wrap">
<div id="typed-strings" class="typing" style="display: none;">
<h2>Happy Birthday <i id="nae">fdsafgfdsfsfdsgfg</i></h2>
<h2>Have a wonderful day</h2>
<h2>Filled with joy and happiness.</h2>
</div>
<span id="typed" style="white-space:pre;">Happy Birthday <i id="nae">fdsafgfdsfsfdsgf</i></span><span class="typed-cursor">|</span>
</div>
</div>
<div class="col-12 col-xl-6 mx-auto">
<img src="Happy%20Birthday_files/cake.svg" alt="">
</div>
</div>
</div>
<img src="Happy%20Birthday_files/Balloon-Border.png" class="balloon-border" style="top: -500px;" width="100%">
<!-- Code injected by live-server -->
<script type="text/javascript">
// <![CDATA[ <-- For SVG support
if ('WebSocket' in window) {
(function () {
function refreshCSS() {
var sheets = [].slice.call(document.getElementsByTagName("link"));
var head = document.getElementsByTagName("head")[0];
for (var i = 0; i < sheets.length; ++i) {
var elem = sheets[i];
var parent = elem.parentElement || head;
parent.removeChild(elem);
var rel = elem.rel;
if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
}
parent.appendChild(elem);
}
}
var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
var address = protocol + window.location.host + window.location.pathname + '/ws';
var socket = new WebSocket(address);
socket.onmessage = function (msg) {
if (msg.data == 'reload') window.location.reload();
else if (msg.data == 'refreshcss') refreshCSS();
};
if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
console.log('Live reload enabled.');
sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
}
})();
}
else {
console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
}
// ]]>
</script>
<script src="Happy%20Birthday_files/snowflakes.js"></script>
<script src="Happy%20Birthday_files/jquery.js"></script>
<script src="Happy%20Birthday_files/typed.js"></script>
<script src="Happy%20Birthday_files/script.js"></script><style type="text/css" data-typed-js-css="true">
.typed-cursor{
opacity: 1;
}
.typed-cursor.typed-cursor--blink{
animation: typedjsBlink 0.7s infinite;
-webkit-animation: typedjsBlink 0.7s infinite;
animation: typedjsBlink 0.7s infinite;
}
@keyframes typedjsBlink{
50% { opacity: 0.0; }
}
@-webkit-keyframes typedjsBlink{
0% { opacity: 1; }
50% { opacity: 0.0; }
100% { opacity: 1; }
}
</style>
<script>
</script>
</body><span class="gr__tooltip"><span class="gr__tooltip-content"></span><i class="gr__tooltip-logo"></i><span class="gr__triangle"></span></span></html>