ui: Add Privacy Panel

css/Flags/Dark.css

@@ -1,6 +1,6 @@
 body.dark {
 	--color: #EEE;
-	--color2: #EEE9;
+	--color2: #EEE6;
 	--background: #1118;
 	--bg2: #0008;
 	--hover: #FFF1;

css/Pages/Pages.css

@@ -1,6 +1,6 @@
 @import url(Home.css);
 @import url(Services.css);
-@import url(Settings.css);
+@import url(Settings/Settings.css);
 
 .page {
 	position: fixed;
@@ -80,3 +80,36 @@
 .header .text {
 	font-size: 26px;
 }
+
+.sub-switch {
+	display: flex;
+	background: var(--bg2);
+	transition: background .2s;
+	margin: 16px 24px 0;
+	z-index: 1;
+	padding: 4px;
+	border-radius: 16px;
+	position: relative;
+	overflow: hidden;
+	--id: inherit;
+}
+
+.sub-switch::before {
+	content: " ";
+	z-index: -1;
+	position: absolute;
+	top: 4px;
+	left: calc(var(--id) / var(--switches) * 100% + 4px - 4px * var(--id));
+	width: calc(100% / var(--switches) - 4px);
+	height: calc(100% - 8px);
+	opacity: .25;
+	background: var(--color2);
+	border-radius: 12px;
+	transition: left .3s, background .3s;
+}
+
+.sub-switch div {
+	padding: 12px;
+	width: 50%;
+	cursor: pointer;
+}

css/Pages/Settings.css

@@ -1,72 +0,0 @@
-.settings {
-	margin: 32px auto;
-	padding: 0 16px;
-}
-
-.setting {
-	background: var(--bg2);
-	margin: 8px;
-	padding: 20px;
-	display: flex;
-	cursor: pointer;
-	border-radius: 16px;
-	align-items: center;
-	text-align: left;
-	transition: background .3s;
-}
-
-.setting i {
-	margin-right: 14px;
-	font-size: 28px;
-}
-
-.setting .name {
-	font-size: 16px;
-}
-
-.setting .desc {
-	opacity: .6;
-	margin-right: 16px;
-}
-
-.setting .switch {
-	position: relative;
-	width: 44px;
-	min-width: 44px;
-	height: 24px;
-	background: #8886;
-	border-radius: 100px;
-	margin: 0 4px 0 auto;
-	transition: border .4s, background .3s;
-}
-
-.setting .switch:after {
-	content: "";
-	position: absolute;
-	width: 16px;
-	height: 16px;
-	background: var(--color);
-	left: 4px;
-	top: 50%;
-	border-radius: 10px;
-	transform: translateY(-50%);
-	transition: left .2s, background .3s;
-}
-
-.setting.checked .switch {
-	background-color: #68F;
-	border-color: #68F;
-}
-
-.setting.checked .switch:after {
-	left: calc(100% - 20px);
-}
-
-.warn {
-	margin: 24px 0 -8px;
-	color: #F60;
-}
-
-.warn.hidden {
-	display: none;
-}

css/Pages/Settings/Settings.css

@@ -0,0 +1,165 @@
+.settings {
+	margin: 32px auto;
+	padding: 0 16px;
+}
+
+.setting {
+	background: var(--bg2);
+	margin: 8px;
+	padding: 20px;
+	display: flex;
+	cursor: pointer;
+	border-radius: 16px;
+	align-items: center;
+	text-align: left;
+	transition: background .3s;
+}
+
+.setting i {
+	margin-right: 14px;
+	font-size: 28px;
+}
+
+.setting .name {
+	font-size: 16px;
+}
+
+.setting .desc {
+	opacity: .6;
+	margin-right: 16px;
+}
+
+.setting .switch {
+	position: relative;
+	width: 44px;
+	min-width: 44px;
+	height: 24px;
+	background: #8886;
+	border-radius: 100px;
+	margin: 0 4px 0 auto;
+	transition: border .4s, background .3s;
+}
+
+.setting .switch:after {
+	content: "";
+	position: absolute;
+	width: 16px;
+	height: 16px;
+	background: var(--color);
+	left: 4px;
+	top: 50%;
+	border-radius: 10px;
+	transform: translateY(-50%);
+	transition: left .2s, background .3s;
+}
+
+.setting.checked .switch {
+	background-color: #68F;
+	border-color: #68F;
+}
+
+.setting.checked .switch:after {
+	left: calc(100% - 20px);
+}
+
+#no-cookies {
+	margin: 24px 0 -8px;
+	color: #F60;
+}
+
+#no-cookies.hidden {
+	display: none;
+}
+
+.subpages {
+	position: relative;
+	transform: translateX(calc(var(--id) * -100%));
+	transition: transform .4s, height .4s;
+}
+
+.subpages > div {
+	position: absolute;
+	left: calc(var(--n) * 100%);
+	width: 100%;
+}
+
+#report-boxes {
+	display: flex;
+	text-align: left;
+	flex-wrap: wrap;
+	margin-bottom: 8px;
+}
+
+#report-boxes i::after {
+	color: var(--color);
+	text-shadow: 0 0 48px var(--color);
+	padding: 16px;
+	font-size: 28px;
+	border-radius: 32px;
+}
+
+#report-boxes .icon-https::after {
+	--color: #0C7;
+	content: "lock";
+}
+
+#report-boxes .icon-rocket::after {
+	--color: #68F;
+	content: "rocket_launch";
+}
+
+#report-boxes .prewarn i::after {
+	--color: #EA0;
+}
+
+#report-boxes .warn i::after {
+	--color: #F60;
+}
+
+#report-boxes .error i::after {
+	--color: #F22;
+}
+
+#report-boxes > div {
+	display: flex;
+	width: 50%;
+	min-width: 256px;
+	flex: 1;
+	padding: 20px 8px;
+	align-items: center;
+}
+
+#report-boxes .title {
+	font-size: 16px;
+}
+
+#report-boxes .subtitle {
+	opacity: .6;
+}
+
+.security {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	max-width: 600px;
+	padding: 24px;
+	margin: 120px auto 80px;
+	text-align: right;
+}
+
+.security i {
+	font-size: 80px;
+}
+
+.security #report-score {
+	font-size: 48px;
+}
+
+.security #report {
+	opacity: .6;
+}
+
+.score::after {
+	content: "%";
+	font-size: 18px;
+}