Initial commit: Mobile cheese POC with Python proxy server
This commit is contained in:
Paulo Truta
+244
@@ -0,0 +1,244 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
iframe {
|
||||
display: block !important;
|
||||
background-color: #fff;
|
||||
height: calc(100vh - 4rem);
|
||||
top: var(--loadProgress);
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
/* The bed of the Machine */
|
||||
|
||||
.machine {
|
||||
background: url("/images/Metal Panel.svg");
|
||||
background-repeat: repeat-x;
|
||||
bottom: 0;
|
||||
height: 4rem;
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
z-index: 9000;
|
||||
}
|
||||
|
||||
/* Labels */
|
||||
|
||||
label {
|
||||
background-color: #202123;
|
||||
text-shadow:
|
||||
1px -1px 0px #42464dff,
|
||||
-1px 1px 0px #ffffff1a;
|
||||
color: #eeeeee;
|
||||
display: block;
|
||||
font: 0.625rem "Arial Rounded MT Bold";
|
||||
padding: 0.0625rem 0.3125rem;
|
||||
text-transform: uppercase;
|
||||
transform: rotate(-5deg);
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
/* The URL grater and indicators */
|
||||
|
||||
.link-grater {
|
||||
position: absolute;
|
||||
left: 4rem;
|
||||
top: 0;
|
||||
|
||||
.grater-bed {
|
||||
background: url("/images/Grater Bed.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom;
|
||||
position: absolute;
|
||||
height: 4rem;
|
||||
top: -4rem;
|
||||
width: 8.5rem;
|
||||
|
||||
&::before {
|
||||
background: url("/images/Sausage.svg");
|
||||
background-repeat: no-repeat;
|
||||
content: " ";
|
||||
display: block;
|
||||
height: 3em;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
transition: all 0.5s;
|
||||
width: 8.125em;
|
||||
}
|
||||
&.drag-over::before {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.grater-blade {
|
||||
background: url("/images/Grater Blade.svg");
|
||||
height: 0.625rem;
|
||||
left: var(--graterTravel);
|
||||
position: absolute;
|
||||
bottom: 0.625rem;
|
||||
width: 3.4375rem;
|
||||
z-index: 10;
|
||||
}
|
||||
.lever {
|
||||
bottom: -2.75rem;
|
||||
height: 4.4375rem;
|
||||
position: absolute;
|
||||
left: 12rem;
|
||||
width: 6.125rem;
|
||||
|
||||
.stem {
|
||||
background: url("/images/Lever Handle.svg");
|
||||
height: 3.4375rem;
|
||||
position: absolute;
|
||||
width: 3.0625rem;
|
||||
top: 1em;
|
||||
transform: rotate(var(--leverRotation));
|
||||
transform-origin: calc(100% - 3px) calc(100% - 2px);
|
||||
|
||||
.handle {
|
||||
cursor: pointer;
|
||||
height: 2.75rem;
|
||||
position: absolute;
|
||||
left: -0.75rem;
|
||||
top: -1rem;
|
||||
width: 2.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
background: url("/images/Lever Back.svg");
|
||||
bottom: -0.5rem;
|
||||
content: "";
|
||||
height: 1.375rem;
|
||||
left: 2.25rem;
|
||||
position: absolute;
|
||||
width: 1.375rem;
|
||||
}
|
||||
|
||||
&::after {
|
||||
background: url("/images/Lever Front.svg");
|
||||
bottom: -0.5rem;
|
||||
content: "";
|
||||
height: 1.0625rem;
|
||||
left: 2.40625rem;
|
||||
position: absolute;
|
||||
width: 1.0625rem;
|
||||
}
|
||||
}
|
||||
|
||||
.indicator-leds {
|
||||
position: absolute;
|
||||
width: max-content;
|
||||
|
||||
bottom: -3.3125rem;
|
||||
left: 10rem;
|
||||
|
||||
.indicator {
|
||||
display: inline-block;
|
||||
height: 0.6875rem;
|
||||
width: 0.6875rem;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
position: absolute;
|
||||
bottom: -3rem;
|
||||
left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.ready-to-grate {
|
||||
background: url("/images/Red Unlit Light.svg");
|
||||
}
|
||||
.ready-to-load {
|
||||
background: url("/images/Green Unlit Light.svg");
|
||||
}
|
||||
[data-current-state="readyToGrate"] .ready-to-grate {
|
||||
background: url("/images/Red Lit Light.svg");
|
||||
}
|
||||
[data-current-state="readyToLoad"] .ready-to-load {
|
||||
background: url("/images/Green Lit Light.svg");
|
||||
}
|
||||
|
||||
/* The Link Loader Wheel and Chain Mechanism */
|
||||
|
||||
.chain {
|
||||
background: url("/images/Chain Link.svg");
|
||||
background-position-y: var(--chainOffset);
|
||||
background-repeat: repeat-y;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
right: 1rem;
|
||||
top: 0;
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
.url-loader {
|
||||
position: absolute;
|
||||
right: 1.5rem;
|
||||
top: -3rem;
|
||||
|
||||
.wheel {
|
||||
height: 6rem;
|
||||
width: 6rem;
|
||||
|
||||
.body {
|
||||
background: url("/images/Wheel.svg");
|
||||
height: 6rem;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transform: rotate(var(--wheelRotation));
|
||||
width: 6rem;
|
||||
}
|
||||
|
||||
.handle {
|
||||
cursor: pointer;
|
||||
height: 2.75rem;
|
||||
position: absolute;
|
||||
right: -1.125rem;
|
||||
top: 1.625rem;
|
||||
width: 2.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: -4rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Make a Sausage */
|
||||
.sausage {
|
||||
align-items: center;
|
||||
background: url("/images/Sausage.svg");
|
||||
background-position: top;
|
||||
background-repeat: no-repeat;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
font: 0.625rem "Arial Rounded MT Bold";
|
||||
height: calc(3rem - var(--grateLevel));
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: var(--grateLevel);
|
||||
left: 0;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
text-transform: uppercase;
|
||||
width: 8.125rem;
|
||||
white-space: nowrap;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* Util */
|
||||
.no-select {
|
||||
user-select: none;
|
||||
}
|
||||
Reference in New Issue
Block a user