├── .github
    └── FUNDING.yml
├── .vscode
    └── settings.json
├── Contributing.md
├── LICENSE
├── README.md
└── tabtrum
    ├── images
        └── miroodle.png
    ├── manifest.json
    ├── popup.html
    ├── popup.js
    ├── styles.css
    ├── tabtrum_128.png
    ├── tabtrum_16.png
    ├── tabtrum_32.png
    └── tabtrum_48.png


/.github/FUNDING.yml:
--------------------------------------------------------------------------------
 1 | # These are supported funding model platforms
 2 | 
 3 | github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
 4 | patreon: # Replace with a single Patreon username
 5 | open_collective: # Replace with a single Open Collective username
 6 | ko_fi: # Replace with a single Ko-fi username
 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
 9 | liberapay: # Replace with a single Liberapay username
10 | issuehunt: # Replace with a single IssueHunt username
11 | otechie: # Replace with a single Otechie username
12 | custom: ['https://paypal.me/ShuvamManna']
13 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "editor.formatOnSave": true,
3 |     "formattingToggle.affects": [
4 |         "formatOnPaste",
5 |         "formatOnSave",
6 |         "formatOnType"
7 |     ]
8 | }


--------------------------------------------------------------------------------
/Contributing.md:
--------------------------------------------------------------------------------
 1 | # Contributing to TabTrum
 2 | 
 3 | *First*: if you're unsure or afraid of anything, just ask or submit the issue or
 4 | pull request anyway. You won't be yelled at for giving your best effort. The
 5 | worst that can happen is that you'll be politely asked to change something. We
 6 | appreciate any sort of contributions, and don't want a wall of rules to get in
 7 | the way of that.
 8 | 
 9 | However, for those individuals who want a bit more guidance on the best way to
