Add files via upload0.1.0

4 files changed, 344 insertions, 0 deletions

diff --git a/dist/css/win98.css b/dist/css/win98.css
new file mode 100644
index 0000000..7e010df
--- /dev/null
+++ b/dist/css/win98.css
@@ -0,0 +1,268 @@
+body {
+    padding: 50px;
+    margin: 0px;
+    font-family: "MS Sans Serif", "Segoe UI", sans-serif;
+}
+
+/* Alertbox */
+
+.alertbox {
+    width: 600px;
+    padding-left: 1px;
+    padding-top: 1px;
+    border-left: solid 1px #C0C0C0;
+    border-top: solid 1px #C0C0C0;
+    border-bottom: solid 3px #555555;
+    border-right: solid 3px #555555;
+}
+.alertbox-header {
+    background-color: #092080;
+    color: white;
+    font-size: 14px;
+    padding: 5px;
+    font-weight: bolder;
+}
+.alertbox-body {
+    background-color: #C0C0C0;
+    padding: 50px 20px;
+    font-size: 14px;
+}
+
+/* Buttons */
+
+.btn {
+    background-color: #C0C0C0;
+    padding: 5px 5px;
+    font-size: 14px;
+    border-left: solid 1px black;
+    border-top: solid 1px black;
+    border-right: solid 3px black;
+    border-bottom: solid 3px black;
+    color: black;
+    border-radius: 2px;
+}
+.btn-alertbox {
+    display: block;
+    margin: 20px auto 0px auto;
+}
+.btn-alertbox span {
+    border: 1px dotted black;
+    padding: 2px 25px;
+}
+.btn-alertbox:focus {
+    outline: none;
+    color: black;
+    background-color: #979797;
+}
+.btn-alertbox:active {
+    outline: none;
+    color: black;
+    background-color: #b4b4b4;
+}
+.btn span {
+    border: 1px dotted black;
+    padding: 2px 25px;
+}
+.btn-primary:active {
+    background-color: #b4b4b4;
+}
+.btn-secondary {
+    background-color: #167AF6;
+    color: white;
+}
+.btn-secondary:active {
+    background-color: #0F69D9;
+    color: white;
+}
+.btn-danger {
+    background-color: #DC3545;
+    color: white;
+}
+.btn-danger:active {
+    background-color: #b82c3a;
+    color: white;
+}
+.btn-success {
+    background-color: #4CA846;
+    color: white;
+}
+.btn-success:active {
+    background-color: #327a2d;
+    color: white;
+}
+.btn-warning {
+    background-color: #F8C246;
+    color: black;
+}
+.btn-warning:active {
+    background-color: rgb(190, 150, 55);
+    color: white;
+}
+.btn-info {
+    background-color: #42A3B8;
+    color: white;
+}
+.btn-info:active {
+    background-color: rgb(54, 138, 156);
+    color: white;
+}
+.btn-outline {
+    background-color: transparent;
+}
+.btn-outline:hover {
+    background-color: #C0C0C0;
+}
+
+/* Card */
+
+.card {
+    width: 300px;
+    padding-left: 1px;
+    padding-top: 1px;
+    border-left: solid 1px #C0C0C0;
+    border-top: solid 1px #C0C0C0;
+    border-bottom: solid 3px #555555;
+    border-right: solid 3px #555555;
+}
+.card-image {
+    width: 100%;
+    height: 200px;
+    margin-bottom: -4px;
+}
+.card-body {
+    /* margin-top: -26px; */
+    padding: 20px 20px 20px 20px;
+    background-color: #c0c0c0;
+}
+.card-title {
+    font-size: 22px;
+    line-height: 18px;
+    margin-top: 10px;
+}
+.card-text {
+    font-size: 14px;
+    margin-top: -15px;
+    margin-bottom: 15px;
+}
+.card-subtitle {
+    font-size: 18px;
+    font-weight: 700;
+    margin-top: -10px;
+}
+.card-header {
+    font-size: 18px;
+    color: white;
+    background-color: #092080;
+    padding: 10px 5px;
+    font-weight: bold;
+}
+
+
+/* List group */
+
+.list-group {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    background-color: #C0C0C0;
+}
+.list-group-item {
+    padding: 10px 5px;
+    border-bottom: solid 1px black;
+}
+
+
+/* Blockquote */
+
+.blockquote-footer {
+    color: #464646
+}
+
+
+/* Forms */
+
+.form-control {
+    font-size: 14px;
+    padding: 5px 10px;
+    width: 600px;
+    outline: none;
+    border-left: solid 1px #C0C0C0;
+    border-top: solid 1px #C0C0C0;
+    border-bottom: solid 3px #555555;
+    border-right: solid 3px #555555;
+}
+
+
+.form-select {
+    position: relative;
+    font-family: Arial;
+    width: 620px;
+    padding-left: 1px;
+    padding-top: 1px;
+    border-left: solid 1px #C0C0C0;
+    border-top: solid 1px #C0C0C0;
+    border-bottom: solid 3px #555555;
+    border-right: solid 3px #555555;
+  }
+  
+  .form-select select {
+    display: none; /*hide original SELECT element: */
+  }
+  
+  .select-selected {
+    background-color: #082081;
+  }
+  
+  /* Style the arrow inside the select element: */
+  .select-selected:after {
+    position: absolute;
+    content: "";
+    top: 14px;
+    right: 10px;
+    width: 0;
+    height: 0;
+    border: 6px dotted transparent;
+    border-color: #fff transparent transparent transparent;
+  }
+  
+  /* Point the arrow upwards when the select box is open (active): */
+  .select-selected.select-arrow-active:after {
+    border-color: transparent transparent #fff transparent;
+    top: 7px;
+  }
+  
+  /* style the items (options), including the selected item: */
+  .select-items div {
+    color: #000000;
+    padding: 8px 16px;
+    border: 1px dotted transparent;
+    border-color: white;
+    cursor: pointer;
+  }
+  
+  .select-selected {
+    color: #fff;
+    padding: 8px 16px;
+    cursor: pointer;
+  }
+  
+  /* Style items (options): */
+  .select-items {
+    position: absolute;
+    background-color: white;
+    top: 100%;
+    left: 0;
+    right: 0;
+    z-index: 99;
+    color: black;
+  }
+  
+  /* Hide the items when the select box is closed: */
+  .select-hide {
+    display: none;
+  }
+  
+  .select-items div:hover, .same-as-selected {
+    background-color: #082081;
+    color: white;
+  }
\ No newline at end of file
diff --git a/dist/css/win98.min.css b/dist/css/win98.min.css
new file mode 100644
index 0000000..2e7d338
--- /dev/null
+++ b/dist/css/win98.min.css
@@ -0,0 +1 @@
+.btn-alertbox:active,.btn-alertbox:focus{outline:0;color:#000}body{padding:50px;margin:0;font-family:"MS Sans Serif","Segoe UI",sans-serif}.alertbox{width:600px;padding-left:1px;padding-top:1px;border-left:solid 1px silver;border-top:solid 1px silver;border-bottom:solid 3px #555;border-right:solid 3px #555}.alertbox-header{background-color:#092080;color:#fff;font-size:14px;padding:5px;font-weight:bolder}.alertbox-body,.btn{background-color:silver;font-size:14px}.alertbox-body{padding:50px 20px}.btn{padding:5px;border-left:solid 1px #000;border-top:solid 1px #000;border-right:solid 3px #000;border-bottom:solid 3px #000;color:#000;border-radius:2px}.btn span,.btn-alertbox span{border:1px dotted #000;padding:2px 25px}.btn-alertbox{display:block;margin:20px auto 0}.form-select select,.select-hide{display:none}.btn-alertbox:focus{background-color:#979797}.btn-alertbox:active,.btn-primary:active{background-color:#b4b4b4}.btn-secondary{background-color:#167AF6;color:#fff}.btn-secondary:active{background-color:#0F69D9;color:#fff}.btn-danger{background-color:#DC3545;color:#fff}.btn-danger:active{background-color:#b82c3a;color:#fff}.btn-success{background-color:#4CA846;color:#fff}.btn-success:active{background-color:#327a2d;color:#fff}.btn-warning{background-color:#F8C246;color:#000}.btn-warning:active{background-color:#be9637;color:#fff}.btn-info{background-color:#42A3B8;color:#fff}.btn-info:active{background-color:#368a9c;color:#fff}.btn-outline{background-color:transparent}.btn-outline:hover,.card-body{background-color:silver}.card{width:300px;padding-left:1px;padding-top:1px;border-left:solid 1px silver;border-top:solid 1px silver;border-bottom:solid 3px #555;border-right:solid 3px #555}.card-image{width:100%;height:200px;margin-bottom:-4px}.card-body{padding:20px}.card-title{font-size:22px;line-height:18px;margin-top:10px}.card-text{font-size:14px;margin-top:-15px;margin-bottom:15px}.card-header,.card-subtitle{font-size:18px;font-weight:700}.card-subtitle{margin-top:-10px}.card-header{color:#fff;background-color:#092080;padding:10px 5px}.list-group{list-style-type:none;margin:0;padding:0;background-color:silver}.list-group-item{padding:10px 5px;border-bottom:solid 1px #000}.form-control,.form-select{border-left:solid 1px silver;border-top:solid 1px silver;border-bottom:solid 3px #555;border-right:solid 3px #555}.blockquote-footer{color:#464646}.form-control{font-size:14px;padding:5px 10px;width:600px;outline:0}.form-select{position:relative;font-family:Arial;width:620px;padding-left:1px;padding-top:1px}.select-selected:after{position:absolute;content:"";top:14px;right:10px;width:0;height:0;border:6px dotted transparent;border-color:#fff transparent transparent}.select-selected.select-arrow-active:after{border-color:transparent transparent #fff;top:7px}.select-items div{color:#000;padding:8px 16px;border:1px dotted #fff;cursor:pointer}.select-selected{background-color:#082081;color:#fff;padding:8px 16px;cursor:pointer}.select-items{position:absolute;background-color:#fff;top:100%;left:0;right:0;z-index:99;color:#000}.same-as-selected,.select-items div:hover{background-color:#082081;color:#fff}
\ No newline at end of file
diff --git a/dist/js/win98.js b/dist/js/win98.js
new file mode 100644
index 0000000..5664804
--- /dev/null
+++ b/dist/js/win98.js
@@ -0,0 +1,74 @@
+var x, i, j, selElmnt, a, b, c;
+/* Look for any elements with the class "form-select": */
+x = document.getElementsByClassName("form-select");
+for (i = 0; i < x.length; i++) {
+  selElmnt = x[i].getElementsByTagName("select")[0];
+  /* For each element, create a new DIV that will act as the selected item: */
+  a = document.createElement("DIV");
+  a.setAttribute("class", "select-selected");
+  a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
+  x[i].appendChild(a);
+  /* For each element, create a new DIV that will contain the option list: */
+  b = document.createElement("DIV");
+  b.setAttribute("class", "select-items select-hide");
+  for (j = 1; j < selElmnt.length; j++) {
+    /* For each option in the original select element,
+    create a new DIV that will act as an option item: */
+    c = document.createElement("DIV");
+    c.innerHTML = selElmnt.options[j].innerHTML;
+    c.addEventListener("click", function(e) {
+        /* When an item is clicked, update the original select box,
+        and the selected item: */
+        var y, i, k, s, h;
+        s = this.parentNode.parentNode.getElementsByTagName("select")[0];
+        h = this.parentNode.previousSibling;
+        for (i = 0; i < s.length; i++) {
+          if (s.options[i].innerHTML == this.innerHTML) {
+            s.selectedIndex = i;
+            h.innerHTML = this.innerHTML;
+            y = this.parentNode.getElementsByClassName("same-as-selected");
+            for (k = 0; k < y.length; k++) {
+              y[k].removeAttribute("class");
+            }
+            this.setAttribute("class", "same-as-selected");
+            break;
+          }
+        }
+        h.click();
+    });
+    b.appendChild(c);
+  }
+  x[i].appendChild(b);
+  a.addEventListener("click", function(e) {
+    /* When the select box is clicked, close any other select boxes,
+    and open/close the current select box: */
+    e.stopPropagation();
+    closeAllSelect(this);
+    this.nextSibling.classList.toggle("select-hide");
+    this.classList.toggle("select-arrow-active");
+  });
+}
+
+function closeAllSelect(elmnt) {
+  /* A function that will close all select boxes in the document,
+  except the current select box: */
+  var x, y, i, arrNo = [];
+  x = document.getElementsByClassName("select-items");
+  y = document.getElementsByClassName("select-selected");
+  for (i = 0; i < y.length; i++) {
+    if (elmnt == y[i]) {
+      arrNo.push(i)
+    } else {
+      y[i].classList.remove("select-arrow-active");
+    }
+  }
+  for (i = 0; i < x.length; i++) {
+    if (arrNo.indexOf(i)) {
+      x[i].classList.add("select-hide");
+    }
+  }
+}
+
+/* If the user clicks anywhere outside the select box,
+then close all select boxes: */
+document.addEventListener("click", closeAllSelect);
\ No newline at end of file
diff --git a/dist/js/win98.min.js b/dist/js/win98.min.js
new file mode 100644
index 0000000..1d11d8d
--- /dev/null
+++ b/dist/js/win98.min.js
@@ -0,0 +1 @@
+var x,i,j,selElmnt,a,b,c;for(x=document.getElementsByClassName("form-select"),i=0;i<x.length;i++){for(selElmnt=x[i].getElementsByTagName("select")[0],(a=document.createElement("DIV")).setAttribute("class","select-selected"),a.innerHTML=selElmnt.options[selElmnt.selectedIndex].innerHTML,x[i].appendChild(a),(b=document.createElement("DIV")).setAttribute("class","select-items select-hide"),j=1;j<selElmnt.length;j++)(c=document.createElement("DIV")).innerHTML=selElmnt.options[j].innerHTML,c.addEventListener("click",function(e){var t,s,l,n,i;for(n=this.parentNode.parentNode.getElementsByTagName("select")[0],i=this.parentNode.previousSibling,s=0;s<n.length;s++)if(n.options[s].innerHTML==this.innerHTML){for(n.selectedIndex=s,i.innerHTML=this.innerHTML,t=this.parentNode.getElementsByClassName("same-as-selected"),l=0;l<t.length;l++)t[l].removeAttribute("class");this.setAttribute("class","same-as-selected");break}i.click()}),b.appendChild(c);x[i].appendChild(b),a.addEventListener("click",function(e){e.stopPropagation(),closeAllSelect(this),this.nextSibling.classList.toggle("select-hide"),this.classList.toggle("select-arrow-active")})}function closeAllSelect(e){var t,s,l,n=[];for(t=document.getElementsByClassName("select-items"),s=document.getElementsByClassName("select-selected"),l=0;l<s.length;l++)e==s[l]?n.push(l):s[l].classList.remove("select-arrow-active");for(l=0;l<t.length;l++)n.indexOf(l)&&t[l].classList.add("select-hide")}document.addEventListener("click",closeAllSelect);
\ No newline at end of file