-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
101 lines (97 loc) · 5.14 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Junk-o-meter</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- -------- PWA FEATURES -------- -->
<!-- ------ PWA - Meta tags ------- -->
<meta name="apple-mobile-web-app-capable" content="yes"> <!-- Enable WPA -->
<meta name="apple-mobile-web-app-title" content="Junk-o-meter"> <!-- Title -->
<meta name="application-name" content="Junk-o-meter">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <!-- Status bar -->
<meta name="msapplication-TileColor" content="#603cba">
<meta name="theme-color" content="#603cba">
<!-- -------- PWA - Icons --------- -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=Ryxb7GvK5l">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=Ryxb7GvK5l">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=Ryxb7GvK5l">
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png?v=Ryxb7GvK5l">
<link rel="manifest" href="/site.webmanifest?v=Ryxb7GvK5l">
<link rel="mask-icon" href="/safari-pinned-tab.svg?v=Ryxb7GvK5l" color="#603cba">
<link rel="shortcut icon" href="/favicon.ico?v=Ryxb7GvK5l">
<!-- Styles -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" media="screen" href="/css/main.css">
</head>
<body>
<main>
<section>
<div class="content content-welcome" id="welcome">
<h1>Junk-o-meter</h1>
<h2>How much of a junkie are you?</h2>
<p>Do you use drugs? Are you starting to get worried about your drug use? Take this short test to evaluate your drug use and/or addiction and see how you're doing.</p>
<p class="mb">
<small>(This test is just for fun and isn't based on any actual scientific research, or for that matter any research at all, other than over six years of personal experience with methamphetamine addiction and (ab)use of all sorts of recreational drugs.)</small>
</p>
<button type="button" class="btn" id="btn-start">Start the test</button>
</div>
<div class="content content-test" id="test-1">
<h2>Let's start with a simple question</h2>
<div class="question-group">
<h3>Do you use drugs? (Weed counts too!)</h3>
<div class="row">
<button type="button" class="btn btn-equal" id="btn-1-yes">Yes</button>
<button type="button" class="btn btn-equal" id="btn-1-no">No</button>
</div>
</div>
</div>
<div class="content content-test" id="test-2">
<h2 id="question-counter">Cool</h2>
<div class="question-group">
<h3 id="test-2-question">How often do you use drugs?</h3>
<div class="row" id="answers">
<button type="button" class="btn btn-answer" data-jp="0" data-dp="0" id="btn-2-0">Daily</button>
<button type="button" class="btn btn-answer" data-jp="0" data-dp="0" id="btn-2-1">Few times a week</button>
<button type="button" class="btn btn-answer" data-jp="0" data-dp="0" id="btn-2-2">Few times a month</button>
<button type="button" class="btn btn-answer" data-jp="0" data-dp="0" id="btn-2-3">Less often</button>
<button type="button" class="btn btn-answer" data-jp="0" data-dp="0" id="btn-2-4">Placeholder</button>
</div>
</div>
</div>
<div class="content content-results" id="test-end">
<h2 id="result-title">Yolo</h2>
<p id="result-text">MacSwagger</p>
<div class="row" id="result-row">
<div id="result-box">
<div class="rb-row">
<div class="col img-col">
<img src="img/level0.png" class="rb-img" id="result-icon">
</div>
<div class="col text-col">
<p class="rb-txt" id="rb-text">I'm <span id="rb-not" class="hidden">NOT</span><span id="rb-a">a</span><span id=rb-perc>100%</span> junkie!</p>
<p class="rb-txt" id="rb-text-2">I scored <span id="rb-score">20</span> of <span id="rb-maxscore">113</span> Junkie Points!</p>
</div>
</div>
<h4 id="rb-title">Tested by <a href="http://junkie.matronator.com">Junk-o-meter</a></h4>
<p class="rb-link"><small class="rb-tiny"><a href="https://matronator.com">http://junkie.matronator.com</a> - Matronator © 2019</small></p>
</div>
<div id="result-image" class="hidden"></div>
</div>
<div class="row" id="downloadDiv">
<a class="btn" id="downloadImg">↓ Save image</a>
</div>
<div class="row">
<a href="http://junkie.matronator.com" class="btn" id="btn-restart">Take the test again</a>
</div>
</div>
</section>
</main>
<script src="/js/jquery-3.3.1.js"></script>
<script src="/js/html2canvas.min.js"></script>
<script src="/js/questions.js"></script>
<script src="/js/main.js"></script>
</body>
</html>