orange-dev-tracker/index.html at main · sorukumar/orange-dev-tracker · 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
145
<!DOCTYPE html>
<html lang="en" data-theme="dark">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Orange Dev Suite | Bitcoin Data Labs</title>
    <meta name="description"
        content="Dive into the technical expertise, social authority, and ecosystem flow of Bitcoin development.">

    <!-- Bitcoin Data Labs Font & Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.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=Inter:wght@300;400;500;600;700;800;900&display=swap"
        rel="stylesheet">

    <!-- Bitcoin Data Labs Shell Styles -->
    <link rel="stylesheet" href="https://bitcoindatalabs.org/styles/styles.css">

    <!-- Modularized Local Styles -->
    <link rel="stylesheet" href="styles/style.css">
    <link rel="stylesheet" href="styles/index.css">

    <!-- Favicon -->
    <link rel="icon" type="image/png" href="https://bitcoindatalabs.org/favicon.png">
</head>

<body class="has-fixed-header landing-layout">
    <div id="main-container">
        <!-- Bitcoin Data Labs Header -->
        <div id="header"></div>

        <div id="app-content" class="landing-layout">
            <div class="hero-section">
                <h1>See How Bitcoin is Built.</h1>
                <p>Providing transparency, accountability, and foresight into the world's most important open-source project.</p>


                <section class="snapshot-panel" aria-label="Network Snapshot">
                    <div class="snapshot-panel-head">
                        <div style="display: flex; align-items: center; justify-content: space-between;">
                            <h2 style="margin: 0;">Ecosystem Pulse</h2>
                            <span id="freshness-line" class="freshness-line" style="margin: 0; font-size: 11px; font-weight: 600; padding: 4px 10px; background: rgba(255,255,255,0.05); border-radius: 20px;"></span>
                        </div>
                        <p>Live signals from across the Bitcoin development ecosystem.</p>
                    </div>
                    <div class="live-widgets">
                        <!-- Card 1: Network Participants -->
                        <article class="live-widget">
                            <h3>Network Participants (Last 30 days)</h3>
                            <div id="widget-active-count" class="live-widget-value">-</div>
                            <p class="live-widget-note" style="margin-bottom: 12px;">Total active developers across code and review.</p>
                            <ul class="simple-list" style="padding-left: 0; list-style: none; margin-bottom: 12px;">
                                <li><i class="fas fa-users" style="width: 16px; opacity: 0.6;"></i> <strong id="widget-voices-count">-</strong> research participants</li>
                                <li><i class="fas fa-seedling" style="width: 16px; opacity: 0.6;"></i> <strong id="widget-newcomers">-</strong> newly onboarded</li>
                            </ul>

                            <div id="widget-spotlight-container" style="background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05); padding: 10px; border-radius: 8px; font-size: 12px;">
                                <div style="color: var(--primary); font-weight: 700; margin-bottom: 4px;"><i class="fas fa-star" style="margin-right: 4px;"></i> Contributor Spotlight</div>
                                <div id="widget-spotlight-content" style="color: var(--text-secondary); line-height: 1.4;">Loading spotlight...</div>
                            </div>
                        </article>

                        <!-- Card 2: Code Velocity -->
                        <article class="live-widget">
                            <h3>Code Velocity (Last 30 days)</h3>
                            <div id="widget-prs-count" class="live-widget-value">-</div>
                            <p id="widget-prs-note" class="live-widget-note" style="margin-bottom: 12px;">Loading merge velocity...</p>

                            <ul class="simple-list" style="padding-left: 0; list-style: none;">
                                <li><i class="fas fa-code-commit" style="width: 16px; opacity: 0.6;"></i> <strong id="widget-commits-count">-</strong> commits pushed</li>
                            </ul>
                        </article>

                        <!-- Card 3: Hot Topics & Research -->
                        <article class="live-widget">
                            <div style="display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px;">
                                <h3 style="margin: 0;">Hot Topics & Research (Last 30 days)</h3>
                            </div>
                            <p id="widget-mailing-spark" class="live-widget-note" style="margin-bottom: 12px; font-weight: 600; color: var(--text-primary);">Loading signal...</p>

                            <h4 style="font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-secondary); margin: 0 0 6px 0;">Trending Topics</h4>
                            <ol id="widget-topics" class="rank-list" style="margin-bottom: 12px; padding-left: 14px;">
                                <li>Loading...</li>
                            </ol>

                            <h4 style="font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-secondary); margin: 0 0 6px 0;">High-Velocity BIPs</h4>
                            <ul id="widget-bips" class="simple-list" style="padding-left: 0; list-style: none;">
                                <li>Loading...</li>
                            </ul>
                        </article>
                    </div>
                </section>

                <div class="pillars-container">
                    <a href="dashboard.html" class="pillar-card pillar-what">
                        <div class="pillar-icon"><i class="fas fa-code-branch"></i></div>
                        <div class="pillar-content">
                            <span class="pillar-badge">The "What"</span>
                            <h2>Orange Dev Tracker</h2>
                            <p>Track pull requests, BIPs, and mailing lists to understand what is being built.</p>
                        </div>
                    </a>
                    <a href="https://sorukumar.github.io/orange-dev-network/" target="_blank" rel="noopener noreferrer" class="pillar-card pillar-who">
                        <div class="pillar-icon"><i class="fas fa-project-diagram"></i></div>
                        <div class="pillar-content">
                            <span class="pillar-badge">The "Who"</span>
                            <h2>Orange Dev Network</h2>
                            <p>Navigate developer directories and influence maps to see who shapes consensus.</p>
                        </div>
                    </a>
                    <a href="https://sorukumar.github.io/this-week-in-bitcoin/" target="_blank" rel="noopener noreferrer" class="pillar-card pillar-now">
                        <div class="pillar-icon"><i class="fas fa-bolt"></i></div>
                        <div class="pillar-content">
                            <span class="pillar-badge">The "Now"</span>
                            <h2>This Week in Bitcoin</h2>
                            <p>Read weekly ecosystem reports for actionable intelligence on immediate momentum.</p>
                        </div>
                    </a>
                </div>

                <section class="secondary-cta" aria-label="Follow and feedback">
                    <a href="https://x.com/BitcoinDataLabs" target="_blank" rel="noopener noreferrer" class="secondary-link">Follow updates on X</a>
                    <a href="roadmap.html" class="secondary-link">View Roadmap & Give Feedback</a>
                    <a href="methodology.html" class="secondary-link">Data Methodology</a>
                </section>

            </div>
        </div>

        <!-- Bitcoin Data Labs Footer -->
        <div id="footer"></div>
    </div>

    <!-- Bitcoin Data Labs App Components -->
    <script src="https://bitcoindatalabs.org/components/app-components.js"></script>
    <script src="js/app-config.js"></script>

    <!-- Page Logic -->
    <script src="js/index.js"></script>
</body>

</html>