From b4dee8cfd8d3cc7cf7de71a79d860a420790f2b4 Mon Sep 17 00:00:00 2001
From: Steve <info@konfer.be>
Date: Fri, 8 Mar 2024 19:27:48 +0100
Subject: [PATCH] chore: partial static website design

---
 src/index.html              |  31 +++++++++--
 src/js/vanilla/kompleter.js |   4 +-
 src/sass/_variables.scss    |  37 +++++++------
 src/sass/kompleter.scss     | 106 +++++++++++++++++++++++++++---------
 4 files changed, 129 insertions(+), 49 deletions(-)
diff --git a/src/index.html b/src/index.html
index 8c096f3..2ae1fa4 100644
--- a/src/index.html
+++ b/src/index.html
@@ -3,21 +3,22 @@
 
 <head lang="en">
 
-    <title>jQuery auto-complete plugin - Kompleter.js</title>
+    <title>Auto-complete plugin - Kompleter.js</title>
 
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <!--[if IE]>
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <![endif]-->
 
     <link href='https://fonts.googleapis.com/css?family=Lato|Open+Sans|Montserrat' rel='stylesheet' type='text/css' />
     <link href="css/kompleter.min.css" rel="stylesheet" type="text/css" media="screen" />
 
     <!--[if lt IE 9]>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
+      <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
     <![endif]-->
+
     <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>-->
 
     <script src="./js/kompleter.min.js"></script>
@@ -26,7 +27,20 @@
 
 <body>
 
-  <div id="wrapper">
+  <header>
+    <p style="text-align: center;"><a href="">Documentation</a></p>
+
+    <a href="https://github.com/steve-lebleu/kompleter.js" target="_blank" class="github-corner" aria-label="View source on Github">
+      <svg viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg>
+    </a>
+  </header>
+  
+  <hgroup>
+    <h1>Kømpletr</h1>
+    <cite>10kb of vanilla lightweight to add highly featured and eco friendly autocomplete on your pages.</cite>
+  </hgroup>
+  
+  <div id="searcher" class="form--search">
     <input
       type="text"
       name="auto-complete"
@@ -40,6 +54,13 @@
       data-fields="Name,CountryCode,Population" />
   </div>
 
+  <footer>
+    <p>
+      © 2017 Konfer
+      <span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">Kømpletr.js</span> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a>.<br>Permissions beyond the scope of this license may be available at <a xmlns:cc="http://creativecommons.org/ns#" href="https://www.konfer.be" rel="cc:morePermissions">https://www.konfer.be</a>.
+    </p>
+  </footer>
+
   <script type="text/javascript">
     function ready(fn) {
       if (document.readyState !== 'loading') {
@@ -81,7 +102,7 @@
           'CountryCode',
           'Population'
         ],
-
+        maxResults: 5,
         propToMapAsValue: 'Name'
       };
 
