33< head >
44 < meta charset ="UTF-8 ">
55 < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
6- < title > Scratch Coding Hut | Wiki</ title >
6+ < title > Scratch Coding Hut Wiki</ title >
77 < style >
8+ /* Reset some default styling */
9+ * {
10+ margin : 0 ;
11+ padding : 0 ;
12+ box-sizing : border-box;
13+ }
14+
815 body {
9- font-family : Arial, sans-serif;
10- padding : 20px ;
16+ font-family : 'Arial' , sans-serif;
17+ background : # fff4f4 ;
18+ color : # 333 ;
19+ padding : 40px ;
20+ display : flex;
21+ flex-direction : column;
22+ align-items : center;
23+ text-align : center;
1124 }
1225
1326 h1 {
14- color : # 333 ;
27+ font-size : 3rem ;
28+ color : # ff4d4d ;
29+ margin-bottom : 30px ;
30+ font-weight : bold;
1531 }
1632
1733 .form-container {
34+ background-color : # ffcccc ;
35+ padding : 30px ;
36+ border-radius : 10px ;
37+ box-shadow : 0px 4px 10px rgba (0 , 0 , 0 , 0.1 );
38+ width : 100% ;
39+ max-width : 500px ;
40+ margin-bottom : 30px ;
41+ }
42+
43+ .form-container h2 {
44+ font-size : 1.5rem ;
45+ color : # e60000 ;
1846 margin-bottom : 20px ;
1947 }
2048
2149 input , textarea {
2250 width : 100% ;
23- margin : 5px 0 ;
24- padding : 10px ;
51+ padding : 15px ;
52+ margin-bottom : 15px ;
53+ border-radius : 8px ;
54+ border : 2px solid # e60000 ;
55+ font-size : 1rem ;
56+ outline : none;
57+ }
58+
59+ input : focus , textarea : focus {
60+ border-color : # ff4d4d ;
61+ box-shadow : 0 0 5px rgba (255 , 77 , 77 , 0.5 );
2562 }
2663
2764 button {
28- background-color : # 4CAF50 ;
65+ background-color : # ff4d4d ;
2966 color : white;
30- padding : 10 px 20 px ;
67+ padding : 15 px 30 px ;
3168 border : none;
69+ border-radius : 8px ;
3270 cursor : pointer;
71+ font-size : 1.1rem ;
72+ transition : background-color 0.3s ease;
3373 }
3474
3575 button : hover {
36- background-color : # 45a049 ;
76+ background-color : # ff1a1a ;
3777 }
3878
3979 .wikis-container {
40- margin-top : 20px ;
80+ width : 100% ;
81+ max-width : 800px ;
82+ margin-top : 50px ;
83+ }
84+
85+ .wikis-container h2 {
86+ color : # e60000 ;
87+ font-size : 2rem ;
88+ margin-bottom : 20px ;
4189 }
4290
4391 ul {
4492 list-style : none;
45- padding-left : 0 ;
93+ padding : 0 ;
4694 }
4795
4896 li {
49- padding : 10px ;
50- border : 1px solid # ddd ;
51- margin-bottom : 10px ;
97+ background-color : # ffe6e6 ;
98+ padding : 20px ;
99+ margin-bottom : 15px ;
100+ border-radius : 10px ;
101+ box-shadow : 0px 4px 10px rgba (0 , 0 , 0 , 0.1 );
102+ position : relative;
103+ }
104+
105+ li h3 {
106+ font-size : 1.8rem ;
107+ color : # ff4d4d ;
108+ }
109+
110+ li p {
111+ font-size : 1.1rem ;
112+ color : # 333 ;
113+ }
114+
115+ li small {
116+ font-size : 0.9rem ;
117+ color : # 777 ;
118+ }
119+
120+ .edit , .delete {
121+ position : absolute;
122+ top : 10px ;
123+ padding : 8px 15px ;
124+ border-radius : 5px ;
125+ font-size : 1rem ;
126+ cursor : pointer;
127+ transition : transform 0.2s ease;
52128 }
53129
54- button . delete {
55- background-color : red ;
130+ . edit {
131+ background-color : # ffcc00 ;
56132 color : white;
133+ right : 60px ;
57134 }
58135
59- button .edit {
60- background-color : yellow;
61- color : black;
136+ .edit : hover {
137+ transform : scale (1.1 );
138+ }
139+
140+ .delete {
141+ background-color : # ff4d4d ;
142+ color : white;
143+ right : 10px ;
144+ }
145+
146+ .delete : hover {
147+ transform : scale (1.1 );
148+ }
149+
150+ /* Mobile Responsive Styling */
151+ @media (max-width : 768px ) {
152+ .form-container {
153+ width : 90% ;
154+ padding : 20px ;
155+ }
156+
157+ .wikis-container {
158+ width : 90% ;
159+ }
160+
161+ h1 {
162+ font-size : 2.5rem ;
163+ }
164+
165+ li h3 {
166+ font-size : 1.5rem ;
167+ }
168+
169+ button {
170+ font-size : 1rem ;
171+ padding : 12px 25px ;
172+ }
62173 }
63174 </ style >
64175</ head >
@@ -70,7 +181,6 @@ <h2>Create a Wiki</h2>
70181 < form id ="createWikiForm ">
71182 < input type ="text " id ="wikiTitle " placeholder ="Title " required >
72183 < textarea id ="wikiContent " placeholder ="Content " required > </ textarea >
73- < input type ="text " id ="wikiOwner " placeholder ="Your Username " required >
74184 < button type ="submit "> Create Wiki</ button >
75185 </ form >
76186 </ div >
@@ -105,13 +215,18 @@ <h2>Wikis</h2>
105215 <h3>${ wiki . title } </h3>
106216 <p>${ wiki . content } </p>
107217 <small>Owner: ${ wiki . owner } </small>
108- <button class="edit" onclick="editWiki(${ wiki . id } )">Edit</button>
109- <button class="delete" onclick="deleteWiki(${ wiki . id } )">Delete</button>
218+ ${ isOwnerOrAdmin ( wiki . owner ) ? ` <button class="edit" onclick="editWiki(${ wiki . id } , ' ${ wiki . title } ', ' ${ wiki . content } ' )">Edit</button>` : '' }
219+ ${ isOwnerOrAdmin ( wiki . owner ) ? ` <button class="delete" onclick="deleteWiki(${ wiki . id } )">Delete</button>` : '' }
110220 ` ;
111221 wikiList . appendChild ( li ) ;
112222 } ) ;
113223 } ;
114224
225+ // Check if user is the owner or admin
226+ const isOwnerOrAdmin = ( owner ) => {
227+ return owner === username || username === "kRxZy_kRxZy" || username === "MyScratchedAccount" || username === "mcgdj" ;
228+ } ;
229+
115230 // Create a new wiki
116231 createWikiForm . addEventListener ( 'submit' , async ( e ) => {
117232 e . preventDefault ( ) ;
@@ -150,25 +265,28 @@ <h3>${wiki.title}</h3>
150265 } ;
151266
152267 // Edit a wiki
153- window . editWiki = async ( id ) => {
268+ window . editWiki = async ( id , title , content ) => {
154269 if ( ! username ) {
155270 alert ( 'You must be logged in to edit a wiki.' ) ;
156271 return ;
157272 }
158273
159- const newTitle = prompt ( 'New title:' ) ;
160- const newContent = prompt ( 'New content:' ) ;
274+ // Open the title and content in editable textareas
275+ const newTitle = prompt ( 'New title:' , title ) ;
276+ const newContent = prompt ( 'New content:' , content ) ;
161277
162- const response = await fetch ( `${ backendUrl } /wikis/${ id } ` , {
163- method : 'PUT' ,
164- headers : { 'Content-Type' : 'application/json' } ,
165- body : JSON . stringify ( { title : newTitle , content : newContent , owner : username } ) , // Send username from localStorage
166- } ) ;
278+ if ( newTitle && newContent ) {
279+ const response = await fetch ( `${ backendUrl } /wikis/${ id } ` , {
280+ method : 'PUT' ,
281+ headers : { 'Content-Type' : 'application/json' } ,
282+ body : JSON . stringify ( { title : newTitle , content : newContent , owner : username } ) , // Send username from localStorage
283+ } ) ;
167284
168- if ( response . ok ) {
169- fetchWikis ( ) ; // Refresh wiki list
170- } else {
171- alert ( 'Not authorized to edit this wiki or wiki not found' ) ;
285+ if ( response . ok ) {
286+ fetchWikis ( ) ; // Refresh wiki list
287+ } else {
288+ alert ( 'Not authorized to edit this wiki or wiki not found' ) ;
289+ }
172290 }
173291 } ;
174292
0 commit comments