├── images ├── avatar.jpg └── icons.svg ├── js ├── notification.js ├── status.js ├── notyf.min.js ├── script.js ├── charts.js └── uikit-icons.min.js ├── LICENSE ├── README.md ├── css ├── notyf.min.css └── style.css ├── 404.html ├── login.html ├── article.html ├── register.html ├── index.html └── tables.html /images/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConsoleTVs/UIAdmin/HEAD/images/avatar.jpg -------------------------------------------------------------------------------- /js/notification.js: -------------------------------------------------------------------------------- 1 | // Create an instance of Notyf 2 | var notyf = new Notyf(); 3 | 4 | setTimeout(function() { 5 | notyf.confirm('Welcome to UI Admin!!'); 6 | }, 500); 7 | -------------------------------------------------------------------------------- /js/status.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | var timeout = null; 3 | function checkStatus() { 4 | clearTimeout(timeout); 5 | var status = $('#status'); 6 | status.text(status.data('online-text')); 7 | status.removeClass('uk-label-warning'); 8 | status.addClass('uk-label-success'); 9 | timeout = setTimeout(function() { 10 | status.text(status.data('away-text')); 11 | status.removeClass('uk-label-success'); 12 | status.addClass('uk-label-warning'); 13 | }, status.data('interval')); 14 | } 15 | 16 | var status = $('#status'); 17 | if( status.length ) { 18 | if( status.data('enabled') == true ) { 19 | checkStatus(); 20 | $(document).on('mousemove', function() { 21 | checkStatus(); 22 | }); 23 | } else { 24 | status.css({'display': 'none'}); 25 | } 26 | } 27 | 28 | }); 29 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Erik Campobadal 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /js/notyf.min.js: -------------------------------------------------------------------------------- 1 | !function(){function n(n,t){for(property in t)t.hasOwnProperty(property)&&(n[property]=t[property]);return n}function t(n,t){var e=document.createElement("div");e.className="notyf__toast";var o=document.createElement("div");o.className="notyf__wrapper";var i=document.createElement("div");i.className="notyf__icon";var a=document.createElement("i");a.className=t;var r=document.createElement("div");r.className="notyf__message",r.innerHTML=n,i.appendChild(a),o.appendChild(i),o.appendChild(r),e.appendChild(o);var c=this;return setTimeout(function(){e.className+=" notyf--disappear",e.addEventListener(c.animationEnd,function(n){n.target==e&&c.container.removeChild(e)});var n=c.notifications.indexOf(e);c.notifications.splice(n,1)},c.options.delay),e}function e(){var n,t=document.createElement("fake"),e={transition:"animationend",OTransition:"oAnimationEnd",MozTransition:"animationend",WebkitTransition:"webkitAnimationEnd"};for(n in e)if(void 0!==t.style[n])return e[n]}this.Notyf=function(){this.notifications=[];var t={delay:2e3,alertIcon:"notyf__icon--alert",confirmIcon:"notyf__icon--confirm"};arguments[0]&&"object"==typeof arguments[0]?this.options=n(t,arguments[0]):this.options=t;var o=document.createDocumentFragment(),i=document.createElement("div");i.className="notyf",o.appendChild(i),document.body.appendChild(o),this.container=i,this.animationEnd=e()},this.Notyf.prototype.alert=function(n){var e=t.call(this,n,this.options.alertIcon);e.className+=" notyf--alert",this.container.appendChild(e),this.notifications.push(e)},this.Notyf.prototype.confirm=function(n){var e=t.call(this,n,this.options.confirmIcon);e.className+=" notyf--confirm",this.container.appendChild(e),this.notifications.push(e)}}(),function(){"function"==typeof define&&define.amd?define("Notyf",function(){return Notyf}):"undefined"!=typeof module&&module.exports?module.exports=Notyf:window.Notyf=Notyf}(); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## UIAdmin 2 | 3 | UI Kit 3 Administration Panel 4 | 5 | ## Information 6 | 7 | This admin panel template uses UI Kit 3 and it's built to be responsive and clean - you can find some screenshots below. 8 | 9 | ## Demo 10 | 11 | Check an online demo from the latest commit here: 12 | 13 | https://gitcdn.xyz/repo/ConsoleTVs/UIAdmin/master/index.html 14 | 15 | ## Instructions 16 | 17 | Simply download or clone the repository to use the template. 18 | 19 | ``` 20 | git clone https://github.com/ConsoleTVs/UIAdmin.git 21 | ``` 22 | 23 | ## Screenshots 24 | 25 |  26 | 27 |  28 | 29 |  30 | 31 |  32 | 33 | ## License 34 | 35 | MIT License 36 | 37 | Copyright (c) 2017-2019 Erik Campobadal 38 | 39 | Permission is hereby granted, free of charge, to any person obtaining a copy 40 | of this software and associated documentation files (the "Software"), to deal 41 | in the Software without restriction, including without limitation the rights 42 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 43 | copies of the Software, and to permit persons to whom the Software is 44 | furnished to do so, subject to the following conditions: 45 | 46 | The above copyright notice and this permission notice shall be included in all 47 | copies or substantial portions of the Software. 48 | 49 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 50 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 51 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 52 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 53 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 54 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 55 | SOFTWARE. 56 | -------------------------------------------------------------------------------- /js/script.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | 3 | // Sidebar Toggler 4 | function sidebarToggle(toogle) { 5 | var sidebar = $('#sidebar'); 6 | var padder = $('.content-padder'); 7 | if( toogle ) { 8 | $('.notyf').removeAttr( 'style' ); 9 | sidebar.css({'display': 'block', 'x': -300}); 10 | sidebar.transition({opacity: 1, x: 0}, 250, 'in-out', function(){ 11 | sidebar.css('display', 'block'); 12 | }); 13 | if( $( window ).width() > 960 ) { 14 | padder.transition({marginLeft: sidebar.css('width')}, 250, 'in-out'); 15 | } 16 | } else { 17 | $('.notyf').css({width: '90%', margin: '0 auto', display:'block', right: 0, left: 0}); 18 | sidebar.css({'display': 'block', 'x': '0px'}); 19 | sidebar.transition({x: -300, opacity: 0}, 250, 'in-out', function(){ 20 | sidebar.css('display', 'none'); 21 | }); 22 | padder.transition({marginLeft: 0}, 250, 'in-out'); 23 | } 24 | } 25 | 26 | $('#sidebar_toggle').click(function() { 27 | var sidebar = $('#sidebar'); 28 | var padder = $('.content-padder'); 29 | if( sidebar.css('x') == '-300px' || sidebar.css('display') == 'none' ) { 30 | sidebarToggle(true) 31 | } else { 32 | sidebarToggle(false) 33 | } 34 | }); 35 | 36 | function resize() 37 | { 38 | var sidebar = $('#sidebar'); 39 | var padder = $('.content-padder'); 40 | padder.removeAttr( 'style' ); 41 | if( $( window ).width() < 960 && sidebar.css('display') == 'block' ) { 42 | sidebarToggle(false); 43 | } else if( $( window ).width() > 960 && sidebar.css('display') == 'none' ) { 44 | sidebarToggle(true); 45 | } 46 | } 47 | 48 | if($( window ).width() < 960) { 49 | sidebarToggle(false); 50 | } 51 | 52 | $( window ).resize(function() { 53 | resize() 54 | }); 55 | 56 | $('.content-padder').click(function() { 57 | if( $( window ).width() < 960 ) { 58 | sidebarToggle(false); 59 | } 60 | }); 61 | 62 | }) 63 | -------------------------------------------------------------------------------- /css/notyf.min.css: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes a{0%{opacity:0;bottom:-15px;max-height:0;max-width:0;margin-top:0}30%{opacity:.8;bottom:-3px}to{opacity:1;bottom:0;max-height:200px;margin-top:12px;max-width:400px}}@keyframes a{0%{opacity:0;bottom:-15px;max-height:0;max-width:0;margin-top:0}30%{opacity:.8;bottom:-3px}to{opacity:1;bottom:0;max-height:200px;margin-top:12px;max-width:400px}}@-webkit-keyframes b{0%{opacity:1;bottom:0}30%{opacity:.2;bottom:-3px}to{opacity:0;bottom:-15px}}@keyframes b{0%{opacity:1;bottom:0}30%{opacity:.2;bottom:-3px}to{opacity:0;bottom:-15px}}@-webkit-keyframes c{0%{opacity:0}30%{opacity:.5}to{opacity:.6}}@keyframes c{0%{opacity:0}30%{opacity:.5}to{opacity:.6}}@-webkit-keyframes d{0%{opacity:.6}30%{opacity:.1}to{opacity:0}}@keyframes d{0%{opacity:.6}30%{opacity:.1}to{opacity:0}}.notyf__icon--alert,.notyf__icon--confirm{height:21px;width:21px;background:#fff;border-radius:50%;display:block;margin:0 auto;position:relative}.notyf__icon--alert:after,.notyf__icon--alert:before{content:"";background:#ed3d3d;display:block;position:absolute;width:3px;border-radius:3px;left:9px}.notyf__icon--alert:after{height:3px;top:14px}.notyf__icon--alert:before{height:8px;top:4px}.notyf__icon--confirm:after,.notyf__icon--confirm:before{content:"";background:#3dc763;display:block;position:absolute;width:3px;border-radius:3px}.notyf__icon--confirm:after{height:6px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);top:9px;left:6px}.notyf__icon--confirm:before{height:11px;-webkit-transform:rotate(45deg);transform:rotate(45deg);top:5px;left:10px}.notyf__toast{display:block;overflow:hidden;-webkit-animation:a .3s forwards;animation:a .3s forwards;box-shadow:0 1px 3px 0 rgba(0,0,0,.45);position:relative;padding-right:13px}.notyf__toast.notyf--alert{background:#ed3d3d}.notyf__toast.notyf--confirm{background:#3dc763}.notyf__toast.notyf--disappear{-webkit-animation:b .3s 1 forwards;animation:b .3s 1 forwards;-webkit-animation-delay:.25s;animation-delay:.25s}.notyf__toast.notyf--disappear .notyf__message{opacity:1;-webkit-animation:b .3s 1 forwards;animation:b .3s 1 forwards;-webkit-animation-delay:.1s;animation-delay:.1s}.notyf__toast.notyf--disappear .notyf__icon{opacity:1;-webkit-animation:d .3s 1 forwards;animation:d .3s 1 forwards}.notyf__wrapper{display:table;width:100%;padding-top:20px;padding-bottom:20px;padding-right:15px;border-radius:3px}.notyf__icon{width:20%;text-align:center;font-size:1.3em;-webkit-animation:c .5s forwards;animation:c .5s forwards;-webkit-animation-delay:.25s;animation-delay:.25s}.notyf__icon,.notyf__message{display:table-cell;vertical-align:middle;opacity:0}.notyf__message{width:80%;position:relative;-webkit-animation:a .3s forwards;animation:a .3s forwards;-webkit-animation-delay:.15s;animation-delay:.15s}.notyf{position:fixed;bottom:20px;right:30px;width:20%;color:#fff;z-index:1}@media only screen and (max-width:736px){.notyf__container{width:90%;margin:0 auto;display:block;right:0;left:0}} -------------------------------------------------------------------------------- /404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |46 | Sometimes things go wrong and you get lost, the content you 47 | are trying to see does not exist or is no longer visible. Please 48 | contact the administrator if you belive it's an error. 49 |
50 |
43 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et magna iaculis, elementum velit sed, imperdiet felis. Integer vehicula id elit id vehicula. Vestibulum rhoncus purus a dui fermentum, eget sagittis dolor euismod. In pretium luctus augue vel aliquet. Praesent pharetra lacinia scelerisque. Curabitur nec enim eleifend, mattis neque et, vehicula velit. Phasellus auctor, nulla quis laoreet finibus, ligula sapien elementum ante, a gravida sapien lorem eu nisi. Vivamus vitae massa tortor. Integer quis faucibus arcu. Curabitur vel pharetra nisi, vestibulum posuere eros.
44 |
45 | Quisque vestibulum, urna ultrices viverra auctor, dolor elit elementum lorem, at sagittis ex metus eget risus. Ut pulvinar, leo fermentum varius dignissim, arcu nisl euismod risus, id aliquam elit magna nec ex. Suspendisse hendrerit tempus pharetra. Pellentesque congue molestie tincidunt. Morbi rutrum est nec nisi bibendum venenatis. Quisque scelerisque at lectus a condimentum. Etiam placerat aliquet eros, ac hendrerit velit euismod non. Nullam nibh purus, scelerisque auctor fermentum nec, molestie eu turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer quis nibh tincidunt, tempus ipsum sit amet, posuere leo. Etiam interdum auctor lobortis. Curabitur nec accumsan leo. Sed imperdiet hendrerit molestie. Pellentesque tristique mauris diam, vel hendrerit felis laoreet consequat. Suspendisse venenatis elementum viverra.
46 |
47 | Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin viverra varius maximus. Etiam a dolor ac ex mattis tempor. Nullam eu lacinia lorem. Sed sed efficitur leo, sit amet gravida urna. Vestibulum porta massa a dui fermentum bibendum. Vivamus suscipit congue risus ac volutpat. Proin risus enim, lobortis sed sodales nec, dictum ac risus. Duis tempus ac nunc eu euismod.
48 |
49 | Praesent laoreet suscipit rhoncus. Ut at gravida ligula, ac hendrerit lacus. Pellentesque urna lacus, tristique a consequat nec, viverra dapibus leo. Duis nec ex et ex fermentum dapibus dictum eget odio. Praesent finibus convallis ex, nec vulputate dui scelerisque sit amet. Quisque egestas eros et elit eleifend luctus. Praesent commodo sit amet lacus in commodo. Morbi lacinia vestibulum mi eu pulvinar. Donec ligula urna, egestas nec orci sed, fringilla hendrerit turpis. Proin neque ex, convallis ac maximus eu, rhoncus id urna. Fusce molestie, urna vitae sodales pretium, arcu nibh cursus dui, at rutrum enim mauris quis nisi. Nam venenatis in sem eu sodales. In vel eros vulputate, hendrerit est et, ultricies ex.
50 |
51 | Donec ac ligula lobortis, hendrerit eros ut, tristique leo. Aliquam tristique arcu sit amet nulla porta, in feugiat nunc tincidunt. Proin ac finibus nisl, in fermentum augue. Donec bibendum sapien sed elit pharetra rhoncus nec vitae diam. Sed accumsan felis eu arcu elementum, id blandit lectus vestibulum. Nulla vitae massa lorem. Etiam viverra dictum est porta lacinia. Ut varius dolor eget justo interdum, et pellentesque turpis dapibus. Proin sit amet erat vitae mauris convallis mollis. Quisque ex risus, fringilla eu porta sed, egestas sit amet orci. Aliquam scelerisque purus odio, sit amet porttitor erat porta quis. Ut eleifend eleifend turpis nec ultricies. Fusce ac metus justo.
52 |
82 | Welcome back, Èrik Campobadal 83 |
84 | 88 |77 | Welcome back, Èrik Campobadal 78 |
79 | 83 || Heading One | 98 |Table Heading | 99 |Table Heading | 100 |Table Heading | 101 |Table Heading | 102 |Table Heading | 103 |Table Heading | 104 |Table Heading | 105 |Table Heading | 106 |Table Heading | 107 |
|---|---|---|---|---|---|---|---|---|---|
| Minimoy | 112 |Table Data | 113 |Table Data | 114 |Table Data | 115 |Table Data | 116 |Table Data | 117 |Table Data | 118 |Table Data | 119 |Table Data | 120 |Table Data | 121 |
| Marsupial | 124 |Table Data | 125 |Table Data | 126 |Table Data | 127 |Table Data | 128 |Table Data | 129 |Table Data | 130 |Table Data | 131 |Table Data | 132 |Table Data | 133 |
| Polaris | 136 |Table Data | 137 |Table Data | 138 |Table Data | 139 |Table Data | 140 |Table Data | 141 |Table Data | 142 |Table Data | 143 |Table Data | 144 |Table Data | 145 |