Skip to content

Commit 32ae1fa

Browse files
i786mi786m
authored
Merge pull request #1 from Abubakar-Meigag/push-new-ui
I'm pushing new ui for the sheared bookmarks
2 parents eb376be + d2e0c34 commit 32ae1fa

File tree

3 files changed

+361
-6
lines changed

3 files changed

+361
-6
lines changed

‎Project-Shared-Bookmarks/index.html‎

Lines changed: 55 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,58 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<script type="module" src="script.js"></script>
5-
</head>
6-
<body>
7-
</body>
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<h1>Global Shared Bookmarks</h1>
8+
<link rel="stylesheet" href="style.css" />
9+
</head>
10+
11+
<body>
12+
13+
<main id="main-content">
14+
15+
<div>
16+
<section id="user-selection-section">
17+
<label for="user-select">Select User</label>
18+
<select type="change" id="user-id">
19+
<!-- User options will be dynamically inserted here -->
20+
</select>
21+
</section>
22+
</div>
23+
24+
25+
<div id="bookmark-section">
26+
<div>
27+
<section id="add-bookmark-section">
28+
<h2>Add a New Bookmark</h2>
29+
<form id="add-bookmark-form">
30+
<label for="bookmark-title">Bookmark Title</label>
31+
<input type="text" id="bookmark-title" name="title" required />
32+
<label for="bookmark-url">Bookmark URL</label>
33+
<input type="url" id="bookmark-url" name="url" required />
34+
<label for="description">Description</label>
35+
<input type="text" id="description" name="description" required />
36+
<button id="submit-bookmark" type="submit">Add Bookmark</button>
37+
</form>
38+
</section>
39+
</div>
40+
41+
<div>
42+
<section id="bookmark-list-section">
43+
<h1>Shared Bookmarks</h1>
44+
<ul id="bookmark-list">
45+
<!-- Bookmarks will be dynamically inserted here -->
46+
</ul>
47+
</section>
48+
</div>
49+
</div>
50+
51+
</main>
52+
53+
54+
55+
<script type="module" src="script.js"></script>
56+
</body>
57+
858
</html>

‎Project-Shared-Bookmarks/script.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,5 @@ import { getUserIds } from "./storage.js";
88

99
window.onload = function () {
1010
const users = getUserIds();
11-
document.querySelector("body").innerText = `There are ${users.length} users`;
11+
// document.querySelector("body").innerText = `There are ${users.length} users`;
1212
};

‎Project-Shared-Bookmarks/style.css‎

