Merge remote-tracking branch 'upstream/main' into svg-masks
This commit is contained in:
ygg2
commit
616c60ba04
13 changed files with 468 additions and 28 deletions
48
webpage/home.html
Normal file
48
webpage/home.html
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Jank Client</title>
|
||||
<meta content="Jank Client" property="og:title" />
|
||||
<meta content="A spacebar client that has DMs, replying and more" property="og:description" />
|
||||
<meta content="/logo.webp" property="og:image" />
|
||||
<meta content="#4b458c" data-react-helmet="true" name="theme-color" />
|
||||
<link href="/style.css" rel="stylesheet" type="text/css" />
|
||||
<link href="/themes.css" rel="stylesheet" type="text/css" id="lightcss"/>
|
||||
</head>
|
||||
|
||||
<body class="Dark-theme">
|
||||
<div id="titleDiv">
|
||||
<img src="/logo.svg" width="40">
|
||||
<h1 id="pageTitle">Jank Client</h1>
|
||||
<a href="https://sb-jankclient.vanillaminigames.net/invite/USgYJo?instance=https%3A%2F%2Fspacebar.chat" class="TitleButtons"><h1>Spacebar Guild</h1></a>
|
||||
<a href="https://github.com/MathMan05/JankClient" class="TitleButtons"><h1>Github</h1></a>
|
||||
</div>
|
||||
<div class="flexttb">
|
||||
|
||||
<div class="flexttb pagehead"><h1>Welcome to Jank Client</h1></div>
|
||||
<div class="pagebox">
|
||||
<p>Jank Client is a spacebar compatible client seeking to be as good as it can be with many features including:</p>
|
||||
<ul>
|
||||
<li>Direct Messaging</li>
|
||||
<li>Reactions support</li>
|
||||
<li>Invites</li>
|
||||
<li>Account switching</li>
|
||||
<li>User settings</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pagebox">
|
||||
<h2>Spacebar compatible Instances:</h2>
|
||||
<div id="instancebox">
|
||||
</div>
|
||||
</div>
|
||||
<div class="pagebox">
|
||||
<h2>Contribute to Jank Client</h2>
|
||||
<p>We always appreciate some help, wether that be in the form of bug reports, or code, or even just pointing out some typos.</p><br>
|
||||
</a><a href="https://github.com/MathMan05/JankClient" class="TitleButtons"><h1>Github</h1></a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="/home.js" type="module" ></script>
|
||||
</html>
|
||||
64
webpage/home.ts
Normal file
64
webpage/home.ts
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
import {mobile} from "./login.js";
|
||||
console.log(mobile);
|
||||
const serverbox=document.getElementById("instancebox") as HTMLDivElement;
|
||||
|
||||
fetch("/instances.json").then(_=>_.json()).then((json:{name:string,description?:string,descriptionLong?:string,image?:string,url?:string,display?:boolean,online?:boolean,
|
||||
uptime:{alltime:number,daytime:number,weektime:number},
|
||||
urls:{wellknown:string,api:string,cdn:string,gateway:string,login?:string}}[])=>{
|
||||
console.warn(json);
|
||||
for(const instance of json){
|
||||
if(instance.display===false){
|
||||
continue;
|
||||
}
|
||||
const div=document.createElement("div");
|
||||
div.classList.add("flexltr","instance");
|
||||
if(instance.image){
|
||||
const img=document.createElement("img");
|
||||
img.src=instance.image;
|
||||
div.append(img);
|
||||
}
|
||||
const statbox=document.createElement("div");
|
||||
statbox.classList.add("flexttb");
|
||||
|
||||
{
|
||||
const textbox=document.createElement("div");
|
||||
textbox.classList.add("flexttb","instatancetextbox");
|
||||
const title=document.createElement("h2");
|
||||
title.innerText=instance.name;
|
||||
if(instance.online!==undefined){
|
||||
const status=document.createElement("span");
|
||||
status.innerText=instance.online?"Online":"Offline";
|
||||
status.classList.add("instanceStatus");
|
||||
title.append(status);
|
||||
}
|
||||
textbox.append(title);
|
||||
if(instance.description||instance.descriptionLong){
|
||||
const p=document.createElement("p");
|
||||
if(instance.descriptionLong){
|
||||
p.innerText=instance.descriptionLong;
|
||||
}else{
|
||||
p.innerText=instance.description;
|
||||
}
|
||||
textbox.append(p);
|
||||
}
|
||||
statbox.append(textbox)
|
||||
}
|
||||
if(instance.uptime){
|
||||
const stats=document.createElement("div");
|
||||
stats.classList.add("flexltr");
|
||||
const span=document.createElement("span");
|
||||
span.innerText=`Uptime: All time: ${Math.floor(instance.uptime.alltime*100)}% This week: ${Math.floor(instance.uptime.weektime*100)}% Today: ${Math.floor(instance.uptime.daytime*100)}%`
|
||||
stats.append(span);
|
||||
statbox.append(stats);
|
||||
}
|
||||
div.append(statbox);
|
||||
div.onclick=_=>{
|
||||
if(instance.online){
|
||||
window.location.href="/register.html?instance="+encodeURI(instance.name);
|
||||
}else{
|
||||
alert("Instance is offline, can't connect");
|
||||
}
|
||||
}
|
||||
serverbox.append(div);
|
||||
}
|
||||
})
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<body>
|
||||
<body class="Dark-theme">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<body>
|
||||
<body class="Dark-theme">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
|
|
|||
|
|
@ -405,17 +405,17 @@ export {mobile, getBulkUsers,getBulkInfo,setTheme,Specialuser,getapiurls,adduser
|
|||
const datalist=document.getElementById("instances");
|
||||
console.warn(datalist);
|
||||
if(datalist){
|
||||
fetch("/instances.json").then(_=>_.json()).then((json:{name:string,description?:string,src?:string,url?:string,display?:boolean,urls:{wellknown:string,api:string,cdn:string,gateway:string,login?:string}}[])=>{
|
||||
fetch("/instances.json").then(_=>_.json()).then((json:{name:string,online:boolean,description?:string,src?:string,url?:string,display?:boolean,urls:{wellknown:string,api:string,cdn:string,gateway:string,login?:string}}[])=>{
|
||||
console.warn(json);
|
||||
if(instancein&&instancein.value===""){
|
||||
instancein.value=json[0].name;
|
||||
setTimeout(checkInstance,10);
|
||||
}
|
||||
for(const instance of json){
|
||||
if(instance.display===false){
|
||||
continue;
|
||||
}
|
||||
const option=document.createElement("option");
|
||||
option.disabled=!instance.online;
|
||||
option.value=instance.name;
|
||||
if(instance.url){
|
||||
stringURLMap.set(option.value,instance.url);
|
||||
|
|
@ -434,5 +434,6 @@ if(datalist){
|
|||
}
|
||||
datalist.append(option);
|
||||
}
|
||||
checkInstance("");
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<body>
|
||||
<body class="Dark-theme">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,3 @@
|
|||
html{
|
||||
height:100%;
|
||||
}
|
||||
body {
|
||||
font-family: "acumin-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-weight: 400;
|
||||
|
|
@ -539,7 +536,7 @@ hr {
|
|||
flex-direction: column;
|
||||
flex-shrink: 1;
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
height: 100vh;
|
||||
/* width: 100%; */
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -707,7 +704,7 @@ textarea:focus-visible,
|
|||
}
|
||||
|
||||
.servertd {
|
||||
background-color: var(--channel-name-bg);
|
||||
background-color: var(--server-bg);
|
||||
height: .55in;
|
||||
width:100%;
|
||||
display: flex;
|
||||
|
|
@ -797,7 +794,7 @@ textarea:focus-visible,
|
|||
|
||||
button {
|
||||
transition: background .1s ease-in-out;
|
||||
background-color: var(--button-bg);
|
||||
background-color: var(--message-bg-hover);
|
||||
color: var(--primary-text);
|
||||
border-color:var(--timestamp-color);
|
||||
font-weight: bold;
|
||||
|
|
@ -822,11 +819,11 @@ button:disabled:hover{
|
|||
color: var(--primary-text);
|
||||
}
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
background-color: var(--primary-bg);
|
||||
}
|
||||
input::file-selector-button {
|
||||
transition: background .1s ease-in-out;
|
||||
background-color: var(--button-bg);
|
||||
background-color: var(--message-bg-hover);
|
||||
border-color:var(--timestamp-color);
|
||||
color: var(--primary-text);
|
||||
font-weight: bold;
|
||||
|
|
@ -845,7 +842,7 @@ input[type="file"] {
|
|||
}
|
||||
select{
|
||||
transition: background .1s ease-in-out;
|
||||
background-color: var(--button-bg);
|
||||
background-color: var(--message-bg-hover);
|
||||
color: var(--primary-text);
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
|
|
@ -996,7 +993,7 @@ span {
|
|||
user-select: none;
|
||||
}
|
||||
|
||||
.filename a{
|
||||
.filename {
|
||||
color: var(--filename);
|
||||
}
|
||||
|
||||
|
|
@ -1251,6 +1248,7 @@ span {
|
|||
flex-shrink: 1;
|
||||
flex-grow: 1;
|
||||
align-items: stretch;
|
||||
align-content: stretch;
|
||||
}
|
||||
.flexttb{
|
||||
display: flex;
|
||||
|
|
@ -1261,6 +1259,7 @@ span {
|
|||
/* padding-bottom: .1in; */
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
/* height: 100%; */
|
||||
}
|
||||
.settingbuttons{
|
||||
padding-top:.075in;
|
||||
|
|
@ -1289,9 +1288,6 @@ span {
|
|||
padding: .05in;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.flexspace:has(.Buttons){
|
||||
padding:0;
|
||||
}
|
||||
.titlediv{
|
||||
height:100%;
|
||||
display: flex;
|
||||
|
|
@ -1302,7 +1298,6 @@ span {
|
|||
font-weight:900;
|
||||
font-size:.25in;
|
||||
border-bottom: solid .03in var(--message-bg-hover);
|
||||
background: var(--primary-bg);
|
||||
padding: .06in .2in;
|
||||
background: var(--channel-name-bg);
|
||||
box-sizing: border-box;
|
||||
|
|
@ -1344,13 +1339,15 @@ span {
|
|||
|
||||
.channelflex{
|
||||
flex-shrink:0;
|
||||
flex-grow:0;
|
||||
flex-grow: 1;
|
||||
width:2.5in;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-content: stretch;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
/* height: 100%; */
|
||||
height: 100vh;
|
||||
}
|
||||
.messageflex{
|
||||
display:flex;
|
||||
|
|
@ -1404,6 +1401,7 @@ span {
|
|||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.discovery-guild .flex {
|
||||
|
|
@ -1465,6 +1463,7 @@ span {
|
|||
width: 100%;
|
||||
flex-direction: column;
|
||||
max-height:100in;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
#connection-container, #app-list-container {
|
||||
|
|
@ -1853,7 +1852,7 @@ form div{
|
|||
}
|
||||
.banner{
|
||||
position:absolute;
|
||||
z-index:0;
|
||||
z-index: 0;
|
||||
top:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
|
|
@ -1984,3 +1983,102 @@ form div{
|
|||
.clickable:hover{
|
||||
text-decoration:underline;
|
||||
}
|
||||
|
||||
#titleDiv{
|
||||
box-sizing: border-box;
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: .03in .1in;
|
||||
background: var(--profile-bg);
|
||||
border-bottom: solid var(--black);
|
||||
justify-content: center;
|
||||
}
|
||||
.TitleButtons{
|
||||
color:var(--primary-text);
|
||||
margin-left: .03in;
|
||||
padding: .05in;
|
||||
border-radius:.075in;
|
||||
border:solid .03in var(--black);
|
||||
box-shadow: 0 0 .07in var(--shadow);
|
||||
transition: box-shadow .3s;
|
||||
display: block;
|
||||
width: fit-content;
|
||||
}
|
||||
.TitleButtons:hover{
|
||||
box-shadow: 0 0 .01in var(--shadow);
|
||||
}
|
||||
#pageTitle{
|
||||
margin-right:.1in;
|
||||
}
|
||||
.pagehead{
|
||||
background: var(--channel-hover);
|
||||
height:1in;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: solid var(--black);
|
||||
justify-content: center;
|
||||
font-size: .25in;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.pagebox{
|
||||
padding: .06in;
|
||||
background: var(--channel-hover);
|
||||
margin: .1in;
|
||||
min-height:2in;
|
||||
border-radius:.1in;
|
||||
box-sizing: border-box;
|
||||
border: solid .04in black;
|
||||
border-left: solid .05in darkblue;
|
||||
box-shadow: .03in .04in .1in var(--black);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
#instancebox{
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
width: fit-content;
|
||||
}
|
||||
.instance{
|
||||
img{
|
||||
width:.6in;
|
||||
height:.6in;
|
||||
margin-right:.1in;
|
||||
border-radius:.2in;
|
||||
border:solid .03in var(--black);
|
||||
}
|
||||
h2{
|
||||
font-size:.25in;
|
||||
}
|
||||
flex-grow:0;
|
||||
width:4.8in;
|
||||
height: 1.6in;
|
||||
background:var(--button-bg);
|
||||
border-radius:.1in;
|
||||
padding:.06in;
|
||||
margin:.05in;
|
||||
border:solid .04in var(--black);
|
||||
box-shadow:0 0 .1in var(--shadow);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
cursor:pointer;
|
||||
user-select:none;
|
||||
}
|
||||
.instatancetextbox{
|
||||
background:var(--message-bg-hover);
|
||||
border-radius:.1in;
|
||||
padding:0.03in .05in;
|
||||
border:solid .03in var(--black);
|
||||
height: 1.2in;
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
width:3.9in;
|
||||
margin-bottom:.1in;
|
||||
}
|
||||
.instanceStatus{
|
||||
font-size:.125in;
|
||||
font-weight:100;
|
||||
margin-left:.05in;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue