Skip to content

Commit 4edbc88

Browse files
RealMathModelRealMathModel
authored
Update index.html
1 parent 13b9801 commit 4edbc88

1 file changed

Lines changed: 176 additions & 1 deletion

File tree

‎index.html‎

Lines changed: 176 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,176 @@
1-
<h1>Hello</h1>
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+
<meta name="apple-mobile-web-app-title" content="Study Hub">
10+
<title>realmathmodel — study hub</title>
11+
<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">
12+
<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">
13+
<style>
14+
:root{
15+
--bg:#0B1220; --bg2:#0E1726; --panel:#141E33; --panel2:#192541;
16+
--line:#26334E; --line2:#33425f;
17+
--ink:#E7ECF7; --muted:#8A97AD; --faint:#5C6981;
18+
--amber:#E7B53D; --amber-dim:#9c7a25;
19+
--good:#4FC08A; --bad:#EB6A4E;
20+
--blue:#6F9BE8; --purple:#B79BE0; --orange:#E08A5B; --teal:#4FB89A; --green:#4FC08A;
21+
--mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,"Liberation Mono",monospace;
22+
--sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
23+
}
24+
*{box-sizing:border-box}
25+
html,body{margin:0;padding:0}
26+
body{
27+
background:
28+
radial-gradient(1200px 600px at 70% -10%, rgba(231,181,61,.06), transparent 60%),
29+
radial-gradient(900px 500px at -10% 110%, rgba(79,184,154,.06), transparent 55%),
30+
var(--bg);
31+
color:var(--ink); font-family:var(--sans);
32+
-webkit-font-smoothing:antialiased; line-height:1.5;
33+
min-height:100vh; min-height:100dvh;
34+
}
35+
.wrap{max-width:740px; margin:0 auto; padding:0 16px env(safe-area-inset-bottom) 16px;
36+
padding-top:calc(12px + env(safe-area-inset-top));}
37+
.term{background:linear-gradient(180deg,var(--panel),var(--bg2));
38+
border:1px solid var(--line); border-radius:12px; overflow:hidden;
39+
box-shadow:0 24px 60px -28px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.03);}
40+
.termbar{display:flex; align-items:center; gap:8px; padding:10px 14px;
41+
background:rgba(255,255,255,.02); border-bottom:1px solid var(--line);}
42+
.dot{width:11px;height:11px;border-radius:50%}
43+
.dot.r{background:#e8654b}.dot.y{background:#e7b53d}.dot.g{background:#4fc08a}
44+
.termtitle{font-family:var(--mono); font-size:12px; color:var(--faint); margin-left:8px; letter-spacing:.02em}
45+
.termbody{padding:18px 18px 22px}
46+
@media(min-width:560px){.termbody{padding:24px 26px 28px}}
47+
.prompt{font-family:var(--mono); font-size:13px; color:var(--muted); margin:0 0 4px}
48+
.prompt .u{color:var(--good)} .prompt .p{color:var(--blue)} .prompt .d{color:var(--amber)}
49+
.cursor{display:inline-block;width:8px;height:15px;background:var(--amber);
50+
vertical-align:-2px;margin-left:2px;animation:blink 1.1s steps(1) infinite}
51+
@keyframes blink{50%{opacity:0}}
52+
h1{font-family:var(--mono); font-weight:700; font-size:26px; letter-spacing:-.01em;
53+
margin:6px 0 2px; line-height:1.12}
54+
@media(min-width:560px){h1{font-size:31px}}
55+
h1 .ac{color:var(--amber)}
56+
.sub{color:var(--muted); font-size:14px; margin:0 0 16px}
57+
.label{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
58+
color:var(--faint); margin:18px 0 10px; display:flex; align-items:center; gap:8px}
59+
.label::before{content:""; width:14px; height:1px; background:var(--line2)}
60+
/* search */
61+
.search{display:flex; align-items:center; gap:9px; background:var(--bg2);
62+
border:1px solid var(--line); border-radius:9px; padding:10px 13px; margin:2px 0 4px}
63+
.search span{font-family:var(--mono); color:var(--amber); font-size:13px}
64+
.search input{flex:1; background:none; border:none; outline:none; color:var(--ink);
65+
font-family:var(--mono); font-size:13px}
66+
.search input::placeholder{color:var(--faint)}
67+
/* category grid */
68+
.grid{display:grid; grid-template-columns:1fr; gap:9px; margin-top:4px}
69+
@media(min-width:560px){.grid{grid-template-columns:1fr 1fr}}
70+
.card{display:flex; align-items:center; gap:13px; padding:13px 14px; cursor:pointer;
71+
background:var(--panel); border:1px solid var(--line); border-radius:10px;
72+
text-decoration:none; color:inherit;
73+
transition:border-color .15s, background .15s, transform .12s;}
74+
.card:hover{border-color:var(--line2); background:linear-gradient(var(--panel),var(--panel2))}
75+
.card:active{transform:translateY(1px)}
76+
.ic{width:40px;height:40px;border-radius:9px;flex:0 0 auto; display:grid; place-items:center;
77+
font-family:var(--mono); font-size:18px; font-weight:700; color:#0d1322;
78+
border:1px solid transparent}
79+
.ic.amber{background:rgba(231,181,61,.16); color:var(--amber); border-color:rgba(231,181,61,.3)}
80+
.ic.blue{background:rgba(111,155,232,.16); color:var(--blue); border-color:rgba(111,155,232,.3)}
81+
.ic.purple{background:rgba(183,155,224,.16); color:var(--purple); border-color:rgba(183,155,224,.3)}
82+
.ic.orange{background:rgba(224,138,91,.16); color:var(--orange); border-color:rgba(224,138,91,.3)}
83+
.ic.teal{background:rgba(79,184,154,.16); color:var(--teal); border-color:rgba(79,184,154,.3)}
84+
.ic.green{background:rgba(79,192,138,.16); color:var(--green); border-color:rgba(79,192,138,.3)}
85+
.cbody{flex:1 1 auto; min-width:0}
86+
.ctitle{font-size:14.5px; color:var(--ink); font-weight:600; display:flex; align-items:center; gap:8px}
87+
.tag{font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; padding:2px 6px; border-radius:5px;
88+
border:1px solid var(--line2); color:var(--muted); flex:0 0 auto}
89+
.cblurb{font-size:12.5px; color:var(--muted); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
90+
.cmeta{font-family:var(--mono); font-size:11px; color:var(--faint); flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:2px}
91+
.arrow{color:var(--faint); font-family:var(--mono); font-size:16px; flex:0 0 auto; transition:color .15s, transform .15s}
92+
.card:hover .arrow{color:var(--amber); transform:translateX(2px)}
93+
.empty{color:var(--faint); font-family:var(--mono); font-size:13px; padding:18px 2px}
94+
.note{color:var(--faint); font-size:12.5px; line-height:1.6; margin:20px 2px 4px; border-top:1px solid var(--line); padding-top:14px}
95+
.note b{color:var(--muted); font-weight:600}
96+
.note code{font-family:var(--mono); color:var(--amber); font-size:12px}
97+
.foot{font-family:var(--mono); font-size:11px; color:var(--faint); text-align:center; margin:16px 0 6px}
98+
</style>
99+
</head>
100+
<body>
101+
<div class="wrap">
102+
<div class="term">
103+
<div class="termbar">
104+
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
105+
<span class="termtitle">realmathmodel — bash — 80×24</span>
106+
</div>
107+
<div class="termbody">
108+
<p class="prompt"><span class="u" id="who">hasan</span>@<span class="p" id="host">iug</span>:<span class="d">~</span>$ ls ./study<span class="cursor"></span></p>
109+
<h1>Study <span class="ac">Hub</span></h1>
110+
<p class="sub">Pick an area — each opens a page listing its resources.</p>
111+
112+
<div class="search">
113+
<span>/</span>
114+
<input id="q" type="text" inputmode="search" autocomplete="off" placeholder="filter areas…">
115+
</div>
116+
117+
<div class="label" id="count-label">areas</div>
118+
<div class="grid" id="grid"></div>
119+
<div class="empty" id="empty" style="display:none">no area matches that.</div>
120+
121+
<p class="note">Edit <code>catalog.js</code> to add an area or a link. Cards with a dashed
122+
<b>TODO</b> resource are placeholders waiting for an internal page — drop the file in your repo and set its <code>href</code>.</p>
123+
<p class="foot">&gt; realmathmodel.github.io</p>
124+
</div>
125+
</div>
126+
</div>
127+
128+
<script src="catalog.js"></script>
129+
<script>
130+
(function(){
131+
var cats = (window.CATALOG && CATALOG.categories) || [];
132+
document.getElementById('who').textContent = (CATALOG && CATALOG.owner) || 'hasan';
133+
document.getElementById('host').textContent = (CATALOG && CATALOG.host) || 'iug';
134+
var grid = document.getElementById('grid');
135+
var empty = document.getElementById('empty');
136+
var label = document.getElementById('count-label');
137+
138+
function render(list){
139+
grid.innerHTML = '';
140+
label.textContent = list.length + (list.length===1?' area':' areas');
141+
if(!list.length){ empty.style.display='block'; return; }
142+
empty.style.display='none';
143+
list.forEach(function(c){
144+
var n = (c.resources||[]).length;
145+
var ext = (c.resources||[]).filter(function(r){return r.type==='external';}).length;
146+
var a = document.createElement('a');
147+
a.className = 'card';
148+
a.href = 'category.html?id=' + encodeURIComponent(c.id);
149+
a.innerHTML =
150+
'<div class="ic '+(c.accent||'amber')+'">'+esc(c.icon||'•')+'</div>'+
151+
'<div class="cbody">'+
152+
'<div class="ctitle">'+esc(c.title)+(c.tag?'<span class="tag">'+esc(c.tag)+'</span>':'')+'</div>'+
153+
(c.blurb?'<div class="cblurb">'+esc(c.blurb)+'</div>':'')+
154+
'</div>'+
155+
'<div class="cmeta"><span>'+n+' link'+(n===1?'':'s')+'</span><span>'+ext+' ext</span></div>'+
156+
'<span class="arrow">›</span>';
157+
grid.appendChild(a);
158+
});
159+
}
160+
function esc(s){return String(s).replace(/[&<>"]/g,function(c){return({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]);});}
161+
162+
render(cats);
163+
164+
var q = document.getElementById('q');
165+
q.addEventListener('input', function(){
166+
var t = q.value.trim().toLowerCase();
167+
if(!t){ render(cats); return; }
168+
render(cats.filter(function(c){
169+
return (c.title+' '+(c.blurb||'')+' '+(c.tag||'')+' '+
170+
(c.resources||[]).map(function(r){return r.label;}).join(' ')).toLowerCase().indexOf(t) > -1;
171+
}));
172+
});
173+
})();
174+
</script>
175+
</body>
176+
</html>

0 commit comments

Comments
 (0)