-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
121 lines (108 loc) · 5.73 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
120
121
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Drip Detective</title>
<!-- Bootstrap stylesheet
* Bootstrap v4.3.1 (https://getbootstrap.com/)
* Copyright 2011-2019 The Bootstrap Authors
* Copyright 2011-2019 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<header>
<div class="jumbotron">
<div class="container">
<h1 class="text-center">Drip Detective</h1>
<h1 class="text-center">
<a style="color: black;" target="_blank" href="surprise.html">?</a>
</h1>
<!-- Content for the log in screen -->
<div class="text-center" id="login-content">
<br>
<!-- Create account page -->
<div id="create-account">
<p><strong>Account info is stored on publicly accessable database</strong></p>
Username: <input id="username" type="text" name="Username" placeholder="Username" value=""><br>
Password: <input id="password" type="password" name="Password" placeholder="Password" value="">
<br>
<br>
<button onclick="login()">Login</button>
<button onclick="createAccount()">Create Account</button>
</div>
</div>
</div>
<!-- Content for the timer -->
<div id="timer-content" style="display:none">
<p class="text-center">See how much water you are wasting compared to your roomates!</p>
<p><h2 id="timer" class="text-center">00:00</h2><br></p>
<p id="start-stop" class="text-center"><a onclick="timeButton()" class="btn btn-primary btn-lg" href="#" role="button" title="Start Shower">Start Shower!</a> </p>
<p id="minute-add" class="text-center"><a onclick="addMinute()" class="btn btn-primary btn-lg" href="#" role="button">Add minute</a> </p>
<p id="seconds-add" class="text-center"><a onclick="addTenSeconds()" class="btn btn-primary btn-lg" href="#" role="button">Add 10 seconds</a> </p>
</div>
<!-- Content for after the timer -->
<div id="stats-page" style="display:none">
<p><h2 id="stat-timer" class="text-center">00:00</h2><br></p>
<div class="text-center" id="quips"><p>string</p></div>
<p>Gallons of water used: <span id="num-gallons">0</span> gallons</p>
<p>Impact on water bill: $<span id="bill-impact">0</span></p>
<p>Estimated monthly water bill from showers with consistent shower time: $<span id="total-bill">0</span></p>
<p>World shower time average: 8.2 minutes</p>
<p>Your overall average shower time: <span id="average-time">0</span> minutes</p>
<p>Total water usage: <span id="total-usage">0</span> gallons</p>
<p class="align-bottom">Numbers based on averages*</p>
<div class="text-center">
Compare your shower stats: <input id="compare-input" type="text" name="otherUsername" placeholder="Someone's Username" value="">
<button onclick="compareShowerTimes()">Compare!</button> <button onclick="randomUsername()">Random Username</button>
<!-- Content for the comparison -->
<table id="comparisons" class="table">
<div class="column">
<p id="your-average-time">Your average time: </p>
</div>
<div class="column">
<p id="their-average-time">Their average time: </p>
</div>
<p id="results">Wow you're a shower expert!</p>
</table>
</div>
</div>
</div>
</div>
</header>
<footer>
<div>
<p style="color:white; text-align: center; bottom: 0px; position: fixed; width: 100%;">
Created by Mark Truttmann and Reid Miller
<br>Copyright © Drip Detective™. All rights reserved.</br>
</p>
</div>
</footer>
<!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-app.js"></script>
<!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
<script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-analytics.js"></script>
<!-- Add Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-firestore.js"></script>
<script src="script.js"></script>
</body>
<style>/* Set a background image by replacing the URL below */
body {
background: url('https://thumbs-prod.si-cdn.com/7szLz0RWJEOuSEEvEji-HMUaS5o=/fit-in/1600x0/https://public-media.si-cdn.com/filer/bb/76/bb76e999-6d99-4432-9233-c8b320d42de0/1280px-shifengwaterfall_002.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.jumbotron {
opacity: .95;
}
.container {
opacity: 1;
}
</style>
</html>