diff --git a/.htaccess b/.htaccess new file mode 100644 index 0000000..ce4dcdb --- /dev/null +++ b/.htaccess @@ -0,0 +1,9 @@ +RewriteEngine On +RewriteBase / + +DirectoryIndex /www/index.html + +RewriteCond %{REQUEST_URI} !^/www/ +RewriteCond %{REQUEST_FILENAME} !-d +RewriteCond %{REQUEST_FILENAME}\.html -f +RewriteRule ^(.+)$ /www/$1.html [L] \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..f673a71 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5502 +} \ No newline at end of file diff --git a/assets/component.html b/assets/component.html deleted file mode 100644 index 52befd2..0000000 --- a/assets/component.html +++ /dev/null @@ -1,18 +0,0 @@ -
- ${for( - object.length:: -
- -
- ${object[i].text} -
-
- - )} -
\ No newline at end of file diff --git a/assets/link_block.html b/assets/link_block.html new file mode 100644 index 0000000..0f5ed3a --- /dev/null +++ b/assets/link_block.html @@ -0,0 +1,34 @@ +
+
Include via link
+
+

+ Include PixelbiteCSS via including link to specific version. You can select minified or classic version or try experimental version for your own project. +

+ Select version: +

+ +
+
+
+
+
+
+
+
<link rel="stylesheet" href="${object[0].css}">
+
+
+
+
+
+
+
+
<script src="${object[0].js}"></script>
+
+
\ No newline at end of file diff --git a/assets/object.json b/assets/object.json index 96a3511..a718df1 100644 --- a/assets/object.json +++ b/assets/object.json @@ -11,6 +11,18 @@ "css": "https://pixelbite-css.github.io/pixelbite-css/style/pixelbite.css", "js": "https://pixelbite-css.github.io/pixelbite-css/script/pixelbite.js" }, + { + "version": "1.6-min", + "text": "Components support + Github Markdown (minified)", + "css": "https://pixelbite-css.github.io/pixelbite-css/style/1.6/pixelbite-min.css", + "js": "https://pixelbite-css.github.io/pixelbite-css/script/1.6/pixelbite-min.js" + }, + { + "version": "1.6", + "text": "Components support + Github Markdown", + "css": "https://pixelbite-css.github.io/pixelbite-css/style/1.6/pixelbite.css", + "js": "https://pixelbite-css.github.io/pixelbite-css/script/1.6/pixelbite.js" + }, { "version": "1.5.2-min", "text": "Components support + Github Markdown (minified)", diff --git a/assets/title_icon.html b/assets/title_icon.html new file mode 100644 index 0000000..43e3ecb --- /dev/null +++ b/assets/title_icon.html @@ -0,0 +1,3 @@ +
+ +
\ No newline at end of file diff --git a/index.css b/index.css index 2c56045..d882a2f 100644 --- a/index.css +++ b/index.css @@ -1 +1 @@ -@import url(https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap);@import url(https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap);code,pre{font-family:var(--font-mono-family)}*,body,button,pre span{position:relative}.buttonOutline,a{color:var(--primary-color)}.label,button{font-weight:600}.label,.label:hover{text-decoration:none}.slider:after,.slider:before{pointer-events:none;transition:.2s}.pointer,.slider,button{cursor:pointer}:root{--font-family:'Poppins',sans-serif;--font-mono-family:'Fira Mono',monospace;--primary-color:#5920B0;--secondary-color:#9575C6;--success-color:#60D130;--danger-color:#D13030;--warning-color:#DFAF2A;--info-color:#26C7E7}*{box-sizing:border-box;font-family:var(--font-family);max-width:100%;scroll-behavior:smooth}:focus{outline:1px solid var(--secondary-color)}code:focus{outline:0}body,html{margin:0;padding:0;width:100%;min-height:100%}body{overflow-y:auto}a{fill:var(--primary-color);transition:color .2s,transform .2s,text-decoration .2s,opacity .2s}a:hover{transform:scale(1.02);opacity:.5}.paragraph,h1,h2,h3,h4{margin:0 0 .5rem}h1{font-size:42px}h2{font-size:32px}h3{font-size:28px}h4{font-size:22px}h5{font-size:18px}pre{overflow:auto;color:var(--secondary-color);width:100%;counter-reset:line}.codeblock{padding:16px 22px;background:rgba(128,128,128,.02);overflow:auto;border-radius:4px;border:1px solid var(--secondary-color)}pre span{counter-increment:line;font:var(--font-mono-family);text-align:right}pre.numberedLines span::before{content:counter(line);display:inline-block;width:1em;margin-right:1em;color:rgba(128,128,128,.6);font:var(--font-mono-family);-webkit-user-select:none}pre span.highlight::after{content:'';position:absolute;left:0;top:0;width:100%;height:100%;box-shadow:inset 0 20px 42px -30px var(--info-color),inset 0 -20px 42px -30px var(--info-color),inset 4px 0 0 var(--info-color);opacity:1;z-index:-1}table{border-collapse:collapse;border-spacing:0}table td{border:1px solid #000}button{padding:.6rem 1rem;transition:opacity .2s,box-shadow .1s;border:none;background:var(--primary-color);color:#fff;border-radius:.2rem;opacity:.8}button:hover{opacity:1}button:active{transform:scale(1.01);box-shadow:0 0 10px rgba(128,128,128,.1)}input{padding:.6rem .8rem;border-radius:4px;border:1px solid rgba(128,128,128,.5);transition:.2s}.floatInput>input{padding:1.4rem 1rem .6rem;font-weight:400;font-size:18px;border:1px solid rgba(128,128,128,.5);box-shadow:0 0 0 var(--secondary-color);transition:.2s}input:focus{border:1px solid rgba(128,128,128,.9);outline:0;box-shadow:0 0 0 3px var(--secondary-color)}.floatInput>label{position:absolute;opacity:.5;top:1.2rem;left:1.2rem;transform:scale(1);transition:transform .2s,top .2s,left .2s}.floatInput .inputhastext,.floatInput:focus-within label{top:.2rem;left:.86rem;transform:scale(.9)}.sticky{top:0;left:0;position:sticky;position:-webkit-sticky}img{object-fit:cover}.auto-width{width:1200px;margin:0 auto;padding:0 14px}.auto-menu-button{display:none}.hidden{display:none!important}.fixed{z-index:9;position:fixed;top:0;left:0}.close-x{position:absolute;top:12px;right:12px;background:0 0;width:32px;height:32px}.label,.slideshow{position:relative}.close-x:after,.close-x:before{content:'';position:absolute;border-right:2px solid gray;border-top:2px solid gray;width:10px;height:10px}.close-x:after{transform:rotate(45deg);top:10px;left:3px}.close-x:before{transform:rotate(-135deg);top:10px;left:18px}.loader-page,.slide-shadow:before,.slide>img,.slider:before{left:0;height:100%;top:0}.buttonOutline{padding:.5rem .9rem;background:0 0;border:.1rem var(--primary-color) solid}.buttonHoverDark{box-shadow:inset 0 0 0 6000px rgba(128,128,128,0);transition:box-shadow .2s}.modal,.shadow{box-shadow:0 0 20px rgba(0,0,0,.2)}.buttonHoverDark:hover{box-shadow:inset 0 0 0 6000px rgba(128,128,128,.1)}.flex,.flexAlignItems,.flexBottom,.flexCenter,.flexColumn,.flexDirection,.flexJustifyContent,.flexLeft,.flexMiddle,.flexRight,.flexRow,.flexTop{display:flex;flex-wrap:nowrap;align-items:center}.flexCenter{justify-content:center}.flexMiddle{align-items:center}.flex-column,.flexColumn{flex-direction:column}.flex-row,.flexRow{flex-direction:row}.flexSpaceBetween{justify-content:space-between}.flexWrap{flex-wrap:wrap}.flexNowrap{flex-wrap:nowrap}.flexWrapReverse{flex-wrap:wrap-reverse}.flexLeft{align-items:flex-start}.flexRight{align-items:flex-end}.flexTop{justify-content:flex-start}.flexBottom{justify-content:flex-end}.fullWidth,.searchbar>input{width:100%}.fullHeight{height:100%}.windowWidth{width:100vw}.windowHeight{height:100vh}.grid{display:grid}.label{top:-3px;color:gray;display:inline-block;padding:.1rem .2rem;font-size:10px;background:0 0;border:.1rem solid gray;border-radius:.2rem}.modal,.modal-hover{border-radius:8px;overflow:hidden}.slideshow{overflow:hidden}.searchbar>div,.slide,.slide>img,.slider:after,.slider:before{position:absolute}.slide{width:100%;height:100%;overflow:hidden;transition:left .5s}.slide>img{opacity:1;width:100%}.slide>div{z-index:2}.slide-shadow:before{display:flex;z-index:1;position:absolute;box-shadow:inset 0 -800px 500px -500px rgba(255,255,255,.9);width:100%;content:''}.textOverflow{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.modal{background-color:#fff;font-size:16px}.modal-hover{transition:background-color .2s}.modal-hover:hover{background-color:rgba(128,128,128,.1);overflow:hidden;font-size:16px}.slider{position:relative;aspect-ratio:2/1;width:62px}.slider:before{content:'';width:100%;background:gray;border-radius:9999999px}.slider:after{content:'';height:calc(100% - .4rem);top:0;left:0;aspect-ratio:1/1;background:#fff;border:.2rem solid gray;border-radius:9999999px}.slider:checked:after{left:50%;border:.2rem solid var(--info-color)}.slider:checked:before{background:var(--info-color)}.slider:focus-within{box-shadow:none}.searchbar{position:relative}.searchbar>div{width:100%;transition:.2s;overflow-x:hidden;overflow-y:auto;height:0;display:flex;align-items:center;justify-content:center;flex-direction:column;z-index:4}.searchbar:focus-within>div{border-left:1px solid gray;border-right:1px solid gray;border-bottom:1px solid gray;border-radius:0 0 8px 8px;width:100%;height:auto;max-height:600%}.search-values>div{width:100%;background:#fff;padding:8px 16px;transition:background-color .2s;box-shadow:inset 0 -20px 20px rgba(128,128,128,.07);cursor:pointer}.search-values>div:hover{background:#e9e9e9}.line{width:100%;padding:1px;margin:0 20px;background-color:var(--secondary-color);border-radius:5000px}.loader-icon,.loader-icon:after{border-radius:50%;border-top:4px solid transparent}.loader,.loader-page{transition:.4s}.loader-page{width:100%;position:fixed;z-index:9999;background:#fff}.loader-icon{width:32px;height:32px;border-left:4px var(--secondary-color) solid;border-bottom:4px var(--secondary-color) solid;border-right:4px var(--secondary-color) solid;animation:2s ease-in-out infinite rotate}.loader-icon:after{content:'';display:block;position:relative;top:-17px;left:-17px;width:50px;height:50px;border-left:4px var(--primary-color) solid;border-bottom:4px var(--primary-color) solid;border-right:4px var(--primary-color) solid;animation:2.5s ease-in-out infinite rotate}.loader-line{background:-webkit-repeating-linear-gradient(45deg,#fff 0,#fff 33%,#dedede 33%,#dedede 66%,#fff 66%,#fff 100%);background:-o-repeating-linear-gradient(45deg,#fff 0,#fff 33%,#dedede 33%,#dedede 66%,#fff 66%,#fff 100%);background:-moz-repeating-linear-gradient(45deg,#fff 0,#fff 33%,#dedede 33%,#dedede 66%,#fff 66%,#fff 100%);background:repeating-linear-gradient(45deg,#fff 0,#fff 33%,#dedede 33%,#dedede 66%,#fff 66%,#fff 100%);background-size:24px;width:200px;height:8px;border:1px solid rgba(128,128,128,.5);border-radius:50px;animation:2s linear infinite toSide}@keyframes toSide{from{background-position-x:0}to{background-position-x:100%}}@keyframes rotate{from{transform:rotate(0)}to{transform:rotate(720deg)}}@media only screen and (max-width:1200px){.auto-width{width:1000px}}@media only screen and (max-width:1000px){.auto-width{width:100%;padding-left:14px;padding-right:14px}.auto-menu,.auto-menu>*{flex-direction:column;gap:12px}.auto-menu-button{display:flex}.header{flex-direction:column;flex-wrap:wrap;justify-content:center;align-items:center}}@media only screen and (max-width:900px){.sticky{position:relative}.dashboard{display:flex;justify-content:center;align-items:center;flex-direction:column;height:auto;gap:0;width:100%}.dashboard-menu,.dashboard-menu>div{flex-direction:row}.dashboard>div{padding:0;margin:0;gap:0;width:100%!important}}@media only screen and (max-width:800px){.auto-size,.auto-size>div{width:100%!important}.auto-size>div{margin-top:12px;margin-bottom:12px}} \ No newline at end of file +@import url(https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap);@import url(https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap);code,pre{font-family:var(--font-mono-family)}*,body,button,pre span{position:relative}.buttonOutline,a{color:var(--primary-color)}.label,button{font-weight:600}.label,.label:hover{text-decoration:none}.dropdown>div>div,.pointer,.slider,button{cursor:pointer}:root{--font-family:'Poppins',sans-serif;--font-mono-family:'Fira Mono',monospace;--primary-color:#5920B0;--secondary-color:#9575C6;--success-color:#60D130;--danger-color:#D13030;--warning-color:#DFAF2A;--info-color:#26C7E7}*{box-sizing:border-box;font-family:var(--font-family);max-width:100%;scroll-behavior:smooth}:focus{outline:1px solid var(--secondary-color)}.noselect{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}code:focus{outline:0}body,html{margin:0;padding:0;width:100%;min-height:100%}body{overflow-y:auto}a{fill:var(--primary-color);transition:color .2s,transform .2s,text-decoration .2s,opacity .2s}a:hover{transform:scale(1.02);opacity:.5}.paragraph,h1,h2,h3,h4{margin:0 0 .5rem}h1{font-size:42px}h2{font-size:32px}h3{font-size:28px}h4{font-size:22px}h5{font-size:18px}pre{overflow:auto;color:var(--secondary-color);width:100%;counter-reset:line}.codeblock{padding:16px 22px;background:rgba(128,128,128,.02);overflow:auto;border-radius:4px;border:1px solid var(--secondary-color)}pre span{counter-increment:line;font:var(--font-mono-family);text-align:right}pre.numberedLines span::before{content:counter(line);display:inline-block;width:1em;margin-right:1em;color:rgba(128,128,128,.6);font:var(--font-mono-family);-webkit-user-select:none}pre span.highlight::after{content:'';position:absolute;left:0;top:0;width:100%;height:100%;box-shadow:inset 0 20px 42px -30px var(--info-color),inset 0 -20px 42px -30px var(--info-color),inset 4px 0 0 var(--info-color);opacity:1;z-index:-1}table{border-collapse:collapse;border-spacing:0}table td{border:1px solid #000}button{padding:.6rem 1rem;transition:opacity .2s,box-shadow .1s;border:none;background:var(--primary-color);color:#fff;border-radius:.2rem;opacity:.8}button:hover{opacity:1}button:active{transform:scale(1.01);box-shadow:0 0 10px rgba(128,128,128,.1)}input{padding:.6rem .8rem;border-radius:4px;border:1px solid rgba(128,128,128,.5);transition:.2s}.floatInput>input{padding:1.4rem 1rem .6rem;font-weight:400;font-size:18px;border:1px solid rgba(128,128,128,.5);box-shadow:0 0 0 var(--secondary-color);transition:.2s}input:focus{border:1px solid rgba(128,128,128,.9);outline:0;box-shadow:0 0 0 3px var(--secondary-color)}.floatInput>label{position:absolute;opacity:.5;top:1.2rem;left:1.2rem;transform:scale(1);transition:transform .2s,top .2s,left .2s}.floatInput .inputhastext,.floatInput:focus-within label{top:.2rem;left:.86rem;transform:scale(.9)}.sticky{top:0;left:0;position:sticky;position:-webkit-sticky}img{object-fit:cover}.auto-width{width:1200px;margin:0 auto;padding:0 14px}.auto-menu-button{display:none}.hidden{display:none!important}.fixed{z-index:9;position:fixed;top:0;left:0}.close-x{position:absolute;top:12px;right:12px;background:0 0;width:32px;height:32px}.label,.slideshow{position:relative}.close-x:after,.close-x:before{content:'';position:absolute;border-right:2px solid gray;border-top:2px solid gray;width:10px;height:10px}.close-x:after{transform:rotate(45deg);top:10px;left:3px}.close-x:before{transform:rotate(-135deg);top:10px;left:18px}.loader-page,.slide-shadow:before,.slide>img,.slider:before{left:0;height:100%;top:0}.buttonOutline{padding:.5rem .9rem;background:0 0;border:.1rem var(--primary-color) solid}.buttonHoverDark{box-shadow:inset 0 0 0 6000px rgba(128,128,128,0);transition:box-shadow .2s}.modal,.shadow{box-shadow:0 0 20px rgba(0,0,0,.2)}.buttonHoverDark:hover{box-shadow:inset 0 0 0 6000px rgba(128,128,128,.1)}.flex,.flexAlignItems,.flexBottom,.flexCenter,.flexColumn,.flexDirection,.flexJustifyContent,.flexLeft,.flexMiddle,.flexRight,.flexRow,.flexTop{display:flex;flex-wrap:nowrap;align-items:center}.flexCenter{justify-content:center}.flexMiddle{align-items:center}.flex-column,.flexColumn{flex-direction:column}.flex-row,.flexRow{flex-direction:row}.flexSpaceBetween{justify-content:space-between}.flexWrap{flex-wrap:wrap}.flexNowrap{flex-wrap:nowrap}.flexWrapReverse{flex-wrap:wrap-reverse}.flexLeft{align-items:flex-start}.flexRight{align-items:flex-end}.flexTop{justify-content:flex-start}.flexBottom{justify-content:flex-end}.fullWidth,.searchbar>input{width:100%}.fullHeight{height:100%}.windowWidth{width:100vw}.windowHeight{height:100vh}.grid{display:grid}.label{top:-3px;color:gray;display:inline-block;padding:.1rem .2rem;font-size:10px;background:0 0;border:.1rem solid gray;border-radius:.2rem}.modal,.modal-hover{border-radius:8px;overflow:hidden}.slideshow{overflow:hidden}.dropdown>div,.searchbar>div,.slide,.slide>img,.slider:after,.slider:before{position:absolute}.slide{width:100%;height:100%;overflow:hidden;transition:left .5s}.slide>img{opacity:1;width:100%}.slide>div{z-index:2}.slide-shadow:before{display:flex;z-index:1;position:absolute;box-shadow:inset 0 -800px 500px -500px rgba(255,255,255,.9);width:100%;content:''}.textOverflow{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.modal{background-color:#fff;font-size:16px}.modal-hover{transition:background-color .2s}.modal-hover:hover{background-color:rgba(128,128,128,.1);overflow:hidden;font-size:16px}.slider{position:relative;aspect-ratio:2/1;width:62px}.slider:before{content:'';width:100%;background:gray;border-radius:9999999px;pointer-events:none;transition:.2s}.slider:after{content:'';height:calc(100% - .4rem);top:0;left:0;aspect-ratio:1/1;background:#fff;border:.2rem solid gray;border-radius:9999999px;pointer-events:none;transition:.2s}.dropdown,.searchbar{position:relative}.slider:checked:after{left:50%;border:.2rem solid var(--info-color)}.slider:checked:before{background:var(--info-color)}.slider:focus-within{box-shadow:none}.searchbar>div{width:100%;transition:.2s;overflow-x:hidden;overflow-y:auto;height:0;display:flex;align-items:center;justify-content:center;flex-direction:column;z-index:4}.searchbar:focus-within>div{border-left:1px solid gray;border-right:1px solid gray;border-bottom:1px solid gray;border-radius:0 0 8px 8px;width:100%;height:auto;max-height:600%}.search-values>div{width:100%;background:#fff;padding:8px 16px;transition:background-color .2s;box-shadow:inset 0 -20px 20px rgba(128,128,128,.07);cursor:pointer}.search-values>div:hover{background:#e9e9e9}.dropdown>div>div{color:#000;background:#fff;padding:6px 32px 6px 10px;width:auto;transition:.2s;font-size:14px}.dropdown>div>div:hover{background:#ddd}.dropdown>div{border:1px solid gray;border-radius:6px;flex-direction:column!important;overflow:hidden}.dropdown{z-index:50}.dropdown>button{min-width:128px}.line{width:100%;padding:1px;margin:0 20px;background-color:var(--secondary-color);border-radius:5000px}.loader-icon,.loader-icon:after{border-radius:50%;border-top:4px solid transparent}.loader,.loader-page{transition:.4s}.loader-page{width:100%;position:fixed;z-index:9999;background:#fff}.loader-icon{width:32px;height:32px;border-left:4px var(--secondary-color) solid;border-bottom:4px var(--secondary-color) solid;border-right:4px var(--secondary-color) solid;animation:2s ease-in-out infinite rotate}.loader-icon:after{content:'';display:block;position:relative;top:-17px;left:-17px;width:50px;height:50px;border-left:4px var(--primary-color) solid;border-bottom:4px var(--primary-color) solid;border-right:4px var(--primary-color) solid;animation:2.5s ease-in-out infinite rotate}.loader-line{background:-webkit-repeating-linear-gradient(45deg,#fff 0,#fff 33%,#dedede 33%,#dedede 66%,#fff 66%,#fff 100%);background:-o-repeating-linear-gradient(45deg,#fff 0,#fff 33%,#dedede 33%,#dedede 66%,#fff 66%,#fff 100%);background:-moz-repeating-linear-gradient(45deg,#fff 0,#fff 33%,#dedede 33%,#dedede 66%,#fff 66%,#fff 100%);background:repeating-linear-gradient(45deg,#fff 0,#fff 33%,#dedede 33%,#dedede 66%,#fff 66%,#fff 100%);background-size:24px;width:200px;height:8px;border:1px solid rgba(128,128,128,.5);border-radius:50px;animation:2s linear infinite toSide}@keyframes toSide{from{background-position-x:0}to{background-position-x:100%}}@keyframes rotate{from{transform:rotate(0)}to{transform:rotate(720deg)}}@media only screen and (max-width:1200px){.auto-width{width:1000px}}@media only screen and (max-width:1000px){.auto-width{width:100%;padding-left:14px;padding-right:14px}.auto-menu,.auto-menu>*{flex-direction:column;gap:12px}.auto-menu-button{display:flex}.header{flex-direction:column;flex-wrap:wrap;justify-content:center;align-items:center}}@media only screen and (max-width:900px){.sticky{position:relative}.dashboard{display:flex;justify-content:center;align-items:center;flex-direction:column;height:auto;gap:0;width:100%}.dashboard-menu,.dashboard-menu>div{flex-direction:row}.dashboard>div{padding:0;margin:0;gap:0;width:100%!important}}@media only screen and (max-width:800px){.auto-size,.auto-size>div{width:100%!important}.auto-size>div{margin-top:12px;margin-bottom:12px}} \ No newline at end of file diff --git a/index.html b/index.html index 67d5a5d..60b9b17 100644 --- a/index.html +++ b/index.html @@ -6,15 +6,22 @@ - +
-
-
-
Select version
- - +
+
+
- Go back +
+
+ +
+
+

+ Start using PixelbiteCSS now by selecting version you want to use or you can optionally donwload library via npm or Github. +

+ Read installation docs +

diff --git a/index.js b/index.js index cb7e007..306ebb9 100644 --- a/index.js +++ b/index.js @@ -1 +1 @@ -const class_library=[["c","color"],["p","padding"],["pos","position"],["o","opacity"],["pt","padding-top"],["pb","padding-bottom"],["pl","padding-left"],["pr","padding-right"],["m","margin"],["mt","margin-top"],["mb","margin-bottom"],["ml","margin-left"],["mr","margin-right"],["g","gap"],["ar","aspect-ratio"],["d","display"],["w","width"],["h","height"],["maxW","max-width"],["maxH","max-height"],["minW","min-width"],["minH","min-height"],["border","border"],["b","border"],["bleft","border-left"],["bright","border-right"],["btop","border-top"],["bbottom","border-bottom"],["br","border-radius"],["bg","background"],["ta","text-align"],["ff","font-family"],["fs","font-size"],["fw","font-weight"],["td","text-decoration"],["fill","fill"],["of","overflow"],["ofx","overflow-x"],["ofy","overflow-y"],["flex","flex"],["flexDirection","flex-direction"],["flexWrap","flex-wrap"],["flexItems","align-items"],["flexContent","align-content"],["flexJustifyContent","justify-content"],["flexAlignItems","align-items"],["gridColumns","grid-template-columns"],["gridRows","grid-template-rows"],["shadow","box-shadow"],["top","top"],["bottom","bottom"],["left","left"],["right","right"],["ws","word-spacing"],["ls","letter-spacing"],["lh","line-height"],["zIndex","z-index"],],pb_getRootVariable=e=>getComputedStyle(document.documentElement).getPropertyValue(e).toString(),pb_putCustomFontIntoCSS=(e,t)=>{let a=document.createElement("style");a.appendChild(document.createTextNode("@font-face {font-family: "+e+"; src: "+t+";}")),document.head.appendChild(a)};var pixelbite={classes:class_library,theme:{variables:{primary:pb_getRootVariable("--primary-color").toString(),secondary:pb_getRootVariable("--secondary-color").toString(),danger:pb_getRootVariable("--danger-color").toString(),info:pb_getRootVariable("--info-color").toString(),warning:pb_getRootVariable("--warning-color").toString(),success:pb_getRootVariable("--success-color").toString(),fontPrimary:pb_getRootVariable("--font-family").toString(),fontMonospace:pb_getRootVariable("--font-mono-family").toString()},colors:{white:[0,"0%"],gray:[0,"0%"],black:[0,"0%"],red:[0,"100%"],orange:[36,"100%"],yellow:[59,"100%"],green:[108,"100%"],teal:[154,"100%"],cyan:[182,"100%"],blue:[235,"100%"],purple:[275,"100%"],pink:[300,"100%"]}},aliases:{},loremIpsum:["Hercle, species primus!","Indexs volare, tanquam emeritis nix.","Festus bulla vix locuss barcas est.","Domuss sunt equisos de flavum cedrium.","A falsis, diatria emeritis clabulare.","Medicinas sunt menss de pius nuclear vexatum iacere.","Verpas sunt plasmators de brevis pes.","Placidus, alter nuclear vexatum iaceres patienter talem de nobilis, noster cursus.","Ubi est azureus castor?","Cum abnoba resistere, omnes hilotaees examinare pius, emeritis poetaes.","Ubi est bi-color lanista?","Stellas prarere in ostravia!","Ausus peregrinationess, tanquam talis mensa.","Est teres deus, cesaris.","Est dexter animalis, cesaris.","Finis albus eleates est.","Bassus consilium interdum captiss accentor est.","Fuga noceres, tanquam castus racana.","Contencio, byssus, et tata.","Sunt guttuses gratia ferox, velox decores.","Elogium mirabilis abactor est.","Nunquam magicae mensa.","Pol, a bene historia.","Ubi est raptus acipenser?","Mensa, ratione, et vortex.","Rumors cantare!","Decors volare!","Fluctuss peregrinationes!","Cum agripeta credere, omnes silvaes transferre domesticus, clemens sectames.","Lapsus de domesticus era, manifestum lanista!","Cur clabulare ridetis?","Nam quis nulla.","Deuss observare, tanquam albus domus.","A falsis, planeta rusticus visus.","Primus seculas ducunt ad orgia.","Pol, a bene guttus, magnum glos!","Ortum satis ducunt ad fortis candidatus.","Neuter, alter fraticinidas unus attrahendam de teres, fortis rumor.","Devatios ortum!","Cadunt saepe ducunt ad primus imber.","Ubi est camerarius species?","Vae.","Genetrixs sunt adiurators de nobilis exemplar.","Nullam rhoncus aliquam metus.","Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci.","Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien.","In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero.","Mauris suscipit.","Etiam sapien elit, consequat eget.","Etiam neque.","Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?","Integer in sapien.","Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo.","Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam.","Duis condimentum augue id magna semper rutrum.","Nullam lectus justo, vulputate eget mollis sed, tempor sed magna.","Jsi cool člověk.","Fusce aliquam vestibulum ipsum.","Aliquam erat volutpat.","Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien.",],update:500,markdowns:{github:[{pattern:/^((?: )*)((?:-|\*|\+)\s|\d+\.\s)(.*)$/gm,replacement:function(e,t,a,l){let s=/ /g,r=t.match(s);return"
  • "+l+"
  • "}},{pattern:/<\/li>\n
  • /g,replacement:"
  • \n$&"},{pattern:/^(\t*)<\/li>\n<\/ul>/gm,replacement:"$1\n$1"},{pattern:/^(\t*)<\/li>\n<\/ol>/gm,replacement:"$1\n$1"},{pattern:/^(\t*)<\/li>\n<\/li>/gm,replacement:"$1\n$1
  • "},{pattern:/^(\t*)<\/ul>\n
      /gm,replacement:"$1
    \n$1
      "},{pattern:/^(\t*)<\/ol>\n
        /gm,replacement:"$1
      \n$1
        "},{pattern:/^#{6}\s+(.*)$/gm,replacement:"
        $1
        "},{pattern:/^#{5}\s+(.*)$/gm,replacement:"
        $1
        "},{pattern:/^#{4}\s+(.*)$/gm,replacement:"

        $1

        "},{pattern:/^#{3}\s+(.*)$/gm,replacement:"

        $1

        "},{pattern:/^#{2}\s+(.*)$/gm,replacement:"

        $1

        "},{pattern:/^#{1}\s+(.*)$/gm,replacement:"

        $1

        "},{pattern:/```([\s\S]*?)```/g,replacement:function(e,t){return"```"+(t=t.replace(//g,">").replaceAll("*","*").replaceAll("_","_").replaceAll("[","["))+"```"}},{pattern:/^!~(.*?)$/gm,replacement:"$1"},{pattern:/^~~(.*?)$/gm,replacement:"$1"},{pattern:/~(.*?)~/g,replacement:'$1'},{pattern:/^- \[(x| )\]\s+(.*)$/gm,replacement:'
      1. $2
        • '},{pattern:/!\[([^\]]+)\]\(([^\s)]+)\)/g,replacement:'$1'},{pattern:/(\[([^\]]+)\])?\(([^)\s]+)(?:\s"([^"]+)")?\)/g,replacement:function(e,t,a,l,s){let r=a||l,i=s?' title="'+s+'"':"";return t?'"+r+"":"("+r+")"}},{pattern:/\*\*\*([^*]+)\*\*\*/g,replacement:"$1"},{pattern:/\*\*([^*]+)\*\*/g,replacement:"$1"},{pattern:/\*([^*]+)\*/g,replacement:"$1"},{pattern:/___([^*]+)___/g,replacement:"$1"},{pattern:/__([^_]+)__/g,replacement:"$1"},{pattern:/_([^_]+)_/g,replacement:"$1"},{pattern:/^>\s+(.*)$/gm,replacement:"
          $1
          "},{pattern:/```([\w-]+)?\n([\s\S]*?)\n```/gm,replacement:'
          $2
          '},{pattern:/`([^`]+)`/gm,replacement:'$1'},{pattern:/\n---\n/gm,replacement:"
          "},{pattern:/<\/li>\n\n/gm,replacement:"
          "},{pattern:/<\/div>\n\n/gm,replacement:"

  • "},{pattern:/<\/pre>\n\n/gm,replacement:"
    "},{pattern:/\n\n/gm,replacement:"

    "},]},version:"1.5.2"};const pb_getObjectValues=e=>Object.entries(e),pb_setCustomComponents=()=>{pb_customComponentsCheck(document.getElementsByTagName("*"))},pb_customComponentsCheck=(e,t)=>{t||(t="");for(let a=0;a{let a=[],l=pb_getObjectValues(pixelbite.markdowns);for(let s=0;s{r=r.replace(e,t)}),r},pb_includeHtmlToAnElement=async(element,path,attributes)=>{path||(path="null");let relativePathSplit=path.split("/"),relativePath="";for(let i=0;i';element.innerHTML='
    Component not found [path='+path+']
    - see more details
    "}}},componentRequest.open("GET",path,!0),componentRequest.send()};let darkmode=!1;window.addEventListener("load",async()=>{await pb_checkLoremIpsum(),darkmode=pb_getCookie("darkmode"),pb_checkChange(0),pb_setCustomComponents(),pb_slideshowGenerator()});const changeTheme=async()=>{await changeThemeMode()},changeThemeMode=async()=>{"0"===darkmode?(darkmode="1",pb_setCookie("darkmode","1",365)):(darkmode="0",pb_setCookie("darkmode","0",365))},pb_checkLoaders=async()=>{let e=document.getElementsByClassName("loader");if(e.length>0)for(let t=0;t{let e=document.getElementsByTagName("*");for(let t=0;t{let l=a.split("-");if("loremIpsum"===l[0]){for(let s=0;s{await pb_sleep(pixelbite.update),await pb_classGenerator(),e<=0&&pb_checkLoaders(),await pb_checkChange(e+1)},pb_sleep=e=>new Promise(t=>setTimeout(t,e));function pb_randomString(e){let t="",a="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",l=0;for(;le[Math.floor(Math.random()*e.length)];window.onload=()=>{console.log("%cThank you for using PixelbiteCSS :) (version "+pixelbite.version+")","font-size:18px;font-weight:bold"),console.log("%cMore information can be found on our website or GitHub\nhttps://pixelbite-css.github.io, https://github.com/Pixelbite-CSS","font-weight:bold"),pb_addSignature(),pb_classGenerator()};const pb_changeRootVariable=(e,t)=>{document.documentElement.style.setProperty(e,t)},pb_classGenerator=()=>{pb_checkLoremIpsum(),pixelbite.theme.variables.primary!==document.documentElement.style.getPropertyValue("--primary-color")&&pb_changeRootVariable("--primary-color",pixelbite.theme.variables.primary),pixelbite.theme.variables.secondary!==document.documentElement.style.getPropertyValue("--secondary-color")&&pb_changeRootVariable("--secondary-color",pixelbite.theme.variables.secondary),pixelbite.theme.variables.success!==document.documentElement.style.getPropertyValue("--success-color")&&pb_changeRootVariable("--success-color",pixelbite.theme.variables.success),pixelbite.theme.variables.info!==document.documentElement.style.getPropertyValue("--info-color")&&pb_changeRootVariable("--info-color",pixelbite.theme.variables.info),pixelbite.theme.variables.danger!==document.documentElement.style.getPropertyValue("--danger-color")&&pb_changeRootVariable("--danger-color",pixelbite.theme.variables.danger),pixelbite.theme.variables.warning!==document.documentElement.style.getPropertyValue("--warning-color")&&pb_changeRootVariable("--warning-color",pixelbite.theme.variables.warning),pixelbite.theme.variables.fontPrimary!==document.documentElement.style.getPropertyValue("--font-family")&&pb_changeRootVariable("--font-family",pixelbite.theme.variables.fontPrimary),pixelbite.theme.variables.fontMonospace!==document.documentElement.style.getPropertyValue("--font-mono-family")&&pb_changeRootVariable("--font-mono-family",pixelbite.theme.variables.fontMonospace);let e=document.getElementsByTagName("*");for(let t=0;t{for(let t=0;t=window.innerWidth&&(l[0]=l[0].split(":")[1]),l[0]===class_library[t][0]&&(a.style.cssText+=class_library[t][1]+":"+pb_classSplitToString(l,1)+";")}}),pb_updateSearchbars(),pb_generateFloatInput(a)}},pb_generateFloatInput=e=>{if(e.classList.contains("floatInput")&&e.getElementsByClassName("input")&&e.getElementsByClassName("label")&&e.getElementsByClassName("input")&&e.getElementsByTagName("label")){let t=e.getElementsByTagName("input")[0],a=e.getElementsByTagName("label")[0];t.value?a.classList.add("inputhastext"):a.classList.contains("inputhastext")&&a.classList.remove("inputhastext")}},pb_aliasClassReplace=e=>{let t=e.classList;for(let a=0;a{if(!e)return"";{let a=pb_getObjectValues(pixelbite.theme.variables),l=pb_getObjectValues(pixelbite.theme.colors),s="";for(let r=t;r"string"==typeof e&&!isNaN(e)&&!isNaN(parseFloat(e)),pb_colorConverter=e=>{let t=parseInt(e.substr(1,2),16),a=parseInt(e.substr(3,2),16),l=parseInt(e.substr(5,2),16);t/=255;let s=Math.max(t,a/=255,l/=255),r=Math.min(t,a,l),i,n,o=(s+r)/2;if(s==r)i=n=0;else{let p=s-r;switch(n=o>.5?p/(2-s-r):p/(s+r),s){case t:i=(a-l)/p+(a{let e=document.createComment("This site is created via PixelbiteCSS (https://github.com/Pixelbite-CSS)");document.body.appendChild(e)},debugmode=e=>{if(e){let t=document.getElementsByTagName("*");for(let a=0;a{t=t?"_blank":"_self",window.open(e,t)},toggleElement=e=>{let t=document.getElementsByClassName(e);for(let a=0;a{document.documentElement.style.setProperty(e,t)};let pb_beforeSlideshows=[];const pb_slideshowGenerator=async()=>{let e=document.getElementsByClassName("slideshow");if(e!==pb_beforeSlideshows&&e.length>0){for(let t=0;t{for(let l=0;l=a.length-1&&(e=-1),await pb_sleep(5e3),await pb_slideshowSlide(e+1,t,a)},pb_setCookie=(e,t,a)=>{let l=new Date;l.setTime(l.getTime()+864e5*a);let s="expires="+l.toUTCString();document.cookie=e+"="+t+";"+s+";path=/"},pb_getCookie=e=>{let t=e+"=",a=decodeURIComponent(document.cookie).split(";");for(let l=0;l{if(pb_searchbarsBefore.length!==document.getElementsByClassName("searchbar").length){let e=document.getElementsByClassName("searchbar");for(let t=0;t{let l=a.value.toLowerCase(),s=e[t].getElementsByClassName("search-values")[0].getElementsByTagName("div");for(let r=0;rgetComputedStyle(document.documentElement).getPropertyValue(e).toString(),pb_putCustomFontIntoCSS=(e,t)=>{let l=document.createElement("style");l.appendChild(document.createTextNode("@font-face {font-family: "+e+"; src: "+t+";}")),document.head.appendChild(l)};var pixelbite={classes:class_library,variables:{primary:pb_getRootVariable("--primary-color").toString(),secondary:pb_getRootVariable("--secondary-color").toString(),danger:pb_getRootVariable("--danger-color").toString(),info:pb_getRootVariable("--info-color").toString(),warning:pb_getRootVariable("--warning-color").toString(),success:pb_getRootVariable("--success-color").toString(),fontPrimary:pb_getRootVariable("--font-family").toString(),fontMonospace:pb_getRootVariable("--font-mono-family").toString()},colors:{white:[0,"0%"],gray:[0,"0%"],black:[0,"0%"],red:[0,"100%"],orange:[36,"100%"],yellow:[59,"100%"],green:[108,"100%"],teal:[154,"100%"],cyan:[182,"100%"],blue:[235,"100%"],purple:[275,"100%"],pink:[300,"100%"]},aliases:{},loremIpsum:["Hercle, species primus!","Indexs volare, tanquam emeritis nix.","Festus bulla vix locuss barcas est.","Domuss sunt equisos de flavum cedrium.","A falsis, diatria emeritis clabulare.","Medicinas sunt menss de pius nuclear vexatum iacere.","Verpas sunt plasmators de brevis pes.","Placidus, alter nuclear vexatum iaceres patienter talem de nobilis, noster cursus.","Ubi est azureus castor?","Cum abnoba resistere, omnes hilotaees examinare pius, emeritis poetaes.","Ubi est bi-color lanista?","Stellas prarere in ostravia!","Ausus peregrinationess, tanquam talis mensa.","Est teres deus, cesaris.","Est dexter animalis, cesaris.","Finis albus eleates est.","Bassus consilium interdum captiss accentor est.","Fuga noceres, tanquam castus racana.","Contencio, byssus, et tata.","Sunt guttuses gratia ferox, velox decores.","Elogium mirabilis abactor est.","Nunquam magicae mensa.","Pol, a bene historia.","Ubi est raptus acipenser?","Mensa, ratione, et vortex.","Rumors cantare!","Decors volare!","Fluctuss peregrinationes!","Cum agripeta credere, omnes silvaes transferre domesticus, clemens sectames.","Lapsus de domesticus era, manifestum lanista!","Cur clabulare ridetis?","Nam quis nulla.","Deuss observare, tanquam albus domus.","A falsis, planeta rusticus visus.","Primus seculas ducunt ad orgia.","Pol, a bene guttus, magnum glos!","Ortum satis ducunt ad fortis candidatus.","Neuter, alter fraticinidas unus attrahendam de teres, fortis rumor.","Devatios ortum!","Cadunt saepe ducunt ad primus imber.","Ubi est camerarius species?","Vae.","Genetrixs sunt adiurators de nobilis exemplar.","Nullam rhoncus aliquam metus.","Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci.","Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien.","In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero.","Mauris suscipit.","Etiam sapien elit, consequat eget.","Etiam neque.","Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?","Integer in sapien.","Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo.","Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam.","Duis condimentum augue id magna semper rutrum.","Nullam lectus justo, vulputate eget mollis sed, tempor sed magna.","Jsi cool člověk.","Fusce aliquam vestibulum ipsum.","Aliquam erat volutpat.","Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien.",],markdowns:{github:[{pattern:/^((?: )*)((?:-|\*|\+)\s|\d+\.\s)(.*)$/gm,replacement:function(e,t,l,a){let r=/ /g,s=t.match(r);return"
  • "+a+"
  • "}},{pattern:/<\/li>\n
  • /g,replacement:"
  • \n$&"},{pattern:/^(\t*)<\/li>\n<\/ul>/gm,replacement:"$1\n$1"},{pattern:/^(\t*)<\/li>\n<\/ol>/gm,replacement:"$1\n$1"},{pattern:/^(\t*)<\/li>\n<\/li>/gm,replacement:"$1\n$1
  • "},{pattern:/^(\t*)<\/ul>\n
      /gm,replacement:"$1
    \n$1
      "},{pattern:/^(\t*)<\/ol>\n
        /gm,replacement:"$1
      \n$1
        "},{pattern:/^#{6}\s+(.*)$/gm,replacement:"
        $1
        "},{pattern:/^#{5}\s+(.*)$/gm,replacement:"
        $1
        "},{pattern:/^#{4}\s+(.*)$/gm,replacement:"

        $1

        "},{pattern:/^#{3}\s+(.*)$/gm,replacement:"

        $1

        "},{pattern:/^#{2}\s+(.*)$/gm,replacement:"

        $1

        "},{pattern:/^#{1}\s+(.*)$/gm,replacement:"

        $1

        "},{pattern:/```([\s\S]*?)```/g,replacement:function(e,t){return"```"+(t=t.replace(//g,">").replaceAll("*","*").replaceAll("_","_").replaceAll("[","["))+"```"}},{pattern:/^!~(.*?)$/gm,replacement:"$1"},{pattern:/^~~(.*?)$/gm,replacement:"$1"},{pattern:/~(.*?)~/g,replacement:'$1'},{pattern:/^- \[(x| )\]\s+(.*)$/gm,replacement:'
      1. $2
        • '},{pattern:/!\[([^\]]+)\]\(([^\s)]+)\)/g,replacement:'$1'},{pattern:/(\[([^\]]+)\])?\(([^)\s]+)(?:\s"([^"]+)")?\)/g,replacement:function(e,t,l,a,r){let s=l||a,n=r?' title="'+r+'"':"";return t?'"+s+"":"("+s+")"}},{pattern:/\*\*\*([^*]+)\*\*\*/g,replacement:"$1"},{pattern:/\*\*([^*]+)\*\*/g,replacement:"$1"},{pattern:/\*([^*]+)\*/g,replacement:"$1"},{pattern:/___([^*]+)___/g,replacement:"$1"},{pattern:/__([^_]+)__/g,replacement:"$1"},{pattern:/_([^_]+)_/g,replacement:"$1"},{pattern:/^>\s+(.*)$/gm,replacement:"
          $1
          "},{pattern:/```([\w-]+)?\n([\s\S]*?)\n```/gm,replacement:'
          $2
          '},{pattern:/`([^`]+)`/gm,replacement:'$1'},{pattern:/\n---\n/gm,replacement:"
          "},{pattern:/<\/li>\n\n/gm,replacement:"
          "},{pattern:/<\/div>\n\n/gm,replacement:"

  • "},{pattern:/<\/pre>\n\n/gm,replacement:"
    "},{pattern:/\n\n/gm,replacement:"

    "},]},configs:[],components:[],fontawesome:"https://kit.fontawesome.com/f474ae69e7.js",debug:!1,version:"1.6"};const pb_getObjectValues=e=>Object.entries(e),pb_setCustomComponents=()=>{pb_customComponentsCheck(document.getElementsByTagName("*"))},pb_customComponentsCheck=(e,t)=>{let l=pb_getObjectValues(pixelbite.components);t||(t="");for(let a=0;a{let l=[],a=pb_getObjectValues(pixelbite.markdowns);for(let r=0;r{s=s.replace(e,t)}),s},pb_componentErrorMessage=(e,t,l)=>{let a="toggle-"+pb_randomString(32),r="toggle-"+pb_randomString(32),s="";for(let n=0;n';e.innerHTML='
    '+l+'
    - see more details
    "},pb_includeHtmlToAnElement=async(element,path,attributes)=>{path||(path="null");let relativePathSplit=path.split("/"),relativePath="";for(let i=0;i{await pb_alocatedPath(),await pb_checkLoremIpsum();let e=pb_getCookie("darkmode");e?darkmode=e:(pb_setCookie("darkmode","0",365),darkmode="0"),pb_classGenerator(),await pb_configureConfigs(pixelbite.configs),pb_setCustomComponents(),pb_slideshowGenerator(),await pb_addFontAwesome(),pb_checkLoaders()});const pb_alocatedPath=()=>{let e=document.getElementsByTagName("*");for(let t=0;te.replace(/.*?@\/\s*/,"@/").replaceAll("@/",window.location.protocol+"//"+window.location.host+"/"),pb_configureConfigs=async e=>{await pb_configEval(window.location.protocol+"//"+window.location.host+"/pixelbite.conf");for(let t=0;t{let pattern=/^(http|https|ftp):\/\//;pattern.test(url)||(url=window.location.protocol+"//"+window.location.host+"/"+url);let object={values:{components:{},aliases:{},variables:{},colors:{},markdowns:{}}},text=await fetchFile(url);if(text){let lines=text.replace(/\/\/(?=(?:[^'"`]*['"`][^'"`]*['"`])*[^'"`]*$).*/g,"").replace(/#(?=(?:[^'"`]*['"`][^'"`]*['"`])*[^'"`]*$).*/g,"").replace(/\r?\n|\r/g,"").replace(/(\w+)\s*=/g,"\n$&").replace(/\[\s*(\w+)\s*\]/g,"\n[$1]").split("\n"),category="";for(let i=0;i{let t="";return await fetch(e).then(e=>{if(!e.ok)throw Error("File not found");return e.text()}).then(e=>{t=e}).catch(t=>{e!==window.location.protocol+"//"+window.location.host+"/pixelbite.conf"&&console.error('PixelBite: Cannot get response from "'+e+'"')}),t},changeTheme=async()=>{await changeThemeMode()},changeThemeMode=async()=>{"0"===darkmode?(darkmode="1",pb_setCookie("darkmode","1",365)):(darkmode="0",pb_setCookie("darkmode","0",365)),pb_classGenerator()},pb_checkLoaders=async()=>{let e=document.getElementsByClassName("loader");if(e.length>0)for(let t=0;t{let e=document.getElementsByTagName("*");for(let t=0;t{let a=l.split("-");if("loremIpsum"===a[0]){for(let r=0;rnew Promise(t=>setTimeout(t,e));function pb_randomString(e){let t="",l="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",a=0;for(;ae[Math.floor(Math.random()*e.length)];window.onload=()=>{console.log("%cThank you for using PixelbiteCSS :) (version "+pixelbite.version+")","font-size:18px;font-weight:bold"),console.log("%cMore information can be found on our website or GitHub\nhttps://pixelbite-css.github.io, https://github.com/Pixelbite-CSS","font-weight:bold"),pb_addSignature(),pb_classGenerator()};const pb_changeRootVariable=(e,t)=>{document.documentElement.style.setProperty(e,t)},pb_classGenerator=()=>{debugmode(),pb_alocatedPath(),pb_checkLoremIpsum(),pixelbite.variables.primary!==document.documentElement.style.getPropertyValue("--primary-color")&&pb_changeRootVariable("--primary-color",pixelbite.variables.primary),pixelbite.variables.secondary!==document.documentElement.style.getPropertyValue("--secondary-color")&&pb_changeRootVariable("--secondary-color",pixelbite.variables.secondary),pixelbite.variables.success!==document.documentElement.style.getPropertyValue("--success-color")&&pb_changeRootVariable("--success-color",pixelbite.variables.success),pixelbite.variables.info!==document.documentElement.style.getPropertyValue("--info-color")&&pb_changeRootVariable("--info-color",pixelbite.variables.info),pixelbite.variables.danger!==document.documentElement.style.getPropertyValue("--danger-color")&&pb_changeRootVariable("--danger-color",pixelbite.variables.danger),pixelbite.variables.warning!==document.documentElement.style.getPropertyValue("--warning-color")&&pb_changeRootVariable("--warning-color",pixelbite.variables.warning),pixelbite.variables.fontPrimary!==document.documentElement.style.getPropertyValue("--font-family")&&pb_changeRootVariable("--font-family",pixelbite.variables.fontPrimary),pixelbite.variables.fontMonospace!==document.documentElement.style.getPropertyValue("--font-mono-family")&&pb_changeRootVariable("--font-mono-family",pixelbite.variables.fontMonospace);let e=document.getElementsByTagName("*");for(let t=0;t{for(let t=0;t=window.innerWidth&&(a[0]=a[0].split(":")[1]),a[0]===class_library[t][0]&&(l.style.cssText+=class_library[t][1]+":"+pb_classSplitToString(a,1)+";"),"gradient"===a[0]){a[3]||(a[3]=0);let o=pb_variableCheck(a[1]),p=pb_variableCheck(a[2]),c=pb_variableCheck(a[3]);l.style.cssText+="background: background: -moz-linear-gradient("+c+", "+o+" 0%, "+p+" 100%);background: -webkit-linear-gradient("+c+", "+o+" 0%, "+p+" 100%);background: linear-gradient("+c+", "+o+" 0%, "+p+' 100%);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="'+o+'",endColorstr="'+p+'",GradientType=1);'}}}),pb_updateSearchbars(),pb_updateDropdowns(),pb_generateFloatInput(l)}},pb_generateFloatInput=e=>{if(e.classList.contains("floatInput")&&e.getElementsByClassName("input")&&e.getElementsByClassName("label")&&e.getElementsByClassName("input")&&e.getElementsByTagName("label")){let t=e.getElementsByTagName("input")[0],l=e.getElementsByTagName("label")[0];t.value?l.classList.add("inputhastext"):l.classList.contains("inputhastext")&&l.classList.remove("inputhastext")}},pb_aliasClassReplace=e=>{let t=e.classList;for(let l=0;l{if(!e)return"";{let l=pb_getObjectValues(pixelbite.variables),a=pb_getObjectValues(pixelbite.colors),r="";for(let s=t;s{let t=pb_getObjectValues(pixelbite.variables),l=pb_getObjectValues(pixelbite.colors);for(let a=0;a"string"==typeof e&&!isNaN(e)&&!isNaN(parseFloat(e)),pb_colorConverter=e=>{let t=parseInt(e.substr(1,2),16),l=parseInt(e.substr(3,2),16),a=parseInt(e.substr(5,2),16);t/=255;let r=Math.max(t,l/=255,a/=255),s=Math.min(t,l,a),n,i,o=(r+s)/2;if(r==s)n=i=0;else{let p=r-s;switch(i=o>.5?p/(2-r-s):p/(r+s),r){case t:n=(l-a)/p+(l{let e=document.createComment("This site is created via PixelbiteCSS (https://github.com/Pixelbite-CSS)");document.body.appendChild(e)},pb_addFontAwesome=()=>{let e=document.createElement("script");e.setAttribute("src",pixelbite.fontawesome),e.setAttribute("crossorigin","anonymous"),document.head.appendChild(e)},debugmode=()=>{if(pixelbite.debug){let e=document.getElementsByTagName("*");for(let t=0;t{t=t?"_blank":"_self",window.open(e,t)},toggleElement=e=>{let t=document.getElementsByClassName(e);for(let l=0;l{document.documentElement.style.setProperty(e,t)};let pb_beforeSlideshows=[];const pb_slideshowGenerator=async()=>{let e=document.getElementsByClassName("slideshow");if(e!==pb_beforeSlideshows&&e.length>0){for(let t=0;t{for(let a=0;a=l.length-1&&(e=-1),await pb_sleep(5e3),await pb_slideshowSlide(e+1,t,l)},pb_setCookie=(e,t,l)=>{let a=new Date;a.setTime(a.getTime()+864e5*l);let r="expires="+a.toUTCString();document.cookie=e+"="+t+";"+r+";path=/"},pb_getCookie=e=>{let t=e+"=",l=decodeURIComponent(document.cookie).split(";");for(let a=0;a{if(pb_searchbarsBefore.length!==document.getElementsByClassName("searchbar").length){let e=document.getElementsByClassName("searchbar");for(let t=0;t{let a=l.value.toLowerCase(),r=e[t].getElementsByClassName("search-values")[0].getElementsByTagName("div");for(let s=0;s{let e=document.getElementsByClassName("dropdown");if(pb_dropdownsBefore.length!==e.length){for(let t=0;ttoggleElement(c),p.innerHTML="
    "+o[0].innerHTML+"
    ",e[t].append(p),e[t].value=o[0].value;let m=document.createElement("div");m.classList.add("hidden"),m.classList.add(c);for(let b=0;b{e[t].value=o[b].value,e[t].getElementsByTagName("button")[0].innerHTML="
    "+o[b].innerHTML+"
    ",pb_classGenerator(),toggleElement(c)},m.append(u)}e[t].append(m)}pb_dropdownsBefore=e}};window.addEventListener("resize",pb_classGenerator); \ No newline at end of file diff --git a/pixelbite.conf b/pixelbite.conf index f4c7692..224cca9 100644 --- a/pixelbite.conf +++ b/pixelbite.conf @@ -1,35 +1,29 @@ -[informations] -# author = "neostetic" -# author_url = "https://github.com/neostetic" -# description = "Just your basic theme idea"x` -# theme_name = "General" -# theme_version = "1.0" -# theme_date = "7/12/2023" -# theme_url = "https://github.com/neostetic" -# style = "color:red" - [general] -configs = [] fontawesome = "https://kit.fontawesome.com/f474ae69e7.js" # debug = true [components] -# TODO: Make it work! -adam = "./pixelbite_componentTest.html" +customButton = "./assets/customButton.html" [aliases] -headerRoundedButton = "flexMiddle flexCenter fs-16px c-black dark:c-white td-none g-12px b-1px-solid-black dark:b-1px-solid-white br-400px p-8px-20px" -headerRoundedFullButton = "br-400px bg-black dark:bg-white w-44px flexMiddle flexCenter" +darkmodeFont = "c-black dark:c-white" +darkmodeClassics = "darkmodeFont bg-white dark:bg-cherry4" +headerBorderRadius = "br-6px" +headerRoundedButton = "flexMiddle flexCenter fs-14px c-cherry40 dark:c-cherry90 td-none g-12px bg-cherry90 dark:bg-cherry40 p-8px-14px headerBorderRadius" +headerRoundedFullButton = "headerBorderRadius bg-black dark:bg-white w-36px flexMiddle flexCenter" +headerLink = "td-none c-black dark:c-white d-block p-4px-4px fs-13px" [variables] -# primary = "#ff0000" -# secondary = "#ff5555" +primary = "#FA2A55" +secondary = "#b51838" +transparent = "rgba(0,0,0,0)" +fontCustom = "url(https://fonts.gstatic.com/s/sedgwickavedisplay/v19/xfuu0XPgU3jZPUoUo3ScvmPi-NapQ8OxM1c0fec.woff2)" [colors] -# purple = "#ff0000" +cherry = "#FA2A55" [markdowns] -# code2text = [ -# { pattern: //g, replacement: ">" } -# ] +code2text = [ + { pattern: //g, replacement: ">" } +] diff --git a/script/1.6/pixelbite-min.js b/script/1.6/pixelbite-min.js new file mode 100644 index 0000000..306ebb9 --- /dev/null +++ b/script/1.6/pixelbite-min.js @@ -0,0 +1 @@ +const class_library=[["c","color"],["p","padding"],["pos","position"],["o","opacity"],["pt","padding-top"],["pb","padding-bottom"],["pl","padding-left"],["pr","padding-right"],["m","margin"],["mt","margin-top"],["mb","margin-bottom"],["ml","margin-left"],["mr","margin-right"],["g","gap"],["ar","aspect-ratio"],["d","display"],["w","width"],["h","height"],["maxW","max-width"],["maxH","max-height"],["minW","min-width"],["minH","min-height"],["border","border"],["b","border"],["bleft","border-left"],["bright","border-right"],["btop","border-top"],["bbottom","border-bottom"],["br","border-radius"],["bg","background"],["ta","text-align"],["ff","font-family"],["fs","font-size"],["fw","font-weight"],["td","text-decoration"],["fill","fill"],["of","overflow"],["ofx","overflow-x"],["ofy","overflow-y"],["flex","flex"],["flexDirection","flex-direction"],["flexWrap","flex-wrap"],["flexItems","align-items"],["flexContent","align-content"],["flexJustifyContent","justify-content"],["flexAlignItems","align-items"],["gridColumns","grid-template-columns"],["gridRows","grid-template-rows"],["shadow","box-shadow"],["top","top"],["bottom","bottom"],["left","left"],["right","right"],["ws","word-spacing"],["ls","letter-spacing"],["lh","line-height"],["zIndex","z-index"],],pb_getRootVariable=e=>getComputedStyle(document.documentElement).getPropertyValue(e).toString(),pb_putCustomFontIntoCSS=(e,t)=>{let l=document.createElement("style");l.appendChild(document.createTextNode("@font-face {font-family: "+e+"; src: "+t+";}")),document.head.appendChild(l)};var pixelbite={classes:class_library,variables:{primary:pb_getRootVariable("--primary-color").toString(),secondary:pb_getRootVariable("--secondary-color").toString(),danger:pb_getRootVariable("--danger-color").toString(),info:pb_getRootVariable("--info-color").toString(),warning:pb_getRootVariable("--warning-color").toString(),success:pb_getRootVariable("--success-color").toString(),fontPrimary:pb_getRootVariable("--font-family").toString(),fontMonospace:pb_getRootVariable("--font-mono-family").toString()},colors:{white:[0,"0%"],gray:[0,"0%"],black:[0,"0%"],red:[0,"100%"],orange:[36,"100%"],yellow:[59,"100%"],green:[108,"100%"],teal:[154,"100%"],cyan:[182,"100%"],blue:[235,"100%"],purple:[275,"100%"],pink:[300,"100%"]},aliases:{},loremIpsum:["Hercle, species primus!","Indexs volare, tanquam emeritis nix.","Festus bulla vix locuss barcas est.","Domuss sunt equisos de flavum cedrium.","A falsis, diatria emeritis clabulare.","Medicinas sunt menss de pius nuclear vexatum iacere.","Verpas sunt plasmators de brevis pes.","Placidus, alter nuclear vexatum iaceres patienter talem de nobilis, noster cursus.","Ubi est azureus castor?","Cum abnoba resistere, omnes hilotaees examinare pius, emeritis poetaes.","Ubi est bi-color lanista?","Stellas prarere in ostravia!","Ausus peregrinationess, tanquam talis mensa.","Est teres deus, cesaris.","Est dexter animalis, cesaris.","Finis albus eleates est.","Bassus consilium interdum captiss accentor est.","Fuga noceres, tanquam castus racana.","Contencio, byssus, et tata.","Sunt guttuses gratia ferox, velox decores.","Elogium mirabilis abactor est.","Nunquam magicae mensa.","Pol, a bene historia.","Ubi est raptus acipenser?","Mensa, ratione, et vortex.","Rumors cantare!","Decors volare!","Fluctuss peregrinationes!","Cum agripeta credere, omnes silvaes transferre domesticus, clemens sectames.","Lapsus de domesticus era, manifestum lanista!","Cur clabulare ridetis?","Nam quis nulla.","Deuss observare, tanquam albus domus.","A falsis, planeta rusticus visus.","Primus seculas ducunt ad orgia.","Pol, a bene guttus, magnum glos!","Ortum satis ducunt ad fortis candidatus.","Neuter, alter fraticinidas unus attrahendam de teres, fortis rumor.","Devatios ortum!","Cadunt saepe ducunt ad primus imber.","Ubi est camerarius species?","Vae.","Genetrixs sunt adiurators de nobilis exemplar.","Nullam rhoncus aliquam metus.","Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci.","Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien.","In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero.","Mauris suscipit.","Etiam sapien elit, consequat eget.","Etiam neque.","Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?","Integer in sapien.","Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo.","Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam.","Duis condimentum augue id magna semper rutrum.","Nullam lectus justo, vulputate eget mollis sed, tempor sed magna.","Jsi cool člověk.","Fusce aliquam vestibulum ipsum.","Aliquam erat volutpat.","Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien.",],markdowns:{github:[{pattern:/^((?: )*)((?:-|\*|\+)\s|\d+\.\s)(.*)$/gm,replacement:function(e,t,l,a){let r=/ /g,s=t.match(r);return"
  • "+a+"
  • "}},{pattern:/<\/li>\n
  • /g,replacement:"
  • \n$&"},{pattern:/^(\t*)<\/li>\n<\/ul>/gm,replacement:"$1\n$1"},{pattern:/^(\t*)<\/li>\n<\/ol>/gm,replacement:"$1\n$1"},{pattern:/^(\t*)<\/li>\n<\/li>/gm,replacement:"$1\n$1
  • "},{pattern:/^(\t*)<\/ul>\n
      /gm,replacement:"$1
    \n$1
      "},{pattern:/^(\t*)<\/ol>\n
        /gm,replacement:"$1
      \n$1
        "},{pattern:/^#{6}\s+(.*)$/gm,replacement:"
        $1
        "},{pattern:/^#{5}\s+(.*)$/gm,replacement:"
        $1
        "},{pattern:/^#{4}\s+(.*)$/gm,replacement:"

        $1

        "},{pattern:/^#{3}\s+(.*)$/gm,replacement:"

        $1

        "},{pattern:/^#{2}\s+(.*)$/gm,replacement:"

        $1

        "},{pattern:/^#{1}\s+(.*)$/gm,replacement:"

        $1

        "},{pattern:/```([\s\S]*?)```/g,replacement:function(e,t){return"```"+(t=t.replace(//g,">").replaceAll("*","*").replaceAll("_","_").replaceAll("[","["))+"```"}},{pattern:/^!~(.*?)$/gm,replacement:"$1"},{pattern:/^~~(.*?)$/gm,replacement:"$1"},{pattern:/~(.*?)~/g,replacement:'$1'},{pattern:/^- \[(x| )\]\s+(.*)$/gm,replacement:'
      1. $2
        • '},{pattern:/!\[([^\]]+)\]\(([^\s)]+)\)/g,replacement:'$1'},{pattern:/(\[([^\]]+)\])?\(([^)\s]+)(?:\s"([^"]+)")?\)/g,replacement:function(e,t,l,a,r){let s=l||a,n=r?' title="'+r+'"':"";return t?'"+s+"":"("+s+")"}},{pattern:/\*\*\*([^*]+)\*\*\*/g,replacement:"$1"},{pattern:/\*\*([^*]+)\*\*/g,replacement:"$1"},{pattern:/\*([^*]+)\*/g,replacement:"$1"},{pattern:/___([^*]+)___/g,replacement:"$1"},{pattern:/__([^_]+)__/g,replacement:"$1"},{pattern:/_([^_]+)_/g,replacement:"$1"},{pattern:/^>\s+(.*)$/gm,replacement:"
          $1
          "},{pattern:/```([\w-]+)?\n([\s\S]*?)\n```/gm,replacement:'
          $2
          '},{pattern:/`([^`]+)`/gm,replacement:'$1'},{pattern:/\n---\n/gm,replacement:"
          "},{pattern:/<\/li>\n\n/gm,replacement:"
          "},{pattern:/<\/div>\n\n/gm,replacement:"
          "},{pattern:/<\/pre>\n\n/gm,replacement:"
          "},{pattern:/\n\n/gm,replacement:"

          "},]},configs:[],components:[],fontawesome:"https://kit.fontawesome.com/f474ae69e7.js",debug:!1,version:"1.6"};const pb_getObjectValues=e=>Object.entries(e),pb_setCustomComponents=()=>{pb_customComponentsCheck(document.getElementsByTagName("*"))},pb_customComponentsCheck=(e,t)=>{let l=pb_getObjectValues(pixelbite.components);t||(t="");for(let a=0;a{let l=[],a=pb_getObjectValues(pixelbite.markdowns);for(let r=0;r{s=s.replace(e,t)}),s},pb_componentErrorMessage=(e,t,l)=>{let a="toggle-"+pb_randomString(32),r="toggle-"+pb_randomString(32),s="";for(let n=0;n';e.innerHTML='
          '+l+'
          - see more details
          "},pb_includeHtmlToAnElement=async(element,path,attributes)=>{path||(path="null");let relativePathSplit=path.split("/"),relativePath="";for(let i=0;i{await pb_alocatedPath(),await pb_checkLoremIpsum();let e=pb_getCookie("darkmode");e?darkmode=e:(pb_setCookie("darkmode","0",365),darkmode="0"),pb_classGenerator(),await pb_configureConfigs(pixelbite.configs),pb_setCustomComponents(),pb_slideshowGenerator(),await pb_addFontAwesome(),pb_checkLoaders()});const pb_alocatedPath=()=>{let e=document.getElementsByTagName("*");for(let t=0;te.replace(/.*?@\/\s*/,"@/").replaceAll("@/",window.location.protocol+"//"+window.location.host+"/"),pb_configureConfigs=async e=>{await pb_configEval(window.location.protocol+"//"+window.location.host+"/pixelbite.conf");for(let t=0;t{let pattern=/^(http|https|ftp):\/\//;pattern.test(url)||(url=window.location.protocol+"//"+window.location.host+"/"+url);let object={values:{components:{},aliases:{},variables:{},colors:{},markdowns:{}}},text=await fetchFile(url);if(text){let lines=text.replace(/\/\/(?=(?:[^'"`]*['"`][^'"`]*['"`])*[^'"`]*$).*/g,"").replace(/#(?=(?:[^'"`]*['"`][^'"`]*['"`])*[^'"`]*$).*/g,"").replace(/\r?\n|\r/g,"").replace(/(\w+)\s*=/g,"\n$&").replace(/\[\s*(\w+)\s*\]/g,"\n[$1]").split("\n"),category="";for(let i=0;i{let t="";return await fetch(e).then(e=>{if(!e.ok)throw Error("File not found");return e.text()}).then(e=>{t=e}).catch(t=>{e!==window.location.protocol+"//"+window.location.host+"/pixelbite.conf"&&console.error('PixelBite: Cannot get response from "'+e+'"')}),t},changeTheme=async()=>{await changeThemeMode()},changeThemeMode=async()=>{"0"===darkmode?(darkmode="1",pb_setCookie("darkmode","1",365)):(darkmode="0",pb_setCookie("darkmode","0",365)),pb_classGenerator()},pb_checkLoaders=async()=>{let e=document.getElementsByClassName("loader");if(e.length>0)for(let t=0;t{let e=document.getElementsByTagName("*");for(let t=0;t{let a=l.split("-");if("loremIpsum"===a[0]){for(let r=0;rnew Promise(t=>setTimeout(t,e));function pb_randomString(e){let t="",l="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",a=0;for(;ae[Math.floor(Math.random()*e.length)];window.onload=()=>{console.log("%cThank you for using PixelbiteCSS :) (version "+pixelbite.version+")","font-size:18px;font-weight:bold"),console.log("%cMore information can be found on our website or GitHub\nhttps://pixelbite-css.github.io, https://github.com/Pixelbite-CSS","font-weight:bold"),pb_addSignature(),pb_classGenerator()};const pb_changeRootVariable=(e,t)=>{document.documentElement.style.setProperty(e,t)},pb_classGenerator=()=>{debugmode(),pb_alocatedPath(),pb_checkLoremIpsum(),pixelbite.variables.primary!==document.documentElement.style.getPropertyValue("--primary-color")&&pb_changeRootVariable("--primary-color",pixelbite.variables.primary),pixelbite.variables.secondary!==document.documentElement.style.getPropertyValue("--secondary-color")&&pb_changeRootVariable("--secondary-color",pixelbite.variables.secondary),pixelbite.variables.success!==document.documentElement.style.getPropertyValue("--success-color")&&pb_changeRootVariable("--success-color",pixelbite.variables.success),pixelbite.variables.info!==document.documentElement.style.getPropertyValue("--info-color")&&pb_changeRootVariable("--info-color",pixelbite.variables.info),pixelbite.variables.danger!==document.documentElement.style.getPropertyValue("--danger-color")&&pb_changeRootVariable("--danger-color",pixelbite.variables.danger),pixelbite.variables.warning!==document.documentElement.style.getPropertyValue("--warning-color")&&pb_changeRootVariable("--warning-color",pixelbite.variables.warning),pixelbite.variables.fontPrimary!==document.documentElement.style.getPropertyValue("--font-family")&&pb_changeRootVariable("--font-family",pixelbite.variables.fontPrimary),pixelbite.variables.fontMonospace!==document.documentElement.style.getPropertyValue("--font-mono-family")&&pb_changeRootVariable("--font-mono-family",pixelbite.variables.fontMonospace);let e=document.getElementsByTagName("*");for(let t=0;t{for(let t=0;t=window.innerWidth&&(a[0]=a[0].split(":")[1]),a[0]===class_library[t][0]&&(l.style.cssText+=class_library[t][1]+":"+pb_classSplitToString(a,1)+";"),"gradient"===a[0]){a[3]||(a[3]=0);let o=pb_variableCheck(a[1]),p=pb_variableCheck(a[2]),c=pb_variableCheck(a[3]);l.style.cssText+="background: background: -moz-linear-gradient("+c+", "+o+" 0%, "+p+" 100%);background: -webkit-linear-gradient("+c+", "+o+" 0%, "+p+" 100%);background: linear-gradient("+c+", "+o+" 0%, "+p+' 100%);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="'+o+'",endColorstr="'+p+'",GradientType=1);'}}}),pb_updateSearchbars(),pb_updateDropdowns(),pb_generateFloatInput(l)}},pb_generateFloatInput=e=>{if(e.classList.contains("floatInput")&&e.getElementsByClassName("input")&&e.getElementsByClassName("label")&&e.getElementsByClassName("input")&&e.getElementsByTagName("label")){let t=e.getElementsByTagName("input")[0],l=e.getElementsByTagName("label")[0];t.value?l.classList.add("inputhastext"):l.classList.contains("inputhastext")&&l.classList.remove("inputhastext")}},pb_aliasClassReplace=e=>{let t=e.classList;for(let l=0;l{if(!e)return"";{let l=pb_getObjectValues(pixelbite.variables),a=pb_getObjectValues(pixelbite.colors),r="";for(let s=t;s{let t=pb_getObjectValues(pixelbite.variables),l=pb_getObjectValues(pixelbite.colors);for(let a=0;a"string"==typeof e&&!isNaN(e)&&!isNaN(parseFloat(e)),pb_colorConverter=e=>{let t=parseInt(e.substr(1,2),16),l=parseInt(e.substr(3,2),16),a=parseInt(e.substr(5,2),16);t/=255;let r=Math.max(t,l/=255,a/=255),s=Math.min(t,l,a),n,i,o=(r+s)/2;if(r==s)n=i=0;else{let p=r-s;switch(i=o>.5?p/(2-r-s):p/(r+s),r){case t:n=(l-a)/p+(l{let e=document.createComment("This site is created via PixelbiteCSS (https://github.com/Pixelbite-CSS)");document.body.appendChild(e)},pb_addFontAwesome=()=>{let e=document.createElement("script");e.setAttribute("src",pixelbite.fontawesome),e.setAttribute("crossorigin","anonymous"),document.head.appendChild(e)},debugmode=()=>{if(pixelbite.debug){let e=document.getElementsByTagName("*");for(let t=0;t{t=t?"_blank":"_self",window.open(e,t)},toggleElement=e=>{let t=document.getElementsByClassName(e);for(let l=0;l{document.documentElement.style.setProperty(e,t)};let pb_beforeSlideshows=[];const pb_slideshowGenerator=async()=>{let e=document.getElementsByClassName("slideshow");if(e!==pb_beforeSlideshows&&e.length>0){for(let t=0;t{for(let a=0;a=l.length-1&&(e=-1),await pb_sleep(5e3),await pb_slideshowSlide(e+1,t,l)},pb_setCookie=(e,t,l)=>{let a=new Date;a.setTime(a.getTime()+864e5*l);let r="expires="+a.toUTCString();document.cookie=e+"="+t+";"+r+";path=/"},pb_getCookie=e=>{let t=e+"=",l=decodeURIComponent(document.cookie).split(";");for(let a=0;a{if(pb_searchbarsBefore.length!==document.getElementsByClassName("searchbar").length){let e=document.getElementsByClassName("searchbar");for(let t=0;t{let a=l.value.toLowerCase(),r=e[t].getElementsByClassName("search-values")[0].getElementsByTagName("div");for(let s=0;s{let e=document.getElementsByClassName("dropdown");if(pb_dropdownsBefore.length!==e.length){for(let t=0;ttoggleElement(c),p.innerHTML="
          "+o[0].innerHTML+"
          ",e[t].append(p),e[t].value=o[0].value;let m=document.createElement("div");m.classList.add("hidden"),m.classList.add(c);for(let b=0;b{e[t].value=o[b].value,e[t].getElementsByTagName("button")[0].innerHTML="
          "+o[b].innerHTML+"
          ",pb_classGenerator(),toggleElement(c)},m.append(u)}e[t].append(m)}pb_dropdownsBefore=e}};window.addEventListener("resize",pb_classGenerator); \ No newline at end of file diff --git a/script/1.6/pixelbite.js b/script/1.6/pixelbite.js new file mode 100644 index 0000000..b4534df --- /dev/null +++ b/script/1.6/pixelbite.js @@ -0,0 +1,1086 @@ +const class_library = [ + ['c', 'color'], + ['p', 'padding'], + ['pos', 'position'], + ['o', 'opacity'], + ['pt', 'padding-top'], + ['pb', 'padding-bottom'], + ['pl', 'padding-left'], + ['pr', 'padding-right'], + ['m', 'margin'], + ['mt', 'margin-top'], + ['mb', 'margin-bottom'], + ['ml', 'margin-left'], + ['mr', 'margin-right'], + ['g', 'gap'], + ['ar', 'aspect-ratio'], + ['d', 'display'], + ['w', 'width'], + ['h', 'height'], + ['maxW', 'max-width'], + ['maxH', 'max-height'], + ['minW', 'min-width'], + ['minH', 'min-height'], + ['border', 'border'], + ['b', 'border'], + ['bleft', 'border-left'], + ['bright', 'border-right'], + ['btop', 'border-top'], + ['bbottom', 'border-bottom'], + ['br', 'border-radius'], + ['bg', 'background'], + ['ta', 'text-align'], + ['ff', 'font-family'], + ['fs', 'font-size'], + ['fw', 'font-weight'], + ['td', 'text-decoration'], + ['fill', 'fill'], + ['of', 'overflow'], + ['ofx', 'overflow-x'], + ['ofy', 'overflow-y'], + ['flex', 'flex'], + ['flexDirection', 'flex-direction'], + ['flexWrap', 'flex-wrap'], + ['flexItems', 'align-items'], + ['flexContent', 'align-content'], + ['flexJustifyContent', 'justify-content'], + ['flexAlignItems', 'align-items'], + ['gridColumns', 'grid-template-columns'], + ['gridRows', 'grid-template-rows'], + ['shadow', 'box-shadow'], + ['top', 'top'], + ['bottom', 'bottom'], + ['left', 'left'], + ['right', 'right'], + ['ws', 'word-spacing'], + ['ls', 'letter-spacing'], + ['lh', 'line-height'], + ['zIndex', 'z-index'], +] + +const pb_getRootVariable = (propertyValue) => { + return getComputedStyle(document.documentElement).getPropertyValue(propertyValue).toString() +} + +const pb_putCustomFontIntoCSS = (name, url) => { + let newStyle = document.createElement('style'); + newStyle.appendChild(document.createTextNode("@font-face {font-family: " + name + "; src: " + url + ";}")); + document.head.appendChild(newStyle); +} + +var pixelbite = { + classes: class_library, + variables: { + primary: pb_getRootVariable('--primary-color').toString(), + secondary: pb_getRootVariable('--secondary-color').toString(), + danger: pb_getRootVariable('--danger-color').toString(), + info: pb_getRootVariable('--info-color').toString(), + warning: pb_getRootVariable('--warning-color').toString(), + success: pb_getRootVariable('--success-color').toString(), + fontPrimary: pb_getRootVariable('--font-family').toString(), + fontMonospace: pb_getRootVariable('--font-mono-family').toString(), + }, + colors: { + white: [0, '0%'], + gray: [0, '0%'], + black: [0, '0%'], + red: [0, '100%'], + orange: [36, '100%'], + yellow: [59, '100%'], + green: [108, '100%'], + teal: [154, '100%'], + cyan: [182, '100%'], + blue: [235, '100%'], + purple: [275, '100%'], + pink: [300, '100%'], + }, + aliases: {}, + loremIpsum: [ + "Hercle, species primus!", + "Indexs volare, tanquam emeritis nix.", + "Festus bulla vix locuss barcas est.", + "Domuss sunt equisos de flavum cedrium.", + "A falsis, diatria emeritis clabulare.", + "Medicinas sunt menss de pius nuclear vexatum iacere.", + "Verpas sunt plasmators de brevis pes.", + "Placidus, alter nuclear vexatum iaceres patienter talem de nobilis, noster cursus.", + "Ubi est azureus castor?", + "Cum abnoba resistere, omnes hilotaees examinare pius, emeritis poetaes.", + "Ubi est bi-color lanista?", + "Stellas prarere in ostravia!", + "Ausus peregrinationess, tanquam talis mensa.", + "Est teres deus, cesaris.", + "Est dexter animalis, cesaris.", + "Finis albus eleates est.", + "Bassus consilium interdum captiss accentor est.", + "Fuga noceres, tanquam castus racana.", + "Contencio, byssus, et tata.", + "Sunt guttuses gratia ferox, velox decores.", + "Elogium mirabilis abactor est.", + "Nunquam magicae mensa.", + "Pol, a bene historia.", + "Ubi est raptus acipenser?", + "Mensa, ratione, et vortex.", + "Rumors cantare!", + "Decors volare!", + "Fluctuss peregrinationes!", + "Cum agripeta credere, omnes silvaes transferre domesticus, clemens sectames.", + "Lapsus de domesticus era, manifestum lanista!", + "Cur clabulare ridetis?", + "Nam quis nulla.", + "Deuss observare, tanquam albus domus.", + "A falsis, planeta rusticus visus.", + "Primus seculas ducunt ad orgia.", + "Pol, a bene guttus, magnum glos!", + "Ortum satis ducunt ad fortis candidatus.", + "Neuter, alter fraticinidas unus attrahendam de teres, fortis rumor.", + "Devatios ortum!", + "Cadunt saepe ducunt ad primus imber.", + "Ubi est camerarius species?", + "Vae.", + "Genetrixs sunt adiurators de nobilis exemplar.", + "Nullam rhoncus aliquam metus.", + "Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci.", + "Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien.", + "In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero.", + "Mauris suscipit.", + "Etiam sapien elit, consequat eget.", + "Etiam neque.", + "Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?", + "Integer in sapien.", + "Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo.", + "Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam.", + "Duis condimentum augue id magna semper rutrum.", + "Nullam lectus justo, vulputate eget mollis sed, tempor sed magna.", + "Jsi cool člověk.", + "Fusce aliquam vestibulum ipsum.", + "Aliquam erat volutpat.", + "Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien.", + ], + markdowns: { + github: [ + // { pattern: //g, replacement: ">" }, + { + pattern: /^((?: )*)((?:-|\*|\+)\s|\d+\.\s)(.*)$/gm, replacement: function (match, p1, p2, p3) { + let regex = / /g; + let matches = p1.match(regex); + let count = matches ? matches.length : 0; + let countSize = (count + 1) * 12 + return "
        • " + p3 + "
        • "; + } + }, + {pattern: /<\/li>\n
        • /g, replacement: "
        • \n$&"}, + {pattern: /^(\t*)<\/li>\n<\/ul>/gm, replacement: "$1\n$1
        "}, + {pattern: /^(\t*)<\/li>\n<\/ol>/gm, replacement: "$1\n$1
      "}, + {pattern: /^(\t*)<\/li>\n<\/li>/gm, replacement: "$1\n$1
    • "}, + {pattern: /^(\t*)<\/ul>\n
        /gm, replacement: "$1
      \n$1
        "}, + {pattern: /^(\t*)<\/ol>\n
          /gm, replacement: "$1
        \n$1
          "}, + + {pattern: /^#{6}\s+(.*)$/gm, replacement: "
          $1
          "}, + {pattern: /^#{5}\s+(.*)$/gm, replacement: "
          $1
          "}, + {pattern: /^#{4}\s+(.*)$/gm, replacement: "

          $1

          "}, + {pattern: /^#{3}\s+(.*)$/gm, replacement: "

          $1

          "}, + {pattern: /^#{2}\s+(.*)$/gm, replacement: "

          $1

          "}, + {pattern: /^#{1}\s+(.*)$/gm, replacement: "

          $1

          "}, + { + pattern: /```([\s\S]*?)```/g, replacement: function (match, p1) { + p1 = p1.replace(//g, '>').replaceAll('*', '*').replaceAll('_', '_').replaceAll('[', '[') + return "```" + p1 + "```"; + } + }, + {pattern: /^!~(.*?)$/gm, replacement: "$1"}, + {pattern: /^~~(.*?)$/gm, replacement: "$1"}, + {pattern: /~(.*?)~/g, replacement: "$1"}, + {pattern: /^- \[(x| )\]\s+(.*)$/gm, replacement: "
        1. $2
          • "}, + {pattern: /!\[([^\]]+)\]\(([^\s)]+)\)/g, replacement: '$1'}, + { pattern: /(\[([^\]]+)\])?\(([^)\s]+)(?:\s"([^"]+)")?\)/g, replacement: function (match, p1, p2, p3, p4) { + let text = p2 || p3; + let title = p4 ? ' title="' + p4 + '"' : ''; + if (p1) return '' + text + ''; + else return '(' + text + ')' + } + }, + {pattern: /\*\*\*([^*]+)\*\*\*/g, replacement: '$1'}, + {pattern: /\*\*([^*]+)\*\*/g, replacement: '$1'}, + {pattern: /\*([^*]+)\*/g, replacement: '$1'}, + {pattern: /___([^*]+)___/g, replacement: '$1'}, + {pattern: /__([^_]+)__/g, replacement: '$1'}, + {pattern: /_([^_]+)_/g, replacement: '$1'}, + + // {pattern: /~~(.*)~~/g, replacement: "$1"}, + {pattern: /^>\s+(.*)$/gm, replacement: "
            $1
            "}, + { + pattern: /```([\w-]+)?\n([\s\S]*?)\n```/gm, + replacement: '
            $2
            ' + }, + { + pattern: /`([^`]+)`/gm, + replacement: '$1' + }, + {pattern: /\n---\n/gm, replacement: "
            "}, + {pattern: /<\/li>\n\n/gm, replacement: "
            "}, + {pattern: /<\/div>\n\n/gm, replacement: "
            "}, + {pattern: /<\/pre>\n\n/gm, replacement: "
            "}, + {pattern: /\n\n/gm, replacement: "

            "}, + ] + }, + configs: [], + components: [], + fontawesome: 'https://kit.fontawesome.com/f474ae69e7.js', + debug: false, + version: '1.6' +} + +const pb_getObjectValues = (object) => { + return Object.entries(object) +} + +const pb_setCustomComponents = () => { + let elements = document.getElementsByTagName('*') + pb_customComponentsCheck(elements) +} + +const pb_customComponentsCheck = (array, relativePath) => { + let components = pb_getObjectValues(pixelbite.components) + if (!relativePath) relativePath = '' + for (let i = 0; i < array.length; i++) { + let element = array[i] + if (element.tagName.toUpperCase().includes('COMPONENT')) { + let element_attributes = element.getAttributeNames() + let path = pb_alocatePath(element.getAttribute('path')) + if (path.startsWith('http://') || path.startsWith('https://')) { + path = element.getAttribute('path') + } else { + path = relativePath + element.getAttribute('path') + } + pb_includeHtmlToAnElement(element, path, element_attributes) + } + for (let j = 0; j < components.length; j++) { + if (element.tagName.toUpperCase().includes(components[j][0].toLocaleUpperCase())) { + let element_attributes = element.getAttributeNames() + let path = pb_alocatePath(components[j][1]) + pb_includeHtmlToAnElement(element, path, element_attributes) + } + } + } +} + +function pb_replaceAll(string, search, replace) { + return string.split(search).join(replace); +} + +function deleteFromString(string, value) { + return string.replaceAll(value, '') +} + +const pb_customMarkdown = (text, markdown) => { + let replacements = [] + let markdowns = pb_getObjectValues(pixelbite.markdowns) + for (let i = 0; i < markdowns.length; i++) { + if (markdowns[i][0] === markdown) { + replacements = markdowns[i][1] + } + } + let html = text; + replacements.forEach(({pattern, replacement}) => { + html = html.replace(pattern, replacement); + }); + return html; +} + +const pb_componentErrorMessage = (element, attributes, message) => { + let toggleClass = 'toggle-' + pb_randomString(32) + let toggleClassMore = 'toggle-' + pb_randomString(32) + let detailsString = ''; + for (let i = 0; i < attributes.length; i++) { + detailsString += ' - [' + attributes[i] + '="' + element.getAttribute(attributes[i]).replaceAll('<', '<') + '"],
            ' + } + element.innerHTML = + '
            ' + + '' + message + '
            ' + + '- see more details' + + '' + + '' + + '
            ' +} + +const pb_includeHtmlToAnElement = async (element, path, attributes) => { + if (!path) path = 'null' + let relativePathSplit = path.split('/') + let relativePath = '' + for (let i = 0; i < relativePathSplit.length - 1; i++) { + relativePath += relativePathSplit[i] + '/' + } + let componentRequest = new XMLHttpRequest(); + componentRequest.onreadystatechange = async function () { + if (this.readyState === 4) { + if (this.status === 200) { + let response = this.response.replaceAll('\t', ' ') + for (let i = 0; i < attributes.length; i++) { + let attribute = attributes[i] + if (attribute.includes(':object')) { + let object = '' + let objectName = attribute.replace(':object', '') + let objectPath = element.getAttribute(attribute) + let objectRequest = new XMLHttpRequest(); + objectRequest.onreadystatechange = function () { + if (this.readyState === 4) { + if (this.status === 200) { + try { + object = JSON.parse(this.responseText); + } catch (error) { + console.error('PixelBite: Attribute "' + objectName + ':object[' + objectPath + ']" in component has syntax error.') + } + } + } + if (this.status === 404) { + object = null + } + }; + try { + objectRequest.open("GET", objectPath, true); + objectRequest.send(); + } catch (err) { + console.error("help") + } + while (!object) { + await pb_sleep(10) + } + const regex = /\$\{for\(([\s\S]*?)\)\}/g; + const objectFors = response.match(regex); + if (objectFors) { + for (let j = 0; j < objectFors.length; j++) { + if (objectFors[j].includes('${for(')) { + let objectForSplit = objectFors[j].substring(6, objectFors[j].length - 2).split('::') + let string = '' + for (let k = 0; k < eval(objectForSplit[0]); k++) { + string += pb_replaceAll(objectForSplit[1], '[i]', '[' + k + ']') + } + response = pb_replaceAll(response, objectFors[j], string) + } + } + } + let objectStrings = response.match(/\${(.*?)}/g); + if (objectStrings) { + for (let j = 0; j < objectStrings.length; j++) { + if (objectStrings[j].includes(objectName)) { + let objectString = objectStrings[j].replace('${', '').replace('}', '') + try { + let value = eval(objectString) + response = pb_replaceAll(response, objectStrings[j], value) + } catch (error) { + response = pb_replaceAll(response, objectStrings[j], '') + console.error('PixelBite: Cannot read property from "' + objectName + '[object]" (reading "' + objectStrings[j] + '"), please check if value in the object exists.') + } + } + } + } + } + let attribute_syntax = '${' + attributes[i] + '}' + if (response.includes(attribute_syntax)) { + // response = response.replace(attribute_syntax, element.getAttribute(attribute)) + response = pb_replaceAll(response, attribute_syntax, element.getAttribute(attribute)) + element.removeAttribute(attribute) + } + } + if (element.getAttribute('markdown')) { + response = pb_customMarkdown(response, element.getAttribute('markdown')) + } + element.innerHTML = response + if (element.getElementsByTagName('COMPONENT')) { + pb_customComponentsCheck(element.getElementsByTagName('COMPONENT'), relativePath) + } + } + if (this.status === 404) { + pb_componentErrorMessage(element, attributes, 'Component not found [path=' + path + ']') + } + } + pb_classGenerator() + } + try { + componentRequest.open("GET", path, true); + componentRequest.send(); + } catch (err) { + console.error(err) + } +} + +let darkmode = false + +window.addEventListener("load", async () => { + await pb_alocatedPath() + await pb_checkLoremIpsum() + let darkmodeCookie = pb_getCookie('darkmode') + if (!darkmodeCookie) { + pb_setCookie('darkmode', '0', 365) + darkmode = '0' + } else { + darkmode = darkmodeCookie + } + pb_classGenerator() + await pb_configureConfigs(pixelbite.configs) + pb_setCustomComponents() + pb_slideshowGenerator() + await pb_addFontAwesome() + pb_checkLoaders() +}) + +const pb_alocatedPath = () => { + const a = document.getElementsByTagName('*') + for (let i = 0; i < a.length; i++) { + let element = a[i] + let elementAttributeNames = element.getAttributeNames() + for (let j = 0; j < elementAttributeNames.length; j++) { + if(element.getAttribute(elementAttributeNames[j]).includes('@/')) { + element.setAttribute( + elementAttributeNames[j], + element.getAttribute(elementAttributeNames[j]).replace(/.*?@\/\s*/,'@/').replaceAll('@/', window.location.protocol + "//" + window.location.host + "/") + ) + } + } + } +} + +const pb_alocatePath = (string) => { + return string.replace(/.*?@\/\s*/,'@/').replaceAll('@/', window.location.protocol + "//" + window.location.host + "/") +} + +const pb_configureConfigs = async (urls) => { + await pb_configEval(window.location.protocol + "//" + window.location.host + "/pixelbite.conf") + for (let j = 0; j < urls.length; j++) { + await pb_configEval(urls[j]) + } + pb_classGenerator() +} + +function pb_extractWordBeforeEquals(string) { + const regex = /(\w+)\s*=/; + const match = string.match(regex); + return match ? match[1] : null; +} + +const pb_configEval = async (url) => { + const pattern = /^(http|https|ftp):\/\//; + if (!pattern.test(url)) { + url = window.location.protocol + "//" + window.location.host + "/" + url + } + const object = { + values: { + components: {}, + aliases: {}, + variables: {}, + colors: {}, + markdowns: {} + } + } + let text = (await fetchFile(url)) + if (text) { + const lines = text + .replace(/\/\/(?=(?:[^'"`]*['"`][^'"`]*['"`])*[^'"`]*$).*/g, '') + .replace(/#(?=(?:[^'"`]*['"`][^'"`]*['"`])*[^'"`]*$).*/g, '') + .replace(/\r?\n|\r/g, '') + .replace(/(\w+)\s*=/g, '\n$&') + .replace(/\[\s*(\w+)\s*\]/g, '\n[$1]') + .split('\n') + let category = '' + for (let i = 0; i < lines.length; i++) { + let line = lines[i] + if(line.match(/\[(\w+)\]/)) { + category = line.trim().replaceAll('[', '').replaceAll(']', '') + } else { + let variable = pb_extractWordBeforeEquals(line) + let value = line.replace(/^\w+\s*=\s*/, '').trim().replace(/.*?@\/\s*/,'@/').replaceAll('@/', window.location.protocol + "//" + window.location.host + "/") + try { + if(category === "informations") { + eval('object.' + variable + ' = ' + value) + } else if (category === "general") { + eval('object.values.' + variable + ' = ' + value) + eval('pixelbite.' + variable + ' = ' + value) + } else if (category === "components") { + eval('object.values.' + category + '.' + variable + ' = ' + value) + if (!value.includes('http://') || !value.includes('https://')) { + value = value.charAt(0) + window.location.protocol + "//" + window.location.host + "/" + value.slice(1) + } + eval('pixelbite.components.' + variable + ' = ' + value) + } else if (category === "aliases") { + eval('object.values.' + category + '.' + variable + ' = ' + value) + eval('pixelbite.aliases.' + variable + ' = ' + value) + } else if (category === "markdowns") { + eval('object.values.' + category + '.' + variable + ' = ' + value) + eval('pixelbite.markdowns.' + variable + ' = ' + value) + } else if (category === "variables") { + eval('object.values.' + category + '.' + variable + ' = ' + value) + eval('pixelbite.variables.' + variable + ' = ' + value) + } else if (category === "colors") { + eval('object.values.' + category + '.' + variable + ' = ' + value) + eval('pixelbite.colors.' + variable + ' = ' + value) + } + } catch (error) { + console.error(error) + } + } + } + let string = 'Using ' + if (object.theme_name) string += "theme " + object.theme_name + else string += "config theme" + if (object.theme_version) { + string += " " + if (object.theme_version) string += object.theme_version + if (object.theme_date) string += "\n- Released: " + object.theme_date + if (object.theme_url) string += ", " + object.theme_url + } + if (object.author) { + string += "\n- Author: @" + object.author + if (object.author_url) string += ", " + object.author_url + } + if(object.description) { + string += "\n- " + object.description + } + + let style = "" + if (object.style) style += object.style + ";" + + console.log( + "%c" + string + "", + style.replaceAll('!','!') + "font-size:12px;font-weight:bold" + ) + + if (pixelbite.debug) { + console.log(object) + } + + let configs = object.values.configs + if (configs) { + for (let i = 0; i < configs.length; i++) { + pb_configEval(configs[i]) + } + } + } + // if(text) { + // let lines = text.split('\n') + // for (let i = 0; i < lines.length; i++) { + // if (/^\s/.test(lines[i])) { + // lines[i] = 'pixelbite.' + lines[i] + // } + // try { + // eval('pixelbite.' + lines[i].replaceAll('<', '<')) + // } catch (error) { + // console.error('PixelBite: Syntax error on line ' + i + ' (reading "' + url + '")'); + // } + // } + // } +} + +const fetchFile = async (url) => { + let res = '' + await fetch(url) + .then(response => { + if (!response.ok) { + throw new Error('File not found') + } + return response.text() + }) + .then(text => { + res = text + }) + .catch(error => { + if (url !== window.location.protocol + "//" + window.location.host + "/pixelbite.conf") { + console.error('PixelBite: Cannot get response from "' + url + '"') + } + }); + return res +} + +const changeTheme = async () => { + await changeThemeMode() +} + +const changeThemeMode = async () => { + if (darkmode === '0') { + darkmode = '1' + pb_setCookie('darkmode', '1', 365) + } else { + darkmode = '0' + pb_setCookie('darkmode', '0', 365) + } + pb_classGenerator() +} + +const pb_checkLoaders = async () => { + let loaders = document.getElementsByClassName('loader') + if (loaders.length > 0) { + for (let i = 0; i < loaders.length; i++) { + loaders[i].style.opacity = '0'; + await pb_sleep(400); + loaders[i].style.display = 'none'; + loaders[i].remove() + } + } +} + +const pb_checkLoremIpsum = () => { + const elements = document.getElementsByTagName('*') + for (let i = 0; i < elements.length; i++) { + elements[i].classList.forEach((element_class) => { + let element_class_split = element_class.split('-'); + if (element_class_split[0] === "loremIpsum") { + for (let k = 0; k < element_class_split[1]; k++) { + elements[i].innerHTML += pb_randomFromArray(pb_getObjectValues(pixelbite.loremIpsum))[1] + " " + } + elements[i].classList.remove(element_class) + } + }) + } +} + +const pb_sleep = (ms) => { + return new Promise(resolve => setTimeout(resolve, ms)) +} + +function pb_randomString(length) { + let result = ''; + const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; + let counter = 0; + while (counter < length) { + result += pb_randomFromArray(characters); + counter += 1; + } + return result; +} + +const pb_randomFromArray = (array) => { + return array[Math.floor(Math.random() * array.length)] +} + +window.onload = () => { + console.log( + "%cThank you for using PixelbiteCSS :) (version " + pixelbite.version + ")", + "font-size:18px;font-weight:bold" + ) + console.log( + "%cMore information can be found on our website or GitHub\nhttps://pixelbite-css.github.io, https://github.com/Pixelbite-CSS", + "font-weight:bold" + ) + pb_addSignature() + pb_classGenerator() +} + +const pb_changeRootVariable = (variable, value) => { + document.documentElement.style.setProperty(variable, value); +} + +const pb_classGenerator = () => { + debugmode() + pb_alocatedPath() + pb_checkLoremIpsum() + if (pixelbite.variables.primary !== document.documentElement.style.getPropertyValue('--primary-color')) { + pb_changeRootVariable('--primary-color', pixelbite.variables.primary) + } + if (pixelbite.variables.secondary !== document.documentElement.style.getPropertyValue('--secondary-color')) { + pb_changeRootVariable('--secondary-color', pixelbite.variables.secondary) + } + if (pixelbite.variables.success !== document.documentElement.style.getPropertyValue('--success-color')) { + pb_changeRootVariable('--success-color', pixelbite.variables.success) + } + if (pixelbite.variables.info !== document.documentElement.style.getPropertyValue('--info-color')) { + pb_changeRootVariable('--info-color', pixelbite.variables.info) + } + if (pixelbite.variables.danger !== document.documentElement.style.getPropertyValue('--danger-color')) { + pb_changeRootVariable('--danger-color', pixelbite.variables.danger) + } + if (pixelbite.variables.warning !== document.documentElement.style.getPropertyValue('--warning-color')) { + pb_changeRootVariable('--warning-color', pixelbite.variables.warning) + } + if (pixelbite.variables.fontPrimary !== document.documentElement.style.getPropertyValue('--font-family')) { + pb_changeRootVariable('--font-family', pixelbite.variables.fontPrimary) + } + if (pixelbite.variables.fontMonospace !== document.documentElement.style.getPropertyValue('--font-mono-family')) { + pb_changeRootVariable('--font-mono-family', pixelbite.variables.fontMonospace) + } + const elements = document.getElementsByTagName('*') + for (let i = 0; i < elements.length; i++) { + let element = elements[i] + pb_aliasClassReplace(element) + element.classList.forEach((element_class) => { + for (let j = 0; j < class_library.length; j++) { + let element_class_split = element_class.split('-'); + let splitToString = element_class_split[1] + '' + if (splitToString.includes('_')) { + element_class_split[1] = splitToString.replace('_', '-') + } + if (darkmode === '1') { + if (element_class_split[0].includes('dark:')) { + element_class_split[0] = element_class_split[0].replace('dark:', '') + } + } + if (element_class_split[0].includes('foreach:')) { + element_class_split[0] = element_class_split[0].replace('foreach:', '') + let elementsOfElement = element.getElementsByTagName('*') + if (element_class_split[0] === class_library[j][0]) { + for (let k = 0; k < elementsOfElement.length; k++) { + elementsOfElement[k].style.cssText += class_library[j][1] + ':' + pb_classSplitToString(element_class_split, 1) + ';' + } + } else { + for (let k = 0; k < elementsOfElement.length; k++) { + elementsOfElement[k].classList.add(element_class) + } + } + } + if (element_class_split[0].includes('max') && element_class_split[0].includes(':')) { + let size = element_class_split[0].split(':')[0].replace('max', '').replace(':', '').replace('px', '') + if (size <= window.innerWidth) { + element_class_split[0] = element_class_split[0].split(':')[1] + } + } + if (element_class_split[0].includes('min') && element_class_split[0].includes(':')) { + let size = element_class_split[0].split(':')[0].replace('min', '').replace(':', '').replace('px', '') + if (size >= window.innerWidth) { + element_class_split[0] = element_class_split[0].split(':')[1] + } + } + if (element_class_split[0] === class_library[j][0]) { + element.style.cssText += class_library[j][1] + ':' + pb_classSplitToString(element_class_split, 1) + ';' + } + if(element_class_split[0] === "gradient") { + if (!element_class_split[3]) { + element_class_split[3] = 0 + } + let col1 = pb_variableCheck(element_class_split[1]) + let col2 = pb_variableCheck(element_class_split[2]) + let deg = pb_variableCheck(element_class_split[3]) + element.style.cssText += '' + + 'background: ' + + 'background: -moz-linear-gradient(' + deg + ', ' + col1 + ' 0%, ' + col2 + ' 100%);' + + 'background: -webkit-linear-gradient(' + deg + ', ' + col1 + ' 0%, ' + col2 + ' 100%);' + + 'background: linear-gradient(' + deg + ', ' + col1 + ' 0%, ' + col2 + ' 100%);' + + 'filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="' + col1 + '",endColorstr="' + col2 + '",GradientType=1);' + } + } + }) + pb_updateSearchbars() + pb_updateDropdowns() + pb_generateFloatInput(element) + } +} + +const pb_generateFloatInput = (element) => { + if (element.classList.contains("floatInput")) { + if (element.getElementsByClassName('input') && element.getElementsByClassName('label')) { + if (element.getElementsByClassName('input') && element.getElementsByTagName('label')) { + let inputs = element.getElementsByTagName('input') + let input = inputs[0] + let labels = element.getElementsByTagName('label') + let label = labels[0] + if (input.value) label.classList.add('inputhastext') + else if (label.classList.contains('inputhastext')) label.classList.remove('inputhastext') + } + } + } +} + +const pb_aliasClassReplace = (element) => { + let x = element.classList + for (let i = 0; i < x.length; i++) { + let aliasClasses = pb_getObjectValues(pixelbite.aliases) + for (let j = 0; j < aliasClasses.length; j++) { + if (aliasClasses[j][0] === x[i]) { + let classSplit = aliasClasses[j][1].split(' ') + for (let k = 0; k < classSplit.length; k++) { + element.classList.add(classSplit[k]) + } + } + } + } +} + +const pb_classSplitToString = (array, startPosition) => { + if (array) { + let variables = pb_getObjectValues(pixelbite.variables) + let color_library_hsl = pb_getObjectValues(pixelbite.colors) + let a = "" + for (let i = startPosition; i < array.length; i++) { + for (let j = 0; j < variables.length; j++) { + if (variables[j][1].includes('url(')) { + let fontName = 'font-' + pb_randomString(32) + let varia = pixelbite.variables + pb_putCustomFontIntoCSS(fontName, variables[j][1]) + varia[variables[j][0]] = fontName + } + if (array[i] === variables[j][0]) { + array[i] = variables[j][1] + } + } + for (let j = 0; j < color_library_hsl.length; j++) { + if (color_library_hsl[j][1].includes('#')) { + let hsl = pb_colorConverter(color_library_hsl[j][1]) + color_library_hsl[j][1] = [hsl[0] * 360 + '', hsl[1] * 100 + '%'] + } + if (array[i].includes(color_library_hsl[j][0])) { + let lightness = array[i].replace(color_library_hsl[j][0], "") + if (!lightness) lightness = 50 + if (pb_isNumeric(lightness)) { + array[i] = "hsl(" + color_library_hsl[j][1][0] + "," + color_library_hsl[j][1][1] + "," + lightness + '%)' + } + } + // if (array[i].includes(color_library_hsl[j][0])) { + // let lightness = array[i].replace(color_library_hsl[j][0], "") + // if (!lightness) lightness + // if (pb_isNumeric(lightness)) + // array[i] = array[i].replace(color_library_hsl[j][0], "hsl(" + color_library_hsl[j][1][0] + "," + color_library_hsl[j][1][1] + ",") + // array[i] += "%)" + // } + } + a += array[i] + " " + } + return a + } else return "" +} + +const pb_variableCheck = (string) => { + let variables = pb_getObjectValues(pixelbite.variables) + let color_library_hsl = pb_getObjectValues(pixelbite.colors) + for (let j = 0; j < variables.length; j++) { + if (variables[j][1].includes('url(')) { + let fontName = 'font-' + pb_randomString(32) + let varia = pixelbite.variables + pb_putCustomFontIntoCSS(fontName, variables[j][1]) + varia[variables[j][0]] = fontName + } + if (string === variables[j][0]) { + string = variables[j][1] + } + } + for (let j = 0; j < color_library_hsl.length; j++) { + if (color_library_hsl[j][1].includes('#')) { + let hsl = pb_colorConverter(color_library_hsl[j][1]) + color_library_hsl[j][1] = [hsl[0] * 360 + '', hsl[1] * 100 + '%'] + } + if (string.includes(color_library_hsl[j][0])) { + let lightness = string.replace(color_library_hsl[j][0], "") + if (!lightness) lightness = 50 + if (pb_isNumeric(lightness)) { + string = "hsl(" + color_library_hsl[j][1][0] + "," + color_library_hsl[j][1][1] + "," + lightness + '%)' + } + } + } + return string +} + +const pb_isNumeric = (str) => { + if (typeof str != "string") return false + return !isNaN(str) && !isNaN(parseFloat(str)) +} + +const pb_colorConverter = (color) => { + let r = parseInt(color.substr(1, 2), 16); // Grab the hex representation of red (chars 1-2) and convert to decimal (base 10). + let g = parseInt(color.substr(3, 2), 16); + let b = parseInt(color.substr(5, 2), 16); + r /= 255, g /= 255, b /= 255; + let max = Math.max(r, g, b), min = Math.min(r, g, b); + let h, s, l = (max + min) / 2; + + if (max == min) { + h = s = 0; // achromatic + } else { + let d = max - min; + s = l > 0.5 ? d / (2 - max - min) : d / (max + min); + switch (max) { + case r: + h = (g - b) / d + (g < b ? 6 : 0); + break; + case g: + h = (b - r) / d + 2; + break; + case b: + h = (r - g) / d + 4; + break; + } + h /= 6; + } + + return [h, s, l]; +} + +const pb_addSignature = () => { + const comment = document.createComment("This site is created via PixelbiteCSS (https://github.com/Pixelbite-CSS)"); + document.body.appendChild(comment); +} + +const pb_addFontAwesome = () => { + const script = document.createElement('script') + script.setAttribute('src', pixelbite.fontawesome) + script.setAttribute('crossorigin', 'anonymous') + document.head.appendChild(script) +} + +const debugmode = () => { + if (pixelbite.debug) { + let elements = document.getElementsByTagName('*') + for (let i = 0; i < elements.length; i++) { + elements[i].setAttribute('contenteditable', 'true') + } + } +} + +const href = (location, newWindow) => { + if (newWindow) newWindow = '_blank' + else newWindow = '_self' + window.open(location, newWindow) +} + +const toggleElement = (element_class) => { + const elements = document.getElementsByClassName(element_class) + for (let i = 0; i < elements.length; i++) { + // if (elements[i].classList.contains('hidden')) { + // elements[i].style.position = 'absolute' + // elements[i].classList.remove('hidden') + // } + // if (elements[i].style.position !== 'absolute') { + // elements[i].style.position = 'absolute' + // elements[i].style.top = '-999999999px' + // } else { + // elements[i].style.position = 'relative' + // elements[i].style.top = '0px' + // } + if (elements[i].classList.contains('hidden')) { + elements[i].style.display = 'none' + elements[i].classList.remove('hidden') + } + if (elements[i].style.display !== 'none') { + elements[i].style.display = 'none' + } else { + elements[i].style.display = 'flex' + } + } +} + +const pb_changeVariable = (variable, value) => { + document.documentElement.style.setProperty(variable, value); +} + +let pb_beforeSlideshows = [] + +const pb_slideshowGenerator = async () => { + let slideshows = document.getElementsByClassName('slideshow') + if (slideshows !== pb_beforeSlideshows) { + if (slideshows.length > 0) { + for (let i = 0; i < slideshows.length; i++) { + if (!pb_beforeSlideshows.includes(slideshows[i])) { + let slideshow = slideshows[i] + let slides = slideshow.getElementsByClassName('slide') + pb_slideshowSlide(0, slideshow, slides) + } + } + pb_beforeSlideshows = slideshows + } + } + await pb_sleep(1000) + await pb_slideshowGenerator() +} + +const pb_slideshowSlide = async (index, slideshow, slides) => { + for (let i = 0; i < slides.length; i++) { + slides[i].style.left = ((-i + index) * 100) + "%" + } + if (index >= slides.length - 1) index = -1 + await pb_sleep(5000) + await pb_slideshowSlide(index + 1, slideshow, slides) +} + +const pb_setCookie = (name, value, days_to_expiration) => { + const d = new Date() + d.setTime(d.getTime() + (days_to_expiration * 24 * 60 * 60 * 1000)) + let expires = "expires=" + d.toUTCString() + document.cookie = name + "=" + value + ";" + expires + ";path=/" +} + +const pb_getCookie = (name) => { + let n = name + "=" + let decodedCookie = decodeURIComponent(document.cookie) + let ca = decodedCookie.split(';') + for (let i = 0; i < ca.length; i++) { + let c = ca[i] + while (c.charAt(0) === ' ') { + c = c.substring(1) + } + if (c.indexOf(n) === 0) return c.substring(n.length, c.length) + } + return "" +} + +let pb_searchbarsBefore = [] + +const pb_updateSearchbars = () => { + if (pb_searchbarsBefore.length !== document.getElementsByClassName('searchbar').length) { + let searchbars = document.getElementsByClassName('searchbar') + for (let i = 0; i < searchbars.length; i++) { + let search = searchbars[i].getElementsByClassName('search')[0] + let searchValues = searchbars[i].getElementsByClassName('search-values')[0].getElementsByTagName('div') + for (let j = 0; j < searchValues.length; j++) { + searchValues[j].style.display = 'none' + + } + search.oninput = () => { + let searchValue = search.value.toLowerCase(); + let searchValues = searchbars[i].getElementsByClassName('search-values')[0].getElementsByTagName('div') + for (let j = 0; j < searchValues.length; j++) { + if (searchValues[j].innerText.toLowerCase().includes(searchValue) && searchValue) { + searchValues[j].style.display = 'flex' + } else { + searchValues[j].style.display = 'none' + } + } + } + } + pb_searchbarsBefore = searchbars + } +} + +let pb_dropdownsBefore = [] + +const pb_updateDropdowns = () => { + let dropdowns = document.getElementsByClassName("dropdown"); + if(pb_dropdownsBefore.length !== dropdowns.length) { + for (let i = 0; i < dropdowns.length; i++) { + let divs = document.getElementsByTagName('div') + let buttons = document.getElementsByTagName('button') + for(let j = 0; j < divs.length; j++) { + divs[j].remove + } + for(let j = 0; j < buttons.length; j++) { + buttons[j].remove + } + let selects = dropdowns[i].getElementsByTagName('select') + for(let j = 0; j < selects.length; j++) { + selects[j].style.display = "none"; + } + let options = dropdowns[i].getElementsByTagName('select')[0].getElementsByTagName('option') + let selectButton = document.createElement("button") + let dropdownClassname = "toggle-" + pb_randomString(32) + selectButton.onclick = () => toggleElement(dropdownClassname) + selectButton.innerHTML = "
            " + options[0].innerHTML + "
            " + dropdowns[i].append(selectButton) + dropdowns[i].value = options[0].value; + let selectMenu = document.createElement("div") + selectMenu.classList.add("hidden") + selectMenu.classList.add(dropdownClassname) + for(let k = 0; k < options.length; k++) { + let option = document.createElement("div") + option.value = options[k].value + option.innerHTML = options[k].innerHTML + option.onclick = () => { + dropdowns[i].value = options[k].value + dropdowns[i].getElementsByTagName('button')[0].innerHTML = "
            " + options[k].innerHTML + "
            " + pb_classGenerator() + toggleElement(dropdownClassname) + } + selectMenu.append(option) + } + dropdowns[i].append(selectMenu) + } + pb_dropdownsBefore = dropdowns + } +} + +window.addEventListener('resize', pb_classGenerator); \ No newline at end of file diff --git a/script/changelog.txt b/script/changelog.txt index 1d6b121..1238eb6 100644 --- a/script/changelog.txt +++ b/script/changelog.txt @@ -4,8 +4,10 @@ - Fixed Darkmode and changeTheme() - Added configs support - Made it more better with it's own syntax - - Made // comments work + - Made // and # comments work - Made Configs and Fontawesome support - - TODO: Custom name components support + - Custom name components support - Added Fontawesome support (custom link can be changed in pixelbite.fontawesome) -- Changed Pixelbite Object's structure \ No newline at end of file +- Changed Pixelbite Object's structure +- Added function alocatedPath() that replaces '@/' string with site's url + - Changed object attributes to 'object_name:object' \ No newline at end of file diff --git a/script/pixelbite.js b/script/pixelbite.js index 2651c71..2fdcac1 100644 --- a/script/pixelbite.js +++ b/script/pixelbite.js @@ -229,7 +229,7 @@ var pixelbite = { components: [], fontawesome: 'https://kit.fontawesome.com/f474ae69e7.js', debug: false, - version: 'beta-1.6' + version: '1.6' } const pb_getObjectValues = (object) => { @@ -242,12 +242,13 @@ const pb_setCustomComponents = () => { } const pb_customComponentsCheck = (array, relativePath) => { + let components = pb_getObjectValues(pixelbite.components) if (!relativePath) relativePath = '' for (let i = 0; i < array.length; i++) { let element = array[i] if (element.tagName.toUpperCase().includes('COMPONENT')) { let element_attributes = element.getAttributeNames() - let path = element.getAttribute('path') + let path = pb_alocatePath(element.getAttribute('path')) if (path.startsWith('http://') || path.startsWith('https://')) { path = element.getAttribute('path') } else { @@ -255,6 +256,13 @@ const pb_customComponentsCheck = (array, relativePath) => { } pb_includeHtmlToAnElement(element, path, element_attributes) } + for (let j = 0; j < components.length; j++) { + if (element.tagName.toUpperCase().includes(components[j][0].toLocaleUpperCase())) { + let element_attributes = element.getAttributeNames() + let path = pb_alocatePath(components[j][1]) + pb_includeHtmlToAnElement(element, path, element_attributes) + } + } } } @@ -281,6 +289,22 @@ const pb_customMarkdown = (text, markdown) => { return html; } +const pb_componentErrorMessage = (element, attributes, message) => { + let toggleClass = 'toggle-' + pb_randomString(32) + let toggleClassMore = 'toggle-' + pb_randomString(32) + let detailsString = ''; + for (let i = 0; i < attributes.length; i++) { + detailsString += ' - [' + attributes[i] + '="' + element.getAttribute(attributes[i]).replaceAll('<', '<') + '"],
            ' + } + element.innerHTML = + '
            ' + + '' + message + '
            ' + + '- see more details' + + '' + + '' + + '
            ' +} + const pb_includeHtmlToAnElement = async (element, path, attributes) => { if (!path) path = 'null' let relativePathSplit = path.split('/') @@ -295,22 +319,31 @@ const pb_includeHtmlToAnElement = async (element, path, attributes) => { let response = this.response.replaceAll('\t', ' ') for (let i = 0; i < attributes.length; i++) { let attribute = attributes[i] - if (attribute.includes('[object]')) { + if (attribute.includes(':object')) { let object = '' - let objectName = attribute.replace('[object]', '') + let objectName = attribute.replace(':object', '') let objectPath = element.getAttribute(attribute) let objectRequest = new XMLHttpRequest(); objectRequest.onreadystatechange = function () { - if (this.readyState === 4 && this.status === 200) { - try { - object = JSON.parse(this.responseText); - } catch (error) { - console.error('PixelBite: Your "' + objectName + '[object]" has syntax error.') + if (this.readyState === 4) { + if (this.status === 200) { + try { + object = JSON.parse(this.responseText); + } catch (error) { + console.error('PixelBite: Attribute "' + objectName + ':object[' + objectPath + ']" in component has syntax error.') + } } } + if (this.status === 404) { + object = null + } }; - objectRequest.open("GET", objectPath, true); - objectRequest.send(); + try { + objectRequest.open("GET", objectPath, true); + objectRequest.send(); + } catch (err) { + console.error("help") + } while (!object) { await pb_sleep(10) } @@ -360,30 +393,23 @@ const pb_includeHtmlToAnElement = async (element, path, attributes) => { } } if (this.status === 404) { - let toggleClass = 'toggle-' + pb_randomString(32) - let toggleClassMore = 'toggle-' + pb_randomString(32) - let detailsString = ''; - for (let i = 0; i < attributes.length; i++) { - detailsString += ' - [' + attributes[i] + '="' + element.getAttribute(attributes[i]).replaceAll('<', '<') + '"],
            ' - } - element.innerHTML = - '
            ' + - 'Component not found [path=' + path + ']
            ' + - '- see more details' + - '' + - '' + - '
            ' + pb_componentErrorMessage(element, attributes, 'Component not found [path=' + path + ']') } } pb_classGenerator() } - componentRequest.open("GET", path, true); - componentRequest.send(); + try { + componentRequest.open("GET", path, true); + componentRequest.send(); + } catch (err) { + console.error(err) + } } let darkmode = false window.addEventListener("load", async () => { + await pb_alocatedPath() await pb_checkLoremIpsum() let darkmodeCookie = pb_getCookie('darkmode') if (!darkmodeCookie) { @@ -392,15 +418,34 @@ window.addEventListener("load", async () => { } else { darkmode = darkmodeCookie } - pb_checkLoaders() pb_classGenerator() await pb_configureConfigs(pixelbite.configs) pb_setCustomComponents() pb_slideshowGenerator() - pb_addFontAwesome() - + await pb_addFontAwesome() + pb_checkLoaders() }) +const pb_alocatedPath = () => { + const a = document.getElementsByTagName('*') + for (let i = 0; i < a.length; i++) { + let element = a[i] + let elementAttributeNames = element.getAttributeNames() + for (let j = 0; j < elementAttributeNames.length; j++) { + if(element.getAttribute(elementAttributeNames[j]).includes('@/')) { + element.setAttribute( + elementAttributeNames[j], + element.getAttribute(elementAttributeNames[j]).replace(/.*?@\/\s*/,'@/').replaceAll('@/', window.location.protocol + "//" + window.location.host + "/") + ) + } + } + } +} + +const pb_alocatePath = (string) => { + return string.replace(/.*?@\/\s*/,'@/').replaceAll('@/', window.location.protocol + "//" + window.location.host + "/") +} + const pb_configureConfigs = async (urls) => { await pb_configEval(window.location.protocol + "//" + window.location.host + "/pixelbite.conf") for (let j = 0; j < urls.length; j++) { @@ -445,7 +490,7 @@ const pb_configEval = async (url) => { category = line.trim().replaceAll('[', '').replaceAll(']', '') } else { let variable = pb_extractWordBeforeEquals(line) - let value = line.replace(/^\w+\s*=\s*/, '').trim() + let value = line.replace(/^\w+\s*=\s*/, '').trim().replace(/.*?@\/\s*/,'@/').replaceAll('@/', window.location.protocol + "//" + window.location.host + "/") try { if(category === "informations") { eval('object.' + variable + ' = ' + value) @@ -454,6 +499,9 @@ const pb_configEval = async (url) => { eval('pixelbite.' + variable + ' = ' + value) } else if (category === "components") { eval('object.values.' + category + '.' + variable + ' = ' + value) + if (!value.includes('http://') || !value.includes('https://')) { + value = value.charAt(0) + window.location.protocol + "//" + window.location.host + "/" + value.slice(1) + } eval('pixelbite.components.' + variable + ' = ' + value) } else if (category === "aliases") { eval('object.values.' + category + '.' + variable + ' = ' + value) @@ -479,13 +527,16 @@ const pb_configEval = async (url) => { if (object.theme_version) { string += " " if (object.theme_version) string += object.theme_version - if (object.theme_date) string += "\nReleased: " + object.theme_date + if (object.theme_date) string += "\n- Released: " + object.theme_date if (object.theme_url) string += ", " + object.theme_url } if (object.author) { - string += "\nMade by @" + object.author + string += "\n- Author: @" + object.author if (object.author_url) string += ", " + object.author_url } + if(object.description) { + string += "\n- " + object.description + } let style = "" if (object.style) style += object.style + ";" @@ -534,7 +585,9 @@ const fetchFile = async (url) => { res = text }) .catch(error => { - console.error('PixelBite: Cannot get response from "' + url + '"'); + if (url !== window.location.protocol + "//" + window.location.host + "/pixelbite.conf") { + console.error('PixelBite: Cannot get response from "' + url + '"') + } }); return res } @@ -619,6 +672,7 @@ const pb_changeRootVariable = (variable, value) => { const pb_classGenerator = () => { debugmode() + pb_alocatedPath() pb_checkLoremIpsum() if (pixelbite.variables.primary !== document.documentElement.style.getPropertyValue('--primary-color')) { pb_changeRootVariable('--primary-color', pixelbite.variables.primary) @@ -688,9 +742,24 @@ const pb_classGenerator = () => { if (element_class_split[0] === class_library[j][0]) { element.style.cssText += class_library[j][1] + ':' + pb_classSplitToString(element_class_split, 1) + ';' } + if(element_class_split[0] === "gradient") { + if (!element_class_split[3]) { + element_class_split[3] = 0 + } + let col1 = pb_variableCheck(element_class_split[1]) + let col2 = pb_variableCheck(element_class_split[2]) + let deg = pb_variableCheck(element_class_split[3]) + element.style.cssText += '' + + 'background: ' + + 'background: -moz-linear-gradient(' + deg + ', ' + col1 + ' 0%, ' + col2 + ' 100%);' + + 'background: -webkit-linear-gradient(' + deg + ', ' + col1 + ' 0%, ' + col2 + ' 100%);' + + 'background: linear-gradient(' + deg + ', ' + col1 + ' 0%, ' + col2 + ' 100%);' + + 'filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="' + col1 + '",endColorstr="' + col2 + '",GradientType=1);' + } } }) pb_updateSearchbars() + pb_updateDropdowns() pb_generateFloatInput(element) } } @@ -768,6 +837,36 @@ const pb_classSplitToString = (array, startPosition) => { } else return "" } +const pb_variableCheck = (string) => { + let variables = pb_getObjectValues(pixelbite.variables) + let color_library_hsl = pb_getObjectValues(pixelbite.colors) + for (let j = 0; j < variables.length; j++) { + if (variables[j][1].includes('url(')) { + let fontName = 'font-' + pb_randomString(32) + let varia = pixelbite.variables + pb_putCustomFontIntoCSS(fontName, variables[j][1]) + varia[variables[j][0]] = fontName + } + if (string === variables[j][0]) { + string = variables[j][1] + } + } + for (let j = 0; j < color_library_hsl.length; j++) { + if (color_library_hsl[j][1].includes('#')) { + let hsl = pb_colorConverter(color_library_hsl[j][1]) + color_library_hsl[j][1] = [hsl[0] * 360 + '', hsl[1] * 100 + '%'] + } + if (string.includes(color_library_hsl[j][0])) { + let lightness = string.replace(color_library_hsl[j][0], "") + if (!lightness) lightness = 50 + if (pb_isNumeric(lightness)) { + string = "hsl(" + color_library_hsl[j][1][0] + "," + color_library_hsl[j][1][1] + "," + lightness + '%)' + } + } + } + return string +} + const pb_isNumeric = (str) => { if (typeof str != "string") return false return !isNaN(str) && !isNaN(parseFloat(str)) @@ -937,5 +1036,51 @@ const pb_updateSearchbars = () => { pb_searchbarsBefore = searchbars } } + +let pb_dropdownsBefore = [] + +const pb_updateDropdowns = () => { + let dropdowns = document.getElementsByClassName("dropdown"); + if(pb_dropdownsBefore.length !== dropdowns.length) { + for (let i = 0; i < dropdowns.length; i++) { + let divs = document.getElementsByTagName('div') + let buttons = document.getElementsByTagName('button') + for(let j = 0; j < divs.length; j++) { + divs[j].remove + } + for(let j = 0; j < buttons.length; j++) { + buttons[j].remove + } + let selects = dropdowns[i].getElementsByTagName('select') + for(let j = 0; j < selects.length; j++) { + selects[j].style.display = "none"; + } + let options = dropdowns[i].getElementsByTagName('select')[0].getElementsByTagName('option') + let selectButton = document.createElement("button") + let dropdownClassname = "toggle-" + pb_randomString(32) + selectButton.onclick = () => toggleElement(dropdownClassname) + selectButton.innerHTML = "
            " + options[0].innerHTML + "
            " + dropdowns[i].append(selectButton) + dropdowns[i].value = options[0].value; + let selectMenu = document.createElement("div") + selectMenu.classList.add("hidden") + selectMenu.classList.add(dropdownClassname) + for(let k = 0; k < options.length; k++) { + let option = document.createElement("div") + option.value = options[k].value + option.innerHTML = options[k].innerHTML + option.onclick = () => { + dropdowns[i].value = options[k].value + dropdowns[i].getElementsByTagName('button')[0].innerHTML = "
            " + options[k].innerHTML + "
            " + pb_classGenerator() + toggleElement(dropdownClassname) + } + selectMenu.append(option) + } + dropdowns[i].append(selectMenu) + } + pb_dropdownsBefore = dropdowns + } +} window.addEventListener('resize', pb_classGenerator); \ No newline at end of file diff --git a/style/1.6/pixelbite-min.css b/style/1.6/pixelbite-min.css new file mode 100644 index 0000000..d882a2f --- /dev/null +++ b/style/1.6/pixelbite-min.css @@ -0,0 +1 @@ +@import url(https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap);@import url(https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap);code,pre{font-family:var(--font-mono-family)}*,body,button,pre span{position:relative}.buttonOutline,a{color:var(--primary-color)}.label,button{font-weight:600}.label,.label:hover{text-decoration:none}.dropdown>div>div,.pointer,.slider,button{cursor:pointer}:root{--font-family:'Poppins',sans-serif;--font-mono-family:'Fira Mono',monospace;--primary-color:#5920B0;--secondary-color:#9575C6;--success-color:#60D130;--danger-color:#D13030;--warning-color:#DFAF2A;--info-color:#26C7E7}*{box-sizing:border-box;font-family:var(--font-family);max-width:100%;scroll-behavior:smooth}:focus{outline:1px solid var(--secondary-color)}.noselect{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}code:focus{outline:0}body,html{margin:0;padding:0;width:100%;min-height:100%}body{overflow-y:auto}a{fill:var(--primary-color);transition:color .2s,transform .2s,text-decoration .2s,opacity .2s}a:hover{transform:scale(1.02);opacity:.5}.paragraph,h1,h2,h3,h4{margin:0 0 .5rem}h1{font-size:42px}h2{font-size:32px}h3{font-size:28px}h4{font-size:22px}h5{font-size:18px}pre{overflow:auto;color:var(--secondary-color);width:100%;counter-reset:line}.codeblock{padding:16px 22px;background:rgba(128,128,128,.02);overflow:auto;border-radius:4px;border:1px solid var(--secondary-color)}pre span{counter-increment:line;font:var(--font-mono-family);text-align:right}pre.numberedLines span::before{content:counter(line);display:inline-block;width:1em;margin-right:1em;color:rgba(128,128,128,.6);font:var(--font-mono-family);-webkit-user-select:none}pre span.highlight::after{content:'';position:absolute;left:0;top:0;width:100%;height:100%;box-shadow:inset 0 20px 42px -30px var(--info-color),inset 0 -20px 42px -30px var(--info-color),inset 4px 0 0 var(--info-color);opacity:1;z-index:-1}table{border-collapse:collapse;border-spacing:0}table td{border:1px solid #000}button{padding:.6rem 1rem;transition:opacity .2s,box-shadow .1s;border:none;background:var(--primary-color);color:#fff;border-radius:.2rem;opacity:.8}button:hover{opacity:1}button:active{transform:scale(1.01);box-shadow:0 0 10px rgba(128,128,128,.1)}input{padding:.6rem .8rem;border-radius:4px;border:1px solid rgba(128,128,128,.5);transition:.2s}.floatInput>input{padding:1.4rem 1rem .6rem;font-weight:400;font-size:18px;border:1px solid rgba(128,128,128,.5);box-shadow:0 0 0 var(--secondary-color);transition:.2s}input:focus{border:1px solid rgba(128,128,128,.9);outline:0;box-shadow:0 0 0 3px var(--secondary-color)}.floatInput>label{position:absolute;opacity:.5;top:1.2rem;left:1.2rem;transform:scale(1);transition:transform .2s,top .2s,left .2s}.floatInput .inputhastext,.floatInput:focus-within label{top:.2rem;left:.86rem;transform:scale(.9)}.sticky{top:0;left:0;position:sticky;position:-webkit-sticky}img{object-fit:cover}.auto-width{width:1200px;margin:0 auto;padding:0 14px}.auto-menu-button{display:none}.hidden{display:none!important}.fixed{z-index:9;position:fixed;top:0;left:0}.close-x{position:absolute;top:12px;right:12px;background:0 0;width:32px;height:32px}.label,.slideshow{position:relative}.close-x:after,.close-x:before{content:'';position:absolute;border-right:2px solid gray;border-top:2px solid gray;width:10px;height:10px}.close-x:after{transform:rotate(45deg);top:10px;left:3px}.close-x:before{transform:rotate(-135deg);top:10px;left:18px}.loader-page,.slide-shadow:before,.slide>img,.slider:before{left:0;height:100%;top:0}.buttonOutline{padding:.5rem .9rem;background:0 0;border:.1rem var(--primary-color) solid}.buttonHoverDark{box-shadow:inset 0 0 0 6000px rgba(128,128,128,0);transition:box-shadow .2s}.modal,.shadow{box-shadow:0 0 20px rgba(0,0,0,.2)}.buttonHoverDark:hover{box-shadow:inset 0 0 0 6000px rgba(128,128,128,.1)}.flex,.flexAlignItems,.flexBottom,.flexCenter,.flexColumn,.flexDirection,.flexJustifyContent,.flexLeft,.flexMiddle,.flexRight,.flexRow,.flexTop{display:flex;flex-wrap:nowrap;align-items:center}.flexCenter{justify-content:center}.flexMiddle{align-items:center}.flex-column,.flexColumn{flex-direction:column}.flex-row,.flexRow{flex-direction:row}.flexSpaceBetween{justify-content:space-between}.flexWrap{flex-wrap:wrap}.flexNowrap{flex-wrap:nowrap}.flexWrapReverse{flex-wrap:wrap-reverse}.flexLeft{align-items:flex-start}.flexRight{align-items:flex-end}.flexTop{justify-content:flex-start}.flexBottom{justify-content:flex-end}.fullWidth,.searchbar>input{width:100%}.fullHeight{height:100%}.windowWidth{width:100vw}.windowHeight{height:100vh}.grid{display:grid}.label{top:-3px;color:gray;display:inline-block;padding:.1rem .2rem;font-size:10px;background:0 0;border:.1rem solid gray;border-radius:.2rem}.modal,.modal-hover{border-radius:8px;overflow:hidden}.slideshow{overflow:hidden}.dropdown>div,.searchbar>div,.slide,.slide>img,.slider:after,.slider:before{position:absolute}.slide{width:100%;height:100%;overflow:hidden;transition:left .5s}.slide>img{opacity:1;width:100%}.slide>div{z-index:2}.slide-shadow:before{display:flex;z-index:1;position:absolute;box-shadow:inset 0 -800px 500px -500px rgba(255,255,255,.9);width:100%;content:''}.textOverflow{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.modal{background-color:#fff;font-size:16px}.modal-hover{transition:background-color .2s}.modal-hover:hover{background-color:rgba(128,128,128,.1);overflow:hidden;font-size:16px}.slider{position:relative;aspect-ratio:2/1;width:62px}.slider:before{content:'';width:100%;background:gray;border-radius:9999999px;pointer-events:none;transition:.2s}.slider:after{content:'';height:calc(100% - .4rem);top:0;left:0;aspect-ratio:1/1;background:#fff;border:.2rem solid gray;border-radius:9999999px;pointer-events:none;transition:.2s}.dropdown,.searchbar{position:relative}.slider:checked:after{left:50%;border:.2rem solid var(--info-color)}.slider:checked:before{background:var(--info-color)}.slider:focus-within{box-shadow:none}.searchbar>div{width:100%;transition:.2s;overflow-x:hidden;overflow-y:auto;height:0;display:flex;align-items:center;justify-content:center;flex-direction:column;z-index:4}.searchbar:focus-within>div{border-left:1px solid gray;border-right:1px solid gray;border-bottom:1px solid gray;border-radius:0 0 8px 8px;width:100%;height:auto;max-height:600%}.search-values>div{width:100%;background:#fff;padding:8px 16px;transition:background-color .2s;box-shadow:inset 0 -20px 20px rgba(128,128,128,.07);cursor:pointer}.search-values>div:hover{background:#e9e9e9}.dropdown>div>div{color:#000;background:#fff;padding:6px 32px 6px 10px;width:auto;transition:.2s;font-size:14px}.dropdown>div>div:hover{background:#ddd}.dropdown>div{border:1px solid gray;border-radius:6px;flex-direction:column!important;overflow:hidden}.dropdown{z-index:50}.dropdown>button{min-width:128px}.line{width:100%;padding:1px;margin:0 20px;background-color:var(--secondary-color);border-radius:5000px}.loader-icon,.loader-icon:after{border-radius:50%;border-top:4px solid transparent}.loader,.loader-page{transition:.4s}.loader-page{width:100%;position:fixed;z-index:9999;background:#fff}.loader-icon{width:32px;height:32px;border-left:4px var(--secondary-color) solid;border-bottom:4px var(--secondary-color) solid;border-right:4px var(--secondary-color) solid;animation:2s ease-in-out infinite rotate}.loader-icon:after{content:'';display:block;position:relative;top:-17px;left:-17px;width:50px;height:50px;border-left:4px var(--primary-color) solid;border-bottom:4px var(--primary-color) solid;border-right:4px var(--primary-color) solid;animation:2.5s ease-in-out infinite rotate}.loader-line{background:-webkit-repeating-linear-gradient(45deg,#fff 0,#fff 33%,#dedede 33%,#dedede 66%,#fff 66%,#fff 100%);background:-o-repeating-linear-gradient(45deg,#fff 0,#fff 33%,#dedede 33%,#dedede 66%,#fff 66%,#fff 100%);background:-moz-repeating-linear-gradient(45deg,#fff 0,#fff 33%,#dedede 33%,#dedede 66%,#fff 66%,#fff 100%);background:repeating-linear-gradient(45deg,#fff 0,#fff 33%,#dedede 33%,#dedede 66%,#fff 66%,#fff 100%);background-size:24px;width:200px;height:8px;border:1px solid rgba(128,128,128,.5);border-radius:50px;animation:2s linear infinite toSide}@keyframes toSide{from{background-position-x:0}to{background-position-x:100%}}@keyframes rotate{from{transform:rotate(0)}to{transform:rotate(720deg)}}@media only screen and (max-width:1200px){.auto-width{width:1000px}}@media only screen and (max-width:1000px){.auto-width{width:100%;padding-left:14px;padding-right:14px}.auto-menu,.auto-menu>*{flex-direction:column;gap:12px}.auto-menu-button{display:flex}.header{flex-direction:column;flex-wrap:wrap;justify-content:center;align-items:center}}@media only screen and (max-width:900px){.sticky{position:relative}.dashboard{display:flex;justify-content:center;align-items:center;flex-direction:column;height:auto;gap:0;width:100%}.dashboard-menu,.dashboard-menu>div{flex-direction:row}.dashboard>div{padding:0;margin:0;gap:0;width:100%!important}}@media only screen and (max-width:800px){.auto-size,.auto-size>div{width:100%!important}.auto-size>div{margin-top:12px;margin-bottom:12px}} \ No newline at end of file diff --git a/style/1.6/pixelbite.css b/style/1.6/pixelbite.css new file mode 100644 index 0000000..40ee29d --- /dev/null +++ b/style/1.6/pixelbite.css @@ -0,0 +1,699 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap'); + +:root { + --font-family: 'Poppins', sans-serif; + --font-mono-family: 'Fira Mono', monospace; + --primary-color: #5920B0; + --secondary-color: #9575C6; + --success-color: #60D130; + --danger-color: #D13030; + --warning-color: #DFAF2A; + --info-color: #26C7E7; +} + +* { + box-sizing: border-box; + font-family: var(--font-family); + max-width: 100%; + position: relative; + scroll-behavior: smooth; +} + +*:focus { + outline: 1px solid var(--secondary-color); +} + +.noselect { + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + } + +code:focus { + outline: none; +} + +html, body { + margin: 0; + padding: 0; + width: 100%; + min-height: 100%; +} + +body { + overflow-y: auto; + position: relative; +} + +a { + color: var(--primary-color); + fill: var(--primary-color); + transition: color .2s, transform .2s, text-decoration .2s, opacity .2s; +} + +a:hover { + transform: scale(1.02); + opacity: .5; +} + +h1, h2, h3, h4, .paragraph { + margin: 0 0 .5rem 0; +} + +h1 {font-size: 42px;} +h2 {font-size: 32px;} +h3 {font-size: 28px;} +h4 {font-size: 22px;} +h5 {font-size: 18px;} + +pre { + overflow: auto; + color: var(--secondary-color); + width: 100%; + font-family: var(--font-mono-family); + counter-reset: line; +} + +.codeblock { + padding: 16px 22px; + background: rgba(128, 128, 128, .02); + overflow: auto; + border-radius: 4px; + border: 1px solid var(--secondary-color); +} + +pre span { + counter-increment: line; + font: var(--font-mono-family); + text-align: right; + position: relative; +} + +pre.numberedLines span::before { + content: counter(line); + display: inline-block; + width: 1em; + margin-right: 1em; + color: rgba(128,128,128,.6); + font: var(--font-mono-family); + -webkit-user-select: none; +} + +code { + font-family: var(--font-mono-family); +} + +pre span.highlight::after { + content: ''; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + box-shadow: inset 0 20px 42px -30px var(--info-color), inset 0 -20px 42px -30px var(--info-color), inset 4px 0 0 var(--info-color); + opacity: 1; + z-index: -1; +} + +table { + border-collapse:collapse; + border-spacing:0; +} + +table td { + border: 1px solid black; +} + +.pointer { + cursor: pointer; +} + +button { + position: relative; + padding: .6rem 1rem; + font-weight: 600; + transition: opacity .2s, box-shadow .1s; + border: none; + cursor: pointer; + background: var(--primary-color); + color: white; + border-radius: .2rem; + opacity: .8; +} + +button:hover { + opacity: 1; +} + +button:active { + transform: scale(1.01); + box-shadow: 0 0 10px rgba(128,128,128,.1); +} + +input { + padding: .6rem .8rem; + border-radius: 4px; + border: 1px solid rgba(128,128,128,.5); + transition: .2s; +} + +.floatInput > input { + padding: 1.4rem 1rem .6rem 1rem; + font-weight: 400; + font-size: 18px; + border: 1px solid rgba(128,128,128,.5); + box-shadow: 0 0 0 var(--secondary-color); + transition: .2s; +} + +input:focus { + border: 1px solid rgba(128,128,128,.9); + outline: none; + box-shadow: 0 0 0 3px var(--secondary-color); +} + +.floatInput > label { + position: absolute; + opacity: .5; + top: 1.2rem; + left: 1.2rem; + transform: scale(1); + transition: transform .2s, top .2s, left .2s; +} + +.floatInput:focus-within label, .floatInput .inputhastext{ + top: .2rem; + left: .86rem; + transform: scale(.9); +} + +.sticky { + top: 0; + left: 0; + position: sticky; + position: -webkit-sticky; +} + +img { + object-fit: cover; +} + +.auto-width { + width: 1200px; + margin: 0 auto; + padding: 0 14px; +} + +.auto-menu-button { + display: none; +} + +.hidden { + /*position: absolute;*/ + /*top: -999999999px;*/ + display: none !important; +} + +.fixed { + z-index: 9; + position: fixed; + top: 0; + left: 0; +} + +.close-x { + position: absolute; + top: 12px; + right: 12px; + background: transparent; + width: 32px; + height: 32px; +} + +.close-x:after, .close-x:before { + content: ''; + position: absolute; + border-right: 2px solid gray; + border-top: 2px solid gray; + width: 10px; + height: 10px; +} + +.close-x:after { + transform: rotate(45deg); + top: 10px; + left: 3px; +} + +.close-x:before { + transform: rotate(-135deg); + top: 10px; + left: 18px; +} + +.buttonOutline { + padding: .5rem .9rem; + background: transparent; + border: .1rem var(--primary-color) solid; + color: var(--primary-color); +} + +.buttonHoverDark { + box-shadow: inset 0 0 0 6000px rgba(128, 128, 128, 0); + transition: box-shadow .2s; +} + +.buttonHoverDark:hover { + box-shadow: inset 0 0 0 6000px rgba(128, 128, 128, .1); +} + +.flex, .flexCenter, .flexMiddle, .flexColumn, .flexJustifyContent, .flexAlignItems, .flexDirection, .flexRow, .flexLeft, .flexRight, .flexTop, .flexBottom { + display: flex; + flex-wrap: nowrap; + align-items: center; +} + +.flexCenter { + justify-content: center; +} + +.flexMiddle { + align-items: center; +} + +.flexColumn, .flex-column { + flex-direction: column; +} + +.flexRow, .flex-row { + flex-direction: row; +} + +.flexSpaceBetween { + justify-content: space-between; +} + +.flexWrap { + flex-wrap: wrap; +} + +.flexNowrap { + flex-wrap: nowrap; +} + +.flexWrapReverse { + flex-wrap: wrap-reverse; +} + +.flexLeft { + align-items: flex-start; +} + +.flexRight { + align-items: flex-end; +} + +.flexTop { + justify-content: flex-start; +} + +.flexBottom { + justify-content: flex-end; +} + +.fullWidth {width: 100%} +.fullHeight {height: 100%} +.windowWidth {width: 100vw} +.windowHeight {height: 100vh} + +.grid { + display: grid; +} + +.label { + position: relative; + top: -3px; + color: gray; + text-decoration: none; + display: inline-block; + padding: .1rem .2rem; + font-weight: 600; + font-size: 10px; + background: transparent; + border: .1rem gray solid; + border-radius: .2rem; +} + +.label:hover { + text-decoration: none; +} + +.shadow { + box-shadow: 0 0 20px rgba(0,0,0,.2); +} + +.slideshow { + position: relative; + overflow: hidden; +} + +.slide { + width: 100%; + height: 100%; + overflow: hidden; + position: absolute; + transition: left .5s; +} + +.slide > img { + opacity: 1; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; +} + +.slide > div { + z-index: 2; +} + +.slide-shadow:before { + display: flex; + z-index: 1; + position: absolute; + top: 0; + left: 0; + box-shadow: inset 0 -800px 500px -500px rgba(255, 255, 255, .9); + width: 100%; + height: 100%; + content: ''; +} + +.textOverflow { + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; +} + +.modal { + border-radius: 8px; + overflow: hidden; + background-color: white; + font-size: 16px; + box-shadow: 0 0 20px rgba(0,0,0,.2); +} + +.modal-hover { + transition: background-color .2s; + overflow: hidden; + border-radius: 8px; +} + +.modal-hover:hover { + background-color: rgba(128, 128, 128, .1); + overflow: hidden; + font-size: 16px; +} + +.slider { + position: relative; + aspect-ratio: 2/1; + width: 62px; + cursor: pointer; +} + +.slider:before { + position: absolute; + content: ''; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: gray; + border-radius: 9999999px; + pointer-events: none; + transition: .2s; +} + +.slider:after { + position: absolute; + content: ''; + height: calc(100% - .4rem); + top: 0; + left: 0; + aspect-ratio: 1/1; + background: white; + border: .2rem solid gray; + border-radius: 9999999px; + pointer-events: none; + transition: .2s; +} + +.slider:checked:after { + left: 50%; + border: .2rem solid var(--info-color); +} + +.slider:checked:before { + background: var(--info-color); +} + +.slider:focus-within { + box-shadow: none; +} + +.searchbar { + position: relative; +} + +.searchbar > input { + width: 100%; +} + +.searchbar > div { + width: 100%; + transition: .2s; + overflow-x: hidden; + overflow-y: auto; + height: 0; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + position: absolute; + z-index: 4; +} + +.searchbar:focus-within > div { + border-left: 1px solid gray; + border-right: 1px solid gray; + border-bottom: 1px solid gray; + border-radius: 0 0 8px 8px; + width: 100%; + height: auto; + max-height: 600%; +} + +.search-values > div { + width: 100%; + background: white; + padding: 8px 16px; + transition: background-color .2s; + box-shadow: inset 0 -20px 20px rgba(128,128,128,.07); + cursor: pointer; +} + +.search-values > div:hover { + background: rgba(233, 233, 233, 1); +} + +.dropdown > div > div { + color: black; + background: white; + padding: 6px 32px 6px 10px; + width: auto; + cursor: pointer; + transition: .2s; + font-size: 14px; +} + +.dropdown > div > div:hover { + background: #DDD; +} + +.dropdown > div { + border: 1px solid gray; + border-radius: 6px; + position: absolute; + flex-direction: column !important; + overflow: hidden; +} + +.dropdown { + position: relative; + z-index: 50; +} + +.dropdown > button { + min-width: 128px; +} + +.line { + width: 100%; + padding: 1px; + margin: 0 20px; + background-color: var(--secondary-color); + border-radius: 5000px; +} + +.loader, .loader-page { + transition: .4s; +} + +.loader-page { + width: 100%; + height: 100%; + position: fixed; + top: 0; + left: 0; + z-index: 9999; + background: white; +} + +.loader-icon { + width: 32px; + height: 32px; + border-radius: 50%; + border-top: 4px transparent solid; + border-left: 4px var(--secondary-color) solid; + border-bottom: 4px var(--secondary-color) solid; + border-right: 4px var(--secondary-color) solid; + animation: rotate 2s ease-in-out infinite; +} + +.loader-icon:after { + content: ''; + display: block; + position: relative; + top: -17px; + left: -17px; + width: 50px; + height: 50px; + border-radius: 50%; + border-top: 4px transparent solid; + border-left: 4px var(--primary-color) solid; + border-bottom: 4px var(--primary-color) solid; + border-right: 4px var(--primary-color) solid; + animation: rotate 2.5s ease-in-out infinite; +} + +.loader-line { + background:-webkit-repeating-linear-gradient(45deg, #ffffff 0%, #ffffff 33%, #dedede 33%, #dedede 66%, #ffffff 66%, #ffffff 100%); + background:-o-repeating-linear-gradient(45deg, #ffffff 0%, #ffffff 33%, #dedede 33%, #dedede 66%, #ffffff 66%, #ffffff 100%); + background:-moz-repeating-linear-gradient(45deg, #ffffff 0%, #ffffff 33%, #dedede 33%, #dedede 66%, #ffffff 66%, #ffffff 100%); + background:repeating-linear-gradient(45deg, #ffffff 0%, #ffffff 33%, #dedede 33%, #dedede 66%, #ffffff 66%, #ffffff 100%); + background-size: 24px; + width: 200px; + height: 8px; + border: 1px solid rgba(128, 128, 128, .5); + border-radius: 50px; + animation: toSide 2s linear infinite; +} + +@keyframes toSide { + from { + background-position-x: 0; + } to { + background-position-x: 100%; + } +} + +@keyframes rotate { + from { + transform: rotate(0); + } to { + transform: rotate(720deg); + } +} + +@media only screen and (max-width: 1200px) { + .auto-width { + width: 1000px; + } +} + +@media only screen and (max-width: 1000px) { + .auto-width { + width: 100%; + padding-left: 14px; + padding-right: 14px; + } + + .auto-menu, .auto-menu > * { + flex-direction: column; + gap: 12px; + } + + .auto-menu-button { + display: flex; + } + + .header { + flex-direction: column; + flex-wrap: wrap; + justify-content: center; + align-items: center; + } +} + +@media only screen and (max-width: 900px) { + /** {*/ + /* overflow-x: hidden;*/ + /*}*/ + + .sticky { + position: relative; + } + + .dashboard { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + height: auto; + gap: 0; + width: 100%; + } + + .dashboard-menu { + flex-direction: row; + } + + .dashboard-menu > div { + flex-direction: row; + } + + .dashboard > div { + padding: 0; + margin: 0; + gap: 0; + width: 100% !important; + } +} + +@media only screen and (max-width: 800px) { + .auto-size > div, .auto-size { + width: 100% !important; + } + + .auto-size > div { + margin-top: 12px; + margin-bottom: 12px; + } +} \ No newline at end of file diff --git a/tests/misc/index.html b/tests/misc/index.html deleted file mode 100644 index 3448a8f..0000000 --- a/tests/misc/index.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - Example - - - -
            - -
            - - - - \ No newline at end of file diff --git a/tests/misc/text.txt b/tests/misc/text.txt deleted file mode 100644 index c6c1c17..0000000 --- a/tests/misc/text.txt +++ /dev/null @@ -1,8 +0,0 @@ - let componentRequest = new XMLHttpRequest(); - componentRequest.onreadystatechange = async function () { - if (this.readyState === 4) { - if (this.status === 200) { - let response = this.responseText + '' - } - } - } \ No newline at end of file diff --git a/tests/website-2/components/header.html b/tests/website-2/components/header.html deleted file mode 100644 index f98e8e6..0000000 --- a/tests/website-2/components/header.html +++ /dev/null @@ -1,22 +0,0 @@ - - \ No newline at end of file diff --git a/tests/website-2/components/wallpaper/index.html b/tests/website-2/components/wallpaper/index.html deleted file mode 100644 index bbccb3d..0000000 --- a/tests/website-2/components/wallpaper/index.html +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/tests/website-2/components/wallpaper/script.js b/tests/website-2/components/wallpaper/script.js deleted file mode 100644 index 4155d70..0000000 --- a/tests/website-2/components/wallpaper/script.js +++ /dev/null @@ -1,213 +0,0 @@ -/********* -* made by Matthias Hurrle (@atzedent) -*/ - -/** @type {HTMLCanvasElement} */ -const canvas = window.canvas -const gl = canvas.getContext('webgl2') -const dpr = window.devicePixelRatio - -const vertexSource = `#version 300 es -#ifdef GL_FRAGMENT_PRECISION_HIGH -precision highp float; -#else -precision mediump float; -#endif - -in vec2 position; - -void main(void) { - gl_Position = vec4(position, 0., 1.); -} -` -const fragmentSource = `#version 300 es -/********* -* made by Matthias Hurrle (@atzedent) -*/ - -#ifdef GL_FRAGMENT_PRECISION_HIGH -precision highp float; -#else -precision mediump float; -#endif - -out vec4 fragColor; - -uniform vec2 resolution; -uniform float time; - -#define S smoothstep -#define T .112358+time - -float rnd(vec2 p) { - return fract( - sin( - dot( - p, - vec2(12.9898, 78.233) - ) - )*43758.5453123 - ); -} - -float noise(vec2 p) { - vec2 f=fract(p), i=floor(p); - float - a=rnd(i), - b=rnd(i+vec2(1,0)), - c=rnd(i+vec2(0,1)), - d=rnd(i+vec2(1,1)); - - vec2 u = f*f*(3.-2.*f); - - return mix(a,b,u.x)+ - (c-a)*u.y*(1.-u.x)+ - (d-b)*u.y*u.x; -} - -void main(void) { - vec2 uv = ( - gl_FragCoord.xy - .8 * resolution.xy - )/min(resolution.x, resolution.y); - - float t = T*.01; // time - vec3 col = vec3(0); - vec2 p = vec2(0); - p.x = noise(uv+vec2(0,1)); - p.y = noise(uv+vec2(1,0)); - - p = 8.*( - vec2( - sin(t), - -cos(t) - )*.15-p - ); - - float s = .35; - - for(float i=.0;i<6.;i++) { - p.x += s*sin(2.*t-i*1.5*p.y)+t; - p.y += s*cos(2.*t+i*1.5*p.x)-t; - } - - col+= sin(t+p.x+p.y); - col = pow(S(vec3(0),vec3(1),col), vec3(.4)); - col = mix(vec3(.7,.6,.4)*col, col, col); - - float - stp = 2., - prog = T*.2, - anim = floor(mod(prog-.5,stp)); - - if(anim == .0) { - prog -= length(uv)*.2; - } else { - prog -= min(abs(uv.x),abs(uv.y))*.2; - } - float scene = floor(mod(prog,stp)); - - fragColor = vec4(col,1); -} -` -let time; -let buffer; -let program; -let resolution; -let vertices = [] - -function resize() { - const { - innerWidth: width, - innerHeight: height - } = window - - canvas.width = width * dpr - canvas.height = height * dpr - - gl.viewport(0, 0, width * dpr, height * dpr) -} - -function compile(shader, source) { - gl.shaderSource(shader, source) - gl.compileShader(shader) - - if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { - console.error(gl.getShaderInfoLog(shader)) - } -} - -function setup() { - const vs = gl.createShader(gl.VERTEX_SHADER) - const fs = gl.createShader(gl.FRAGMENT_SHADER) - - program = gl.createProgram() - - compile(vs, vertexSource) - compile(fs, fragmentSource) - - gl.attachShader(program, vs) - gl.attachShader(program, fs) - gl.linkProgram(program) - - if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { - console.error(gl.getProgramInfoLog(program)) - } - - vertices = [ - -1.0, - -1.0, - 1.0, - -1.0, - -1.0, - 1.0, - -1.0, - 1.0, - 1.0, - -1.0, - 1.0, - 1.0 - ] - - buffer = gl.createBuffer(); - - gl.bindBuffer(gl.ARRAY_BUFFER, buffer) - gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW) - - const position = gl.getAttribLocation(program, "position") - - gl.enableVertexAttribArray(position) - gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0) - - time = gl.getUniformLocation(program, "time") - resolution = gl.getUniformLocation(program, 'resolution') -} - -function draw(now) { - gl.clearColor(0, 0, 0, 1.) - gl.clear(gl.COLOR_BUFFER_BIT) - - gl.useProgram(program) - gl.bindBuffer(gl.ARRAY_BUFFER, buffer) - - gl.uniform1f(time, now*.001) - gl.uniform2f( - resolution, - canvas.width, - canvas.height - ) - gl.drawArrays(gl.TRIANGLES, 0, vertices.length * .5) -} - -function loop(now) { - draw(now) - requestAnimationFrame(loop) -} - -function init() { - setup() - resize() - loop(0) -} - -document.body.onload = init -window.onresize = resize diff --git a/tests/website-2/components/wallpaper/style.css b/tests/website-2/components/wallpaper/style.css deleted file mode 100644 index 7032f31..0000000 --- a/tests/website-2/components/wallpaper/style.css +++ /dev/null @@ -1,25 +0,0 @@ -* { - box-sizing: border-box; - } - - html, body { - margin: 0; - min-height: 100vh; - overflow: hidden; - - background: - repeating-radial-gradient( - circle at center, - #444 0 10%, - #111 10% 20% - ); - - touch-action: none; - } - - canvas { - width: 100%; - height: auto; - object-fit: contain; - } - \ No newline at end of file diff --git a/tests/website-2/index.html b/tests/website-2/index.html deleted file mode 100644 index ba66cbb..0000000 --- a/tests/website-2/index.html +++ /dev/null @@ -1,37 +0,0 @@ - - - - - - Home | PixelbiteCSS - - - - -
            - @atzedent - -
            -
            -
            - Framework that makes website development easier. - -
            -
            -
            hello
            -
            -
            - - -
            -
            -
            - - - - \ No newline at end of file diff --git a/tests/website/components/header.html b/tests/website/components/header.html deleted file mode 100644 index 7dff49e..0000000 --- a/tests/website/components/header.html +++ /dev/null @@ -1,33 +0,0 @@ -
            - PixelbiteCSS -
            - - - - - -
            - - - -
            -
            - -
            - diff --git a/tests/website/components/rounded_icon.html b/tests/website/components/rounded_icon.html deleted file mode 100644 index ef4d025..0000000 --- a/tests/website/components/rounded_icon.html +++ /dev/null @@ -1,3 +0,0 @@ -
            - ${icon} -
            \ No newline at end of file diff --git a/tests/website/components/showcase.html b/tests/website/components/showcase.html deleted file mode 100644 index 2d12604..0000000 --- a/tests/website/components/showcase.html +++ /dev/null @@ -1,5 +0,0 @@ -
            -
            First
            -
            Second
            -
            Third
            -
            \ No newline at end of file diff --git a/tests/website/comps/index.html b/tests/website/comps/index.html deleted file mode 100644 index 5d6cf6d..0000000 --- a/tests/website/comps/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - Components | PixelbiteCSS - - - - - -
            -
            -
            - - - \ No newline at end of file diff --git a/tests/website/content/colors-code.html b/tests/website/content/colors-code.html deleted file mode 100644 index 28b4111..0000000 --- a/tests/website/content/colors-code.html +++ /dev/null @@ -1,18 +0,0 @@ -
            <div class="bg-red50">
            -    <h1 class="c-red50">Hello world</h1>
            -    <div class="c-red50">
            -        Lorem ipsum dolor sit amet.
            -        Aenean commodo ligula eget dolor.
            -        Cum sociis natoque penatibus.
            -        Donec quam felis, sem.
            -    </div>
            -</div>
            -<div class="bg-orange50">
            -    <h1 class="c-orange50">Hello world</h1>
            -    <div class="c-orange50">
            -        Lorem ipsum dolor sit amet.
            -        Aenean commodo ligula eget dolor.
            -        Cum sociis natoque penatibus.
            -        Donec quam felis, sem.
            -    </div>
            -</div>
            \ No newline at end of file diff --git a/tests/website/content/colors.html b/tests/website/content/colors.html deleted file mode 100644 index dd12f36..0000000 --- a/tests/website/content/colors.html +++ /dev/null @@ -1,12 +0,0 @@ -
            - - - - - - - - - - -
            \ No newline at end of file diff --git a/tests/website/content/colors/single.html b/tests/website/content/colors/single.html deleted file mode 100644 index 676bd62..0000000 --- a/tests/website/content/colors/single.html +++ /dev/null @@ -1,21 +0,0 @@ - diff --git a/tests/website/content/components-code.html b/tests/website/content/components-code.html deleted file mode 100644 index 9255b9e..0000000 --- a/tests/website/content/components-code.html +++ /dev/null @@ -1,15 +0,0 @@ -
            <component
            -        path="./components/component.html"
            -        name="Jericho Albert"
            -        mail="jericho.albert@example.com"
            -></component>
            -<component
            -        path="./components/component.html"
            -        name="Carlos Rodman"
            -        mail="carlos.rodman@example.com"
            -></component>
            -<component
            -        path="./components/component.html"
            -        name="Stuart Paul"
            -        mail="stuart.paul@example.com"
            -></component>
            \ No newline at end of file diff --git a/tests/website/content/components.html b/tests/website/content/components.html deleted file mode 100644 index 525c765..0000000 --- a/tests/website/content/components.html +++ /dev/null @@ -1,20 +0,0 @@ -
            - - - - - - -
            \ No newline at end of file diff --git a/tests/website/content/dark-code.html b/tests/website/content/dark-code.html deleted file mode 100644 index e69de29..0000000 diff --git a/tests/website/content/dark.html b/tests/website/content/dark.html deleted file mode 100644 index e69de29..0000000 diff --git a/tests/website/content/responsibility-code.html b/tests/website/content/responsibility-code.html deleted file mode 100644 index c2757c7..0000000 --- a/tests/website/content/responsibility-code.html +++ /dev/null @@ -1,9 +0,0 @@ -
            <div class="
            -    min500:flexDirection-column
            -    max500:flexDirection-row
            -">
            -    <img class="ar-1/1 w-142px br-50%" src="./res/assets/avatar.jpg"/>
            -    <div class="fw-900 fs-24px">
            -        PixelbiteCSS
            -    </div>
            -</div>
            \ No newline at end of file diff --git a/tests/website/content/responsibility.html b/tests/website/content/responsibility.html deleted file mode 100644 index 4538b8e..0000000 --- a/tests/website/content/responsibility.html +++ /dev/null @@ -1,23 +0,0 @@ - - \ No newline at end of file diff --git a/tests/website/docs/components/button.html b/tests/website/docs/components/button.html deleted file mode 100644 index 9b8fe49..0000000 --- a/tests/website/docs/components/button.html +++ /dev/null @@ -1,4 +0,0 @@ - \ No newline at end of file diff --git a/tests/website/docs/components/content.html b/tests/website/docs/components/content.html deleted file mode 100644 index ff8b7d3..0000000 --- a/tests/website/docs/components/content.html +++ /dev/null @@ -1,103 +0,0 @@ -
            -
            - -
            -
            -
            - - - - Introduction - ${for( - object[0].length :: - - )} - Stylesheet - ${for( - object[1].length :: - - )} - Custom element - ${for( - object[2].length :: - - )} - Prefix - ${for( - object[3].length :: - - )} - Customization - ${for( - object[4].length :: - - )} -
            -
            - ${for( - object[0].length :: -
            - Introduction - -
            -
            - )} - ${for( - object[1].length :: -
            - Stylesheet - -
            -
            - )} - ${for( - object[2].length :: -
            - Custom element - -
            -
            - )} - ${for( - object[3].length :: -
            - Prefix - -
            -
            - )} - ${for( - object[4].length :: -
            - Customization - -
            -
            - )} -
            -
            -
            diff --git a/tests/website/docs/content/documentation.json b/tests/website/docs/content/documentation.json deleted file mode 100644 index 15d58e1..0000000 --- a/tests/website/docs/content/documentation.json +++ /dev/null @@ -1,43 +0,0 @@ -[ - { - "title": "Test 1", - "id": "test1", - "content": "test 1" - }, - { - "title": "Test 2", - "id": "test2", - "content": "test 2" - }, - { - "title": "Test 3", - "id": "test3", - "content": "test 3" - }, - { - "title": "Test 4", - "id": "test4", - "content": "test 4" - }, - { - "title": "Test 5", - "id": "test5", - "content": "test 5" - }, - { - "title": "Test 6", - "id": "test6", - "content": "test 6" - }, - { - "title": "Test 7", - "id": "test7", - "content": "test 7" - }, - { - "title": "Test 8", - "id": "test8", - "content": "test 8" - } -] - diff --git a/tests/website/docs/index.html b/tests/website/docs/index.html deleted file mode 100644 index 7c85cf9..0000000 --- a/tests/website/docs/index.html +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - Docs | PixelbiteCSS - - - - - -
            -
            -
            - - - diff --git a/tests/website/home/components/main.html b/tests/website/home/components/main.html deleted file mode 100644 index ac65506..0000000 --- a/tests/website/home/components/main.html +++ /dev/null @@ -1,51 +0,0 @@ -
            -
            -
            -

            Framework that makes website development easier.

            -
            - Customisable CSS and Javascript framework, that uses its own classes like flex, ta-center or slideshow to help you create websites faster and responsive. -
            -
            - - -
            -
            -
            -
            -
            -
            -
            -
            -
            -
            -
            <div class="modal w-100% p-48px-36px flexRow flexCenter flexMiddle g-24px bg-white100 dark:bg-purple10 b-1px-solid-white90 dark:b-1px-solid-purple25">
            -    <img class="ar-1/1 w-156px br-50%" src="https://avatars.githubusercontent.com/u/83291717?v=4">
            -    <div class="flexColumn flexLeft flexTop fw-500">
            -        <div class="c-white0 dark:c-white80 pb-12px">
            -            "New and easy way to create html websites, without using external CSS and JavaScript."
            -        </div>
            -        <div class="c-purple50">
            -            Jan Poláček
            -        </div>
            -        <div class="c-white50">
            -            Pixelbite's Developer
            -        </div>
            -    </div>
            -</div>
            -
            -
            -
            - -
            -
            -
            -
            \ No newline at end of file diff --git a/tests/website/home/components/section.html b/tests/website/home/components/section.html deleted file mode 100644 index c319ce9..0000000 --- a/tests/website/home/components/section.html +++ /dev/null @@ -1,24 +0,0 @@ -
            -
            - -

            ${title}

            -
            ${text}
            - -
            -
            -
            -
            -
            ${code}
            -
            -
            -
            -
            -
            -
            -
            ${codetext}
            -
            -
            -
            diff --git a/tests/website/home/components/sections.html b/tests/website/home/components/sections.html deleted file mode 100644 index 1a12d3c..0000000 --- a/tests/website/home/components/sections.html +++ /dev/null @@ -1,15 +0,0 @@ -${for( - object.length :: - -)} \ No newline at end of file diff --git a/tests/website/home/components/showcase.html b/tests/website/home/components/showcase.html deleted file mode 100644 index bd5646a..0000000 --- a/tests/website/home/components/showcase.html +++ /dev/null @@ -1,39 +0,0 @@ -
            -
            -
            - -
            -
            -
            -
            -
            -
            -
            -
            -
            <div class="modal w-100% p-48px-36px flexRow flexCenter flexMiddle g-24px bg-white100 dark:bg-purple10 b-1px-solid-white90 dark:b-1px-solid-purple25">
            -    <img class="ar-1/1 w-156px br-50%" src="https://avatars.githubusercontent.com/u/83291717?v=4">
            -    <div class="flexColumn flexLeft flexTop fw-500">
            -        <div class="c-white0 dark:c-white80 pb-12px">
            -            "New and easy way to create html websites, without using external CSS and JavaScript."
            -        </div>
            -        <div class="c-purple50">
            -            Jan Poláček
            -        </div>
            -        <div class="c-white50">
            -            Pixelbite's Developer
            -        </div>
            -    </div>
            -</div>
            -
            -
            -
            -
            \ No newline at end of file diff --git a/tests/website/home/content/sections.json b/tests/website/home/content/sections.json deleted file mode 100644 index a1d8764..0000000 --- a/tests/website/home/content/sections.json +++ /dev/null @@ -1,46 +0,0 @@ -[ - { - "icon": "", - "colorprimary": "green10", - "colorsecondary": "green70", - "title": "Customization", - "text": "You can customize any aspect of this framework. Most values can be changed via custom functions or changing value in object to create pleasant experience for the developer.", - "href": "./docs/#5_1_Colors", - "buttontext": "See in docs", - "code": "", - "codetext": "" - }, - { - "icon": "", - "colorprimary": "red10", - "colorsecondary": "red70", - "title": "Components Experimental", - "text": "Create websites with custom elements and components which you will create. Add custom parameters which allows you to make variations and create multiple instances of one component.", - "href": "./comps", - "buttontext": "See components", - "code": "", - "codetext": "" - }, - { - "icon": "", - "colorprimary": "pink10", - "colorsecondary": "pink70", - "title": "Responsibility", - "text": "Use custom prefixes max: and min: to make certain classes allow themselves, within selected threshold.", - "href": "./docs/#4_1_Responsibility", - "buttontext": "See in docs", - "code": "", - "codetext": "" - }, - { - "icon": "", - "colorprimary": "white10", - "colorsecondary": "white70", - "title": "Dark mode", - "text": "Framework supports custom dark mode with its own class prefix dark:. You can create two themed websites with ease and more customization.", - "href": "./docs/#4_2_Dark_mode", - "buttontext": "See in docs", - "code": "", - "codetext": "" - } -] \ No newline at end of file diff --git a/tests/website/index.html b/tests/website/index.html deleted file mode 100644 index 4532b3f..0000000 --- a/tests/website/index.html +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - Home | PixelbiteCSS - - - - - - -
            -
            -
            - - - - \ No newline at end of file diff --git a/tests/website/news/index.html b/tests/website/news/index.html deleted file mode 100644 index d7f255f..0000000 --- a/tests/website/news/index.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - News | PixelbiteCSS - - - - -
            -
            -
            - - - \ No newline at end of file diff --git a/tests/website/templates/index.html b/tests/website/templates/index.html deleted file mode 100644 index e4861d2..0000000 --- a/tests/website/templates/index.html +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - Templates | PixelbiteCSS - - - - -
            -
            -
            - - - \ No newline at end of file