Initial mirror from https://github.com/siddhartha77/os9.git

This repository was automatically mirrored.

README.md

@@ -0,0 +1,19 @@
+![Notice, this repository was mirrored to here from Github](https://m1s5.c20.e2-5.dev/files/images/mirror-notice.svg)
+
+# OS 9
+A retro website framework in the theme of Mac OS 9.
+
+# External Libraries
+- [jQuery](https://jquery.com/)
+- [jQueryUI](https://jqueryui.com/)
+- [jQueryUI Touch Punch](https://github.com/furf/jquery-ui-touch-punch)
+- [jQuery Ajax Progress](https://github.com/englercj/jquery-ajax-progress)
+- [jScrollPane](http://jscrollpane.kelvinluck.com/)
+
+# Customizing
+You'll be mostly using [json/desktopdb.json](json/desktopdb.json) to do your customizing. That file has all the examples you need. The desktop is comprised of figures. Each figure can be a disk, folder, document, picture, download, etc. Figures can also call actions defined in [js/actions.js](js/actions.js). Individual alerts are specified in [js/alerts.js](js/alerts.js). There are also a couple settings in [js/settings.js](js/settings.js).
+
+The desktop is made up of columns. You can specify if you want the figure on the left of the desktop by setting "position": "left-nn". The far left would be "left-01". Don't set any position for your figure to be on the right of the desktop.
+
+# Licence
+Do whatever you want with this code. Just be cool about it.

alert.access-denied.html

@@ -0,0 +1,11 @@
+<div class="access-denied alert note">
+    <div class="body">
+        <div class="content">
+            <div class="icon"></div>
+            <div class="text">Access to this resource is denied.</div>
+        </div>
+        <div class="buttons">
+            <button data-action="ok" class="default">OK</button>
+        </div>
+    </div>
+</div>

alert.bad-alias.html

@@ -0,0 +1,11 @@
+<div class="bad-alias alert stop">
+    <div class="body">
+        <div class="content">
+            <div class="icon"></div>
+            <div class="text">The alias "{0}" could not be opened, because the original item cannot be found.</div>
+        </div>
+        <div class="buttons">
+            <button data-action="ok" class="default">OK</button>
+        </div>
+    </div>
+</div>

alert.shutdown.html

@@ -0,0 +1,14 @@
+<div class="shutdown alert caution">
+    <div class="body">
+        <div class="content">
+            <div class="icon"></div>
+            <div class="text">Are you sure you want to shut down your computer now?</div>
+        </div>
+        <div class="buttons">
+            <button data-action="restart">Restart</button>
+            <button data-action="sleep">Sleep</button>
+            <button data-action="cancel">Cancel</button>
+            <button data-action="shutdown" class="default">Shut Down</button>
+        </div>
+    </div>
+</div>

css/alert.css

@@ -0,0 +1,57 @@
+.alert {
+    z-index: 999;
+    position: absolute;
+    top: 85px;
+    left: 50%;
+    margin-right: -50%;
+    transform: translate(-50%, 100%);
+    width: 360px;
+    font-size: 12px;
+    font-family: 'Charcoal';
+    min-height: 66px;
+    padding: 16px 16px 16px 26px;
+    border: 1px solid #111;
+    background: #dedade;
+    box-shadow: 1px 2px #111, inset 1px 1px #ff9999, inset -1px -1px #ff6162, inset 2px 2px #fff, inset -2px -2px #999;
+}
+
+.alert .body {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.alert .icon {
+    padding: 16px;
+    margin-right: 25px;
+}
+
+.alert.caution .icon {
+    background-image: url("../img/ui/icons-large/alert-caution.png");
+    background-repeat: no-repeat;
+}
+
+.alert.note .icon {
+    background-image: url("../img/ui/icons-large/alert-note.png");
+    background-repeat: no-repeat;
+}
+
+.alert.stop .icon {
+    background-image: url("../img/ui/icons-large/alert-stop.png");
+    background-repeat: no-repeat;
+}
+
+.alert .content {
+    display: flex;
+}
+
+.alert .buttons {
+    display: flex;
+    width: 100%;
+    justify-content: flex-end;
+    gap: 10px;
+    margin-top: 15px;
+}
+
+.shutdown.alert button {
+    width: 82px;
+}

css/alert.min.css

@@ -0,0 +1 @@
+.alert{z-index:999;position:absolute;top:85px;left:50%;margin-right:-50%;transform:translate(-50%,100%);width:360px;font-size:12px;font-family:'Charcoal';min-height:66px;padding:16px 16px 16px 26px;border:1px solid #111;background:#dedade;box-shadow:1px 2px #111,inset 1px 1px #f99,inset -1px -1px #ff6162,inset 2px 2px #fff,inset -2px -2px #999}.alert .body{display:flex;flex-wrap:wrap}.alert .icon{padding:16px;margin-right:25px}.alert.caution .icon{background-image:url("../img/ui/icons-large/alert-caution.png");background-repeat:no-repeat}.alert.note .icon{background-image:url("../img/ui/icons-large/alert-note.png");background-repeat:no-repeat}.alert.stop .icon{background-image:url("../img/ui/icons-large/alert-stop.png");background-repeat:no-repeat}.alert .content{display:flex}.alert .buttons{display:flex;width:100%;justify-content:flex-end;gap:10px;margin-top:15px}.shutdown.alert button{width:82px}

css/base.css

@@ -0,0 +1,76 @@
+@import "menubar.min.css";
+@import "desktop.min.css";
+@import "icon.min.css";
+@import "alert.min.css";
+@import "startup.min.css";
+@import "window.min.css";
+@import "window.about.min.css";
+@import "window.info.min.css";
+@import "window.download.min.css";
+@import "window.pictureviewer.min.css";
+@import "window.simpletext.min.css";
+@import "progressbar.min.css";
+@import "button.min.css";
+
+@font-face {
+    font-family: 'Charcoal';
+    src: url('../font/Charcoal.ttf') format('truetype');
+}
+
+* {
+    cursor: url('../cur/arrow.cur'), auto;
+}
+
+.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;}
+.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
+.ui-resizable-se { width: 20px; height: 20px; right: 0; bottom: 0; }
+
+html, body {
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    font-size: 12px;
+    font-weight: normal;
+    height: 100%;
+    margin: 0;
+    image-rendering: pixelated;
+    background-color: #000;
+}
+
+a {
+    color: #000;
+}
+
+:focus {
+    outline: none;
+}
+
+::-moz-focus-inner {
+    border: 0;
+}
+
+.app {
+    height: 100%;
+}
+
+.flex-rows {
+    display: flex;
+    flex-direction: row;
+}
+
+.flex-cols {
+    display: flex;
+    flex-direction: column;
+}
+
+.spacer {
+    flex-grow: 1;
+}
+
+.ui-effects-transfer {
+    z-index: 997;
+    border: 1px dotted black;
+}
+
+.sleep {
+    background: #000;
+}

css/base.min.css

@@ -0,0 +1 @@
+@import "menubar.min.css";@import "desktop.min.css";@import "icon.min.css";@import "alert.min.css";@import "startup.min.css";@import "window.min.css";@import "window.about.min.css";@import "window.info.min.css";@import "window.download.min.css";@import "window.pictureviewer.min.css";@import "window.simpletext.min.css";@import "progressbar.min.css";@import "button.min.css";@font-face{font-family:'Charcoal';src:url('../font/Charcoal.ttf') format('truetype')}*{cursor:url('../cur/arrow.cur'),auto}.ui-resizable-handle{position:absolute;font-size:.1px;z-index:99999;display:block}.ui-resizable-disabled .ui-resizable-handle,.ui-resizable-autohide .ui-resizable-handle{display:none}.ui-resizable-se{width:20px;height:20px;right:0;bottom:0}html,body{-moz-user-select:none;-webkit-user-select:none;font-size:12px;font-weight:normal;height:100%;margin:0;image-rendering:pixelated;background-color:#000}a{color:#000}:focus{outline:0}::-moz-focus-inner{border:0}.app{height:100%}.flex-rows{display:flex;flex-direction:row}.flex-cols{display:flex;flex-direction:column}.spacer{flex-grow:1}.ui-effects-transfer{z-index:997;border:1px dotted black}.sleep{background:#000}

css/button.css

@@ -0,0 +1,46 @@
+:root {
+    --button-box-shadow: inset -1px -1px #777,
+    inset -2px -2px #aaa,
+    inset 1px 1px #ddd,
+    inset 2px 2px #fff;
+    --button-default: 0 0 0 1px #aaa,
+    0 0 0 2px #ddd,
+    0 0 0 3px #000;
+}
+
+button {
+    font-size: 12px;
+    font-family: 'Charcoal';
+    height: 20px;
+    background: #dedede;
+    /*margin-bottom: 7px;
+    margin-left: 14px;*/
+    border-radius: 3px;
+    border: 1px solid #000;
+    box-shadow: var(--button-box-shadow);
+    min-width: 58px;
+}
+
+button.default {
+    box-shadow: var(--button-box-shadow), var(--button-default);
+}
+
+button:active {
+    color: #fff;
+    background: #666;
+}
+
+button:not(.default):active {
+    box-shadow: inset -1px -1px #888,
+    inset -2px -2px #777,
+    inset 1px 1px #444,
+    inset 2px 2px #555;
+}
+
+button.default:active {
+    box-shadow: var(--button-default),
+    inset -1px -1px #888,
+    inset -2px -2px #777,
+    inset 1px 1px #444,
+    inset 2px 2px #555;
+}

css/button.min.css

@@ -0,0 +1 @@
+:root{--button-box-shadow:inset -1px -1px #777,inset -2px -2px #aaa,inset 1px 1px #ddd,inset 2px 2px #fff;--button-default:0 0 0 1px #aaa,0 0 0 2px #ddd,0 0 0 3px #000}button{font-size:12px;font-family:'Charcoal';height:20px;background:#dedede;border-radius:3px;border:1px solid #000;box-shadow:var(--button-box-shadow);min-width:58px}button.default{box-shadow:var(--button-box-shadow),var(--button-default)}button:active{color:#fff;background:#666}button:not(.default):active{box-shadow:inset -1px -1px #888,inset -2px -2px #777,inset 1px 1px #444,inset 2px 2px #555}button.default:active{box-shadow:var(--button-default),inset -1px -1px #888,inset -2px -2px #777,inset 1px 1px #444,inset 2px 2px #555}

css/desktop.css

@@ -0,0 +1,35 @@
+.desktop {
+    background-image: url("../img/ui/patterns/mac.png");
+    background-repeat: repeat;
+    flex-grow: 1;
+}
+
+.desktop div[class^="desktop-left"] {
+    margin-left: 25px;
+    display: flex;
+    flex-direction: column;
+}
+
+.desktop .desktop-right {
+    display: flex;
+    flex-direction: column;
+}
+
+.sleep.active {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1000;
+    opacity: 1;
+}
+
+.modal {
+    position: absolute;
+    z-index: 998;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}

css/desktop.min.css

@@ -0,0 +1 @@
+.desktop{background-image:url("../img/ui/patterns/mac.png");background-repeat:repeat;flex-grow:1}.desktop div[class^="desktop-left"]{margin-left:25px;display:flex;flex-direction:column}.desktop .desktop-right{display:flex;flex-direction:column}.sleep.active{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1000;opacity:1}.modal{position:absolute;z-index:998;top:0;left:0;width:100%;height:100%}

css/icon.css

@@ -0,0 +1,40 @@
+figure {
+    display: table;
+    text-align: center;
+    width: 75px;
+    margin: 10px auto;
+    /* Disable double tap zooming */
+    touch-action: manipulation;
+}
+
+figure:focus-within a img, figure.focus a img {
+    filter: brightness(40%);
+}
+
+figure:focus-within figcaption .label, figure.focus figcaption .label {
+    background: #000;
+    color: #fff;
+}
+
+figcaption {
+    font-family: "Arial";
+    font-size: 10.5px;
+    text-align: center;
+    letter-spacing: 0.4px;
+}
+
+figcaption .label {
+    display: inline-block;
+    max-width: 31em;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    background: rgba(255, 255, 255, 0.5);
+    padding: 1px 2px 1px 2px;
+    margin-top: -4px;
+    text-align: center;
+}
+
+figcaption .label.alias {
+    font-style: italic;
+}

css/icon.min.css

@@ -0,0 +1 @@
+figure{display:table;text-align:center;width:75px;margin:10px auto;touch-action:manipulation}figure:focus-within a img,figure.focus a img{filter:brightness(40%)}figure:focus-within figcaption .label,figure.focus figcaption .label{background:#000;color:#fff}figcaption{font-family:"Arial";font-size:10.5px;text-align:center;letter-spacing:.4px}figcaption .label{display:inline-block;max-width:31em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:rgba(255,255,255,0.5);padding:1px 2px 1px 2px;margin-top:-4px;text-align:center}figcaption .label.alias{font-style:italic}

css/jquery.jscrollpane.css

@@ -0,0 +1,193 @@
+.jspContainer {
+    overflow: hidden;
+    position: relative;
+}
+
+.jspPane {
+    position: absolute;
+}
+
+.jspVerticalBar {
+    background: #f3f3f3;
+    height: 100%;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 14px;
+    border-left: 1px solid #000;
+}
+
+.jspHorizontalBar {
+    background: #f3f3f3;
+    bottom: 0;
+    height: 14px;
+    left: 0;
+    position: absolute;
+    width: 100%;
+    border-top: 1px solid #000;
+}
+
+.jspCap {
+    display: none;
+}
+
+.jspHorizontalBar .jspCap {
+    float: left;
+}
+
+.jspAllInView .jspTrack {
+    background: #eee;
+    box-shadow: none;
+}
+
+.jspAllInView .jspDrag {
+    display: none !important;
+}
+
+.jspAllInView .jspArrow {
+    background-color: #eee;
+    box-shadow: none;
+}
+
+.jspAllInView .jspArrowUp {
+    background-image: url("../img/ui/widgets/scrollbar-arrow-up-disabled.png");
+    border-top: 1px solid #525252;
+}
+
+.jspAllInView .jspArrowRight {
+    background-image: url("../img/ui/widgets/scrollbar-arrow-right-disabled.png");
+    border-left: 1px solid #8b8b8b;
+    border-right: 1px solid #000;
+}
+
+.jspAllInView .jspArrowDown {
+    background-image: url("../img/ui/widgets/scrollbar-arrow-down-disabled.png");
+    border-top: 1px solid #8b8b8b;
+}
+
+.jspAllInView .jspArrowLeft {
+    background-image: url("../img/ui/widgets/scrollbar-arrow-left-disabled.png");
+    border-left: 1px solid #525252;
+}
+
+.jspTrack {
+    background: #acacac;
+    position: relative;
+    box-shadow: inset 1px 1px #737373,
+                inset 2px 2px #8b8b8b,
+                inset -1px -1px #cdcdcd,
+                inset -2px -2px #bdbdbd;
+}
+
+.jspTrack.disabled {
+    height: 100% !important;
+    width: 100% !important;
+    background: #eee;
+}
+
+.jspDrag {
+    background: #9c9cff;
+    left: 0;
+    position: relative;
+    top: 0;
+    box-shadow: inset 1px 1px #cdcdff,
+                inset -1px -1px #6262cd;
+}
+
+.jspDrag:active {
+    background-color: #6262cd;
+    box-shadow: inset 1px 1px #9c9cff,
+                inset -1px -1px #31319c;
+}
+
+.jspVerticalBar .jspDrag {
+    border-top: 1px solid #000;
+    border-bottom: 1px solid #000;
+    background-image: url("../img/ui/widgets/scroll-vertical-handle.png");
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.jspVerticalBar .jspDrag:active {
+    background-image: url("../img/ui/widgets/scroll-vertical-handle-active.png");
+}
+
+.jspHorizontalBar .jspDrag {
+    border-left: 1px solid #000;
+    border-right: 1px solid #000;
+    background-image: url("../img/ui/widgets/scroll-horizontal-handle.png");
+    background-position: center;
+    background-repeat: no-repeat;
+}
+.jspHorizontalBar .jspDrag:active {
+    background-image: url("../img/ui/widgets/scroll-horizontal-handle-active.png");
+}
+.jspHorizontalBar .jspTrack,
+.jspHorizontalBar .jspDrag {
+    float: left;
+    height: 100%;
+}
+
+.jspArrow {
+    display: block;
+    height: 14px;
+    width: 14px;
+    background-color: #dedede;
+    background-position: center;
+    background-repeat: no-repeat;
+    box-shadow: inset 1px 1px #fffaff,
+    inset -1px -1px #bdbdbd;
+}
+
+.jspArrow.jspActive {
+    background-color: #737373;
+    box-shadow: inset -1px -1px #9c9c9c,
+                inset 1px 1px #525252;
+}
+
+.jspArrowUp {
+    background-image: url("../img/ui/widgets/scrollbar-arrow-up.png");
+    border-top: 1px solid #000;
+}
+
+.jspArrowRight {
+    background-image: url("../img/ui/widgets/scrollbar-arrow-right.png");
+    border-left: 1px solid #000;
+    border-right: 1px solid #000;
+}
+
+.jspArrowDown {
+    background-image: url("../img/ui/widgets/scrollbar-arrow-down.png");
+    border-top: 1px solid #000;
+}
+
+.jspArrowLeft {
+    background-image: url("../img/ui/widgets/scrollbar-arrow-left.png");
+    border-left: 1px solid #000;
+}
+
+.jspDisabled {
+    /* When clicking arrow won't do anything */
+}
+
+.jspVerticalBar .jspArrow {
+    height: 14px;
+}
+
+.jspHorizontalBar .jspArrow {
+    float: left;
+    height: 100%;
+    width: 14px;
+}
+
+.jspVerticalBar .jspArrow:focus {
+}
+
+.jspCorner {
+    position: absolute;
+    width: 1px;
+    height: 14px;
+    right: 0;
+    bottom: 0;
+    border-left: 1px solid #000;
+}

css/menubar.css

@@ -0,0 +1,124 @@
+.menubar {
+    height: 19px;
+    font-size: 12px;
+    font-family: 'Charcoal';
+    background-color: #dedede;
+    box-shadow: inset -1px -1px #9c9c9c, inset 1px 1px #fff;
+    border-bottom: 1px solid #000;
+    image-rendering: pixelated;
+}
+
+.menubar .corner {
+    margin: -5px 0 0 0;
+}
+
+.menubar .active-application, .menubar .clock {
+    margin: 2px 7px 0 8px;
+}
+
+.menubar .active-application img {
+    vertical-align: middle;
+    margin-bottom: 2px;
+    margin-right: 5px;
+}
+
+.menu > .title {
+    padding: 1px 7px 0 8px;
+    /* Need a border so items don't move when they are active */
+    border-top: 1px solid #fff;
+}
+
+.menu > .title.icon {
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.menu-items > .icon {
+    background-origin: content-box;
+    background-repeat: no-repeat;
+    text-indent: 20px;
+}
+
+.menu > .title.active {
+    background-color: #31319c;
+    color: #fff;
+    border-top: 1px solid #6262cd;
+    border-bottom: 1px solid #00008b;
+}
+
+.menu .menu-items {
+    z-index: 100;
+    position: absolute;
+    white-space: nowrap;
+    background-color: #dedede;
+    border: 1px #000 solid;
+    box-shadow: 1px 1px #111, inset 1px 1px #fff, inset -1px -1px #999;
+}
+
+.submenu .title {
+    display: flex;
+    justify-content: space-between;
+    flex-grow: 1;
+}
+
+.submenu .arrow {
+    margin-right: -5px;
+}
+
+.menu-items > div {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 8px 0 20px;
+    color: #000;
+    /* Need a border so items don't move when they are active */
+    border-left: 1px solid #fff;
+    border-right: 1px solid #9c9c9c;
+}
+
+.menu-items .checked {
+    position: absolute;
+    left: 5px;
+    background-image: url("../img/ui/widgets/checkmark.png");
+    background-repeat: no-repeat;
+    background-position: center;
+
+}
+
+.menu-items img {
+    vertical-align: middle;
+    margin: 0 5px 0 0;
+}
+
+.menu-items > .active {
+    background-color: #31319c;
+    color: #fff;
+    border-left: 1px solid #6262cd;
+    border-right: 1px solid #00008b;
+}
+
+.menu-items .disabled {
+    color: #737373;
+}
+
+.menu-items .shortcut {
+    display: flex;
+    padding-left: 15px;
+}
+
+.menu-items .shortcut .symbol {
+    /* positions the Command character properly */
+    margin-top: 1px;
+    padding-right: 1px;
+    font-size: 10px;
+}
+
+.menu-items .shortcut .char {
+    width: 1em;
+    height: 1em;
+}
+
+.menu-items .separator {
+    height: 2px;
+    margin: 2px 0 1px 0;
+    box-shadow: inset 0 1px #999, inset 0 -1px #fff;
+}

css/menubar.min.css

@@ -0,0 +1 @@
+.menubar{height:19px;font-size:12px;font-family:'Charcoal';background-color:#dedede;box-shadow:inset -1px -1px #9c9c9c,inset 1px 1px #fff;border-bottom:1px solid #000;image-rendering:pixelated}.menubar .corner{margin:-5px 0 0 0}.menubar .active-application,.menubar .clock{margin:2px 7px 0 8px}.menubar .active-application img{vertical-align:middle;margin-bottom:2px;margin-right:5px}.menu>.title{padding:1px 7px 0 8px;border-top:1px solid #fff}.menu>.title.icon{background-position:center;background-repeat:no-repeat}.menu-items>.icon{background-origin:content-box;background-repeat:no-repeat;text-indent:20px}.menu>.title.active{background-color:#31319c;color:#fff;border-top:1px solid #6262cd;border-bottom:1px solid #00008b}.menu .menu-items{z-index:100;position:absolute;white-space:nowrap;background-color:#dedede;border:1px #000 solid;box-shadow:1px 1px #111,inset 1px 1px #fff,inset -1px -1px #999}.submenu .title{display:flex;justify-content:space-between;flex-grow:1}.submenu .arrow{margin-right:-5px}.menu-items>div{display:flex;justify-content:space-between;padding:0 8px 0 20px;color:#000;border-left:1px solid #fff;border-right:1px solid #9c9c9c}.menu-items .checked{position:absolute;left:5px;background-image:url("../img/ui/widgets/checkmark.png");background-repeat:no-repeat;background-position:center}.menu-items img{vertical-align:middle;margin:0 5px 0 0}.menu-items>.active{background-color:#31319c;color:#fff;border-left:1px solid #6262cd;border-right:1px solid #00008b}.menu-items .disabled{color:#737373}.menu-items .shortcut{display:flex;padding-left:15px}.menu-items .shortcut .symbol{margin-top:1px;padding-right:1px;font-size:10px}.menu-items .shortcut .char{width:1em;height:1em}.menu-items .separator{height:2px;margin:2px 0 1px 0;box-shadow:inset 0 1px #999,inset 0 -1px #fff}

css/progressbar.css

@@ -0,0 +1,35 @@
+.progress {
+    display: flex;
+    height: 10px;
+    width: 100%;
+    background-color: #bdbdbd;
+    border: 1px solid #000;
+    box-shadow: -1px -1px #acacac, 1px 1px #fff,
+                inset -1px -1px #dedede, inset 1px 1px #8b8b8b;
+}
+.progress .left {
+    width: 2px;
+    height: 10px;
+    background-image: url("../img/ui/widgets/progressbar-left.png");
+    background-repeat: no-repeat;
+    background-position: center;
+}
+.progress .middle {
+    height: 10px;
+    background-image: linear-gradient(#31319c 1px 1px, #6262cd 1px 2px, #9c9cff 1px 3px, #cdcdff 1px 4px, #eee 1px 5px, #cdcdff 1px 6px, #9c9cff 1px 7px, #6262cd 1px 8px, #31319c 1px 9px);
+}
+.progress .right {
+    display: inline-block;
+    width: 3px;
+    height: 10px;
+    background-image: url("../img/ui/widgets/progressbar-right.png");
+    background-repeat: no-repeat;
+    background-position: center;
+    border-right: 1px solid #000;
+    box-shadow: 1px 0 #525252, 2px 0 #8b8b8b;
+}
+
+.progress .right.done {
+    border: 0;
+    box-shadow: none;
+}

css/progressbar.min.css

@@ -0,0 +1 @@
+.progress{display:flex;height:10px;width:100%;background-color:#bdbdbd;border:1px solid #000;box-shadow:-1px -1px #acacac,1px 1px #fff,inset -1px -1px #dedede,inset 1px 1px #8b8b8b}.progress .left{width:2px;height:10px;background-image:url("../img/ui/widgets/progressbar-left.png");background-repeat:no-repeat;background-position:center}.progress .middle{height:10px;background-image:linear-gradient(#31319c 1px 1px,#6262cd 1px 2px,#9c9cff 1px 3px,#cdcdff 1px 4px,#eee 1px 5px,#cdcdff 1px 6px,#9c9cff 1px 7px,#6262cd 1px 8px,#31319c 1px 9px)}.progress .right{display:inline-block;width:3px;height:10px;background-image:url("../img/ui/widgets/progressbar-right.png");background-repeat:no-repeat;background-position:center;border-right:1px solid #000;box-shadow:1px 0 #525252,2px 0 #8b8b8b}.progress .right.done{border:0;box-shadow:none}

css/startup.css

@@ -0,0 +1,52 @@
+.startup {
+    background-image: url("../img/ui/patterns/mac.png");
+    background-repeat: repeat;
+    background-position: 0 20px;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: 99;
+}
+
+.startup-dialog {
+    width: 420px;
+    height: 321px;
+    background-color: #dedede;
+    border: 1px solid #000;
+    box-shadow: inset 1px 1px #fff, inset -1px -1px #acacac;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.startup-dialog .startup-logo {
+    width: 347px;
+    height: 220px;
+    position: absolute;
+    top: 26px;
+    left: 50%;
+    transform: translate(-50%, 0%);
+    border: 1px solid #000;
+    box-shadow: -1px -1px #acacac, 1px 1px #fff;
+    background-color: #fff;
+    background-image: url("../img/ui/startup-logo.png");
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.startup-dialog .startup-text {
+    font-family: 'Charcoal';
+    position: absolute;
+    top: 269px;
+    left: 50%;
+    transform: translate(-50%, 0%);
+}
+
+.startup-dialog .progress {
+    position: absolute;
+    top: 290px;
+    width: 158px;
+    left: 50%;
+    transform: translate(-50%, 0%);
+}

css/startup.min.css

@@ -0,0 +1 @@
+.startup{background-image:url("../img/ui/patterns/mac.png");background-repeat:repeat;background-position:0 20px;width:100%;height:100%;position:absolute;z-index:99}.startup-dialog{width:420px;height:321px;background-color:#dedede;border:1px solid #000;box-shadow:inset 1px 1px #fff,inset -1px -1px #acacac;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.startup-dialog .startup-logo{width:347px;height:220px;position:absolute;top:26px;left:50%;transform:translate(-50%,0);border:1px solid #000;box-shadow:-1px -1px #acacac,1px 1px #fff;background-color:#fff;background-image:url("../img/ui/startup-logo.png");background-position:center;background-repeat:no-repeat}.startup-dialog .startup-text{font-family:'Charcoal';position:absolute;top:269px;left:50%;transform:translate(-50%,0)}.startup-dialog .progress{position:absolute;top:290px;width:158px;left:50%;transform:translate(-50%,0)}

css/window.about.css

@@ -0,0 +1,81 @@
+.window.about .contents {
+    height: 252px;
+    background-color: #ddd;
+    border: 1px solid #000;
+    font-family: 'Arial';
+    font-size: 10.5px;
+    letter-spacing: 0.4px;
+}
+
+.window.about .about-body {
+    display: flex;
+    flex-direction: column;
+    box-shadow: inset 1px 1px #fff, inset -1px -1px #b3b3b3;
+    padding-bottom: 4px;
+}
+
+.window.about .about-logo {
+    margin: 5px;
+    width: 454px;
+    height: 90px;
+    background-color: #fff;
+    background-image: url("../img/ui/about-logo.png");
+    background-repeat: no-repeat;
+    background-position: center;
+    border: 1px solid #000;
+    box-shadow: -1px -1px #888, 1px 1px #fff;
+}
+
+.window.about .about-text {
+    display: flex;
+    justify-content: space-between;
+    margin: 0 7px 0 8px;
+    line-height: 1.5em;
+}
+
+.window.about .about-text strong {
+    margin-right: 10px;
+}
+
+.window.about .about-greets {
+    max-height: 82px;
+    overflow: scroll;
+    background-color: #eee;
+    border-top: 1px solid #000;
+}
+
+.window.about .about-greets ul {
+    text-align: center;
+}
+
+.window.about .about-greets .jspHorizontalBar {
+    display: none !important;
+}
+
+.window.about .about-greets .jspTrack.disabled {
+    height: 67px !important;
+}
+
+.window.about .about-greets .jspCapBottom {
+    display: block !important;
+    background-color: #dadada;
+    height: 15px;
+    width: 14px;
+    border-top: 1px solid #000;
+}
+
+.window.about .about-greets ul {
+    padding: 0;
+    margin: 0;
+    list-style-type: none;
+    line-height: 18px;
+}
+
+.window.about .about-greets li {
+    padding-left: 15px;
+    border-bottom: 1px solid #fff !important;
+}
+
+.window.about.blur .contents:not(:focus-within) {
+    opacity: 50%;
+}

css/window.about.min.css

@@ -0,0 +1 @@
+.window.about .contents{height:252px;background-color:#ddd;border:1px solid #000;font-family:'Arial';font-size:10.5px;letter-spacing:.4px}.window.about .about-body{display:flex;flex-direction:column;box-shadow:inset 1px 1px #fff,inset -1px -1px #b3b3b3;padding-bottom:4px}.window.about .about-logo{margin:5px;width:454px;height:90px;background-color:#fff;background-image:url("../img/ui/about-logo.png");background-repeat:no-repeat;background-position:center;border:1px solid #000;box-shadow:-1px -1px #888,1px 1px #fff}.window.about .about-text{display:flex;justify-content:space-between;margin:0 7px 0 8px;line-height:1.5em}.window.about .about-text strong{margin-right:10px}.window.about .about-greets{max-height:82px;overflow:scroll;background-color:#eee;border-top:1px solid #000}.window.about .about-greets ul{text-align:center}.window.about .about-greets .jspHorizontalBar{display:none !important}.window.about .about-greets .jspTrack.disabled{height:67px !important}.window.about .about-greets .jspCapBottom{display:block !important;background-color:#dadada;height:15px;width:14px;border-top:1px solid #000}.window.about .about-greets ul{padding:0;margin:0;list-style-type:none;line-height:18px}.window.about .about-greets li{padding-left:15px;border-bottom:1px solid #fff !important}.window.about.blur .contents:not(:focus-within){opacity:50%}

css/window.css

@@ -0,0 +1,242 @@
+:root {
+    --window-top-default: 25px;
+    --window-left-default: 7px;
+}
+
+.window-wrapper {
+    position: absolute;
+    top: var(--window-top-default);
+    left: var(--window-left-default);
+}
+
+.window {
+    z-index: 3;
+    font-size: 12px;
+    font-family: 'Charcoal';
+    border: 1px solid #000;
+    background: #dadada;
+    box-shadow: 1px 1px #111, inset 1px 1px #fff, inset -1px -1px #999;
+}
+
+.window.blur:not(:focus-within) {
+    box-shadow: 1px 1px #525252 !important;
+    border-color: #525252 !important;
+}
+
+.window.blur:not(:focus-within) * {
+    border-color: #525252 !important;
+    box-shadow: none !important;
+}
+
+.window .header {
+    justify-content: center;
+    height: 22px;
+}
+
+.window .header img {
+    margin: 2px 0 0 0;
+    width: 16px;
+    height: 16px;
+}
+
+.window .header .title {
+    font-family: 'Charcoal';
+    font-size: 12px;
+    font-weight: normal;
+    margin: 3px 0 0 2px;
+}
+
+.window.blur .header .title {
+    opacity: 50%;
+}
+
+.window .header .title img {
+    margin: 0 3px 0 0;
+}
+
+.window .header-lines-wrapper {
+    flex-grow: 1;
+    height: 12px;
+    padding: 4px 4px 5px 4px;
+}
+
+.window .header-lines.left {
+    width: 1px;
+    background-image: repeating-linear-gradient(#fff 0 1px, #dadada 0 2px);
+}
+
+.window .header-lines.center {
+    flex-grow: 1;
+    background-image: repeating-linear-gradient(#fff 0 1px, #737373 0 2px);
+}
+
+.window .header-lines.right {
+    width: 1px;
+    background-image: repeating-linear-gradient(#dadada 0 1px, #737373 0 2px);
+}
+
+.window .control-box {
+    height: 11px;
+    width: 11px;
+    margin-top: 4px;
+    border: 1px inset #fff;
+}
+
+.window .control-box.close-box {
+    margin-left: 4px;
+}
+
+.window .control-box-inner {
+    display: block;
+    height: 9px;
+    width: 9px;
+    background-image: linear-gradient(
+            to bottom right,
+            #999, #aaa, #bbb,
+            #ccc, #ddd, #eee,
+            #fff, #fff
+    );
+    border: 1px solid #222;
+    box-shadow: inset 1px 1px #ccc, inset -1px -1px #888;
+}
+
+.window .control-box-inner:active {
+    box-shadow: none;
+}
+
+.window .control-box-inner:active .control-box-highlight {
+    background: #aaa;
+}
+
+.window .control-box-highlight {
+    position: relative;
+    top: 0;
+    left: 0;
+    width: 1px;
+    height: 1px;
+    background: #fff;
+}
+
+.window .control-box.zoom-box {
+    margin-right: 3px;
+}
+
+.window .zoom-box-inner {
+    position: relative;
+    top: -1px;
+    height: 5px;
+    width: 5px;
+    border-bottom: 1px solid #202020;
+    border-right: 1px solid #202020;
+}
+
+.window .control-box.windowshade-box {
+    margin-right: 4px;
+}
+
+.window .windowshade-box-inner {
+    position: relative;
+    top: -1px;
+    margin-top: 3px;
+    height: 1px;
+    border-top: 1px solid #202020;
+    border-bottom: 1px solid #202020;
+}
+
+.window .expand-arrow {
+    width: 12px;
+    height: 12px;
+    background-repeat: no-repeat;
+    background-position: center;
+    margin: 0 5px 0 -3px;
+}
+
+.window .expand-arrow.right {
+    background-image: url("../img/ui/widgets/expand-arrow-right.png");
+}
+
+.window .expand-arrow.right.active {
+    background-image: url("../img/ui/widgets/expand-arrow-right-active.png");
+}
+
+.window .expand-arrow.down {
+    background-image: url("../img/ui/widgets/expand-arrow-down.png");
+}
+
+.window .expand-arrow.down.active {
+    background-image: url("../img/ui/widgets/expand-arrow-down-active.png");
+}
+
+.window.blur .expand-arrow.right {
+    background-image: url("../img/ui/widgets/expand-arrow-right-disabled.png");
+}
+
+.window.blur .expand-arrow.down {
+    background-image: url("../img/ui/widgets/expand-arrow-down-disabled.png");
+}
+
+.window .statusbar {
+    height: 20px;
+    margin: 0 4px 0 4px;
+    border: 1px solid #000;
+    box-shadow: -1px -1px #9c9c9c,
+    1px 1px #fff,
+    inset 1px 1px #fff,
+    inset -1px -1px #b3b3b3;
+}
+
+.window.blur:not(:focus-within) .statusbar {
+    color: #525252 !important;
+}
+
+.window .statusbar .statusbar-text {
+    font-family: 'Arial';
+    font-size: 10px;
+    text-align: center;
+    margin: 4px;
+    letter-spacing: 0.4px;
+}
+
+.window .contents {
+    margin: -1px 4px 4px 4px;
+    border: 1px solid #000;
+    background: #fff;
+    box-shadow: -1px -1px #9c9c9c, 1px 1px #fff, inset 1px 1px #fff, inset -1px -1px #acacac;
+}
+
+.window .contents .body {
+    min-width: 230px;
+    max-width: 400px;
+    max-height: 400px;
+    overflow: scroll;
+}
+
+.window .contents .body .grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0 30px;
+    align-items: center;
+    align-content: flex-start;
+    padding: 0 16px 16px 0;
+}
+
+.window .contents .body .grid > figure {
+    flex-grow: 2;
+    width: 100px;
+}
+
+.window .resize-handle {
+    position: absolute;
+    right: 4px;
+    bottom: 4px;
+    height: 16px;
+    width: 16px;
+    background-color: #dadada;
+    box-shadow: inset 1px 1px #fff;
+}
+
+.window .resize-handle.enabled {
+    background-image: url("../img/ui/widgets/resize-handle.png");
+    background-position: center;
+    background-repeat: no-repeat;
+}

css/window.download.css

@@ -0,0 +1,79 @@
+.window-wrapper[data-type="download"] {
+    position: absolute;
+    top: 80px;
+    left: 25%;
+}
+
+.window.download .contents {
+    height: 86px;
+    background-color: #ddd;
+    border: 1px solid #000;
+    font-family: 'Arial';
+    font-size: 10.5px;
+    letter-spacing: 0.4px;
+}
+
+.window.download .download-body {
+    display: flex;
+    flex-direction: column;
+    margin: 10px;
+}
+
+.window.download .download-items-remaining {
+    display: flex;
+    justify-content: space-between;
+    font-size: 12px;
+    font-family: 'Charcoal';
+}
+
+.window.download .download-progress {
+    display: flex;
+    margin: 10px 0 0 0
+}
+
+.window.download .progress {
+    margin-top: 4px;
+}
+
+.window.download .download-time-remaining {
+    display: flex;
+}
+
+.window.download .progress {
+    width: 184px;
+    margin-bottom: 10px;
+}
+
+.window.download.blur * {
+    color: #6a6a6a;
+}
+
+.window.download.blur .progress .left, .window.download.blur .progress .right, .window.download.blur .progress .middle {
+    background-image: none;
+    background-color: #9c99ff;
+}
+
+.window.download.expanded .contents {
+    height: 174px;
+}
+
+.window.download.expanded .expanded-content {
+    display: block;
+}
+
+.window.download .expanded-content {
+    display: none;
+    margin-top: 5px;
+}
+
+.window.download tr td {
+    padding: 6px 0 0 6px;
+}
+
+.window.download tr td:first-of-type {
+    text-align: right;
+}
+
+.window.download button {
+    margin-left: 14px;
+}

css/window.download.min.css

@@ -0,0 +1 @@
+.window-wrapper[data-type="download"]{position:absolute;top:80px;left:25%}.window.download .contents{height:86px;background-color:#ddd;border:1px solid #000;font-family:'Arial';font-size:10.5px;letter-spacing:.4px}.window.download .download-body{display:flex;flex-direction:column;margin:10px}.window.download .download-items-remaining{display:flex;justify-content:space-between;font-size:12px;font-family:'Charcoal'}.window.download .download-progress{display:flex;margin:10px 0 0 0}.window.download .progress{margin-top:4px}.window.download .download-time-remaining{display:flex}.window.download .progress{width:184px;margin-bottom:10px}.window.download.blur *{color:#6a6a6a}.window.download.blur .progress .left,.window.download.blur .progress .right,.window.download.blur .progress .middle{background-image:none;background-color:#9c99ff}.window.download.expanded .contents{height:174px}.window.download.expanded .expanded-content{display:block}.window.download .expanded-content{display:none;margin-top:5px}.window.download tr td{padding:6px 0 0 6px}.window.download tr td:first-of-type{text-align:right}.window.download button{margin-left:14px}

css/window.info.css

@@ -0,0 +1,106 @@
+.window.info {
+    display: flex;
+    flex-direction: column;
+    width: 340px !important;
+    box-shadow: inset 1px 1px #fff, inset -1px -1px #b3b3b3;
+}
+
+.window.info .contents {
+    background-color: #dedede;
+}
+
+.window.info .info-header {
+    display: flex;
+}
+
+.window.info .info-header img {
+    margin: 8px 8px 15px 24px;
+}
+
+.window.info .info-header input[type="text"] {
+    width: 228px;
+    font-size: 12px;
+    font-family: 'Charcoal';
+    margin: 15px 0 20px 0;
+    padding: 1px;
+    border: 1px solid #000;
+    box-shadow: 1px 1px #fff, -1px -1px #b3b3b3;
+}
+
+.window.info .info-header input[type="text"]::selection, .window .info textarea::selection {
+    background-color: #cdcdff;
+}
+
+.window.info .info-body {
+    margin: 0 10px 10px 10px;
+    border: 1px solid #b3b3b3;
+    box-shadow: inset 1px 1px #fff, 1px 1px #fff;;
+}
+
+.window.info .info-show {
+    display: inline-block;
+    position: relative;
+    top: -0.9em;
+    background-color: #dedede;
+    margin-left: 12px;
+    padding: 0 2px 0 2px;
+}
+
+.window.info .info-dropdown {
+    display: inline-block;
+    border: 1px solid #000;
+    border-radius: 3px;
+    padding: 1px 0 1px 5px;
+    box-shadow: inset 1px 1px #fff, inset -1px -1px #acacac;
+}
+
+.window.info .info-dropdown-arrows {
+    display: inline-block;
+    height: 16px;
+    width: 16px;
+    margin: 0 1px 0 14px;
+    padding: 0 2px 0 0;
+    background-position: 45%;
+    background-repeat: no-repeat;
+    background-image: url("../img/ui/widgets/dropdown-arrows.png");
+    border-left: 1px solid #aca9ac;
+    box-shadow: inset 1px 1px #fff, inset -1px -1px #acacac, 1px 1px #737373, 0 -1px #dedede;
+}
+
+.window.info .info-table {
+    margin: 0 10px;
+    font-family: 'Arial';
+    font-size: 10.5px;
+    letter-spacing: 0.4px;
+}
+
+.window.info .info-table tr td {
+    vertical-align: top;
+    padding: 2px;
+}
+
+.window.info .info-table tr td:first-of-type {
+    width: 50px;
+    font-weight: bold;
+    text-align: right;
+}
+
+.window.info .info-table tr td[data-info-key="url"] {
+    word-wrap: break-word;
+    word-break: break-all;
+}
+
+.window.info textarea {
+    resize: none;
+    font-family: 'Arial';
+    font-size: 10.5px;
+    letter-spacing: 0.4px;
+    overflow: hidden;
+    border: 1px solid #000;
+    box-shadow: 1px 1px #fff, -1px -1px #8b8b8b;
+    width: 280px;
+}
+
+.window.info.blur .contents:not(:focus-within) {
+    opacity: 50%;
+}

css/window.info.min.css

@@ -0,0 +1 @@
+.window.info{display:flex;flex-direction:column;width:340px !important;box-shadow:inset 1px 1px #fff,inset -1px -1px #b3b3b3}.window.info .contents{background-color:#dedede}.window.info .info-header{display:flex}.window.info .info-header img{margin:8px 8px 15px 24px}.window.info .info-header input[type="text"]{width:228px;font-size:12px;font-family:'Charcoal';margin:15px 0 20px 0;padding:1px;border:1px solid #000;box-shadow:1px 1px #fff,-1px -1px #b3b3b3}.window.info .info-header input[type="text"]::selection,.window .info textarea::selection{background-color:#cdcdff}.window.info .info-body{margin:0 10px 10px 10px;border:1px solid #b3b3b3;box-shadow:inset 1px 1px #fff,1px 1px #fff}.window.info .info-show{display:inline-block;position:relative;top:-0.9em;background-color:#dedede;margin-left:12px;padding:0 2px 0 2px}.window.info .info-dropdown{display:inline-block;border:1px solid #000;border-radius:3px;padding:1px 0 1px 5px;box-shadow:inset 1px 1px #fff,inset -1px -1px #acacac}.window.info .info-dropdown-arrows{display:inline-block;height:16px;width:16px;margin:0 1px 0 14px;padding:0 2px 0 0;background-position:45%;background-repeat:no-repeat;background-image:url("../img/ui/widgets/dropdown-arrows.png");border-left:1px solid #aca9ac;box-shadow:inset 1px 1px #fff,inset -1px -1px #acacac,1px 1px #737373,0 -1px #dedede}.window.info .info-table{margin:0 10px;font-family:'Arial';font-size:10.5px;letter-spacing:.4px}.window.info .info-table tr td{vertical-align:top;padding:2px}.window.info .info-table tr td:first-of-type{width:50px;font-weight:bold;text-align:right}.window.info .info-table tr td[data-info-key="url"]{word-wrap:break-word;word-break:break-all}.window.info textarea{resize:none;font-family:'Arial';font-size:10.5px;letter-spacing:.4px;overflow:hidden;border:1px solid #000;box-shadow:1px 1px #fff,-1px -1px #8b8b8b;width:280px}.window.info.blur .contents:not(:focus-within){opacity:50%}

css/window.pictureviewer.css

@@ -0,0 +1,12 @@
+.window.pictureviewer .body {
+    min-width: 100px;
+    min-height: 100px;
+    max-width: 800px;
+    max-height: 800px;
+    overflow: scroll;
+}
+
+.window.pictureviewer .pictureviewer-image {
+    display: block;
+    padding: 10px 25px 20px 10px;
+}

css/window.pictureviewer.min.css

@@ -0,0 +1 @@
+.window.pictureviewer .body{min-width:100px;min-height:100px;max-width:800px;max-height:800px;overflow:scroll}.window.pictureviewer .pictureviewer-image{display:block;padding:10px 25px 20px 10px}

css/window.simpletext.css

@@ -0,0 +1,28 @@
+.window.simpletext .body {
+    min-width: 500px;
+    min-height: 300px;
+    max-height: 500px;
+    overflow: scroll;
+}
+
+.window.simpletext .simpletext-text {
+    font-family: "Arial";
+    font-size: 12px;
+    padding: 10px 25px 25px 10px;
+}
+
+.window.simpletext .simpletext-text.text-data {
+    white-space: pre-wrap;
+}
+
+.window.simpletext .simpletext-text h2 {
+    margin: 0 0 10px 0;
+}
+
+.window.simpletext .simpletext-text p {
+    text-align: justify;
+}
+
+.window.simpletext .simpletext-text p:first-of-type {
+    margin-top: 0;
+}

css/window.simpletext.min.css

@@ -0,0 +1 @@
+.window.simpletext .body{min-width:500px;min-height:300px;max-height:500px;overflow:scroll}.window.simpletext .simpletext-text{font-family:"Arial";font-size:12px;padding:10px 25px 25px 10px}.window.simpletext .simpletext-text.text-data{white-space:pre-wrap}.window.simpletext .simpletext-text h2{margin:0 0 10px 0}.window.simpletext .simpletext-text p{text-align:justify}.window.simpletext .simpletext-text p:first-of-type{margin-top:0}

desktop.html

@@ -0,0 +1,18 @@
+<div class="desktop-left-01"></div>
+<div class="desktop-left-02"></div>
+<div class="desktop-left-03"></div>
+<div class="desktop-left-04"></div>
+<div class="desktop-left-05"></div>
+<div class="desktop-left-06"></div>
+<div class="spacer"></div>
+<div class="desktop-right">
+    <figure class="cloneable">
+        <a href="#"></a>
+        <figcaption>
+            <a href="#">
+                <span class="label"></span>
+            </a>
+        </figcaption>
+    </figure>
+    <div id="trash-spacer" class="spacer"></div>
+</div>

files/download.sit

@@ -0,0 +1 @@
+hello there

files/example.txt

@@ -0,0 +1 @@
+This is a text document!