Home Explore Help
Sign In
pascal
/
pas2js
mirror of https://gitlab.com/freepascal.org/fpc/pas2js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

* Some HTML/CSS improvement suggestions by Anne Zheng

michael 6 years ago
parent
6d8336209f
commit
c80d2a0dea
2 changed files with 128 additions and 67 deletions
Unified View Show Diff Stats
  1. 114 57
      demo/tetris/tetris.css
  2. 14 10
      demo/tetris/tetris.html

+ 114 - 57
demo/tetris/tetris.css
View File 

@@ -1,57 +1,114 @@
 
-body {
 
-  text-align: left;
 
-  background: #ffffff;
 
-}
 
-
 
-#tetris {
 
-  display: flex;
 
-  font: "16px Roboto";
 
-}
 
-
 
-#my-canvas {
 
-  background: #ffffff;
 
-  margin-left: 10px;
 
-  margin-top: 10px;
 
-  width: 300px;
 
-  height: 480px;
 
-}
 
-
 
-.btn-primary {
 
-  margin: 10px;
 
-  background-color: lightskyblue;
 
-  border-radius: 3px;
 
-  border: 2px solid;
 
-  height: 30px;
 
-  padding-right: 15px;
 
-  padding-left: 15px;
 
-  font-weight: bold;
 
-}
 
-
 
-.envelope {
 
-  border-width: medium;
 
-  border-color: grey;
 
-  margin-left: 10px;
 
-  margin-top: 10px;
 
-  display: flex;
 
-  border-spacing: 5px;
 
-  border-style: solid;
 
-  border-radius: 4px;
 
-  padding: 3px;
 
-  font-weight: bold;
 
-  color: #194a8d;
 
-}
 
-
 
-.label {
 
-  margin-right:20px;
 
-}
 
-#score-envelope {
 
-}
 
-#level-envelope {
 
-}
 
-
 
-#status-envelope {
 
-}
 
-
 
-#controls-envelope {
 
-  display: block; !important
 
-}
 
+* {

+    box-sizing: border-box;

+    margin: 0;

+    padding: 0;

+}

+

+body {

+    font-family: 'Roboto', serif;

+}

+

+#tetris {

+    display: flex;

+    width: 540px;

+    margin: 3em auto;

+}

+

+#my-canvas {

+    width: 300px;

+    height: 480px;

+}

+

+#info {

+    display: grid;

+    grid-row-gap: 0.5em;

+    height: 470px;

+    grid-template-rows: 2fr 1fr 1fr 1fr 6.5fr 1fr;

+}

+

+#info > #logo {

+    grid-row: 1;

+}

+

+#info > #score-envelope {

+    grid-row: 2;

+    border: 2px solid grey;

+    border-radius: 5px;

+    display: flex;

+    align-items: center;

+    font-weight: bold;

+}

+

+#info > #level-envelope {

+    grid-row: 3;

+    border: 2px solid grey;

+    border-radius: 5px;

+    display: flex;

+    align-items: center;

+    font-weight: bold;

+}

+

+#info > #status-envelope {

+    grid-row: 4;

+    border: 2px solid grey;

+    border-radius: 5px;

+    display: flex;

+    align-items: center;

+    font-weight: bold;

+}

+

+#info > #controls-envelope {

+    grid-row: 5;

+    border: 2px solid grey;

+    border-radius: 5px;

+    padding-top: 0.5em;

+    display: flex;

+    flex-direction: column;

+    justify-content: center;

+}

+

+#info > #btn-reset {

+    grid-row: 6;

+}

+

+#controls > p {

+    border-radius: 5px;

+    background: #b8caf4;

+    margin: 0.4em;

+    padding: 0.5em;

+    cursor: pointer;

+    box-shadow: 0.05em 0.1em rgba(0, 0, 0, 0.1);

+}

+

+.label {

+    text-transform: uppercase;

+    font-weight: bold;

+    margin-right: 0.5em;

+    padding-left: 0.5em;

+}

