From 53545013e02ea8349b9795509044ad6f2f55a675 Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 10 Dec 2020 16:46:16 +0100 Subject: [PATCH] add second cube to html and change layout --- static/index.html | 264 ++++++++++++++++++++++++++++------------------ 1 file changed, 163 insertions(+), 101 deletions(-) diff --git a/static/index.html b/static/index.html index 0f6a538..935ead7 100644 --- a/static/index.html +++ b/static/index.html @@ -1,118 +1,180 @@ - - - - - - - - + + + .cube.show-front { transform: translateZ(-100px) rotateY( 0deg); } + .cube.show-right { transform: translateZ(-100px) rotateY( -90deg); } + .cube.show-back { transform: translateZ(-100px) rotateY(-180deg); } + .cube.show-left { transform: translateZ(-100px) rotateY( 90deg); } + .cube.show-top { transform: translateZ(-100px) rotateX( -90deg); } + .cube.show-bottom { transform: translateZ(-100px) rotateX( 90deg); } + + .cube__face { + position: absolute; + width: 200px; + height: 200px; + border: 1px solid white; + line-height: 200px; + font-size: 40px; + font-weight: bold; + color: white; + text-align: center; + } + + .cube__face--front { background: hsla( 0, 100%, 50%, 0.7); } + .cube__face--right { background: hsla( 60, 100%, 50%, 0.7); } + .cube__face--back { background: hsla(120, 100%, 50%, 0.7); } + .cube__face--left { background: hsla(180, 100%, 50%, 0.7); } + .cube__face--top { background: hsla(240, 100%, 50%, 0.7); } + .cube__face--bottom { background: hsla(300, 100%, 50%, 0.7); } + + .cube__face--front { transform: rotateY( 0deg) translateZ(100px); } + .cube__face--right { transform: rotateY( 90deg) translateZ(100px); } + .cube__face--back { transform: rotateY(180deg) translateZ(100px); } + .cube__face--left { transform: rotateY(-90deg) translateZ(100px); } + .cube__face--top { transform: rotateX( 90deg) translateZ(100px); } + .cube__face--bottom { transform: rotateX(-90deg) translateZ(100px); } + + label { margin-right: 10px; } + - - -
-

Click "Open" to create a connection to the server. -

-
- - -

- - -

-
-
-
-
+ + + - - + + + + + + + +
+

Click "Open" to create a connection to the server. +

+
+ + +

+ + +

+
- - -
-
-
front
-
back
-
right
-
left
-
top
-
bottom
-
-
-
- -
- - - 		-
-
+
+
+ +
+
+ + + + + + +
+
+
+

Legende

+
Ublox
+
Smartphone
+
+
+
+
+
+

Smartphone

+
+
front
+
back
+
right
+
left
+
top
+
bottom
+
+
+ +
+

Ublox

+
+
front
+
back
+
right
+
left
+
top
+
bottom
+
+
+
+
+ + + + +
+ +
+ \ No newline at end of file