vybe/client/index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<script src="/openpgp.min.js"></script>
		<script src="/socket.io.min.v4.6.1.js"></script>
		<script src="/aes.js"></script>
		<script type="module" src="/auth.js"></script>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>vybe</title>
		<style>
			* {
				font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
				Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
				sans-serif;
				scrollbar-color: #505050 #111;
			}
			::-webkit-scrollbar-thumb {
				background: #505050;
			}
			::-webkit-scrollbar {
				background-color: #111;
			}
			::-webkit-scrollbar-corner {
				background-color: #111;
			}
			html {
				height: 100%;
			}
			body {
				height: 100%;
				background: #020202;
				display: flex;
				align-items: stretch;
				margin: 0;
				min-width: min-content;
			}
			body,
			button,
			input {
				color: #eaeaea;
			}
			button {
				border: none;
				background: #303030;
			}
			button,
			input,
			.tab {
				padding: 4px 7px;
			}
			input {
				background: #1b1b1b;
				outline: none;
				border: 1px solid #444;
				&:focus {
					padding-bottom: 2px;
					border-bottom: 3px solid #777;
				}
				&::placeholder {
					color: #aaa;
				}
				&[type='radio'] {
					position: relative;
					top: 2px;
				}
			}
			#register {
				margin-inline: 14px;
				max-width: 800px;
			}
			:not(#register) > p {
				margin-block: 5px;
				word-wrap: break-word;
			}
			.thread:hover,
			.tab:hover,
			.instancetitle > span:hover,
			#user:hover {
				background-color: #333;
			}
			.thread.active,
			.tab.active,
			button:hover {
				background-color: #4f4f4f;
				color: #fff;
			}
			label.heading {
				margin: 10px 0 4px;
				display: block;
			}
			h3 {
				margin: 0;
			}
			h4 {
				margin: 6px 0;
			}
			.hidden {
				display: none !important;
			}
			.column {
				flex: 1;
				margin: 3px;
			}
			.separator {
				margin: 8px 2px;
			}
			.separator:has(+ .separator),
			*.hidden + .separator,
			.separator:has(+ *.hidden),
			.separator:last-child {
				display: none;
			}
			.content {
				flex: 1;
			}
			.instancetitle {
				margin: 2px;
				> span {
					display: table-cell;
					background-color: #222;
					padding-block: 6px;
				}
				> .title {
					width: 100%;
				}
			}
			.expander {
				padding-inline: 6px;
			}
			.arrow {
				display: block;
				position: relative;
				top: -1px;
				rotate: 45deg;
				&.collapsed {
					rotate: -45deg;
					top: 0;
					left: -3px;
				}
			}
			#home {
				margin: 0;
				max-width: 250px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
			#instancelist {
				overflow-y: auto;
				> :not(div) {
					margin: 3px;
				}
			}
			#instances {
				display: flex;
				justify-content: space-between;
			}
			#threads {
				margin: 0 2px 6px;
				min-height: 0;
				display: flex;
				flex-direction: column;
			}
			#threadlist {
				overflow: auto;
			}
			#user {
				margin: 2px;
				padding: 6px;
				background-color: #222;
			}
			#profile {
				max-width: 250px;
			}
			#instance {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				max-width: 250px;
			}
			#disconnect {
				width: fit-content;
			}
			.thread {
				padding: 2px 3px;
				white-space: pre;
			}
			#newthread {
				margin-top: 5px;
				width: fit-content;
			}
			#createthread {
				max-width: fit-content;
				overflow: auto;
			}
			#permissions {
				margin-bottom: 5px;
			}
			#thread {
				display: flex;
				margin: 0;
			}
			#content {
				margin: 2px;
				min-width: 300px;
				display: flex;
				flex-direction: column;
			}
			#titlebar, #buttonbar {
				margin: 2px;
				display: flex;
				justify-content: space-between;
			}
			#title {
				margin-bottom: 5px;
			}
			.tab {
				padding: 5px 7px;
				background-color: #1f1f1f;
				border: 0;
				color: #ddd;
				font-weight: 500;
			}
			.tabcontent {
				flex: 1;
			}
			#message {
				margin: 2px;
				display: flex;
				flex-direction: column;
				min-height: 0; /* flex makes this auto so it can't shrink */
			}
			#messages {
				flex: 1;
				overflow: auto;
			}
			#msginput {
				display: flex;
				flex-direction: row;
				> * {
					margin: 2px;
				}
			}
			#msg {
				flex-grow: 1;
			}
			.message {
				margin-bottom: 5px;
				overflow-wrap: anywhere;
			}
			#loadmore {
				margin-bottom: 10px;
			}
			#members {
				min-width: 140px;
				max-width: 250px;
			}
			#editthread {
				max-width: fit-content;
			}
			#visibility {
				white-space: pre-line;
				margin-bottom: 12px;
			}
			#space {
				margin: -2px; /* offset column margin */
				position: relative;
				overflow: auto;
			}
			.span {
				position: absolute;
				white-space: nowrap;
			}
			#stream {
				margin: 4px 2px;
			}
			#play {
				line-height: 1.4;
				font-family: 'Segoe UI Symbol', math;
			}
		</style>
	</head>
	<body></body>
