aprenderbitcoin-mx/progress-bar-template.html at master · BTCBoyd/aprenderbitcoin-mx · 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
<!-- Progress Bar Component - Add to top of each chapter -->
<div class="chapter-progress">
    <div class="time-estimate">
        ⏱️ <strong>Tiempo total:</strong> 45-60 minutos
        <span class="optional-note">(25 min opcionales)</span>
    </div>
    <div class="progress-bar">
        <div class="progress-step completed" data-section="pre">
            <span class="step-icon">📖</span>
            <span class="step-label">Pre-lectura</span>
            <span class="step-time">5 min</span>
        </div>
        <div class="progress-step active" data-section="video">
            <span class="step-icon">🎥</span>
            <span class="step-label">Video</span>
            <span class="step-time">11 min</span>
        </div>
        <div class="progress-step" data-section="discussion">
            <span class="step-icon">💬</span>
            <span class="step-label">Discusión</span>
            <span class="step-time">10 min</span>
        </div>
        <div class="progress-step optional" data-section="deep">
            <span class="step-icon">🔬</span>
            <span class="step-label">Profundo</span>
            <span class="step-time">15 min</span>
        </div>
        <div class="progress-step" data-section="case">
            <span class="step-icon">🇲🇽</span>
            <span class="step-label">Caso MX</span>
            <span class="step-time">8 min</span>
        </div>
        <div class="progress-step" data-section="exercise">
            <span class="step-icon">🎯</span>
            <span class="step-label">Ejercicio</span>
            <span class="step-time">5 min</span>
        </div>
    </div>
</div>

<!-- Breadcrumb Navigation -->
<nav class="breadcrumb">
    <a href="index.html">Inicio</a>
    <span class="separator">›</span>
    <a href="index.html#capitulos">Capítulos</a>
    <span class="separator">›</span>
    <span class="current">Capítulo 1: Dinero</span>
</nav>

<!-- Sticky ArcadiaB CTA (appears after 10 seconds) -->
<div class="sticky-cta" id="stickyArcadiaCTA">
    <div class="cta-content">
        <span class="cta-icon">💰</span>
        <span class="cta-text">¿Ya tienes Bitcoin? Obtén liquidez sin vender</span>
        <a href="https://www.kapitalex.com/#/register?ref=FDQEXS1WD6LZ4IQ" target="_blank" class="cta-button">Conocer B2X →</a>
        <button class="cta-close" onclick="document.getElementById('stickyArcadiaCTA').style.display='none'">✕</button>
    </div>
</div>