+

+.source {

+    display: flex;

+    width: 540px;

+    margin: -40px auto;

+    

+}

+

+input{

+    border: 0;

+    width: 70%;

+    font-size: 16px;

+    font-weight: bold;

+}

+

+button{

+    background: #2B60DE;

+    color: #eee;

+    font-weight: bold;

+    border: 0;

+    padding: 12px 0;

+    width: 100%;

+    border-radius: 5px;

+    text-transform: uppercase;

+    font-size: 14px;

+}

+ 14 - 10
demo/tetris/tetris.html
View File 

@@ -1,8 +1,10 @@
 
-<!doctype html>
 
+<!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
 <head>
 
 <head>
 
-  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
 
-  <meta name="viewport" content="wideth=device-width, initial-scale=1">
 
+  <meta charset="UTF-8">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
+  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
 
   <link rel="stylesheet" type="text/css" href="tetris.css">
 
   <link rel="stylesheet" type="text/css" href="tetris.css">
 
   <title>Tetris using pas2js</title>
 
   <title>Tetris using pas2js</title>
 
   <script src="tetris.js"></script>
 
   <script src="tetris.js"></script>
 
@@ -14,7 +16,7 @@
 
     </div>
 
     </div>
 
     <div id="info">
 
     <div id="info">
 
       <div id="logo">
 
       <div id="logo">
 
-        <img id="logo-img" src="tetrislogo.png" width="161" height="54"/>
 
+        <img id="logo-img" src="tetrislogo.png" width="80%"/>
 
       </div>
 
       </div>
 
       <div id="score-envelope" class="envelope">
 
       <div id="score-envelope" class="envelope">
 
         <div id="score-label" class="label">Score:</div>
 
         <div id="score-label" class="label">Score:</div>
 
@@ -31,17 +33,19 @@
 
       <div id="controls-envelope" class="envelope">
 
       <div id="controls-envelope" class="envelope">
 
         <div id="controls-label" class="label">Controls:</div>
 
         <div id="controls-label" class="label">Controls:</div>
 
         <div id="controls">
 
         <div id="controls">
 
-          <p><span id="control-left">Arrow-Left:</span> Move left</p>
 
-          <p><span id="control-right">Arrow-Right:</span> Move right</p>
 
-          <p><span id="control-down">Arrow-Down:</span> Move down</p>
 
-          <p><span id="control-rotate">Arrow-up:</span> Rotate block</p>
 
-          <p><span id="control-drop">Space bar:</span> Drop block</p>
 
+          <p><span id="control-left"><i class="fas fa-arrow-left"></i>&nbsp;Arrow-Left:</span> Move left</p>
 
+          <p><span id="control-right"><i class="fas fa-arrow-right"></i>&nbsp;Arrow-Right:</span> Move right</p>
 
+          <p><span id="control-down"><i class="fas fa-arrow-down"></i>&nbsp;Arrow-Down:</span> Move down</p>
 
+          <p><span id="control-rotate"><i class="fas fa-arrow-up"></i>&nbsp;Arrow-Up:</span> Rotate block</p>
 
+          <p><span id="control-drop"><i class="fas fa-square"></i>&nbsp;Space bar:</span> Drop block</p>
 
         </div>
 
         </div>
 
       </div>
 
       </div>
 
       <button id="btn-reset" class="btn-primary">Restart</button>
 
       <button id="btn-reset" class="btn-primary">Restart</button>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
-  Sources: <a target="new" href="tetris.lpr">Program</a> <a target="new" href="utetris.pp">unit</a>.
 
+  <div class="source">
 
+  Sources: <a target="new" href="tetris.lpr">Program</a>&nbsp; <a target="new" href="utetris.pp">unit</a>.
 
+  </div>
 
   <script>
 
   <script>
 
     window.addEventListener("load", rtl.run);
 
     window.addEventListener("load", rtl.run);
 
   </script>
 
   </script>