</html>
meow 2023-05-06 20:55:04 -07:00			`<!DOCTYPE html>`
			`<html lang="en">`
use socketio callbacks and uhtml 2023-07-30 18:06:21 -07:00			`<head>`
			`<script src="/openpgp.min.js"></script>`
			`<script src="/socket.io.min.v4.6.1.js"></script>`
			`<script src="/aes.js"></script>`
code reorganization and meows 2023-08-30 21:00:17 -07:00			`<script type="module" src="/auth.js"></script>`
use socketio callbacks and uhtml 2023-07-30 18:06:21 -07:00			`<meta charset="UTF-8" />`
			`<meta http-equiv="X-UA-Compatible" content="IE=edge" />`
			`<meta name="viewport" content="width=device-width, initial-scale=1.0" />`
			`<title>vybe</title>`
			`<style>`
			`* {`
			`font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",`
Merge branch 'main' of http://git.jerl.zone/jerl/vybe 2024-02-19 23:42:44 -08:00			`Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",`
			`sans-serif;`
space ui and updates 2024-03-18 23:07:48 -07:00			`scrollbar-color: #505050 #111;`
			`}`
			`::-webkit-scrollbar-thumb {`
			`background: #505050;`
			`}`
			`::-webkit-scrollbar {`
			`background-color: #111;`
			`}`
			`::-webkit-scrollbar-corner {`
			`background-color: #111;`
use socketio callbacks and uhtml 2023-07-30 18:06:21 -07:00			`}`
Merge branch 'main' of http://git.jerl.zone/jerl/vybe 2024-02-19 23:42:44 -08:00			`html {`
			`height: 100%;`
use socketio callbacks and uhtml 2023-07-30 18:06:21 -07:00			`}`
			`body {`
Merge branch 'main' of http://git.jerl.zone/jerl/vybe 2024-02-19 23:42:44 -08:00			`height: 100%;`
			`background: #020202;`
use socketio callbacks and uhtml 2023-07-30 18:06:21 -07:00			`display: flex;`
			`align-items: stretch;`
			`margin: 0;`
			`min-width: min-content;`
code reorganization and meows 2023-08-30 21:00:17 -07:00			`}`
mostly code organizing 2024-04-15 21:52:21 -07:00			`body,`
			`button,`
			`input {`
			`color: #eaeaea;`
			`}`
			`button {`
			`border: none;`
			`background: #303030;`
space ui and updates 2024-03-18 23:07:48 -07:00			`}`
Merge branch 'main' of http://git.jerl.zone/jerl/vybe 2024-02-19 23:42:44 -08:00			`button,`
			`input,`
			`.tab {`
edit thread 2024-05-12 23:46:05 -07:00			`padding: 4px 7px;`
code reorganization and meows 2023-08-30 21:00:17 -07:00			`}`
Merge branch 'main' of http://git.jerl.zone/jerl/vybe 2024-02-19 23:42:44 -08:00			`input {`
space ui and updates 2024-03-18 23:07:48 -07:00			`background: #1b1b1b;`
mostly code organizing 2024-04-15 21:52:21 -07:00			`outline: none;`
			`border: 1px solid #444;`
multiple device authentication ! 2024-04-28 22:55:54 -07:00			`&:focus {`
federation ! 2024-06-12 03:00:50 -07:00			`padding-bottom: 2px;`
multiple device authentication ! 2024-04-28 22:55:54 -07:00			`border-bottom: 3px solid #777;`
			`}`
			`&::placeholder {`
			`color: #aaa;`
			`}`
edit thread fixes 2024-05-14 20:31:52 -07:00			`&[type='radio'] {`
			`position: relative;`
			`top: 2px;`
			`}`
