├── img ├── ss1.PNG ├── ss2.PNG ├── ss3.PNG ├── ss4.PNG ├── ss5.PNG ├── trm.PNG └── favicon.ico ├── README.md ├── css └── style.css ├── js ├── main.js └── winbox.bundle.js └── index.html /img/ss1.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naemazam/terminal-portfolio/HEAD/img/ss1.PNG -------------------------------------------------------------------------------- /img/ss2.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naemazam/terminal-portfolio/HEAD/img/ss2.PNG -------------------------------------------------------------------------------- /img/ss3.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naemazam/terminal-portfolio/HEAD/img/ss3.PNG -------------------------------------------------------------------------------- /img/ss4.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naemazam/terminal-portfolio/HEAD/img/ss4.PNG -------------------------------------------------------------------------------- /img/ss5.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naemazam/terminal-portfolio/HEAD/img/ss5.PNG -------------------------------------------------------------------------------- /img/trm.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naemazam/terminal-portfolio/HEAD/img/trm.PNG -------------------------------------------------------------------------------- /img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naemazam/terminal-portfolio/HEAD/img/favicon.ico -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # terminal-portfolio 3 | 4 | Make a terminal like a Portfolio website, hacker portfolio, or dev portfolio. 5 | 6 | A portfolio is a very important thing for personal branding. It will help you to describe yourself to other people, But an ordinary website can make and use by everyone. so What is The difference between a Geek and common people? 7 | 8 | ## Demo 9 | 10 | Insert gif or link to demo 11 | 12 | 13 | ## Screenshots 14 | 15 | ![App Screenshot](https://github.com/naemazam/terminal-portfolio/blob/main/img/trm.PNG) 16 | 17 | 18 | ## Youtube Tutorial 19 | 20 | https://youtu.be/_hreXt6mqnw 21 | 22 | 23 | ## Links 24 | [winbox.js](https://github.com/nextapps-de/winbox) 25 | 26 | [icons](https://icons8.com ) 27 | 28 | [type effect](https://readme-typing-svg.herokuapp.com/demo/) 29 | 30 | ## Contributing 31 | 32 | Contributions are always welcome! 33 | 34 | See `contributing.md` for ways to get started. 35 | 36 | Please adhere to this project's `code of conduct`. 37 | 38 | ## License 39 | MIT 40 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;700&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | padding: 0; 6 | margin: 0; 7 | } 8 | 9 | :root { 10 | --text-color: #00aa00; 11 | } 12 | 13 | body { 14 | font-family: 'Roboto Mono', sans-serif; 15 | background-color: #333; 16 | color: #ccc; 17 | font-size: 18px; 18 | line-height: 1.6; 19 | } 20 | 21 | h1 { 22 | color: var(--text-color); 23 | font-size: 50px; 24 | letter-spacing: -5px; 25 | margin-bottom: 20px; 26 | } 27 | 28 | h2 { 29 | color: var(--text-color); 30 | } 31 | 32 | h3 { 33 | margin-bottom: 10px; 34 | } 35 | 36 | ul { 37 | list-style-type: none; 38 | } 39 | 40 | a { 41 | color: var(--text-color); 42 | text-decoration: none; 43 | } 44 | 45 | 46 | 47 | 48 | p { 49 | margin: 20px 0; 50 | } 51 | 52 | nav { 53 | width: 30%; 54 | } 55 | 56 | nav ul { 57 | display: flex; 58 | justify-content: space-around; 59 | align-items: center; 60 | } 61 | 62 | nav ul li { 63 | color: var(--text-color); 64 | cursor: pointer; 65 | } 66 | 67 | .container { 68 | max-width: 600px; 69 | margin: auto; 70 | height: 70vh; 71 | display: flex; 72 | flex-direction: column; 73 | justify-content: center; 74 | align-items: center; 75 | } 76 | 77 | .wb-body { 78 | background: #111; 79 | padding: 20px; 80 | } 81 | 82 | .hidden { 83 | display: none; 84 | } 85 | 86 | .cursor { 87 | font-weight: 700; 88 | animation: 1s blink step-end infinite; 89 | } 90 | 91 | @keyframes blink { 92 | from, 93 | to { 94 | color: transparent; 95 | } 96 | 97 | 50% { 98 | color: var(--text-color); 99 | } 100 | } 101 | -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | // edit contain 1 2 | 3 | const about = document.querySelector('#about') 4 | const contact = document.querySelector('#contact') 5 | const project = document.querySelector('#project') 6 | const small = document.querySelector('#small') 7 | 8 | // edit contain 2 9 | const aboutContent = document.querySelector('#about-content') 10 | const contactContent = document.querySelector('#contact-content') 11 | const projectContent = document.querySelector('#project-content') 12 | const smallContent = document.querySelector('#small-content') 13 | 14 | about.addEventListener('click', () => { 15 | const aboutBox = new WinBox({ 16 | title: 'About Me', 17 | // modal: true, 18 | width: '400px', 19 | height: '400px', 20 | top: 50, 21 | right: 50, 22 | bottom: 50, 23 | left: 50, 24 | mount: aboutContent, 25 | onfocus: function () { 26 | this.setBackground('#00aa00') 27 | }, 28 | onblur: function () { 29 | this.setBackground('#777') 30 | }, 31 | }) 32 | }) 33 | 34 | contact.addEventListener('click', () => { 35 | const contactBox = new WinBox({ 36 | title: 'Contact Me', 37 | width: '400px', 38 | height: '400px', 39 | top: 50, 40 | right: 50, 41 | bottom: 50, 42 | left: 60, 43 | mount: contactContent, 44 | onfocus: function () { 45 | this.setBackground('#00aa00') 46 | }, 47 | onblur: function () { 48 | this.setBackground('#777') 49 | }, 50 | }) 51 | }) 52 | 53 | // edit contain 3 54 | project.addEventListener('click', () => { 55 | const ProjectBox = new WinBox({ 56 | title: 'My_project', 57 | width: '400px', 58 | height: '400px', 59 | top: 150, 60 | right: 50, 61 | bottom: 50, 62 | left: 50, 63 | mount: projectContent, 64 | onfocus: function () { 65 | this.setBackground('#00aa00') 66 | }, 67 | onblur: function () { 68 | this.setBackground('#777') 69 | }, 70 | }) 71 | }) 72 | 73 | small.addEventListener('click', () => { 74 | const SmallBox = new WinBox({ 75 | title: 'small_project', 76 | width: '400px', 77 | height: '400px', 78 | top: 80, 79 | right: 50, 80 | bottom: 50, 81 | left: 50, 82 | mount: smallContent, 83 | onfocus: function () { 84 | this.setBackground('#00aa00') 85 | }, 86 | onblur: function () { 87 | this.setBackground('#777') 88 | }, 89 | }) 90 | }) 91 | 92 | 93 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | N_A terminal 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 29 | 30 |
31 | 32 |

