AltSchoolAssignment/index.html at main · Ademidemi/AltSchoolAssignment · 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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- Primary Meta Tags -->
  <title>Spots - Share Your Favorite Places | Bessie Coleman</title>
  <meta name="title" content="Spots - Share Your Favorite Places | Bessie Coleman">
  <meta name="description"
    content="Discover and share beautiful locations around the world. Join Bessie Coleman and the Spots community to showcase your favorite places.">
  <meta name="keywords" content="spots, travel, photography, locations, Bessie Coleman, places, sharing">
  <meta name="author" content="Tinyuka 2024 Circle 9">

  <!-- Favicon -->
  <link rel="icon" type="image/svg+xml" href="./assets/icons/logo.svg">
  <link rel="apple-touch-icon" href="./assets/icons/apple-touch-icon.png">
  <link rel="stylesheet" href="style.css" />
  <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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
    rel="stylesheet" />
</head>

<body>
  <div class="main-container">

    <header>
      <img src="./assets/icons/logo.svg" alt="logo" />
    </header>
    <!--The body Start here  -->
    <div class="body-container">

      <!--Profile dashboard begins here-->

      <div class="profile-card">
        <div class="profile-info">
          <div class="profile-picture">
            <img src="./assets/images/image 2.svg" alt="Bessie Coleman" class="avatar" />
          </div>
          <div class="details">
            <div class="bio">
              <h2>Bessie Coleman</h2>
              <p class="title">Civil Aviator</p>
            </div>
            <a href="#" class="edit-profile" id="editProfileBtn">
              <img src="./assets/icons/pencil.svg" alt="pencil">
              Edit Profile
            </a>
          </div>
        </div>
        <div class="btn-section">
          <button class="new-post" id="newPostBtn"> + New Post</button>
        </div>
      </div>
      <!--Profile dashboard ends here -->

      <!--Grid layout begins here-->
      <div class="grid-layout">
        <!--Include grid layout  for Card-container-->
        <div id="card-container"></div>
      </div>

    <!--Footer begins here-->
    <footer class="footer">
      <p> <span class="">2025 &copy; Spots</span><br> Circle 9, AltSchool Tinyuka.</p>
    </footer>

    <!--Edit Profile Modal-->

    <div id="editProfile" class="modal" role="dialog" >
        <div class="modal-content">
            <h2 id="editProfileTitle">Edit Profile</h2>
            <form id="editProfileForm">
                <label for="name">Name (2-50 characters):</label>
                <input type="text" id="name" name="Name" minlength="2" maxlength="50" placeholder="" />
                <label for="profileBio">Bio (10-150 characters):</label>
                <textarea id="profileBio" minlength="10" maxlength="150"></textarea>
                <label for="profile-picture">Profile Picture: </label>
                <input type="file" id="profilePictureInput" accept="image/*" />
                <div class="error" id="profileError"></div>

                <div class="modal-buttons">
                  <button type="button" id="closeProfileBtn" class="closeButton">
                      Close
                  </button>
                  <button type="submit" id="saveProfileBtn" class="new-post">
                      Save
                  </button>
                </div>
            </form>
        </div>
    </div>

    <!-- New Post Modal -->

    <div id="newPostModal" class="modal" role="dialog" >
        <div class="modal-content">
            <h2 id="newPostTitle">Create New Post</h2>
            <form id="newPostForm">
                <label for="postImage">Image:</label>
                <input type="file" id="postImage" accept="image/*" />
                <label for="postTitle">Title (2-50 characters):</label>

                <input type="text" id="postTitle"
                min-length="2"
                max-length="50"
                />

                <div class="error" id="postError"></div>

                <div class="modal-buttons">
                  <button type="button" class="closeButton" id="closeNewPostBtn">
                      Close
                  </button>
                  <button type="submit" id="savePostBtn" class="new-post">
                      Create
                  </button>
                </div>
            </form>
        </div>
    </div>
    <!-- Image Preview Modal -->
    <div id="image-modal" class="modal" role="dialog" aria-labelledby="PreviewTitle" aria-hidden="true">
      <div class="modal-content preview-content">
        <h2 id="previewTitle" class="preview-title"></h2>
        <img id="modal-img" alt="Full view" />
      </div>
    </div>

    <!--The body ends here  -->
    <script src="script.js"></script>
</body>
</html>