-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
279 lines (253 loc) · 10.4 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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tw-elements/dist/css/index.min.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/flowbite.min.css" />
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.plot.ly/plotly-2.14.0.min.js"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
'regal-blue': '#243c5a',
/*
nord0->nord3, dark colors,"polar night"
nord4->nord6, light colors, "snow storm"
nord7 = pale green
nord8 = blue
nord9 = blue
nord10 = blue
nord11 = red
nord12 = orange
nord13 = yellow
nord14 = green
nord15 = purple
*/
'nord0': '#2e3440',
'nord1': '#3b4252',
'nord2': '#434c5e',
'nord3': '#4c566a',
'nord4': '#d8dee9',
'nord5': '#e5e9f0',
'nord6': '#eceff4',
'nord7': '#8fbcbb',
'nord8': '#88c0d0',
'nord9': '#81a1c1',
'nord10': '#5e81ac',
'nord11': '#bf616a',
'nord12': '#d08770',
'nord13': '#ebcb8b',
'nord14': '#a3be8c',
'nord15': '#b48ead'
},
fontFamily: {
// sans: ['Inter var', ...defaultTheme.fontFamily.sans],
}
}
}
}
</script>
<style>
/* Special styling for WebKit/Blink */
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 36px;
width: 36px;
background: #88c0d0;
}
/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
background: #88c0d0;
width: 100%;
height: 36px;
width: 36px;
cursor: pointer;
/* Hides the slider so custom styles can be added */
background: transparent;
border-color: transparent;
color: transparent;
}
/* All the same stuff for IE */
input[type=range]::-ms-thumb {
background: #88c0d0;
height: 36px;
width: 36px;
cursor: pointer;
}
</style>
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
</head>
<body class="h-screen flex flex-col bg-nord0">
<!-- This example requires Tailwind CSS v2.0+ -->
<nav class="dark bg-nord0 divide-y">
<div class="dark mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
<div class="dark relative flex h-20 items-center justify-between">
<div class="dark absolute inset-y-0 left-0 flex items-center sm:hidden">
<!-- Mobile menu button-->
</div>
<div class="dark flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
<div class="dark flex flex-shrink-0 items-center">
<img class="dark hidden h-8 w-auto lg:block" src="beyoulogo.svg"
alt="Your Company">
<h1 class="text-nord4 px-3 py-1 text-3xl">
BeYou.</h1>
</div>
<div class="dark hidden sm:ml-6 sm:block">
<div class="dark flex flex-1 space-x-4 items-center justify-center">
<!-- Current: "bg-gray-900 text-nord4", Default: "text-nord5 hover:bg-nord1 hover:text-nord4" -->
<a href="addyourbeyou.html" class="dark bg-nord3 text-nord4 m-2 px-3 py-2 rounded-md text-sm font-medium"
aria-current="page">Add your BeYou</a>
<a href="find.html"
class="dark text-nord5 hover:bg-nord1 hover:text-nord4 px-3 py-2 rounded-md text-sm font-medium">Find
BeYous</a>
</div>
</div>
</div>
<div class="dark absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
<button class="dark flex flex-cols">
<a href="beyous.html"
class="dark flex flex-cols items-center space-x-4 text-nord5 hover:bg-nord1 hover:text-nord4 px-3 py-2 rounded-md text-sm font-medium">
See BeYous
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="dark w-6 h-6 ml-2 text-nord5">
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" />
</svg>
</a>
</button>
</div>
</div>
</div>
<!-- Mobile menu, show/hide based on menu state. -->
<div class="dark sm:hidden" id="mobile-menu">
<div class="dark space-y-1 px-2 pt-2 pb-3">
<!-- Current: "bg-gray-900 text-nord4", Default: "text-nord5 hover:bg-nord1 hover:text-nord4" -->
<a href="#" class="dark bg-zinc-600 text-nord4 px-3 py-2 rounded-md text-sm font-medium" aria-current="page">Add Your
BeYou</a>
<a href="#" class="dark text-nord5 hover:bg-nord1 hover:text-nord4 px-3 py-2 rounded-md text-sm font-medium">Find
BeYous</a>
<a href="#" class="dark text-nord5 hover:bg-nord1 hover:text-nord4 px-3 py-2 rounded-md text-sm font-medium">See
BeYous</a>
</div>
</div>
<hr class="dark space-y-1 border-1 border-nord3">
</nav>
<div class="dark h-4/5 flex flex-col justify-center items-center border-3" method="GET">
<form action="beyous.html" class="dark w-4/5 h-4/5 px-20 py-10 flex flex-col justify-center space-y-8" method="GET" id="addbeyou">
<div class="dark space-x-2 flex flex-row">
<h1 class="dark text-nord4 text-6xl font-extrabold">I want to </h1>
<h1 id="typeText"
class="dark font-extrabold text-transparent text-6xl bg-clip-text bg-gradient-to-r from-nord8 to-nord9">
BeContent.
</h1>
</div>
<div class="dark space-x-2 flex flex-row justify-center items-center">
<p1 class="dark text-5xl">😔</p1>
<input id="valueControl" name="value" type="range" value="50"
class="newthumb w-full h-3 bg-nord8 nord8 rounded-lg appearance-none cursor-pointer dark:bg-nord3">
<p1 class="text-5xl">😊</p1>
</div>
<div class="flex flex-col justify-between space-y-3">
<textarea id="message" rows="4" style="resize: none;"
class="text-xl block p-2.5 w-full text-gray-900 bg-gray-50 rounded-lg border border-nord2 focus:ring-nord2 focus:border-nord2 dark:bg-nord1 dark:border-nord0 dark:placeholder-gray-400 dark:text-nord8"
placeholder="Describe your BeYou..."></textarea>
<div class="flex flex-row justify-between">
<div class="flex flex-row justify-left around space-x-0.5 text-nord6">
<p1 id="characters" class="text-l font-bold">0</p1>
<p1 id="characterLabel" class="text-l"> characters</p1>
</div>
<button type="submit"
class="text-nord6 bg-gradient-to-r from-nord8 to-nord9 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-nord8 dark:focus:ring-nord9 font-medium rounded-lg text-sm px-5 py-2.5 text-center">Submit</button>
</div>
</div>
</form>
</div>
</div>
<hr class="space-y-1 border-1 border-nord3">
<footer class="flex flex-1 flex-col justify-center items-center text-center">
<h2 class="text-nord4 text-l text-medium">Made with ❤️ by the <b>bonobo</b> team at HackCMU.</h2>
</footer>
<script src="https://unpkg.com/[email protected]/dist/flowbite.js"></script>
<script>
var range = document.getElementById("valueControl");
var type = document.getElementById("typeText");
var message = document.getElementById("message");
var characters = document.getElementById("characters");
var characterLabel = document.getElementById("characterLabel");
var types = ["BeSad.", "BeDown.", "BeContent.", "BeHappy.", "BeEcstatic."];
range.addEventListener("input", changeType);
function changeType() {
if (range.value < 20) {
type.innerText = types[0];
} else if (range.value < 40) {
type.innerText = types[1];
} else if (range.value < 60) {
type.innerText = types[2];
} else if (range.value < 80) {
type.innerText = types[3];
} else {
type.innerText = types[4];
}
}
message.addEventListener("input", changeCharacterCount);
function changeCharacterCount() {
characters.innerText = message.value.length;
if (message.value.length == 1) {
characterLabel.innerText = "character";
} else {
characterLabel.innerText = "characters";
}
}
</script>
<script type = 'module'>
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.10.0/firebase-app.js";
import { getDatabase, push, set, child, ref} from "https://www.gstatic.com/firebasejs/9.10.0/firebase-database.js";
const firebaseConfig = {
apiKey: "AIzaSyAHRbCmE_ynGBxlW0x5J9u9H3XBOrFhedA",
authDomain: "beyou-21d2f.firebaseapp.com",
databaseURL: "https://beyou-21d2f-default-rtdb.firebaseio.com",
projectId: "beyou-21d2f",
storageBucket: "beyou-21d2f.appspot.com",
messagingSenderId: "718679255077",
appId: "1:718679255077:web:a5d19b54e474a1d968b7cc",
measurementId: "G-FVD7M6CJ1Z"
};
const app = initializeApp(firebaseConfig);
var postDatabase = getDatabase(app);
document.getElementById('addbeyou').addEventListener('submit', submit);
function submit(e)
{
e.preventDefault();
var date = new Date();
var type = document.getElementById("typeText").innerText;
var text = document.getElementById("message").value;
var value = document.getElementById("valueControl").value;
var location = "Tepper";
var time = date.toLocaleDateString() + ", " + date.toLocaleTimeString();
console.log('working');
saveMessages(location, type, value, text, time);
}
const saveMessages = (location, type, value, text, time) =>
{
var newPost = push(child(ref(postDatabase), 'Posts'));
set(newPost,{
location: location,
type:type,
text:text,
value:value,
time: time,
}).then(function(){
window.location = "beyous.html?" + "value=" + value;
});
};
const getElementVal = (id) => {
return document.getElementById(id).value;
};
</script>
</body>
</html>