matrix-by-lmx 1.0.0 → 1.1.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.
Potentially problematic release.
This version of matrix-by-lmx might be problematic. Click here for more details.
- package/index.svg +13 -55
- package/package.json +2 -2
package/index.svg
CHANGED
|
@@ -1,55 +1,13 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
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>
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><title>Matrix, By LMX</title><foreignObject width="100%" height="100%"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8"/><style><![CDATA[
|
|
2
|
+
*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{color:#fafafa;background:#080d15;font-family:Arial,sans-serif}button,input{font:inherit}.shell{height:100%;display:grid;grid-template-columns:200px 1fr}.side{padding:20px 12px;border-right:1px solid #203354;background:#0b1422}.brand{font-size:20px;font-weight:bold;margin:0 10px 30px}.brand b{display:inline-grid;place-items:center;width:32px;height:32px;margin-right:8px;border:1px solid #4a9dff;border-radius:8px;color:#b9dcff}.nav{display:block;width:100%;padding:12px;border:0;border-radius:6px;color:#91a0b4;background:transparent;text-align:left;cursor:pointer}.nav:hover,.nav.on{color:#fff;background:#152843}.main{display:grid;grid-template-rows:58px 1fr;min-width:0}.top{display:flex;align-items:center;padding:0 25px;border-bottom:1px solid #203354;background:#0a111d}.view{display:none;height:100%;overflow:auto;padding:45px 5vw;background:radial-gradient(circle at 50% 8%,#10243d,#080d15 35%)}.view.on{display:block}.hero{min-height:80%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.tag{color:#7abbff;font:10px Consolas;letter-spacing:2px}.hero h1,.head h1{margin:18px 0;font-size:clamp(52px,8vw,90px);line-height:.9}.hero em{display:block;color:#a9cbed;font-style:normal;font-weight:normal}.hero p,.head p{color:#91a0b4}.search{width:min(680px,100%);display:grid;grid-template-columns:1fr 58px;margin-top:25px;border:1px solid #324f75;border-radius:8px;overflow:hidden}.search input{height:58px;padding:0 18px;border:0;color:#fff;background:#0a1320}.search button{border:0;background:#7abbff;cursor:pointer}.quick{display:flex;gap:8px;margin-top:15px}.quick button{padding:13px 25px;border:1px solid #203354;border-radius:6px;color:#b9c6d6;background:#101c2d;cursor:pointer}.tools{display:flex;gap:12px;margin:20px 0}.tools input{width:320px;padding:12px;border:1px solid #2a4164;border-radius:6px;color:#fff;background:#0c1624}.count{color:#71839b}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.card{min-height:155px;padding:18px;border:1px solid #203354;border-radius:8px;color:#fff;background:#0d1624;text-align:left;cursor:pointer}.card:hover{border-color:#7abbff}.card small{color:#66809e}.card strong{display:block;margin:35px 0 8px}.card span{color:#91a0b4;font-size:11px}.apps{grid-template-columns:repeat(3,1fr)}.panel{padding:22px;border:1px solid #203354;border-radius:8px;background:#0d1624}.player{position:fixed;inset:0;z-index:9;display:none;grid-template-rows:58px 1fr;background:#080d15}.player.on{display:grid}.bar{display:flex;align-items:center;gap:10px;padding:0 18px}.bar strong{flex:1}.bar button{padding:9px 14px}.player iframe{width:100%;height:100%;border:0}.msg{height:18px;color:#7abbff;font-size:11px}@media(max-width:750px){.shell{grid-template-columns:70px 1fr}.brand span,.nav span{display:none}.grid{grid-template-columns:repeat(2,1fr)}}]]></style></head><body><div class="shell"><aside class="side"><div class="brand"><b>M</b><span>Matrix</span></div><button class="nav on" data-v="home">⌂ <span>Home</span></button><button class="nav" data-v="games">◇ <span>Games</span></button><button class="nav" data-v="apps">◉ <span>Apps</span></button><button class="nav" data-v="tools">⌘ <span>Utilities</span></button><button class="nav" data-v="settings">⚙ <span>Settings</span></button></aside><main class="main"><header class="top"><strong id="title">New Tab</strong></header>
|
|
3
|
+
<section id="home" class="view on"><div class="hero"><b class="tag">MATRIX SVG CLIENT</b><h1>Matrix,<em>By LMX.</em></h1><p>Games, apps, search, and utilities inside one SVG document.</p><form id="search" class="search"><input id="q" placeholder="Search or enter a URL"/><button>→</button></form><p id="msg" class="msg"></p><div class="quick"><button data-go="games">Games</button><button data-go="apps">Apps</button><button data-go="tools">Utilities</button></div></div></section>
|
|
4
|
+
<section id="games" class="view"><div class="head"><b class="tag">MATRIX / CLOUD ARCADE</b><h1>Pick a game.</h1><p>Live community catalog loaded directly from its public CDN.</p></div><div class="tools"><input id="game-search" placeholder="Search games"/><span id="count" class="count">Loading…</span></div><div id="game-grid" class="grid"></div></section>
|
|
5
|
+
<section id="apps" class="view"><div class="head"><b class="tag">MATRIX / APPS</b><h1>Web apps.</h1></div><div id="apps-grid" class="grid apps"></div></section>
|
|
6
|
+
<section id="tools" class="view"><div class="head"><b class="tag">MATRIX / UTILITIES</b><h1>Useful tools.</h1></div><div class="grid"><div class="panel"><h3>Clock</h3><p id="clock">--:--:--</p></div><div class="panel"><h3>Editable workspace</h3><button id="edit">Enable editing</button></div><div class="panel"><h3>Reset</h3><button id="reset">Return home</button></div></div></section>
|
|
7
|
+
<section id="settings" class="view"><div class="head"><b class="tag">MATRIX / SETTINGS</b><h1>Preferences.</h1></div><div class="panel"><h3>Self-contained mode</h3><p>This Matrix interface runs directly inside the SVG. It does not load Vercel.</p></div></section></main></div>
|
|
8
|
+
<div id="player" class="player"><div class="bar"><strong id="pt">Matrix Player</strong><button id="reload">Reload</button><button id="close">Exit</button></div><iframe id="frame" title="Matrix player" allow="fullscreen;autoplay;gamepad"></iframe></div>
|
|
9
|
+
<script><![CDATA[
|
|
10
|
+
(function(){var names={home:"New Tab",games:"Games",apps:"Apps",tools:"Utilities",settings:"Settings"},all=[],player=document.getElementById("player"),frame=document.getElementById("frame");function show(v){document.querySelectorAll(".view").forEach(function(x){x.classList.toggle("on",x.id===v)});document.querySelectorAll(".nav").forEach(function(x){x.classList.toggle("on",x.dataset.v===v)});document.getElementById("title").textContent=names[v]}document.querySelectorAll("[data-v]").forEach(function(x){x.onclick=function(){show(x.dataset.v)}});document.querySelectorAll("[data-go]").forEach(function(x){x.onclick=function(){show(x.dataset.go)}});function open(t,u){document.getElementById("pt").textContent=t;frame.src=u;player.classList.add("on")}document.getElementById("close").onclick=function(){player.classList.remove("on");frame.src="about:blank"};document.getElementById("reload").onclick=function(){var u=frame.src;frame.src="about:blank";setTimeout(function(){frame.src=u},20)};document.getElementById("search").onsubmit=function(e){e.preventDefault();var q=document.getElementById("q").value.trim();if(!q)return;document.getElementById("msg").textContent="Opening inside Matrix…";open(q,/^https?:\/\//.test(q)?q:"https://html.duckduckgo.com/html/?q="+encodeURIComponent(q))};
|
|
11
|
+
var apps=[["YouTube","https://www.youtube.com"],["Twitch","https://www.twitch.tv"],["ChatGPT","https://chatgpt.com"],["Discord","https://discord.com/app"],["Instagram","https://instagram.com"],["GitHub","https://github.com"]],ag=document.getElementById("apps-grid");apps.forEach(function(a){var b=document.createElement("button");b.className="card";b.innerHTML="<small>WEB APP</small><strong>"+a[0]+"</strong><span>Open inside Matrix ↗</span>";b.onclick=function(){open(a[0],a[1])};ag.appendChild(b)});
|
|
12
|
+
function render(){var q=document.getElementById("game-search").value.toLowerCase(),list=all.filter(function(g){return g.name.toLowerCase().includes(q)}).slice(0,160),grid=document.getElementById("game-grid");grid.innerHTML="";list.forEach(function(g){var b=document.createElement("button");b.className="card";b.innerHTML="<small>COMMUNITY / HTML5</small><strong></strong><span>Launch inside Matrix ↗</span>";b.querySelector("strong").textContent=g.name;b.onclick=function(){open(g.name,g.url.replace("{HTML_URL}","https://cdn.jsdelivr.net/gh/bubbls/ugs-singlefile/UGS-Files"))};grid.appendChild(b)});document.getElementById("count").textContent=list.length+" shown / "+all.length}fetch("https://cdn.jsdelivr.net/gh/TongSherbet/storage/ugs.json").then(function(r){return r.json()}).then(function(d){all=d.filter(function(g){return g.name&&g.url});render()}).catch(function(){document.getElementById("count").textContent="Catalog unavailable"});document.getElementById("game-search").oninput=render;setInterval(function(){document.getElementById("clock").textContent=new Date().toLocaleTimeString()},1000);document.getElementById("edit").onclick=function(){document.body.contentEditable=document.body.contentEditable==="true"?"false":"true"};document.getElementById("reset").onclick=function(){show("home")};
|
|
13
|
+
})();]]></script></body></html></foreignObject></svg>
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "matrix-by-lmx",
|
|
3
|
-
"version": "1.
|
|
4
|
-
"description": "Matrix web
|
|
3
|
+
"version": "1.1.0",
|
|
4
|
+
"description": "Self-contained Matrix web workspace packaged as an XHTML-in-SVG app",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"main": "index.svg",
|
|
7
7
|
"unpkg": "index.svg",
|