Kaskade 0.3 - Desktop Demo

Developer
Aaron Levine
Size
9,186 Kb
Views
2,024
  1. Kaskade 0.3 - Desktop Demo Previews
  2. Kaskade 0.3 - Desktop Demo HTML Codes
  3. Kaskade 0.3 - Desktop Demo CSS Codes
  4. Kaskade 0.3 - Desktop Demo JS Codes

How do I make an kaskade 0.3 - desktop demo?

Kaskade is a new Javascript framework designed to make designing and building web applications easier than ever.. What is a kaskade 0.3 - desktop demo? How do you make a kaskade 0.3 - desktop demo? This script and codes were developed by Aaron Levine on 30 January 2023, Monday.

Kaskade 0.3 - Desktop Demo Previews
IQ Test

Kaskade 0.3 - Desktop Demo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Kaskade 0.3 - Desktop Demo</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, maximum-scale=1, minimum-scale=1, minimal-ui" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<element data-render="app"></element>
<!--** App **/-->
<script id="App" type="template"> <div class="app"> <element data-render="body"></element> <element data-render="topBar"></element> <element data-render="bottomBar"></element> <div class="dialogs"> <element data-list="dialogs"></element> </div> </div>
</script>
<!--** /App **/-->
<!--** Body **/-->
<script id="Body" type="template"> <div class="body" data-click="[TopBarMenu.dismissMenus]"> <div class="body-content"> <element data-list="ProgramView:[$root.programs]"></element> </div> </div>
</script>
<!--** /Body **/-->
<!--** TopBar **/-->
<script id="TopBar" type="template"> <div class="topBar"> <element data-list="ProgramTopBar:[$root.programs]"></element> </div>
</script>
<script id="ProgramTopBar" type="template"> <div class="topBarContent" data-style="display:display"> <element data-list="topBarContents"></element> </div>
</script>
<script id="TopBarMenu" type="template"> <div class="topBarItem topBarMenu menuTarget" data-click="click" data-css="css"><span class="menuTarget" data-html="title"></span> <div class="options"> <element data-list="options"></element> </div> </div>
</script>
<script id="MenuOption" type="template"> <div class="menuOption" data-click="click"><span data-html="title"></span></div>
</script>
<!--** /TopBar **/-->
<!--** BottomBar **/-->
<script id="BottomBar" type="template"> <div class="bottomBar" data-click="[TopBarMenu.dismissMenus]"> <element data-list="ProgramBottomBar:[$root.programs]"></element> </div>
</script>
<script id="ProgramBottomBar" type="template"> <div class="bottomBarItem" data-css="[bottomBarItem.css]" data-click="[bottomBarItem.click]"><span class="fa" data-css="[bottomBarItem.icon]"></span></div>
</script>
<!--** /BottomBar **/-->
<!--** Dialog **/-->
<script id="Dialog" type="template"> <div class="dialog"> <div class="titleBar"> <div class="title" data-text="title"></div> <div class="buttons"> <div class="button fa fa-times" data-click="close"></div> </div> </div> <div class="content" data-html="content"></div> </div>
</script>
<!--** /Dialog **/-->
<!--** Views **/-->
<script id="ProgramView" type="template"> <element data-render="view"></element>
</script>
<script id="View" type="template"> <div class="view" data-style="display:[$parent.display]"> <element data-partial="content"></element> </div>
</script>
<script id="DesktopView" type="template"> <div class="desktopView" data-style="display:[$parent.display]"> <element data-list="DesktopFile:[$root.files]"></element> </div>
</script>
<script id="TextEditor" type="template"> <input class="textEditorName" type="text" data-value="[$parent.currentName]"/> <textarea class="textEditorContent" data-value="[$parent.currentValue]"></textarea>
</script>
<script id="Calculator" type="template"> <h1>A Calculator would go here</h1>
</script>
<script id="Calendar" type="template"> <h1>A Calendar would go here</h1>
</script>
<!--** /Views **/-->
<!--** File **/-->
<script id="DesktopFile" type="template"> <div class="fileIcon" data-click="open"><span class="fa" data-css="icon"></span><br/><span data-text="name"></span></div>
</script>
<!--** /File **/--> <script src='https://codepen.io/Aldlevine/pen/a21574ada7e037cf8f51eef41812b14e.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.2/fastclick.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Kaskade 0.3 - Desktop Demo - Script Codes CSS Codes

