HSH
/
cg1-visualisations
mirror of https://gitlab.gwdg.de/lernanwendungen/cg1/cg1_tut_mdi.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

update colours to match catppuccin colour palette 

https://catppuccin.com/palette/
This commit is contained in:
Luca Conte 2025-05-10 11:47:13 +02:00
parent 9658d8d9f0
commit ff971138c5
1 changed files with 26 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/index.html
View File

@ -55,18 +55,18 @@
padding: var(--padding);
display: block;
border: solid 2px #11111b;
background-color: #31324480;
border-radius: 20px;
}
#stats {
background-color: #31324480;
right: var(--padding);
position: absolute;
top: var(--padding);
}
#controls {
background-color: #313244;
}
#interpolate {
@ -81,8 +81,8 @@
padding-right: var(--padding);
}
#matrices > div {
background-color: rgba(255, 255, 255, 0.1);
.matrix {
background-color: #45475a;
border-radius: 20px;
display: flex;
justify-content: center;
@ -92,7 +92,7 @@
overflow: hidden;
}
#matrices > div::before {
.matrix::before {
content: '';
position: absolute;
border-radius: 20px;
@ -100,13 +100,27 @@
height: 100%;
right: 0;
top: 0;
background-color: rgba(255, 255, 255, 0.1);
background-color: #585b70;
transition: width linear 0.05s;
}
#matrices > span {
display: flex;
justify-content: center;
align-items: center;
}
.matrix svg {
max-width: 100%;
height: auto;
}
.projection {
color: #f38ba8;
}
.lookAt {
color: #a6e3a1;
}
</style>
</head>
<body>
@ -127,9 +141,8 @@
<div id="controls">
<div id="matrices">
<span></span>
<div class="matrix">
<div class="matrix projection">
$$
\color{red}
\begin{pmatrix}
1 & 0 & 0 & 0 \\
0 & 1 & 0 & 0 \\
@ -139,9 +152,8 @@
$$
</div>
<span>$$\dot{}$$</span>
<div class="matrix">
<div class="matrix projection">
$$
\color{red}
\begin{pmatrix}
\frac{2}{r-l} & 0 & 0 & 0 \\
0 & \frac{2}{t-b} & 0 & 0 \\
@ -151,9 +163,8 @@
$$
</div>
<span>$$\dot{}$$</span>
<div class="matrix">
<div class="matrix projection">
$$
\color{red}
\begin{pmatrix}
1 & 0 & 0 & - \frac{r+l}{2} \\
0 & 1 & 0 & - \frac{t+b}{2} \\
@ -163,9 +174,8 @@
$$
</div>
<span>$$\dot{}$$</span>
<div class="matrix">
<div class="matrix projection">
$$
\color{red}
\begin{pmatrix}
1 & 0 & 0 & 0 \\
0 & 1 & 0 & 0 \\
@ -175,9 +185,8 @@
$$
</div>
<span>$$\dot{}$$</span>
<div class="matrix">
<div class="matrix lookAt">
$$
\color{green}
\begin{pmatrix}
u_x & u_y & u_z & 0 \\
v_x & v_y & v_z & 0 \\
@ -187,9 +196,8 @@
$$
</div>
<span>$$\dot{}$$</span>
<div class="matrix">
<div class="matrix lookAt">
$$
\color{green}
\begin{pmatrix}
1 & 0 & 0 & -e_x \\
0 & 1 & 0 & -e_y \\