Difference between revisions of "Template:Duesseldorf/prototype2.html"

Line 6: Line 6:
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <title>Document</title>
 
     <title>Document</title>
−
    <link rel="stylesheet" href="style.css">
+
body {
 +
  font-size: 15px;
 +
  background: #00ee99;
 +
  font-family: Verdana, Arial, Helvetica, sans-serif;
 +
}
 +
*,
 +
*:after,
 +
*:before {
 +
  margin: 0;
 +
  padding: 0;
 +
}
 +
#INFO {
 +
  position: fixed;
 +
  top: 0;
 +
  left: 0;
 +
  transform: translate(-100%, -100%);
 +
  width: 20rem;
 +
  height: 10rem;
 +
  background: white;
 +
  border: 1px solid silver;
 +
  font-size: 1.5rem;
 +
  pointer-events: none;
 +
}
 +
button {
 +
  padding: 0 2rem;
 +
  height: 2.5rem;
 +
  display: flex;
 +
  justify-content: center;
 +
  align-items: center;
 +
}
 +
input {
 +
  padding: 0 2rem;
 +
  height: 2.5rem;
 +
  display: flex;
 +
  justify-content: center;
 +
  align-items: center;
 +
}
 +
#canvas {
 +
  width: 100%;
 +
  background: white;
 +
}
 +
.topnav1,
 +
.topnav2 {
 +
  display: flex;
 +
  justify-content: space-between;
 +
  align-items: center;
 +
  padding: 0 1rem;
 +
  height: 4rem;
 +
}
 +
#topnav {
 +
  top: 0;
 +
  left: 0;
 +
  width: 100%;
 +
  background: green;
 +
  border-bottom: 2px solid #144600;
 +
  color: white;
 +
  font-weight: bold;
 +
}
 +
label {
 +
  display: flex;
 +
  flex-direction: column;
 +
}
 +
 
 +
.flex-row {
 +
  display: flex;
 +
  flex-direction: row;
 +
  align-items: center;
 +
}
 +
.flex-row > * {
 +
  margin-right: 1rem;
 +
}
 +
 
 
<script>
 
<script>
 
// math functions
 
// math functions
Line 208: Line 279:
  
 
     </script>
 
     </script>
 +
    <script>
 
// throttle function to prevent functions spamming too much and killing performance
 
// throttle function to prevent functions spamming too much and killing performance
 
// (function, ms, null)
 
// (function, ms, null)
Line 553: Line 625:
 
initField(ln);
 
initField(ln);
 
render();
 
render();
 +
</script>
 
   </body>
 
   </body>
 
</html>
 
</html>

Revision as of 11:34, 21 October 2021

<!DOCTYPE html> Document body { font-size: 15px; background: #00ee99; font-family: Verdana, Arial, Helvetica, sans-serif; } *, *:after, *:before { margin: 0; padding: 0; } #INFO { position: fixed; top: 0; left: 0; transform: translate(-100%, -100%); width: 20rem; height: 10rem; background: white; border: 1px solid silver; font-size: 1.5rem; pointer-events: none; } button { padding: 0 2rem; height: 2.5rem; display: flex; justify-content: center; align-items: center; } input { padding: 0 2rem; height: 2.5rem; display: flex; justify-content: center; align-items: center; } #canvas { width: 100%; background: white; } .topnav1, .topnav2 { display: flex; justify-content: space-between; align-items: center; padding: 0 1rem; height: 4rem; } #topnav { top: 0; left: 0; width: 100%; background: green; border-bottom: 2px solid #144600; color: white; font-weight: bold; } label { display: flex; flex-direction: column; } .flex-row { display: flex; flex-direction: row; align-items: center; } .flex-row > * { margin-right: 1rem; }