summaryrefslogtreecommitdiffstats
path: root/head.html
blob: 8f1b96b67e7d86dd98230a738961a74caa50fbc6 (plain)
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
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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=Oxanium:wght@400;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  var td = document.querySelector('table#header td.main');
  if (!td) return;
  var homeLink = td.querySelector('a[href="/"]');
  if (!homeLink) return;
  homeLink.textContent = '/repos';
  td.childNodes.forEach(function(node) {
    if (node.nodeType === 3) {
      node.textContent = node.textContent.replace(' : ', '/');
    }
  });

  // Rewrite relative img src in README/about pages to cgit plain/ endpoint
  if (/\/about\//.test(window.location.pathname)) {
    var m = window.location.pathname.match(/^\/([^/]+)\/about\//);
    if (m) {
      var repo = m[1];
      var branch = (new URLSearchParams(window.location.search)).get('h') || 'main';
      document.querySelectorAll('div#summary img').forEach(function(img) {
        var src = img.getAttribute('src');
        if (src && !/^https?:\/\//.test(src) && !/^\//.test(src)) {
          img.src = '/' + repo + '/plain/' + src + '?h=' + branch;
        }
      });
    }
  }
});
</script>
<script>
(function() {
  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;

  var ASCII = Array.from({ length: 94 }, function(_, i) { return String.fromCharCode(33 + i); });
  var KATA  = Array.from({ length: 96 }, function(_, i) { return String.fromCodePoint(0x30a0 + i); });
  var CHARS = shuffle([].concat(ASCII, KATA, KATA, KATA));

  function shuffle(arr) {
    for (var i = arr.length - 1; i > 0; i--) {
      var j = Math.floor(Math.random() * (i + 1));
      var tmp = arr[i]; arr[i] = arr[j]; arr[j] = tmp;
    }
    return arr;
  }

  function hexToRgba(color, alpha) {
    var hex = color.replace('#', '');
    var r = parseInt(hex.substring(0, 2), 16);
    var g = parseInt(hex.substring(2, 4), 16);
    var b = parseInt(hex.substring(4, 6), 16);
    return 'rgba(' + r + ',' + g + ',' + b + ',' + alpha + ')';
  }

  document.addEventListener('DOMContentLoaded', function() {
    var header = document.querySelector('table#header');
    if (!header) return;

    var canvas = document.createElement('canvas');
    canvas.id = 'matrix-rain-canvas';
    canvas.style.cssText = 'position:absolute;top:0;right:0;height:100%;pointer-events:none;z-index:0;';
    header.appendChild(canvas);

    var fade = document.createElement('div');
    fade.style.cssText = 'position:absolute;top:0;right:0;bottom:0;width:65%;background:linear-gradient(to right,var(--bg2) 0%,transparent 60%);pointer-events:none;z-index:1;';
    header.appendChild(fade);

    var ctx = canvas.getContext('2d');
    var columns = [];
    var frameCount = 0;
    var colors = { accent: '#a855f7', accent2: '#00ff88', bg: '#0c1520', head: '#c4d6e8' };

    function sampleColors() {
      var style = getComputedStyle(document.documentElement);
      colors.accent  = style.getPropertyValue('--accent').trim()  || '#a855f7';
      colors.accent2 = style.getPropertyValue('--accent2').trim() || '#00ff88';
      colors.bg      = style.getPropertyValue('--bg2').trim()     || '#0c1520';
      colors.head    = style.getPropertyValue('--text').trim()    || '#c4d6e8';
    }

    function resizeCanvas() {
      canvas.width  = Math.floor(header.offsetWidth * 0.65);
      canvas.height = header.offsetHeight;
      ctx.font = '14px "JetBrains Mono", monospace';
      ctx.textBaseline = 'top';
      initColumns();
    }

    function initColumns() {
      columns = [];
      var columnWidth = 14;
      var columnCount = Math.floor(canvas.width / columnWidth);
      for (var i = 0; i < columnCount; i++) {
        columns.push({
          x:         i * columnWidth,
          y:         -Math.floor(Math.random() * 40),
          speed:     2 + Math.floor(Math.random() * 3),
          color:     Math.random() < 0.35 ? 'accent' : 'accent2',
          charIndex: Math.floor(Math.random() * CHARS.length),
          length:    8 + Math.floor(Math.random() * 13)
        });
      }
    }

    function drawFrame() {
      frameCount++;
      ctx.fillStyle = hexToRgba(colors.bg, 0.085);
      ctx.fillRect(0, 0, canvas.width, canvas.height);

      for (var ci = 0; ci < columns.length; ci++) {
        var col = columns[ci];
        if (frameCount % col.speed !== 0) continue;

        ctx.fillStyle = colors[col.color];
        for (var i = 1; i <= col.length; i++) {
          var trailY = (col.y - i) * 14;
          if (trailY < 0) continue;
          var trailCharIndex = (col.charIndex - i + CHARS.length) % CHARS.length;
          ctx.fillText(CHARS[trailCharIndex], col.x, trailY);
        }

        ctx.fillStyle = colors.head;
        ctx.fillText(CHARS[col.charIndex % CHARS.length], col.x, col.y * 14);

        col.y++;
        col.charIndex = (col.charIndex + 1) % CHARS.length;

        if (col.y * 14 > canvas.height + col.length * 14) {
          col.y         = -Math.floor(Math.random() * 20);
          col.charIndex = Math.floor(Math.random() * CHARS.length);
          col.color     = Math.random() < 0.35 ? 'accent' : 'accent2';
        }
      }

      requestAnimationFrame(drawFrame);
    }

    sampleColors();
    resizeCanvas();

    var resizeTimer;
    window.addEventListener('resize', function() {
      clearTimeout(resizeTimer);
      resizeTimer = setTimeout(resizeCanvas, 150);
    });

    document.fonts.ready.then(function() {
      requestAnimationFrame(drawFrame);
    });
  });
})();
</script>