-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
119 lines (100 loc) · 5.09 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"/>
<meta name="color-scheme" content="dark only">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<!-- <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script> -->
<!-- jQuery library -->
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<!-- CSS and scripts -->
<link href="main.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="main_landscape.css" media="screen and (orientation: landscape) and (max-width: 1024px)">
<link href="crispy-toast.css" rel="stylesheet" type="text/css"/>
<script src="crispy-toast.js" type="text/javascript"></script>
<script src="scratcher2.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script><!-- begin common pre2 -->
</head>
<!-- begin common pagetop -->
<body>
<div id="id01" class="modal">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close">×</span>
<form class="modal-content" action="javascript:void(0);">
<div class="container">
<h2 id="intro">This is a gender reveal scratch off for <span id="surname" style="font-weight:bold; white-space:normal">the</span> family. It contains high level sound. Do you want to continue with sound?</h2>
<!-- <h5 style="color:red; white-space: normal;">This is a demo with limited functionality. So only middle row can be scratched.</h5> -->
<div class="clearfix">
<button type="button" class="nosoundbtn">No Sound</button>
<button type="button" class="withsoundbtn">With Sound</button>
</div>
</div>
</form>
</div>
<div class="pagetop">
<!-- .pagetop -->
<audio id="soundHandle" style="display:none;" src="audio/celebrate.mp3" type="audio/mpeg"></audio>
<h1 id="title">
<span id="boy" style=color:#7FB1ED>Boy </span>
<span id="or" style="color: #000000">or</span>
<span id="girl" style=color:#ffc0cb> Girl</span>
</h1>
<h3 id="H3">Scratch to reveal the gender of <br><span id="baby">the baby!</span></h3>
<h4 id="H4"><span style="white-space: normal;">Find 3 in a row, column or diagonal to find out the gender. <br>Then, animation with sound will start!</span></h4>
<br>
</div>
<div id="mainbody">
<!-- end common pagetop -->
<!-- Begin scratcher -->
<br>
<p><noscript>(This page requires JavaScript to run correctly. Please enable JavaScript from your Browser's settings.)</noscript></p>
<div id="scratcher-box">
<table id="table1" style="margin-top: auto;margin-bottom: auto;margin-left: auto;margin-right: auto;">
<tr> <td colspan="3"><input type="button" id="resetbutton" value="Start Again!" style="display: none;"></input></td>
</tr>
<!-- <tr><td colspan="3"><div class="tabletop"><h4 id="scratcher3Pct" style="display:none">Find the gender</h4>
</div></td></tr> -->
<tr><td><canvas id="scratcher1" width="100" height= "100"></canvas>
</td>
<td><canvas id="scratcher2" width="100" height= "100"></canvas>
</td>
<td><canvas id="scratcher3" width="100" height= "100" ></canvas>
</td>
<tr><td><canvas id="scratcher4" width="100" height= "100"></canvas>
</td>
<td><canvas id="scratcher5" width="100" height= "100"></canvas>
</td>
<td><canvas id="scratcher6" width="100" height= "100"></canvas>
</td></tr>
<tr><td><canvas id="scratcher7" width="100" height= "100"></canvas>
</td>
<td><canvas id="scratcher8" width="100" height= "100"></canvas>
</td>
<td><canvas id="scratcher9" width="100" height= "100"></canvas>
</td></tr>
</table>
<br>
<br>
</div> <!-- #canvas-box -->
<!-- End scratcher -->
<div id="scratcher-bottom-margin">
<a href="https://artisartprintables.etsy.com" style="text-decoration:none">
<p style="color:white; text-shadow: 1px 1px 10px #000000;">Copyright © 2024 ArtisArtPrintables Studio.</p>
</div> </a>
<div hidden id="lamebrowser">
<p><strong>Your browser doesn't support HTML canvas.</strong> Get a modern browser such
as <a href="http://www.google.com/chrome/">Chrome</a>,
<a href="http://firefox.com/">Firefox</a>, <a href="http://www.opera.com/">Opera</a>, or
<a href="http://windows.microsoft.com/en-us/internet-explorer/products/ie/home">IE9</a>.
And then, only then, will you be able to see this page. Sorry!</p>
</div>
</html>
<!-- end common pagebottom -->