Better website + link to live demos

victorb · victorb · commit 45fbcb2e4f8c · 2024-08-11T13:30:13.000+02:00
diff --git a/README.md b/README.md
@@ -9,6 +9,10 @@
 
 > Includes bevy_dogoap which provides a neat Bevy integration of the dogoap library
 
+### [Live Demos](https://victorb.github.io/dogoap)
+
+[![Live Demo](./docs/images/live_demo.png)](https://victorb.github.io/dogoap)
+
 ## Documentation
 
 - [`dogoap`](./crates/dogoap/README.md) docs - Standalone library for creation actions, states and goals to be used with the provided planner
diff --git a/docs/images/live_demo.png b/docs/images/live_demo.png
diff --git a/web-src/index.html b/web-src/index.html
@@ -7,9 +7,13 @@
 </head>
 
 <body>
+  <div id="title">
+    <div>Dogoap - WASM Examples</div>
+  </div>
   <div id="menu">
     <a href="#cells">Cells / Quickstart</a>
     <a href="#miner">Miner / Longer plans</a>
+    <a href="https://github.com/victorb/dogoap" class="right-aligned">Source Code / GitHub</a>
   </div>
 
   <div id="wrapper">
diff --git a/web-src/style.css b/web-src/style.css
@@ -1,17 +1,15 @@
 :root {
-  --color1: rgba(0,0,0,0.9);
+  --color1: rgba(0, 0, 0, 0.9);
 }
 
 body {
-  background: linear-gradient(
-  135deg,
-  var(--color1) 0%,
-  var(--color1) 49%,
-  black 49%,
-  black 51%,
-  var(--color1) 51%,
-  var(--color1) 100%
-  ) repeat;
+  background: linear-gradient(135deg,
+      var(--color1) 0%,
+      var(--color1) 49%,
+      black 49%,
+      black 51%,
+      var(--color1) 51%,
+      var(--color1) 100%) repeat;
   background-size: 20px 20px;
   font-family: sans-serif;
 }
@@ -47,28 +45,46 @@ canvas {
   align-items: center;
 }
 
+#title {
+  font-size: 26px;
+  margin-left: 10px;
+  font-family: monospace;
+  color: white;
+  text-align: center;
+}
+
 #loading {
   position: absolute;
   z-index: 0;
   font-size: 2em;
 }
 
 #menu {
-  height: 30px;
+  height: 50px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: end;
+  padding-left: 10px;
 }
 
-a {
-  margin: 40px;
+#menu a {
   font-size: 22px;
   color: rgba(255, 255, 255, 0.8);
   text-decoration: none;
+  margin-right: 50px;
 }
 
-a.active, a:hover {
+#menu a.active,
+#menu a:hover {
   color: rgba(255, 255, 255, 1.0);
   text-decoration: underline;
 }
 
+a.right-aligned {
+  margin-left: auto;
+  margin-right: 10px !important;
+}
+
 [class*="shj-lang-"] {
   margin: 0px;
   padding: 0px;
@@ -78,9 +94,7 @@ a.active, a:hover {
   font-size: 0.8em;
   background-color: rgba(0, 0, 0, 0.3);
   flex: 1;
-  padding-top: 20px;
-  padding-bottom: 20px;
   max-height: 90vh;
   overflow-y: scroll;
   margin-left: 20px;
-}
+}