/** App **/
/** Body **/
.body { position: absolute; top: 0; left: 0; display: inline-block; width: 100%; height: 100%; padding-top: 2rem; padding-bottom: 4rem; overflow: hidden; background-color: #583845; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjAlIiBjeT0iMTAwJSIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzM1NTBkYSIgc3RvcC1vcGFjaXR5PSIwLjQiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMGRkNzciIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzc3MWMxYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzlmN2EyMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -moz-radial-gradient(0% 100%, circle, rgba(53, 80, 218, 0.4) 0%, rgba(0, 221, 119, 0) 100%), -moz-linear-gradient(315deg, #771c1c 0%, #9f7a22 100%); background-image: -webkit-radial-gradient(0% 100%, circle, rgba(53, 80, 218, 0.4) 0%, rgba(0, 221, 119, 0) 100%), -webkit-linear-gradient(315deg, #771c1c 0%, #9f7a22 100%); background-image: radial-gradient(circle at 0% 100%, rgba(53, 80, 218, 0.4) 0%, rgba(0, 221, 119, 0) 100%), linear-gradient(135deg, #771c1c 0%, #9f7a22 100%);
}
.body > .body-content { display: inline-block; width: 100%; height: 100%; overflow: hidden;
}
/** /Body **/
/** TopBar **/
.topBar { position: absolute; top: 0; left: 0; display: inline-block; width: 100%; height: 2rem; line-height: 2rem; font-size: 1rem; background: rgba(0, 0, 0, 0.2); color: #999; -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5); -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.topBar > .topBarContent > .topBarItem { display: inline-block; height: 100%; padding: 0 0.5rem; cursor: default; -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none; opaticy: 0.5;
}
.topBar > .topBarContent > .topBarItem:hover { background: rgba(51, 51, 51, 0.2); -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5); -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.topBar > .topBarContent > .topBarItem:active { background: radial-gradient(circle at 0% 100%, rgba(75, 99, 222, 0.4) 0%, rgba(0, 247, 133, 0) 100%), linear-gradient(135deg, #8c2121 0%, #b48a26 100%) #684251; background-attachment: fixed; -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5); -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.topBar > .topBarContent > .topBarItem > .options { position: absolute; top: 2rem; margin-left: -0.5rem; background: radial-gradient(circle at 0% 100%, rgba(75, 99, 222, 0.4) 0%, rgba(0, 247, 133, 0) 100%), linear-gradient(135deg, #8c2121 0%, #b48a26 100%) #684251; background-attachment: fixed; -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5); -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -webkit-transform-origin: 0 0; transform-origin: 0 0; -moz-transform: scale(0, 0); -ms-transform: scale(0, 0); -webkit-transform: scale(0, 0); transform: scale(0, 0); -moz-transition: all 100ms; -o-transition: all 100ms; -webkit-transition: all 100ms; transition: all 100ms;
}
.topBar > .topBarContent > .topBarItem > .options > .menuOption { padding: 0 0.5rem;
}
.topBar > .topBarContent > .topBarItem > .options > .menuOption:hover { background: rgba(255, 255, 255, 0.2);
}
.topBar > .topBarContent > .topBarItem.open { background: radial-gradient(circle at 0% 100%, rgba(75, 99, 222, 0.4) 0%, rgba(0, 247, 133, 0) 100%), linear-gradient(135deg, #8c2121 0%, #b48a26 100%) #684251; background-attachment: fixed; -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5); -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.topBar > .topBarContent > .topBarItem.open > .options { -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1);
}
/** /TopBar **/
/** BottomBar **/
.bottomBar { position: absolute; bottom: 0; left: 0; display: inline-block; width: 100%; height: 4rem; text-align: center; background: rgba(0, 0, 0, 0.2); color: #999; -moz-box-shadow: inset 0 3px 3px -3px rgba(255, 255, 255, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.1); -webkit-box-shadow: inset 0 3px 3px -3px rgba(255, 255, 255, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.1); box-shadow: inset 0 3px 3px -3px rgba(255, 255, 255, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.bottomBar > .bottomBarItem { display: inline-block; height: 100%; line-height: 4rem; padding: 0; font-size: 4rem; text-shadow: 0 0 0 transparent; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-transform: scale(0.5); -ms-transform: scale(0.5); -webkit-transform: scale(0.5); transform: scale(0.5); -moz-transition: all 0.125s; -o-transition: all 0.125s; -webkit-transition: all 0.125s; transition: all 0.125s;
}
.bottomBar > .bottomBarItem.open { color: #9999cc; -moz-transform: scale(1) translateY(-25%); -ms-transform: scale(1) translateY(-25%); -webkit-transform: scale(1) translateY(-25%); transform: scale(1) translateY(-25%);
}
.bottomBar > .bottomBarItem.open > span:before { background-image: -webkit-linear-gradient(-67deg, #bbbbdd 0%, #aaaad5 50%, #99c 50%, #5555aa 100%); -webkit-background-clip: text; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5); -webkit-text-fill-color: transparent;
}
.bottomBar > .bottomBarItem:not(.open):hover { color: #ccc; -moz-transform: scale(0.75); -ms-transform: scale(0.75); -webkit-transform: scale(0.75); transform: scale(0.75);
}
.bottomBar > .bottomBarItem:not(.open):active { -moz-transform: scale(0.675); -ms-transform: scale(0.675); -webkit-transform: scale(0.675); transform: scale(0.675);
}
/** /BottomBar **/
/** Dialog **/
.dialog { visibility: hidden; position: absolute; left: 50%; top: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: inline-block; min-width: 50%; background: radial-gradient(circle at 0% 100%, rgba(38, 66, 207, 0.4) 0%, rgba(0, 196, 105, 0) 100%), linear-gradient(135deg, #621717 0%, #8a6a1e 100%) #482e39; color: #999; -moz-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); font-size: 0;
}
.dialog:last-of-type { visibility: visible;
}
.dialog > * { font-size: 1rem;
}
.dialog > .titleBar { display: inline-block; width: 100%; height: 2rem; -moz-box-shadow: inset 0 3px 3px -3px rgba(255, 255, 255, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.1); -webkit-box-shadow: inset 0 3px 3px -3px rgba(255, 255, 255, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.1); box-shadow: inset 0 3px 3px -3px rgba(255, 255, 255, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.dialog > .titleBar > .title { display: inline-block; padding: 0.5rem; float: left;
}
.dialog > .titleBar > .buttons { display: inline-block; float: right;
}
.dialog > .titleBar > .buttons > .button { padding: 0.5rem;
}
.dialog > .titleBar > .buttons > .button:hover { -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5); -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5); box-shadow: 0 0 2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.dialog > .titleBar > .buttons > .button:active { background: rgba(153, 153, 153, 0.2);
}
.dialog > .content { width: 100%; padding: 1rem 0.5rem; -moz-box-shadow: inset 0 3px 3px -3px rgba(255, 255, 255, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.1); -webkit-box-shadow: inset 0 3px 3px -3px rgba(255, 255, 255, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.1); box-shadow: inset 0 3px 3px -3px rgba(255, 255, 255, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
/** /Dialog **/
/** View **/
.view { position: absolute; top: 4rem; bottom: 6rem; left: 2rem; right: 2rem; display: inline-block; width: auto; height: auto; background: rgba(0, 0, 0, 0.2);
}
.textEditorName { width: 100%; height: 2rem; -moz-appearance: none; -webkit-appearance: none; background: rgba(0, 0, 0, 0.2); color: #999;
}
.textEditorContent { display: inline-block; width: 100%; height: calc(100% - 2rem); resize: none; -moz-appearance: none; -webkit-appearance: none; background: rgba(0, 0, 0, 0.2); color: #999; outline: none;
}
/** /View **/
/** File **/
.fileIcon { display: inline-block; max-width: 5rem; padding: 0.5rem; word-break: break-all; text-align: center; vertical-align: top; color: rgba(255, 255, 255, 0.5);
}
.fileIcon > .fa { font-size: 3rem;
}
/** /File **/
/** /App **/
html, body { width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden;
}
html *, body * { box-sizing: border-box;
}

Kaskade 0.3 - Desktop Demo - Script Codes JS Codes

/** Element.Matches Shim **/
(function(){ Element.prototype.matches = Element.prototype.matches || Element.prototype.webkitMatchesSelector || Element.prototype.mozMatchesSelector || Element.prototype.msMatchesSelector || Element.prototype.oMatchesSelector; if(!Element.prototype.matches){ Element.prototype.matches = function(selector){ var parent = this.parentNode || document, nodeList = parent.querySelectorAll(selector), nodeArray = [].filter.call(nodeList, function(){return true}); return nodeArray.indexOf(this) >= 0; } }
})();
/** /Element.Matches Shim **/
/** BottomBar **/
var BottomBarItem = $k.klass('BottomBarItem', { name: '', icon: [], click: function(){ this.$root.activeProgram = this.name; }, css: new $k.Routine(function(){ if(this.$root.activeProgram == this.$parent.name) return ['open']; return []; })
});
var BottomBar = $k.klass('BottomBar', { contents: null
});
/** /BottomBar **/
/** TopBar **/
var TopBarItem = $k.klass('TopBarItem', { title: '', click: function(){}
});
//var topBarMenuStack = [];
var TopBarMenu = TopBarItem.$extend('TopBarMenu', { title: 'Menu', open: false, options: new $k.List([]), css: new $k.Routine(function(){ if(this.$parent.open) return ['open']; return []; }), click: function(event, element){ if(event.target.matches('.menuTarget')){ this.open = !this.open; for(var i=0, len=TopBarMenu.topBarMenuStack.length; i<len; i++){ if(TopBarMenu.topBarMenuStack[i] !== this) TopBarMenu.topBarMenuStack[i].open = false; } } }, init: function(){ TopBarMenu.topBarMenuStack.add(this); }
}, { topBarMenuStack: [], dismissMenus: function(event, element){ for(var i=0, len=TopBarMenu.topBarMenuStack.length; i<len; i++){ if( (event.target.matches('.menuTarget') && TopBarMenu.topBarMenuStack[i] !== this) || !event.target.matches('.menuTarget')) TopBarMenu.topBarMenuStack[i].open = false; } }
});
var MenuOption = $k.klass('MenuOption', { title: '', click: function(){}
});
var TopBarContent = $k.klass('TopBarContent',{ items: new $k.List([ new TopBarMenu({title: 'Menu'}) ])
});
var TopBar = $k.klass('TopBar', { contents: null
});
/** /TopBar **/
/** View **/
var View = $k.klass('View', { name: '', content: ''
});
var DesktopView = View.$extend('DesktopView', {
});
/** /View **/
/** Dialog **/
var Dialog = $k.klass('Dialog', { title: '', content: '', close: function(){ this.$root.dialogs.$remove(this); }
});
/** /Dialog **/
/** File **/
var File = $k.klass('File', { name: 'Untitled', icon: [], content: ''
});
var TextFile = File.$extend('TextFile', { icon: ['fa-file-text-o'], open: function(){ this.$root.programs.array[1].loadFile(this); this.$root.activeProgram = 'text'; }
});
/** /File **/
/** Program **/
var Program = $k.klass('Program', { name: '', content: 'TextEditor', icon: ['fa-file-o'], bottomBarItem: null, view: null, topBarContents: new $k.List([ new TopBarMenu({title: 'Menu'}) ]), display: new $k.Routine(function(){ if(this.$root.activeProgram == this.$parent.name) return ''; return 'none'; }), loadFile: function(file){}, init: function(){ this.bottomBarItem = new BottomBarItem({ name: this.name, icon: this.icon }); this.view = new View({ name: this.name, content: this.content }); }
});
var Desktop = Program.$extend('Desktop', { name: 'desktop', icon: ['fa-desktop'], bottomBarItem: null, infoDialog: new Dialog({ title: 'Kaskade 0.3', content: new $k.Routine(function(){ var content = this.$root.files.array[0].content; content = content.replace(/\r|\n/g, '<br/>'); return content; }) }), topBarContents: new $k.List([ new TopBarMenu({ title:'About', click: function(){ if(this.$root.dialogs.array.indexOf(this.$parents[1].infoDialog) < 0) this.$root.dialogs.$push(this.$parents[1].infoDialog); } }) ]), open: function(){ return false; }, init: function(){ this.bottomBarItem = new BottomBarItem({ name: this.name, icon: this.icon }); this.view = new DesktopView({ name: this.name, content: this.content }); }
});
var Text = Program.$extend('Text', { name: 'text', topBarContents: new $k.List([ new TopBarMenu({title: 'Text'}), new TopBarMenu({ title: 'File', options: new $k.List([ new MenuOption({ title: 'New', click: function(){ this.$parents[3].loadFile(new TextFile()); this.$parents[1].open = false; } }), new MenuOption({ title: 'Save', click: function(){ this.$parents[3].currentFile.content = this.$parents[3].currentValue; this.$parents[3].currentFile.name = this.$parents[3].currentName; if(this.$root.files.array.indexOf(this.$parents[3].currentFile) < 0) this.$root.files.$push( this.$parents[3].currentFile ); this.$parents[1].open = false; } }) ]) }) ]), icon: ['fa-edit'], content: 'TextEditor', currentFile: new TextFile(), currentValue: '', currentName: 'Untitled', loadFile: function(file){ this.currentFile = file; this.currentValue = file.content; this.currentName = file.name; }
});
var Calc = Program.$extend('Calc', { name: 'calc', topBarContents: new $k.List([ new TopBarMenu({title: 'Calc'}), new TopBarMenu({title: 'View'}) ]), icon: ['fa-th'], content: 'Calculator'
});
var Calendar = Program.$extend('Calendar', { name: 'calendar', topBarContents: new $k.List([ new TopBarMenu({title: 'Calendar'}), new TopBarMenu({title: 'Edit'}), new TopBarMenu({title: 'View'}) ]), icon: ['fa-calendar'], content: 'Calendar',
});
/** /Program **/
/** Body **/
var Body = $k.klass('Body', {
});
/** /Body **/
/** App **/
var App = $k.klass('App', { body: new Body(), topBar: new TopBar(), bottomBar: new BottomBar(), dialogs: new $k.List([]), programs: new $k.List([ new Desktop(), new Text(), new Calc(), new Calendar() ]), files: new $k.List([ new TextFile({ name: 'About', content: 'Thanks for taking the time to view this demo.\n\nKaskade0.3 is a powerful new JS framework designed for building web-apps\n\nPlease take the time to visit Kaskadejs.com' }) ]), activeProgram: 'desktop'
});
/** /App **/
var app = new App();
$k.attach({app: app});
FastClick.attach(document.body);
Kaskade 0.3 - Desktop Demo - Script Codes
Kaskade 0.3 - Desktop Demo - Script Codes
Home Page Home
Developer Aaron Levine
Username Aldlevine
Uploaded January 30, 2023
Rating 3
Size 9,186 Kb
Views 2,024
Do you need developer help for Kaskade 0.3 - Desktop Demo?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Aaron Levine (Aldlevine) Script Codes
Name
Nav-Bar and Tab-Bar Layout
JQuery.momentus
Flashy Rating Page
CSS Spinning Wireframe Sphere
CRT TV Page Load Animation
Touch Hover
Colorful Slider Graph
Mobile App Design
Card Mockup
Random Gradients - JS
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!