DevTrackr/profile.html at main · NaniToka/DevTrackr · 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
<!DOCTYPE html>
<html>
<head>
  <title>DevTrackr – Profile</title>
  <link rel="stylesheet" href="style.css">

  <script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-app-compat.js"></script>
  <script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-auth-compat.js"></script>
  <script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-firestore-compat.js"></script>
</head>
<body class="app">
  <div class="page">
    <div class="left-panel">
      <h1><span>Dev</span>Trackr</h1>
      <p>Your DevTrackr profile — a place to set your display name, short bio, and view quick stats.</p>
    </div>

    <div class="right-panel">
      <div class="top-nav">
        <div><span class="badge">Profile</span></div>
        <div>
          <a href="dashboard.html">Logs</a>
          <a href="github.html">GitHub</a>
          <a href="code-class.html">Code_Class</a>
          <a href="playground.html">Playground</a>
          <a href="profile.html" class="active">Profile</a>
          <a href="#" id="btn-logout">Logout</a>
        </div>
      </div>

      <div class="card wide">
        <h2>DevTrackr profile</h2>
        <p class="subtitle">Set a display name and short bio visible in your DevTrackr account.</p>

        <div class="grid">
          <div>
            <label for="profile-name">Display name</label>
            <input id="profile-name" placeholder="Your name or handle">

            <label for="profile-bio">Short bio</label>
            <textarea id="profile-bio" placeholder="One-line bio shown on your profile"></textarea>

            <button id="btn-save-profile" class="btn-primary">Save profile</button>
          </div>

          <div>
            <h3>Stats</h3>
            <p id="total-logs">Total logs: —</p>
            <p id="streak-text-profile">Current streak: —</p>
            <p id="last-log">Last log: —</p>
            <p class="hint">Profile data is saved to your account and visible only to you.</p>
          </div>
        </div>

        <section style="margin-top:18px;">
          <h3>7-day GitHub summary</h3>
          <p class="hint" id="github-summary-hint">Saves your GitHub username on the GitHub page. Click refresh to fetch public activity.</p>

          <div id="github-summary" style="margin-top:12px;">
            <p>Commits: <strong id="gh-commits">—</strong></p>
            <p>Pull requests: <strong id="gh-prs">—</strong></p>
            <p>Issues: <strong id="gh-issues">—</strong></p>
          </div>

          <div style="margin-top:12px; display:flex; gap:12px;">
            <button id="btn-refresh-gh" class="btn-secondary">Refresh GitHub summary</button>
            <span id="gh-status" style="align-self:center; color:#9ca3af; font-size:13px;"></span>
          </div>
        </section>

      </div>
    </div>
  </div>

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