Version 1.0

First commit yaaayy! Hope its not the last ++
berkaytumal · Jul 21, 2022 · 56fbe52 · 56fbe52
1 parent b523399
commit 56fbe52
Show file tree

Hide file tree

Showing 19 changed files with 771 additions and 0 deletions.
diff --git a/icon128.png b/icon128.png
diff --git a/icon16.png b/icon16.png
diff --git a/icon48.png b/icon48.png
diff --git a/icons/books.png b/icons/books.png
diff --git a/icons/finance.png b/icons/finance.png
diff --git a/icons/images.png b/icons/images.png
diff --git a/icons/maps.png b/icons/maps.png
diff --git a/icons/news.png b/icons/news.png
diff --git a/icons/plane.png b/icons/plane.png
diff --git a/icons/reset.png b/icons/reset.png
diff --git a/icons/search.png b/icons/search.png
diff --git a/icons/shopping.png b/icons/shopping.png
diff --git a/icons/videos.png b/icons/videos.png
diff --git a/jquery-3.6.0.min.js b/jquery-3.6.0.min.js
diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,28 @@
+{
+    "name": "Stop Messing With My Search Catalogs",
+    "version": "1.0",
+    "description": "Shows all search catalogs vertically just like in the mobile, and with a static order!",
+    "content_scripts": [
+        {
+            "matches": [
+                "https://*.google.com/search*"
+            ],
+            "js": [
+                "jquery-3.6.0.min.js",
+                "script.js"
+            ]
+        }
+    ],
+    "icons": {
+        "16": "icon16.png",
+        "48": "icon48.png",
+        "128": "icon128.png"
+    },
+    "action": {
+        "default_popup": "popup.html"
+    },
+    "permissions": [
+        "storage"
+    ],
+    "manifest_version": 3
+}
diff --git a/popup.html b/popup.html
@@ -0,0 +1,275 @@
+<!DOCTYPE html>
+
+<body>
+    <style>
+        :root {
+            --titlecolor: rgb(32, 32, 32);
+            --gradient: linear-gradient(180deg, white 30%, transparent 100%);
+            --gradient2: linear-gradient(180deg, var(--titlecolor) 5%, transparent 100%);
+        }
+
+        .backblur {
+            z-index: 98;
+            position: fixed;
+            -webkit-mask: var(--gradient);
+            left: 0px;
+            top: 0px;
+            width: 100%;
+            height: 60px;
+            backdrop-filter: saturate(1.325) blur(1px);
+            -webkit-backdrop-filter: saturate(1.325) blur(1px);
+
+        }
+
+        body {
+            position: fixed;
+            left: 0px;
+            top: 0px;
+            margin: 0px;
+            overflow: hidden;
+            width: 250px;
+            height: 300px;
+            background: rgb(32, 32, 32);
+
+        }
+
+        html {
+            width: 265px;
+            height: 300px;
+            overflow: hidden;
+        }
+
+        * {
+            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+
+            user-select: none !important;
+        }
+
+        .drag-list.hidden {
+            transform: scale(0.75);
+            filter: blur(10px) saturate(2);
+            opacity: 0;
+        }
+
+        .drag-list {
+            transition: 500ms cubic-bezier(0.075, 0.82, 0.165, 1);
+            position: fixed;
+            left: 0px;
+            top: 0px;
+            height: 300px !important;
+            overflow-x: hidden;
+            overflow-y: scroll;
+            width: 265px;
+            padding-top: 50px;
+
+            padding-bottom: 10px;
+            box-sizing: border-box;
+        }
+
+        ::-webkit-scrollbar {
+            display: none;
+        }
+
+        .dragOver {
+            border-top: 20px solid rgb(255, 255, 229) !important;
+            border-bottom: 20px solid rgb(255, 255, 229) !important;
+            background-color: rgba(0, 0, 0, .05);
+        }
+
+        .drag-item .icon {
+            position: absolute;
+            left: 6px;
+            top: 6px;
+            width: 25px;
+
+            height: 25px;
+
+            background-image: var(--icon) !important;
+            background-size: 100%;
+        }
+
+        .drag-item {
+            position: relative;
+            height: 20px;
+            margin: 10px 10px 0 10px;
+            padding: 8px;
+            transition: .25s, top 0s !important;
+            border: 1px solid rgba(0, 0, 0, .03);
+            border-radius: 10px;
+            background: #2c2c2c;
+            font-size: 15px;
+            color: white;
+            padding-left: 38px;
+        }
+
+        .slide-placeholder {
+            position: relative;
+        }
+
+        .ui-sortable-helper,
+        .drag-item:active {
+            transform: scale(0.97) translateY(calc(var(--translatey) * 1px));
+            box-shadow: 0 3px 10px rgba(0, 0, 0, .1), 0 10px 30px rgba(0, 0, 0, .05);
+            opacity: 0.6;
+        }
+
+        .drag-item:active.switchingfrom {
+            opacity: 1;
+            background: rgb(126, 29, 29);
+
+        }
+
+        .drag-item.switchingto {
+            background: rgb(80, 48, 48);
+            transform: scale(1.02);
+        }
+
+        .ui-sortable-helper {
+            transform: scale(1.1) translateY(calc(var(--translatey) * 1px));
+        }
+
+        .scrollbar-track {
+            transform: scale(0.975) translateX(1px) !important;
+
+            background: transparent !important;
+        }
+
+        .scrollbar-thumb {
+            background: rgba(255, 255, 255, 0.1) !important;
+            width: 3px !important;
+        }
+
+        #title {
+            position: fixed;
+            z-index: 99;
+            color: white;
+            background: var(--gradient2);
+            background-size: 100% 100%;
+            font-size: 17px;
+            width: 100%;
+            height: 40px;
+            padding-top: 17px;
+            padding-left: 15px;
+        }
+
+        #resetbtn {
+            background: url(icons/reset.png);
+            background-size: 85%;
+            background-position: 50% 50%;
+            background-repeat: no-repeat;
+            transition: 500ms;
+            position: fixed;
+            right: 15px;
+            width: 25px;
+            height: 25px;
+            border-radius: 12.5px;
+            border: none;
+            backdrop-filter: brightness(2) blur(10px);
+            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+        }
+
+        #resetbtn:active {
+            opacity: 0.6;
+            transition: 0s, transform 500ms;
+
+        }
+
+        #resetbtn.anim {
+            animation: turn 500ms cubic-bezier(.13, 1.41, .6, 1.01)normal;
+
+        }
+
+        @keyframes turn {
+            0% {
+                transform: rotateZ(0deg);
+            }
+
+            100% {
+                transform: rotateZ(360deg);
+            }
+        }
+
+        #popup {
+            transition: 300ms cubic-bezier(.13, 1.41, .6, 1.01);
+            overflow: hidden;
+            font-size: 14px;
+            text-align: center;
+            color: white;
+            position: fixed;
+            z-index: 500;
+            background: rgba(0, 0, 0, 0.445);
+            width: 170px;
+            height: 90px;
+            border-radius: 13px;
+            backdrop-filter: saturate(2) blur(20px);
+            box-shadow: 0px 20px 70px rgba(0, 0, 0, 0.445);
+            left: calc(50% - 85px);
+            top: calc(50% - 45px);
+            pointer-events: none;
+            opacity: 0;
+            transform: scale(0.5);
+        }
+
+        #popup.shown {
+            opacity: 1;
+            pointer-events: all;
+            transform: scale(1);
+        }
+
+        #popup button {
+            transition: 500ms;
+
+            color: white;
+            height: 30px;
+            width: 85px;
+            position: absolute;
+            bottom: 0px;
+            background: transparent;
+            border: none;
+        }
+
+        #popup button:active {
+            opacity: 0.6;
+            transition: 0s;
+            box-shadow: none;
+            background: rgba(255, 255, 255, 0.1);
+        }
+
+        #popup :nth-child(3) {
+            box-shadow: inset 0.5px 1px 0px rgba(255, 255, 255, 0.1);
+            color: rgb(247, 40, 40);
+            font-weight: 700;
+            left: 85px;
+        }
+
+        #popup :nth-child(2) {
+            box-shadow: inset -0.5px 1px 0px rgba(255, 255, 255, 0.1);
+
+            left: 0px;
+        }
+    </style>
+    <div id="title">Rearrange Order<button id="resetbtn"></button></div>
+    <div class="backblur"></div>
+    <div class="backblur"></div>
+    <div class="backblur"></div>
+    <div class="backblur"></div>
+    <div class="backblur"></div>
+    <div class="backblur"></div>
+    <div class="backblur"></div>
+    <div class="backblur"></div>
+
+    <div id="draglist" class="drag-list">
+
+    </div>
+    <div id="popup">
+        <p>Do you want to reset?</p>
+        <button>No</button>
+        <button>Yes</button>
+    </div>
+    <script src="jquery-3.6.0.min.js"></script>
+    <script src="scrollbar.js"></script>
+    <script src="popup.js"></script>
+
+</body>
+
+</html>