Initial Commit

random bullshit go

config.json

@@ -0,0 +1,7 @@
+[
+	{ "api": "" },
+	{
+		"leaderboardEnable": "1",
+		"leaderboardTab": "0"
+	}
+]

css/bottom.css

@@ -0,0 +1,306 @@
+:root {
+    --bottom-bar-distance: 400px;
+}
+
+#bottom {
+	position: absolute;
+	width: 1920px;
+	height: 300px;
+	bottom: 0px;
+	transition: ease-in-out 500ms;
+}
+
+#lowerPart {
+	position: absolute;
+	width: 1920px;
+	height: 300px;
+	bottom: 0px;
+	transition: ease-in-out 500ms;
+}
+
+#stats {
+	position: absolute;
+	left: 0;
+	right: 0;
+	bottom: -30px;
+	margin-left: auto;
+	margin-right: auto;
+	width: 100%;
+	height: 30px;
+	text-align: center;
+	align-content: center;
+	background-color: #161616;
+	user-select: none;
+	font-family: Torus;
+	font-size: 15px;
+	line-height: 30px;
+	color: #fff;
+	transition: ease-in-out 500ms;
+	border-bottom-left-radius: 10px;
+	border-bottom-right-radius: 10px;
+	box-shadow: 0px 5px 20px 3px rgba(0, 0, 0, 0.4);
+}
+
+#nowPlayingContainer {
+	position: absolute;
+	font-family: Torus;
+	font-weight: 900;
+	margin: 20px;
+	right: 0;
+	bottom: 70px;
+	width: 450px;
+	height: 90px;
+	text-align: center;
+	align-content: center;
+	background-color: black;
+	background-size: cover;
+	background-position: center center;
+	box-shadow: 0px 5px 20px 3px rgba(0, 0, 0, 0.4);
+	border-top-left-radius: 10px;
+	border-top-right-radius: 10px;
+	z-index: 1;
+	transition: ease-in-out 500ms;
+}
+
+#overlay {
+	position: absolute;
+	height: 100%;
+	width: 100%;
+	background-color: rgba(0, 0, 0, 0.7);
+	border-top-left-radius: 10px;
+	border-top-right-radius: 10px;
+}
+
+#mapName,
+#mapInfo {
+	position: absolute;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	margin-left: 20px;
+	margin-right: 20px;
+	left: 0;
+	right: 0;
+	z-index: 0;
+	font-size: 18px;
+	text-shadow: 0 3px 5px black;
+}
+
+#mapName {
+	text-align: center;
+	top: 20px;
+}
+
+#mapInfo {
+	text-align: center;
+	bottom: 20px;
+}
+
+#strainGraph {
+	position: absolute;
+    right: 470px;
+	bottom: 170px;
+	height: 70px;
+	transition: ease 500ms;
+	z-index: -1;
+	border-top-left-radius: 10px;
+	border-top-right-radius: 10px;
+}
+
+#progress {
+	bottom: 0px;
+	position: absolute;
+	width: 450px;
+	height: 90px;
+	overflow: hidden;
+	transition: ease 100ms;
+}
+
+#canvas,
+#canvasSecond {
+	position: absolute;
+	height: 90px;
+	bottom: 0px;
+}
+
+#combo {
+    position: absolute;
+	padding: 10px 0px 10px 0px;
+	text-align: center;
+	border-radius: 30px;
+    border-style: solid;
+    border-width: 8px;
+    border-color: #15151e;
+	bottom: 10px;
+	width: 150px;
+	color: white;
+	font-size: 25px;
+	transition: ease-in-out 500ms;
+	z-index: 0;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	text-shadow: 0 2px 5px rgba(0, 0, 0, 1);
+	left: 625px;
+}
+
+#pp {
+    position: absolute;
+	padding: 10px 0px 10px 0px;
+	text-align: center;
+	border-radius: 30px;
+    border-style: solid;
+    border-width: 8px;
+    border-color: #15151e;
+	bottom: 10px;
+	width: 150px;
+	color: white;
+	font-size: 25px;
+	transition: ease-in-out 500ms;
+	z-index: 0;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	text-shadow: 0 2px 5px rgba(0, 0, 0, 1);
+	right: 625px;
+}
+
+#accInfo {
+	position: absolute;
+	display: flex;
+	justify-content: space-evenly;
+	padding: 5px 0px 5px 0px;
+	border-radius: 20px;
+	border-color: #161616;
+	bottom: 10px;
+	right: 20px;
+	width: 300px;
+	height: 30px;
+	background-color: #161616;
+	transition: ease-in-out 500ms;
+	box-shadow: 0 5px 9px rgba(0 0 0 / 0.6);
+}
+
+#h100,
+#h50,
+#h0 {
+	font-family: GothicR;
+	font-size: 18px;
+	line-height: 30px;
+}
+
+#h100 {
+	color: #42f587;
+}
+
+#h50 {
+	color: #ebdf72;
+}
+
+#h0 {
+	color: #de3950;
+}
+
+#URbar {
+	position: absolute;
+	left: 810px;
+	bottom: 20px;
+	width: 300px;
+	height: 7.5px;
+	background-color: #daae46;
+	border-radius: 5px;
+	box-shadow: 0 0 9px black;
+	transition: ease-in-out 1000ms;
+}
+
+#avgHitError {
+	position: absolute;
+	width: 20px;
+	height: 20px;
+	top: -20px;
+	left: 140px;
+	background-image: url("../static/arrowtick.png");
+	background-size: 100%;
+	transition: ease-out 100ms;
+	transform-origin: 50% 50%;
+	-webkit-filter: drop-shadow(5px 5px 5px #222222);
+	filter: drop-shadow(5px 5px 5px #222222);
+}
+
+#l100 {
+	position: absolute;
+	height: 7.5px;
+	width: 209.8px;
+	left: 45.1px;
+	background-color: #57e313;
+	transition: ease-in-out 500ms;
+}
+
+#l300 {
+	position: absolute;
+	height: 7.5px;
+	width: 119.5px;
+	left: 90.25px;
+	background-color: #32bce9;
+	transition: ease-in-out 500ms;
+}
+
+.tick {
+	position: absolute;
+	top: 15px;
+	height: 10px;
+	width: 4px;
+	background-color: rgba(255 255 255 / .6);
+	left: 147.5px;
+	border-radius: 3px;
+	transition: ease-out 500ms;
+}
+
+#URIndex {
+	position: absolute;
+	bottom: 50px;
+	margin-left: auto;
+	margin-right: auto;
+	left: 0;
+	right: 0;
+	width: 100px;
+	font-size: 20px;
+	display: block;
+	font-weight: bold;
+	text-align: center;
+	padding: 5px 0px 5px 0px;
+	color: #fff;
+	background-color: #161616;
+	box-shadow: 0 5px 9px rgba(0 0 0 / 0.6);
+	border-radius: 25px;
+	transition: ease-in-out 500ms;
+}
+
+#modContainer {
+	position: absolute;
+	display: flex;
+	justify-content: flex-end;
+	flex-direction: row-reverse;
+	align-items: center;
+	height: 100px;
+	top: 125px;
+	right: 50px;
+	transition: ease-in-out 500ms;
+}
+
+.bottomBar {
+    position: absolute;
+    bottom: 40px;
+    width: 220px;
+    padding: 5px;
+    border-radius: 10px;
+    background-color: #15151e;
+}
+
+#comboBar {
+    left: var(--bottom-bar-distance);
+}
+
+#ppBar {
+    right: var(--bottom-bar-distance);
+}