home page revamp: features, examples, and philosophy in extra pages.

WebEngineering-FHNW · Dec 7, 2024 · 2279648 · 2279648
1 parent a5c26c8
commit 2279648
Show file tree

Hide file tree

Showing 4 changed files with 533 additions and 217 deletions.
diff --git a/docs/examples.html b/docs/examples.html
@@ -90,8 +90,7 @@ <h1>Kolibri</h1>
       		  <h2>Purpose</h2>
       		  <p>
                   Kolibri comes with many features. Every feature is tested and used in an application.
-                  Many features have additional, self-contained example pages that show how to use the feature and
-                  what benefits the feature yields.
+                  Many features have additional, self-contained example pages that visualize the feature.
               </p>
       		  <p>
                   This page provides an overview over the example pages such that you can browse
@@ -188,7 +187,8 @@ <h2>Sequences</h2>
                 <dd>Playing <a href="./src/examples/sequence/tictactoe/TicTacToe.html">Tic Tac Toe</a>
                 against the computer gives you some winning chances since the computer only looks
                 three half-moves ahead. However, this is an example of the functional minimax
-                algorithm (see John Hughes "Why FP matters") based on Kolibri sequences.</dd>
+                algorithm (see John Hughes "Why FP matters") based on Kolibri sequences and the
+                monadic JINQ (read "jinx") API.</dd>
              </dl>
         </section>
 

diff --git a/docs/features.html b/docs/features.html
@@ -0,0 +1,114 @@
+<!doctype html>
+<html lang=en>
+<head>
+	<meta charset="UTF-8">
+	<title>Kolibri Features</title>
+	<link rel="shortcut icon" type="image/png" href="./img/logo/logo-60x54.png"/>
+	<link rel="stylesheet"                     href="./css/kolibri-base.css">
+    <style>
+        body {
+			max-width: 		42em;
+			margin: 		3em auto 3em auto;
+        }
+		header {
+			display: 		flex;
+			flex-direction: column;
+			align-items: 	center;
+		}
+		ul {
+			list-style-type: none;
+			padding-left: 		0;
+		}
+		dl {
+			display: grid;
+			grid-template-columns: 10em auto;
+		}
+        dd {
+            margin-block-end:     1lh;
+            margin-inline-start:  2em;
+        }
+
+		div.kolibri-logo-svg {
+			  height:         250px;
+			  aspect-ratio:   1;
+			  padding:        2em;
+			  transition:     transform .4s linear;
+		  }
+		  svg {
+			  overflow: visible;
+		  }
+		  .flatter {
+			  animation-name:             kolibri-wings;
+			  animation-duration:         .2s;
+			  animation-iteration-count:  15;
+			  animation-direction:        reverse;
+			  animation-timing-function:  ease-in;
+			  transform-origin:           45% 45%;
+		  }
+		  @keyframes kolibri-wings {
+			  from {
+				  transform:      scaleX(1) rotate(0deg);
+			  }
+			  to {
+				  transform:      scaleX(-1) rotate(30deg);
+			  }
+		  }
+
+    </style>
+</head>
+<body>
+    <a href="#main" class="skip-link">Skip to main content</a> <!-- a11y support skip link -->
+	<header>
+		<div class="kolibri-logo-svg kolibri-logo-anim">
+			<svg viewBox="0 0 305 342" fill="none" xmlns="http://www.w3.org/2000/svg">
+				<path d="M138 194C183.5 214.5 228 221.5 236.5 341.5C229.5 273.5 187 263.5 138 194Z" fill="#5F2EEA"/>
+				<path d="M117 122C117 46 42.5 17 0 0C81.2 39.2 77.5 79.5 80.5 138C87 216.5 128 235.667 150.5 248C105.7 212 117 157 117 122Z"
+					  fill="#FE2EA8"/>
+				<path d="M80.9999 144.5C81.3468 146.565 81.692 148.581 82.0374 150.552C86.8892 170.965 107.957 211.566 156.5 225.5C210.5 241 236.407 308.5 237.074 342C220.5 279.5 210.346 274.538 156.5 250.5C102.35 226.326 92.1459 208.229 82.0374 150.552C81.492 148.257 81.1515 146.218 80.9999 144.5Z"
+					  fill="#BE58FD"/>
+				<path d="M115 49.5C100.5 39.8333 79 51.0005 54 32C92.5 36.5 109.5 26 129.5 44C149.5 65 128.5 90 148 113.499C123.5 104.499 133 61.5 115 49.5Z"
+					  fill="#5F2EEA"/>
+				<circle cx="100.5" cy="60.5" r="9.5" fill="#2D1FB1"/>
+				<path class="wing flatter" opacity="0.5"
+					  d="M128 179.114C176.159 220.174 254.92 177.348 279 146C243.884 171.608 187.698 146.442 128 179.114Z"
+					  fill="#BD53FE" stroke="#BD53FE"/>
+				<path class="wing flatter" opacity="0.7"
+					  d="M128 158C163.892 67.1818 241.575 130.021 305 47C263.208 149.285 161.925 132.314 128 158Z"
+					  fill="#4C2EEC"/>
+				<path class="wing flatter" opacity="0.7"
+					  d="M128 178.895C162.922 103.67 248.073 126.739 305 47C278.211 119.718 247.116 181.904 128 178.895Z"
+					  fill="#FF2CA5"/>
+			</svg>
+		</div>
+        <h1>Kolibri</h1>
+        <div class="subtitle">Features</div>
+	</header>
+
+	<main id="main" tabindex="-1"> <!-- a11y support: can be tabbed to -->
+
+        <section>
+      		  <h2>Standard Library</h2>
+            <p>
+               Immutable: Pair, Tuple, Maybe, Either, Sequence, JINQ, JSON monad
+                along with many church-encoded lambda abstractions.
+            </p>
+            <p>
+               Observable, ObservableList, DataFlowVariable, Scheduler, Attribute, ModelWorld.
+            </p>
+            <p>
+                Utilities: array extensions, DOM handling, test facility (incl. async testing), logging, REST calls.
+            </p>
+        </section>
+        <section>
+      		  <h2>Patterns</h2>
+            <p>
+               Classical MVC, Projector Pattern
+            </p>
+
+        </section>
+
+
+	</main>
+
+</body>
+</html>