Bookmarker/index.html at main · ahmed-592/Bookmarker · GitHub

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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bookmark</title>
    <link rel="shortcut icon" href="image/bookmark.png" type="image/x-icon" />
    <link
      href="https://fonts.googleapis.com/css2?family=PT+Sans+Caption:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Righteous&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap"
      rel="stylesheet"
    />

    <link rel="stylesheet" href="css/all.min.css" />
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/media.css" />
  </head>
  <body>
    <section class="container pt-5">
      <div class="d-flex flex-column justify-content-center align-items-center">
        <h1 class="mb-5 text-center">Bookmarker</h1>
      </div>

      <div>
        <hr />
        <div
          class="d-flex flex-column justify-content-center align-items-center"
        >
          <h2 class="text-center">
            <i class="fa-solid fa-bookmark pe-2"></i>Bookmark your favorite
            sites<i class="fa-solid fa-bookmark ps-2"></i>
          </h2>
        </div>

        <div>
          <label for="siteName"
            ><i class="fa-solid fa-book-bookmark pe-2"></i>Site Name</label
          >
          <input
            oninput="isValidNameInputColor()"
            type="text"
            class="form-control mt-2"
            id="siteName"
            placeholder="Bookmark Name "
          />
          <i
            id="iconLabelRed"
            class="fa-solid fa-exclamation text-danger border border-2 border-danger rounded-circle d-flex justify-content-center align-items-center d-none"
          ></i>
          <i
            id="iconLabelGreen"
            class="fa-solid fa-check text-success border border-2 border-success rounded-circle d-flex justify-content-center align-items-center d-none"
          ></i>
        </div>

        <div class="mt-4">
          <label for="siteUrl"
            ><i class="fa-solid fa-link pe-2"></i>Site URL</label
          >
          <input
            oninput="isValidUrlInputColor()"
            type="url"
            class="form-control mt-2"
            id="siteUrl"
            placeholder="Website URL"
          />
          <i
            id="iconLabelRedUrl"
            class="fa-solid fa-exclamation text-danger border border-2 border-danger rounded-circle d-flex justify-content-center align-items-center d-none"
          ></i>
          <i
            id="iconLabelGreenUrl"
            class="fa-solid fa-check text-success border border-2 border-success rounded-circle d-flex justify-content-center align-items-center d-none"
          ></i>
        </div>
        <div
          class="d-flex flex-column justify-content-center align-items-center mt-4"
        >
          <button
            onclick="addSite()"
            id="submitBtn"
            class="btn btn-danger btn-color px-5"
          >
            Submit
          </button>
        </div>
        <hr />
      </div>
    </section>
    <div
      id="alarm"
      class="d-none shadow rounded-2 d-flex flex-column justify-content-end"
    >
      <div>
        <span class="s1 rounded-circle"></span>
        <span class="s2 rounded-circle"></span>
        <span class="s3 rounded-circle"></span>

        <i onclick="closeAlarm()" class="fa-solid fa-xmark close fs-3"></i>
      </div>
      <div>
        <p class="ms-3">
          Site Name or Url is not valid, Please follow the rules below :
        </p>
        <ul>
          <li class="list-group-item mb-2">
            <i class="fa-regular fa-circle-right pe-2 text-danger"></i>Site name
            must contain at least 3 characters
          </li>
          <li class="list-group-item">
            <i class="fa-regular fa-circle-right pe-2 text-danger"></i>Site URL
            must be a valid one
          </li>
        </ul>
      </div>
    </div>
    <section class="container">
      <table class="w-100 bg-white text-center">
        <thead>
          <th class="w-25 py-1">Index</th>
          <th class="w-25">Website Name</th>
          <th class="w-25">Visit</th>
          <th class="w-25">Delete</th>
        </thead>
        <tbody id="tableBody"></tbody>
      </table>
    </section>

    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>