matrix-by-lmx 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.svg +55 -0
- package/package.json +11 -0
package/index.svg
ADDED
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1440 1000" preserveAspectRatio="xMidYMin meet">
|
|
2
|
+
<title>Matrix, By LMX</title>
|
|
3
|
+
<foreignObject width="1440" height="1000">
|
|
4
|
+
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
|
|
5
|
+
<head>
|
|
6
|
+
<meta charset="UTF-8" />
|
|
7
|
+
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
8
|
+
<title>Matrix, By LMX</title>
|
|
9
|
+
<style><![CDATA[
|
|
10
|
+
:root{color-scheme:dark;--bg:#080d15;--panel:#0d1624;--line:#203354;--line2:#2a4164;--text:#fafafa;--muted:#9ca9ba;--blue:#7abbff}
|
|
11
|
+
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{color:var(--text);background:radial-gradient(circle at 50% 18%,rgba(31,72,120,.25),transparent 36%),var(--bg);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}a{color:inherit;text-decoration:none}button,input{font:inherit}.topbar{height:72px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 5vw;border-bottom:1px solid rgba(122,187,255,.12);background:rgba(8,13,21,.88)}.brand{display:flex;align-items:center;gap:10px;font-weight:700}.mark{display:grid;place-items:center;width:32px;height:32px;border:1px solid #4a9dff;border-radius:8px;color:#c6e4ff;background:linear-gradient(145deg,#203c62,#102039);font-size:16px}.topbar nav{display:flex;height:72px}.topbar nav a{display:grid;place-items:center;padding:0 20px;color:#aab5c5;font-size:13px}.topbar nav a:hover{color:#fff;background:rgba(122,187,255,.06)}.status{justify-self:end;display:flex;align-items:center;gap:8px;color:#8998ac;font:10px Consolas,monospace}.dot{width:7px;height:7px;border-radius:50%;background:#68d391;box-shadow:0 0 10px #68d391}.hero{text-align:center;padding:70px 20px 50px}.kicker{color:var(--blue);font:700 10px Consolas,monospace;letter-spacing:.2em}.hero h1{margin:18px 0 14px;font-size:72px;line-height:.93;letter-spacing:-.055em}.hero h1 em{display:block;color:#a9cbed;font-style:normal;font-weight:400}.hero p{margin:0 auto;color:var(--muted);font-size:15px}.actions{display:flex;justify-content:center;gap:12px;margin-top:28px}.actions a,.actions button{padding:12px 18px;border:1px solid var(--line2);border-radius:7px;color:#c9d4e1;background:#0e1827;cursor:pointer}.actions .primary{border-color:#7abbff;color:#07101a;background:#7abbff;font-weight:700}.client{width:min(1140px,calc(100% - 64px));height:500px;margin:auto;display:grid;grid-template-columns:190px 1fr;overflow:hidden;border:1px solid var(--line2);border-radius:10px;background:#0b1320;box-shadow:0 35px 90px rgba(0,0,0,.44)}aside{display:flex;flex-direction:column;padding:20px 12px;border-right:1px solid var(--line);background:#0b1422}.mini-brand{display:flex;align-items:center;gap:9px;padding:0 8px 22px;font-size:13px;font-weight:700}.mini-brand .mark{width:25px;height:25px;border-radius:6px;font-size:12px}aside small{margin:17px 9px 7px;color:#5f718a;font:8px Consolas,monospace;letter-spacing:.16em}aside a{padding:10px 11px;border-radius:5px;color:#8291a7;font-size:12px}aside a:hover,aside a.active{color:#dcecff;background:#152843}.online{display:flex;align-items:center;gap:9px;margin:auto 8px 0;color:#aebccc;font-size:10px}.workspace{display:grid;grid-template-rows:38px 44px 1fr 44px;min-width:0}.tabs{display:flex;align-items:center;border-bottom:1px solid var(--line);background:#0a111d}.tab{width:165px;height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 14px;color:#dce8f6;background:#111d2e;font-size:10px}.tabs b{margin-left:auto;padding:0 16px;color:#526177;font-size:10px;letter-spacing:8px}.address{display:grid;grid-template-columns:28px 28px 28px 1fr 28px;gap:3px;align-items:center;padding:0 12px;border-bottom:1px solid var(--line);background:#101a2a}.address button{border:0;color:#728299;background:transparent;cursor:pointer}.url{padding:7px 12px;border:1px solid #243955;border-radius:5px;color:#7e8fa7;background:#0b1421;font:10px Consolas,monospace}.workspace-body{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;background:radial-gradient(circle at 50% 45%,rgba(55,125,205,.15),transparent 40%),#0d1726}.workspace-body h2{margin:12px 0 25px;font-size:45px;letter-spacing:-.045em}.search{width:min(600px,100%);display:grid;grid-template-columns:1fr 54px;border:1px solid #324f75;border-radius:7px;overflow:hidden}.search input{height:56px;padding:0 18px;border:0;outline:0;color:#eaf3ff;background:#0a1320}.search button{border:0;color:#07101b;background:var(--blue);font-size:20px;cursor:pointer}.shortcuts{width:min(600px,100%);display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px}.shortcuts a{display:flex;flex-direction:column;gap:15px;padding:13px;border:1px solid #213754;border-radius:6px;color:#aebcd0;background:#101c2d;font-size:11px}.shortcuts b{color:#547296;font:8px Consolas,monospace}.terminal{display:grid;grid-template-columns:100px 1fr auto;align-items:center;padding:0 14px;border-top:1px solid var(--line);color:#60738c;background:#09111c;font:9px Consolas,monospace}.message{min-height:18px;margin:8px 0 0;color:#87bff5;font-size:10px}@media(max-width:800px){.topbar{grid-template-columns:1fr auto}.topbar nav{display:none}.hero{padding-top:45px}.hero h1{font-size:55px}.client{width:calc(100% - 30px);grid-template-columns:1fr}aside{display:none}.workspace-body h2{font-size:36px}}
|
|
12
|
+
]]></style>
|
|
13
|
+
</head>
|
|
14
|
+
<body>
|
|
15
|
+
<header class="topbar">
|
|
16
|
+
<a class="brand" href="#product"><span class="mark">M</span><span>Matrix</span></a>
|
|
17
|
+
<nav aria-label="Primary navigation"><a href="#product">Product</a><a href="#client">Browser</a><a href="#client">Games</a><a href="#client">Apps</a><a href="#client">Utilities</a></nav>
|
|
18
|
+
<div class="status"><i class="dot"></i><span>SVG CLIENT</span></div>
|
|
19
|
+
</header>
|
|
20
|
+
<main>
|
|
21
|
+
<section class="hero" id="product">
|
|
22
|
+
<span class="kicker">MATRIX WEB CLIENT</span>
|
|
23
|
+
<h1>Matrix,<em>By LMX.</em></h1>
|
|
24
|
+
<p>Private search, browsing, games, and utilities in one focused workspace.</p>
|
|
25
|
+
<div class="actions"><a class="primary" href="#client">Open Matrix ↗</a><a href="#client">View workspace</a></div>
|
|
26
|
+
</section>
|
|
27
|
+
<section class="client" id="client">
|
|
28
|
+
<aside><div class="mini-brand"><span class="mark">M</span>Matrix</div><small>WORKSPACE</small><a class="active" href="#client">⌂ New tab</a><a href="#client">◇ Games</a><a href="#client">⌘ Utilities</a><small>TOOLS</small><a href="#client">⚙ Settings</a><div class="online"><i class="dot"></i><span>Client online</span></div></aside>
|
|
29
|
+
<div class="workspace">
|
|
30
|
+
<div class="tabs"><span class="tab">New Tab <i>×</i></span><b>— □ ×</b></div>
|
|
31
|
+
<div class="address"><button type="button" aria-label="Back">‹</button><button type="button" aria-label="Forward">›</button><button type="button" aria-label="Reload">↻</button><span class="url">matrix://home</span><button type="button" aria-label="Bookmark">☆</button></div>
|
|
32
|
+
<div class="workspace-body"><span class="kicker">MATRIX SEARCH</span><h2>Where do you want to go?</h2><form class="search" id="search-form"><input id="query" autocomplete="off" placeholder="Search or enter a URL" aria-label="Search or enter a URL"/><button type="submit" aria-label="Go">→</button></form><p class="message" id="message"></p><div class="shortcuts"><a href="#client"><b>01</b><span>Games</span></a><a href="#client"><b>02</b><span>Apps</span></a><a href="#client"><b>03</b><span>Utilities</span></a></div></div>
|
|
33
|
+
<div class="terminal"><span>SESSION</span><code id="terminal-text">[ready] Matrix SVG interface loaded</code><i class="dot"></i></div>
|
|
34
|
+
</div>
|
|
35
|
+
</section>
|
|
36
|
+
</main>
|
|
37
|
+
<script><![CDATA[
|
|
38
|
+
(function(){
|
|
39
|
+
var form=document.getElementById("search-form");
|
|
40
|
+
var input=document.getElementById("query");
|
|
41
|
+
var message=document.getElementById("message");
|
|
42
|
+
var terminal=document.getElementById("terminal-text");
|
|
43
|
+
form.addEventListener("submit",function(event){
|
|
44
|
+
event.preventDefault();
|
|
45
|
+
var value=input.value.trim();
|
|
46
|
+
if(!value){message.textContent="Enter a search or address.";return;}
|
|
47
|
+
message.textContent="Static SVG demo: "+value;
|
|
48
|
+
terminal.textContent="[input] "+value;
|
|
49
|
+
});
|
|
50
|
+
})();
|
|
51
|
+
]]></script>
|
|
52
|
+
</body>
|
|
53
|
+
</html>
|
|
54
|
+
</foreignObject>
|
|
55
|
+
</svg>
|
package/package.json
ADDED