10 | contribute to the project, read on. This document will cover what we're looking
11 | for. By addressing all the points we're looking for, it raises the chances we
12 | can quickly merge or address your contributions.
13 | 
14 | ## Issues
15 | 
16 | ### Reporting an Issue
17 | 
18 | - Make sure you test against the latest released version. It is possible we
19 |   already fixed the bug you're experiencing.
20 | 
21 | - Provide steps to reproduce the issue.
22 | 
23 | - Please include logs, if relevant.
24 | 
25 | ## Common guidelines
26 | 
27 | - Please make sure there is an issue associated with the work that you're doing.
28 | 
29 | - If you're working on an issue, please comment that you are doing so to prevent
30 |   duplicate work by others also.
31 | 
32 | - Squash your commits and refer to the issue using `fix #<issue-no>` or `close
33 |   #<issue-no>` in the commit message, at the end.
34 |   For example: `resolve answers to everything (fix #42)` or `resolve answers to everything, fix #42`
35 | 
36 | - Rebase master with your branch before submitting pull request.
37 | 
38 | 
39 | ## Testing
40 | 
41 | - Please make sure that your code is linted as per the rules in the project. 
42 | - Please don't make untested PRs.
43 | 
44 | ## Commit messages
45 | 
46 |  - The first line should be a summary of the changes - not execeeding 50
47 |    characters. Followed by an optional body which has more details about the
48 |    changes. (https://github.com/erlang/otp/wiki/writing-good-commit-messages)
49 | 
50 |  - Use the imperative present tense: "add/fix/change", not "added/fixed/changed" nor "adds/fixes/changes".
51 | 
52 |  - Don't capitalize the first letter of the summary line.
53 | 
54 |  - Do not add a period/dot (.) at the end in the summary line.
55 | 
56 | 
57 | (Credits: Some sections are adapted from https://github.com/PostgREST/postgrest/blob/master/.github/CONTRIBUTING.md)
58 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Shuvam Manna
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # TabTrum
 2 | TabTrum is a Browser Extension (Currently available for Chrome) to take a snapshot of the open tabs, and open them all again in one single click when you come back and re-open your browser.
 3 | #  
 4 | ![Frame 4](https://user-images.githubusercontent.com/15321738/100718196-0cc7a200-33e1-11eb-91a0-6fc1109bb5d2.PNG)
 5 | 
 6 | <a href="https://www.producthunt.com/posts/tabtrum?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-tabtrum" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=275885&theme=dark" alt="TabTrum - Save & launch your browser tab combinations in a blink | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
 7 | 
 8 | ## Contributing
 9 | To contribute, please find the guidelines here - <a href='https://github.com/GeekBoySupreme/TabTrum/blob/master/Contributing.md'>Contributing Guidelines</a>
10 | 
11 | ## Beta
12 | The Beta is now available via the release channel - <a href='https://bit.ly/tabtrumbeta'>bit.ly/tabtrumbeta</a>.<br/>
13 | If you want to play around with the actual Release, find it here on the Chrome Web Store - <a href='https://bit.ly/tabtrum'>bit.ly/tabtrum</a>
14 | 
15 | ## License
16 | The Extension is made under the purview of the <a href='https://choosealicense.com/licenses/mit/'>MIT License</a>. You are welcome to fork and make changes to TabTrum but do attribute 
17 | credits to the original authors.
18 | 
19 | ##  
20 | Feel free to reach out to me through email at shuvam.manna@gmail.com or on Twitter if you have any questions or feedback! Hope you find this useful 🍩
21 | 


--------------------------------------------------------------------------------
/tabtrum/images/miroodle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekBoySupreme/TabTrum/9d1a232931dbf68d69ef45ad33d4afbc758fc8c8/tabtrum/images/miroodle.png


--------------------------------------------------------------------------------
/tabtrum/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "manifest_version": 2,
 3 |   "name": "TabTrum",
 4 |   "version": "1.1.1",
 5 |   "description": "Save & Launch your Browser Tab Combinations in a blink.",
 6 |   "permissions": [
 7 |     "tabs",
 8 |     "storage",
 9 |     "<all_urls>"
10 |   ],
11 |   "browser_action": {
12 |     "default_popup": "popup.html",
13 |     "default_icon": {
14 |       "128": "tabtrum_128.png"
15 |     },
16 |     "icons": {
17 |       "16": "tabtrum_16.png",
18 |       "32": "tabtrum_32.png",
19 |       "48": "tabtrum_48.png",
20 |       "128": "tabtrum_128.png"
21 |     }
22 |   }
23 | }


--------------------------------------------------------------------------------
/tabtrum/popup.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <link href="styles.css" type="text/css" rel="stylesheet" />
 4 |     <meta charset='UTF-8' />
 5 |     <link
 6 |       href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap"
 7 |       rel="stylesheet"
 8 |     />
 9 |   </head>
10 |   <body>
11 |     <div class="header">
12 |       <span class="header_text">TabTrum ⚔️</span>
13 |       <span class="header_logo"><img src="tabtrum_128.png" /></span>
14 |     </div>
15 | 
16 |     <div class="snapshot_list" id="snapshot_list"></div>
17 | 
18 |     <div class="snapshot_profile_edit" id="snapshot_profile_edit"></div>
19 | 
20 |     <div class="footer" id="footer">
21 |       <button id="snapshot_button" class="snapshot_button">
22 |         Take Snapshot ⚡
23 |       </button>
24 |     </div>
25 | 
26 |     <script type="text/javascript" src="popup.js"></script>
27 |   </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/tabtrum/popup.js:
--------------------------------------------------------------------------------
  1 | //Comparer Function
  2 | function GetSortOrder(prop) {
  3 |   return function (a, b) {
  4 |     if (a[prop] > b[prop]) {
  5 |       return 1;
  6 |     } else if (a[prop] < b[prop]) {
  7 |       return -1;
  8 |     }
  9 |     return 0;
 10 |   };
 11 | }
 12 | 
 13 | document.addEventListener(
 14 |   "click",
 15 |   function (event) {
 16 |     if (event.target.id == "snapshot_button") return;
 17 | 
 18 |     var snapshot_index = event.target.id.split("_")[3];
 19 |     var action = event.target.id.split("_")[1];
 20 | 
 21 |     if (action == "delete") clickDelete(snapshot_index);
 22 |     else if (action == "launch") clickLaunch(snapshot_index);
 23 |     else if (action == "edit") clickEdit(snapshot_index);
 24 |     else if (action == "back") getBackHome();
 25 |     else if (action == "tabedit")
 26 |       update_snapshot_name(event.target.id, snapshot_index);
 27 |     else return;
 28 |   },
 29 |   false
 30 | );
 31 | 
 32 | var button = document.getElementById("snapshot_button");
 33 | button.onclick = function () {
 34 |   try {
 35 |     chrome.storage.local.get(["data"], function (items) {
 36 |       var tab_data = items.data;
 37 | 
 38 |       if (tab_data) {
 39 |         chrome.tabs.query(
 40 |           { windowId: chrome.windows.WINDOW_ID_CURRENT },
 41 |           (tabs) => {
 42 |             var new_snapshot = {
 43 |               title: getaname(tab_data.length),
 44 |               id: "id_" + tab_data.length,
 45 |               tablist: tabs,
 46 |             };
 47 | 
 48 |             tab_data.push(new_snapshot);
 49 |             setData(tab_data);
 50 |             update_panel(new_snapshot);
 51 |           }
 52 |         );
 53 |       } else {
 54 |         var init_data = [];
 55 |         chrome.tabs.query(
 56 |           { windowId: chrome.windows.WINDOW_ID_CURRENT },
 57 |           (tabs) => {
 58 |             var new_snapshot = {
 59 |               title: getaname(init_data.length),
 60 |               id: "id_" + init_data.length,
 61 |               tablist: tabs,
 62 |             };
 63 | 
 64 |             init_data.push(new_snapshot);
 65 |             setData(init_data);
 66 |             update_panel(new_snapshot);
 67 |           }
 68 |         );
 69 |       }
 70 |     });
 71 |   } catch (e) {
 72 |     var init_data = [];
 73 |     chrome.tabs.query(
 74 |       { windowId: chrome.windows.WINDOW_ID_CURRENT },
 75 |       (tabs) => {
 76 |         var new_snapshot = {
 77 |           title: getaname(init_data.length),
 78 |           id: "id_" + init_data.length,
 79 |           tablist: tabs,
 80 |         };
 81 | 
 82 |         init_data.push(new_snapshot);
 83 |         setData(init_data);
 84 |         update_panel(new_snapshot);
 85 |       }
 86 |     );
 87 |   }
 88 | };
 89 | 
 90 | function loadData() {
 91 |   var render_home = "";
 92 | 
 93 |   try {
 94 |     chrome.storage.local.get(["data"], function (items) {
 95 |       var render_data = items.data;
 96 | 
 97 |       if (render_data) {
 98 |         for (var i = 0; i < render_data.length; i++) {
 99 |           render_home +=
100 |             '<div class="snapshot_tab snapshot_tab_style_' +
101 |             render_data[i].id +
102 |             '" id="snapshot_tab_' +
103 |             render_data[i].id +
104 |             '"> \
105 |                             <div class="snapshot_tab_container">\
106 |                             <h5 class="snapshot_title"><span class="snapshot_marker snapshot_marker_' +
107 |             render_data[i].id +
108 |             '"></span>' +
109 |             render_data[i].title +
110 |             '</h5> \
111 |                             <button class="snapshot_delete" id="snapshot_delete_' +
112 |             render_data[i].id +
113 |             '">+</button> \
114 |                             <button class="snapshot_launch" id="snapshot_launch_' +
115 |             render_data[i].id +
116 |             '">Launch Tabs</button> \
117 |                             <button class="snapshot_edit" id="snapshot_edit_' +
118 |             render_data[i].id +
119 |             '">Edit</button> \
120 |                             </div></div>';
121 |         }
122 | 
123 |         if (render_data.length == 0) {
124 |           render_home =
125 |             '<img id="image_holder" class="img-fluid" src="./images/miroodle.png"/> \
126 |             <span class="placeholder_text"><b>Take your first Snapshot</b><br/>To save a list of all your open tabs</span>';
127 | 
128 |           document.getElementById("snapshot_list").innerHTML = render_home;
129 |         } else {
130 |           document.getElementById("snapshot_list").innerHTML = render_home;
131 |         }
132 |       } else {
133 |         var data_initialize = [];
134 |         setData(data_initialize);
135 |       }
136 |     });
137 |   } catch (e) {
138 |     console.log("Error : " + e);
139 | 
140 |     var data_initialize = [];
141 |     setData(data_initialize);
142 |   }
143 | }
144 | 
145 | function setData(data_update) {
146 |   chrome.storage.local.set({ data: data_update }, function () {
147 |     console.log("Settings saved");
148 |   });
149 | }
150 | 
151 | function update_panel(data_snapshot) {
152 |   var render_update = "";
153 |   render_update =
154 |     '<div class="snapshot_tab snapshot_tab_swoop_in" id="snapshot_tab_update_' +
155 |     tracker +
156 |     '"> \
157 |                        <div class="snapshot_tab_container">\
158 |                        <h5 class="snapshot_title">' +
159 |     data_snapshot.title +
160 |     '</h5> \
161 |                        <button class="snapshot_delete" id="snapshot_delete_' +
162 |     data_snapshot.id +
163 |     '">+</button> \
164 |                        <button class="snapshot_launch" id="snapshot_launch_' +
165 |     data_snapshot.id +
166 |     '">Launch Tabs</button> \
167 |                        <button class="snapshot_edit" id="snapshot_edit_' +
168 |     data_snapshot.id +
169 |     '">Edit</button> \
170 |                        </div></div>';
171 | 
172 |   chrome.storage.local.get(["data"], function (items) {
173 |     var render_data = items.data;
174 |     if (render_data.length > 1) {
175 |       document.getElementById("snapshot_list").innerHTML += render_update;
176 |       stripAnimation();
177 |     } else {
178 |       document.getElementById("snapshot_list").innerHTML = render_update;
179 |       stripAnimation();
180 |     }
181 |   });
182 | }
183 | 
184 | function stripAnimation() {
185 |   try {
186 |     setTimeout(function () {
187 |       document.getElementById(
188 |         "snapshot_tab_update_" + tracker
189 |       ).className = document
190 |         .getElementById("snapshot_tab_update_" + tracker)
191 |         .className.replace(" snapshot_tab_swoop_in", "");
192 |       tracker++;
193 |     }, 101);
194 |   } catch (e) {
195 |     setTimeout(function () {
196 |       document.getElementById(
197 |         "snapshot_tab_update_" + tracker
198 |       ).className = document
199 |         .getElementById("snapshot_tab_update_" + tracker)
200 |         .className.replace(" snapshot_tab_swoop_in", "");
201 |       tracker++;
202 |     }, 11);
203 |   }
204 | }
205 | 
206 | function launchHelper(index) {
207 |   chrome.storage.local.get(["data"], function (items) {
208 |     tabs_to_launch = items.data[index].tablist;
209 |     for (var i = 0; i < tabs_to_launch.length; i++) {
210 |       var { pinned, url } = tabs_to_launch[i];
211 |       chrome.tabs.create({ pinned, url });
212 |     }
213 |   });
214 | }
215 | 
216 | function clickLaunch(snapshot_index) {
217 |   var index = snapshot_index;
218 |   try {
219 |     launchHelper(index);
220 |   } catch (e) {
221 |     launchHelper(index);
222 |   }
223 | }
224 | 
225 | function clickDelete(snapshot_delete) {
226 |   chrome.storage.local.get(["data"], function (items) {
227 |     var index = snapshot_delete;
228 | 
229 |     if ((items.data[index].id = index)) items.data.splice(index, 1);
230 | 
231 |     for (var i = 0; i < items.data.length; i++) items.data[i].id = "id_" + i;
232 | 
233 |     setData(items.data);
234 |     loadData();
235 |   });
236 | }
237 | 
238 | function clickEdit(snapshot_edit) {
239 |   chrome.storage.local.get(["data"], function (items) {
240 |     var index = snapshot_edit;
241 | 
242 |     tabs_to_expand = items.data[index];
243 | 
244 |     document.getElementById("snapshot_list").style.display = "none";
245 |     document.getElementById("footer").style.display = "none";
246 |     document.getElementById("snapshot_profile_edit").style.display = "block";
247 | 
248 |     var input_field = document.createElement("input");
249 |     input_field.setAttribute("class", "tab_edit_title");
250 |     input_field.setAttribute("id", "tablist_tabedit_id_" + index);
251 |     input_field.setAttribute("value", tabs_to_expand.title);
252 | 
253 |     // input_field.addEventListener("input", function () {
254 |     //   var new_items = items;
255 |     //   console.log(items.data[index]);
256 |     //   new_items.data[index].title = input_field.value;
257 | 
258 |     //   setData(new_items.data);
259 |     //   loadData();
260 |     // });
261 | 
262 |     var para = document.createElement("p");
263 |     var text = document.createTextNode("☑️  changes are saved automatically.");
264 |     para.appendChild(text);
265 | 
266 |     var tabs_list_show = items.data[index].tablist;
267 |     var tablistshowhtml = '<div class="tablist_holder">';
268 | 
269 |     for (var q = 0; q < tabs_list_show.length; q++) {
270 |       tablistshowhtml +=
271 |         '<div class="tablist_tab_show"> \
272 |         <a target="_blank" href="' +
273 |         tabs_list_show[q].url +
274 |         '"> \
275 |         <img class="favicon_image" src="' +
276 |         tabs_list_show[q].favIconUrl +
277 |         '"/> \
278 |         <span class="tab_title">' +
279 |         tabs_list_show[q].title.substring(0, 30) +
280 |         "..</span> \
281 |         </a> \
282 |       \
283 |         </div > ";
284 |     }
285 | 
286 |     tablistshowhtml += "</div>";
287 | 
288 |     var back_button = document.createElement("button");
289 |     back_button.setAttribute("class", "snapshot_edit name_edit");
290 |     back_button.setAttribute("id", "snapshot_back_10");
291 |     var text = document.createTextNode("back 😶");
292 |     back_button.appendChild(text);
293 | 
294 |     var launch_button = document.createElement("button");
295 |     launch_button.setAttribute(
296 |       "class",
297 |       "snapshot_launch launch_from_edit_page"
298 |     );
299 |     launch_button.setAttribute("id", "snapshot_launch_id_" + index);
300 |     text = document.createTextNode("Launch Tabs 🤠");
301 |     launch_button.appendChild(text);
302 | 
303 |     // back_button.onclick = function () {
304 |     //   document.getElementById("snapshot_profile_edit").innerHTML = "";
305 |     //   document.getElementById("snapshot_profile_edit").style.display = "none";
306 |     //   document.getElementById("snapshot_list").style.display = "block";
307 |     //   document.getElementById("footer").style.display = "block";
308 |     // };
309 | 
310 |     document.getElementById("snapshot_profile_edit").appendChild(back_button);
311 |     document.getElementById("snapshot_profile_edit").appendChild(launch_button);
312 |     document.getElementById("snapshot_profile_edit").appendChild(input_field);
313 |     document.getElementById("snapshot_profile_edit").appendChild(para);
314 |     document.getElementById(
315 |       "snapshot_profile_edit"
316 |     ).innerHTML += tablistshowhtml;
317 |   });
318 | }
319 | 
320 | function getaname(index) {
321 |   if (index == 0) index = Math.floor(Math.random() * 10) + 1;
322 | 
323 |   index = Math.floor(Math.random() * 20) + 1;
324 |   var index_1 = Math.floor(Math.random() * index) + 1;
325 | 
326 |   var name_array = [
327 |     "Natty",
328 |     "Healthy",
329 |     "Laughing",
330 |     "Finding",
331 |     "Falling",
332 |     "Fishy",
333 |     "Happy",
334 |     "Jumping",
335 |     "Sleeping",
336 |     "Rolling",
337 |     "Flying",
338 |     "Hungover",
339 |     "Humorous",
340 |     "Cranky",
341 |     "Corny",
342 |     "Cheesy",
343 |     "Thundering",
344 |     "Grinning",
345 |     "Saving Private",
346 |     "Tabslayer",
347 |     "Smiling",
348 |   ];
349 |   var name_array_next = [
350 |     "Whale 🐋",
351 |     "Sloth 🐨",
352 |     "Bear 🐻",
353 |     "Fish 🐠",
354 |     "Panda 🐼",
355 |     "Gorilla 🦍",
356 |     "Koala 🐨",
357 |     "Pigeon 🕊️",
358 |     "Bunny 🐰",
359 |     "Eagle 🦅",
360 |     "Lion 🦁",
361 |     "Elephant 🐘",
362 |     "Kite 🦅",
363 |     "Starfish 🌟",
364 |     "Octopus 🐙",
365 |     "Rooster 🐓",
366 |     "Typhoon 🌪️",
367 |     "Barnacles 👾",
368 |     "Ant 🐜",
369 |     "Kitten 😸",
370 |     "Bug 🐞",
371 |   ];
372 |   var name = name_array[index] + " " + name_array_next[index_1];
373 | 
374 |   return name;
375 | }
376 | 
377 | loadData();
378 | var tracker = 0;
379 | 
380 | function getBackHome() {
381 |   document.getElementById("snapshot_profile_edit").innerHTML = "";
382 |   document.getElementById("snapshot_profile_edit").style.display = "none";
383 |   document.getElementById("snapshot_list").style.display = "flex";
384 |   document.getElementById("footer").style.display = "block";
385 | }
386 | 
387 | function update_snapshot_name(target_id, snapshot_index) {
388 |   var input_field = document.getElementById(target_id);
389 |   console.log(snapshot_index);
390 | 
391 |   chrome.storage.local.get(["data"], function (items) {
392 |     var index = snapshot_index;
393 |     var new_items = items;
394 |     //console.log(items.data[index]);
395 | 
396 |     input_field.addEventListener("input", function () {
397 |       new_items.data[snapshot_index].title = input_field.value;
398 | 
399 |       setData(new_items.data);
400 |       loadData();
401 |     });
402 |   });
403 | }
404 | 


--------------------------------------------------------------------------------
/tabtrum/styles.css:
--------------------------------------------------------------------------------
  1 | /* Generic Styles for Body and CSS variables */
  2 | body {
  3 |   width: 250px;
  4 |   height: 300px;
  5 |   font-family: "Nunito", sans-serif;
  6 | 
  7 |   --color-text: #ffffff;
  8 |   --color-text-dark: rgb(77, 77, 77);
  9 |   --color-text-light: #a8a8a8;
 10 |   --color-bg: rgb(41, 41, 41);
 11 |   --color-card: rgb(51, 51, 51);
 12 |   --color-footer: rgb(50, 50, 50);
 13 |   --color-snap-button: #5289ff;
 14 |   --color-button-highlight: #4897ff;
 15 |   --color-highlight-bg: rgb(255, 109, 121);
 16 |   --color-highlight-scroll: rgb(61, 130, 235);
 17 | 
 18 |   --color-one: rgb(255, 158, 129);
 19 |   --color-two: #ffdca7;
 20 |   --color-three: rgb(137, 174, 255);
 21 |   --color-four: rgb(144, 255, 229);
 22 | 
 23 |   --color-one-hover: rgb(255, 151, 119);
 24 |   --color-two-hover: #ffd493;
 25 |   --color-three-hover: rgb(114, 158, 253);
 26 |   --color-four-hover: rgb(103, 248, 214);
 27 | 
 28 |   --color-button: #1074e8;
 29 |   --color-button-hover: #1e6af8;
 30 | 
 31 |   background: var(--color-bg);
 32 |   color: var(--color-text);
 33 | }
 34 | 
 35 | button {
 36 |   border: none;
 37 |   outline: none;
 38 | }
 39 | button:hover,
 40 | button:active {
 41 |   outline: none;
 42 | }
 43 | 
 44 | .snapshot_list {
 45 |   height: 260px;
 46 |   width: calc(93% + 5px);
 47 |   overflow-y: scroll;
 48 |   border-radius: 20px 20px 0px 0px;
 49 |   margin-top: 10px;
 50 | 
 51 |   color: var(--color-text);
 52 |   background: var(--color-card);
 53 |   padding: 10px 15px 20px 15px;
 54 |   position: relative;
 55 |   left: -10px;
 56 | 
 57 |   display: flex;
 58 |   flex-direction: column;
 59 | }
 60 | 
 61 | .snapshot_profile_edit {
 62 |   height: 300px;
 63 |   width: calc(93% + 5px);
 64 |   overflow-y: scroll;
 65 |   border-radius: 20px 20px 0px 0px;
 66 |   margin-top: 10px;
 67 | 
 68 |   color: var(--color-text);
 69 |   background: var(--color-card);
 70 |   padding: 10px 15px 20px 15px;
 71 |   position: relative;
 72 |   left: -10px;
 73 | 
 74 |   display: none;
 75 | }
 76 | 
 77 | .footer {
 78 |   position: relative;
 79 |   width: 250px;
 80 |   top: -20px;
 81 |   right: -10px;
 82 |   left: -10px;
 83 |   z-index: 10;
 84 |   height: 30px;
 85 |   padding: 10px;
 86 |   border-radius: 25px 25px 0px 0px;
 87 |   text-align: center;
 88 | 
 89 |   background: linear-gradient(to top, var(--color-card), transparent);
 90 | }
 91 | 
 92 | /*------- Scrollbar --------------*/
 93 | .snapshot_list::-webkit-scrollbar {
 94 |   width: 0.2rem;
 95 | }
 96 | 
 97 | .snapshot_list::-webkit-scrollbar-track {
 98 |   background: rgba(49, 49, 49, 0.075);
 99 | }
100 | 
101 | .snapshot_list::-webkit-scrollbar-thumb {
102 |   background: var(--color-highlight-scroll);
103 |   width: 0.2rem;
104 |   border-radius: 10px;
105 | }
106 | 
107 | .snapshot_profile_edit::-webkit-scrollbar {
108 |   width: 0.2rem;
109 | }
110 | 
111 | .snapshot_profile_edit::-webkit-scrollbar-track {
112 |   background: rgba(49, 49, 49, 0.075);
113 | }
114 | 
115 | .snapshot_profile_edit::-webkit-scrollbar-thumb {
116 |   background: var(--color-highlight-scroll);
117 |   width: 0.2rem;
118 |   border-radius: 10px;
119 | }
120 | 
121 | /*------- Snapshot List Elements -------*/
122 | .snapshot_button {
123 |   color: var(--color-text);
124 |   background: var(--color-snap-button);
125 |   padding: 10px 60px;
126 |   font-size: 12px;
127 |   font-family: "Nunito", sans-serif;
128 |   font-weight: 600;
129 |   letter-spacing: 0.3px;
130 | 
131 |   position: relative;
132 |   top: -8px;
133 |   margin: 0 auto;
134 |   border-radius: 50px;
135 | 
136 |   transition: all 0.2s ease;
137 | }
138 | 
139 | .snapshot_button:hover {
140 |   background: var(--color-button-highlight);
141 | }
142 | 
143 | .placeholder_text {
144 |   font-size: 12px;
145 |   color: var(--color-text-light);
146 | }
147 | .placeholder_text b {
148 |   font-size: 15px;
149 | }
150 | 
151 | .img-fluid {
152 |   width: 100px;
153 |   margin: 10px auto;
154 | }
155 | 
156 | #image_holder {
157 |   margin-top: 50px;
158 | }
159 | 
160 | .placeholder_text {
161 |   text-align: center;
162 |   font-weight: 600;
163 | }
164 | 
165 | .header_text {
166 |   color: var(--color-text);
167 | 
168 |   font-family: "Nunito", sans-serif;
169 |   font-size: 13px;
170 |   font-weight: 600;
171 |   padding: 3px 5px;
172 |   margin: 1px auto;
173 | }
174 | 
175 | .header_logo {
176 |   width: 20px;
177 |   height: 20px;
178 |   float: right;
179 |   padding: 2px;
180 |   position: relative;
181 |   top: -3px;
182 | }
183 | .header_logo img {
184 |   width: 100%;
185 | }
186 | 
187 | .placeholder_text,
188 | .img-fluid {
189 |   animation: whooshIn 0.3s;
190 | }
191 | .snapshot_tab_swoop_in {
192 |   animation: slideIn 0.1s;
193 | }
194 | 
195 | .snapshot_tab {
196 |   padding: 0px 10px;
197 |   margin: 6px 0px;
198 |   display: table-cell;
199 |   vertical-align: middle;
200 |   height: 60px;
201 | }
202 | 
203 | /* ------- Buttons Styling ------- */
204 | .snapshot_tab .snapshot_delete {
205 |   float: right;
206 | }
207 | .snapshot_tab .snapshot_tab_container {
208 |   position: relative;
209 |   top: -20px;
210 | }
211 | .snapshot_title {
212 |   font-size: 13px;
213 |   font-family: "Nunito", sans-serif;
214 |   font-weight: 600;
215 |   letter-spacing: 0.3px;
216 | }
217 | .snapshot_launch,
218 | .snapshot_delete,
219 | .snapshot_edit {
220 |   position: relative;
221 |   top: -9px;
222 | 
223 |   transition: all 0.3s ease;
224 | }
225 | .snapshot_launch {
226 |   font-size: 12px;
227 |   font-family: "Nunito", sans-serif;
228 |   font-weight: 700;
229 |   letter-spacing: 0.2px;
230 |   padding: 3px 10px;
231 |   border-radius: 2px;
232 |   transition: all 0.3s ease;
233 | }
234 | .snapshot_edit {
235 |   font-size: 12px;
236 |   font-family: "Nunito", sans-serif;
237 |   font-weight: 600;
238 |   letter-spacing: 0.2px;
239 |   padding: 4px 10px;
240 |   border-radius: 2px;
241 |   transition: all 0.3s ease;
242 |   margin-left: 6px;
243 | 
244 |   color: var(--color-text);
245 |   background-color: var(--color-bg);
246 | }
247 | 
248 | .name_edit {
249 |   background-color: var(--color-button);
250 |   position: fixed;
251 |   top: 91%;
252 |   left: 68%;
253 |   z-index: 10;
254 | }
255 | .name_edit:hover {
256 |   background-color: var(--color-button-hover);
257 | }
258 | 
259 | .snapshot_delete {
260 |   width: 26px;
261 |   height: 26px;
262 |   border-radius: 50px;
263 |   transform: rotate(45deg);
264 |   position: relative;
265 |   left: 10px;
266 | 
267 |   font-weight: 600;
268 |   font-size: 15px;
269 |   color: var(--color-text);
270 |   background: var(--color-bg);
271 | }
272 | 
273 | .snapshot_delete:hover {
274 |   background: var(--color-text-dark);
275 | }
276 | 
277 | .snapshot_edit:hover {
278 |   background: var(--color-text-dark);
279 | }
280 | 
281 | /* ------- Styling Snapshot Tabs ------- */
282 | 
283 | .snapshot_tab:nth-child(4n + 1) {
284 |   border-left: 2px solid var(--color-one);
285 | }
286 | .snapshot_tab:nth-child(4n + 1) .snapshot_launch {
287 |   background: var(--color-one);
288 |   color: var(--color-text-dark);
289 | }
290 | .snapshot_tab:nth-child(4n + 1) .snapshot_launch:hover {
291 |   background: var(--color-one-hover);
292 | }
293 | 
294 | .snapshot_tab:nth-child(4n + 2) {
295 |   border-left: 2px solid var(--color-two);
296 | }
297 | .snapshot_tab:nth-child(4n + 2) .snapshot_launch {
298 |   background: var(--color-two);
299 |   color: var(--color-text-dark);
300 | }
301 | .snapshot_tab:nth-child(4n + 2) .snapshot_launch:hover {
302 |   background: var(--color-two-hover);
303 | }
304 | 
305 | .snapshot_tab:nth-child(4n + 3) {
306 |   border-left: 2px solid var(--color-three);
307 | }
308 | .snapshot_tab:nth-child(4n + 3) .snapshot_launch {
309 |   background: var(--color-three);
310 |   color: var(--color-text-dark);
311 | }
312 | .snapshot_tab:nth-child(4n + 3) .snapshot_launch:hover {
313 |   background: var(--color-three-hover);
314 | }
315 | 
316 | .snapshot_tab:nth-child(4n + 4) {
317 |   border-left: 2px solid var(--color-four);
318 | }
319 | .snapshot_tab:nth-child(4n + 4) .snapshot_launch {
320 |   background: var(--color-four);
321 |   color: var(--color-text-dark);
322 | }
323 | .snapshot_tab:nth-child(4n + 4) .snapshot_launch:hover {
324 |   background: var(--color-four-hover);
325 | }
326 | 
327 | /* ------- Animations ------- */
328 | @keyframes whooshIn {
329 |   from {
330 |     position: relative;
331 |     opacity: 0;
332 |     top: 3px;
333 |   }
334 |   to {
335 |     opacity: 1;
336 |     top: 0px;
337 |   }
338 | }
339 | 
340 | @keyframes slideIn {
341 |   from {
342 |     position: relative;
343 |     opacity: 0;
344 |     left: -3px;
345 |   }
346 |   to {
347 |     opacity: 1;
348 |     left: 0px;
349 |   }
350 | }
351 | 
352 | .tab_edit_title {
353 |   color: var(--color-text);
354 |   background-color: var(--color-bg);
355 |   display: block;
356 |   width: 90%;
357 |   font-family: "Nunito", sans-serif;
358 |   font-size: 14px;
359 |   font-weight: 400;
360 |   padding: 6px 8px;
361 |   margin: 8px auto 15px auto;
362 |   text-align: center;
363 |   border-radius: 5px;
364 |   position: relative;
365 | 
366 |   animation: whooshIn 0.2s;
367 |   border: none;
368 | }
369 | 
370 | .snapshot_profile_edit p {
371 |   display: block;
372 |   text-align: center;
373 |   color: var(--color-text-light);
374 | 
375 |   position: relative;
376 |   top: -5px;
377 |   margin-bottom: 15px;
378 |   cursor: default;
379 | }
380 | 
381 | .tablist_holder {
382 |   margin-bottom: 18px;
383 | }
384 | 
385 | .tablist_tab_show {
386 |   width: 95%;
387 |   padding: 4px;
388 |   margin-top: 4px;
389 |   margin-bottom: 2px;
390 |   display: flex;
391 |   align-items: center;
392 |   z-index: 8;
393 |   animation: whooshIn 0.2s;
394 | }
395 | 
396 | .tablist_tab_show img {
397 |   width: 15px;
398 |   height: 15px;
399 |   margin-right: 6px;
400 | }
401 | 
402 | .tab_title {
403 |   color: white;
404 |   position: relative;
405 |   top: -4px;
406 |   font-weight: 600;
407 |   transition: all 0.2s ease;
408 | }
409 | 
410 | .tab_title:hover {
411 |   color: var(--color-four);
412 | }
413 | 
414 | .tablist_tab_show a {
415 |   text-decoration: none;
416 | }
417 | 
418 | .launch_from_edit_page {
419 |   /* background-color: var(--color-button); */
420 |   font-size: 12px;
421 |   font-family: "Nunito", sans-serif;
422 |   letter-spacing: 0.2px;
423 |   padding: 4px 10px;
424 |   border-radius: 2px;
425 |   transition: all 0.3s ease;
426 | 
427 |   color: var(--color-text-dark);
428 |   background-color: var(--color-text);
429 | 
430 |   position: fixed;
431 |   top: 91%;
432 |   left: 27%;
433 |   z-index: 10;
434 | }
435 | 
436 | .launch_from_edit_page:hover {
437 |   color: var(--color-text);
438 |   background: var(--color-snap-button);
439 | }
440 | 


--------------------------------------------------------------------------------
/tabtrum/tabtrum_128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekBoySupreme/TabTrum/9d1a232931dbf68d69ef45ad33d4afbc758fc8c8/tabtrum/tabtrum_128.png


--------------------------------------------------------------------------------
/tabtrum/tabtrum_16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekBoySupreme/TabTrum/9d1a232931dbf68d69ef45ad33d4afbc758fc8c8/tabtrum/tabtrum_16.png


--------------------------------------------------------------------------------
/tabtrum/tabtrum_32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekBoySupreme/TabTrum/9d1a232931dbf68d69ef45ad33d4afbc758fc8c8/tabtrum/tabtrum_32.png


--------------------------------------------------------------------------------
/tabtrum/tabtrum_48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekBoySupreme/TabTrum/9d1a232931dbf68d69ef45ad33d4afbc758fc8c8/tabtrum/tabtrum_48.png


--------------------------------------------------------------------------------