Add new flashcard page and adding some comments,

fixing user editing form to serializeArray.
Batsuuri77 · May 27, 2024 · 11d9f06 · 11d9f06
1 parent 5f75735
commit 11d9f06
Show file tree

Hide file tree

Showing 6 changed files with 377 additions and 118 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/client/css/style.css b/client/css/style.css
@@ -298,3 +298,70 @@ button {
 	color: #333333;
 }
 
+.wrap.home {
+	display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+}
+
+
+#contentWrapper {
+    width: 100%;
+    display: flex;
+	flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+}
+
+#contentWrapper img {
+    margin-right: auto;
+    margin-left: auto;
+    display: block; 
+}
+
+#homeContent {
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    flex-direction: column;
+    margin-left: 20px;
+}
+
+#subjectBox {
+    width: 250px;
+    height: 100px;
+    border-radius: 0.5em;
+    border: #b3b3b3 1px solid;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+#subjectBox1 div {
+	display: flex;
+	flex-direction: row;
+	align-items: start;
+	justify-content: start;
+}
+
+#cardBox {
+    width: 250px;
+    height: 150px;
+    border-radius: 0.5em;
+    border: #b3b3b3 1px solid;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+#cardBox1 div {
+	display: flex;
+	flex-direction: row;
+	align-items: start;
+	justify-content: start;
+}
+
+#homeBtn {
+    width: 80%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
diff --git a/client/img/Blue.png b/client/img/Blue.png
diff --git a/client/index.html b/client/index.html
@@ -25,7 +25,9 @@
 	<div id="mySidenav" class="sidenav">
 		<a href="#" onclick="closeNav()">Close Menu</a>
 		<a href="#userProfilePage" onclick="closeNav()">Profile</a>
-		<a href="#flashcardPage" onclick="closeNav()">My-Flash-Cards</a>
+		<a href="#libraryPage" onclick="closeNav()">My-Flash-Cards</a>
+		<a href="#homePage" onclick="closeNav()">My-Flash-Cards</a>
+		<a href="#addNewCard" onclick="closeNav()">ADD NEW CARD</a>
 		<a href="#contactPage" onclick="closeNav()">Contact</a>
 		<a href="#loginPage" onclick="closeNav()">Logout</a>
 	</div>
@@ -195,7 +197,7 @@ <h1>Contact Us</h1>
 	</div>
 
 	<!------------------------Add new card page---------------------------->
-	<div data-role="page" id="homePage">
+	<div data-role="page" id="addNewCard">
 		<!------------------------Header---------------------------->
 			<div data-role="header" class="header" data-theme="d" data-position="fixed">
 				<a rel="external" class="ui-btn ui-icon-bars ui-btn-icon-notext ui-corner-all" onclick="openNav()"></a>
@@ -210,13 +212,13 @@ <h3>ADD NEW CARD</h3>
 				<label for="question">Insert a question</label>
 				<input type="text" id="question" name="question" required><br>
 				<label for="answer">Insert an answer</label>
-				<input type="text" id="answer" name="answer" required><br>
+				<textarea type="text" id="answer" name="answer" required></textarea><br>
 				<label for="cardType">Choose a card type</label>
 				<select name="cardType" id="cardType">
 					<option value="public">Public</option>
 					<option value="private">Private</option>
 				</select><br><br>
-				<button type="button"  class="ui-btn ui-shadow ui-corner-all ui-btn-d">Save Flashcard</button>
+				<button type="button" id="saveCardBtn"  class="ui-btn ui-shadow ui-corner-all ui-btn-d">Save Flashcard</button>
 				<button onclick="toggleView()"  class="ui-btn ui-shadow ui-corner-all ui-btn-c">View Flashcards</button>
 			</form>
 		</div>
@@ -225,6 +227,42 @@ <h3>ADD NEW CARD</h3>
 		</div>
 	</div>
 
+	<!------------------------Home page---------------------------->
+	<div data-role="page" id="homePage">
+		<!------------------------Header---------------------------->
+			<div data-role="header" class="header" data-theme="d" data-position="fixed">
+				<a rel="external" class="ui-btn ui-icon-bars ui-btn-icon-notext ui-corner-all" onclick="openNav()"></a>
+				<h1>My-Flash-Card</h1>
+			</div>
+		<!------------------------Main content---------------------------->
+		<div class="wrap home">
+			<div id="contentWrapper">
+				<img src="/client/img/Blue.png" title="logo" width="70%">
+				<div id="homeContent">
+					<div id="subjectBox1">
+						<span class="textcolor">Subject</span>
+						<div id="subjectBox">
+							<div id="subject"></div>
+							<div id="cardNumber"></div>
+							<div id="userName"></div>
+						</div>
+					</div><br>
+					<div id="cardBox1">
+						<span class="textcolor">Recent</span>
+						<div id="cardBox"></div><br>
+					</div>
+				</div>
+			</div>
+			<div id="homeBtn">
+				<button id="addNewCard" class="ui-btn ui-shadow ui-corner-all ui-btn-d">Add new card</button>
+				<button id="Library" class="ui-btn ui-shadow ui-corner-all ui-btn-c">Library</button>
+			</div>
+		</div>
+		<div data-role="footer" data-theme="d" data-position="fixed" class="footer" style="text-align:center;">
+			<p>Copyright © My-Flash-Card 2024</p>
+		</div>
+	</div>
+
 	<!------------------------FlashCard page---------------------------->
 	<div data-role="page" id="flashcardPage">
 		<!-- Header -->