Merge branch 'main' of http://git.jerl.zone/jerl/vybe 2024-02-19 23:42:44 -08:00			`}`
mostly code organizing 2024-04-15 21:52:21 -07:00			`#register {`
			`margin-inline: 14px;`
fix empty message 2024-04-15 23:53:54 -07:00			`max-width: 800px;`
mostly code organizing 2024-04-15 21:52:21 -07:00			`}`
federation ! 2024-06-12 03:00:50 -07:00			`:not(#register) > p {`
instance pane 2024-06-12 21:52:23 -07:00			`margin-block: 5px;`
			`word-wrap: break-word;`
federation ! 2024-06-12 03:00:50 -07:00			`}`
Merge branch 'main' of http://git.jerl.zone/jerl/vybe 2024-02-19 23:42:44 -08:00			`.thread:hover,`
multiple device authentication ! 2024-04-28 22:55:54 -07:00			`.tab:hover,`
instance pane 2024-06-12 21:52:23 -07:00			`.instancetitle > span:hover,`
multiple device authentication ! 2024-04-28 22:55:54 -07:00			`#user:hover {`
federation ! 2024-06-12 03:00:50 -07:00			`background-color: #333;`
Merge branch 'main' of http://git.jerl.zone/jerl/vybe 2024-02-19 23:42:44 -08:00			`}`
			`.thread.active,`
federation ! 2024-06-12 03:00:50 -07:00			`.tab.active,`
Merge branch 'main' of http://git.jerl.zone/jerl/vybe 2024-02-19 23:42:44 -08:00			`button:hover {`
			`background-color: #4f4f4f;`
			`color: #fff;`
			`}`
			`label.heading {`
instance pane 2024-06-12 21:52:23 -07:00			`margin: 10px 0 4px;`
Merge branch 'main' of http://git.jerl.zone/jerl/vybe 2024-02-19 23:42:44 -08:00			`display: block;`
			`}`
edit thread 2024-05-12 23:46:05 -07:00			`h3 {`
			`margin: 0;`
			`}`
Merge branch 'main' of http://git.jerl.zone/jerl/vybe 2024-02-19 23:42:44 -08:00			`h4 {`
edit thread 2024-05-12 23:46:05 -07:00			`margin: 6px 0;`
code reorganization and meows 2023-08-30 21:00:17 -07:00			`}`
			`.hidden {`
Merge branch 'main' of http://git.jerl.zone/jerl/vybe 2024-02-19 23:42:44 -08:00			`display: none !important;`
use socketio callbacks and uhtml 2023-07-30 18:06:21 -07:00			`}`
			`.column {`
			`flex: 1;`
displaynames, unselect thread, other fixes 2024-05-27 18:39:16 -07:00			`margin: 3px;`
use socketio callbacks and uhtml 2023-07-30 18:06:21 -07:00			`}`
spaces working real 2024-04-15 14:27:21 -07:00			`.separator {`
			`margin: 8px 2px;`
			`}`
various updates 2024-05-04 20:13:37 -07:00			`.separator:has(+ .separator),`
instance pane 2024-06-12 21:52:23 -07:00			`*.hidden + .separator,`
edit thread 2024-05-12 23:46:05 -07:00			`.separator:has(+ *.hidden),`
			`.separator:last-child {`
various updates 2024-05-04 20:13:37 -07:00			`display: none;`
			`}`
instance pane 2024-06-12 21:52:23 -07:00			`.content {`
			`flex: 1;`
			`}`
			`.instancetitle {`
federation ! 2024-06-12 03:00:50 -07:00			`margin: 2px;`
			`> span {`
			`display: table-cell;`
			`background-color: #222;`
instance pane 2024-06-12 21:52:23 -07:00			`padding-block: 6px;`
federation ! 2024-06-12 03:00:50 -07:00			`}`
			`> .title {`
			`width: 100%;`
			`}`
			`}`
			`.expander {`
			`padding-inline: 6px;`
			`}`
			`.arrow {`
			`display: block;`
			`position: relative;`
			`top: -1px;`
			`rotate: 45deg;`
			`&.collapsed {`
			`rotate: -45deg;`
			`top: 0;`
			`left: -3px;`
			`}`
			`}`