diff --git a/src/js/vanilla/kompleter.js b/src/js/vanilla/kompleter.js
index 9981725..4e74cf1 100644
--- a/src/js/vanilla/kompleter.js
+++ b/src/js/vanilla/kompleter.js
@@ -1049,7 +1049,7 @@
         let html = '';
 
         if(kompleter.props.dataSet && kompleter.props.dataSet.length) {
-          for(let i = 0; i < kompleter.props.dataSet.length && i <= kompleter.options.maxResults; i++) {
+          for(let i = 0; i < kompleter.props.dataSet.length && i <= kompleter.options.maxResults - 1; i++) {
             if(typeof kompleter.props.dataSet[i] !== 'undefined') {
               html += `<div id="${i}" class="item--result ${i + 1 === kompleter.props.dataSet.length ? 'last' : ''}">`;
               switch (typeof kompleter.props.dataSet[i]) {
@@ -1118,7 +1118,7 @@
         kompleter.htmlElements.result = kompleter.utils.build('div', [ { id: 'kpl-result' }, { class: 'form--search__result' } ]);
 
         kompleter.htmlElements.wrapper = kompleter.htmlElements.input.parentElement;
-        kompleter.htmlElements.wrapper.setAttribute('class', 'kompleter');
+        kompleter.htmlElements.wrapper.setAttribute('class', `${kompleter.htmlElements.wrapper.getAttribute('class')} kompletr`);
         kompleter.htmlElements.wrapper.appendChild(kompleter.htmlElements.result);
 
         // 4. Listeners
diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss
index 04ec8c1..18519b6 100755
--- a/src/sass/_variables.scss
+++ b/src/sass/_variables.scss
@@ -1,19 +1,22 @@
-// Completer inputs variables
-$color_0: #333;
-$color_1: #dfdfdf;
-$color_2: #fff;
-$color_3: #f2f2f2;
-$color_4: #637c8e;
-$color_5: #c0c0c0;
-$color_10: #435A6B;
-$color_11: #BBBE64;
-$color_12: #e2e2e2;
+@import url('https://fonts.googleapis.com/css?family=Open+Sans');
+@import url('https://fonts.googleapis.com/css?family=Thasadith');
 
-// Demo inputs variables
-$color_6: lighten(#1e1e1e, 5%);
-$color_7: #89867E;
-$color_8: #666;
-$color_9: #777;
+////
+/// Colors variables
+////
+ 
+$color-1: #ffffff;
+$color-2: #c0c0c0;
+$color-3: #dfdfdf;
+$color-4: #777;
+$color-5: #666;
+$color-6: #333;
 
-$font-base: 'Open Sans', Helvetica, Geneva, Tahoma, sans-serif;
-$font-alt: 'Montserrat', Helvetica, Geneva, Tahoma, sans-serif;
\ No newline at end of file
+////
+/// Fonts variables
+////
+ 
+$font-title: 'Thasadith', sans-serif;
+$font-base: 'Open Sans', sans-serif;
+
+$font-size-base: 14px;
\ No newline at end of file
diff --git a/src/sass/kompleter.scss b/src/sass/kompleter.scss
index b24fe2e..607bebc 100755
--- a/src/sass/kompleter.scss
+++ b/src/sass/kompleter.scss
@@ -1,16 +1,66 @@
-@import url('https://fonts.googleapis.com/css?family=Thasadith');
+
 @import 'mixins';
 @import 'variables';
 
-/* Module code */
+/* Demo code */
 
-.kompleter {
-  .form--search {
-    margin: 0;
-    padding: 0;
+html {
+  font-size: $font-size-base;
+}
+
+.github-corner {
+  border-bottom: 0;
+  position: fixed;
+  right: 0;
+  text-decoration: none;
+  top: 0;
+  z-index: 1;
+  & svg {
+    color: #fff;
+    fill: #333;
+    fill: var(--theme-color, #333);
+    height: 80px;
+    width: 80px;
   }
-  
-  .form--light-search {
+}
+
+body {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  font-family: $font-base;
+  background: rgb(2,0,36);
+  background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(133,255,189,1) 50%, rgba(255,251,125,1) 100%);
+}
+
+hgroup {
+  text-align: center;
+  margin: 0 auto 40px auto;
+}
+
+h1 {
+  font-family: $font-title;
+  font-size: 7rem;
+  margin: 3rem auto 0 auto;
+}
+
+a {
+  color: #333;
+}
+
+footer {
+  color: #333;
+  text-align: center;
+  margin-top: auto;
+}
+////
+// Module code
+////
+
+.kompletr {
+
+  &.form--search {
     width: 30%;
     position: relative;
     margin: 0 auto;
@@ -27,18 +77,18 @@
   
   .input--search {
     display: block;
+    box-sizing: border-box;
+    margin: 0 auto;
+    padding: 15px 10px;
     width: 100%;
     min-width: 240px;
     max-width: 600px;
     height: auto;
-    font-size: 1.5rem;
+    font-size: 1.2rem;
     line-height: 1.5;
-    color: $color_9;
-    padding: 15px 10px;
+    color: $color-4;
     border: none;
-    background: $color_2;
-    margin: 0 auto;
-    box-sizing: border-box;
+    background: $color-1;
     &:focus {
       border: none;
       outline: none;
@@ -46,7 +96,7 @@
   }
   
   ::placeholder {
-    color: $color_5;
+    color: $color-2;
   }
   
   .form--search__result {
@@ -57,35 +107,41 @@
   
   /* Block one item result */
   .item--result {
+    box-sizing: border-box;
     width: 100%;
-    background: $color_2;
-    border-bottom: 1px dashed $color_1;
+    padding: 15px;
+    backdrop-filter: blur(16px) saturate(180%);
+    -webkit-backdrop-filter: blur(16px) saturate(180%);
+    background-color: rgba(255, 255, 255, 0.75);
+    border-bottom: 1px dashed $color-3;
     border-left: none;
     border-right: none;
-    padding: 15px;
-    color: $color_0;
-    box-sizing: border-box;
+    color: $color-6;
+
     &.last, &:last-child {
       border-bottom: none;
     }
+
     &:hover, &.focus {
       cursor: pointer;
-      color: $color_8;
-      background: $color_11;
+      backdrop-filter: blur(26px) saturate(120%);
+      -webkit-backdrop-filter: blur(26px) saturate(120%);
+      background-color: rgba(255, 255, 255, 0.50);
+      color: $color-5;
       @include transition(0.2s ease-in-out);
       & .data-1, & .data-2 {
-        color: $color_3;
+        color: $color-5;
       }
     }
     & .data-0  {
       float: left;
-      color: $color_8;
+      color: $color-5;
       margin: 0 0 3px 0;
       font-weight: 600;
     }
     & .data-1, & .data-2 {
       display: block;
-      color: $color_5;
+      color: $color-2;
       font-weight: normal;
     }
     & .data-1 {
