20240527

README-sch.md

@@ -0,0 +1,29 @@
+<div style="text-align: right;">
+
+简体中文 | [English](README.md)
+
+<sup>翻译不保证100%准确</sup>
+
+</div>
+
+<div style="text-align: center;">
+
+# ore-ui-web
+一个oreui的简单web实现
+
+![License](https://img.shields.io/github/license/XiaozhiSans/ore-ui-web
+) ![stars](https://img.shields.io/github/stars/XiaozhiSans/ore-ui-web?deeppink)
+
+</div>
+
+## 特别感谢
+| 人员或项目 | 理由 |
+|-|-|
+| [Mojang/oreui](https://github.com/Mojang/ore-ui) | 没有他们oreui就不会诞生! |
+| [Spectrollay/minecraft_repository](https://github.com/Spectrollay/minecraft_repository) | 提供了大量参考 |
+
+<span style="font-size: 1.25em;">**还有各位贡献者:**</span>
+[![contributors](https://contrib.rocks/image?repo=XiaozhiSans/ore-ui-web)](https://github.com/XiaozhiSans/ore-ui-web/graphs/contributors)
+
+## 协议
+本作品 授权于 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/)

README.md

@@ -0,0 +1,29 @@
+<div style="text-align: right;">
+
+[简体中文](README-sch.md) | English
+
+<sup>language translations may not be 100% acc</sup>
+
+</div>
+
+<div style="text-align: center;">
+
+# ore-ui-web
+a oreui's simple web implementation
+
+![License](https://img.shields.io/github/license/XiaozhiSans/ore-ui-web
+) ![stars](https://img.shields.io/github/stars/XiaozhiSans/ore-ui-web?deeppink)
+
+</div>
+
+## special thanks
+| person or project | reason |
+|-|-|
+| [Mojang/oreui](https://github.com/Mojang/ore-ui) | without them, the ore-ui would not be realized! |
+| [Spectrollay/minecraft_repository](https://github.com/Spectrollay/minecraft_repository) | provide lots of reference |
+
+<span style="font-size: 1.25em;">**and contributors:**</span>
+[![contributors](https://contrib.rocks/image?repo=XiaozhiSans/ore-ui-web)](https://github.com/XiaozhiSans/ore-ui-web/graphs/contributors)
+
+## license
+This work is licensed under [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/) 

assets/plugins/minecraft-fonts/main.css

@@ -0,0 +1,13 @@
+@charset "utf-8";
+
+@font-face {
+	font-family: "Minecraft Ten";
+	src: url(./fonts/minecraft-ten.ttf) format(truetype);
+	font-weight: bold;
+}
+
+@font-face {
+	font-family: Mojangles;
+	src: url(./fonts/Mojangles.ttf) format(truetype);
+	font-weight: normal;
+}

assets/scripts/main.js

@@ -0,0 +1,19 @@
+const main = {
+	closeSider: () => {
+		playSound(sounds.hide);
+		document.querySelector("sider").style.cssText = "/* width: 0; opacity: 0; */ left: calc(-100vw);";
+		document.querySelector("button#sidebar").setAttribute("onclick", "main.sidebar();");
+		document.querySelector("mask").style.cssText = "opacity: 0; pointer-events: none;";
+	},
+	sidebar: () => {
+		let mask = document.querySelector("mask");
+		playSound(sounds.pop);
+		document.querySelector("sider").style.cssText = "/* width: 260px; opacity: 1; */ left: 0;";
+		document.querySelector("button#sidebar").setAttribute("onclick", "main.closeSider();");
+		mask.style.cssText = "opacity: 1; pointer-events: unset;";
+		mask.setAttribute("onclick", "main.closeSider();");
+
+	}
+}
+
+document.querySelector("loader").style.cssText = "opacity: 0; pointer-events: none;";

assets/scripts/sounds.js

@@ -0,0 +1,10 @@
+const sounds = {
+	click: new Audio("assets/sounds/release-7c974.ogg"),
+	hide: new Audio("assets/sounds/modal_hide-2341f.ogg"),
+	pop: new Audio("assets/sounds/snes_pop-7a6d3.ogg")
+}
+
+const playSound = sound => {
+	sound.play();
+	return sound;
+}

assets/stylesheets/main.css

@@ -0,0 +1,277 @@
+@import url(../plugins/minecraft-fonts/main.css);
+@import url(https://cdn.jsdelivr.net/npm/[email protected]/all.min.css);
+
+* {
+	font-family: Mojangles, "Noto Sans SC";
+}
+.banner {
+	padding: 8px;
+	background-color: #000;
+	text-align: center;
+}
+.box {
+	padding: 16px;
+	border-top: 2px solid #5b5b5b;
+	border-bottom: 2px solid #333;
+}
+.center {
+	text-align: center;
+}
+.disabled {
+	color: grey;
+	pointer-events: none;
+}
+.flex {
+	display: flex;
+	justify-content: space-evenly;
+	align-items: center;
+	flex-wrap: wrap;
+}
+[tooltip]::before {
+	margin-top: 36px;
+	user-select: none;
+	position: absolute;
+	pointer-events: none;
+	content: attr(tooltip);
+	padding: 8px;
+	color: #fff;
+	background-color: #000;
+	font-size: 18px;
+	opacity: 0;
+	transition: 0.65s;
+}
+[tooltip]:hover::before {
+	opacity: 0.8;
+}
+a {
+	color: #00bfff;
+	text-decoration: none;
+}
+a:not(.disabled)::after {
+	margin-left: 4px;
+	content: url(../images/externalLink-0e493.png);
+	display: inline-block;
+	width: 10px;
+	height: 10px;
+}
+a:hover:not(.disabled) {
+	text-decoration: 2px solid underline;
+}
+body {
+	color: #fff;
+	font-size: 20px;
+	background-color: #48494a;
+	overflow: hidden;
+}
+button {
+	cursor: pointer;
+	user-select: none;
+	-moz-user-select: none;
+	-webkit-user-select: none;
+}
+button.icon {
+	background-color: unset;
+	border: none;
+	border-right: 2px solid #fff;
+	width: 45px;
+	height: 100%;
+}
+button.icon :hover,:focus {
+	background-color: #f6f6f6;
+	cursor: pointer;
+}
+button.icon>img, header img {
+	width: 32px;
+	height: 32px;
+}
+button.disabled {
+	color: #484848 !important;
+	background-color: #d2d2d2 !important;
+	border: 2px solid #8c8c8c !important;
+	box-shadow: inset 0 -4px #b2b2b2 !important;
+	pointer-events: none !important;
+}
+button.normal {
+	width: 240px;
+	height: 40px;
+	font-size: 20px;
+	background-color: #d1d1d1;
+	border: 2px solid #1e1e1e;
+	box-shadow: inset 0 -4px #585858, inset 3px 3px #fff3, inset -3px -7px #ffffff1a;
+}
+button.normal.link::after {
+	content: url(../images/externalLink-1fa23.png);
+	width: 10px;
+	height: 10px;
+}
+button.normal:is(:hover, :focus) {
+	background-color: #b2b2b2;
+	box-shadow: inset 0 -4px #585858, inset 3px 3px #fff3, inset -3px -7px #ffffff1a;
+}
+button.normal:active {
+	margin-top: 4px;
+	height: 36px;
+	padding-bottom: 2px;
+	box-shadow: inset 3px 3px #fffc, inset -3px -3px #fff3;
+}
+button.normal.blue {
+	color: #fff;
+	background-color: #0505e5;
+	box-shadow: inset 0 -4px #2f2fb1, inset 3px 3px #fff3, inset -3px -7px #ffffff1a;
+}
+button.normal.blue:is(:hover, :focus) {
+	background-color: #2727a5;
+	box-shadow: inset 0 -4px #343494, inset 3px 3px #fff3, inset -3px -7px #ffffff1a;
+}
+button.normal.dark {
+	color: #fff;
+	background-color: #242222;
+	box-shadow: inset 0 -4px #000, inset 3px 3px #fff3, inset -3px -7px #ffffff1a;
+}
+button.normal.dark.link::after {
+	content: url(../images/externalLink-0e493.png);
+	width: 10px;
+	height: 10px;
+}
+button.normal.dark:is(:hover, :focus) {
+	background-color: #3c3c3c;
+	box-shadow: inset 0 -4px #242222, inset 3px 3px #fff3, inset -3px -7px #ffffff1a;
+}
+button.normal.green {
+	background-color: #3b8430;
+	box-shadow: inset 0 -4px #1d4d14, inset 3px 3px #fff3, inset -3px -7px #ffffff1a;
+}
+button.normal.green:is(:hover, :focus) {
+	background-color: #2a642c;
+	box-shadow: inset 0 -4px #516d4d, inset 3px 3px #fff3, inset -3px -7px #ffffff1a;
+}
+button.normal.red {
+	background-color: #c63636;
+	box-shadow: inset 0 -4px #585858, inset 3px 3px #fff3, inset -3px -7px #ffffff1a;
+}
+button.normal.red:is(:hover, :focus) {
+	background-color: #1d4d14;
+	box-shadow: inset 0 -4px #ad1d1d, inset 3px 3px #fff3, inset -3px -7px #ffffff1a;
+}
+button.normal.skyblue {
+	background-color: #00bfff;
+	box-shadow: inset 0 -4px #06abe2, inset 3px 3px #fff3, inset -3px -7px #ffffff1a;
+}
+button.normal.skyblue:is(:hover, :focus) {
+	background-color: #57d5ff;
+	box-shadow: inset 0 -4px #1fa5d1, inset 3px 3px #fff3, inset -3px -7px #ffffff1a;
+}
+button.normal.yellow {
+	background-color: #dada10;
+	box-shadow: inset 0 -4px #a8a845, inset 3px 3px #fff3, inset -3px -7px #ffffff1a;
+}
+button.normal.yellow:is(:hover, :focus) {
+	background-color: #a0a014;
+	box-shadow: inset 0 -4px #8b8b32, inset 3px 3px #fff3, inset -3px -7px #ffffff1a;
+}
+h1.title {
+	font-family: "Minecraft Ten", "Noto Sans SC";
+	font-weight: bold;
+	font-size: 30px;
+}
+header {
+	border-bottom: 4px solid #b1b2b5;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: calc(100vw);
+	height: 40px;
+	color: #000;
+	background-color: #e6e8eb;
+	z-index: 10;
+}
+header>#title {
+	flex: 1;
+	border-left: 2px solid #a3a3a3;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 100%;
+}
+info {
+	display: block;
+	padding-left: 10px;
+	font-family: "Noto Sans SC";
+	font-size: 12px;
+	color: #fff6;
+}
+loader {
+	position: fixed;
+	top: 0;
+	left: 0;
+	background-color: #484848;
+	width: calc(100vw);
+	height: calc(100vh);
+	z-index: 11;
+	transition: 1.2s;
+}
+loader>content {
+	position: relative;
+	top: 50%;
+	left: 50%;
+}
+
+main {
+	height: calc(100vh - 40px);
+	top: 40px;
+	position: fixed;
+	margin-left: -10px;
+	width: calc(100vw);
+	scroll-behavior: smooth;
+	overflow-y: auto;
+}
+main::-webkit-scrollbar {
+	display: block;
+	top: 44px;
+	width: 16px;
+}
+main::-webkit-scrollbar-track {
+	background-color: #585858;
+	border: 5px solid #484848;
+}
+main::-webkit-scrollbar-thumb {
+	background-color: #e7e8e9;
+	border: 2px solid #000;
+	box-shadow: inset 0 -4px #585858, inset 0 -7px #fafafa, inset 3px 3px #fafafa, inset -3px 0 #fafafa;
+}
+mask {
+	position: fixed;
+	pointer-events: none;
+	top: 0;
+	left: 0;
+	width: calc(100vw);
+	height: calc(100vh);
+	background-color: #000000b3;
+	transition: 1.2s;
+	z-index: 1;
+}
+
+sider {
+	background-color: #323232;
+	/* width: 0;
+	opacity: 0; */
+	height: calc(100vh - 40px);
+	position: fixed;
+	top: 40px;
+	/* left: 0; */
+	left: calc(-100vw);
+	z-index: 2;
+	/* pointer-events: none; */
+	transition: 0.8s;
+}
+sider>div {
+	padding: 24px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	border-top: 2px solid #464646;
+	border-bottom: 2px solid #000;
+}