SkillSwap/profile.html at main · nativeAGX/SkillSwap · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SkillSwap – Profile</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <main class="app-content">

    <div class="profile-banner">
      <div class="profile-banner-blobs"><span></span><span></span></div>
    </div>

    <div class="profile-info">
      <div class="profile-avatar-row">
        <div class="profile-avatar">
          R
          <div class="avatar-edit">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
          </div>
        </div>
        <button class="edit-profile-btn" id="editProfileBtn">Edit Profile</button>
      </div>
      <div class="profile-name">Rayan Castelino</div>
      <div class="profile-role">Student <span>at SVU</span></div>
      <div class="credits-display">Credits – 50</div>
      <div class="profile-tabs tab-row" id="profileTabs">
        <button class="tab-btn active" data-tab="overview">Overview</button>
        <button class="tab-btn" data-tab="commendations">Commendations</button>
        <button class="tab-btn" data-tab="achievements">Achievements</button>
        <button class="tab-btn" data-tab="mentors">My Mentors</button>
      </div>
    </div>

    <div id="tab-overview">
      <div class="profile-body">

        <div class="profile-left">
          <div class="profile-section">
            <p class="about-text">Currently a student, interested in engineering and passionate about hobbies like guitar</p>
            <div style="margin-bottom:12px;">
              <div style="font-size:12px;color:var(--text-muted);margin-bottom:8px;font-weight:500;text-transform:uppercase;letter-spacing:0.5px;">Expertise</div>
              <span class="expertise-tag">Engineering</span>
            </div>
          </div>
          <div class="profile-section">
            <div class="profile-section-header">
              <h3>Experience</h3>
              <button class="edit-icon">
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
              </button>
            </div>
            <p style="color:var(--text-muted);font-size:14px;">No experience added yet</p>
          </div>
          <div class="profile-section">
            <div class="profile-section-header">
              <h3>Education</h3>
              <button class="edit-icon">
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
              </button>
            </div>
            <p style="color:var(--text-muted);font-size:14px;">No education added yet</p>
          </div>
        </div>

        <div class="profile-right">
          <div class="profile-strength-card-alt">
            <div>
              <div class="ps-label">Profile Strength: <strong style="color:#86efac;">Youngling</strong></div>
              <div class="ps-bar" style="margin-top:8px;"><div class="ps-bar-fill"></div></div>
            </div>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.7)" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
          </div>

          <div class="community-stats-card">
            <h3>Community statistics</h3>
            <div class="cstats-grid">
              <div class="cstat">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--teal)" stroke-width="1.8"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                <div>
                  <div class="cstat-val">0 mins</div>
                  <div class="cstat-label">Total learning time</div>
                </div>
              </div>
              <div class="cstat">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--teal)" stroke-width="1.8"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
                <div>
                  <div class="cstat-val">0</div>
                  <div class="cstat-label">Sessions completed</div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>

    <div id="tab-commendations" style="display:none;">
      <div class="profile-section" style="margin-top:24px;">
        <p style="color:var(--text-muted);font-size:14px;padding:16px 0;">No commendations yet. Complete sessions to receive feedback from mentors.</p>
      </div>
    </div>
    <div id="tab-achievements" style="display:none;">
      <div class="profile-section" style="margin-top:24px;">
        <p style="color:var(--text-muted);font-size:14px;padding:16px 0;">No achievements unlocked yet. Book your first session to get started!</p>
      </div>
    </div>
    <div id="tab-mentors" style="display:none;">
      <div class="profile-section" style="margin-top:24px;">
        <p style="color:var(--text-muted);font-size:14px;padding:16px 0;">You haven't connected with any mentors yet. <a href="explore.html" style="color:var(--teal);font-weight:600;">Explore mentors</a></p>
      </div>
    </div>

  </main>

  <script src="shared.js"></script>
  <script src="profile.js"></script>
</body>
</html>