git_loader/info.html at main · ha466/git_loader · 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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Git Loader: Interactive Report</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <!-- Chosen Palette: Warm light neutral background (stone-50) with frosted "light glass" panels (white/50), accented by vibrant pastel orbs (cyan, fuchsia) to represent the glassy aesthetic while adhering to the light background constraint. -->

    <!-- Application Structure Plan:
         - **Hero Section**: Introduces the core problem (bandwidth waste) with an engaging quote.
         - **The Data/Problem Section**: Uses a Donut chart to visually contrast "Downloading the whole repo" vs "Surgical extraction".
         - **Features Grid**: Interactive cards using hover states to explore core capabilities.
         - **Interactive Timeline**: A functional step-by-step explainer of "How to Use" and "Nerd Stuff" combined.
         - **Technical & Limitations Panel**: Toggleable sections for deeper reading.
         This structure translates a linear README into an exploratory dashboard, letting the user uncover the "why" before the "how". -->

    <!-- Visualization & Content Choices:
         - Goal: Inform/Compare -> Viz: Donut Chart (Chart.js) -> Interaction: Hover tooltips -> Justification: Visually demonstrates the 5GB vs 2MB bandwidth disparity mentioned in the report. Library: Chart.js (NO SVG).
         - Goal: Change/Process -> Viz: Interactive Timeline List -> Interaction: Click to show details -> Justification: Replaces static ordered lists with an engaging step-by-step explorer for both user steps and under-the-hood logic. Method: Vanilla JS + HTML/Tailwind.
         - Confirming NO SVG/Mermaid used. -->

    <!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->

    <style>
        /* Base Styling and Glassmorphism */
        body {
            background-color: #fafaf9; /* stone-50 */
            color: #1c1917; /* stone-900 */
            font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
            overflow-x: hidden;
        }

        .glass-panel {
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.8);
            box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.05);
            border-radius: 1.5rem;
        }

        /* Chart Container strict constraints */
        .chart-container {
            position: relative;
            width: 100%;
            max-width: 400px; /* Constrained max-width */
            margin-left: auto;
            margin-right: auto;
            height: 300px;
            max-height: 350px;
        }
        @media (min-width: 768px) {
            .chart-container { height: 350px; }
        }

        /* Ambient Orbs for the "Glassy" feel on a light theme */
        .orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(100px);
            z-index: -1;
            opacity: 0.4;
            animation: float 15s infinite ease-in-out alternate;
        }
        .orb-1 { width: 40vw; height: 40vw; background: #22d3ee; top: -10%; left: -10%; } /* Cyan */
        .orb-2 { width: 35vw; height: 35vw; background: #e879f9; bottom: 10%; right: -5%; animation-delay: -5s; } /* Fuchsia */
        .orb-3 { width: 30vw; height: 30vw; background: #818cf8; top: 40%; left: 30%; animation-delay: -10s; } /* Indigo */

        @keyframes float {
            0% { transform: translate(0, 0) scale(1); }
            100% { transform: translate(50px, 50px) scale(1.1); }
        }

        /* Utilities */
        .tab-active {
            background: rgba(255, 255, 255, 0.9);
            font-weight: 600;
            border-color: #38bdf8; /* sky-400 */
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        }
    </style>
</head>
<body class="min-h-screen relative p-4 md:p-8">

    <!-- Ambient Background Effects -->
    <div class="orb orb-1"></div>
    <div class="orb orb-2"></div>
    <div class="orb orb-3"></div>

    <div class="max-w-6xl mx-auto space-y-8 relative z-10">

        <!-- HEADER SECTION -->
        <header class="glass-panel p-8 text-center md:text-left flex flex-col md:flex-row items-center justify-between gap-6">
            <div>
                <h1 class="text-4xl md:text-5xl font-extrabold tracking-tight text-slate-800 mb-2">
                    🛸 Git Loader
                </h1>
                <p class="text-xl text-slate-600 font-medium">The GitHub Downloader</p>
            </div>
            <div class="bg-red-50 text-red-800 p-4 rounded-xl border border-red-100 max-w-md shadow-sm">
                <p class="text-sm font-semibold italic">
                    "Because downloading a 5GB repository just to get one tiny assets folder is a crime against bandwidth."
                </p>
            </div>
        </header>

        <!-- MAIN CONTENT GRID -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">

            <!-- LEFT COLUMN: The Problem & Data -->
            <div class="lg:col-span-1 space-y-8">

                <!-- Intro & Context -->
                <section class="glass-panel p-6">
                    <h2 class="text-xl font-bold mb-4 border-b border-slate-200 pb-2">The Problem</h2>
                    <p class="text-sm text-slate-600 mb-4 leading-relaxed">
                        This section visualizes the core issue Git Loader solves. Have you ever found a perfect 2MB folder inside a behemoth repository, only to be forced to download years of git history and modules?
                    </p>
                    <p class="text-sm text-slate-600 leading-relaxed font-medium">
                        Git Loader performs a surgical extraction, handing you exactly what you asked for. See the bandwidth difference below.
                    </p>
                </section>

                <!-- Data Visualization: Bandwidth Chart -->
                <section class="glass-panel p-6">
                    <h2 class="text-xl font-bold mb-2">Bandwidth Waste Analysis</h2>
                    <p class="text-xs text-slate-500 mb-6">Visual representation of standard ZIP download vs. Git Loader extraction.</p>

                    <div class="chart-container">
                        <canvas id="bandwidthChart"></canvas>
                    </div>
                </section>
            </div>

            <!-- RIGHT COLUMN: Features, Interactive Flow & Details -->
            <div class="lg:col-span-2 space-y-8">

                <!-- Features Section -->
                <section class="glass-panel p-6">
                    <h2 class="text-2xl font-bold mb-2">✨ Core Features</h2>
                    <p class="text-sm text-slate-600 mb-6">Explore the interactive capabilities that make this tool awesome. Hover over the cards to interact.</p>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <!-- Feature Cards -->
                        <div class="bg-white/50 p-4 rounded-xl border border-white/60 hover:bg-white/80 transition-colors cursor-default">
                            <div class="text-2xl mb-2">🎯</div>
                            <h3 class="font-bold text-slate-800">Surgical Precision</h3>
                            <p class="text-sm text-slate-600 mt-1">Paste a specific URL, get only that directory. No extra bloat.</p>
                        </div>
                        <div class="bg-white/50 p-4 rounded-xl border border-white/60 hover:bg-white/80 transition-colors cursor-default">
                            <div class="text-2xl mb-2">🌳</div>
                            <h3 class="font-bold text-slate-800">Interactive File Tree</h3>
                            <p class="text-sm text-slate-600 mt-1">Inspect structure before downloading. Uncheck unwanted files.</p>
                        </div>
                        <div class="bg-white/50 p-4 rounded-xl border border-white/60 hover:bg-white/80 transition-colors cursor-default">
                            <div class="text-2xl mb-2">🧠</div>
                            <h3 class="font-bold text-slate-800">Smart Traversal</h3>
                            <p class="text-sm text-slate-600 mt-1">Bypasses GitHub's 100k file truncation limit by tiptoeing down your path.</p>
                        </div>
                        <div class="bg-white/50 p-4 rounded-xl border border-white/60 hover:bg-white/80 transition-colors cursor-default">
                            <div class="text-2xl mb-2">🕵️</div>
                            <h3 class="font-bold text-slate-800">Zero Backend</h3>
                            <p class="text-sm text-slate-600 mt-1">100% browser-based. Talks to GitHub API, uses JSZip locally.</p>
                        </div>
                    </div>
                </section>

                <!-- Interactive Explorer: How it works & Nerd Stuff -->
                <section class="glass-panel p-6">
                    <h2 class="text-2xl font-bold mb-2">🚀 Interactive Process Explorer</h2>
                    <p class="text-sm text-slate-600 mb-6">Click through the steps below to understand the user flow and the underlying technical architecture.</p>

                    <!-- Toggle Mode -->
                    <div class="flex gap-2 mb-6 bg-slate-200/50 p-1 rounded-lg w-max border border-slate-300/50">
                        <button id="btn-user-flow" class="tab-btn tab-active px-4 py-2 rounded-md text-sm transition-all" onclick="switchFlow('user')">User Flow</button>
                        <button id="btn-nerd-flow" class="tab-btn px-4 py-2 text-slate-500 hover:text-slate-800 rounded-md text-sm transition-all border border-transparent" onclick="switchFlow('nerd')">🤓 Nerd Stuff (Under the Hood)</button>
                    </div>

                    <!-- Dynamic Content Area -->
                    <div class="flex flex-col md:flex-row gap-6 bg-white/40 rounded-xl border border-white/60 p-4">

                        <!-- Step List -->
                        <div class="w-full md:w-1/3 border-r border-slate-200 pr-4">
                            <ul id="step-list" class="space-y-2">
                                <!-- Populated by JS -->
                            </ul>
                        </div>

                        <!-- Step Details -->
                        <div class="w-full md:w-2/3 flex items-center justify-center p-4 bg-slate-50/50 rounded-lg min-h-[150px]">
                            <p id="step-description" class="text-slate-700 font-medium text-center text-lg">
                                Select a step to view details.
                            </p>
                        </div>
                    </div>
                </section>

                <!-- Setup & Limitations (Accordions) -->
                <section class="glass-panel p-6">
                    <h2 class="text-xl font-bold mb-4">🛠️ Installation & ⚠️ Limitations</h2>
                    <div class="space-y-3">

                        <!-- Accordion 1 -->
                        <div class="border border-slate-200 bg-white/50 rounded-xl overflow-hidden">
                            <button class="w-full px-5 py-4 text-left font-bold flex justify-between items-center text-slate-800 hover:bg-white/80 transition-colors" onclick="toggleAccordion('acc-install')">
                                Running Locally
                                <span class="text-slate-400">▼</span>
                            </button>
                            <div id="acc-install" class="hidden px-5 py-4 border-t border-slate-200 text-sm text-slate-600 bg-white/30">
                                <p>Are you ready for the complex build steps?</p>
                                <ol class="list-decimal list-inside mt-2 space-y-1">
                                    <li>Clone or download this repo.</li>
                                    <li>Double-click <code class="bg-slate-200 px-1 rounded text-slate-800">index.html</code>.</li>
                                    <li><em>That's it.</em> No npm install, no Webpack nightmares, no dependency hell. Just Vanilla JS, Tailwind via CDN, and pure vibes.</li>
                                </ol>
                            </div>
                        </div>

                        <!-- Accordion 2 -->
                        <div class="border border-slate-200 bg-white/50 rounded-xl overflow-hidden">
                            <button class="w-full px-5 py-4 text-left font-bold flex justify-between items-center text-slate-800 hover:bg-white/80 transition-colors" onclick="toggleAccordion('acc-limits')">
                                Known Limitations
                                <span class="text-slate-400">▼</span>
                            </button>
                            <div id="acc-limits" class="hidden px-5 py-4 border-t border-slate-200 text-sm text-slate-600 bg-white/30">
                                <ul class="space-y-3">
                                    <li><strong class="text-slate-800">Rate Limits:</strong> If you are unauthenticated and downloading rapidly, GitHub's API might throw a <code class="bg-red-100 text-red-800 px-1 rounded">403 Rate Limit Exceeded</code> tantrum. Wait a few minutes.</li>
                                    <li><strong class="text-slate-800">Private Repos:</strong> Doesn't work for private repositories (client-side app, doesn't ask for tokens... yet).</li>
                                </ul>
                            </div>
                        </div>

                    </div>
                </section>

            </div>
        </div>

        <footer class="text-center text-sm text-slate-500 py-6 mt-8">
            <p>Created with ❤️, ☕, and a deep hatred for downloading unnecessary files.</p>
            <p class="mt-2 text-xs opacity-60">Interactive Presentation Dashboard</p>
        </footer>

    </div>

    <!-- Application Logic -->
    <script>
        // ----------------------------------------------------
        // DATA STORAGE (State Management)
        // ----------------------------------------------------
        const flows = {
            user: [
                { title: "1. Find Folder", desc: "Go to a GitHub repository and navigate to the specific folder you want." },
                { title: "2. Copy URL", desc: "Copy the URL from your browser's address bar. (e.g., https://github.com/facebook/react/tree/main/packages/react-dom)" },
                { title: "3. Paste Link", desc: "Paste it into the Git Loader input field." },
                { title: "4. Map Tree", desc: "Wait for the app to rapidly map the folder tree structure." },
                { title: "5. Filter", desc: "Uncheck the files you don't want, or just hit 'Download Selected' to grab it all." },
                { title: "6. Enjoy", desc: "Enjoy your perfectly trimmed ZIP file, completely free of 10 years of git history!" }
            ],
            nerd: [
                { title: "1. Parsing", desc: "Parses your messy GitHub URL into internal variables: owner, repo, branch, and path." },
                { title: "2. API Traversal", desc: "Uses the GitHub Git Data API to walk down the tree step-by-step, avoiding truncation limits." },
                { title: "3. Concurrent Fetch", desc: "Fetches the raw file blobs concurrently (but politely, with a concurrency limit so GitHub doesn't ban us)." },
                { title: "4. JSZip Bundling", desc: "Uses JSZip to stitch the blobs back together into a ZIP archive mimicking the exact original folder structure." },
                { title: "5. Local Serve", desc: "Serves the generated blob to you as a local browser download." }
            ]
        };

        let currentFlowType = 'user';

        // ----------------------------------------------------
        // INITIALIZATION
        // ----------------------------------------------------
        document.addEventListener('DOMContentLoaded', () => {
            initChart();
            renderFlow(currentFlowType);
        });

        // ----------------------------------------------------
        // CORE INTERACTION HANDLING
        // ----------------------------------------------------

        // Functional Navigation for Flow Explorer
        function switchFlow(type) {
            currentFlowType = type;

            // Update Tab UI
            const btnUser = document.getElementById('btn-user-flow');
            const btnNerd = document.getElementById('btn-nerd-flow');

            if (type === 'user') {
                btnUser.classList.add('tab-active', 'text-slate-800');
                btnUser.classList.remove('text-slate-500', 'border-transparent');

                btnNerd.classList.remove('tab-active', 'text-slate-800');
                btnNerd.classList.add('text-slate-500', 'border-transparent');
            } else {
                btnNerd.classList.add('tab-active', 'text-slate-800');
                btnNerd.classList.remove('text-slate-500', 'border-transparent');

                btnUser.classList.remove('tab-active', 'text-slate-800');
                btnUser.classList.add('text-slate-500', 'border-transparent');
            }

            renderFlow(type);
        }

        function renderFlow(type) {
            const listContainer = document.getElementById('step-list');
            const descContainer = document.getElementById('step-description');

            listContainer.innerHTML = ''; // Clear list
            const data = flows[type];

            data.forEach((step, index) => {
                const li = document.createElement('li');
                const btn = document.createElement('button');
                btn.className = `w-full text-left px-3 py-2 rounded-lg text-sm font-medium transition-colors ${index === 0 ? 'bg-sky-100 text-sky-800' : 'text-slate-600 hover:bg-slate-100'}`;
                btn.textContent = step.title;

                // Interaction Event Listener
                btn.onclick = () => {
                    // Reset all buttons
                    Array.from(listContainer.children).forEach(child => {
                        child.firstChild.className = 'w-full text-left px-3 py-2 rounded-lg text-sm font-medium transition-colors text-slate-600 hover:bg-slate-100';
                    });
                    // Highlight selected
                    btn.className = 'w-full text-left px-3 py-2 rounded-lg text-sm font-medium transition-colors bg-sky-100 text-sky-800';
                    // Update text
                    descContainer.style.opacity = 0;
                    setTimeout(() => {
                        descContainer.textContent = step.desc;
                        descContainer.style.opacity = 1;
                    }, 150);
                };

                li.appendChild(btn);
                listContainer.appendChild(li);
            });

            // Initialize first step description with fade transition
            descContainer.style.transition = 'opacity 0.2s ease';
            descContainer.textContent = data[0].desc;
        }

        // Accordion Logic
        function toggleAccordion(id) {
            const content = document.getElementById(id);
            if (content.classList.contains('hidden')) {
                content.classList.remove('hidden');
            } else {
                content.classList.add('hidden');
            }
        }

        // ----------------------------------------------------
        // VISUALIZATION (Chart.js)
        // ----------------------------------------------------
        function initChart() {
            const ctx = document.getElementById('bandwidthChart').getContext('2d');

            new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: [
                        'Wasted Bandwidth (Git History, Modules)',
                        'Actual Target Folder (What you need)'
                    ],
                    datasets: [{
                        data: [99.5, 0.5], // Illustrative data based on "5GB vs 2MB"
                        backgroundColor: [
                            'rgba(203, 213, 225, 0.5)', // slate-300 transparent
                            'rgba(14, 165, 233, 1)'     // sky-500 bold
                        ],
                        borderColor: [
                            'rgba(255, 255, 255, 1)',
                            'rgba(255, 255, 255, 1)'
                        ],
                        borderWidth: 2,
                        hoverOffset: 10
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false, // Strict requirement for responsive container bounds
                    cutout: '70%',
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: {
                                font: { family: 'ui-sans-serif, system-ui' },
                                color: '#475569' // slate-600
                            }
                        },
                        tooltip: {
                            backgroundColor: 'rgba(15, 23, 42, 0.9)', // slate-900
                            titleFont: { size: 13 },
                            bodyFont: { size: 14 },
                            padding: 12,
                            cornerRadius: 8,
                            callbacks: {
                                label: function(context) {
                                    // Custom tooltip logic to wrap text and explain context
                                    let label = context.label || '';
                                    if (label) { label += ': '; }
                                    if (context.parsed !== null) {
                                        label += context.parsed + '% of Total Download';
                                    }
                                    return label;
                                }
                            }
                        }
                    },
                    animation: {
                        animateScale: true,
                        animateRotate: true
                    }
                }
            });
        }
    </script>
</body>
</html>