-
Notifications
You must be signed in to change notification settings - Fork 1
/
main.html
81 lines (75 loc) · 3.45 KB
/
main.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
<html>
<head>
<link rel="stylesheet" href="main.css" />
<title>Gradient</title>
<link rel="icon" href="https://cdn-icons-png.flaticon.com/512/214/214309.png">
<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=Prompt:wght@600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Prompt:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.css" />
<script src="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.js"></script>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<span class="logOut" id="logout"><span class="glyphicon"></span> log out</span>
<div>
<h1 id="title">Gradient</h1>
</div>
<div class="container">
<form class="addCrush">
<input style="margin:10px 0px 0px 20px;width:100px;" type="text" id="firstName" placeholder="FIRST NAME"
onmouseover="this.placeholder=this.getAttribute('data-value');" data-value=""
onmouseout="this.placeholder='FIRST NAME'" />
<input style="margin:10px 15px 0px 20px;width:100px;" type="text" id="lastName" placeholder="LAST NAME"
onmouseover="this.placeholder=this.getAttribute('data-value');" data-value=""
onmouseout="this.placeholder='LAST NAME'" />
<select class="box" name="gradClass" id="year">
<option id="none">GRADUATION YEAR</option>
<option id="y1"></option>
<option id="y2"></option>
<option id="y3"></option>
<option id="y4"></option>
<option id="y5"></option>
</select>
<button class="crushButton" id="addCrush">ADD CRUSH</button>
</form>
</div>
<div style="margin-bottom:25px;">
<button id="status-crushes" class="clear-button"><span id="crushesNum">0</span> <span
id="crushText">Crushes</span></button>
<button id="status-admirers" class="clear-button"><span id="admirerNum">0</span> <span id="admirerText">Secret
Admirers</span></button>
<button id="status-matches" class="clear-button"><span id="matchesNum">0</span> <span
id="matchText">Matches</span></button>
</div>
<div id="list">
<div id="main-content" class="list-items">
<div id="crushesHTML" style="display:flex">
</div>
<div id="admirersHTML" style="display:none">
</div>
<div id="matchesHTML" style="display:none">
</div>
</div>
</div>
<div id="popup" style="display:none">
<!--display a popup giving options to either chat or delete crush-->
<div id="popup-content">
<div id="popup-header">
<span id="popup-title">Delete <span id="popup-name">Jo Mama</span>?</span>
<!--name of crush in between delete and question mark-->
<!--<span id = "popup-close">X</span>-->
</div>
<div id="popup-body">
<button id="popup-cancel" class="clear-button" onclick="closePopup()">Cancel</button>
<button id="popup-delete" class="clear-button">Delete</button>
</div>
</div>
</div>
<script src="mainModule.js" type="module"></script>
<script src="main.js"></script>
</body>
</html>