feat(server): working friend page

server/static/css/common.css

@@ -0,0 +1,52 @@
+.align-vertical {
+	vertical-align: middle;
+}
+
+.badge-sm {
+	font-size: 1rem;
+}
+
+.text-beta {
+	font-size: 0.8rem;
+}
+
+.online {
+	color: #2ecc71;
+}
+
+@media (min-width: 992px) {
+	.hide-navbar {
+		display: none;
+	}
+}
+
+.hide-navbar {
+	margin-left: auto;
+	margin-right: 1em;
+}
+
+.no-wrap {
+	white-space: nowrap;
+}
+
+.no-click {
+	pointer-events: none;
+	cursor: default;
+}
+
+.btn-messages {
+  --bs-btn-color: var(--bs-white);
+  --bs-btn-bg: #ff1a77;
+  --bs-btn-border-color: #ff1a77;
+  --bs-btn-hover-color: var(--bs-white);
+  --bs-btn-hover-bg: #ff1a77;
+  --bs-btn-hover-border-color: #b30049;
+  --bs-btn-focus-shadow-rgb: #ff257e;
+  --bs-btn-active-color: var(--bs-white);
+  --bs-btn-active-bg: #e6005e;
+  --bs-btn-active-border-color: #b30049;
+}
+
+.zindextop {
+	z-index: 1501 !important;
+}

server/static/css/friends.css

@@ -0,0 +1,74 @@
+.grow {
+	transition: all .15s ease-in-out;
+	cursor: pointer;
+}
+
+.grow:hover {
+	transform: scale(1.1);
+}
+
+.card-size {
+	width: 10rem;
+}
+
+.profile-pic {
+	filter: drop-shadow(0 0 1.6rem rgb(0, 0, 0));
+	height: 9rem;
+	width: 9rem;
+	object-fit: cover;
+}
+
+.display-inline-grid {
+	display: inline-grid;
+}
+
+.text-left {
+	text-align: left;
+}
+
+/* small */
+@media screen and (max-width: 1400px) {
+	.card-size {
+		width: 10.5rem;
+	}
+
+	.card-img-size {
+		width: 100%;
+		height: 10rem;
+		object-fit: cover;
+	}
+
+	.card-not-img-size {
+		height: 10rem;
+		width: 10rem;
+		line-height: 13rem;
+	}
+}
+
+/* large */
+@media screen and (min-width: 1400px) {
+	.card-size {
+		width: 14rem;
+	}
+
+	.card-img-size {
+		width: 100%;
+		height: 12rem;
+		object-fit: cover;
+	}
+
+	.card-not-img-size {
+		height: 12rem;
+		width: 12rem;
+		line-height: 15rem;
+	}
+}
+
+/* fix for bootstrap flex */
+.pl-fix {
+	padding-left: 4px;
+}
+
+.offline {
+	color: #e74c3c;
+}

server/static/css/index.css

@@ -0,0 +1,154 @@
+div.scroll {
+	width: 100%;
+	overflow-x: auto;
+}
+
+.grid td {
+	height: 6.75vh;
+	min-width: 3.8vw;
+	background-color: var(--bs-dark-bg-subtle);
+}
+
+.grid {
+	border-collapse: collapse;
+	border: 2px solid var(--bs-body-bg);
+	margin: 0 auto;
+}
+
+.grid td {
+	border-collapse: collapse;
+	border: 2px solid var(--bs-body-bg);
+}
+
+.grid th {
+	border-collapse: collapse;
+	border: 2px solid var(--bs-body-bg);
+}
+
+.range {
+	min-width: 0 !important;
+	background-color: var(--bs-black) !important;
+}
+
+.profile-pic2 {
+	object-fit: cover;
+	height: min(7vh, 3.8vh);
+	width: min(7vh, 3.8vh);
+	border-radius: var(--bs-border-radius-pill);
+}
+
+.br {
+	display: block;
+}
+
+.whitelist {
+	background-color: #0099ff !important;
+}
+
+.friend {
+	background-color: #27ae50 !important;
+}
+
+.close_friend {
+	background-color: #8e44ad !important;
+	filter: drop-shadow(0 0 0.75rem #8e44ad) !important;
+}
+
+.admin {
+	animation: admin 4.2s infinite;
+}
+
+.focus {
+	background-color: #e33d94 !important;
+	filter: drop-shadow(0 0 0.75rem #e33d94) !important;
+}
+
+.me {
+	background-color: #2980b9 !important;
+	filter: drop-shadow(0 0 0.75rem #2980b9) !important;
+}
+
+/* small */
+@media screen and (max-width: 800px) {
+	.small-colors {
+		background-color: #2c2f33 !important;
+	}
+}
+
+@media screen and (max-width: 700px) {
+	.sm-t {
+		font-size: 0.5em;
+	}
+
+	.m-t {
+		font-size: 0.7em;
+	}
+
+	.grid {
+		border-collapse: collapse;
+		border: 4px solid var(--bs-body-bg);
+		margin: 0 auto;
+	}
+
+	.grid td {
+		border-collapse: collapse;
+		border: 4px solid var(--bs-body-bg);
+	}
+
+	.grid th {
+		border-collapse: collapse;
+		border: 4px solid var(--bs-body-bg);
+	}
+}
+
+.case {
+	cursor: pointer;
+}
+
+.dead {
+	color: #ff1744;
+}
+
+.attention {
+	color: #ffd54f;
+}
+
+.pooled {
+	background-color: #d35400 !important;
+}
+
+.tutor {
+	background-color: #ff9000 !important;
+	color: white !important;
+}
+
+.tutor-shield {
+	color: #ff9900 !important;
+}
+
+.tutor-spot {
+	background-color: #ffee00 !important;
+	color: black !important;
+}
+
+.wrong-cluster {
+	background-color: #f00000 !important;
+}
+
+.no-shadow {
+	filter: none !important;
+}
+
+.zindex9999 {
+	z-index: 9999;
+}
+
+@keyframes admin {
+	0%   { background: oklch(50% 0.3 0); }    /* Red */
+	16%  { background: oklch(50% 0.3 60); }   /* Orange */
+	33%  { background: oklch(50% 0.3 120); }  /* Yellow-Green */
+	50%  { background: oklch(50% 0.3 180); }  /* Cyan */
+	66%  { background: oklch(50% 0.3 240); }  /* Blue */
+	83%  { background: oklch(50% 0.3 300); }  /* Purple */
+	100% { background: oklch(50% 0.3 360); }  /* Back to Red */{
+}

server/static/css/profile.css

@@ -0,0 +1,4 @@
+.icon-length {
+	width: 1.7rem;
+	text-align: center;
+}