InstaScrape/sidepanel.html at main · Skill4ace/InstaScrape · 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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>InstaScrape</title>
    <link rel="stylesheet" href="sidepanel.css">
  </head>
  <body>
    <div class="shell">
      <header class="hero">
        <p class="eyebrow">Instagram Profile Analyzer</p>
        <h1>Follower gap check</h1>
        <p class="hero-copy">
          Runs against the active Instagram profile tab, logs raw followers and following, and calculates who is not following back.
        </p>
      </header>

      <section class="controls card">
        <div>
          <p class="label">Run target</p>
          <p id="profileLabel" class="value">No profile selected</p>
        </div>
        <div class="button-row">
          <button id="startButton" class="primary">Analyze Current Profile</button>
          <button id="resetButton" class="secondary">Clear</button>
        </div>
      </section>

      <section class="status card">
        <div class="status-row">
          <span id="statusBadge" class="badge idle">Idle</span>
          <span id="updatedLabel" class="muted">No run yet</span>
        </div>
        <p id="note" class="note">Open an Instagram profile root page and keep that tab active while the scrape runs.</p>
      </section>

      <section class="diagnostics card">
        <div class="diagnostic-grid">
          <article>
            <p class="label">Strategy</p>
            <p id="strategyValue" class="diagnostic-value">-</p>
          </article>
          <article>
            <p class="label">Phase</p>
            <p id="phaseValue" class="diagnostic-value">-</p>
          </article>
          <article>
            <p class="label">Pages / Passes</p>
            <p id="pagesValue" class="diagnostic-value">0</p>
          </article>
          <article>
            <p class="label">Last Seen</p>
            <p id="lastSeenValue" class="diagnostic-value">-</p>
          </article>
        </div>
        <p class="note" id="stopReasonValue">No stop reason yet.</p>
      </section>

      <section class="summary-grid">
        <article class="metric card">
          <p class="label">Followers</p>
          <p id="followersCount" class="metric-value">0</p>
        </article>
        <article class="metric card">
          <p class="label">Following</p>
          <p id="followingCount" class="metric-value">0</p>
        </article>
        <article class="metric card accent">
          <p class="label">Not Following Back</p>
          <p id="diffCount" class="metric-value">0</p>
        </article>
      </section>

      <section class="list-stack">
        <article class="card panel">
          <div class="panel-head">
            <div>
              <p class="label">Followers Log</p>
              <p class="muted" id="followersMeta">0 usernames</p>
            </div>
            <button class="ghost" data-copy-target="followers">Copy</button>
          </div>
          <pre id="followersList" class="log empty">Followers will appear here.</pre>
        </article>

        <article class="card panel">
          <div class="panel-head">
            <div>
              <p class="label">Following Log</p>
              <p class="muted" id="followingMeta">0 usernames</p>
            </div>
            <button class="ghost" data-copy-target="following">Copy</button>
          </div>
          <pre id="followingList" class="log empty">Following will appear here.</pre>
        </article>

        <article class="card panel accent-panel">
          <div class="panel-head">
            <div>
              <p class="label">Not Following Back</p>
              <p class="muted" id="diffMeta">0 usernames</p>
            </div>
            <button class="ghost" data-copy-target="notFollowingBack">Copy</button>
          </div>
          <pre id="diffList" class="log empty">The comparison result will appear here.</pre>
        </article>
      </section>
    </div>

    <script src="sidepanel.js"></script>
  </body>
</html>