Lines changed: 305 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,305 @@
1+
body {
2+
max-width: 1400px;
3+
height: 100vh;
4+
margin: 0;
5+
padding: 0;
6+
list-style: none;
7+
font-family: Arial, sans-serif;
8+
background-color: #f4f4f4;
9+
}
10+
11+
#main-content {
12+
width: 100%;
13+
height: 100%;
14+
padding: 10px;
15+
background-color: #fff;
16+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
17+
display: inline-block;
18+
}
19+
20+
#bookmark-section {
21+
padding: 0px 10px;
22+
height: 150%;
23+
border: 1px solid #ccc;
24+
border-radius: 5px;
25+
background-color: #fafafa;
26+
display: grid;
27+
grid-template-columns: 1fr 2fr;;
28+
gap: 15px;
29+
}
30+
31+
#add-bookmark-section {
32+
background: linear-gradient(135deg, #010206 0%, #6527a3 100%);
33+
height: 500px;
34+
margin-top: 25px;
35+
padding: 35px;
36+
border-radius: 12px;
37+
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
38+
}
39+
40+
#add-bookmark-section h2 {
41+
color: #fff;
42+
margin: 0 0 20px 0;
43+
font-size: 24px;
44+
font-weight: 600;
45+
}
46+
47+
#add-bookmark-form {
48+
padding: 0;
49+
display: flex;
50+
flex-direction: column;
51+
gap: 5px;
52+
}
53+
54+
#add-bookmark-section label {
55+
margin: 10px 0 5px 0;
56+
font-weight: 500;
57+
font-size: 14px;
58+
color: rgba(255, 255, 255, 0.9);
59+
text-transform: uppercase;
60+
letter-spacing: 0.5px;
61+
}
62+
63+
#add-bookmark-section input {
64+
padding: 14px 16px;
65+
border: none;
66+
border-radius: 8px;
67+
background-color: rgba(255, 255, 255, 0.95);
68+
font-size: 15px;
69+
transition: all 0.3s ease;
70+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
71+
}
72+
73+
#add-bookmark-section input:focus {
74+
outline: none;
75+
background-color: #fff;
76+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
77+
transform: translateY(-2px);
78+
}
79+
80+
#add-bookmark-section input::placeholder {
81+
color: #999;
82+
}
83+
84+
#add-bookmark-section button {
85+
margin-top: 60px;
86+
padding: 16px 24px;
87+
font-size: 16px;
88+
font-weight: 600;
89+
background: #fff;
90+
color: #010206;
91+
border: none;
92+
border-radius: 8px;
93+
cursor: pointer;
94+
transition: all 0.3s ease;
95+
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
96+
text-transform: uppercase;
97+
letter-spacing: 1px;
98+
}
99+
100+
#add-bookmark-section button:hover {
101+
transform: translateY(-3px);
102+
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.25);
103+
background: #f8f9ff;
104+
}
105+
106+
#add-bookmark-section button:active {
107+
transform: translateY(-1px);
108+
}
109+
110+
#user-info-section {
111+
padding: 10px 0px;
112+
display: flex;
113+
flex-direction: row;
114+
align-items: center;
115+
gap: 10px;
116+
justify-content: space-around;
117+
}
118+
119+
#user-name {
120+
font-size: large;
121+
font-weight: bold;
122+
}
123+
124+
#user-selection-section {
125+
display: flex;
126+
flex-direction: row;
127+
align-items: center;
128+
gap: 20px;
129+
margin: 0 0 20px 0;
130+
padding: 20px 25px;
131+
background: #fff;
132+
border-radius: 12px;
133+
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
134+
border: 1px solid #e8e8e8;
135+
}
136+
137+
#user-selection-section label {
138+
font-size: 18px;
139+
font-weight: 600;
140+
color: #333;
141+
margin: 0;
142+
white-space: nowrap;
143+
}
144+
145+
#user-selection-section select {
146+
padding: 12px 20px;
147+
border: 2px solid #667eea;
148+
background: #fff;
149+
color: #333;
150+
border-radius: 8px;
151+
font-size: 15px;
152+
font-weight: 500;
153+
cursor: pointer;
154+
min-width: 180px;
155+
appearance: none;
156+
-webkit-appearance: none;
157+
-moz-appearance: none;
158+
background-repeat: no-repeat;
159+
background-position: right 15px center;
160+
padding-right: 40px;
161+
transition: all 0.3s ease;
162+
}
163+
164+
#user-selection-section select:hover {
165+
border-color: #764ba2;
166+
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
167+
}
168+
169+
#user-selection-section select:focus {
170+
outline: none;
171+
border-color: #764ba2;
172+
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
173+
}
174+
175+
#user-selection-section select option {
176+
background-color: #fff;
177+
color: #333;
178+
padding: 10px;
179+
}
180+
181+
#bookmark-list-section {
182+
border-left: 2px solid #161616;
183+
height: 100%;
184+
padding-left: 15px;
185+
}
186+
187+
#bookmark-list-section h2 {
188+
margin-bottom: 20px;
189+
color: #333;
190+
}
191+
192+
#bookmark-list {
193+
list-style: none;
194+
padding: 0;
195+
margin: 0;
196+
display: flex;
197+
flex-direction: column;
198+
gap: 15px;
199+
}
200+
201+
#bookmark-list li {
202+
background-color: #fff;
203+
border: 1px solid #e0e0e0;
204+
border-radius: 8px;
205+
padding: 15px 20px;
206+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
207+
transition: transform 0.2s, box-shadow 0.2s;
208+
}
209+
210+
#bookmark-list li:hover {
211+
transform: translateY(-2px);
212+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
213+
}
214+
215+
#bookmark-list-id a {
216+
font-size: 18px;
217+
font-weight: 600;
218+
color: #256dda;
219+
text-decoration: none;
220+
display: flex;
221+
align-items: center;
222+
gap: 8px;
223+
margin-bottom: 8px;
224+
}
225+
226+
#bookmark-list-id a .link-icon {
227+
flex-shrink: 0;
228+
}
229+
230+
#bookmark-list-id a:hover {
231+
text-decoration: underline;
232+
color: #1a4fa3;
233+
}
234+
235+
#bookmark-list-id p {
236+
margin: 0;
237+
color: #666;
238+
font-size: 14px;
239+
line-height: 1.5;
240+
}
241+
242+
#bookmark-list h3 {
243+
color: #888;
244+
font-weight: normal;
245+
text-align: center;
246+
padding: 40px 0;
247+
}
248+
249+
250+
#bookmark-list-id {
251+
position: relative;
252+
padding-bottom: 45px;
253+
}
254+
255+
256+
.like-bookmark,
257+
.copy-link,
258+
.delete-bookmark {
259+
padding: 8px 16px;
260+
border: none;
261+
border-radius: 6px;
262+
font-size: 13px;
263+
font-weight: 500;
264+
cursor: pointer;
265+
transition: all 0.2s ease;
266+
margin-right: 10px;
267+
margin-top: 10px;
268+
}
269+
270+
271+
.like-bookmark {
272+
background-color: #3b82f6;
273+
color: #fff;
274+
}
275+
276+
.like-bookmark:hover {
277+
background-color: #2563eb;
278+
}
279+
280+
.copy-link {
281+
background-color: #038f18;
282+
color: #fff;
283+
}
284+
285+
.copy-link:hover {
286+
background-color: #04a241;
287+
}
288+
289+
.delete-bookmark {
290+
background-color: #ef4444;
291+
color: #fff;
292+
}
293+
294+
.delete-bookmark:hover {
295+
background-color: #dc2626;
296+
}
297+
298+
#bookmark-timestamp {
299+
position: absolute;
300+
bottom: 5px;
301+
left: 0;
302+
font-size: 12px;
303+
color: #999;
304+
margin-top: 0px;
305+
}

0 commit comments

Comments
 (0)