├── .gitignore ├── README.md ├── TODO ├── assets ├── emoji.png ├── icon128.png ├── icon16.png ├── icon24.png ├── icon32.png ├── icon48.png ├── logo.png ├── nothing-found.jpg └── tour │ ├── 1.png │ ├── 2.png │ ├── 3.png │ ├── 4.png │ ├── 5.png │ ├── 6.png │ └── 7.png ├── background.js ├── css ├── corousel.css └── style.css ├── docs ├── css │ ├── styles.css │ └── suttadhu.css ├── images │ ├── feature1.png │ ├── feature2.png │ ├── feature3.png │ ├── feature4.png │ ├── home-pc.png │ ├── logo.png │ ├── pause.svg │ ├── qoute-chat.png │ └── tick.svg ├── img │ ├── 1.png │ ├── 2.png │ ├── 3.png │ ├── 4.png │ ├── 5.png │ ├── 6.png │ ├── 7.png │ └── tour │ │ ├── 1.png │ │ ├── 2.png │ │ ├── 3.png │ │ ├── 4.png │ │ ├── 5.png │ │ ├── 6.png │ │ └── 7.png ├── index.html └── js │ └── script.js ├── manifest.json ├── popup.html ├── scripts ├── dashboard.js └── popup.js └── templates └── dashboard.html /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # OrganizeTabs -------------------------------------------------------------------------------- /TODO: -------------------------------------------------------------------------------- 1 | [] - style nothing found class 2 | [] - style popup with accordion 3 | [] - add bookmarks 4 | [] - add count to unique tab instances 5 | [] - search bar in organizer area 6 | -------------------------------------------------------------------------------- /assets/emoji.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThangaBalajiS/OrganizeTabs/03809f87d913c8007526c160e6219330147f344f/assets/emoji.png -------------------------------------------------------------------------------- /assets/icon128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThangaBalajiS/OrganizeTabs/03809f87d913c8007526c160e6219330147f344f/assets/icon128.png -------------------------------------------------------------------------------- /assets/icon16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThangaBalajiS/OrganizeTabs/03809f87d913c8007526c160e6219330147f344f/assets/icon16.png -------------------------------------------------------------------------------- /assets/icon24.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThangaBalajiS/OrganizeTabs/03809f87d913c8007526c160e6219330147f344f/assets/icon24.png -------------------------------------------------------------------------------- /assets/icon32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThangaBalajiS/OrganizeTabs/03809f87d913c8007526c160e6219330147f344f/assets/icon32.png -------------------------------------------------------------------------------- /assets/icon48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThangaBalajiS/OrganizeTabs/03809f87d913c8007526c160e6219330147f344f/assets/icon48.png -------------------------------------------------------------------------------- /assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThangaBalajiS/OrganizeTabs/03809f87d913c8007526c160e6219330147f344f/assets/logo.png -------------------------------------------------------------------------------- /assets/nothing-found.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThangaBalajiS/OrganizeTabs/03809f87d913c8007526c160e6219330147f344f/assets/nothing-found.jpg -------------------------------------------------------------------------------- /assets/tour/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThangaBalajiS/OrganizeTabs/03809f87d913c8007526c160e6219330147f344f/assets/tour/1.png -------------------------------------------------------------------------------- /assets/tour/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThangaBalajiS/OrganizeTabs/03809f87d913c8007526c160e6219330147f344f/assets/tour/2.png -------------------------------------------------------------------------------- /assets/tour/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThangaBalajiS/OrganizeTabs/03809f87d913c8007526c160e6219330147f344f/assets/tour/3.png -------------------------------------------------------------------------------- /assets/tour/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThangaBalajiS/OrganizeTabs/03809f87d913c8007526c160e6219330147f344f/assets/tour/4.png -------------------------------------------------------------------------------- /assets/tour/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThangaBalajiS/OrganizeTabs/03809f87d913c8007526c160e6219330147f344f/assets/tour/5.png -------------------------------------------------------------------------------- /assets/tour/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThangaBalajiS/OrganizeTabs/03809f87d913c8007526c160e6219330147f344f/assets/tour/6.png -------------------------------------------------------------------------------- /assets/tour/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThangaBalajiS/OrganizeTabs/03809f87d913c8007526c160e6219330147f344f/assets/tour/7.png -------------------------------------------------------------------------------- /background.js: -------------------------------------------------------------------------------- 1 | chrome.runtime.onInstalled.addListener(function() { 2 | chrome.storage.sync.set({color: '#3aa757'}, function() { 3 | console.log("The color is green."); 4 | }); 5 | }); -------------------------------------------------------------------------------- /css/corousel.css: -------------------------------------------------------------------------------- 1 | /* W3.CSS 4.10 February 2018 by Jan Egil and Borge Refsnes */ 2 | html{box-sizing:border-box}*, 3 | /* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */ 4 | html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0} 5 | article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block} 6 | audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline} 7 | audio:not([controls]){display:none;height:0}[hidden],template{display:none} 8 | a{background-color:transparent;-webkit-text-decoration-skip:objects} 9 | a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted} 10 | dfn{font-style:italic}mark{background:#ff0;color:#000} 11 | small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline} 12 | sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}img{border-style:none}svg:not(:root){overflow:hidden} 13 | code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}hr{box-sizing:content-box;height:0;overflow:visible} 14 | button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold} 15 | button,input{overflow:visible}button,select{text-transform:none} 16 | button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button} 17 | button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner{border-style:none;padding:0} 18 | button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring{outline:1px dotted ButtonText} 19 | fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em} 20 | legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto} 21 | [type=checkbox],[type=radio]{padding:0} 22 | [type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto} 23 | [type=search]{-webkit-appearance:textfield;outline-offset:-2px} 24 | [type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none} 25 | ::-webkit-input-placeholder{color:inherit;opacity:0.54} 26 | ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit} 27 | /* End extract */ 28 | html{overflow-x:hidden} 29 | h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}.w3-serif{font-family:serif} 30 | h1,h2,h3,h4,h5,h6{font-family:"Segoe UI",Arial,sans-serif;font-weight:400;margin:10px 0}.w3-wide{letter-spacing:4px} 31 | hr{border:0;border-top:1px solid #eee;margin:20px 0} 32 | .w3-image{max-width:100%;height:auto}img{vertical-align:middle}a{color:inherit} 33 | .w3-table,.w3-table-all{border-collapse:collapse;border-spacing:0;width:100%;display:table}.w3-table-all{border:1px solid #ccc} 34 | .w3-bordered tr,.w3-table-all tr{border-bottom:1px solid #ddd}.w3-striped tbody tr:nth-child(even){background-color:#f1f1f1} 35 | .w3-table-all tr:nth-child(odd){background-color:#fff}.w3-table-all tr:nth-child(even){background-color:#f1f1f1} 36 | .w3-hoverable tbody tr:hover,.w3-ul.w3-hoverable li:hover{background-color:#ccc}.w3-centered tr th,.w3-centered tr td{text-align:center} 37 | .w3-table td,.w3-table th,.w3-table-all td,.w3-table-all th{padding:8px 8px;display:table-cell;text-align:left;vertical-align:top} 38 | .w3-table th:first-child,.w3-table td:first-child,.w3-table-all th:first-child,.w3-table-all td:first-child{padding-left:16px} 39 | .w3-btn,.w3-button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap} 40 | .w3-btn:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)} 41 | .w3-btn,.w3-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} 42 | .w3-disabled,.w3-btn:disabled,.w3-button:disabled{cursor:not-allowed;opacity:0.3}.w3-disabled *,:disabled *{pointer-events:none} 43 | .w3-btn.w3-disabled:hover,.w3-btn:disabled:hover{box-shadow:none} 44 | .w3-badge,.w3-tag{background-color:#000;color:#fff;display:inline-block;padding-left:8px;padding-right:8px;text-align:center}.w3-badge{border-radius:50%} 45 | .w3-ul{list-style-type:none;padding:0;margin:0}.w3-ul li{padding:8px 16px;border-bottom:1px solid #ddd}.w3-ul li:last-child{border-bottom:none} 46 | .w3-tooltip,.w3-display-container{position:relative}.w3-tooltip .w3-text{display:none}.w3-tooltip:hover .w3-text{display:inline-block} 47 | .w3-ripple:active{opacity:0.5}.w3-ripple{transition:opacity 0s} 48 | .w3-input{padding:8px;display:block;border:none;border-bottom:1px solid #ccc;width:100%} 49 | .w3-select{padding:9px 0;width:100%;border:none;border-bottom:1px solid #ccc} 50 | .w3-dropdown-click,.w3-dropdown-hover{position:relative;display:inline-block;cursor:pointer} 51 | .w3-dropdown-hover:hover .w3-dropdown-content{display:block} 52 | .w3-dropdown-hover:first-child,.w3-dropdown-click:hover{background-color:#ccc;color:#000} 53 | .w3-dropdown-hover:hover > .w3-button:first-child,.w3-dropdown-click:hover > .w3-button:first-child{background-color:#ccc;color:#000} 54 | .w3-dropdown-content{cursor:auto;color:#000;background-color:#fff;display:none;position:absolute;min-width:160px;margin:0;padding:0;z-index:1} 55 | .w3-check,.w3-radio{width:24px;height:24px;position:relative;top:6px} 56 | .w3-sidebar{height:100%;width:200px;background-color:#fff;position:fixed!important;z-index:1;overflow:auto} 57 | .w3-bar-block .w3-dropdown-hover,.w3-bar-block .w3-dropdown-click{width:100%} 58 | .w3-bar-block .w3-dropdown-hover .w3-dropdown-content,.w3-bar-block .w3-dropdown-click .w3-dropdown-content{min-width:100%} 59 | .w3-bar-block .w3-dropdown-hover .w3-button,.w3-bar-block .w3-dropdown-click .w3-button{width:100%;text-align:left;padding:8px 16px} 60 | .w3-main,#main{transition:margin-left .4s} 61 | .w3-modal{z-index:3;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)} 62 | .w3-modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:600px} 63 | .w3-bar{width:100%;overflow:hidden}.w3-center .w3-bar{display:inline-block;width:auto} 64 | .w3-bar .w3-bar-item{padding:8px 16px;float:left;width:auto;border:none;display:block;outline:0} 65 | .w3-bar .w3-dropdown-hover,.w3-bar .w3-dropdown-click{position:static;float:left} 66 | .w3-bar .w3-button{white-space:normal} 67 | .w3-bar-block .w3-bar-item{width:100%;display:block;padding:8px 16px;text-align:left;border:none;white-space:normal;float:none;outline:0} 68 | .w3-bar-block.w3-center .w3-bar-item{text-align:center}.w3-block{display:block;width:100%} 69 | .w3-responsive{display:block;overflow-x:auto} 70 | .w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:before,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before, 71 | .w3-cell-row:before,.w3-cell-row:after,.w3-clear:after,.w3-clear:before,.w3-bar:before,.w3-bar:after{content:"";display:table;clear:both} 72 | .w3-col,.w3-half,.w3-third,.w3-twothird,.w3-threequarter,.w3-quarter{float:left;width:100%} 73 | .w3-col.s1{width:8.33333%}.w3-col.s2{width:16.66666%}.w3-col.s3{width:24.99999%}.w3-col.s4{width:33.33333%} 74 | .w3-col.s5{width:41.66666%}.w3-col.s6{width:49.99999%}.w3-col.s7{width:58.33333%}.w3-col.s8{width:66.66666%} 75 | .w3-col.s9{width:74.99999%}.w3-col.s10{width:83.33333%}.w3-col.s11{width:91.66666%}.w3-col.s12{width:99.99999%} 76 | @media (min-width:601px){.w3-col.m1{width:8.33333%}.w3-col.m2{width:16.66666%}.w3-col.m3,.w3-quarter{width:24.99999%}.w3-col.m4,.w3-third{width:33.33333%} 77 | .w3-col.m5{width:41.66666%}.w3-col.m6,.w3-half{width:49.99999%}.w3-col.m7{width:58.33333%}.w3-col.m8,.w3-twothird{width:66.66666%} 78 | .w3-col.m9,.w3-threequarter{width:74.99999%}.w3-col.m10{width:83.33333%}.w3-col.m11{width:91.66666%}.w3-col.m12{width:99.99999%}} 79 | @media (min-width:993px){.w3-col.l1{width:8.33333%}.w3-col.l2{width:16.66666%}.w3-col.l3{width:24.99999%}.w3-col.l4{width:33.33333%} 80 | .w3-col.l5{width:41.66666%}.w3-col.l6{width:49.99999%}.w3-col.l7{width:58.33333%}.w3-col.l8{width:66.66666%} 81 | .w3-col.l9{width:74.99999%}.w3-col.l10{width:83.33333%}.w3-col.l11{width:91.66666%}.w3-col.l12{width:99.99999%}} 82 | .w3-content{max-width:980px;margin:auto}.w3-rest{overflow:hidden} 83 | .w3-cell-row{display:table;width:100%}.w3-cell{display:table-cell} 84 | .w3-cell-top{vertical-align:top}.w3-cell-middle{vertical-align:middle}.w3-cell-bottom{vertical-align:bottom} 85 | .w3-hide{display:none!important}.w3-show-block,.w3-show{display:block!important}.w3-show-inline-block{display:inline-block!important} 86 | @media (max-width:600px){.w3-modal-content{margin:0 10px;width:auto!important}.w3-modal{padding-top:30px} 87 | .w3-dropdown-hover.w3-mobile .w3-dropdown-content,.w3-dropdown-click.w3-mobile .w3-dropdown-content{position:relative} 88 | .w3-hide-small{display:none!important}.w3-mobile{display:block;width:100%!important}.w3-bar-item.w3-mobile,.w3-dropdown-hover.w3-mobile,.w3-dropdown-click.w3-mobile{text-align:center} 89 | .w3-dropdown-hover.w3-mobile,.w3-dropdown-hover.w3-mobile .w3-btn,.w3-dropdown-hover.w3-mobile .w3-button,.w3-dropdown-click.w3-mobile,.w3-dropdown-click.w3-mobile .w3-btn,.w3-dropdown-click.w3-mobile .w3-button{width:100%}} 90 | @media (max-width:768px){.w3-modal-content{width:500px}.w3-modal{padding-top:50px}} 91 | @media (min-width:993px){.w3-modal-content{width:900px}.w3-hide-large{display:none!important}.w3-sidebar.w3-collapse{display:block!important}} 92 | @media (max-width:992px) and (min-width:601px){.w3-hide-medium{display:none!important}} 93 | @media (max-width:992px){.w3-sidebar.w3-collapse{display:none}.w3-main{margin-left:0!important;margin-right:0!important}} 94 | .w3-top,.w3-bottom{position:fixed;width:100%;z-index:1}.w3-top{top:0}.w3-bottom{bottom:0} 95 | .w3-overlay{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.5);z-index:2} 96 | .w3-display-topleft{position:absolute;left:0;top:0}.w3-display-topright{position:absolute;right:0;top:0} 97 | .w3-display-bottomleft{position:absolute;left:0;bottom:0}.w3-display-bottomright{position:absolute;right:0;bottom:0} 98 | .w3-display-middle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)} 99 | .w3-display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)} 100 | .w3-display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)} 101 | .w3-display-topmiddle{position:absolute;left:50%;top:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)} 102 | .w3-display-bottommiddle{position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)} 103 | .w3-display-container:hover .w3-display-hover{display:block}.w3-display-container:hover span.w3-display-hover{display:inline-block}.w3-display-hover{display:none} 104 | .w3-display-position{position:absolute} 105 | .w3-circle{border-radius:50%} 106 | .w3-round-small{border-radius:2px}.w3-round,.w3-round-medium{border-radius:4px}.w3-round-large{border-radius:8px}.w3-round-xlarge{border-radius:16px}.w3-round-xxlarge{border-radius:32px} 107 | .w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col{padding:0 8px} 108 | .w3-container,.w3-panel{padding:0.01em 16px}.w3-panel{margin-top:16px;margin-bottom:16px} 109 | .w3-code,.w3-codespan{font-family:Consolas,"courier new";font-size:16px} 110 | .w3-code{width:auto;background-color:#fff;padding:8px 12px;border-left:4px solid #4CAF50;word-wrap:break-word} 111 | .w3-codespan{color:crimson;background-color:#f1f1f1;padding-left:4px;padding-right:4px;font-size:110%} 112 | .w3-card,.w3-card-2{box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)} 113 | .w3-card-4,.w3-hover-shadow:hover{box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)} 114 | .w3-spin{animation:w3-spin 2s infinite linear}@keyframes w3-spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}} 115 | .w3-animate-fading{animation:fading 10s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}} 116 | .w3-animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}} 117 | .w3-animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}} 118 | .w3-animate-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}} 119 | .w3-animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}} 120 | .w3-animate-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}} 121 | .w3-animate-zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}} 122 | .w3-animate-input{transition:width 0.4s ease-in-out}.w3-animate-input:focus{width:100%!important} 123 | .w3-opacity,.w3-hover-opacity:hover{opacity:0.60}.w3-opacity-off,.w3-hover-opacity-off:hover{opacity:1} 124 | .w3-opacity-max{opacity:0.25}.w3-opacity-min{opacity:0.75} 125 | .w3-greyscale-max,.w3-grayscale-max,.w3-hover-greyscale:hover,.w3-hover-grayscale:hover{filter:grayscale(100%)} 126 | .w3-greyscale,.w3-grayscale{filter:grayscale(75%)}.w3-greyscale-min,.w3-grayscale-min{filter:grayscale(50%)} 127 | .w3-sepia{filter:sepia(75%)}.w3-sepia-max,.w3-hover-sepia:hover{filter:sepia(100%)}.w3-sepia-min{filter:sepia(50%)} 128 | .w3-tiny{font-size:10px!important}.w3-small{font-size:12px!important}.w3-medium{font-size:15px!important}.w3-large{font-size:18px!important} 129 | .w3-xlarge{font-size:24px!important}.w3-xxlarge{font-size:36px!important}.w3-xxxlarge{font-size:48px!important}.w3-jumbo{font-size:64px!important} 130 | .w3-left-align{text-align:left!important}.w3-right-align{text-align:right!important}.w3-justify{text-align:justify!important}.w3-center{text-align:center!important} 131 | .w3-border-0{border:0!important}.w3-border{border:1px solid #ccc!important} 132 | .w3-border-top{border-top:1px solid #ccc!important}.w3-border-bottom{border-bottom:1px solid #ccc!important} 133 | .w3-border-left{border-left:1px solid #ccc!important}.w3-border-right{border-right:1px solid #ccc!important} 134 | .w3-topbar{border-top:6px solid #ccc!important}.w3-bottombar{border-bottom:6px solid #ccc!important} 135 | .w3-leftbar{border-left:6px solid #ccc!important}.w3-rightbar{border-right:6px solid #ccc!important} 136 | .w3-section,.w3-code{margin-top:16px!important;margin-bottom:16px!important} 137 | .w3-margin{margin:16px!important}.w3-margin-top{margin-top:16px!important}.w3-margin-bottom{margin-bottom:16px!important} 138 | .w3-margin-left{margin-left:16px!important}.w3-margin-right{margin-right:16px!important} 139 | .w3-padding-small{padding:4px 8px!important}.w3-padding{padding:8px 16px!important}.w3-padding-large{padding:12px 24px!important} 140 | .w3-padding-16{padding-top:16px!important;padding-bottom:16px!important}.w3-padding-24{padding-top:24px!important;padding-bottom:24px!important} 141 | .w3-padding-32{padding-top:32px!important;padding-bottom:32px!important}.w3-padding-48{padding-top:48px!important;padding-bottom:48px!important} 142 | .w3-padding-64{padding-top:64px!important;padding-bottom:64px!important} 143 | .w3-left{float:left!important}.w3-right{float:right!important} 144 | .w3-button:hover{color:#000!important;background-color:#ccc!important} 145 | .w3-transparent,.w3-hover-none:hover{background-color:transparent!important} 146 | .w3-hover-none:hover{box-shadow:none!important} 147 | /* Colors */ 148 | .w3-amber,.w3-hover-amber:hover{color:#000!important;background-color:#ffc107!important} 149 | .w3-aqua,.w3-hover-aqua:hover{color:#000!important;background-color:#00ffff!important} 150 | .w3-blue,.w3-hover-blue:hover{color:#fff!important;background-color:#2196F3!important} 151 | .w3-light-blue,.w3-hover-light-blue:hover{color:#000!important;background-color:#87CEEB!important} 152 | .w3-brown,.w3-hover-brown:hover{color:#fff!important;background-color:#795548!important} 153 | .w3-cyan,.w3-hover-cyan:hover{color:#000!important;background-color:#00bcd4!important} 154 | .w3-blue-grey,.w3-hover-blue-grey:hover,.w3-blue-gray,.w3-hover-blue-gray:hover{color:#fff!important;background-color:#607d8b!important} 155 | .w3-green,.w3-hover-green:hover{color:#fff!important;background-color:#4CAF50!important} 156 | .w3-light-green,.w3-hover-light-green:hover{color:#000!important;background-color:#8bc34a!important} 157 | .w3-indigo,.w3-hover-indigo:hover{color:#fff!important;background-color:#3f51b5!important} 158 | .w3-khaki,.w3-hover-khaki:hover{color:#000!important;background-color:#f0e68c!important} 159 | .w3-lime,.w3-hover-lime:hover{color:#000!important;background-color:#cddc39!important} 160 | .w3-orange,.w3-hover-orange:hover{color:#000!important;background-color:#ff9800!important} 161 | .w3-deep-orange,.w3-hover-deep-orange:hover{color:#fff!important;background-color:#ff5722!important} 162 | .w3-pink,.w3-hover-pink:hover{color:#fff!important;background-color:#e91e63!important} 163 | .w3-purple,.w3-hover-purple:hover{color:#fff!important;background-color:#9c27b0!important} 164 | .w3-deep-purple,.w3-hover-deep-purple:hover{color:#fff!important;background-color:#673ab7!important} 165 | .w3-red,.w3-hover-red:hover{color:#fff!important;background-color:#f44336!important} 166 | .w3-sand,.w3-hover-sand:hover{color:#000!important;background-color:#fdf5e6!important} 167 | .w3-teal,.w3-hover-teal:hover{color:#fff!important;background-color:#009688!important} 168 | .w3-yellow,.w3-hover-yellow:hover{color:#000!important;background-color:#ffeb3b!important} 169 | .w3-white,.w3-hover-white:hover{color:#000!important;background-color:#fff!important} 170 | .w3-black,.w3-hover-black:hover{color:#fff!important;background-color:#000!important} 171 | .w3-grey,.w3-hover-grey:hover,.w3-gray,.w3-hover-gray:hover{color:#000!important;background-color:#9e9e9e!important} 172 | .w3-light-grey,.w3-hover-light-grey:hover,.w3-light-gray,.w3-hover-light-gray:hover{color:#000!important;background-color:#f1f1f1!important} 173 | .w3-dark-grey,.w3-hover-dark-grey:hover,.w3-dark-gray,.w3-hover-dark-gray:hover{color:#fff!important;background-color:#616161!important} 174 | .w3-pale-red,.w3-hover-pale-red:hover{color:#000!important;background-color:#ffdddd!important} 175 | .w3-pale-green,.w3-hover-pale-green:hover{color:#000!important;background-color:#ddffdd!important} 176 | .w3-pale-yellow,.w3-hover-pale-yellow:hover{color:#000!important;background-color:#ffffcc!important} 177 | .w3-pale-blue,.w3-hover-pale-blue:hover{color:#000!important;background-color:#ddffff!important} 178 | .w3-text-amber,.w3-hover-text-amber:hover{color:#ffc107!important} 179 | .w3-text-aqua,.w3-hover-text-aqua:hover{color:#00ffff!important} 180 | .w3-text-blue,.w3-hover-text-blue:hover{color:#2196F3!important} 181 | .w3-text-light-blue,.w3-hover-text-light-blue:hover{color:#87CEEB!important} 182 | .w3-text-brown,.w3-hover-text-brown:hover{color:#795548!important} 183 | .w3-text-cyan,.w3-hover-text-cyan:hover{color:#00bcd4!important} 184 | .w3-text-blue-grey,.w3-hover-text-blue-grey:hover,.w3-text-blue-gray,.w3-hover-text-blue-gray:hover{color:#607d8b!important} 185 | .w3-text-green,.w3-hover-text-green:hover{color:#4CAF50!important} 186 | .w3-text-light-green,.w3-hover-text-light-green:hover{color:#8bc34a!important} 187 | .w3-text-indigo,.w3-hover-text-indigo:hover{color:#3f51b5!important} 188 | .w3-text-khaki,.w3-hover-text-khaki:hover{color:#b4aa50!important} 189 | .w3-text-lime,.w3-hover-text-lime:hover{color:#cddc39!important} 190 | .w3-text-orange,.w3-hover-text-orange:hover{color:#ff9800!important} 191 | .w3-text-deep-orange,.w3-hover-text-deep-orange:hover{color:#ff5722!important} 192 | .w3-text-pink,.w3-hover-text-pink:hover{color:#e91e63!important} 193 | .w3-text-purple,.w3-hover-text-purple:hover{color:#9c27b0!important} 194 | .w3-text-deep-purple,.w3-hover-text-deep-purple:hover{color:#673ab7!important} 195 | .w3-text-red,.w3-hover-text-red:hover{color:#f44336!important} 196 | .w3-text-sand,.w3-hover-text-sand:hover{color:#fdf5e6!important} 197 | .w3-text-teal,.w3-hover-text-teal:hover{color:#009688!important} 198 | .w3-text-yellow,.w3-hover-text-yellow:hover{color:#d2be0e!important} 199 | .w3-text-white,.w3-hover-text-white:hover{color:#fff!important} 200 | .w3-text-black,.w3-hover-text-black:hover{color:#000!important} 201 | .w3-text-grey,.w3-hover-text-grey:hover,.w3-text-gray,.w3-hover-text-gray:hover{color:#757575!important} 202 | .w3-text-light-grey,.w3-hover-text-light-grey:hover,.w3-text-light-gray,.w3-hover-text-light-gray:hover{color:#f1f1f1!important} 203 | .w3-text-dark-grey,.w3-hover-text-dark-grey:hover,.w3-text-dark-gray,.w3-hover-text-dark-gray:hover{color:#3a3a3a!important} 204 | .w3-border-amber,.w3-hover-border-amber:hover{border-color:#ffc107!important} 205 | .w3-border-aqua,.w3-hover-border-aqua:hover{border-color:#00ffff!important} 206 | .w3-border-blue,.w3-hover-border-blue:hover{border-color:#2196F3!important} 207 | .w3-border-light-blue,.w3-hover-border-light-blue:hover{border-color:#87CEEB!important} 208 | .w3-border-brown,.w3-hover-border-brown:hover{border-color:#795548!important} 209 | .w3-border-cyan,.w3-hover-border-cyan:hover{border-color:#00bcd4!important} 210 | .w3-border-blue-grey,.w3-hover-border-blue-grey:hover,.w3-border-blue-gray,.w3-hover-border-blue-gray:hover{border-color:#607d8b!important} 211 | .w3-border-green,.w3-hover-border-green:hover{border-color:#4CAF50!important} 212 | .w3-border-light-green,.w3-hover-border-light-green:hover{border-color:#8bc34a!important} 213 | .w3-border-indigo,.w3-hover-border-indigo:hover{border-color:#3f51b5!important} 214 | .w3-border-khaki,.w3-hover-border-khaki:hover{border-color:#f0e68c!important} 215 | .w3-border-lime,.w3-hover-border-lime:hover{border-color:#cddc39!important} 216 | .w3-border-orange,.w3-hover-border-orange:hover{border-color:#ff9800!important} 217 | .w3-border-deep-orange,.w3-hover-border-deep-orange:hover{border-color:#ff5722!important} 218 | .w3-border-pink,.w3-hover-border-pink:hover{border-color:#e91e63!important} 219 | .w3-border-purple,.w3-hover-border-purple:hover{border-color:#9c27b0!important} 220 | .w3-border-deep-purple,.w3-hover-border-deep-purple:hover{border-color:#673ab7!important} 221 | .w3-border-red,.w3-hover-border-red:hover{border-color:#f44336!important} 222 | .w3-border-sand,.w3-hover-border-sand:hover{border-color:#fdf5e6!important} 223 | .w3-border-teal,.w3-hover-border-teal:hover{border-color:#009688!important} 224 | .w3-border-yellow,.w3-hover-border-yellow:hover{border-color:#ffeb3b!important} 225 | .w3-border-white,.w3-hover-border-white:hover{border-color:#fff!important} 226 | .w3-border-black,.w3-hover-border-black:hover{border-color:#000!important} 227 | .w3-border-grey,.w3-hover-border-grey:hover,.w3-border-gray,.w3-hover-border-gray:hover{border-color:#9e9e9e!important} 228 | .w3-border-light-grey,.w3-hover-border-light-grey:hover,.w3-border-light-gray,.w3-hover-border-light-gray:hover{border-color:#f1f1f1!important} 229 | .w3-border-dark-grey,.w3-hover-border-dark-grey:hover,.w3-border-dark-gray,.w3-hover-border-dark-gray:hover{border-color:#616161!important} 230 | .w3-border-pale-red,.w3-hover-border-pale-red:hover{border-color:#ffe7e7!important}.w3-border-pale-green,.w3-hover-border-pale-green:hover{border-color:#e7ffe7!important} 231 | .w3-border-pale-yellow,.w3-hover-border-pale-yellow:hover{border-color:#ffffcc!important}.w3-border-pale-blue,.w3-hover-border-pale-blue:hover{border-color:#e7ffff!important} -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif; 4 | background: #f0f2fa; 5 | } 6 | 7 | .site-list-item { 8 | padding: 10px; 9 | background: #f3f6fd; 10 | color: #383838; 11 | margin: 10px; 12 | cursor: pointer; 13 | transition: background 0.3s ease; 14 | text-transform: capitalize; 15 | font-weight: 600; 16 | overflow: hidden; 17 | white-space: nowrap; 18 | text-overflow: ellipsis; 19 | } 20 | 21 | .site-list-item:hover { 22 | background: #ffffff; 23 | } 24 | #popup-space{ 25 | font-family: 'Roboto', sans-serif; 26 | width: 200px; 27 | } 28 | 29 | #target_div { 30 | margin-left: 350px; 31 | width: calc(100% - 380px); 32 | position:relative; 33 | min-height: 100vh; 34 | } 35 | 36 | .site-card{ 37 | height:100px; 38 | width:100px; 39 | background: #fff; 40 | position:relative; 41 | border-radius:10px; 42 | display:flex; 43 | align-items:center; 44 | justify-content:center; 45 | transition: all 0.3s ease; 46 | } 47 | 48 | .site-card-wrap{margin:20px;display: inline-block;width: 100px;cursor:pointer;margin-bottom: 0;} 49 | 50 | .site-card-wrap:hover .site-card{ 51 | transform:translateY(-10px); 52 | box-shadow: 0px 20px 35px -16px #2d81b121; 53 | } 54 | 55 | .site-card img{ 56 | height :60px; 57 | } 58 | 59 | .site-card-item-count{ 60 | position:absolute; 61 | transform:translate(40%,40%); 62 | display:flex; 63 | align-items:center; 64 | justify-content:center; 65 | color:#fff; 66 | bottom:0; 67 | right:0; 68 | background: #3B99FC; 69 | border-radius:100%; 70 | height:25px; 71 | width:25px; 72 | 73 | } 74 | #dashboard-overlay{ 75 | height:100vh; 76 | width:100%; 77 | position: fixed; 78 | top: 0; 79 | left: 0; 80 | } 81 | 82 | #dashboard-site-modal{ 83 | padding:30px; 84 | /* overflow: scroll; */ 85 | } 86 | 87 | .overlay{ 88 | background:#000000; 89 | opacity:0; 90 | position: absolute; 91 | z-index:-10; 92 | } 93 | 94 | .modal{ 95 | display: none; 96 | position: fixed; 97 | left:50%; 98 | top:50%; 99 | border-radius: 6px; 100 | background: #fff; 101 | z-index: 11; 102 | width: 450px; 103 | min-height: 180px; 104 | max-height: 650px; 105 | transform: translate(-50%,-50%); 106 | } 107 | 108 | .modal.show{ 109 | display: block; 110 | } 111 | 112 | .overlay.show{ 113 | visibility:visible; 114 | opacity:0.5; 115 | transition: opacity 0.3s ease; 116 | z-index: 10; 117 | } 118 | .modal-item{ 119 | display:flex; 120 | justify-content:space-between; 121 | color: #5d5d5d; 122 | cursor: pointer; 123 | align-items: center; 124 | } 125 | .modal-item-title { 126 | width: 410px; 127 | white-space :nowrap; 128 | overflow:hidden; 129 | text-overflow:ellipsis; 130 | } 131 | .modal-item-remove{ 132 | opacity:0; 133 | font-weight:400; 134 | cursor:pointer; 135 | transition: opacity 0.1s ease; 136 | } 137 | .modal-item:hover {color: #000;} 138 | 139 | .modal-item:hover .modal-item-remove{ 140 | opacity:1; 141 | } 142 | .dashboard-left-bar{ 143 | width: 330px; 144 | height: 100vh; 145 | background: #ffffff; 146 | position: fixed; 147 | } 148 | 149 | .dashboard-left-bar-footer{ 150 | position:absolute; 151 | bottom: 0; 152 | padding: 20px 20px 20px 20px; 153 | } 154 | 155 | .dashboard-left-bar-categories{ 156 | position:absolute; 157 | top: 20%; 158 | /* width: 100%; */ 159 | padding:20px; 160 | } 161 | .dashboard-left-bar-header{ 162 | padding:20px; 163 | display: flex; 164 | align-items: center; 165 | } 166 | .categories-item{ 167 | font-weight: 500; 168 | width: 267px; 169 | font-size: 17px; 170 | border-radius: 4px; 171 | justify-content: space-between; 172 | cursor:pointer; 173 | display: flex; 174 | padding: 10px; 175 | margin-bottom:2px; 176 | } 177 | 178 | .modal-site-img { 179 | width: 60px; 180 | height: 60px; 181 | } 182 | .modal-header{ 183 | display:flex; 184 | align-items:center; 185 | justify-content: space-between; 186 | padding-bottom: 30px; 187 | } 188 | .modal-header-title{ 189 | /* margin-left: -100px; */ 190 | font-size: 1.5rem; 191 | } 192 | 193 | .all-content-wrap{ 194 | width:100%; 195 | padding: 15px; 196 | } 197 | .item-card{ 198 | padding: 10px; 199 | width: 200px; 200 | } 201 | 202 | .item-card-image { 203 | height: 60px; 204 | width: 60px; 205 | margin: 30px auto; 206 | padding: 10px; 207 | box-sizing: border-box; 208 | } 209 | 210 | .icon-card-close { 211 | position: absolute; 212 | opacity: 0; 213 | right: 13px; 214 | cursor: pointer; 215 | top: 13px; 216 | transition: opacity 0.3s ease; 217 | color: rgba(0,0,0,0.5); 218 | font-weight: 600; 219 | font-size: 15px; 220 | } 221 | 222 | .item-card-title { 223 | width: 200px; 224 | position: relative; 225 | text-overflow: ellipsis; 226 | margin: 10px; 227 | text-align: center; 228 | white-space: nowrap; 229 | display: inline-block; 230 | overflow: hidden; 231 | } 232 | 233 | .item-card-wrap { 234 | position: relative; 235 | display: inline-block; 236 | background: #fff; 237 | margin: 10px; 238 | box-shadow: 0px 20px 35px -16px #2d81b121; 239 | cursor: pointer; 240 | border-radius: 10px; 241 | transition: transform 0.3s ease; 242 | } 243 | 244 | .search-bar { 245 | float: left; 246 | cursor: pointer; 247 | } 248 | 249 | .full-page-options { 250 | margin-left: 330px; 251 | padding: 40px; 252 | display: flex; 253 | align-items: center; 254 | } 255 | 256 | .tab-options { 257 | display: flex; 258 | position: absolute; 259 | color: #000000; 260 | right: 10%; 261 | width: 250px; 262 | font-size: 13px; 263 | justify-content: space-between; 264 | } 265 | 266 | .tab-option-separator { 267 | color: #00000030; 268 | } 269 | 270 | .open-all { 271 | cursor: pointer; 272 | } 273 | 274 | .remove-all { 275 | cursor: pointer; 276 | } 277 | 278 | .site-list-title { 279 | padding: 15px; 280 | background: #f5f5f7; 281 | } 282 | 283 | div#open-all-of-this-site {color: #00000090;} 284 | 285 | div#open-all-of-this-site:hover { 286 | color: #000; 287 | text-decoration: underline; 288 | cursor: pointer; 289 | } 290 | 291 | .modal-item a { 292 | text-decoration: none; 293 | color: unset; 294 | padding: 10px; 295 | } 296 | 297 | .search-bar input[type="text"] { 298 | border-radius: 25px; 299 | border: 1px solid #adadad; 300 | padding: 10px; 301 | outline: none; 302 | color: #000000d6; 303 | background: #f0f2fa; 304 | width: 350px; 305 | } 306 | 307 | .item-card-wrap-outer {display: inline-block;} 308 | 309 | .item-card-wrap-outer:hover .item-card-wrap { 310 | transform: translateY(-10px); 311 | box-shadow: 0px 20px 35px -16px #2d81b121; 312 | } 313 | 314 | .item-card-wrap:after { 315 | content: ''; 316 | width: 100%; 317 | position: absolute; 318 | bottom: 37px; 319 | z-index: 2; 320 | left: 0; 321 | height: 1px; 322 | background: #adadad47; 323 | } 324 | 325 | #domain-list { 326 | background: #f3f6fd; 327 | margin: 10px; 328 | padding: 10px; 329 | } 330 | 331 | #domain-list .site-list-item { 332 | padding: 10px; 333 | border: 1px solid #e3e3e3; 334 | } 335 | 336 | .count-class { 337 | background: #3b98fc; 338 | color: #fff; 339 | font-size: 12px; 340 | font-weight: 100; 341 | line-height: 1.7; 342 | height: 20px; 343 | width: 20px; 344 | text-align: center; 345 | border-radius: 100%; 346 | } 347 | 348 | .remove-site { 349 | position: absolute; 350 | top: 6px; 351 | right: 6px; 352 | transition: opacity 0.3s ease; 353 | opacity: 0; 354 | } 355 | 356 | .site-name { 357 | width: 100%; 358 | overflow: hidden; 359 | padding: 10px 5px 0px 5px; 360 | box-sizing: border-box; 361 | color: #313131; 362 | white-space: nowrap; 363 | text-transform: capitalize; 364 | text-overflow: ellipsis; 365 | } 366 | 367 | .item-card-wrap:hover .icon-card-close { 368 | opacity: 1; 369 | } 370 | 371 | .site-card:hover .remove-site { 372 | opacity: 1; 373 | } 374 | 375 | #domain-list .site-list-item:hover { 376 | border: 1px solid #fff; 377 | } 378 | 379 | #open-dashboard { 380 | padding: 20px; 381 | background: #3b99fc; 382 | text-align: center; 383 | color: #fff; 384 | margin: 10px; 385 | cursor: pointer; 386 | border-radius: 3px; 387 | font-size: 12px; 388 | letter-spacing: 1.2px; 389 | text-transform: uppercase; 390 | font-weight: 500; 391 | } 392 | 393 | div#extension-name { 394 | font-size: 18px; 395 | font-weight: 600; 396 | margin-left: 15px; 397 | } 398 | 399 | .footer-item { 400 | padding: 5px 0; 401 | } 402 | 403 | .no-card-found { 404 | position: absolute; 405 | left: 50%; 406 | text-align: center; 407 | top: 39%; 408 | transform: translate(-50%,-50%); 409 | } 410 | 411 | .nothing-found-head { 412 | width: 245px; 413 | margin: 0 auto; 414 | font-weight: 600; 415 | padding-right: 17px; 416 | position: relative; 417 | line-height: 2.5; 418 | font-size: 17px; 419 | } 420 | 421 | .nothing-found-desc { 422 | width: 245px; 423 | margin: 0 auto; 424 | padding: 0px 20px; 425 | box-sizing: border-box; 426 | font-size: 14px; 427 | line-height: 1.7; 428 | color: #00000060; 429 | } 430 | 431 | span.nf-head-emoji img { 432 | height: 25px; 433 | position: absolute; 434 | top: 7px; 435 | right: 40px; 436 | } 437 | 438 | .corousel-wrap{ 439 | position: absolute; 440 | z-index: 10; 441 | top: 50%; 442 | left: 50%; 443 | transform: translate(-50%,-50%); 444 | height: 400px; 445 | width: 640px; 446 | } 447 | 448 | #corousel-wrap-wrap{ 449 | position: fixed; 450 | height: 100vh; 451 | width: 100%; 452 | top: 0; 453 | left: 0; 454 | background: #00000080; 455 | } 456 | 457 | .modal-body {height: 170px;overflow: scroll;} -------------------------------------------------------------------------------- /docs/css/styles.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin:0; 3 | padding:0; 4 | font-family:sans-serif; 5 | } 6 | 7 | 8 | .itm-section.home{ 9 | display: flex; 10 | padding-top: 120px; 11 | height:100vh; 12 | overflow:hidden; 13 | color:#fff; 14 | box-sizing:border-box; 15 | background: #1488CC; /* fallback for old browsers */ 16 | background: -webkit-linear-gradient(to bottom, #2B32B2, #1488CC); /* Chrome 10-25, Safari 5.1-6 */ 17 | background: linear-gradient(to bottom, #2B32B2, #1488CC); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 18 | 19 | } 20 | 21 | .home .left-content-wrap{ 22 | flex-basis: 40%; 23 | flex-shrink: 0; 24 | display: flex; 25 | flex-direction:column; 26 | align-items: flex-end; 27 | padding:120px 50px 0 0; 28 | box-sizing:border-box; 29 | } 30 | 31 | .home .left-content-wrap .product-name{ 32 | font-size:9px; 33 | letter-spacing:1px; 34 | text-transform:uppercase; 35 | } 36 | 37 | .home .left-content .product-desc{ 38 | margin-top:20px; 39 | font-size:25px; 40 | max-width:250px; 41 | } 42 | 43 | .download-btn{ 44 | color:#2B32B2; 45 | background:#fff; 46 | display:inline-block; 47 | padding: 10px 30px; 48 | font-size:13px; 49 | border-radius:25px; 50 | margin-top:40px; 51 | cursor: pointer; 52 | transition: all 0.7s ease; 53 | } 54 | .download-btn:hover{ 55 | background: #2B32B2; 56 | color:#fff; 57 | } 58 | 59 | 60 | .feature1 .right-content-wrap { 61 | margin-top: 100px; 62 | } 63 | 64 | .feature1 .left-content-wrap { 65 | display: flex; 66 | flex-direction: column; 67 | justify-content: center; 68 | flex-basis: 40%; 69 | flex-shrink: 0; 70 | color: #3f3f40; 71 | } 72 | 73 | .feature1 .right-content-wrap img{ 74 | /* max-width: 600px; */ 75 | } 76 | 77 | .feature-line1 { 78 | font-size: 25px; 79 | line-height: 1.5; 80 | color: #888080; 81 | margin-bottom: 10px; 82 | } 83 | 84 | .left-content { 85 | width: 250px; 86 | margin-right: 50px; 87 | align-self: flex-end; 88 | } 89 | 90 | .feature-line2 { 91 | font-size: 12px; 92 | line-height: 2; 93 | color: #a29999; 94 | } 95 | 96 | .feature1 { 97 | display: flex; 98 | } 99 | 100 | .feature2{ 101 | display:flex; 102 | margin-top: 100px; 103 | } 104 | 105 | .right-content{ 106 | width: 250px; 107 | /* flex-shrink:0; */ 108 | padding: 50px; 109 | padding-top: 0; 110 | } 111 | .left-content-wrap img{ 112 | /* max-width: 700px; */ 113 | /* float: right; */ 114 | /* max-height: 600px; */ 115 | } 116 | 117 | .left-content-wrap { 118 | flex-basis: 50%; 119 | display: flex; 120 | justify-content: flex-end; 121 | } 122 | 123 | .right-content-wrap { 124 | align-items: center; 125 | display: flex; 126 | } 127 | 128 | .grouping-list { 129 | margin-top: 30px; 130 | color: #756262; 131 | font-size: 10px; 132 | } 133 | 134 | .grouping-list .list-item { 135 | padding: 10px; 136 | } 137 | 138 | .left-content .list-item { 139 | margin-top: 50px; 140 | font-size: 13px; 141 | } 142 | 143 | .feature1.f3 div.right-content-wrap img { 144 | max-width: 300px; 145 | margin-left: 50px; 146 | } 147 | 148 | .left-content-wrap {} 149 | 150 | .home .left-content-wrap {justify-content: normal;} 151 | 152 | .footer { 153 | display: flex; 154 | flex-direction: column; 155 | align-items: center; 156 | color: #fff; 157 | padding-bottom: 30px; 158 | margin-top: 100px; 159 | background: #1488CC; 160 | background: -webkit-linear-gradient(to bottom, #2B32B2, #1488CC); 161 | background: linear-gradient(to bottom, #2B32B2, #1488CC); 162 | } 163 | 164 | .supports { 165 | text-transform: uppercase; 166 | font-size: 9px; 167 | margin-top: 100px; 168 | margin-bottom: 20px; 169 | } 170 | 171 | .download-txt { 172 | font-size: 22px; 173 | } 174 | 175 | .footer .download-btn { 176 | margin-bottom: 100px; 177 | } 178 | 179 | .cprt { 180 | display: flex; 181 | font-size: 12px; 182 | } 183 | 184 | .cprt div { 185 | margin-right: 20px; 186 | } 187 | 188 | .feature1.f3 .left-content-wrap { 189 | flex-basis: 55%; 190 | padding-right: 50px; 191 | box-sizing: border-box; 192 | } 193 | 194 | a{ 195 | text-decoration: none; 196 | } 197 | 198 | .how-it-works{ 199 | width: 640px; 200 | margin: 50px auto; 201 | text-align: center; 202 | font-size: 30px; 203 | } 204 | 205 | .itm-section.home .right-img img{ 206 | width: 1200px; 207 | } 208 | 209 | 210 | /* Extra small devices (phones, 600px and down) */ 211 | @media only screen and (max-width: 400px) { 212 | 213 | .itm-section{ 214 | overflow:hidden; 215 | } 216 | 217 | .itm-section.home{ 218 | flex-direction: column; 219 | } 220 | 221 | .home .left-content-wrap{ 222 | padding-top:50px; 223 | } 224 | .itm-section.home img{ 225 | width:400px; 226 | padding-top:20px; 227 | } 228 | 229 | 230 | 231 | .itm-section.features .feature1{ 232 | flex-direction:column; 233 | padding-top:50px; 234 | } 235 | 236 | .itm-section.features .feature1 img{ 237 | width:400px; 238 | } 239 | .itm-section.features .feature2{ 240 | flex-direction:column; 241 | padding-top:50px; 242 | } 243 | 244 | 245 | .itm-section.features .feature2 .left-content-wrap img{ 246 | width:700px; 247 | } 248 | .how-it-works{ 249 | width: 100%; 250 | margin: 20px 0; 251 | } 252 | 253 | .right-content{ 254 | width:100%; 255 | } 256 | 257 | } 258 | -------------------------------------------------------------------------------- /docs/css/suttadhu.css: -------------------------------------------------------------------------------- 1 | /* W3.CSS 4.10 February 2018 by Jan Egil and Borge Refsnes */ 2 | html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit} 3 | /* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */ 4 | html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0} 5 | article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block} 6 | audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline} 7 | audio:not([controls]){display:none;height:0}[hidden],template{display:none} 8 | a{background-color:transparent;-webkit-text-decoration-skip:objects} 9 | a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted} 10 | dfn{font-style:italic}mark{background:#ff0;color:#000} 11 | small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline} 12 | sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}img{border-style:none}svg:not(:root){overflow:hidden} 13 | code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}hr{box-sizing:content-box;height:0;overflow:visible} 14 | button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold} 15 | button,input{overflow:visible}button,select{text-transform:none} 16 | button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button} 17 | button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner{border-style:none;padding:0} 18 | button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring{outline:1px dotted ButtonText} 19 | fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em} 20 | legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto} 21 | [type=checkbox],[type=radio]{padding:0} 22 | [type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto} 23 | [type=search]{-webkit-appearance:textfield;outline-offset:-2px} 24 | [type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none} 25 | ::-webkit-input-placeholder{color:inherit;opacity:0.54} 26 | ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit} 27 | /* End extract */ 28 | html,body{font-family:Verdana,sans-serif;font-size:15px;line-height:1.5}html{overflow-x:hidden} 29 | h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}.w3-serif{font-family:serif} 30 | h1,h2,h3,h4,h5,h6{font-family:"Segoe UI",Arial,sans-serif;font-weight:400;margin:10px 0}.w3-wide{letter-spacing:4px} 31 | hr{border:0;border-top:1px solid #eee;margin:20px 0} 32 | .w3-image{max-width:100%;height:auto}img{vertical-align:middle}a{color:inherit} 33 | .w3-table,.w3-table-all{border-collapse:collapse;border-spacing:0;width:100%;display:table}.w3-table-all{border:1px solid #ccc} 34 | .w3-bordered tr,.w3-table-all tr{border-bottom:1px solid #ddd}.w3-striped tbody tr:nth-child(even){background-color:#f1f1f1} 35 | .w3-table-all tr:nth-child(odd){background-color:#fff}.w3-table-all tr:nth-child(even){background-color:#f1f1f1} 36 | .w3-hoverable tbody tr:hover,.w3-ul.w3-hoverable li:hover{background-color:#ccc}.w3-centered tr th,.w3-centered tr td{text-align:center} 37 | .w3-table td,.w3-table th,.w3-table-all td,.w3-table-all th{padding:8px 8px;display:table-cell;text-align:left;vertical-align:top} 38 | .w3-table th:first-child,.w3-table td:first-child,.w3-table-all th:first-child,.w3-table-all td:first-child{padding-left:16px} 39 | .w3-btn,.w3-button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap} 40 | .w3-btn:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)} 41 | .w3-btn,.w3-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} 42 | .w3-disabled,.w3-btn:disabled,.w3-button:disabled{cursor:not-allowed;opacity:0.3}.w3-disabled *,:disabled *{pointer-events:none} 43 | .w3-btn.w3-disabled:hover,.w3-btn:disabled:hover{box-shadow:none} 44 | .w3-badge,.w3-tag{background-color:#000;color:#fff;display:inline-block;padding-left:8px;padding-right:8px;text-align:center}.w3-badge{border-radius:50%} 45 | .w3-ul{list-style-type:none;padding:0;margin:0}.w3-ul li{padding:8px 16px;border-bottom:1px solid #ddd}.w3-ul li:last-child{border-bottom:none} 46 | .w3-tooltip,.w3-display-container{position:relative}.w3-tooltip .w3-text{display:none}.w3-tooltip:hover .w3-text{display:inline-block} 47 | .w3-ripple:active{opacity:0.5}.w3-ripple{transition:opacity 0s} 48 | .w3-input{padding:8px;display:block;border:none;border-bottom:1px solid #ccc;width:100%} 49 | .w3-select{padding:9px 0;width:100%;border:none;border-bottom:1px solid #ccc} 50 | .w3-dropdown-click,.w3-dropdown-hover{position:relative;display:inline-block;cursor:pointer} 51 | .w3-dropdown-hover:hover .w3-dropdown-content{display:block} 52 | .w3-dropdown-hover:first-child,.w3-dropdown-click:hover{background-color:#ccc;color:#000} 53 | .w3-dropdown-hover:hover > .w3-button:first-child,.w3-dropdown-click:hover > .w3-button:first-child{background-color:#ccc;color:#000} 54 | .w3-dropdown-content{cursor:auto;color:#000;background-color:#fff;display:none;position:absolute;min-width:160px;margin:0;padding:0;z-index:1} 55 | .w3-check,.w3-radio{width:24px;height:24px;position:relative;top:6px} 56 | .w3-sidebar{height:100%;width:200px;background-color:#fff;position:fixed!important;z-index:1;overflow:auto} 57 | .w3-bar-block .w3-dropdown-hover,.w3-bar-block .w3-dropdown-click{width:100%} 58 | .w3-bar-block .w3-dropdown-hover .w3-dropdown-content,.w3-bar-block .w3-dropdown-click .w3-dropdown-content{min-width:100%} 59 | .w3-bar-block .w3-dropdown-hover .w3-button,.w3-bar-block .w3-dropdown-click .w3-button{width:100%;text-align:left;padding:8px 16px} 60 | .w3-main,#main{transition:margin-left .4s} 61 | .w3-modal{z-index:3;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)} 62 | .w3-modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:600px} 63 | .w3-bar{width:100%;overflow:hidden}.w3-center .w3-bar{display:inline-block;width:auto} 64 | .w3-bar .w3-bar-item{padding:8px 16px;float:left;width:auto;border:none;display:block;outline:0} 65 | .w3-bar .w3-dropdown-hover,.w3-bar .w3-dropdown-click{position:static;float:left} 66 | .w3-bar .w3-button{white-space:normal} 67 | .w3-bar-block .w3-bar-item{width:100%;display:block;padding:8px 16px;text-align:left;border:none;white-space:normal;float:none;outline:0} 68 | .w3-bar-block.w3-center .w3-bar-item{text-align:center}.w3-block{display:block;width:100%} 69 | .w3-responsive{display:block;overflow-x:auto} 70 | .w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:before,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before, 71 | .w3-cell-row:before,.w3-cell-row:after,.w3-clear:after,.w3-clear:before,.w3-bar:before,.w3-bar:after{content:"";display:table;clear:both} 72 | .w3-col,.w3-half,.w3-third,.w3-twothird,.w3-threequarter,.w3-quarter{float:left;width:100%} 73 | .w3-col.s1{width:8.33333%}.w3-col.s2{width:16.66666%}.w3-col.s3{width:24.99999%}.w3-col.s4{width:33.33333%} 74 | .w3-col.s5{width:41.66666%}.w3-col.s6{width:49.99999%}.w3-col.s7{width:58.33333%}.w3-col.s8{width:66.66666%} 75 | .w3-col.s9{width:74.99999%}.w3-col.s10{width:83.33333%}.w3-col.s11{width:91.66666%}.w3-col.s12{width:99.99999%} 76 | @media (min-width:601px){.w3-col.m1{width:8.33333%}.w3-col.m2{width:16.66666%}.w3-col.m3,.w3-quarter{width:24.99999%}.w3-col.m4,.w3-third{width:33.33333%} 77 | .w3-col.m5{width:41.66666%}.w3-col.m6,.w3-half{width:49.99999%}.w3-col.m7{width:58.33333%}.w3-col.m8,.w3-twothird{width:66.66666%} 78 | .w3-col.m9,.w3-threequarter{width:74.99999%}.w3-col.m10{width:83.33333%}.w3-col.m11{width:91.66666%}.w3-col.m12{width:99.99999%}} 79 | @media (min-width:993px){.w3-col.l1{width:8.33333%}.w3-col.l2{width:16.66666%}.w3-col.l3{width:24.99999%}.w3-col.l4{width:33.33333%} 80 | .w3-col.l5{width:41.66666%}.w3-col.l6{width:49.99999%}.w3-col.l7{width:58.33333%}.w3-col.l8{width:66.66666%} 81 | .w3-col.l9{width:74.99999%}.w3-col.l10{width:83.33333%}.w3-col.l11{width:91.66666%}.w3-col.l12{width:99.99999%}} 82 | .w3-content{max-width:980px;margin:auto}.w3-rest{overflow:hidden} 83 | .w3-cell-row{display:table;width:100%}.w3-cell{display:table-cell} 84 | .w3-cell-top{vertical-align:top}.w3-cell-middle{vertical-align:middle}.w3-cell-bottom{vertical-align:bottom} 85 | .w3-hide{display:none!important}.w3-show-block,.w3-show{display:block!important}.w3-show-inline-block{display:inline-block!important} 86 | @media (max-width:600px){.w3-modal-content{margin:0 10px;width:auto!important}.w3-modal{padding-top:30px} 87 | .w3-dropdown-hover.w3-mobile .w3-dropdown-content,.w3-dropdown-click.w3-mobile .w3-dropdown-content{position:relative} 88 | .w3-hide-small{display:none!important}.w3-mobile{display:block;width:100%!important}.w3-bar-item.w3-mobile,.w3-dropdown-hover.w3-mobile,.w3-dropdown-click.w3-mobile{text-align:center} 89 | .w3-dropdown-hover.w3-mobile,.w3-dropdown-hover.w3-mobile .w3-btn,.w3-dropdown-hover.w3-mobile .w3-button,.w3-dropdown-click.w3-mobile,.w3-dropdown-click.w3-mobile .w3-btn,.w3-dropdown-click.w3-mobile .w3-button{width:100%}} 90 | @media (max-width:768px){.w3-modal-content{width:500px}.w3-modal{padding-top:50px}} 91 | @media (min-width:993px){.w3-modal-content{width:900px}.w3-hide-large{display:none!important}.w3-sidebar.w3-collapse{display:block!important}} 92 | @media (max-width:992px) and (min-width:601px){.w3-hide-medium{display:none!important}} 93 | @media (max-width:992px){.w3-sidebar.w3-collapse{display:none}.w3-main{margin-left:0!important;margin-right:0!important}} 94 | .w3-top,.w3-bottom{position:fixed;width:100%;z-index:1}.w3-top{top:0}.w3-bottom{bottom:0} 95 | .w3-overlay{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.5);z-index:2} 96 | .w3-display-topleft{position:absolute;left:0;top:0}.w3-display-topright{position:absolute;right:0;top:0} 97 | .w3-display-bottomleft{position:absolute;left:0;bottom:0}.w3-display-bottomright{position:absolute;right:0;bottom:0} 98 | .w3-display-middle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)} 99 | .w3-display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)} 100 | .w3-display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)} 101 | .w3-display-topmiddle{position:absolute;left:50%;top:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)} 102 | .w3-display-bottommiddle{position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)} 103 | .w3-display-container:hover .w3-display-hover{display:block}.w3-display-container:hover span.w3-display-hover{display:inline-block}.w3-display-hover{display:none} 104 | .w3-display-position{position:absolute} 105 | .w3-circle{border-radius:50%} 106 | .w3-round-small{border-radius:2px}.w3-round,.w3-round-medium{border-radius:4px}.w3-round-large{border-radius:8px}.w3-round-xlarge{border-radius:16px}.w3-round-xxlarge{border-radius:32px} 107 | .w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col{padding:0 8px} 108 | .w3-container,.w3-panel{padding:0.01em 16px}.w3-panel{margin-top:16px;margin-bottom:16px} 109 | .w3-code,.w3-codespan{font-family:Consolas,"courier new";font-size:16px} 110 | .w3-code{width:auto;background-color:#fff;padding:8px 12px;border-left:4px solid #4CAF50;word-wrap:break-word} 111 | .w3-codespan{color:crimson;background-color:#f1f1f1;padding-left:4px;padding-right:4px;font-size:110%} 112 | .w3-card,.w3-card-2{box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)} 113 | .w3-card-4,.w3-hover-shadow:hover{box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)} 114 | .w3-spin{animation:w3-spin 2s infinite linear}@keyframes w3-spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}} 115 | .w3-animate-fading{animation:fading 10s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}} 116 | .w3-animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}} 117 | .w3-animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}} 118 | .w3-animate-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}} 119 | .w3-animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}} 120 | .w3-animate-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}} 121 | .w3-animate-zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}} 122 | .w3-animate-input{transition:width 0.4s ease-in-out}.w3-animate-input:focus{width:100%!important} 123 | .w3-opacity,.w3-hover-opacity:hover{opacity:0.60}.w3-opacity-off,.w3-hover-opacity-off:hover{opacity:1} 124 | .w3-opacity-max{opacity:0.25}.w3-opacity-min{opacity:0.75} 125 | .w3-greyscale-max,.w3-grayscale-max,.w3-hover-greyscale:hover,.w3-hover-grayscale:hover{filter:grayscale(100%)} 126 | .w3-greyscale,.w3-grayscale{filter:grayscale(75%)}.w3-greyscale-min,.w3-grayscale-min{filter:grayscale(50%)} 127 | .w3-sepia{filter:sepia(75%)}.w3-sepia-max,.w3-hover-sepia:hover{filter:sepia(100%)}.w3-sepia-min{filter:sepia(50%)} 128 | .w3-tiny{font-size:10px!important}.w3-small{font-size:12px!important}.w3-medium{font-size:15px!important}.w3-large{font-size:18px!important} 129 | .w3-xlarge{font-size:24px!important}.w3-xxlarge{font-size:36px!important}.w3-xxxlarge{font-size:48px!important}.w3-jumbo{font-size:64px!important} 130 | .w3-left-align{text-align:left!important}.w3-right-align{text-align:right!important}.w3-justify{text-align:justify!important}.w3-center{text-align:center!important} 131 | .w3-border-0{border:0!important}.w3-border{border:1px solid #ccc!important} 132 | .w3-border-top{border-top:1px solid #ccc!important}.w3-border-bottom{border-bottom:1px solid #ccc!important} 133 | .w3-border-left{border-left:1px solid #ccc!important}.w3-border-right{border-right:1px solid #ccc!important} 134 | .w3-topbar{border-top:6px solid #ccc!important}.w3-bottombar{border-bottom:6px solid #ccc!important} 135 | .w3-leftbar{border-left:6px solid #ccc!important}.w3-rightbar{border-right:6px solid #ccc!important} 136 | .w3-section,.w3-code{margin-top:16px!important;margin-bottom:16px!important} 137 | .w3-margin{margin:16px!important}.w3-margin-top{margin-top:16px!important}.w3-margin-bottom{margin-bottom:16px!important} 138 | .w3-margin-left{margin-left:16px!important}.w3-margin-right{margin-right:16px!important} 139 | .w3-padding-small{padding:4px 8px!important}.w3-padding{padding:8px 16px!important}.w3-padding-large{padding:12px 24px!important} 140 | .w3-padding-16{padding-top:16px!important;padding-bottom:16px!important}.w3-padding-24{padding-top:24px!important;padding-bottom:24px!important} 141 | .w3-padding-32{padding-top:32px!important;padding-bottom:32px!important}.w3-padding-48{padding-top:48px!important;padding-bottom:48px!important} 142 | .w3-padding-64{padding-top:64px!important;padding-bottom:64px!important} 143 | .w3-left{float:left!important}.w3-right{float:right!important} 144 | .w3-button:hover{color:#000!important;background-color:#ccc!important} 145 | .w3-transparent,.w3-hover-none:hover{background-color:transparent!important} 146 | .w3-hover-none:hover{box-shadow:none!important} 147 | /* Colors */ 148 | .w3-amber,.w3-hover-amber:hover{color:#000!important;background-color:#ffc107!important} 149 | .w3-aqua,.w3-hover-aqua:hover{color:#000!important;background-color:#00ffff!important} 150 | .w3-blue,.w3-hover-blue:hover{color:#fff!important;background-color:#2196F3!important} 151 | .w3-light-blue,.w3-hover-light-blue:hover{color:#000!important;background-color:#87CEEB!important} 152 | .w3-brown,.w3-hover-brown:hover{color:#fff!important;background-color:#795548!important} 153 | .w3-cyan,.w3-hover-cyan:hover{color:#000!important;background-color:#00bcd4!important} 154 | .w3-blue-grey,.w3-hover-blue-grey:hover,.w3-blue-gray,.w3-hover-blue-gray:hover{color:#fff!important;background-color:#607d8b!important} 155 | .w3-green,.w3-hover-green:hover{color:#fff!important;background-color:#4CAF50!important} 156 | .w3-light-green,.w3-hover-light-green:hover{color:#000!important;background-color:#8bc34a!important} 157 | .w3-indigo,.w3-hover-indigo:hover{color:#fff!important;background-color:#3f51b5!important} 158 | .w3-khaki,.w3-hover-khaki:hover{color:#000!important;background-color:#f0e68c!important} 159 | .w3-lime,.w3-hover-lime:hover{color:#000!important;background-color:#cddc39!important} 160 | .w3-orange,.w3-hover-orange:hover{color:#000!important;background-color:#ff9800!important} 161 | .w3-deep-orange,.w3-hover-deep-orange:hover{color:#fff!important;background-color:#ff5722!important} 162 | .w3-pink,.w3-hover-pink:hover{color:#fff!important;background-color:#e91e63!important} 163 | .w3-purple,.w3-hover-purple:hover{color:#fff!important;background-color:#9c27b0!important} 164 | .w3-deep-purple,.w3-hover-deep-purple:hover{color:#fff!important;background-color:#673ab7!important} 165 | .w3-red,.w3-hover-red:hover{color:#fff!important;background-color:#f44336!important} 166 | .w3-sand,.w3-hover-sand:hover{color:#000!important;background-color:#fdf5e6!important} 167 | .w3-teal,.w3-hover-teal:hover{color:#fff!important;background-color:#009688!important} 168 | .w3-yellow,.w3-hover-yellow:hover{color:#000!important;background-color:#ffeb3b!important} 169 | .w3-white,.w3-hover-white:hover{color:#000!important;background-color:#fff!important} 170 | .w3-black,.w3-hover-black:hover{color:#fff!important;background-color:#000!important} 171 | .w3-grey,.w3-hover-grey:hover,.w3-gray,.w3-hover-gray:hover{color:#000!important;background-color:#9e9e9e!important} 172 | .w3-light-grey,.w3-hover-light-grey:hover,.w3-light-gray,.w3-hover-light-gray:hover{color:#000!important;background-color:#f1f1f1!important} 173 | .w3-dark-grey,.w3-hover-dark-grey:hover,.w3-dark-gray,.w3-hover-dark-gray:hover{color:#fff!important;background-color:#616161!important} 174 | .w3-pale-red,.w3-hover-pale-red:hover{color:#000!important;background-color:#ffdddd!important} 175 | .w3-pale-green,.w3-hover-pale-green:hover{color:#000!important;background-color:#ddffdd!important} 176 | .w3-pale-yellow,.w3-hover-pale-yellow:hover{color:#000!important;background-color:#ffffcc!important} 177 | .w3-pale-blue,.w3-hover-pale-blue:hover{color:#000!important;background-color:#ddffff!important} 178 | .w3-text-amber,.w3-hover-text-amber:hover{color:#ffc107!important} 179 | .w3-text-aqua,.w3-hover-text-aqua:hover{color:#00ffff!important} 180 | .w3-text-blue,.w3-hover-text-blue:hover{color:#2196F3!important} 181 | .w3-text-light-blue,.w3-hover-text-light-blue:hover{color:#87CEEB!important} 182 | .w3-text-brown,.w3-hover-text-brown:hover{color:#795548!important} 183 | .w3-text-cyan,.w3-hover-text-cyan:hover{color:#00bcd4!important} 184 | .w3-text-blue-grey,.w3-hover-text-blue-grey:hover,.w3-text-blue-gray,.w3-hover-text-blue-gray:hover{color:#607d8b!important} 185 | .w3-text-green,.w3-hover-text-green:hover{color:#4CAF50!important} 186 | .w3-text-light-green,.w3-hover-text-light-green:hover{color:#8bc34a!important} 187 | .w3-text-indigo,.w3-hover-text-indigo:hover{color:#3f51b5!important} 188 | .w3-text-khaki,.w3-hover-text-khaki:hover{color:#b4aa50!important} 189 | .w3-text-lime,.w3-hover-text-lime:hover{color:#cddc39!important} 190 | .w3-text-orange,.w3-hover-text-orange:hover{color:#ff9800!important} 191 | .w3-text-deep-orange,.w3-hover-text-deep-orange:hover{color:#ff5722!important} 192 | .w3-text-pink,.w3-hover-text-pink:hover{color:#e91e63!important} 193 | .w3-text-purple,.w3-hover-text-purple:hover{color:#9c27b0!important} 194 | .w3-text-deep-purple,.w3-hover-text-deep-purple:hover{color:#673ab7!important} 195 | .w3-text-red,.w3-hover-text-red:hover{color:#f44336!important} 196 | .w3-text-sand,.w3-hover-text-sand:hover{color:#fdf5e6!important} 197 | .w3-text-teal,.w3-hover-text-teal:hover{color:#009688!important} 198 | .w3-text-yellow,.w3-hover-text-yellow:hover{color:#d2be0e!important} 199 | .w3-text-white,.w3-hover-text-white:hover{color:#fff!important} 200 | .w3-text-black,.w3-hover-text-black:hover{color:#000!important} 201 | .w3-text-grey,.w3-hover-text-grey:hover,.w3-text-gray,.w3-hover-text-gray:hover{color:#757575!important} 202 | .w3-text-light-grey,.w3-hover-text-light-grey:hover,.w3-text-light-gray,.w3-hover-text-light-gray:hover{color:#f1f1f1!important} 203 | .w3-text-dark-grey,.w3-hover-text-dark-grey:hover,.w3-text-dark-gray,.w3-hover-text-dark-gray:hover{color:#3a3a3a!important} 204 | .w3-border-amber,.w3-hover-border-amber:hover{border-color:#ffc107!important} 205 | .w3-border-aqua,.w3-hover-border-aqua:hover{border-color:#00ffff!important} 206 | .w3-border-blue,.w3-hover-border-blue:hover{border-color:#2196F3!important} 207 | .w3-border-light-blue,.w3-hover-border-light-blue:hover{border-color:#87CEEB!important} 208 | .w3-border-brown,.w3-hover-border-brown:hover{border-color:#795548!important} 209 | .w3-border-cyan,.w3-hover-border-cyan:hover{border-color:#00bcd4!important} 210 | .w3-border-blue-grey,.w3-hover-border-blue-grey:hover,.w3-border-blue-gray,.w3-hover-border-blue-gray:hover{border-color:#607d8b!important} 211 | .w3-border-green,.w3-hover-border-green:hover{border-color:#4CAF50!important} 212 | .w3-border-light-green,.w3-hover-border-light-green:hover{border-color:#8bc34a!important} 213 | .w3-border-indigo,.w3-hover-border-indigo:hover{border-color:#3f51b5!important} 214 | .w3-border-khaki,.w3-hover-border-khaki:hover{border-color:#f0e68c!important} 215 | .w3-border-lime,.w3-hover-border-lime:hover{border-color:#cddc39!important} 216 | .w3-border-orange,.w3-hover-border-orange:hover{border-color:#ff9800!important} 217 | .w3-border-deep-orange,.w3-hover-border-deep-orange:hover{border-color:#ff5722!important} 218 | .w3-border-pink,.w3-hover-border-pink:hover{border-color:#e91e63!important} 219 | .w3-border-purple,.w3-hover-border-purple:hover{border-color:#9c27b0!important} 220 | .w3-border-deep-purple,.w3-hover-border-deep-purple:hover{border-color:#673ab7!important} 221 | .w3-border-red,.w3-hover-border-red:hover{border-color:#f44336!important} 222 | .w3-border-sand,.w3-hover-border-sand:hover{border-color:#fdf5e6!important} 223 | .w3-border-teal,.w3-hover-border-teal:hover{border-color:#009688!important} 224 | .w3-border-yellow,.w3-hover-border-yellow:hover{border-color:#ffeb3b!important} 225 | .w3-border-white,.w3-hover-border-white:hover{border-color:#fff!important} 226 | .w3-border-black,.w3-hover-border-black:hover{border-color:#000!important} 227 | .w3-border-grey,.w3-hover-border-grey:hover,.w3-border-gray,.w3-hover-border-gray:hover{border-color:#9e9e9e!important} 228 | .w3-border-light-grey,.w3-hover-border-light-grey:hover,.w3-border-light-gray,.w3-hover-border-light-gray:hover{border-color:#f1f1f1!important} 229 | .w3-border-dark-grey,.w3-hover-border-dark-grey:hover,.w3-border-dark-gray,.w3-hover-border-dark-gray:hover{border-color:#616161!important} 230 | .w3-border-pale-red,.w3-hover-border-pale-red:hover{border-color:#ffe7e7!important}.w3-border-pale-green,.w3-hover-border-pale-green:hover{border-color:#e7ffe7!important} 231 | .w3-border-pale-yellow,.w3-hover-border-pale-yellow:hover{border-color:#ffffcc!important}.w3-border-pale-blue,.w3-hover-border-pale-blue:hover{border-color:#e7ffff!important} -------------------------------------------------------------------------------- /docs/images/feature1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThangaBalajiS/OrganizeTabs/03809f87d913c8007526c160e6219330147f344f/docs/images/feature1.png -------------------------------------------------------------------------------- /docs/images/feature2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThangaBalajiS/OrganizeTabs/03809f87d913c8007526c160e6219330147f344f/docs/images/feature2.png -------------------------------------------------------------------------------- /docs/images/feature3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThangaBalajiS/OrganizeTabs/03809f87d913c8007526c160e6219330147f344f/docs/images/feature3.png -------------------------------------------------------------------------------- /docs/images/feature4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThangaBalajiS/OrganizeTabs/03809f87d913c8007526c160e6219330147f344f/docs/images/feature4.png -------------------------------------------------------------------------------- /docs/images/home-pc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThangaBalajiS/OrganizeTabs/03809f87d913c8007526c160e6219330147f344f/docs/images/home-pc.png -------------------------------------------------------------------------------- /docs/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThangaBalajiS/OrganizeTabs/03809f87d913c8007526c160e6219330147f344f/docs/images/logo.png -------------------------------------------------------------------------------- /docs/images/pause.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /docs/images/qoute-chat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThangaBalajiS/OrganizeTabs/03809f87d913c8007526c160e6219330147f344f/docs/images/qoute-chat.png -------------------------------------------------------------------------------- /docs/images/tick.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/img/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThangaBalajiS/OrganizeTabs/03809f87d913c8007526c160e6219330147f344f/docs/img/1.png -------------------------------------------------------------------------------- /docs/img/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThangaBalajiS/OrganizeTabs/03809f87d913c8007526c160e6219330147f344f/docs/img/2.png -------------------------------------------------------------------------------- /docs/img/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThangaBalajiS/OrganizeTabs/03809f87d913c8007526c160e6219330147f344f/docs/img/3.png -------------------------------------------------------------------------------- /docs/img/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThangaBalajiS/OrganizeTabs/03809f87d913c8007526c160e6219330147f344f/docs/img/4.png -------------------------------------------------------------------------------- /docs/img/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThangaBalajiS/OrganizeTabs/03809f87d913c8007526c160e6219330147f344f/docs/img/5.png -------------------------------------------------------------------------------- /docs/img/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThangaBalajiS/OrganizeTabs/03809f87d913c8007526c160e6219330147f344f/docs/img/6.png -------------------------------------------------------------------------------- /docs/img/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThangaBalajiS/OrganizeTabs/03809f87d913c8007526c160e6219330147f344f/docs/img/7.png -------------------------------------------------------------------------------- /docs/img/tour/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThangaBalajiS/OrganizeTabs/03809f87d913c8007526c160e6219330147f344f/docs/img/tour/1.png -------------------------------------------------------------------------------- /docs/img/tour/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThangaBalajiS/OrganizeTabs/03809f87d913c8007526c160e6219330147f344f/docs/img/tour/2.png -------------------------------------------------------------------------------- /docs/img/tour/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThangaBalajiS/OrganizeTabs/03809f87d913c8007526c160e6219330147f344f/docs/img/tour/3.png -------------------------------------------------------------------------------- /docs/img/tour/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThangaBalajiS/OrganizeTabs/03809f87d913c8007526c160e6219330147f344f/docs/img/tour/4.png -------------------------------------------------------------------------------- /docs/img/tour/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThangaBalajiS/OrganizeTabs/03809f87d913c8007526c160e6219330147f344f/docs/img/tour/5.png -------------------------------------------------------------------------------- /docs/img/tour/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThangaBalajiS/OrganizeTabs/03809f87d913c8007526c160e6219330147f344f/docs/img/tour/6.png -------------------------------------------------------------------------------- /docs/img/tour/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThangaBalajiS/OrganizeTabs/03809f87d913c8007526c160e6219330147f344f/docs/img/tour/7.png -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Home | Tabs Manager 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |
18 |
Infinite Tabs Manager
19 |
For a productive browser experience
20 | Download Now 21 |
22 |
23 |
24 | 25 |
26 |
27 | 28 |
29 |
30 |
31 |
32 |
Reduce your memory usage upto 96%
33 |
Organizing all tabs into one will make your browser faster and smoother
34 |
35 |
36 |
37 | 38 |
39 |
40 |
41 |
42 | 43 |
44 |
45 |
46 |
Smart Grouping
47 |
Grouping nad organizing tabs has never been this easier
48 |
49 |
50 | Group tabs from the same site
51 |
52 | Group tabs of multiple site
53 |
54 | or Just dump all the tabs in a click
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
No pause to your favorite music
63 |
Tabs with music will keep playing
64 |
65 | or Just dump all the tabs in a click 66 |
67 |
68 |
69 |
70 | 71 |
72 |
73 |
74 |
75 | 76 |
77 |
78 |
79 |
Increase your Productivity
80 |
Our minimalistic dashboard helps you organize and save tabs for later use
81 | 82 |
83 |
84 |
85 |
86 |
87 |
88 |
From the creators of this extension...
89 |
Only two humans involved in the production process. No animals were harmed during making of this site 90 |
91 |
92 |
93 |
94 | 95 |
96 |
97 |
98 | 99 |
100 |

