Skip to content

Commit e8ca724

Browse files
RealMathModelRealMathModel
authored
Create category.html
1 parent 4edbc88 commit e8ca724

1 file changed

Lines changed: 159 additions & 0 deletions

File tree

‎category.html‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
6+
<meta name="theme-color" content="#0B1220">
7+
<meta name="apple-mobile-web-app-capable" content="yes">
8+
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
9+
<title>resources — realmathmodel</title>
10+
<link rel="apple-touch-icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Crect width='180' height='180' rx='38' fill='%230B1220'/%3E%3Ctext x='26' y='118' font-family='monospace' font-size='62' fill='%23E0B23C'%3E%26gt;_%3C/text%3E%3C/svg%3E">
11+
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Crect width='32' height='32' rx='7' fill='%230B1220'/%3E%3Ctext x='4' y='23' font-family='monospace' font-size='18' fill='%23E0B23C'%3E%26gt;_%3C/text%3E%3C/svg%3E">
12+
<style>
13+
:root{
14+
--bg:#0B1220; --bg2:#0E1726; --panel:#141E33; --panel2:#192541;
15+
--line:#26334E; --line2:#33425f;
16+
--ink:#E7ECF7; --muted:#8A97AD; --faint:#5C6981;
17+
--amber:#E7B53D; --amber-dim:#9c7a25;
18+
--good:#4FC08A; --bad:#EB6A4E;
19+
--blue:#6F9BE8; --purple:#B79BE0; --orange:#E08A5B; --teal:#4FB89A; --green:#4FC08A;
20+
--mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,"Liberation Mono",monospace;
21+
--sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
22+
}
23+
*{box-sizing:border-box}
24+
html,body{margin:0;padding:0}
25+
body{
26+
background:
27+
radial-gradient(1200px 600px at 70% -10%, rgba(231,181,61,.06), transparent 60%),
28+
radial-gradient(900px 500px at -10% 110%, rgba(79,184,154,.06), transparent 55%),
29+
var(--bg);
30+
color:var(--ink); font-family:var(--sans);
31+
-webkit-font-smoothing:antialiased; line-height:1.5; min-height:100vh; min-height:100dvh;
32+
}
33+
.wrap{max-width:740px; margin:0 auto; padding:0 16px env(safe-area-inset-bottom) 16px;
34+
padding-top:calc(12px + env(safe-area-inset-top));}
35+
.term{background:linear-gradient(180deg,var(--panel),var(--bg2));
36+
border:1px solid var(--line); border-radius:12px; overflow:hidden;
37+
box-shadow:0 24px 60px -28px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.03);}
38+
.termbar{display:flex; align-items:center; gap:8px; padding:10px 14px;
39+
background:rgba(255,255,255,.02); border-bottom:1px solid var(--line);}
40+
.dot{width:11px;height:11px;border-radius:50%}
41+
.dot.r{background:#e8654b}.dot.y{background:#e7b53d}.dot.g{background:#4fc08a}
42+
.termtitle{font-family:var(--mono); font-size:12px; color:var(--faint); margin-left:8px; letter-spacing:.02em}
43+
.termbody{padding:18px 18px 22px}
44+
@media(min-width:560px){.termbody{padding:24px 26px 28px}}
45+
.back{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:12.5px;
46+
color:var(--muted); text-decoration:none; margin-bottom:12px}
47+
.back:hover{color:var(--amber)}
48+
.prompt{font-family:var(--mono); font-size:13px; color:var(--muted); margin:0 0 6px}
49+
.prompt .u{color:var(--good)} .prompt .p{color:var(--blue)} .prompt .d{color:var(--amber)}
50+
.head{display:flex; align-items:center; gap:13px; margin-bottom:4px}
51+
.ic{width:46px;height:46px;border-radius:11px;flex:0 0 auto; display:grid; place-items:center;
52+
font-family:var(--mono); font-size:21px; font-weight:700; border:1px solid transparent}
53+
.ic.amber{background:rgba(231,181,61,.16); color:var(--amber); border-color:rgba(231,181,61,.3)}
54+
.ic.blue{background:rgba(111,155,232,.16); color:var(--blue); border-color:rgba(111,155,232,.3)}
55+
.ic.purple{background:rgba(183,155,224,.16); color:var(--purple); border-color:rgba(183,155,224,.3)}
56+
.ic.orange{background:rgba(224,138,91,.16); color:var(--orange); border-color:rgba(224,138,91,.3)}
57+
.ic.teal{background:rgba(79,184,154,.16); color:var(--teal); border-color:rgba(79,184,154,.3)}
58+
.ic.green{background:rgba(79,192,138,.16); color:var(--green); border-color:rgba(79,192,138,.3)}
59+
h1{font-family:var(--mono); font-weight:700; font-size:23px; letter-spacing:-.01em; margin:0; line-height:1.15}
60+
@media(min-width:560px){h1{font-size:27px}}
61+
.sub{color:var(--muted); font-size:13.5px; margin:8px 0 2px}
62+
.label{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
63+
color:var(--faint); margin:20px 0 10px; display:flex; align-items:center; gap:8px}
64+
.label::before{content:""; width:14px; height:1px; background:var(--line2)}
65+
/* resource rows */
66+
.list{display:flex; flex-direction:column; gap:8px}
67+
.res{display:flex; align-items:center; gap:12px; padding:13px 14px;
68+
background:var(--panel); border:1px solid var(--line); border-radius:10px;
69+
text-decoration:none; color:inherit; transition:border-color .15s, background .15s, transform .12s}
70+
.res:hover{border-color:var(--line2); background:linear-gradient(var(--panel),var(--panel2))}
71+
.res:active{transform:translateY(1px)}
72+
.res.todo{cursor:default; border-style:dashed; opacity:.72}
73+
.res.todo:hover{border-color:var(--line); background:var(--panel); transform:none}
74+
.kind{font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; padding:3px 7px; border-radius:6px;
75+
flex:0 0 auto; font-weight:700}
76+
.kind.int{background:rgba(79,184,154,.14); color:var(--teal); border:1px solid rgba(79,184,154,.35)}
77+
.kind.ext{background:rgba(111,155,232,.14); color:var(--blue); border:1px solid rgba(111,155,232,.35)}
78+
.kind.todo{background:rgba(140,150,170,.1); color:var(--faint); border:1px solid var(--line2)}
79+
.rbody{flex:1 1 auto; min-width:0}
80+
.rlabel{font-size:14px; color:var(--ink)}
81+
.rnote{font-family:var(--mono); font-size:11px; color:var(--faint); margin-top:2px}
82+
.rgo{font-family:var(--mono); color:var(--faint); font-size:15px; flex:0 0 auto; transition:color .15s, transform .15s}
83+
.res:hover .rgo{color:var(--amber); transform:translateX(2px)}
84+
.note{color:var(--faint); font-size:12.5px; line-height:1.6; margin:22px 2px 4px; border-top:1px solid var(--line); padding-top:14px}
85+
.note b{color:var(--muted)} .note code{font-family:var(--mono); color:var(--amber); font-size:12px}
86+
.miss{font-family:var(--mono); color:var(--muted); font-size:14px; padding:14px 0}
87+
.miss a{color:var(--amber)}
88+
.foot{font-family:var(--mono); font-size:11px; color:var(--faint); text-align:center; margin:16px 0 6px}
89+
</style>
90+
</head>
91+
<body>
92+
<div class="wrap">
93+
<div class="term">
94+
<div class="termbar">
95+
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
96+
<span class="termtitle" id="ttl">realmathmodel — bash — 80×24</span>
97+
</div>
98+
<div class="termbody">
99+
<a class="back" href="index.html">‹ cd ..</a>
100+
<div id="content"></div>
101+
<p class="foot">&gt; realmathmodel.github.io</p>
102+
</div>
103+
</div>
104+
</div>
105+
106+
<script src="catalog.js"></script>
107+
<script>
108+
(function(){
109+
function esc(s){return String(s).replace(/[&<>"]/g,function(c){return({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]);});}
110+
function param(k){return new URLSearchParams(location.search).get(k);}
111+
var id = param('id');
112+
var cats = (window.CATALOG && CATALOG.categories) || [];
113+
var c = cats.filter(function(x){return x.id===id;})[0];
114+
var box = document.getElementById('content');
115+
var owner=(CATALOG&&CATALOG.owner)||'hasan', host=(CATALOG&&CATALOG.host)||'iug';
116+
117+
if(!c){
118+
document.getElementById('ttl').textContent = 'not found — bash';
119+
box.innerHTML = '<p class="prompt"><span class="u">'+esc(owner)+'</span>@<span class="p">'+esc(host)+
120+
'</span>:<span class="d">~</span>$ cat '+esc(id||'?')+'</p>'+
121+
'<p class="miss">No such area. <a href="index.html">Back to the hub ›</a></p>';
122+
return;
123+
}
124+
125+
document.getElementById('ttl').textContent = c.id + ' — bash — 80×24';
126+
document.title = c.title + ' — realmathmodel';
127+
128+
var rows = (c.resources||[]).map(function(r){
129+
var todo = (!r.href || r.href==='#');
130+
var ext = (r.type==='external');
131+
if(todo){
132+
return '<div class="res todo">'+
133+
'<span class="kind todo">TODO</span>'+
134+
'<div class="rbody"><div class="rlabel">'+esc(r.label)+'</div>'+
135+
'<div class="rnote">'+(r.note?esc(r.note):'internal page not added yet')+'</div></div>'+
136+
'<span class="rgo">·</span></div>';
137+
}
138+
return '<a class="res" href="'+esc(r.href)+'"'+(ext?' target="_blank" rel="noopener"':'')+'>'+
139+
'<span class="kind '+(ext?'ext':'int')+'">'+(ext?'EXT':'INT')+'</span>'+
140+
'<div class="rbody"><div class="rlabel">'+esc(r.label)+'</div>'+
141+
(r.note?'<div class="rnote">'+esc(r.note)+'</div>':'')+'</div>'+
142+
'<span class="rgo">'+(ext?'↗':'›')+'</span></a>';
143+
}).join('');
144+
145+
var n=(c.resources||[]).length;
146+
box.innerHTML =
147+
'<p class="prompt"><span class="u">'+esc(owner)+'</span>@<span class="p">'+esc(host)+
148+
'</span>:<span class="d">~/study</span>$ open '+esc(c.id)+'</p>'+
149+
'<div class="head"><div class="ic '+(c.accent||'amber')+'">'+esc(c.icon||'•')+'</div>'+
150+
'<div><h1>'+esc(c.title)+'</h1></div></div>'+
151+
(c.blurb?'<p class="sub">'+esc(c.blurb)+'</p>':'')+
152+
'<div class="label">'+n+' resource'+(n===1?'':'s')+'</div>'+
153+
'<div class="list">'+rows+'</div>'+
154+
'<p class="note"><b>INT</b> = a page in this repo · <b>EXT</b> = outside site (new tab) · '+
155+
'<b>TODO</b> = add the file then set its <code>href</code> in <code>catalog.js</code>.</p>';
156+
})();
157+
</script>
158+
</body>
159+
</html>

0 commit comments

Comments
 (0)