Morganatic · Caitlin3410 · Nov 2, 2019 · Nov 2, 2019 · Nov 2, 2019 · Nov 3, 2019
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -1 +1,28 @@
-# First-Project
+MoodSphere
+Project 1 - Mental Health Tracker - Moodsphere
+
+            Coders:
+Nadine- Authentication (log in)
+Morgan- Home/Welcome page Design
+Caitlin- Statistics (track entries)
+Loralee- API & README
+
+Objective: Create a functioning mental health tracker app.
+
+Motivation: Mental Health awareness is becoming more and more prevalent in today's culture, we are as a society learning that we need to focus more on mental health. As a group we all feel we can relate in some way, whether it's depression or anxiety or just stressed out. It is an important project to us and something we felt we all would use or would like to use for various reasons.
+
+Summary: We aim to create an app that will be useful in tracking an individuals' mental health. You will be required to create a login, scoring, tracking scores over time, include resources,etc.
+
+
+API’s used:
+1) MetaWeather
+
+2) Forismatic
+
+API’s considered:
+1)AccuWeather
+
+2)RapidAPI -Universal Inspirational Quotes
+
+
+
diff --git a/add-entry.html b/add-entry.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <!-- STANDARD META -->
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
+
+    <!-- SITE PROPERTIES -->
+    <title>Moodsphere - Home</title>
+
+    <!-- STYLESHEETS: SEMANTIC UI, ICONS -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" />
+    <link rel="stylesheet" type="type/css"
+        href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/themes/material/assets/fonts/icons.woff" />
+    <link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.css" />
+    <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css" />
+
+    <!-- CUSTOM STYLESHEET -->
+    <link rel="stylesheet" type="text/css" href="assets/css/add-entry_overview.css" />
+</head>
+
+<body>
+    <!-- NAVIGATION -->
+    <div class="ui sticky secondary pointing menu">
+        <a class="active item" href="homepage.html">
+            Home
+        </a>
+        <a id="add-entry-btn" class="item" href="add-entry.html">
+            Add Entry
+        </a>
+        <a class="item" href="overview.html">
+            Overview
+        </a>
+        <a class="item" href="discover.html">
+            Discover
+        </a>
+        <div class="right menu">
+            <a class="ui item" id="logout-btn">
+                Logout
+            </a>
+        </div>
+    </div>
+
+    <script type="text/javascript" src="assets/javascript/add-entry_overview.js"></script>
+    <script type="text/javascript" src="assets/javascript/app.js"></script>
+</body>
diff --git a/assets/.DS_Store b/assets/.DS_Store
diff --git a/assets/css/.DS_Store b/assets/css/.DS_Store
diff --git a/assets/css/discover.css b/assets/css/discover.css
@@ -0,0 +1,226 @@
+/*****************************
+COLORS
+#D9532D#ff9665#F9B38D
+#161E18#454E45#A9ABAA
+#61afbd#8FDAE7#F5EFEA
+
+exhilirated happy moderate sad depressed
+#C1EAF1#A3E0EB#8FDAE7#76B3BE#5C8B93
+*****************************/
+.site {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+}
+
+.site-content {
+  height: 80vw;
+  overflow-y: scroll;
+  padding: 0 5rem;
+}
+/*****************************
+NAVIGATION
+*****************************/
+.app-logo {
+  height: 2.25rem;
+  margin: 0.25rem 1rem;
+  width: 2.25rem;
+}
+.ui.header.item {
+  font-family: "Fira Sans", sans-serif;
+}
+.ui.secondary.pointing.menu {
+  margin-bottom: 0;
+}
+.ui.secondary.pointing.menu .item {
+  color: #161e18;
+}
+.ui.secondary.pointing.menu .item.app-name {
+  padding-left: 0;
+}
+.ui.secondary.pointing.menu a.item:hover {
+  color: #61afbd;
+  font-weight: 700;
+}
+.ui.secondary.pointing.menu .active.item {
+  background-color: transparent;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  border-bottom: 5px solid #61afbd;
+  font-weight: 700;
+  color: #61afbd;
+}
+.ui.secondary.pointing.menu a.active.item:hover {
+  color: #61afbd;
+  font-weight: 700;
+  border-color: #61afbd;
+}
+#logout-btn:hover {
+  background-color: #61afbd;
+  color: #ffffff;
+  font-weight: 700;
+}
+
+/*****************************
+MAIN SECTION
+*****************************/
+.ui.card {
+  background-repeat: no-repeat;
+  background-size: cover;
+  border: none;
+  border-radius: 20px;
+  box-shadow: 1px 1px 2px #454e45;
+  height: 150px;
+  width: 100%;
+}
+.ui.card.listen {
+  background-image: url("../pattern/pattern1-yellow.jpg");
+}
+.ui.card.watch {
+  background-image: url("../pattern/pattern1-green.jpg");
+}
+.ui.card.read {
+  background-image: url("../pattern/pattern1-blue.jpg");
+}
+.discover-section {
+  font-size: 1.5rem;
+  margin: 2rem 0;
+  padding: 1rem 1rem;
+  text-transform: uppercase;
+}
+.card-heading {
+  text-transform: uppercase;
+}
+.card-body {
+  margin-top: 15px;
+}
+#buttons {
+  /* Positioning */
+  margin: 50px 0;
+  /* Typography */
+  text-align: center;
+}
+
+button {
+  /* Box-model */
+  width: 200px;
+  height: 100px;
+}
+
+.swiper-button-prev {
+  color: #000;
+}
+
+.swiper-button-next {
+  color: #000;
+}
+
+/*****************************
+GRAPH
+*****************************/
+#graph {
+  border-top: 2px solid #22242615;
+  height: 20vw;
+}
+
+/*****************************
+ADD ENTRY
+*****************************/
+#add-entry-modal {
+  display: none; /* Hidden by default */
+  position: fixed; /* Stay in place */
+  z-index: 1; /* Sit on top */
+  left: 0;
+  top: 0;
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+  overflow: auto; /* Enable scroll if needed */
+  background-color: #161e18; /* Fallback color */
+  background-color: #161e1840; /* Black w/ opacity */
+}
+#mood-states {
+  margin: auto;
+}
+.column {
+  text-align: center;
+}
+.mood {
+  border: none;
+  border-radius: 50%;
+  box-shadow: 1px 1px 2px #a9abaa;
+  height: 50px;
+  width: 50px;
+}
+.button-clicked {
+  height: 65px;
+  width: 65px;
+}
+.mood-text {
+  font-size: 1.25rem;
+  margin-top: 1rem;
+}
+#exhilirated {
+  background-color: #c1eaf1;
+}
+#happy {
+  background-color: #a3e0eb;
+}
+#moderate {
+  background-color: #8fdae7;
+}
+#sad {
+  background-color: #76b3be;
+}
+#depressed {
+  background-color: #5c8b93;
+}
+.question {
+  font-size: 1.5rem;
+  margin: 1.5rem 0;
+}
+.answer-opt-1,
+.answer-opt-2,
+.answer-opt-3 {
+  border: 3px solid #f9b38d;
+  border-radius: 10px;
+  color: #000;
+  display: block;
+  font-size: 1.25rem;
+  margin: 1rem 0;
+  padding: 0.5rem;
+  width: 50%;
+}
+.answer-opt-1:hover,
+.answer-opt-2:hover,
+.answer-opt-3:hover {
+  background-color: #f9b38d;
+}
+.answer-selected {
+  background-color: #f9b38d;
+}
+.modal-btn {
+  background-color: #61afbd;
+  border: none;
+  border-radius: 10px;
+  color: #ffffff;
+  font-size: 1.25rem;
+  font-weight: 700;
+  margin-top: 2rem;
+  padding: 1rem;
+  text-transform: uppercase;
+}
+.modal-btn:hover {
+  background-color: #8fdae7;
+}
+/*****************************
+OVERVIEW
+*****************************/
+#category {
+  background-color: #e7fbff;
+  font-size: 1.25rem;
+  font-weight: 700;
+}
+.answers,
+.comment {
+  line-height: 2rem;
+}