Take a tour

101 |
102 | 103 |
104 |
105 |
106 |
Supports chrome and firefox now
107 |
Download for a better tommorow
108 | Download Now 109 |
110 |
Contact us
111 |
Copyright @ Infinite Tabs Manager 2019
112 |
Privacy Policy
113 |
114 |
115 | 116 | 117 | 118 | 119 | -------------------------------------------------------------------------------- /docs/js/script.js: -------------------------------------------------------------------------------- 1 | if( !!window.chrome && !!window.chrome.webstore ){ 2 | 3 | document.getElementsByClassName( 'download-btn' )[0].href = "https://chrome.google.com/webstore/detail/infinite-tabs-manager/hjpahkeoabpccidknfdepajnfjncjiep" 4 | document.getElementsByClassName( 'download-btn' )[1].href = "https://chrome.google.com/webstore/detail/infinite-tabs-manager/hjpahkeoabpccidknfdepajnfjncjiep" 5 | 6 | 7 | 8 | }else if ( typeof InstallTrigger !== 'undefined' ){ 9 | 10 | document.getElementsByClassName( 'download-btn' )[0].href = "https://addons.mozilla.org/en-US/firefox/addon/itabs-manager/" 11 | document.getElementsByClassName( 'download-btn' )[1].href = "https://addons.mozilla.org/en-US/firefox/addon/itabs-manager/" 12 | 13 | }else{ 14 | 15 | document.getElementsByClassName( 'download-btn' )[0].addEventListener('click',function(){ 16 | alert( "Sorry! This extension is not compatible with your browser yet" ); 17 | this.target = ""; 18 | }); document.getElementsByClassName( 'download-btn' )[1].addEventListener('click',function(){ 19 | alert( "Sorry! This extension is not compatible with your browser yet" ); 20 | this.target = ""; 21 | }); 22 | } -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Infinite Tabs Manager", 3 | "version": "0.1.7", 4 | "description": "Makes your Chrome faster and efficient", 5 | "permissions": ["tabs","activeTab","storage"], 6 | "background": { 7 | "scripts": ["background.js"], 8 | "persistent": false 9 | }, 10 | "browser_action": { 11 | "default_popup": "popup.html" 12 | }, 13 | "icons": { 14 | "16": "assets/icon24.png", 15 | "32": "assets/icon32.png", 16 | "48": "assets/icon48.png", 17 | "128": "assets/icon128.png" 18 | }, 19 | "manifest_version": 2 20 | 21 | } 22 | -------------------------------------------------------------------------------- /popup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 13 |
Open Dashboard
14 | 15 | 16 | -------------------------------------------------------------------------------- /scripts/dashboard.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | var url = new URL(window.location.href); 3 | var div_target = document.getElementById('target_div'); 4 | var categories = document.getElementsByClassName('categories-item'); 5 | var closeIcon = ''; 6 | var nothingFound = '
No Tabs Found
Group tabs in the popup to make them appear here!
'; 7 | 8 | renderTabs(); 9 | function renderTabs(searchString) { 10 | var siteName = localStorage.selectedCategory || 'all'; 11 | 12 | if (localStorage.hasOwnProperty(siteName)) { 13 | if (siteName === 'all') { 14 | div_target.innerHTML = ''; 15 | var tempDOMString = ''; 16 | var tabsFromSite = JSON.parse(localStorage[siteName]); 17 | 18 | if (tabsFromSite.length) { 19 | 20 | for (count in tabsFromSite) { 21 | var tab = tabsFromSite[count]; 22 | var renderCondition = searchString ? tab.title.toLowerCase().includes(searchString.toLowerCase()) || tab.url.toLowerCase().includes(searchString.toLowerCase()) : true; 23 | if(renderCondition){ 24 | tempDOMString += '
'+closeIcon+'
' + tab.title + '
' 25 | } 26 | } 27 | div_target.innerHTML += '
' + tempDOMString + '
'; 28 | } else { 29 | div_target.innerHTML = nothingFound; 30 | } 31 | } else if (siteName === 'similar') { 32 | var sites = JSON.parse(localStorage[siteName]); 33 | var sitesArray = Object.keys(sites); 34 | div_target.innerHTML = ''; 35 | if( sitesArray.length ){ 36 | for (var count in sitesArray) { 37 | var site = sitesArray[count]; 38 | var renderCondition = searchString ? site.toLowerCase().includes(searchString.toLowerCase()) : true; 39 | 40 | if (sites[site].length && renderCondition ) { 41 | div_target.innerHTML += '
'+closeIcon+'
' + sites[site].length + '
'+site+'
'; 42 | } else if(!sites[site].length) { 43 | removeSite(site); 44 | } 45 | } 46 | div_target.innerHTML += '
'; 47 | }else{ 48 | div_target.innerHTML += nothingFound; 49 | } 50 | } 51 | 52 | } else { 53 | div_target.innerHTML = nothingFound; 54 | } 55 | addListenersToAll(); 56 | (function updateCount(){ 57 | var siteCount = document.getElementById('site-count'); 58 | if( localStorage.similar ){ 59 | 60 | var tabsFromSite = JSON.parse(localStorage.similar); 61 | if(Object.keys(tabsFromSite).length){ 62 | siteCount.innerText = Object.keys(tabsFromSite).length; 63 | !siteCount.classList.contains('count-class') && siteCount.classList.add('count-class'); 64 | }else{ 65 | siteCount.innerText = ''; 66 | siteCount.classList.contains('count-class') && siteCount.classList.remove('count-class'); 67 | } 68 | }else{ 69 | siteCount.innerText = ''; 70 | siteCount.classList.contains('count-class') && siteCount.classList.remove('count-class'); 71 | } 72 | 73 | var allCount = document.getElementById('all-count'); 74 | if( localStorage.all ){ 75 | var tabsFromAll = JSON.parse(localStorage.all); 76 | if(tabsFromAll.length){ 77 | allCount.innerHTML = tabsFromAll.length; 78 | !allCount.classList.contains('count-class') && allCount.classList.add('count-class'); 79 | }else{ 80 | allCount.innerHTML = ''; 81 | allCount.classList.contains('count-class') && allCount.classList.remove('count-class'); 82 | } 83 | }else{ 84 | allCount.innerHTML = ''; 85 | allCount.classList.contains('count-class') && allCount.classList.remove('count-class'); 86 | } 87 | }()); 88 | } 89 | 90 | function addListenersToAll() { 91 | setTimeout(function () { 92 | var siteName = localStorage.selectedCategory || 'all'; 93 | var closeIcons = document.getElementsByClassName('icon-card-close'); 94 | for (var i = 0; i < closeIcons.length; i++) { 95 | closeIcons[i].addEventListener('click', ItemClose); 96 | } 97 | 98 | var sites = document.getElementsByClassName('site-card'); 99 | for (var j = 0; j < sites.length; j++) { 100 | var tempSiteName = sites[j].getAttribute('data-site'); 101 | sites[j].addEventListener('click', similarItemClick.bind(this,tempSiteName)); 102 | } 103 | 104 | 105 | for (var count = 0; count < categories.length; count++) { 106 | if (categories[count].getAttribute('data-category') === (localStorage.selectedCategory || 'all')) { 107 | categories[count].style.background = '#EFF7FF'; 108 | categories[count].style.color = '#3b99fc'; 109 | } else { 110 | categories[count].style.background = 'unset'; 111 | categories[count].style.color = '#000000'; 112 | } 113 | } 114 | 115 | var pagesInModal = document.getElementsByClassName('modal-item-remove'); 116 | for (var k = 0; k < pagesInModal.length; k++) { 117 | pagesInModal[k].addEventListener('click', removeThisPageFromSite); 118 | } 119 | 120 | var siteRemoveButtons = document.getElementsByClassName('remove-site'); 121 | for(var l = 0;l < siteRemoveButtons.length; l++){ 122 | siteRemoveButtons[l].addEventListener('click',function(e){ 123 | removeSite(this.getAttribute('data-site')); 124 | e.stopPropagation(); 125 | renderTabs(); 126 | }); 127 | } 128 | 129 | 130 | 131 | }, 0); 132 | } 133 | 134 | 135 | function similarItemClick(passedSite) { 136 | var selectedSiteName = passedSite, 137 | selectedSites = JSON.parse(localStorage.similar)[selectedSiteName] || [], 138 | modal = document.getElementById('dashboard-site-modal'), 139 | overlay = document.getElementById('dashboard-overlay'); 140 | 141 | overlay.classList.add('show'); 142 | modal.classList.add('show'); 143 | 144 | overlay.addEventListener('click', function () { 145 | overlay.classList.remove('show'); 146 | modal.classList.remove('show'); 147 | overlay.removeEventListener('click', function () { }); 148 | renderTabs(); 149 | }); 150 | 151 | var tempContent = selectedSites.map(function (site) { 152 | return '
' + site.title + '
'+closeIcon+'
' 153 | }); 154 | modal.innerHTML = ''; 155 | modal.innerHTML += '
' + selectedSiteName + '
open all
'; 156 | modal.innerHTML += '
' + tempContent.join("") + '
'; 157 | var openAllInSite = document.getElementById('open-all-of-this-site'); 158 | openAllInSite.addEventListener('click',function(){ 159 | var targetSite = this.getAttribute('data-site-name'); 160 | var pagesInSite = JSON.parse(localStorage.similar)[targetSite]; 161 | openTheseTabs(pagesInSite); 162 | }); 163 | addListenersToAll(); 164 | } 165 | 166 | //removes an item from category-all 167 | function ItemClose() { 168 | var tabId = this.getAttribute("data-tab-id"); 169 | var tabsFromSite = JSON.parse(localStorage.all); 170 | if (tabsFromSite.length) { 171 | var newList = tabsFromSite.filter(function (item) { 172 | return item.id !== Number(tabId); 173 | }); 174 | localStorage.all = JSON.stringify(newList); 175 | renderTabs(); 176 | 177 | } 178 | 179 | } 180 | 181 | //removes a site from group of sites in category-similar tabs 182 | function removeThisPageFromSite() { 183 | var tabId = this.getAttribute("data-item"); 184 | var siteOfPage = this.getAttribute("data-site"); 185 | var tabsFromSite = JSON.parse(localStorage.similar)[siteOfPage]; 186 | 187 | var newList = tabsFromSite.filter(function (item) { 188 | return item.id !== Number(tabId); 189 | }); 190 | localStorage.similar = JSON.stringify(extend({}, JSON.parse(localStorage.similar), { [siteOfPage]: newList })); 191 | if( !newList.length ){ 192 | renderTabs(); 193 | }else{ 194 | similarItemClick(siteOfPage); 195 | } 196 | } 197 | 198 | (function () { 199 | for (var count = 0; count < categories.length; count++) { 200 | categories[count].addEventListener('click', function () { 201 | localStorage.setItem('selectedCategory', this.getAttribute('data-category')); 202 | this.style.background = '#EFF7FF'; 203 | renderTabs(); 204 | }); 205 | } 206 | 207 | var searchBar = document.getElementById('search-bar'); 208 | searchBar.addEventListener('keyup',function(e){ 209 | renderTabs(e.target.value); 210 | }); 211 | 212 | var allOpener = document.getElementById('open-all-tabs'); 213 | allOpener.addEventListener('click', function () { 214 | var tempCategory = localStorage.selectedCategory || 'all'; 215 | var parsedTabs = JSON.parse(localStorage[tempCategory]); 216 | if (tempCategory === 'all') { 217 | openTheseTabs(parsedTabs); 218 | } else if (tempCategory === 'similar') { 219 | var tempItemArray = Object.keys( parsedTabs ); 220 | tempItemArray.map(function(item){ 221 | openTheseTabs(parsedTabs[item]); 222 | }); 223 | } 224 | }); 225 | 226 | var removeAll = document.getElementById('remove-all-tabs'); 227 | removeAll.addEventListener('click',function(){ 228 | if(confirm("Are you sure? Want to remove everything?")){ 229 | var tempCategory = localStorage.selectedCategory || 'all' ; 230 | var parsedTabs = JSON.parse(localStorage[tempCategory]); 231 | if (tempCategory === 'all') { 232 | localStorage.setItem(tempCategory,JSON.stringify([])); 233 | } else if (tempCategory === 'similar') { 234 | localStorage.setItem(tempCategory,JSON.stringify({})); 235 | } 236 | renderTabs(); 237 | } 238 | }); 239 | 240 | 241 | 242 | }()); 243 | 244 | }()); 245 | 246 | function openTheseTabs(tabs){ 247 | tabs.map(function (tab) { 248 | chrome.tabs.create({ index: 1, url: tab.url }); 249 | }); 250 | } 251 | 252 | function removeSite(site){ 253 | var tempSites = JSON.parse(localStorage.similar); 254 | delete tempSites[site]; 255 | localStorage.setItem('similar',JSON.stringify(tempSites)); 256 | } 257 | 258 | function extend() { 259 | for (var i = 1; i < arguments.length; i++) 260 | for (var key in arguments[i]) 261 | if (arguments[i].hasOwnProperty(key)) 262 | arguments[0][key] = arguments[i][key]; 263 | return arguments[0]; 264 | } 265 | 266 | (function(){ 267 | if( localStorage.selectedCategory ){ 268 | 269 | document.getElementById('corousel-wrap-wrap').style.display = 'none'; 270 | }else{ 271 | 272 | document.getElementById('corousel-wrap-wrap').style.display = 'block'; 273 | } 274 | var slideIndex = 1; 275 | showDivs(slideIndex); 276 | 277 | function plusDivs(n) { 278 | showDivs(slideIndex += n); 279 | } 280 | 281 | document.getElementById('btn-l').addEventListener('click',function(e){e.stopPropagation(); plusDivs(-1)}); 282 | document.getElementById('btn-r').addEventListener('click',function(e){ e.stopPropagation();plusDivs(1)}); 283 | 284 | function showDivs(n) { 285 | var i; 286 | var x = document.getElementsByClassName("mySlides"); 287 | if (n > x.length) {slideIndex = 1} 288 | if (n < 1) {slideIndex = x.length} 289 | for (i = 0; i < x.length; i++) { 290 | x[i].style.display = "none"; 291 | } 292 | x[slideIndex-1].style.display = "block"; 293 | } 294 | 295 | document.getElementById('take-a-tour').addEventListener('click',function(){ 296 | document.getElementById('corousel-wrap-wrap').style.display = 'block'; 297 | }); 298 | 299 | document.getElementById('corousel-wrap-wrap').addEventListener('click',function(){ 300 | this.style.display = 'none'; 301 | }); 302 | 303 | 304 | }()); -------------------------------------------------------------------------------- /scripts/popup.js: -------------------------------------------------------------------------------- 1 | var extBaseUrl = 'chrome-extension://' + chrome.runtime.id + '/'; 2 | var reDirUrl = 'templates/dashboard.html'; 3 | var siteExists = { flag: false, id: 0 }; 4 | 5 | document.body.style.background = '#fff'; 6 | 7 | chrome.tabs.getAllInWindow(null, function (tabs) { 8 | var itemArray = []; 9 | for (tab in tabs) { 10 | var tabDomain = getDomainFromUrl(tabs[tab].url), 11 | tabUrl = tabs[tab].url, 12 | tabTitle = tabs[tab].title, 13 | tabFavIconUrl = tabs[tab].favIconUrl; 14 | tabDomain = tabDomain.replace("www.", ''); 15 | 16 | 17 | if (tabDomain && itemArray.indexOf(tabDomain) === -1) { 18 | document.getElementById('domain-list').innerHTML += '
' + tabDomain + '
'; 19 | itemArray.push(tabDomain); 20 | } 21 | } 22 | }); 23 | 24 | setTimeout(function () { 25 | var items = document.getElementsByClassName('site-list-item'); 26 | for (var i = 0; i < items.length; i++) { 27 | items[i].addEventListener('click', function () { 28 | var siteName = this.getAttribute('data-domain'); 29 | chrome.tabs.getAllInWindow(null, function (tabs) { 30 | var tabsListForLocalStorage = []; 31 | for (count in tabs) { 32 | var tab = tabs[count]; 33 | var domain = getDomainFromUrl(tab.url); 34 | domain = domain.replace("www.", ''); 35 | var condition = false; 36 | if (siteName === 'all') { 37 | condition = true; 38 | } else if (siteName === 'selected') { 39 | condition = tab.highlighted; 40 | } else { 41 | condition = domain === siteName; 42 | } 43 | 44 | if (domain && condition && tab.audible !== true) { 45 | 46 | 47 | var tempTabDetailObject = { 48 | id: tab.id, 49 | title: tab.title, 50 | url: tab.url, 51 | favIcon: tab.favIconUrl, 52 | }; 53 | tabsListForLocalStorage.push(tempTabDetailObject); 54 | 55 | 56 | } else { 57 | if (tab.url === extBaseUrl + reDirUrl) { 58 | siteExists = { flag: true, id: tab.id }; 59 | } 60 | 61 | } 62 | 63 | } 64 | 65 | 66 | 67 | if (siteName === 'selected') { 68 | siteName = 'all'; 69 | } 70 | 71 | if (localStorage.hasOwnProperty(siteName) || siteName !== 'all' ) { 72 | if (!localStorage.hasOwnProperty('similar')) { 73 | localStorage.similar = JSON.stringify({}); 74 | } 75 | var oldDataOfSite =''; 76 | if( siteName === 'all' ){ 77 | oldDataOfSite = JSON.parse(localStorage[siteName]); 78 | } 79 | if (siteName !== 'all') { 80 | if( tabsListForLocalStorage.length ){ 81 | 82 | var tempVals = [], 83 | tempSimilar = JSON.parse(localStorage.similar); 84 | if (tempSimilar.hasOwnProperty(siteName) ){ 85 | tempVals = tempSimilar[siteName]; 86 | } 87 | 88 | 89 | oldDataOfSite = extend({},tempSimilar,{[siteName]:tempVals.concat(tabsListForLocalStorage)}); 90 | siteName = 'similar'; 91 | } 92 | } else { 93 | 94 | if (tabsListForLocalStorage.length) { 95 | oldDataOfSite = oldDataOfSite.concat(tabsListForLocalStorage); 96 | } 97 | } 98 | var newDataOfSite = JSON.stringify(oldDataOfSite); 99 | localStorage.setItem(siteName, newDataOfSite); 100 | 101 | } else { 102 | 103 | localStorage.setItem(siteName, JSON.stringify(tabsListForLocalStorage)); 104 | } 105 | 106 | 107 | if (siteExists.flag) { 108 | chrome.tabs.reload(siteExists.id); 109 | } else { 110 | chrome.tabs.create({ index: 0, url: reDirUrl }); 111 | } 112 | 113 | tabsListForLocalStorage.map(function (tabb) { 114 | chrome.tabs.remove(tabb.id); 115 | }); 116 | }); 117 | 118 | 119 | }, false); 120 | } 121 | 122 | document.getElementById('open-dashboard').addEventListener('click',function(){ 123 | chrome.tabs.getAllInWindow(null,function(tabs){ 124 | var hasDashboardOpened = false; 125 | for( tab in tabs){ 126 | if( tabs[tab].url === extBaseUrl + reDirUrl ){ 127 | hasDashboardOpened = true; 128 | chrome.tabs.update(tabs[tab].id,{selected:true}); 129 | } 130 | 131 | 132 | } 133 | if( !hasDashboardOpened ){ 134 | chrome.tabs.create({ index: 0, url: reDirUrl }); 135 | } 136 | }); 137 | }); 138 | }, 0); 139 | 140 | 141 | function getDomainFromUrl(url) { 142 | var splitedUrl = url.split('/'); 143 | if (splitedUrl[0] !== 'chrome-extension:' && splitedUrl[0] !== 'chrome:') { 144 | return url.split('/')[2] || ''; 145 | } else { 146 | return ''; 147 | } 148 | 149 | } 150 | function extend() { 151 | for (var i = 1; i < arguments.length; i++) 152 | for (var key in arguments[i]) 153 | if (arguments[i].hasOwnProperty(key)) 154 | arguments[0][key] = arguments[i][key]; 155 | return arguments[0]; 156 | } -------------------------------------------------------------------------------- /templates/dashboard.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Dashboard - Tabs Manager 5 | 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 | 15 |
16 |
Tabs Manager
17 |
18 |
19 |
Varied 20 |
21 |
22 |
Similar 23 |
24 |
25 |
26 | 27 |
28 | 29 |
30 |
Take a tour
31 |
32 |
33 | Leave a feedback 34 |
35 |
36 |
37 |
38 |
39 | 40 | 41 |
42 |
43 |
44 | Open These Tabs 45 |
46 |
|
47 |
48 | Remove These Tabs 49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 |
68 |
69 |
70 | 71 | 72 | 73 | --------------------------------------------------------------------------------