multiple device authentication ! 2024-04-28 22:55:54 -07:00			`#home {`
federation ! 2024-06-12 03:00:50 -07:00			`margin: 0;`
multiple device authentication ! 2024-04-28 22:55:54 -07:00			`max-width: 250px;`
			`display: flex;`
			`flex-direction: column;`
			`justify-content: space-between;`
			`}`
instance pane 2024-06-12 21:52:23 -07:00			`#instancelist {`
			`overflow-y: auto;`
			`> :not(div) {`
			`margin: 3px;`
			`}`
federation ! 2024-06-12 03:00:50 -07:00			`}`
			`#instances {`
			`display: flex;`
			`justify-content: space-between;`
			`}`
code reorganization and meows 2023-08-30 21:00:17 -07:00			`#threads {`
federation ! 2024-06-12 03:00:50 -07:00			`margin: 0 2px 6px;`
edit thread 2024-05-12 23:46:05 -07:00			`min-height: 0;`
			`display: flex;`
			`flex-direction: column;`
			`}`
			`#threadlist {`
			`overflow: auto;`
multiple device authentication ! 2024-04-28 22:55:54 -07:00			`}`
			`#user {`
federation ! 2024-06-12 03:00:50 -07:00			`margin: 2px;`
multiple device authentication ! 2024-04-28 22:55:54 -07:00			`padding: 6px;`
federation ! 2024-06-12 03:00:50 -07:00			`background-color: #222;`
multiple device authentication ! 2024-04-28 22:55:54 -07:00			`}`
			`#profile {`
code reorganization and meows 2023-08-30 21:00:17 -07:00			`max-width: 250px;`
use socketio callbacks and uhtml 2023-07-30 18:06:21 -07:00			`}`
instance pane 2024-06-12 21:52:23 -07:00			`#instance {`
			`display: flex;`
			`flex-direction: column;`
			`justify-content: space-between;`
			`max-width: 250px;`
			`}`
			`#disconnect {`
			`width: fit-content;`
			`}`
Merge branch 'main' of http://git.jerl.zone/jerl/vybe 2024-02-19 23:42:44 -08:00			`.thread {`
displaynames, unselect thread, other fixes 2024-05-27 18:39:16 -07:00			`padding: 2px 3px;`
various updates 2024-05-04 20:13:37 -07:00			`white-space: pre;`
stuff n tabs 2023-12-28 11:54:16 -08:00			`}`
code reorganization and meows 2023-08-30 21:00:17 -07:00			`#newthread {`
			`margin-top: 5px;`
edit thread 2024-05-12 23:46:05 -07:00			`width: fit-content;`
use socketio callbacks and uhtml 2023-07-30 18:06:21 -07:00			`}`
stuff n tabs 2023-12-28 11:54:16 -08:00			`#createthread {`
various updates 2024-05-04 20:13:37 -07:00			`max-width: fit-content;`
edit thread 2024-05-12 23:46:05 -07:00			`overflow: auto;`
stuff n tabs 2023-12-28 11:54:16 -08:00			`}`
little a organization 2023-07-30 19:31:26 -07:00			`#permissions {`
			`margin-bottom: 5px;`
			`}`
Merge branch 'main' of http://git.jerl.zone/jerl/vybe 2024-02-19 23:42:44 -08:00			`#thread {`
			`display: flex;`
edit thread 2024-05-12 23:46:05 -07:00			`margin: 0;`
various updates 2024-05-04 20:13:37 -07:00			`}`
			`#content {`
edit thread 2024-05-12 23:46:05 -07:00			`margin: 2px;`
instance pane 2024-06-12 21:52:23 -07:00			`min-width: 300px;`
various updates 2024-05-04 20:13:37 -07:00			`display: flex;`
Merge branch 'main' of http://git.jerl.zone/jerl/vybe 2024-02-19 23:42:44 -08:00			`flex-direction: column;`
			`}`
edit thread fixes 2024-05-14 20:31:52 -07:00			`#titlebar, #buttonbar {`
			`margin: 2px;`
various updates 2024-05-04 20:13:37 -07:00			`display: flex;`
			`justify-content: space-between;`
Merge branch 'main' of http://git.jerl.zone/jerl/vybe 2024-02-19 23:42:44 -08:00			`}`
edit thread fixes 2024-05-14 20:31:52 -07:00			`#title {`
			`margin-bottom: 5px;`
			`}`
stuff n tabs 2023-12-28 11:54:16 -08:00			`.tab {`
Merge branch 'main' of http://git.jerl.zone/jerl/vybe 2024-02-19 23:42:44 -08:00			`padding: 5px 7px;`
			`background-color: #1f1f1f;`
