citebound/Progreso.dc.html at main · samuvm/citebound · 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
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <script src="./support.js"></script>
</head>
<body>
<x-dc>
<helmet>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Public+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap">
  <style>
    body { margin: 0; font-family: "Public Sans", ui-sans-serif, system-ui, sans-serif; }
    a { color: #7cc0ff; text-decoration: none; } a:hover { color: #a8d6ff; }
    @keyframes sube { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
    @keyframes crece { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    @keyframes dibuja { to { stroke-dashoffset: 0; } }
    .anim { animation: sube .5s cubic-bezier(.22,1,.36,1) both; }
    .d1 { animation-delay: .04s } .d2 { animation-delay: .12s } .d3 { animation-delay: .2s }
    .relleno { transform-origin: left center; animation: crece .8s cubic-bezier(.22,1,.36,1) both; }
    .curva { stroke-dasharray: 900; stroke-dashoffset: 900; animation: dibuja 1.4s .35s cubic-bezier(.4,0,.2,1) forwards; }
    .fila:hover .relleno { filter: brightness(1.15); }
  </style>
</helmet>

<div style="width: 1120px; min-height: 980px; background: #0a0e13; color: #e9eef5; font-size: 16px; line-height: 1.6;">

  <header style="display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 40px; border-bottom: 1px solid #1e2733; background: #111720;">
    <div style="display: flex; align-items: center; gap: 13px;">
      <div style="width: 34px; height: 34px; border-radius: 9px; background: #5eb0f5; display: flex; align-items: center; justify-content: center;">
        <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#0b0f14" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h11l5 5v11a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1z"></path><path d="M14 4v6h6"></path><path d="M8.5 15.5l2 2 4.5-4.5"></path></svg>
      </div>
      <div style="display: flex; flex-direction: column; gap: 1px;">
        <span style="font-family: 'Instrument Serif', Georgia, serif; font-size: 21px; line-height: 1;">Citebound</span>
        <span style="font-size: 11.5px; color: #8b98a8; letter-spacing: .06em; text-transform: uppercase;">normativa de circulación</span>
      </div>
    </div>
    <nav style="display: flex; gap: 3px; background: #0a0e13; padding: 4px; border-radius: 11px; border: 1px solid #1e2733;">
      <span style="padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; color: #8b98a8;">Practicar</span>
      <span style="padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; background: #5eb0f5; color: #08121c;">Tu progreso</span>
      <span style="padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; color: #8b98a8;">Por qué es más seguro</span>
    </nav>
  </header>

  <div style="padding: 34px 40px 56px; display: flex; flex-direction: column; gap: 20px;">

    <!-- ===================================================== resumen en tres cifras -->
    <div class="anim d1" style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;">
      <div style="background: #111720; border: 1px solid #1e2733; border-radius: 16px; padding: 22px 24px;">
        <div style="font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #8b98a8; margin-bottom: 8px;">Materias tocadas</div>
        <div style="font-family: 'Instrument Serif', Georgia, serif; font-size: 42px; line-height: 1;">6 <span style="font-size: 20px; color: #8b98a8;">de 13</span></div>
      </div>
      <div style="background: #111720; border: 1px solid #1e2733; border-radius: 16px; padding: 22px 24px;">
        <div style="font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #8b98a8; margin-bottom: 8px;">Dominio medio</div>
        <div style="font-family: 'Instrument Serif', Georgia, serif; font-size: 42px; line-height: 1; color: #5eb0f5;">48 %</div>
      </div>
      <div style="background: #111720; border: 1px solid #1e2733; border-radius: 16px; padding: 22px 24px;">
        <div style="font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #8b98a8; margin-bottom: 8px;">Ya consolidada</div>
        <div style="font-family: 'Instrument Serif', Georgia, serif; font-size: 42px; line-height: 1; color: #3ddc97;">1</div>
      </div>
    </div>

    <!-- ============================================================ barras por materia -->
    <section class="anim d2" style="background: #111720; border: 1px solid #1e2733; border-radius: 18px; padding: 30px 36px;">
      <h2 style="font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: 24px; margin: 0 0 8px;">Qué cree el modelo que dominas</h2>
      <p style="font-size: 14.5px; color: #8b98a8; margin: 0 0 26px; max-width: 74ch;">
        Cada barra es la probabilidad de que domines esa materia, estimada con <b style="color: #e9eef5; font-weight: 600;">Bayesian Knowledge Tracing</b>: tiene en cuenta que con tres opciones se acierta una de cada tres por suerte, y que a veces se falla sabiéndolo. Por eso <b style="color: #e9eef5; font-weight: 600;">no es tu porcentaje de aciertos</b>.
      </p>

      <div style="display: flex; flex-direction: column; gap: 15px;">
        <div class="fila" style="display: grid; grid-template-columns: 210px 1fr 78px; align-items: center; gap: 18px;">
          <span style="font-size: 14px;">Velocidad</span>
          <div style="height: 10px; border-radius: 99px; background: #1a222d; overflow: hidden;"><div class="relleno" style="width: 88%; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #3ddc97, #5ee8ab); animation-delay: .1s;"></div></div>
          <span style="font-size: 13.5px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; color: #3ddc97;">88 %</span>
        </div>
        <div class="fila" style="display: grid; grid-template-columns: 210px 1fr 78px; align-items: center; gap: 18px;">
          <span style="font-size: 14px;">Uso de la vía y adelantamientos</span>
          <div style="height: 10px; border-radius: 99px; background: #1a222d; overflow: hidden;"><div class="relleno" style="width: 61%; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #5eb0f5, #7cc7ff); animation-delay: .18s;"></div></div>
          <span style="font-size: 13.5px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums;">61 %</span>
        </div>
        <div class="fila" style="display: grid; grid-template-columns: 210px 1fr 78px; align-items: center; gap: 18px;">
          <span style="font-size: 14px;">Marcas viales</span>
          <div style="height: 10px; border-radius: 99px; background: #1a222d; overflow: hidden;"><div class="relleno" style="width: 47%; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #5eb0f5, #7cc7ff); animation-delay: .26s;"></div></div>
          <span style="font-size: 13.5px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums;">47 %</span>
        </div>
        <div class="fila" style="display: grid; grid-template-columns: 210px 1fr 78px; align-items: center; gap: 18px;">
          <span style="font-size: 14px;">Preferencias</span>
          <div style="height: 10px; border-radius: 99px; background: #1a222d; overflow: hidden;"><div class="relleno" style="width: 34%; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #5eb0f5, #7cc7ff); animation-delay: .34s;"></div></div>
          <span style="font-size: 13.5px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums;">34 %</span>
        </div>
        <div class="fila" style="display: grid; grid-template-columns: 210px 1fr 78px; align-items: center; gap: 18px;">
          <span style="font-size: 14px;">Inmovilizaciones</span>
          <div style="height: 10px; border-radius: 99px; background: #1a222d; overflow: hidden;"><div class="relleno" style="width: 19%; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #c9a227, #e0bb4a); animation-delay: .42s;"></div></div>
          <span style="font-size: 13.5px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; color: #e0bb4a;">19 %</span>
        </div>
        <div class="fila" style="display: grid; grid-template-columns: 210px 1fr 78px; align-items: center; gap: 18px;">
          <span style="font-size: 14px;">Primeros auxilios</span>
          <div style="height: 10px; border-radius: 99px; background: #1a222d; overflow: hidden;"><div class="relleno" style="width: 12%; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #c9a227, #e0bb4a); animation-delay: .5s;"></div></div>
          <span style="font-size: 13.5px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; color: #e0bb4a;">12 %</span>
        </div>
      </div>
    </section>

    <!-- ================================================== por qué el 50 % es lo que informa -->
    <section class="anim d3" style="background: #111720; border: 1px solid #1e2733; border-radius: 18px; padding: 30px 36px 26px;">
      <h2 style="font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: 24px; margin: 0 0 8px;">Cómo elige la siguiente pregunta</h2>
      <p style="font-size: 14.5px; color: #8b98a8; margin: 0 0 22px; max-width: 74ch;">
        No te sirve lo que probablemente aciertes —eso repite lo que ya sabes y da una sensación falsa de progreso— ni lo que probablemente falles. Sirve aquella cuyo resultado <b style="color: #e9eef5; font-weight: 600;">menos se puede predecir</b>.
      </p>

      <svg viewBox="0 0 1040 250" style="width: 100%; height: auto;">
        <defs>
          <linearGradient id="bajoCurva" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color="#5eb0f5" stop-opacity=".28"></stop>
            <stop offset="100%" stop-color="#5eb0f5" stop-opacity="0"></stop>
          </linearGradient>
        </defs>
        <rect x="0" y="10" width="1040" height="185" rx="12" fill="#0d131b"></rect>
        <line x1="520" y1="10" x2="520" y2="195" stroke="#3ddc97" stroke-width="1.2" stroke-dasharray="5 5" opacity=".6"></line>
        <path d="M0 195 C 130 195, 190 60, 260 40 C 340 18, 420 12, 520 12 C 620 12, 700 18, 780 40 C 850 60, 910 195, 1040 195 Z" fill="url(#bajoCurva)"></path>
        <path class="curva" d="M0 195 C 130 195, 190 60, 260 40 C 340 18, 420 12, 520 12 C 620 12, 700 18, 780 40 C 850 60, 910 195, 1040 195" fill="none" stroke="#5eb0f5" stroke-width="2.6" stroke-linecap="round"></path>
        <circle cx="520" cy="12" r="6" fill="#3ddc97"></circle>
        <text x="520" y="-2" text-anchor="middle" font-family="Public Sans, sans-serif" font-size="13" font-weight="700" fill="#3ddc97" dy="0">aquí es donde más se aprende de ti</text>
        <text x="14" y="182" font-family="Public Sans, sans-serif" font-size="12.5" fill="#8b98a8">ya se sabe que fallarás</text>
        <text x="1026" y="182" text-anchor="end" font-family="Public Sans, sans-serif" font-size="12.5" fill="#8b98a8">ya se sabe que acertarás</text>
        <text x="0" y="218" font-family="Public Sans, sans-serif" font-size="12" fill="#8b98a8">0 %</text>
        <text x="520" y="218" text-anchor="middle" font-family="Public Sans, sans-serif" font-size="12" font-weight="600" fill="#e9eef5">50 %</text>
        <text x="1040" y="218" text-anchor="end" font-family="Public Sans, sans-serif" font-size="12" fill="#8b98a8">100 %</text>
        <text x="520" y="242" text-anchor="middle" font-family="Public Sans, sans-serif" font-size="13" fill="#8b98a8">probabilidad de que aciertes la pregunta</text>
      </svg>
    </section>

  </div>
</div>
</x-dc>
</body>
</html>