-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
151 lines (131 loc) · 8.33 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bookmarker</title>
<!-- *============ Browser Icon=========== -->
<link rel="shortcut icon" href="./assets/Imgs/bookmark.ico">
<!-- *============= Meta ================== -->
<meta name="author" content="Omar Hussein">
<!-- *============= Google Fonts ================== -->
<!-- &=========== I Used four Fonts ==>
&( Pacifico || Righteous ) from Cursive Family && ( PT+Sans+Caption ||Bree+Serif )from Sans Serif ============= -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Bree+Serif&family=PT+Sans+Caption:wght@400;700&family=Pacifico&family=Righteous&display=swap"
rel="stylesheet">
<!-- *============= CSS FILES ============= -->
<!-- IconMoon Library -->
<link rel="stylesheet" href="./assets/CSS/icomoon.css">
<!-- SweetAlert2 CSS -->
<link rel="stylesheet" href="./assets/CSS/sweetalert2.min.css">
<!-- Bootstrap Css File -->
<link rel="stylesheet" href="./assets/CSS/bootstrap.min.css">
<!-- Main Css File -->
<link rel="stylesheet" href="./assets/CSS/style.css">
</head>
<body class="py-3 min-vh-100 " data-bs-theme="light">
<svg class="svg svg-top" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 55">
<g id="Artboard" fill="none" fill-rule="evenodd">
<path class="shape"
d="M446 56l1-1v1h-1zm-29 0c-5-4-5-4-5-2l-3-2-4-3c-2-2-2-2-1 0l8 7h-2l-3-1-4-2c-2-2-6-3-6-2l1 1 1 1-4-2-5-3c-3-1-16-1-33 2l-15 1 3-1 2-1 14-4c4 0 5-1 3-2h1c4 1 13 0 14-1l5-1c3 0 4 0 3 1l1 1 2-1h1l2 1 3-1h5l3 1 4 3c8 3 16 9 14 9l-1 1h-4zM0 56l7-3 6-2c3-2 4-2 9-2 8 0 13-2 36-11a265 265 0 0 1 27-11 80 80 0 0 1 27-14l11-4a565 565 0 0 0 9 0c-11 3-26 9-24 11l12-3 5-1v2a412 412 0 0 1-7 3c-1 2 5 1 11-2 8-5 8-5 15 1l8 5 5 3 4 3 9-2-4-2-7-6-3-2 4 2c5 4 12 8 15 8l6 2 12 3c11 2 17 4 23 8a85 85 0 0 0 29 14H0zm444-1l-4-2c-2-2-6-3-9-4l-4-1c1-1 8 1 11 3l3 1h1l1 1c2 1 2 2 1 2zm-24-8c-2 0-1-1 2-1l2 1h-4zm-5 0l-1-1h3c1 1 0 1-2 1zm-25 7h-2c-1-1-2-1-1-2l2-1c2 1 2 1 0 1l-2 1h2l1 1zm-8-20v-2c1-1 2 0 1 1l-1 1zm2 16c2 1 2 2-1 2l-2-2h3zm-4 1h-1-1 2zm-50 0c-2-1-1-1 2-1h1l-3 1zm-4 0h-1 1zm-5 1h-2 2zm-8-3h0zm-10 1h-1 1zm6 4zm-26-1h-2 2zm-14 0l-12-2c-16-2-31-9-45-19a217 217 0 0 0-16-11c0-1 9 3 13 6a319 319 0 0 0 15 10c10 6 18 8 36 11a112 112 0 0 1 13 2 1560 1560 0 0 0 21 1l-25 2zM172 9l-4-4-4-3c-1 0-2 0-1-1 2 0 3 0 7 4l2 4zm-14-7h0zm-6 15c-2 0-2 0 0 0h0zm-3 1v-1h1l-1 1zM58 33l-11 2c-4 0 0-2 7-3 6-1 7-1 4 1zm-19 2l2-1c3 0 3 0 0 1h-2zm-10-1c0-1 7-2 9-1l-4 1h-5zm0 7l-4 2 4-3c5-2 5-1 0 1z" />
</g>
</svg>
<main>
<header>
<!-- ^============= Start Nav ============= -->
<nav>
<div class="container bg-transparent d-flex justify-content-end align-items-center">
<button id="btnMode" class="btn btn-mode ms-3 "><span><i class="icon-moon-o"></i></span></button>
</div>
</nav>
</header>
<!-- ^============= start bookmark Inputs ============= -->
<section class="container mt-1">
<h1 class="title mx-auto text-center">Bookmarker</h1>
<div
class="bookmark-body shadow rounded-5 d-flex flex-column justify-content-center align-items-center gap-4 py-5 px-4 mt-5">
<h2 class="sub-title fw-bolder mb-2 ">
<i class="icon-bookmark align-middle "></i>
Bookmark your favorite sites
<i class="icon-bookmark align-middle"></i>
</h2>
<div class="site-name w-100 d-flex flex-column justify-content-center ">
<label for="bookmarkName" class="pb-2 fs-6 fw-semibold">
<i class="icon-book-reference pe-2"></i>
Site Name</label>
<input id="bookmarkName" type="text" placeholder="Bookmark Name"
class="form-control rounded-3 border-1" autocomplete="off" onkeyup="uNameValidation(this.value)"
spellcheck="false" required>
</div>
<div class="site-url w-100 d-flex flex-column justify-content-center ">
<label for="bookmarkURL" class="pb-2 fs-6 fw-semibold">
<i class="icon-link pe-2"></i>
Site URL</label>
<input id="bookmarkURL" type="url" placeholder="Website URL" class="form-control rounded-3 border-1"
autocomplete="off" onkeyup="UrlValidation(this.value)" spellcheck="false" required>
</div>
<button id="submitBtn" type="submit"
class="btn btn-submit text-capitalize fw-semibold px-5">Submit</button>
</div>
</section>
<!-- ^============= start Section Table ============= -->
<section id="tableSection" class="mt-4 py-4">
<div class="container">
<input type="search" id="searchInput" placeholder="Search" spellcheck="false" aria-label="Search"
class="form-control rounded-4 mb-3 shadow border-2" onkeyup="searchByName(this.value)">
<!-- زر لتبديل الفرز -->
<button onclick="toggleSort()" class="btn mb-3" id="sortButton">تبديل الفرز بين الاسم</button>
<div class="table-responsive">
<table class="table text-center rounded-3 ">
<thead class="table table-active">
<tr>
<th scope="col" class="py-2">Index</th>
<th scope="col" class="py-2">Website Name</th>
<th scope="col" class="py-2">Visit</th>
<th scope="col" class="py-2">Edit</th>
<th scope="col" class="py-2">Delete</th>
</tr>
</thead>
<tbody id="tableContent">
<!-- <tr>
<td scope="row" class="fw-semibold"></td>
<td class="fw-semibold text-capitalize"></td>
<td>
<button class="btn btn-success btn-sm "
onclick="visitBookmark('${bookmarksArray[i].secondInputElement}')"
data-index="${bookmarksArray[i].secondInputElement}">
<i class="icon-eye1 pe-1 icon-btn"></i>Visit</button>
</td>
<td>
<button class="btn btn-warning btn-sm text-white"
onclick="editBookmark('${bookmarksArray[i].firstInputElement},${bookmarksArray[i].secondInputElement}')"
data-index="${bookmarksArray[i].firstInputElement},${bookmarksArray[i].secondInputElement}"><img src="./assets/Imgs/edit-pencil.svg" class="pe-1"
style="width: 30px;">Edit</button>
</td>
<td><button class="btn btn-danger btn-sm"
onclick="deleteBookmark('${bookmarksArray[i].index}')"
data-index="${bookmarksArray[i].index}">
<i class="icon-bin pe-1 icon-btn"></i>Delete</button></td>
</tr> -->
</tbody>
</table>
</div>
</div>
</section>
</main>
<!-- *============ JS FILES ============ -->
<!-- Sweetalert2 JS -->
<script src="./assets/JS/sweetalert2.all.min.js"></script>
<!-- JQuery JS File -->
<script src="./assets/JS/jquery-3.7.1.min.js"></script>
<!-- jsconfig File -->
<script src="./assets/JS/jsconfig.json"></script>
<!-- Bootstrap JS File -->
<script src="./assets/JS/bootstrap.bundle.min.js"></script>
<!-- Main Js File -->
<script src="./assets/JS/main.js"></script>
</body>
</html>