forked from dfarrenk/ProjectOne
-
Notifications
You must be signed in to change notification settings - Fork 0
/
mainDashboard.html
124 lines (99 loc) · 3.93 KB
/
mainDashboard.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
<html lang="en-us">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Secret Santa Dashboard</title>
<script src="https://www.gstatic.com/firebasejs/4.6.2/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyDcO3BpfmGShgWNYjE-b-Wax18ZudRS9fk",
authDomain: "secret-santa-project.firebaseapp.com",
databaseURL: "https://secret-santa-project.firebaseio.com",
projectId: "secret-santa-project",
storageBucket: "secret-santa-project.appspot.com",
messagingSenderId: "889146133810"
};
firebase.initializeApp(config);
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.2/moment.min.js"></script>
<!-- JQuery link -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Materialize CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<!--------------------->
<!-- Manual Styling -->
<link rel="stylesheet" href="assets/css/mainDashboardStyle.css" type="text/css" />
</head>
<body>
<div id="header" class="valign-wrapper">
<img src="assets/images/secretSanta.png" alt="Secret Santa Image">
</div>
<!-- menu -->
<div class="row">
<div class="col s12">
<div class="row valign-wrapper">
<h4>
Welcome,
<span class="userName">User's Name</span>
!
<a id="menuButton" class="dropdown-button btn" data-activates="menu"><i class="material-icons">arrow_drop_down</i></a>
</h4>
<ul id='menu' class='dropdown-content'>
<li><a href="#!" id="switchGroup">Switch Groups</a></li>
<li><a href="#!" id="signOut">Sign Out</a></li>
</ul>
</div>
</div>
</div>
<!-- main part -->
<div class="row">
<div class="col s12 l3">
<div class="card">
<div class="card-content">
<span class="card-title"> Send Gift Ideas To Your Secret Santa:</span>
<form>
<input id="giftIdea" placeholder="Enter Here" type="text">
<button id="giftIdeaButton" class="btn btn-floating" type="button"><i class="material-icons">add</i></button>
</form>
<div id="yourGiftIdeas"></div>
</div>
</div>
</div>
<div class="col s12 l6">
<div class="card">
<div class="card-content">
<span class="card-title"> Buy a gift for: <span class = "partner">Partner</span></span>
<div id="partnerGiftIdeas"></div>
<div id="storeSelection">
<button id = "walmart" class="btn" type="button">Walmart</button>
<button id = "ebay" class="btn" type="button">Ebay</button>
</div>
<div id="productDisplay" class = "carousel"></div>
</div>
</div>
</div>
<div class="col s12 l3">
<div class="card">
<div class="card-content">
<span class="card-title">Group Members:</span>
<ul id="member-list" class="collection"></ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 center-align">
<h3>Chat!</h3>
<textarea rows="10" name="char" class="materialize-textarea" id="chat" style="height: 150px;overflow-y: scroll;"></textarea>
<div class="input-field">
<input type="text" name="message" placeholder="Type your message" id="message" style="height: 50px; width: 100%" />
</div>
<button class="btn-floating" id="sendToChat" >Send</button>
</div>
</div>
<script src="assets/javascript/mainDashboardScript.js"></script>
</body>
</html>