Initial commit
This commit is contained in:
BIN
favicon.ico
Normal file
BIN
favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
40
index.html
Normal file
40
index.html
Normal file
@@ -0,0 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>SuperNETs IRC</title>
|
||||
<link rel="icon" href="favicon.ico" type="image/x-icon">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="login">
|
||||
<div id="login-box">
|
||||
<img id="login-logo" src="logo.png" alt="SuperNETs">
|
||||
<div id="login-title">SuperNETs IRC</div>
|
||||
<input type="text" id="login-nick" placeholder="Enter nickname..." autofocus spellcheck="false" autocapitalize="off" autocomplete="off" maxlength="16">
|
||||
<button id="login-btn">Enter The Void</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="app" class="hidden">
|
||||
<div id="main">
|
||||
<div id="channels"></div>
|
||||
<div id="chat-area">
|
||||
<div id="topicbar" class="hidden"></div>
|
||||
<div id="messages"></div>
|
||||
</div>
|
||||
<div id="nicklist"></div>
|
||||
</div>
|
||||
<div id="statusbar">
|
||||
<span id="toggle-chanlist" title="Toggle channel list"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="2" y1="4" x2="14" y2="4"/><line x1="2" y1="8" x2="14" y2="8"/><line x1="2" y1="12" x2="14" y2="12"/></svg></span>
|
||||
<a id="statusbar-link" href="https://git.supernets.org/supernets/superchat" target="_blank" rel="noopener" title="View source on Gitea"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg></a>
|
||||
<span id="toggle-nicklist" title="Toggle nick list"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="8" cy="5" r="2.5"/><path d="M3 14.5c0-3 2.2-5 5-5s5 2 5 5"/></svg></span>
|
||||
</div>
|
||||
<div id="input-row">
|
||||
<span id="input-nick"></span>
|
||||
<input type="text" id="input" spellcheck="false" autocapitalize="off" autocomplete="off">
|
||||
</div>
|
||||
</div>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
400
style.css
Normal file
400
style.css
Normal file
@@ -0,0 +1,400 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #0a0a0a;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #333;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #555;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #000;
|
||||
color: #c0c0c0;
|
||||
font-family: 'Courier New', 'Lucida Console', monospace;
|
||||
font-size: 14px;
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
overflow: hidden;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* --- Login screen --- */
|
||||
#login {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
#login-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
#login-logo {
|
||||
max-width: 200px;
|
||||
max-height: 200px;
|
||||
margin-bottom: 4px;
|
||||
filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.4)) drop-shadow(0 0 20px rgba(0, 136, 255, 0.2));
|
||||
transition: filter 0.3s ease;
|
||||
}
|
||||
|
||||
#login-logo:hover {
|
||||
filter: drop-shadow(0 0 12px rgba(0, 255, 255, 0.7)) drop-shadow(0 0 30px rgba(0, 136, 255, 0.4)) drop-shadow(0 0 50px rgba(0, 255, 255, 0.25));
|
||||
}
|
||||
|
||||
#login-title {
|
||||
font-size: 26px;
|
||||
color: #fff;
|
||||
letter-spacing: 6px;
|
||||
text-transform: uppercase;
|
||||
text-shadow:
|
||||
0 0 7px rgba(0, 255, 255, 0.6),
|
||||
0 0 14px rgba(0, 255, 255, 0.4),
|
||||
0 0 28px rgba(0, 255, 255, 0.2),
|
||||
0 0 56px rgba(0, 136, 255, 0.15);
|
||||
}
|
||||
|
||||
#login-nick {
|
||||
background: #111;
|
||||
color: #c0c0c0;
|
||||
border: 1px solid #333;
|
||||
padding: 10px 12px;
|
||||
font-family: 'Courier New', 'Lucida Console', monospace;
|
||||
font-size: 16px;
|
||||
outline: none;
|
||||
width: 260px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#login-nick:focus {
|
||||
border-color: #666;
|
||||
}
|
||||
|
||||
#login-btn {
|
||||
background: #1a1a1a;
|
||||
color: #888;
|
||||
border: 1px solid #333;
|
||||
padding: 8px 24px;
|
||||
font-family: 'Courier New', 'Lucida Console', monospace;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
#login-btn:hover {
|
||||
background: #222;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
/* --- App layout --- */
|
||||
#app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
}
|
||||
|
||||
#main {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* --- Channel list --- */
|
||||
#channels {
|
||||
width: 140px;
|
||||
min-width: 140px;
|
||||
background: #0a0a0a;
|
||||
border-right: 1px solid #333;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
#channels .tab {
|
||||
padding: 6px 8px;
|
||||
cursor: pointer;
|
||||
color: #888;
|
||||
border-bottom: 1px solid #1a1a1a;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-family: 'Courier New', 'Lucida Console', monospace;
|
||||
font-size: 13px;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
#channels .tab:hover {
|
||||
background: #151515;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
#channels .tab.active {
|
||||
background: #1a1a1a;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#channels .tab.unread {
|
||||
color: #0ff;
|
||||
}
|
||||
|
||||
#channels .tab.mentioned {
|
||||
color: #ff0;
|
||||
}
|
||||
|
||||
/* --- Chat area --- */
|
||||
#chat-area {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* --- Topic bar --- */
|
||||
#topicbar {
|
||||
background: #0a0a0a;
|
||||
border-bottom: 1px solid #333;
|
||||
padding: 3px 8px;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex-shrink: 0;
|
||||
min-height: 0;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
#topicbar .topic-channel {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#topicbar .topic-meta {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
#messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 2px 4px;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
#messages .line {
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.nick-col {
|
||||
display: inline-block;
|
||||
width: 12ch;
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sep {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* --- Status bar --- */
|
||||
#statusbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #0a0a0a;
|
||||
border-top: 1px solid #333;
|
||||
padding: 2px 6px;
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
height: 24px;
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
#statusbar-link {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #555;
|
||||
text-decoration: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
#statusbar-link:hover {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
#toggle-chanlist, #toggle-nicklist {
|
||||
color: #555;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
#toggle-chanlist:hover, #toggle-nicklist:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#toggle-chanlist.active, #toggle-nicklist.active {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#toggle-chanlist svg, #toggle-nicklist svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* --- Input row --- */
|
||||
#input-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-top: 1px solid #222;
|
||||
background: #111;
|
||||
}
|
||||
|
||||
#input-nick {
|
||||
padding: 0 4px 0 6px;
|
||||
color: #888;
|
||||
white-space: nowrap;
|
||||
font-family: 'Courier New', 'Lucida Console', monospace;
|
||||
font-size: 14px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
background: #111;
|
||||
color: #c0c0c0;
|
||||
border: none;
|
||||
padding: 6px 6px;
|
||||
font-family: 'Courier New', 'Lucida Console', monospace;
|
||||
font-size: 16px;
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* --- Nick list --- */
|
||||
#nicklist {
|
||||
width: 140px;
|
||||
min-width: 140px;
|
||||
background: #0a0a0a;
|
||||
border-left: 1px solid #333;
|
||||
overflow-y: auto;
|
||||
padding: 0;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
#nicklist .nick-category {
|
||||
padding: 4px 6px 2px;
|
||||
font-size: 11px;
|
||||
color: #555;
|
||||
border-bottom: 1px solid #1a1a1a;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
#nicklist .nick-category:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#nicklist .nick {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
padding: 0 6px;
|
||||
color: #c0c0c0;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* --- Mobile --- */
|
||||
@media (max-width: 600px) {
|
||||
body {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
#login-logo {
|
||||
max-width: 140px;
|
||||
max-height: 140px;
|
||||
filter: drop-shadow(0 0 6px rgba(0, 255, 255, 0.4)) drop-shadow(0 0 16px rgba(0, 136, 255, 0.2));
|
||||
}
|
||||
|
||||
#login-title {
|
||||
font-size: 18px;
|
||||
letter-spacing: 4px;
|
||||
}
|
||||
|
||||
#login-nick {
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
#channels {
|
||||
width: 120px;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
#nicklist {
|
||||
width: 120px;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
#input {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#input-nick {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
#channels .tab {
|
||||
padding: 8px 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#nicklist .nick {
|
||||
font-size: 12px;
|
||||
padding: 1px 4px;
|
||||
}
|
||||
|
||||
#topicbar {
|
||||
font-size: 11px;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user