aboutsummaryrefslogtreecommitdiff
path: root/dist
diff options
context:
space:
mode:
Diffstat (limited to 'dist')
-rw-r--r--dist/css/win98.css268
-rw-r--r--dist/css/win98.min.css1
-rw-r--r--dist/js/win98.js74
-rw-r--r--dist/js/win98.min.js1
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
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-06 01:24:42 +0000