stuff n tabs 2023-12-28 11:54:16 -08:00			`border: 0;`
Merge branch 'main' of http://git.jerl.zone/jerl/vybe 2024-02-19 23:42:44 -08:00			`color: #ddd;`
stuff n tabs 2023-12-28 11:54:16 -08:00			`font-weight: 500;`
			`}`
Merge branch 'main' of http://git.jerl.zone/jerl/vybe 2024-02-19 23:42:44 -08:00			`.tabcontent {`
various updates 2024-05-04 20:13:37 -07:00			`flex: 1;`
stuff n tabs 2023-12-28 11:54:16 -08:00			`}`
Merge branch 'main' of http://git.jerl.zone/jerl/vybe 2024-02-19 23:42:44 -08:00			`#message {`
various updates 2024-05-04 20:13:37 -07:00			`margin: 2px;`
Merge branch 'main' of http://git.jerl.zone/jerl/vybe 2024-02-19 23:42:44 -08:00			`display: flex;`
			`flex-direction: column;`
misc fixes & max scale 200 2024-04-29 21:05:45 -07:00			`min-height: 0; /* flex makes this auto so it can't shrink */`
stuff n tabs 2023-12-28 11:54:16 -08:00			`}`
			`#messages {`
various updates 2024-05-04 20:13:37 -07:00			`flex: 1;`
misc fixes & max scale 200 2024-04-29 21:05:45 -07:00			`overflow: auto;`
stuff n tabs 2023-12-28 11:54:16 -08:00			`}`
use socketio callbacks and uhtml 2023-07-30 18:06:21 -07:00			`#msginput {`
Merge branch 'main' of http://git.jerl.zone/jerl/vybe 2024-02-19 23:42:44 -08:00			`display: flex;`
			`flex-direction: row;`
multiple device authentication ! 2024-04-28 22:55:54 -07:00			`> * {`
thread members 2024-05-05 00:47:42 -07:00			`margin: 2px;`
multiple device authentication ! 2024-04-28 22:55:54 -07:00			`}`
Merge branch 'main' of http://git.jerl.zone/jerl/vybe 2024-02-19 23:42:44 -08:00			`}`
			`#msg {`
			`flex-grow: 1;`
use socketio callbacks and uhtml 2023-07-30 18:06:21 -07:00			`}`
			`.message {`
			`margin-bottom: 5px;`
code reorganization and meows 2023-08-30 21:00:17 -07:00			`overflow-wrap: anywhere;`
use socketio callbacks and uhtml 2023-07-30 18:06:21 -07:00			`}`
			`#loadmore {`
			`margin-bottom: 10px;`
			`}`
thread members 2024-05-05 00:47:42 -07:00			`#members {`
instance pane 2024-06-12 21:52:23 -07:00			`min-width: 140px;`
thread members 2024-05-05 00:47:42 -07:00			`max-width: 250px;`
			`}`
edit thread 2024-05-12 23:46:05 -07:00			`#editthread {`
			`max-width: fit-content;`
			`}`
thread members 2024-05-05 00:47:42 -07:00			`#visibility {`
			`white-space: pre-line;`
edit thread 2024-05-12 23:46:05 -07:00			`margin-bottom: 12px;`
thread members 2024-05-05 00:47:42 -07:00			`}`
space ui and updates 2024-03-18 23:07:48 -07:00			`#space {`
various updates 2024-05-04 20:13:37 -07:00			`margin: -2px; /* offset column margin */`
space ui and updates 2024-03-18 23:07:48 -07:00			`position: relative;`
			`overflow: auto;`
			`}`
			`.span {`
			`position: absolute;`
fix space bug 2024-04-26 18:46:00 -07:00			`white-space: nowrap;`
space ui and updates 2024-03-18 23:07:48 -07:00			`}`
audio streaming 2024-05-24 00:29:09 -07:00			`#stream {`
			`margin: 4px 2px;`
			`}`
			`#play {`
			`line-height: 1.4;`
			`font-family: 'Segoe UI Symbol', math;`
			`}`
use socketio callbacks and uhtml 2023-07-30 18:06:21 -07:00			`</style>`
			`</head>`
Merge branch 'main' of http://git.jerl.zone/jerl/vybe 2024-02-19 23:42:44 -08:00			`<body></body>`
meow 2023-05-06 20:55:04 -07:00			`</html>`