From 7436525e7ff4a6f474cbdb90a7dd0e2aed13f72c Mon Sep 17 00:00:00 2001
From: Sanjida Islam <hk3351@wayne.edu>
Date: Thu, 14 Nov 2024 17:10:04 -0500
Subject: [PATCH] Updated discussion, clubhomepage, clubsetting, and myclubs
 HTML files

---
 .DS_Store                              | Bin 10244 -> 8196 bytes
 public/.DS_Store                       | Bin 0 -> 6148 bytes
 public/webpages/.DS_Store              | Bin 0 -> 6148 bytes
 public/webpages/css/loginreg.css       |  19 +-
 public/webpages/html/MyClubs.html      | 149 +++++++-------
 public/webpages/html/club.html         |   1 +
 public/webpages/html/clubSettings.html | 170 ++++++++--------
 public/webpages/html/clubhomepage.html | 258 +++++++++----------------
 public/webpages/html/discussion.html   |   2 +-
 9 files changed, 282 insertions(+), 317 deletions(-)
 create mode 100644 public/.DS_Store
 create mode 100644 public/webpages/.DS_Store

diff --git a/.DS_Store b/.DS_Store
index 0f0aefb3c303afdb5e66b35475d256951020f3f1..67ca26714c1140e0f5d5d1ef846c978ff5801ac9 100644
GIT binary patch
literal 8196
zcmeHM%We}f6unMEJ5i|!;*}jEu}wp0E2;`1O+&h1!KOj502DHr&<>rBqa;I+qDZrb
zPe9@m03jB93BLp9+HREBEZ86lc4Qwv?(yR|GtPC0NYs+x4pE7S97M+AI+7)U+c_?T
zoT=FW3h;?uQAj=NP@e`1*0#bbU=^?mSOu&CR)N1k0i4+!oQ!i{x7ySyU={c;72x-S
zi^%91Of{-k2NLB10Q0C;0eScVisKse45k_t6@6;&K^UqqE{4!_w7YB$^bDpNHJyZ}
zlQ1I-<Dm#OI(V)!C*f(dsa3!#u&4n0?pN@v>Cd$PE|n)=L7Gs+KK;W;w*5%@VDLk>
zk68Js!hQ|;jfwZ~Qwui$9jef4prm+?`3=@(%|wpq`h>~%24~}j6jOj+-m3eAjK0K8
z@HeOWy0o;fj5UZ4V4F4YM5q9Ef^plJN60f@SoM8aeVrO_3Bw=uyGEz)em4sHgKG7M
z$gSirtgbn0&bsrWaV&?8L2HooYpvchE<Khq^3U=u|4G;xHj7su$av5S<4#Wz!k`0_
z=TE~pki(ix;-Ig%4c*`roI<l$8jZGgcgpVe?%ufUj`p^yWp`)$?s!~quHCwQ@346i
zoyPK=S}h6lGR5A_hW98gS=pOLFOFn<gjQx=rY?56O(#f?uuGfxo=8>B*sUBhr}e%#
z*Fy$R@O(Z_slEzcLO#X|sXhDc5;tJ`Da-aB*_)a5&+STq4(R|-XPq7aD|AZ1tU~k!
z3VohZ2*ss=_t-^b^bDpNxr*!6DGapdKMP`mRp1;cu%hQ$V*mdj`~LqNt;kN*Dqt1(
zT?ItG-l+3Wcy+2TVe={PBECfAz;>xdML{z2LjdK;ABM=gFlCNsFx7|}1bY#nWUz@<
I;EyWs3t7<^ng9R*

literal 10244
zcmeHMO>bj06us_LqVv)w3`mI0pe)%mYWZe_P-f^XSg?UTA|Gv<A#I|h;bVicN8%^&
z6X2ilQ`oaA=UhK0evTbpHBte|FM7|;i_g9Gx%c|oj)<6N%i*a=TSN|UvwZaskI2Q}
zd2d~N<(p4X8sJ4PWGr(zmxbJHwazax1DS!$KxQB_kQw+dFo2xR>!4xF{LBnw1~LO{
z1~@;oakK1}<;s>ib>N{}0F?W9trzOp2Pmdpmff;k*;1j9X?G8%gqm`TVJsZKx7i$J
zw=7q-v~V#NE~eCM${mVP?ZCCQxtOjk^D{G$8Q5lkd-vB7Yxd*s->15h@8G$V3HS7$
zPo{(ZWZDOULG~1P=T@($&rokjPX^fck7X*?(vcT318NkYe&3)zJ43w*)KI=d%WGhl
zrOqhUJl<eWPEc=2AJ`sF8!l0sqBh6(4!+&Ul}xId&CeV3lc8!RW-8yJ*Ar;&%W10D
z=C2KQIg4W7Nn!U!8|*PTYieJ8z3-;5%JHw3V;%9EYb;M$2I&12KID!(IPMqgk;K?9
z<vqdakJOdtMi<Cai<I(idUufLMjXncjY@f_i4+*)93I6nCOk@Q<71AZJ~4oo1RkuG
z@sZ6aGU`pVjA>fSXir<fj-g`!PlBd(6eQ96zj){Z=s7HSg*!1$LF8047T{zoBUt@X
zJ}OZmpNN<WrhyZ>o<<s@=EnpIR;ZvJ0d=naW#e<W_Cgmip<cvGMZ#-4B%H*1q2vA2
z<0##Wgm==ut{1nruu@t=!XMSjKh^5Pdpkx^Ps00g35+pQPr?TY3AATD2_GgT(4O@q
zBs@`VQBT6h@jj?6e1AC9)8>E7ILe=oD-?I3ag*YljQN-&#c<B;BMuhjY_!1qdmUsM
zGUX%RSR;8R?sDo_XY6zN0g@Iv-iR#a%$L=Q%G!~i_rCUg*N%G*eK(pPX6Qo@w~RT5
z(TE|(Q_aepW$5GID+jY+)bLS<)7kJLa7)PFSSOf!nT;!mCggMev>c6r>>(@LxiIJ@
zXZ#Ab0FoJyd?vC#xePE9jBKRH1cn~B_lL*eA$sI6^o0?$Me>TW=;IDb+!XC2tkXj)
zdWv=XCHRQyQ2u-!jQ|tPJIb7oD!?1LqjeK;r_A}77TR-#cdXvHv2fH@<nY0#9)}O*
zOL>mBXYvKg4l>@b>Puv=f;iGOAuUDkILEhyy~tw)d5E@LAu;0(fJ|goa#_K>0!?<^
zF@wg?bK!lJ)(y0_YccxZj$Bkh9VyDKdoRV!yxS{gGWeUvU;*S9o=%%3W_;z)$262V
zYv)r*WL)LXM-{4r|L6@Rks*~kAM+R(#s;~dXN~Zo6_)V)*b2$5AhyO$U#*P$u9BT4
zwj|S|UrI8$h|Yub_Wid!TivzKZWXcBXIk{7B)d$vC7D*QNPeWdF|N8VutGeBEg3;$
z%rB|9L;O@Ew01~%5sRk^S`$cq+yes-td4dA<@5Ca|M$?7tRgdz8ThvtF#Bg;o$(0I
zBznNJ_BQTsaPwljl`R#52b=J{9>?PgkK^Ai-|?(YFZ|wR1?9??sNuTzKLf&ZjKu1O
y`P|gowYtn5>{XbzYf5k#I*`EpTvI|~HOMtuO$lxl8uo#^+Il?X{r~@D|Nl2x;ikF(

diff --git a/public/.DS_Store b/public/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..1cb71ce83d44a132d7ca7326a9d3119c1cecf77a
GIT binary patch
literal 6148
zcmeH~&u`N(6vv;pvbs!2J%F^Mr5(6bP_~I`LPDY24qOR>1E7+u)riRAs!7SAs+2SP
zUv}PK!oLIGXM57pj4M=?pJadi<GsZGD7IrF62tlU1yPrXBob@uA+mdn`#Cji%e8c%
z!aQR_`P)>V$El7R-oC*T@C4S40I%I0O6Zazx}f^{<xSxlY4F>a8G6k(F7v5d>o@T<
zP4c4O|0TAzTMu^HvMqPzm++e|!y+o?`7oM&;@W$y)A+U=#UGMMIqE(>(OD5C*<@w{
zlJNvCpFbwqSeHXR&&Iil4Q+?)$j+#{w^$quj(X~FaJ=lP#qmMEr;ZL^E|(qoWdHfA
zccbs=Wu||cQIo*_WbBdCTe(7^Hm4uqEK7BEfp(5*Q%>hJ1EDDuwcQPL#8Y^@zC&ll
zdqeoF%xZ;@q!Qmv3_kaNL2tn5*&Rj={|%wknAZv?U|2JAYeMd>*|_|0JONMO{}bT-
zK_RgQPAjWs>p*6%0MHhijiJoH4IHDK22Lxh=z$3v3bmoaT``0WN4s)<fz!&W4JY9)
zAHuy^xEqQvZ^!eMaVHU2^|>eD3DgN}+iI83|Fgf}|LZ}%<_UNL8%030PQ%k7rsU4n
y#^m^{RY+fv*x0YKYC@2?<Jc7VDBeRdhCamwXyCN6iWZpv5il5h<_Y{$0)GIxgYX#u

literal 0
HcmV?d00001

diff --git a/public/webpages/.DS_Store b/public/webpages/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..06adc078d100042f574890ca6fd293bf219f81fe
GIT binary patch
literal 6148
zcmeHKPfrs;6n_Inwji=Vi#2-K*oz575r~8sLn#<V4-l4M5wPsGLs{9*G`m|W5|W-Z
z@dNk)yn5wq;#ctC#V_E&vlo5yr)WV=CdQC`$;|J~`!mz`+wRN`0FZpWd>g<700W!A
zL=Sd<5aAc?lyqoI7a|dJ@RI9u7e`{cSYifZ2L5*j#Jk%GB?uv0@Y~+sS@hieAw?FE
zfE|dS3jT?>_h-eqjj*QogCn=*dto#-_K9?KCb}+k8{I~)v1#w{h8;OkJ<L17x)`l+
z?z=7BaaTRsD4MA`&LYQSG>{2inPSMs6OWa7BhTxs9Lii<IgF%{ESi~vgYl`!QEOsq
z`f$`bm>wS+wI(O-93Cc(boSQW<>IbiW&D+_3<&OCQu;Ku;5918b$g{fT@U%ts^^Po
zwkk^Y^j_?{)Nc+94h^IR(&_Z@<#gss=4#O#a-Gs{B@n-Kj{7{w`*m9IN}So=OInEN
zi%2L%bMQpmGA%#*Wm?&<VNB|mLC*Ccpp>mw0<XNdy&cl1@SDC?H2cF+z<qy-hhF4y
zwzd%>$qNy!F0gHmEAAn|i#6d2S7{I;p2{g~`i@KeMV9AL#H(vg5IC$t^ZO!F%!Y+5
z1ysx=*S2d;$zzr5%s0hiHn-GLZYafstWxk?NwqYMB)P&kqseUUv9=g60<-W4Z2bQ<
z;0?TmcW?wB;WK=N?<7Hn$#pV9CdoZALmrX^@|3KTE#j!`j@FaC*1isTj^pDeyJrW?
z=d6OZR(yN-`5ft5jo$NFUR+hoK+M2jFd+5^3!A{4#->8Kbzmp20Eh`ROF><J{3BYz
zfSA+RREQQ7qEZo6D$!RAqVEnwrK3Nm<C_XqIuN-s&ZAc*`i4UE)q_|v97s-K+{X;W
z474-QsfMOF|L>oD|8Gx<M==921LukXl9;#W^H`ETTTc}y&RPrG7B(RwuBlL_V5g5`
hsfeREgG~zhETJIgG&U8Y1ttCvkTk?y%)mco;3r<*+noRa

literal 0
HcmV?d00001

diff --git a/public/webpages/css/loginreg.css b/public/webpages/css/loginreg.css
index c40d326..e69ab08 100644
--- a/public/webpages/css/loginreg.css
+++ b/public/webpages/css/loginreg.css
@@ -185,5 +185,22 @@ body {
     button:hover {
         background-color: #e03e00; 
     }
+    #loading {
+      text-align: center;
+      font-size: 1.2em;
+      color: #888;
+    }
+    
+    button:hover {
+      background-color: #45a049;
+      transform: scale(1.05);
+      transition: transform 0.3s ease-in-out;
+    }
     
-  
\ No newline at end of file
+    /* Make the text area resizeable */
+    textarea {
+      resize: vertical;
+      min-height: 80px;
+    }
+ 
+
diff --git a/public/webpages/html/MyClubs.html b/public/webpages/html/MyClubs.html
index 21eb89f..7604f61 100644
--- a/public/webpages/html/MyClubs.html
+++ b/public/webpages/html/MyClubs.html
@@ -7,29 +7,40 @@
     <link rel="stylesheet" href="../css/join.css">
     <link rel="stylesheet" href="../css/dashboard.css">
     <style>
-        /* Global styles to ensure layout consistency */
+        /* Global styles */
         body {
             font-family: Arial, sans-serif;
             margin: 0;
             padding: 0;
-            background-color: #f4f4f4;
+            background-color: #f4f4f9;
+            color: #333;
         }
 
         header {
-            background-color: #fff;
-            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+            background-color: #3E4E5E;
+            padding: 15px 20px;
+            color: #ffffff;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
         }
 
         .header-container {
             display: flex;
             justify-content: space-between;
-            padding: 20px;
+            align-items: center;
         }
 
         .logo-container img {
             max-height: 40px;
         }
 
+        .site-title a {
+            color: #ffffff;
+            text-decoration: none;
+            font-size: 1.5em;
+            margin-left: 10px;
+            font-weight: bold;
+        }
+
         .nav-container {
             display: flex;
             align-items: center;
@@ -43,35 +54,35 @@
         }
 
         .nav-list li {
-            margin-right: 20px;
+            margin-right: 15px;
         }
 
         .nav-list li a {
             text-decoration: none;
-            color: #333;
-            font-size: 16px;
+            color: #ffffff;
+            font-size: 1em;
+            font-weight: bold;
         }
 
         .search-form {
             display: flex;
             align-items: center;
+            margin-right: 20px;
         }
 
         .search-input {
             padding: 8px;
-            margin-right: 10px;
             border-radius: 4px;
             border: 1px solid #ccc;
+            font-size: 14px;
+            outline: none;
         }
 
         .search-button {
             background-color: transparent;
             border: none;
             cursor: pointer;
-        }
-
-        .search-button img {
-            width: 20px;
+            margin-left: 5px;
         }
 
         .user-dropdown {
@@ -83,102 +94,88 @@
             position: absolute;
             top: 100%;
             right: 0;
-            background-color: white;
+            background-color: #fff;
             border: 1px solid #ddd;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
             list-style: none;
             margin: 0;
             padding: 0;
+            border-radius: 8px;
+            overflow: hidden;
         }
 
         .dropdown-menu li {
-            padding: 10px;
+            padding: 10px 15px;
         }
 
         .dropdown-menu li a {
             text-decoration: none;
             color: #333;
+            font-size: 14px;
+            display: block;
         }
 
         .user-dropdown:hover .dropdown-menu {
             display: block;
         }
 
-        /* Form Container */
-        .form-container {
-            background-color: #fff;
+        /* Book Clubs Section */
+        .book-clubs-container {
+            max-width: 900px;
+            margin: 30px auto;
             padding: 20px;
+            background-color: #fff;
             border-radius: 8px;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            width: 100%;
-            max-width: 400px;
-            margin: 50px auto; /* Center the form */
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
         }
 
-        .form-container h2 {
-            text-align: center;
+        .book-clubs-container h1 {
+            font-size: 1.8em;
+            color: #3E4E5E;
             margin-bottom: 15px;
-        }
-
-        .form-container input {
-            width: 100%;
-            padding: 10px;
-            margin: 10px 0;
-            border: 1px solid #ccc;
-            border-radius: 4px;
-        }
-
-        .form-container button {
-            width: 100%;
-            padding: 10px;
-            background-color: #4CAF50;
-            color: white;
-            border: none;
-            border-radius: 4px;
-            cursor: pointer;
-        }
-
-        .form-container button:hover {
-            background-color: #45a049;
-        }
-
-        /* Book Clubs List */
-        .book-clubs-container {
-            max-width: 900px;
-            margin: 50px auto;
-            padding: 20px;
+            text-align: center;
+            border-bottom: 2px solid #3E4E5E;
+            padding-bottom: 10px;
         }
 
         .book-club-item {
-            background-color: #fff;
+            background-color: #f9f9f9;
             padding: 20px;
-            margin-bottom: 20px;
+            margin: 15px 0;
             border-radius: 8px;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+            transition: box-shadow 0.3s ease;
+        }
+
+        .book-club-item:hover {
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
         }
 
         .book-club-item h3 {
-            margin-top: 0;
+            font-size: 1.5em;
             color: #333;
+            margin-top: 0;
         }
 
         .book-club-item p {
             font-size: 14px;
-            color: #555;
+            color: #666;
             margin: 10px 0;
         }
 
         .book-club-item button {
-            background-color: #4CAF50;
-            color: white;
-            border: none;
+            background-color: #3E4E5E;
+            color: #ffffff;
             padding: 10px 15px;
+            border: none;
             border-radius: 4px;
+            font-size: 1em;
             cursor: pointer;
+            transition: background-color 0.3s ease;
         }
 
         .book-club-item button:hover {
-            background-color: #45a049;
+            background-color: #2d3b4b;
         }
     </style>
 </head>
@@ -187,13 +184,13 @@
         <div class="header-container">
             <div class="logo-container">
                 <img src="../../images/logo1.png" alt="PageTurners Logo" class="logo">
-                <span class="site-title"><a href="dashboard.html">PageTurners</a></span>
+                <span class="site-title"><a href="dashboard.html">PageTurners Book Club</a></span>
             </div>
             <nav class="nav-container">
                 <ul class="nav-list">
                     <li><a href="dashboard.html" class="loginbutton">Home</a></li>
                     <li class="user-dropdown">
-                        <img src="https://img.icons8.com/ios-glyphs/30/000000/user.png" alt="User Icon" class="user-icon" onclick="toggleDropdown()">
+                        <img src="https://img.icons8.com/ios-glyphs/30/000000/user.png" alt="User Icon" class="user-icon">
                         <ul class="dropdown-menu" id="user-dropdown-menu">
                             <li><a href="#">Discussions</a></li>
                             <li><a href="#">Account</a></li>
@@ -203,7 +200,7 @@
                     <li>
                         <form class="search-form" action="/search" method="GET">
                             <input type="text" name="query" placeholder="Search for books, clubs, or authors" class="search-input" id="search-input">
-                            <button type="button" class="search-button" onclick="toggleSearch()">
+                            <button type="button" class="search-button">
                                 <img src="https://img.icons8.com/ios-glyphs/30/000000/search.png" alt="Search" class="search-icon">
                             </button>
                         </form>
@@ -216,14 +213,21 @@
     <main>
         <!-- Book Clubs List Section -->
         <div class="book-clubs-container" id="list1">
-        <h1>Clubs Pending Acceptance</h1>
-            
-
+            <h1>Clubs Pending Acceptance</h1>
+            <div class="book-club-item">
+                <h3>Sample Club 1</h3>
+                <p>Description of the club goes here.</p>
+                <button>Join</button>
+            </div>
         </div>
+        
         <div class="book-clubs-container" id="list2">
-        <h1>Your Clubs</h1>
-            
-
+            <h1>Your Clubs</h1>
+            <div class="book-club-item">
+                <h3>Sample Club 2</h3>
+                <p>Description of the club goes here.</p>
+                <button>Leave</button>
+            </div>
         </div>
     </main>
 
@@ -231,3 +235,4 @@ <h1>Your Clubs</h1>
 </body>
 <script type="module" src="../../scripts/clublist.js"></script>
 </html>
+
diff --git a/public/webpages/html/club.html b/public/webpages/html/club.html
index 9d269a2..f536aad 100644
--- a/public/webpages/html/club.html
+++ b/public/webpages/html/club.html
@@ -173,3 +173,4 @@ <h1>Give Your Club a Name</h1>
     </footer>
   </body>
 </html>
+
diff --git a/public/webpages/html/clubSettings.html b/public/webpages/html/clubSettings.html
index f249525..41b3f00 100644
--- a/public/webpages/html/clubSettings.html
+++ b/public/webpages/html/clubSettings.html
@@ -1,87 +1,97 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Club Settings</title>
-    <link rel="stylesheet" href="../css/created.css" />
-  </head>
-  <body>
-    <div class="container">
-      <aside class="sidebar">
-        <div class="profile-container">
-          
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Club Settings</title>
+  <link rel="stylesheet" href="../css/created.css" />
+</head>
+<body>
+  <div class="container">
+    <!-- Sidebar -->
+    <aside class="sidebar">
+      <div class="profile-container">
+        <label for="profile-pic-upload" class="upload-btn">Change Profile Picture</label>
+        <input
+          type="file"
+          id="profile-pic-upload"
+          accept="image/*"
+          onchange="changeProfilePicture()"
+          style="display: none"
+        />
+      </div>
+      <nav class="sidebar-nav">
+        <ul>
+          <li><a href="overview.html">Overview</a></li>
+          <li><a href="members.html">Members</a></li>
+          <li><a href="meetings.html">Meetings</a></li>
+          <li><a href="clubSettings.html">Club Settings</a></li>
+          <li><a href="logout.html">Logout</a></li>
+        </ul>
+      </nav>
+    </aside>
+
+    <!-- Main Content -->
+    <main class="main-content">
+      <h2>Edit Club Settings</h2>
+      <form class="club-settings-form" id="clubmanage" method="POST" action="saveSettings.php">
+        <div class="form-group">
+          <label for="currBook">Title of Current Book</label>
           <input
-            type="file"
-            id="profile-pic-upload"
-            accept="image/*"
-            onchange="changeProfilePicture()"
-            style="display: none"
+            type="text"
+            id="currBook"
+            name="currBook"
+            placeholder="Enter the current book title"
+            required
           />
-          <button
-            onclick="document.getElementById('profile-pic-upload').click()"
-            class="upload-btn"
-          >
-            Change Profile Picture
-          </button>
         </div>
-        <nav class="sidebar-nav">
-          <ul>
-            <li><a onclick="window.location='overview.html' + window.location.search;">Overview</a></li>
-            <li><a onclick="window.location='members.html' + window.location.search;">Members</a></li>
-            <li><a onclick="window.location='meetings.html' + window.location.search;">Meetings</a></li>
-            <li><a onclick="window.location='clubSettings.html' + window.location.search;">Club Settings</a></li>
-            <li><a href="logout.html">Logout</a></li>
-          </ul>
-        </nav>
-      </aside>
-      <main class="main-content">
-        <h2>Edit Club Name and Description</h2>
-        <form class="club-settings-form" id="clubmanage">
-          <div class="form-group">
-            <label for="club-name">Title of Current Book</label>
-            <input
-              type="text"
-              id="currBook"
-              placeholder=""
-              value=""
-            />
-          </div>
-          <div class="form-group">
-            <label for="club-description">This Weeks Reading</label>
-            <textarea
-              id="currentReading"
-              placeholder=""
-            ></textarea>
-          </div>
-          <div class="form-group">
-            <label for="club-name">Discussion Topic</label>
-            <input
-              type="text"
-              id="DiscTopic"
-              placeholder=""
-              value=""
-            />
-          </div>
-          <div class="form-group">
-            <!-- <label>Clear Current Discussion?</label><input type="checkbox" id="del"/> </div> -->
-          <button type="submit" class="save-btn">Save Changes</button>
-        </form>
-      </main>
-    </div>
-    <script>
-      // Function to change profile picture preview
-      function changeProfilePicture() {
-        const file = document.getElementById("profile-pic-upload").files[0];
-        if (file) {
-          const reader = new FileReader();
-          reader.onload = function (e) {
-            document.getElementById("profile-pic").src = e.target.result;
-          };
-          reader.readAsDataURL(file);
-        }
+
+        <div class="form-group">
+          <label for="currentReading">This Week's Reading</label>
+          <textarea
+            id="currentReading"
+            name="currentReading"
+            placeholder="Describe this week's reading"
+            rows="4"
+            required
+          ></textarea>
+        </div>
+
+        <div class="form-group">
+          <label for="DiscTopic">Discussion Topic</label>
+          <input
+            type="text"
+            id="DiscTopic"
+            name="DiscTopic"
+            placeholder="Enter the discussion topic"
+            required
+          />
+        </div>
+
+        <!-- Optional Clear Discussion -->
+        <div class="form-group">
+          <label for="clearDiscussion">Clear Current Discussion</label>
+          <input type="checkbox" id="clearDiscussion" name="clearDiscussion" />
+        </div>
+
+        <button type="submit" class="save-btn">Save Changes</button>
+      </form>
+    </main>
+  </div>
+
+  <script>
+    // Function to change profile picture preview
+    function changeProfilePicture() {
+      const file = document.getElementById("profile-pic-upload").files[0];
+      if (file) {
+        const reader = new FileReader();
+        reader.onload = function (e) {
+          document.getElementById("profile-pic").src = e.target.result;
+        };
+        reader.readAsDataURL(file);
       }
-    </script>
-    <script type="module" src="../../scripts/clubSettings.js"></script>
-  </body>
+    }
+  </script>
+  <script type="module" src="../../scripts/clubSettings.js"></script>
+</body>
 </html>
diff --git a/public/webpages/html/clubhomepage.html b/public/webpages/html/clubhomepage.html
index 426f035..bbebce3 100644
--- a/public/webpages/html/clubhomepage.html
+++ b/public/webpages/html/clubhomepage.html
@@ -1,25 +1,9 @@
-<!-- <!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-</head>
-<body>
-    <script type="module" src="../../scripts/clubhome.js"></script>
-    <h1 id="clubName">Club Name</h1>
-    <h2 id="clubDescription">club clubDescription</h2>
-    <ul id="members">members</ul>
-
-    <a id="manage" href="overview.html?">Manage Club</a>
-</body>
-</html> -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Book Club Homepage</title>
+    <title>PageTurners Book Club</title>
     <link rel="stylesheet" href="../css/club.css" />
     <link rel="stylesheet" href="../css/dashboard.css" />
     <style>
@@ -35,96 +19,106 @@ <h2 id="clubDescription">club clubDescription</h2>
             background-color: #f4f4f4;
             color: #333;
             line-height: 1.6;
-            padding: 20px;
         }
 
+        /* Header and Navigation */
         header {
-            text-align: center;
-            margin-bottom: 30px;
+            background-color: #4CAF50;
+            color: white;
+            padding: 15px;
+            text-align: left;
+            margin-bottom: 3-px;
         }
 
         header h1 {
             font-size: 2.5em;
-            color: #333;
+            
+            
         }
 
-        header p {
-            font-size: 1.2em;
-            color: #555;
+        nav ul {
+            display: flex;
+            justify-content: center;
+            list-style: none;
+            margin-top: 10px;
         }
 
-        .manage-club-btn {
-            display: inline-block;
-            padding: 10px 20px;
-            background-color: #4CAF50;
+        nav a {
             color: white;
-            font-size: 1.1em;
             text-decoration: none;
-            border-radius: 5px;
-            margin-top: 20px;
-            margin-bottom: 30px;
-            cursor: pointer;
+            padding: 10px 20px;
             transition: background-color 0.3s;
         }
 
-        .manage-club-btn:hover {
+        nav a:hover {
             background-color: #45a049;
+            border-radius: 5px;
         }
 
-        .section {
+        /* Club Information Section */
+        .club-info {
+            text-align: center;
+            margin-bottom: 40px;
             background-color: #fff;
             padding: 20px;
             border-radius: 8px;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            margin-bottom: 30px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
         }
 
-        .section h2 {
-            font-size: 1.8em;
-            margin-bottom: 10px;
+        .club-info h2 {
+            font-size: 2em;
             color: #4CAF50;
+            margin-bottom: 10px;
         }
 
-        .section p {
+        .club-info p {
             font-size: 1.1em;
             color: #666;
+            max-width: 700px;
+            margin: auto;
         }
 
-        /* Club Title and Description Section */
-        .club-info {
-            text-align: center;
-            margin-bottom: 40px;
-        }
-
-        .club-info h2 {
-            margin-bottom: 10px;
-            color: #4CAF50;
+        /* Manage Club Button */
+        .manage-club-btn {
+            display: inline-block;
+            padding: 12px 24px;
+            background-color: #4CAF50;
+            color: white;
+            font-size: 1em;
+            text-decoration: none;
+            border-radius: 5px;
+            transition: background-color 0.3s;
+            margin-top: 15px;
         }
 
-        .club-info p {
-            margin-bottom: 20px;
+        .manage-club-btn:hover {
+            background-color: #45a049;
         }
 
-        /* Layout for User List and Current Book side by side */
+        /* Main Content Layout */
         .main-content {
             display: flex;
             justify-content: space-between;
-            gap: 30px;
-            margin-bottom: 30px;
+            gap: 20px;
+            max-width: 1100px;
+            margin: auto;
+            padding: 20px;
         }
 
         .user-list, .book-info {
-            width: 48%; /* Ensures a balanced layout */
-        }
-
-        .user-list ul, .book-info div {
-            padding: 10px;
             background-color: #fff;
+            padding: 20px;
             border-radius: 8px;
             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            width: 48%;
+        }
+
+        .user-list h2, .book-info h2 {
+            font-size: 1.8em;
+            color: #4CAF50;
+            margin-bottom: 15px;
         }
 
-        /* User List Styling */
         .user-list ul {
             list-style-type: none;
             padding: 0;
@@ -132,34 +126,36 @@ <h2 id="clubDescription">club clubDescription</h2>
 
         .user-list li {
             background-color: #f9f9f9;
-            padding: 10px;
+            padding: 8px;
             margin: 5px 0;
             border-radius: 4px;
-            box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
         }
 
-        /* Current Book Styling */
         .book-info h3 {
-            margin-bottom: 10px;
+            font-size: 1.5em;
+            margin: 10px 0;
         }
 
         .book-info img {
-            width: 100px;
+            width: 120px;
             height: auto;
-            border-radius: 5px;
-            margin-right: 20px;
+            border-radius: 8px;
+            margin: 10px 0;
         }
 
-        /* Discussion Section */
+        /* Discussion Board Section */
         .discussion-board {
-            background-color: #f9f9f9;
+            max-width: 1100px;
+            margin: 40px auto;
+            background-color: #fff;
             padding: 20px;
             border-radius: 8px;
             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         }
 
         .discussion-board h3 {
-            font-size: 1.4em;
+            font-size: 1.8em;
+            color: #4CAF50;
             margin-bottom: 15px;
         }
 
@@ -169,137 +165,73 @@ <h2 id="clubDescription">club clubDescription</h2>
         }
 
         .discussion-board li {
-            background-color: #fff;
+            background-color: #f9f9f9;
             padding: 10px;
             margin-bottom: 10px;
             border-radius: 4px;
-            box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-        }
-
-        .discussion-board li p {
-            margin: 0;
-            font-size: 1em;
-            color: #444;
-        }
-
-        .discussion-board li small {
-            color: #777;
-            font-size: 0.9em;
         }
 
         .discussion-board button {
+            display: block;
+            padding: 10px;
             background-color: #4CAF50;
             color: white;
-            padding: 10px;
+            font-size: 1em;
             border: none;
-            border-radius: 4px;
+            border-radius: 5px;
             cursor: pointer;
-            margin-top: 10px;
+            margin-top: 15px;
         }
 
         .discussion-board button:hover {
             background-color: #45a049;
         }
-
-        .bold{
-            font-weight: bold;
-        }
-        .underline{
-            text-decoration: underline;
-        }
-
-        #header {
-            text-align: center;
-            margin-bottom: 30px;
-        }
-
-        #header h1 {
-            text-align: left;
-            font-size: 2.5em;
-            color: #333;
-        }
-
-        #header p {
-            text-align: center;
-            font-size: 1.2em;
-            color: #555;
-        }
-
     </style>
 </head>
 <body>
     <header>
-        <div class="header-container">
-            <div class="logo-container">
-                <img src="../../images/logo1.png" alt="PageTurners Logo" class="logo">
-                <span class="site-title"><a href="dashboard.html">PageTurners</a></span>
-            </div>
-            <nav class="nav-container">
-                <ul class="nav-list">
-                    <li><a href="dashboard.html" class="loginbutton">Home</a></li>
-                    <li class="user-dropdown">
-                        <img src="https://img.icons8.com/ios-glyphs/30/000000/user.png" alt="User Icon" class="user-icon" onclick="toggleDropdown()">
-                        <ul class="dropdown-menu" id="user-dropdown-menu">
-                            <li><a href="#">Discussions</a></li>
-                            <li><a href="#">Account</a></li>
-                            <li><a href="logout.html">Logout</a></li>
-                        </ul>
-                    </li>
-                    <li>
-                        <form class="search-form" action="/search" method="GET">
-                            <input type="text" name="query" placeholder="Search for books, clubs, or authors" class="search-input" id="search-input">
-                            <button type="button" class="search-button" onclick="toggleSearch()">
-                                <img src="https://img.icons8.com/ios-glyphs/30/000000/search.png" alt="Search" class="search-icon">
-                            </button>
-                        </form>
-                    </li>
-                </ul>
-            </nav>
-        </div>
+        <h1>PageTurners Book Club</h1>
+        <nav>
+            <ul>
+                <li><a href="dashboard.html">Home</a></li>
+                <li><a href="#">Discussions</a></li>
+                <li><a href="#">Account</a></li>
+                <li><a href="logout.html">Logout</a></li>
+            </ul>
+        </nav>
     </header>
-        <div id="header">
-            <h1 id="clubName">Welcome to the "PageTurners" Book Club</h1>
-            <p>Your home for book discussions</p>
-            <!-- Manage Club Button -->
-            <a href="manage-club.html" id="manage" class="manage-club-btn">Manage Club</a>
-        </div>
 
-    <!-- Club Title and Description Section -->
-    <section class="section club-info">
-        <h2>About Our Club</h2>
-        <p id="clubDescription">PageTurners is a friendly and inclusive book club where readers from all over the world come together to share their love of books. Whether you’re a fan of fantasy, fiction, non-fiction, or mysteries, we have something for everyone. Our mission is to create a space where readers can discover new books, engage in meaningful discussions, and build a community around their shared love of reading.</p>
+    <section class="club-info">
+        <h2>Welcome to PageTurners</h2>
+        <p>PageTurners is a friendly and inclusive book club where readers come together to share their love of books. We have something for everyone—fantasy, fiction, mysteries, and more! Join us to discover new books, engage in meaningful discussions, and build a community.</p>
+        <a href="manage-club.html" class="manage-club-btn">Manage Club</a>
     </section>
 
-    <!-- User List and Current Book Section (Horizontal Layout) -->
     <section class="main-content">
-        <!-- User List -->
         <div class="user-list">
             <h2>Current Members</h2>
             <ul id="members">
+                <!-- Members will be dynamically loaded here -->
             </ul>
         </div>
 
-        <!-- Current Book -->
         <div class="book-info">
             <h2>Current Book</h2>
-            <div>
-                <img src="https://via.placeholder.com/100x150.png?text=Book+Cover" alt="Current Book Cover">
-            </div>
-            <div>
-                <h3 id="booktitle">NO CURRENT BOOK</h3>
-                <h2>Reading for the Week</h2>
-                <p id = "bookdesc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque suscipit auctor finibus. Integer ultricies sollicitudin faucibus. Curabitur semper vel justo varius tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque lacinia lobortis elit, ut dignissim tellus. Proin in metus nisi.</p>
+            <img src="https://via.placeholder.com/120x180.png?text=Book+Cover" alt="Book Cover">
+            <h3 id="booktitle">NO CURRENT BOOK</h3>
+            <p id="bookdesc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque suscipit auctor finibus.</p>
         </div>
     </section>
 
-    <!-- Discussion Board Section -->
-    <section class="section discussion-board">
+    <section class="discussion-board">
         <h3>Discussion Board</h3>
         <h2 id="disctopic">Current Topic: None</h2>
         <ul id="disc">
+            <!-- Discussion posts will be dynamically loaded here -->
         </ul>
-        <a id="post"><button>Add Your Own Post</button>
+        <button id="post">Add Your Own Post</button>
     </section>
+
     <script type="module" src="../../scripts/clubhome.js"></script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/public/webpages/html/discussion.html b/public/webpages/html/discussion.html
index 90cda40..19c799c 100644
--- a/public/webpages/html/discussion.html
+++ b/public/webpages/html/discussion.html
@@ -89,4 +89,4 @@ <h2 id="discussion-title"></h2>
     });
   </script>
 </body>
-</html>
+</html>
\ No newline at end of file