naem_azam@$|

33 |

My Skills:

34 |
35 |
36 | 37 | 38 | 39 | 40 | 41 |
42 | 43 |
44 |
45 |
46 | 47 | 48 | 216 | 217 | 220 | 221 | 222 | 223 | 224 | -------------------------------------------------------------------------------- /js/winbox.bundle.js: -------------------------------------------------------------------------------- 1 | /** 2 | * WinBox.js v0.1.8 (Bundle) 3 | * Copyright 2021 Nextapps GmbH 4 | * Author: Thomas Wilkerling 5 | * Licence: Apache-2.0 6 | * https://github.com/nextapps-de/winbox 7 | */ 8 | ;(function () { 9 | 'use strict' 10 | var e, 11 | h = document.createElement('style') 12 | h.innerHTML = 13 | "@keyframes fade-in{0%{opacity:0}to{opacity:.85}}.winbox.modal:after,.winbox.modal:before{content:''}.winbox{position:fixed;left:0;top:0;background:#0050ff;box-shadow:0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22);transition:width .3s,height .3s,transform .3s;transition-timing-function:cubic-bezier(.3,1,.3,1);will-change:transform,width,height;contain:layout size;text-align:left;touch-action:none}.max,.no-shadow{box-shadow:none}.wb-header,.winbox iframe{position:absolute;width:100%}.wb-header{left:0;top:0;height:35px;color:#fff;overflow:hidden}.wb-body,.wb-n,.wb-s{position:absolute;left:0}.wb-n,.wb-s{height:10px}.wb-body{right:0;top:35px;bottom:0;overflow:auto;-webkit-overflow-scrolling:touch;overflow-scrolling:touch;will-change:contents;background:#fff;margin-top:0!important;contain:strict}.wb-title{font-family:Arial,sans-serif;font-size:14px;padding-left:10px;cursor:move;line-height:35px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wb-n{top:-5px;right:0;cursor:n-resize}.wb-e{position:absolute;top:0;right:-5px;bottom:0;width:10px;cursor:w-resize}.wb-s,.wb-se,.wb-sw{bottom:-5px}.wb-s{right:0;cursor:n-resize}.wb-w,.winbox.modal:before{position:absolute;top:0;bottom:0}.wb-w{left:-5px;width:10px;cursor:w-resize}.wb-ne,.wb-nw,.wb-sw{width:15px;height:15px;position:absolute}.wb-nw{top:-5px;left:-5px;cursor:nw-resize}.wb-ne,.wb-sw{cursor:ne-resize}.wb-ne{top:-5px;right:-5px}.wb-sw{left:-5px}.wb-se{position:absolute;right:-5px;width:15px;height:15px;cursor:nw-resize}.wb-icon{float:right;height:35px;max-width:100%;text-align:center}.wb-icon *{display:inline-block;width:30px;height:100%;background-position:center;background-repeat:no-repeat;cursor:pointer;max-width:100%}.no-close .wb-close,.no-full .wb-full,.no-header .wb-header,.no-max .wb-max,.no-min .wb-min,.no-resize .wb-body~div,.winbox.min .wb-body>*,.winbox.min .wb-full,.winbox.min .wb-min,.winbox.modal .wb-full,.winbox.modal .wb-max,.winbox.modal .wb-min{display:none}.wb-min{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAyIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNOCAwaDdhMSAxIDAgMCAxIDAgMkgxYTEgMSAwIDAgMSAwLTJoN3oiLz48L3N2Zz4=);background-size:14px auto;background-position:center bottom 11px}.wb-max{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIHZpZXdCb3g9IjAgMCA5NiA5NiI+PHBhdGggZD0iTTIwIDcxLjMxMUMxNS4zNCA2OS42NyAxMiA2NS4yMyAxMiA2MFYyMGMwLTYuNjMgNS4zNy0xMiAxMi0xMmg0MGM1LjIzIDAgOS42NyAzLjM0IDExLjMxMSA4SDI0Yy0yLjIxIDAtNCAxLjc5LTQgNHY1MS4zMTF6Ii8+PHBhdGggZD0iTTkyIDc2VjM2YzAtNi42My01LjM3LTEyLTEyLTEySDQwYy02LjYzIDAtMTIgNS4zNy0xMiAxMnY0MGMwIDYuNjMgNS4zNyAxMiAxMiAxMmg0MGM2LjYzIDAgMTItNS4zNyAxMi0xMnptLTUyIDRjLTIuMjEgMC00LTEuNzktNC00VjM2YzAtMi4yMSAxLjc5LTQgNC00aDQwYzIuMjEgMCA0IDEuNzkgNCA0djQwYzAgMi4yMS0xLjc5IDQtNCA0SDQweiIvPjwvc3ZnPg==);background-size:17px auto}.wb-close{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xIC0xIDE4IDE4Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJtMS42MTMuMjEuMDk0LjA4M0w4IDYuNTg1IDE0LjI5My4yOTNsLjA5NC0uMDgzYTEgMSAwIDAgMSAxLjQwMyAxLjQwM2wtLjA4My4wOTRMOS40MTUgOGw2LjI5MiA2LjI5M2ExIDEgMCAwIDEtMS4zMiAxLjQ5N2wtLjA5NC0uMDgzTDggOS40MTVsLTYuMjkzIDYuMjkyLS4wOTQuMDgzQTEgMSAwIDAgMSAuMjEgMTQuMzg3bC4wODMtLjA5NEw2LjU4NSA4IC4yOTMgMS43MDdBMSAxIDAgMCAxIDEuNjEzLjIxeiIvPjwvc3ZnPg==);background-size:15px auto}.wb-full{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2Utd2lkdGg9IjIuNSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNOCAzSDVhMiAyIDAgMCAwLTIgMnYzbTE4IDBWNWEyIDIgMCAwIDAtMi0yaC0zbTAgMThoM2EyIDIgMCAwIDAgMi0ydi0zTTMgMTZ2M2EyIDIgMCAwIDAgMiAyaDMiLz48L3N2Zz4=);background-size:16px auto}.winbox.max .wb-body~div,.winbox.max .wb-title,.winbox.min .wb-body~div,.winbox.modal .wb-body~div,.winbox.modal .wb-title{pointer-events:none}.winbox.min .wb-title{cursor:default}.max .wb-body{margin:0!important}.winbox iframe{height:100%;border:0}.winbox.modal:before{left:0;right:0;background:inherit;border-radius:inherit}.winbox.modal:after{position:absolute;top:-100vh;left:-100vw;right:-100vw;bottom:-100vh;background:#0d1117;animation:fade-in .2s ease-out forwards;z-index:-1}.no-animation{transition:none}.no-header .wb-body{top:0}.no-move:not(.min) .wb-title{pointer-events:none}" 14 | var k = document.getElementsByTagName('head')[0] 15 | k.firstChild ? k.insertBefore(h, k.firstChild) : k.appendChild(h) 16 | var q = document.createElement('div') 17 | q.innerHTML = 18 | '
' 19 | function r(a, b, c, g) { 20 | a.addEventListener(b, c, g || !1 === g ? g : !0) 21 | } 22 | function t(a) { 23 | a.stopPropagation() 24 | a.cancelable && a.preventDefault() 25 | } 26 | function w(a, b, c) { 27 | c = '' + c 28 | a['_s_' + b] !== c && (a.style.setProperty(b, c), (a['_s_' + b] = c)) 29 | } 30 | var x = document.documentElement, 31 | y = [], 32 | A = 0, 33 | B, 34 | C, 35 | F, 36 | G, 37 | K, 38 | L, 39 | M 40 | function O(a, b) { 41 | if (!(this instanceof O)) return new O(a) 42 | B || Q() 43 | this.g = q.cloneNode(!0) 44 | this.body = this.g.getElementsByClassName('wb-body')[0] 45 | var c, g 46 | if (a) { 47 | if (b) { 48 | var f = a 49 | a = b 50 | } 51 | if ('string' === typeof a) f = a 52 | else { 53 | if ((g = a.modal)) var u = (c = 'center') 54 | var z = a.id 55 | var H = a.root 56 | f = f || a.title 57 | var D = a.mount 58 | var d = a.html 59 | var I = a.url 60 | var l = a.width 61 | var m = a.height 62 | u = a.x || u 63 | c = a.y || c 64 | var E = a.max 65 | var n = a.top 66 | var p = a.left 67 | var v = a.bottom 68 | var J = a.right 69 | B = a.index || B 70 | var W = a.onclose 71 | var X = a.onfocus 72 | var Y = a.onblur 73 | var Z = a.onmove 74 | var aa = a.onresize 75 | b = a.background 76 | var P = a.border 77 | var N = a['class'] 78 | b && this.setBackground(b) 79 | P && w(this.body, 'margin', P + (isNaN(P) ? '' : 'px')) 80 | } 81 | } 82 | this.setTitle(f || '') 83 | a = L 84 | f = M 85 | n = n ? R(n, f) : 0 86 | v = v ? R(v, f) : 0 87 | p = p ? R(p, a) : 0 88 | J = J ? R(J, a) : 0 89 | a -= p + J 90 | f -= n + v 91 | l = l ? R(l, a) : (a / 2) | 0 92 | m = m ? R(m, f) : (f / 2) | 0 93 | u = u ? R(u, a, l) : p 94 | c = c ? R(c, f, m) : n 95 | B = B || 10 96 | this.g.id = this.id = z || 'winbox-' + ++A 97 | this.g.className = 98 | 'winbox' + 99 | (N ? ' ' + ('string' === typeof N ? N : N.join(' ')) : '') + 100 | (g ? ' modal' : '') 101 | this.x = u 102 | this.y = c 103 | this.width = l 104 | this.height = m 105 | this.top = n 106 | this.right = J 107 | this.bottom = v 108 | this.left = p 109 | this.max = this.min = !1 110 | this.j = W 111 | this.l = X 112 | this.i = Y 113 | this.o = Z 114 | this.m = aa 115 | E ? this.maximize() : this.move().resize() 116 | this.focus() 117 | D ? this.mount(D) : d ? (this.body.innerHTML = d) : I && this.setUrl(I) 118 | ba(this) 119 | ;(H || document.body).appendChild(this.g) 120 | } 121 | O['new'] = function (a) { 122 | return new O(a) 123 | } 124 | function R(a, b, c) { 125 | 'string' === typeof a && 126 | ('center' === a 127 | ? (a = ((b - c) / 2) | 0) 128 | : 'right' === a || 'bottom' === a 129 | ? (a = b - c) 130 | : ((c = parseFloat(a)), 131 | (a = 132 | '%' === ('' + c !== a && a.substring(('' + c).length)) 133 | ? ((b / 100) * c) | 0 134 | : c))) 135 | return a 136 | } 137 | function Q() { 138 | var a = document.body 139 | a[(G = 'requestFullscreen')] || 140 | a[(G = 'msRequestFullscreen')] || 141 | a[(G = 'webkitRequestFullscreen')] || 142 | a[(G = 'mozRequestFullscreen')] || 143 | (G = '') 144 | K = 145 | G && 146 | G.replace('request', 'exit') 147 | .replace('mozRequest', 'mozCancel') 148 | .replace('Request', 'Exit') 149 | r(window, 'resize', function () { 150 | L = x.clientWidth 151 | M = x.clientHeight 152 | S() 153 | }) 154 | L = x.clientWidth 155 | M = x.clientHeight 156 | } 157 | function ba(a) { 158 | T(a, 'title') 159 | T(a, 'n') 160 | T(a, 's') 161 | T(a, 'w') 162 | T(a, 'e') 163 | T(a, 'nw') 164 | T(a, 'ne') 165 | T(a, 'se') 166 | T(a, 'sw') 167 | r(a.g.getElementsByClassName('wb-min')[0], 'click', function (b) { 168 | t(b) 169 | a.minimize() 170 | }) 171 | r(a.g.getElementsByClassName('wb-max')[0], 'click', function (b) { 172 | t(b) 173 | a.focus().maximize() 174 | }) 175 | G 176 | ? r(a.g.getElementsByClassName('wb-full')[0], 'click', function (b) { 177 | t(b) 178 | a.focus().fullscreen() 179 | }) 180 | : a.addClass('no-full') 181 | r(a.g.getElementsByClassName('wb-close')[0], 'click', function (b) { 182 | t(b) 183 | a.close() 184 | a = null 185 | }) 186 | r( 187 | a.g, 188 | 'click', 189 | function () { 190 | a.focus() 191 | }, 192 | !1 193 | ) 194 | } 195 | function U(a) { 196 | y.splice(y.indexOf(a), 1) 197 | S() 198 | a.removeClass('min') 199 | a.min = !1 200 | a.g.title = '' 201 | } 202 | function S() { 203 | for (var a = y.length, b = 0, c, g; b < a; b++) 204 | (c = y[b]), 205 | (g = Math.min((L - 2 * c.left) / a, 250)), 206 | c 207 | .resize((g + 1) | 0, 35, !0) 208 | .move((c.left + b * g) | 0, M - c.bottom - 35, !0) 209 | } 210 | function T(a, b) { 211 | function c(d) { 212 | t(d) 213 | a.min 214 | ? (U(a), a.resize().move().focus()) 215 | : (w(a.g, 'transition', 'none'), 216 | (z = d.touches) && (z = z[0]) 217 | ? ((d = z), r(window, 'touchmove', g), r(window, 'touchend', f)) 218 | : (r(window, 'mousemove', g), r(window, 'mouseup', f)), 219 | (H = d.pageX), 220 | (D = d.pageY), 221 | a.focus()) 222 | } 223 | function g(d) { 224 | t(d) 225 | z && (d = d.touches[0]) 226 | var I = d.pageX 227 | d = d.pageY 228 | var l = I - H, 229 | m = d - D, 230 | E 231 | if ('title' === b) { 232 | a.x += l 233 | a.y += m 234 | var n = (E = 1) 235 | } else { 236 | if ('e' === b || 'se' === b || 'ne' === b) { 237 | a.width += l 238 | var p = 1 239 | } else if ('w' === b || 'sw' === b || 'nw' === b) 240 | (a.x += l), (a.width -= l), (n = p = 1) 241 | if ('s' === b || 'se' === b || 'sw' === b) { 242 | a.height += m 243 | var v = 1 244 | } else if ('n' === b || 'ne' === b || 'nw' === b) 245 | (a.y += m), (a.height -= m), (E = v = 1) 246 | } 247 | if (p || v) 248 | p && (a.width = Math.max(Math.min(a.width, L - a.x - a.right), 150)), 249 | v && 250 | (a.height = Math.max(Math.min(a.height, M - a.y - a.bottom), 35)), 251 | a.resize() 252 | if (n || E) 253 | n && (a.x = Math.max(Math.min(a.x, L - a.width - a.right), a.left)), 254 | E && (a.y = Math.max(Math.min(a.y, M - a.height - a.bottom), a.top)), 255 | a.move() 256 | H = I 257 | D = d 258 | } 259 | function f(d) { 260 | t(d) 261 | w(a.g, 'transition', '') 262 | z 263 | ? (window.removeEventListener('touchmove', g, !0), 264 | window.removeEventListener('touchend', f, !0)) 265 | : (window.removeEventListener('mousemove', g, !0), 266 | window.removeEventListener('mouseup', f, !0)) 267 | } 268 | var u = a.g.getElementsByClassName('wb-' + b)[0], 269 | z, 270 | H, 271 | D 272 | r(u, 'mousedown', c) 273 | r(u, 'touchstart', c, { passive: !1 }) 274 | } 275 | e = O.prototype 276 | e.mount = function (a) { 277 | this.unmount() 278 | a.h || (a.h = a.parentNode) 279 | this.body.textContent = '' 280 | this.body.appendChild(a) 281 | return this 282 | } 283 | e.unmount = function (a) { 284 | var b = this.body.firstChild 285 | if (b) { 286 | var c = a || b.h 287 | c && c.appendChild(b) 288 | b.h = a 289 | } 290 | return this 291 | } 292 | e.setTitle = function (a) { 293 | a = this.title = a 294 | this.g.getElementsByClassName('wb-title')[0].firstChild.nodeValue = a 295 | return this 296 | } 297 | e.setBackground = function (a) { 298 | w(this.g, 'background', a) 299 | return this 300 | } 301 | e.setUrl = function (a) { 302 | this.body.innerHTML = '' 303 | return this 304 | } 305 | e.focus = function () { 306 | F !== this && 307 | (w(this.g, 'z-index', B++), 308 | this.addClass('focus'), 309 | F && (F.removeClass('focus'), F.i && F.i()), 310 | (F = this), 311 | this.l && this.l()) 312 | return this 313 | } 314 | e.hide = function () { 315 | return this.addClass('hide') 316 | } 317 | e.show = function () { 318 | return this.removeClass('hide') 319 | } 320 | e.minimize = function (a) { 321 | C && V() 322 | !a && this.min 323 | ? (U(this), this.resize().move()) 324 | : !1 === a || 325 | this.min || 326 | (y.push(this), 327 | S(), 328 | (this.g.title = this.title), 329 | this.addClass('min'), 330 | (this.min = !0)) 331 | this.max && (this.removeClass('max'), (this.max = !1)) 332 | return this 333 | } 334 | e.maximize = function (a) { 335 | if ('undefined' === typeof a || a !== this.max) 336 | this.min && U(this), 337 | (this.max = !this.max) 338 | ? this.addClass('max') 339 | .resize( 340 | L - this.left - this.right, 341 | M - this.top - this.bottom, 342 | !0 343 | ) 344 | .move(this.left, this.top, !0) 345 | : this.resize().move().removeClass('max') 346 | return this 347 | } 348 | e.fullscreen = function (a) { 349 | if ('undefined' === typeof a || a !== C) 350 | this.min && (this.resize().move(), U(this)), 351 | (C && V()) || (this.body[G](), (C = !0)) 352 | return this 353 | } 354 | function V() { 355 | C = !1 356 | if ( 357 | document.fullscreen || 358 | document.fullscreenElement || 359 | document.webkitFullscreenElement || 360 | document.mozFullScreenElement 361 | ) 362 | return document[K](), !0 363 | } 364 | e.close = function () { 365 | this.min && U(this) 366 | this.j && this.j() 367 | this.unmount() 368 | this.g.parentNode.removeChild(this.g) 369 | F === this && (F = null) 370 | } 371 | e.move = function (a, b, c) { 372 | 'undefined' === typeof a 373 | ? ((a = this.x), (b = this.y)) 374 | : c || 375 | ((this.x = a ? (a = R(a, L - this.left - this.right, this.width)) : 0), 376 | (this.y = b ? (b = R(b, M - this.top - this.bottom, this.height)) : 0)) 377 | w(this.g, 'transform', 'translate(' + a + 'px,' + b + 'px)') 378 | this.o && this.o(a, b) 379 | return this 380 | } 381 | e.resize = function (a, b, c) { 382 | 'undefined' === typeof a 383 | ? ((a = this.width), (b = this.height)) 384 | : c || 385 | ((this.width = a ? (a = R(a, L - this.left - this.right)) : 0), 386 | (this.height = b ? (b = R(b, M - this.top - this.bottom)) : 0)) 387 | w(this.g, 'width', a + 'px') 388 | w(this.g, 'height', b + 'px') 389 | this.m && this.m(a, b) 390 | return this 391 | } 392 | e.addClass = function (a) { 393 | this.g.classList.add(a) 394 | return this 395 | } 396 | e.removeClass = function (a) { 397 | this.g.classList.remove(a) 398 | return this 399 | } 400 | window.WinBox = O 401 | }.call(this)) 402 | --------------------------------------------------------------------------------