paper?

2024-06-25 17:59:01 +02:00
parent 9dce76f0b0
commit 5b0be40e2f
10 changed files with 585 additions and 0 deletions
@@ -0,0 +1,184 @@
+body {
+	margin: 0;
+	padding: 0;
+	color: var(--foreground);
+	background: url('bg.jpeg');
+	background-size: cover;
+	font-family: sans-serif;
+	height: 100%;
+	overflow: hidden;
+	font-size: 14px;
+}
+
+#wrapper {
+	overflow-x: hidden;
+	overflow-y: auto;
+	width: 100%;
+	height: 100%;
+}
+
+h1, h2, h3, h4, h5, h6 {
+	color: var(--color1);
+	margin-top: 10px;
+	margin-bottom: 0;
+}
+
+h1 {
+	margin-top: 0;
+	font-size: 24px;
+}
+
+h2 {
+	color: var(--color2);
+}
+
+p {
+	margin-top: 2px;
+}
+
+a {
+	color: var(--color2);
+}
+
+strong {
+	color: var(--color4);
+}
+
+em {
+	color: var(--color3);
+}
+
+pre {
+	margin: 0;
+}
+
+pre > code {
+	border: 1px solid;
+}
+
+article {
+	max-width: 1024px;
+	min-height: 128px;
+	margin: 25px auto;
+	padding: 20px;
+	background: color-mix(in srgb, var(--background) 90%, transparent);
+	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.9);
+}
+
+code.block {
+	display: block;
+}
+
+img {
+	max-width: 100%;
+	image-rendering: pixelated;
+}
+
+#demo-cont {
+	visibility: hidden;
+}
+
+#demo-cont.visible {
+	visibility: visible;
+}
+
+#base .image-original img {
+	max-width: 256px;
+	min-width: 256px;
+}
+
+#resize .image-original img {
+	max-height: 50vh;
+	min-height: 257px;
+	max-width: 50vw;
+	min-width: 257px;
+}
+
+#image-original img {
+	position: absolute;
+	max-width: 90vw;
+	max-height: 90vh;
+	min-width: 257px;
+	min-height: 257px;
+	opacity: 1;
+	transition:
+		width 2s linear,
+		height 2s linear,
+		filter 3s linear,
+		opacity 3s ease-in;
+}
+
+#image-original img.resize {
+	width: 256px !important;
+	height: 256px !important;
+}
+
+#image-original img.grayscale {
+	filter: grayscale(1) blur(10px);
+}
+
+#image-original img.fade {
+	opacity: 0;
+}
+
+#image-resize img {
+	width: 256px;
+	height: 256px;
+	image-rendering: pixelated;
+	image-rendering: -moz-crisp-edges;
+}
+
+#image-dct {
+	margin-left: 32px;
+	display:grid;
+	grid-template-columns: repeat(8, 32px);
+}
+
+#image-dct > div {
+	height: 32px;
+	line-height:32px;
+	font-size: 11px;
+	text-align: center;
+	border: 1px solid var(--color1);
+	box-sizing: border-box;
+}
+
+.similarity-example {
+	display: flex;
+	flex-flow: row nowrap;
+	align-items: flex-end;
+}
+
+figure {
+	margin: 10px;
+	width: 50%;
+}
+
+/* Loader */ 
+
+#loader.show {
+  border-radius: 50%;
+  width: 256px;
+  height: 256px;
+  font-size: 10px;
+  position: fixed;
+  z-index: 99;
+  top: calc(50vh - 128px);
+  left: calc(50vw - 128px); 
+  border: 16px solid transparent;
+  border-top: 16px solid darkred;
+  transform: translateZ(0);
+  animation: loader 2s infinite ease-in-out;
+}
+
+@keyframes loader {
+  0% {
+    transform: rotate(0deg);
+  }
+  50% {
+    transform: rotate(360deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}