index.html

<!--
     Material You NewTab
     Copyright (c) 2023-2025 XengShi
     Licensed under the GNU General Public License v3.0 (GPL-3.0)
     You should have received a copy of the GNU General Public License along with this program.
     If not, see <https://www.gnu.org/licenses/>.
-->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta name="google-site-verification" content="f80bboVVkBBgR-pRl_jZR6dnG7tuaYD4Fv4fSr3IhZE" />
    <title>New Tab</title>
    <link href="style.css" rel="stylesheet">
    <link href="./favicon/icon48.png" id="favicon" rel="icon" type="image/png">
    <style id="iconStyle"></style>

    <!-- SCRIPTS -->
    <script src="scripts/preload.js"></script>
    <script defer src="scripts/languages.js"></script>
    <script defer src="scripts/save-load-states.js"></script>
    <script defer src="scripts/menu-shortcut-page.js"></script>
    <!-- <script defer src="scripts/theme.js"></script> -->
    <script defer src="scripts/alert-modal.js"></script>
    <script defer src="scripts/wallpaper.js"></script>
    <script defer src="scripts/clock.js"></script>
    <script defer src="scripts/weather.js"></script>
    <script defer src="scripts/custom-text.js"></script>
    <script defer src="scripts/browser-utils.js"></script>
    <script defer src="scripts/search.js"></script>
    <script defer src="scripts/quotes.js"></script>
    <script defer src="scripts/shortcuts.js"></script>
    <script defer src="scripts/script.js"></script>
    <script defer src="scripts/search-suggestions.js"></script>
    <script defer src="scripts/ai-tools.js"></script>
    <script defer src="scripts/bookmarks.js"></script>
    <script defer src="scripts/todo-list.js"></script>
    <script defer src="scripts/google-apps.js"></script>
    <script defer src="scripts/voice-search.js"></script>
    <script defer src="scripts/backup-restore.js"></script>

    <!-- LANGUAGES SCRIPTS -->
    <script src="locales/pt.js"></script>
    <script src="locales/en.js"></script>
    <script src="locales/np.js"></script>
    <script src="locales/es.js"></script>
    <script src="locales/hi.js"></script>
    <script src="locales/hu.js"></script>
    <script src="locales/zh.js"></script>
    <script src="locales/zh_TW.js"></script>
    <script src="locales/cs.js"></script>
    <script src="locales/it.js"></script>
    <script src="locales/tr.js"></script>
    <script src="locales/bn.js"></script>
    <script src="locales/vi.js"></script>
    <script src="locales/ru.js"></script>
    <script src="locales/uz.js"></script>
    <script src="locales/ja.js"></script>
    <script src="locales/ko.js"></script>
    <script src="locales/idn.js"></script>
    <script src="locales/mr.js"></script>
    <script src="locales/fr.js"></script>
    <script src="locales/az.js"></script>
    <script src="locales/sl.js"></script>
    <script src="locales/ur.js"></script>

</head>

<body>
    <!-- --------------------- Loading Screen Starting --------------------- -->
    <img src="./images/Loading.png" id="LoadingScreen" fetchpriority="high" />

    <!-- --------------------- ToDo List Setup Starting --------------------- -->
    <!-- ToDo Icon -->
    <div class="todoListCont" id="todoListCont">
        <svg id="todoIcon" xmlns="http://www.w3.org/2000/svg" class="dot-icon" width="36" height="36"
            viewBox="0 0 32 32">
            <g style="transform: scale(0.85); transform-origin: center;">
                <path d="M11,30H5c-1.7,0-3-1.3-3-3v-6c0-1.7,1.3-3,3-3h6c1.7,0,3,1.3,3,3v6C14,28.7,12.7,30,11,30z" />
                <path d="M29,6H17c-0.6,0-1-0.4-1-1s0.4-1,1-1h12c0.6,0,1,0.4,1,1S29.6,6,29,6z" />
                <path d="M24,10h-7c-0.6,0-1-0.4-1-1s0.4-1,1-1h7c0.6,0,1,0.4,1,1S24.6,10,24,10z" />
                <path d="M29,22H17c-0.6,0-1-0.4-1-1s0.4-1,1-1h12c0.6,0,1,0.4,1,1S29.6,22,29,22z" />
                <path d="M24,26h-7c-0.6,0-1-0.4-1-1s0.4-1,1-1h7c0.6,0,1,0.4,1,1S24.6,26,24,26z" />
                <path
                    d="M11,2H5C3.3,2,2,3.3,2,5v6c0,1.7,1.3,3,3,3h6c1.7,0,3-1.3,3-3V5C14,3.3,12.7,2,11,2z M11.7,6.7l-3,3C8.5,9.9,8.3,10,8,10 S7.5,9.9,7.3,9.7l-2-2c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0L8,7.6l2.3-2.3c0.4-0.4,1-0.4,1.4,0S12.1,6.3,11.7,6.7z" />
            </g>
        </svg>
        <!-- Text to appear on hover -->
        <span class="tooltip-text" id="todoListHover">ToDo List</span>
    </div>

    <!-- Centered Icon Container -->
    <div id="todoContainer" class="todo-container" style="display: none;">
        <h2 id="todoListHeading">To Do List</h2>
        <div class="searchbar-content">
            <input id="todoInput" placeholder="Add task..." type="text" autocomplete="off">
            <div class="searchControls">
                <!-- Add Button -->
                <button id="todoAdd">+</button>
            </div>
        </div>
        <ul class="todolist" id="todoullist">
        </ul>
    </div>

    <!-- --------------------- Bookmark System --------------------- -->
    <div style="display: none;">
        <svg id="folderIconTemplate" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M3 6v10.8c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874c.427.218.987.218 2.105.218h11.606c1.118 0 1.677 0 2.104-.218c.377-.192.683-.498.875-.874C21 18.48 21 17.92 21 16.8V9.2c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C19.48 6 18.92 6 17.8 6H12M3 6h9M3 6a2 2 0 0 1 2-2h3.675c.489 0 .734 0 .964.055q.308.075.578.24c.202.124.375.297.72.643L12 6" />
        </svg>
    </div>

    <div class="bookmark-button" id="bookmarkButton">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <path fill-rule="evenodd"
                d="M7 2a3 3 0 0 0-3 3v15.138a1.5 1.5 0 0 0 2.244 1.303l5.26-3.006a1 1 0 0 1 .992 0l5.26 3.006A1.5 1.5 0 0 0 20 20.138V5a3 3 0 0 0-3-3z"
                clip-rule="evenodd" />
        </svg>
        <!-- Text to appear on hover -->
        <span class="tooltip-text" id="bookmarksHover">Bookmarks</span>
    </div>
    <div id="bookmarksContainer">
        <div id="bookmarkSidebar" class="bookmark-sidebar">

            <div class="topOutRoundCorner">
                <svg fill="none" height="100%" viewBox="0 0 30 30" width="100%" xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0_208_15)">
                        <path class="lessDark" clip-rule="evenodd" d="M30 0L0 0C16.5685 0 30 13.4315 30 30L30 0Z"
                            fill="#FF429D" fill-rule="evenodd" />
                    </g>
                    <defs>
                        <clipPath id="clip0_208_15">
                            <rect fill="white" height="30" width="30" />
                        </clipPath>
                    </defs>
                </svg>
            </div>

            <div class="bookmark-sidebar-header">
                <h2 id="bookmarksHeading">Bookmarks</h2>
            </div>
            <div class="bookmark-search-container">
                <input type="text" id="bookmarkSearch" placeholder="Search bookmark" />
                <button id="clearSearchButton">✖</button>
            </div>
            <!-- Adding Sorting buttons along with View Container -->
            <div class="bookmark-controls-container">
                <div class="bookmark-control-group">
                    <h3 id="bookmarkSortBy">Sort by</h3>
                    <div class="button-group">
                        <button id="sortAlphabetical" class="bookmark-sort-button active">A-Z</button>
                        <button id="sortTimeAdded" class="bookmark-sort-button">Old-New</button>
                    </div>
                </div>

                <div class="bookmark-control-group">
                    <h3 id="bookmarkViewAs">View as</h3>
                    <div class="button-group">
                        <input type="checkbox" id="bookmarkGridCheckbox" hidden />
                        <button id="bookmarkViewGrid" class="bookmark-view-as-button">Grid</button>
                        <button id="bookmarkViewList" class="bookmark-view-as-button">List</button>
                    </div>
                </div>
            </div>
            <ul id="bookmarkList"></ul>
        </div>
    </div>

    <!-- Edit Bookmark Modal -->
    <div id="editBookmarkModal">
        <div class="modal-content">
            <h2 id="editBookmarkHeading">Edit Bookmark</h2>

            <img id="editBookmarkFavicon" src="" alt="Favicon">

            <input type="text" id="editBookmarkName" placeholder="Bookmark Name">
            <input type="url" id="editBookmarkURL" placeholder="Bookmark URL">

            <div class="modal-buttons">
                <button id="saveBookmarkChanges">Save</button>
                <button id="cancelBookmarkEdit">Cancel</button>
            </div>
        </div>
    </div>

    <!----------------------- End of Bookmark System ----------------------->

    <!----------------------- Google App Menu Setup Starting ----------------------->
    <!-- 9 Dot Icon -->
    <div class="googleAppsCont" id="googleAppsCont">
        <svg class="dot-icon" xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24">
            <path
                d="M8 6a2 2 0 1 1-4 0 2 2 0 0 1 4 0m0 6a2 2 0 1 1-4 0 2 2 0 0 1 4 0m-2 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4m8-14a2 2 0 1 1-4 0 2 2 0 0 1 4 0m-2 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4m2 4a2 2 0 1 1-4 0 2 2 0 0 1 4 0m4-10a2 2 0 1 0 0-4 2 2 0 0 0 0 4m2 4a2 2 0 1 1-4 0 2 2 0 0 1 4 0m-2 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4" />
        </svg>
        <!-- Text to appear on hover -->
        <span class="tooltip-text" id="googleAppsHover">Google Apps</span>
    </div>

    <!-- Centered Icon Container -->
    <div id="iconContainer" class="icon-container" style="display: none;">
        <a href="https://myaccount.google.com/" class="icon-item">
            <div class="menuicon">
                <svg xmlns="http://www.w3.org/2000/svg" width="46" height="46" viewBox="0 0 24 24">
                    <path fill="currentColor"
                        d="M12 4c-4.42 0-8 3.58-8 8c0 1.95.7 3.73 1.86 5.12a9.95 9.95 0 0 1 12.28 0A7.96 7.96 0 0 0 20 12c0-4.42-3.58-8-8-8m0 9c-1.93 0-3.5-1.57-3.5-3.5S10.07 6 12 6s3.5 1.57 3.5 3.5S13.93 13 12 13"
                        opacity="0.3" />
                    <path fill="currentColor"
                        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m0 18c-1.74 0-3.34-.56-4.65-1.5C8.66 17.56 10.26 17 12 17s3.34.56 4.65 1.5c-1.31.94-2.91 1.5-4.65 1.5m6.14-2.88a9.95 9.95 0 0 0-12.28 0A7.96 7.96 0 0 1 4 12c0-4.42 3.58-8 8-8s8 3.58 8 8c0 1.95-.7 3.73-1.86 5.12" />
                    <path fill="currentColor"
                        d="M12 5.93c-1.93 0-3.5 1.57-3.5 3.5s1.57 3.5 3.5 3.5s3.5-1.57 3.5-3.5s-1.57-3.5-3.5-3.5m0 5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5s1.5.67 1.5 1.5s-.67 1.5-1.5 1.5" />
                </svg>
            </div>
            <div class="label short">Account</div>
        </a>
        <a href="https://google.com/" class="icon-item">
            <div class="menuicon">
                <svg xmlns="http://www.w3.org/2000/svg" width="43" height="43" viewBox="-2 -2 24 24">
                    <path fill="currentColor"
                        d="M4.376 8.068A6 6 0 0 0 4.056 10c0 .734.132 1.437.376 2.086a5.946 5.946 0 0 0 8.57 3.045h.001a5.96 5.96 0 0 0 2.564-3.043H10.22V8.132h9.605a10 10 0 0 1-.044 3.956a10 10 0 0 1-3.52 5.71A9.96 9.96 0 0 1 10 20A9.998 9.998 0 0 1 1.118 5.401A10 10 0 0 1 10 0c2.426 0 4.651.864 6.383 2.302l-3.24 2.652a5.948 5.948 0 0 0-8.767 3.114" />
                </svg>
            </div>
            <div class="label short">Search</div>
        </a>
        <a href="https://www.youtube.com/" class="icon-item">
            <div class="menuicon">
                <svg xmlns="http://www.w3.org/2000/svg" width="47" height="47" viewBox="1 0 24 24">
                    <g fill="none" fill-rule="evenodd">
                        <path
                            d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
                        <path fill="currentColor"
                            d="M12 4c.855 0 1.732.022 2.582.058l1.004.048l.961.057l.9.061l.822.064a3.8 3.8 0 0 1 3.494 3.423l.04.425l.075.91c.07.943.122 1.971.122 2.954s-.052 2.011-.122 2.954l-.075.91l-.04.425a3.8 3.8 0 0 1-3.495 3.423l-.82.063l-.9.062l-.962.057l-1.004.048A62 62 0 0 1 12 20a62 62 0 0 1-2.582-.058l-1.004-.048l-.961-.057l-.9-.062l-.822-.063a3.8 3.8 0 0 1-3.494-3.423l-.04-.425l-.075-.91A41 41 0 0 1 2 12c0-.983.052-2.011.122-2.954l.075-.91l.04-.425A3.8 3.8 0 0 1 5.73 4.288l.821-.064l.9-.061l.962-.057l1.004-.048A62 62 0 0 1 12 4m-2 5.575v4.85c0 .462.5.75.9.52l4.2-2.425a.6.6 0 0 0 0-1.04l-4.2-2.424a.6.6 0 0 0-.9.52Z" />
                    </g>
                </svg>
            </div>
            <div class="label short">YouTube</div>
        </a>
        <a href="https://mail.google.com/" class="icon-item">
            <div class="menuicon">
                <svg xmlns="http://www.w3.org/2000/svg" width="46" height="46" viewBox="1 0 24 24">
                    <path fill="currentColor"
                        d="M20 18h-2V9.25L12 13L6 9.25V18H4V6h1.2l6.8 4.25L18.8 6H20m0-2H4c-1.11 0-2 .89-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2" />
                </svg>
            </div>
            <div class="label short">Gmail</div>
        </a>
        <a href="https://music.youtube.com/" class="icon-item">
            <div class="menuicon">
                <svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="1 0 24 24">
                    <g fill="currentColor" fill-rule="evenodd" clip-rule="evenodd">
                        <path
                            d="M8.217 8.286C9.265 7.254 10.514 6.743 12 6.743s2.735.51 3.783 1.543s1.562 2.258 1.562 3.714s-.514 2.68-1.562 3.713s-2.297 1.543-3.783 1.543s-2.735-.51-3.783-1.543S6.655 13.455 6.655 12s.514-2.682 1.562-3.714m6.977 3.715L10 14.91V9.088z" />
                        <path
                            d="M19.071 18.966Q22.001 16.08 22 12q0-4.081-2.929-6.967Q16.141 2.147 12 2.147T4.929 5.033T2 12q0 4.08 2.929 6.966q2.93 2.886 7.071 2.886q4.142 0 7.071-2.886M12 5.433c-1.827 0-3.407.644-4.702 1.92C6.002 8.63 5.345 10.19 5.345 12c0 1.809.657 3.37 1.953 4.646c1.295 1.276 2.874 1.92 4.702 1.92s3.407-.644 4.702-1.92c1.296-1.276 1.953-2.837 1.953-4.646c0-1.81-.657-3.37-1.953-4.647c-1.295-1.276-2.875-1.92-4.702-1.92" />
                    </g>
                </svg>
            </div>
            <div class="label short">YTMusic</div>
        </a>
        <a href="https://maps.google.com/" class="icon-item">
            <div class="menuicon">
                <svg width="36" height="36" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                    <path fill="currentColor"
                        d="m 8 0 c -3.3125 0 -6 2.6875 -6 6 c 0.007812 0.710938 0.136719 1.414062 0.386719 2.078125 l -0.015625 -0.003906 c 0.636718 1.988281 3.78125 5.082031 5.625 6.929687 h 0.003906 v -0.003906 c 1.507812 -1.507812 3.878906 -3.925781 5.046875 -5.753906 c 0.261719 -0.414063 0.46875 -0.808594 0.585937 -1.171875 l -0.019531 0.003906 c 0.25 -0.664063 0.382813 -1.367187 0.386719 -2.078125 c 0 -3.3125 -2.683594 -6 -6 -6 z m 0 3.691406 c 1.273438 0 2.308594 1.035156 2.308594 2.308594 s -1.035156 2.308594 -2.308594 2.308594 c -1.273438 -0.003906 -2.304688 -1.035156 -2.304688 -2.308594 c -0.003906 -1.273438 1.03125 -2.304688 2.304688 -2.308594 z m 0 0" />
                </svg>
            </div>
            <div class="label short">Maps</div>
        </a>
        <a href="https://play.google.com/" class="icon-item">
            <div class="menuicon">
                <svg xmlns="http://www.w3.org/2000/svg" width="38" height="38" viewBox="0 0 16 16">
                    <path fill="currentColor"
                        d="M14.222 9.374c1.037-.61 1.037-2.137 0-2.748L11.528 5.04 8.32 8l3.207 2.96zm-3.595 2.116L7.583 8.68 1.03 14.73c.201 1.029 1.36 1.61 2.303 1.055zM1 13.396V2.603L6.846 8zM1.03 1.27l6.553 6.05 3.044-2.81L3.333.215C2.39-.341 1.231.24 1.03 1.27" />
                </svg>
            </div>
            <div class="label short">Play</div>
        </a>
        <a href="https://drive.google.com/" class="icon-item">
            <div class="menuicon">
                <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24">
                    <path fill="currentColor"
                        d="M12.01 1.485c-2.082 0-3.754.02-3.743.047.01.02 1.708 3.001 3.774 6.62l3.76 6.574h3.76c2.081 0 3.753-.02 3.742-.047-.005-.02-1.708-3.001-3.775-6.62l-3.76-6.574zm-4.76 1.73a789.828 789.861 0 0 0-3.63 6.319L0 15.868l1.89 3.298 1.885 3.297 3.62-6.335 3.618-6.33-1.88-3.287C8.1 4.704 7.255 3.22 7.25 3.214zm2.259 12.653-.203.348c-.114.198-.96 1.672-1.88 3.287a423.93 423.948 0 0 1-1.698 2.97c-.01.026 3.24.042 7.222.042h7.244l1.796-3.157c.992-1.734 1.85-3.23 1.906-3.323l.104-.167h-7.249z" />
                </svg>
            </div>
            <div class="label short">Drive</div>
        </a>
        <a href="https://photos.google.com/" class="icon-item">
            <div class="menuicon">
                <svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 256 256">
                    <g fill="currentColor">
                        <path
                            d="M192 88a63.7 63.7 0 0 1-14 40h-50V24a64 64 0 0 1 64 64M64 168a64 64 0 0 0 64 64V128H78a63.7 63.7 0 0 0-14 40"
                            opacity=".2" />
                        <path
                            d="M232 120h-39.51A72 72 0 0 0 128 16a8 8 0 0 0-8 8v39.51A72 72 0 0 0 16 128a8 8 0 0 0 8 8h39.51A72 72 0 0 0 128 240a8 8 0 0 0 8-8v-39.51A72 72 0 0 0 240 128a8 8 0 0 0-8-8M120 223.43A56.09 56.09 0 0 1 72 168a55.3 55.3 0 0 1 10-32h38ZM120 120H32.57A56.09 56.09 0 0 1 88 72a55.3 55.3 0 0 1 32 10Zm16-87.43A56.09 56.09 0 0 1 184 88a55.3 55.3 0 0 1-10 32h-38ZM168 184a55.3 55.3 0 0 1-32-10v-38h87.43A56.09 56.09 0 0 1 168 184" />
                    </g>
                </svg>
            </div>
            <div class="label short">Photos</div>
        </a>
        <a href="https://translate.google.com/" class="icon-item">
            <div class="menuicon">
                <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24">
                    <path fill="currentColor"
                        d="m12 22-1-3H4q-.825 0-1.412-.587T2 17V4q0-.825.588-1.412T4 2h6l.875 3H20q.875 0 1.438.563T22 7v13q0 .825-.562 1.413T20 22zm-4.85-7.4q1.725 0 2.838-1.112T11.1 10.6q0-.2-.012-.362t-.063-.338h-3.95v1.55H9.3q-.2.7-.763 1.088t-1.362.387q-.975 0-1.675-.7T4.8 10.5t.7-1.725 1.675-.7q.45 0 .85.163t.725.487L9.975 7.55Q9.45 7 8.712 6.7T7.15 6.4q-1.675 0-2.863 1.188T3.1 10.5t1.188 2.913T7.15 14.6m6.7.5.55-.525q-.35-.425-.637-.825t-.563-.85zm1.25-1.275q.7-.825 1.063-1.575t.487-1.175h-3.975l.3 1.05h1q.2.375.475.813t.65.887M13 21h7q.45 0 .725-.288T21 20V7q0-.45-.275-.725T20 6h-8.825l1.175 4.05h1.975V9h1.025v1.05H19v1.025h-1.275q-.25.95-.75 1.85T15.8 14.6l2.725 2.675L17.8 18l-2.7-2.7-.9.925L15 19z" />
                </svg>
            </div>
            <div class="label short">Translate</div>
        </a>
        <a href="https://calendar.google.com/" class="icon-item">
            <div class="menuicon">
                <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24">
                    <path fill="currentColor"
                        d="M18.316 5.684H24v12.632h-5.684zM5.684 24h12.632v-5.684H5.684zM18.316 5.684V0H1.895A1.894 1.894 0 0 0 0 1.895v16.421h5.684V5.684zm-7.207 6.25v-.065q.407-.216.687-.617c.28-.401.279-.595.279-.982q0-.568-.3-1.025a2.05 2.05 0 0 0-.832-.714 2.7 2.7 0 0 0-1.197-.257q-.9 0-1.481.467-.579.467-.793 1.078l1.085.452q.13-.374.413-.633.284-.258.767-.257.495 0 .816.264a.86.86 0 0 1 .322.703q0 .495-.36.778t-.886.284h-.567v1.085h.633q.611 0 1.02.327.407.327.407.843 0 .505-.387.832c-.387.327-.565.327-.924.327q-.527 0-.897-.311-.372-.312-.521-.881l-1.096.452q.268.923.977 1.401.707.479 1.538.477a2.84 2.84 0 0 0 1.293-.291q.574-.29.902-.794.327-.505.327-1.149 0-.643-.344-1.105a2.07 2.07 0 0 0-.881-.689m2.093-1.931.602.913L15 10.045v5.744h1.187V8.446h-.827zM22.105 0h-3.289v5.184H24V1.895A1.894 1.894 0 0 0 22.105 0m-3.289 23.5 4.684-4.684h-4.684zM0 22.105C0 23.152.848 24 1.895 24h3.289v-5.184H0z" />
                </svg>
            </div>
            <div class="label short">Calendar</div>
        </a>
        <a href="https://meet.google.com/" class="icon-item">
            <div class="menuicon">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="41" height="41">
                    <path fill="currentColor"
                        d="M2 18L2 32 12 32 12 18zM39 9v4.31l-10 9V16H14V6h22C37.66 6 39 7.34 39 9zM29 27.69l10 9V41c0 1.66-1.34 3-3 3H14V34h15V27.69zM12 34v10H5c-1.657 0-3-1.343-3-3v-7H12zM12 6L12 16 2 16zM29 25L39 16 39 34zM49 9.25v31.5c0 .87-1.03 1.33-1.67.75L41 35.8V14.2l6.33-5.7C47.97 7.92 49 8.38 49 9.25z" />
                </svg>
            </div>
            <div class="label short">Meet</div>
        </a>
        <a href="https://chat.google.com/" class="icon-item">
            <div class="menuicon">
                <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24">
                    <path fill="currentColor"
                        d="M1.637 0C.733 0 0 .733 0 1.637v16.5c0 .904.733 1.636 1.637 1.636h3.955v3.323c0 .804.97 1.207 1.539.638l3.963-3.96h11.27c.903 0 1.636-.733 1.636-1.637V5.592L18.408 0Zm3.955 5.592h12.816v8.59H8.455l-2.863 2.863Z" />
                </svg>
            </div>
            <div class="label short">Chat</div>
        </a>
        <a href="https://news.google.com/" class="icon-item">
            <div class="menuicon">
                <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24">
                    <path fill="currentColor"
                        d="M21.267 21.2a.614.614 0 0 1-.613.613H3.344a.614.614 0 0 1-.612-.613V8.115a.614.614 0 0 1 .613-.613h17.309a.614.614 0 0 1 .613.613zm-3.032-3.42v-1.195a.08.08 0 0 0-.08-.08h-5.373v1.361h5.373a.08.08 0 0 0 .08-.083zm.817-2.587v-1.201a.08.08 0 0 0-.079-.082h-6.19v1.362h6.189a.08.08 0 0 0 .08-.078v-.004zm-.817-2.588V11.4a.08.08 0 0 0-.08-.08h-5.373v1.361h5.373a.08.08 0 0 0 .08-.079zM8.15 14.045v1.226h1.77c-.145.748-.804 1.292-1.77 1.292a1.976 1.976 0 0 1 0-3.95 1.77 1.77 0 0 1 1.253.49l.934-.932a3.14 3.14 0 0 0-2.187-.853 3.268 3.268 0 1 0 0 6.537c1.89 0 3.133-1.328 3.133-3.197a4 4 0 0 0-.052-.619zM2.27 7.654a.616.616 0 0 1 .613-.613h12.154l-1.269-3.49a.595.595 0 0 0-.743-.383L.368 7.775a.594.594 0 0 0-.323.775l2.225 6.112za.616.616 0 0 1 .613-.613h12.154l-1.269-3.49a.595.595 0 0 0-.743-.383L.368 7.775a.594.594 0 0 0-.323.775l2.225 6.112zm21.312-.31-8.803-2.37.751 2.067h5.584a.614.614 0 0 1 .613.613v8.794l2.247-8.365a.59.59 0 0 0-.392-.74m-4.496-1.675V2.795a.61.61 0 0 0-.611-.608H5.524a.61.61 0 0 0-.616.605v2.837l8.39-3.052a.594.594 0 0 1 .743.39l.544 1.497z" />
                </svg>
            </div>
            <div class="label short">News</div>
        </a>
        <a href="https://contacts.google.com/" class="icon-item">
            <div class="menuicon">
                <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24">
                    <path fill="currentColor"
                        d="M4.625 22q-.4 0-.725-.325t-.325-.725v-2.625q0-2.25 1.4-3.975t3.6-2.2q-1 .7-1.55 1.762t-.55 2.288v4.75q0 .275.075.55t.25.5zM8.3 22q-.425 0-.737-.312t-.313-.738V16.2q0-1.75 1.238-2.975T11.475 12H16.2q1.75 0 2.975 1.225T20.4 16.2v1.6q0 1.75-1.225 2.975T16.2 22zM12 9.9q-1.65 0-2.8-1.15t-1.15-2.8 1.15-2.8T12 2t2.8 1.15 1.15 2.8-1.15 2.8T12 9.9" />
                </svg>
            </div>
            <div class="label short">Contacts</div>
        </a>
        <a href="https://myadcenter.google.com/" class="icon-item">
            <div class="menuicon">
                <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24">
                    <path fill="currentColor"
                        d="M10.275 12q-.7 0-1.15-.525T8.8 10.25l.3-1.8q.2-1.075 1.013-1.763T12 6q1.1 0 1.913.688t1.012 1.762l.3 1.8q.125.7-.325 1.225T13.75 12zm.6-2h2.275l-.2-1.225q-.05-.35-.325-.562T12 8t-.612.213-.313.562zM3.1 12.975q-.575.025-.988-.225t-.537-.775q-.05-.225-.025-.45t.125-.425q0 .025-.025-.1-.05-.05-.25-.6-.05-.3.075-.575T1.8 9.35l.05-.05q.05-.475.388-.8t.837-.325q.075 0 .475.1l.075-.025q.125-.125.325-.187T4.375 8q.275 0 .488.088t.337.262q.025 0 .038.013t.037.012q.35.025.612.212t.388.513q.05.175.038.338t-.063.312q0 .025.025.1.175.175.275.388t.1.437q0 .1-.15.525-.025.05 0 .1l.05.4q0 .525-.437.9t-1.063.375zM20 13q-.825 0-1.412-.587T18 11q0-.3.088-.562t.237-.513l-.7-.625q-.25-.2-.088-.5T18 8.5h2q.825 0 1.413.588T22 10.5v.5q0 .825-.587 1.413T20 13M0 17v-.575q0-1.1 1.113-1.763T4 14q.325 0 .625.013t.575.062q-.35.5-.525 1.075T4.5 16.375V18H1q-.425 0-.712-.288T0 17m6 0v-.625q0-1.625 1.663-2.625t4.337-1q2.7 0 4.35 1T18 16.375V17q0 .425-.288.713T17 18H7q-.425 0-.712-.288T6 17m14-3q1.8 0 2.9.663t1.1 1.762V17q0 .425-.288.713T23 18h-3.5v-1.625q0-.65-.162-1.225t-.488-1.075q.275-.05.563-.062T20 14m-8 .75q-1.425 0-2.55.375T8.125 16H15.9q-.225-.5-1.338-.875T12 14.75M12.025 9" />
                </svg>
            </div>
            <div class="label short one">My Ad Ce...</div>
            <div class="label full">My Ad<br>Center</div>
        </a>
        <a href="https://business.google.com/" class="icon-item">
            <div class="menuicon">
                <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24">
                    <path fill="currentColor"
                        d="M22 8.5c0 1.37-1.12 2.5-2.5 2.5S17 9.87 17 8.5c0 1.37-1.12 2.5-2.5 2.5S12 9.87 12 8.5c0 1.37-1.12 2.5-2.5 2.5S7 9.87 7 8.5C7 9.87 5.88 11 4.5 11S2 9.87 2 8.5l1.39-5.42S3.68 2 4.7 2h14.6c1.02 0 1.31 1.08 1.31 1.08zm-1 3.7V20c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2v-7.8a3.96 3.96 0 0 0 4-.58c.69.55 1.56.88 2.5.88.95 0 1.82-.33 2.5-.88.69.55 1.56.88 2.5.88.95 0 1.82-.33 2.5-.88.68.55 1.56.88 2.5.88.53 0 1.04-.11 1.5-.3m-2 5.13c0-.2 0-.41-.05-.63l-.03-.16h-2.97v1.17h1.81c-.06.22-.14.44-.31.62-.33.33-.78.51-1.26.51-.5 0-.99-.21-1.35-.56-.69-.71-.69-1.86.02-2.58.69-.7 1.83-.7 2.55-.03l.14.13.84-.85-.16-.14c-.56-.52-1.3-.81-2.08-.81h-.01c-.81 0-1.57.31-2.14.87-.59.58-.92 1.34-.92 2.13 0 .8.31 1.54.88 2.09a3.2 3.2 0 0 0 2.22.91h.02c.8 0 1.51-.29 2.03-.8.47-.48.77-1.2.77-1.87" />
                </svg>
            </div>
            <div class="label short one">Business ...</div>
            <div class="label full">Business<br>Profile</div>
        </a>
        <a href="https://google.com/shopping/" class="icon-item">
            <div class="menuicon">
                <svg xmlns="http://www.w3.org/2000/svg" width="39" height="39" viewBox="0 0 24 24">
                    <path fill="currentColor"
                        d="M11.175 22q-.375 0-.75-.15t-.675-.45L2.6 14.25q-.3-.3-.438-.663t-.137-.737t.138-.75t.437-.675L11.4 2.6q.275-.275.65-.438T12.825 2H20q.825 0 1.413.587T22 4v7.175q0 .4-.15.763t-.425.637L12.6 21.4q-.3.3-.675.45t-.75.15M17.5 8q.625 0 1.063-.437T19 6.5t-.437-1.062T17.5 5t-1.062.438T16 6.5t.438 1.063T17.5 8" />
                </svg>
            </div>
            <div class="label short">Shopping</div>
        </a>

        <div class="separator"></div>

        <a href="https://docs.google.com/document/" class="icon-item">
            <div class="menuicon">
                <svg xmlns="http://www.w3.org/2000/svg" width="39" height="39" viewBox="0 0 24 24">
                    <path fill="currentColor"
                        d="M14.727 6.727H14V0H4.91c-.905 0-1.637.732-1.637 1.636v20.728c0 .904.732 1.636 1.636 1.636h14.182c.904 0 1.636-.732 1.636-1.636V6.727zm-.545 10.455H7.09v-1.364h7.09v1.364zm2.727-3.273H7.091v-1.364h9.818zm0-3.273H7.091V9.273h9.818zM14.727 6h6l-6-6z" />
                </svg>
            </div>
            <div class="label short">Docs</div>
        </a>
        <a href="https://docs.google.com/spreadsheets/" class="icon-item">
            <div class="menuicon">
                <svg xmlns="http://www.w3.org/2000/svg" width="39" height="39" viewBox="0 0 24 24">
                    <path fill="currentColor"
                        d="M11.318 12.545H7.91v-1.909h3.41v1.91zM14.728 0v6h6zm1.363 10.636h-3.41v1.91h3.41zm0 3.273h-3.41v1.91h3.41zM20.727 6.5v15.864c0 .904-.732 1.636-1.636 1.636H4.909a1.636 1.636 0 0 1-1.636-1.636V1.636C3.273.732 4.005 0 4.909 0h9.318v6.5zm-3.273 2.773H6.545v7.909h10.91v-7.91zm-6.136 4.636H7.91v1.91h3.41v-1.91z" />
                </svg>
            </div>
            <div class="label short">Sheets</div>
        </a>
        <a href="https://docs.google.com/presentation/" class="icon-item">
            <div class="menuicon">
                <svg xmlns="http://www.w3.org/2000/svg" width="39" height="39" viewBox="0 0 24 24">
                    <path fill="currentColor"
                        d="M16.09 15.273H7.91v-4.637h8.18zm1.728-8.523h2.91v15.614c0 .904-.733 1.636-1.637 1.636H4.909a1.636 1.636 0 0 1-1.636-1.636V1.636C3.273.732 4.005 0 4.909 0h9.068v6.75zm-.363 2.523H6.545v7.363h10.91zm-2.728-5.979V6h6.001l-6-6v3.294z" />
                </svg>
            </div>
            <div class="label short">Slides</div>
        </a>
        <a href="https://docs.google.com/forms/" class="icon-item">
            <div class="menuicon">
                <svg xmlns="http://www.w3.org/2000/svg" width="39" height="39" viewBox="0 0 24 24">
                    <path fill="currentColor"
                        d="M14.727 6h6l-6-6zm0 .727H14V0H4.91c-.905 0-1.637.732-1.637 1.636v20.728c0 .904.732 1.636 1.636 1.636h14.182c.904 0 1.636-.732 1.636-1.636V6.727zM7.91 17.318a.819.819 0 1 1 .001-1.638.819.819 0 0 1 0 1.638zm0-3.273a.819.819 0 1 1 .001-1.637.819.819 0 0 1 0 1.637zm0-3.272a.819.819 0 1 1 .001-1.638.819.819 0 0 1 0 1.638zm9 6.409h-6.818v-1.364h6.818zm0-3.273h-6.818v-1.364h6.818zm0-3.273h-6.818V9.273h6.818z" />
                </svg>
            </div>
            <div class="label short">Forms</div>
        </a>
        <a href="https://keep.google.com/" class="icon-item">
            <div class="menuicon">
                <svg xmlns="http://www.w3.org/2000/svg" width="39" height="39" viewBox="0 0 24 24">
                    <path fill="currentColor"
                        d="M4.908 0c-.904 0-1.635.733-1.635 1.637v20.726c0 .904.732 1.637 1.635 1.637H19.09c.904 0 1.637-.733 1.637-1.637V6.5h-6.5V0zm9.819 0v6h6zM11.97 8.229c.224 0 .571.031.765.072.2.04.576.185.842.312.828.414 1.467 1.164 1.774 2.088.168.511.188 1.34.05 1.865a3.75 3.75 0 0 1-1.277 1.952l-.25.193h-1.87c-2.134 0-1.931.042-2.478-.494a3.35 3.35 0 0 1-.984-1.844c-.148-.766-.053-1.437.32-2.203.19-.399.303-.556.65-.899.68-.679 1.513-1.037 2.458-1.042m-1.866 7.863h3.781v1.328h-3.779v-1.328z" />
                </svg>
            </div>
            <div class="label short">Keep</div>
        </a>
        <a href="https://google.com/finance/" class="icon-item">
            <div class="menuicon">
                <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24">
                    <path fill="currentColor"
                        d="M8 11.75V7.5q0-.625.438-1.062T9.5 6t1.063.438T11 7.5v4.25q0 .625-.437 1.063T9.5 13.25t-1.062-.437T8 11.75m5-.225V3.5q0-.625.438-1.062T14.5 2t1.063.438T16 3.5v8.025q0 .75-.462 1.125t-1.038.375-1.037-.375T13 11.525m-10 3.45V11.5q0-.625.438-1.062T4.5 10t1.063.438T6 11.5v3.475q0 .75-.462 1.125t-1.038.375-1.037-.375T3 14.975m2.4 6.075q-.65 0-.913-.612T4.7 19.35l4.1-4.1q.275-.275.663-.3t.687.25L13 17.65l5.6-5.6H18q-.425 0-.712-.288T17 11.05t.288-.712.712-.288h3q.425 0 .713.288t.287.712v3q0 .425-.288.713T21 15.05t-.712-.288T20 14.05v-.6l-6.25 6.25q-.275.275-.663.3t-.687-.25L9.55 17.3 6.1 20.75q-.125.125-.312.213t-.388.087" />
                </svg>
            </div>
            <div class="label short">Finance</div>
        </a>
        <a href="https://ads.google.com/" class="icon-item">
            <div class="menuicon">
                <svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 48 48">
                    <defs>
                        <mask id="ipTGoogleAds0">
                            <g fill="none" stroke="#fff" stroke-width="4">
                                <path fill="#555"
                                    d="M41.355 34.153L29.522 8.776a6 6 0 0 0-10.876 5.072L30.48 39.224a6 6 0 1 0 10.876-5.071Z" />
                                <path stroke-linecap="round"
                                    d="M23.438 26.536L17.52 39.224a6 6 0 0 1-7.974 2.902v0a6 6 0 0 1-2.902-7.973L18.374 9" />
                                <circle cx="12.083" cy="36.688" r="6" fill="#555"
                                    transform="rotate(25 12.083 36.688)" />
                            </g>
                        </mask>
                    </defs>
                    <path fill="currentColor" d="M0 0h48v48H0z" mask="url(#ipTGoogleAds0)" />
                </svg>
            </div>
            <div class="label short">Google Ads</div>
        </a>
        <a href="https://analytics.google.com/" class="icon-item">
            <div class="menuicon">
                <svg xmlns="http://www.w3.org/2000/svg" width="37" height="37" viewBox="0 0 24 24">
                    <path fill="currentColor"
                        d="M22.84 2.998v17.999a2.983 2.983 0 0 1-2.967 2.998 3 3 0 0 1-.368-.02 3.06 3.06 0 0 1-2.61-3.1V3.12A3.06 3.06 0 0 1 19.51.02a2.983 2.983 0 0 1 3.329 2.978zM4.133 18.055a2.973 2.973 0 1 0 0 5.945 2.973 2.973 0 0 0 0-5.945m7.872-9.01h-.05a3.06 3.06 0 0 0-2.892 3.126v7.985c0 2.167.954 3.482 2.35 3.763a2.978 2.978 0 0 0 3.57-2.927v-8.959a2.983 2.983 0 0 0-2.978-2.988" />
                </svg>
            </div>
            <div class="label short one">Google A...</div>
            <div class="label full">Google<br>Analytics</div>
        </a>
        <a href="https://passwords.google.com/" class="icon-item">
            <div class="menuicon">
                <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24">
                    <path fill="currentColor"
                        d="M11.71 10.33C11.01 8.34 9.11 7 7 7c-2.76 0-5 2.24-5 5s2.24 5 5 5c2.11 0 4.01-1.34 4.71-3.33l.23-.67H18v4h2v-4h2v-2H11.94zM7 15c-1.65 0-3-1.35-3-3s1.35-3 3-3 3 1.35 3 3-1.35 3-3 3"
                        opacity=".3" />
                    <path fill="currentColor"
                        d="M7 5c-3.86 0-7 3.14-7 7s3.14 7 7 7c2.72 0 5.17-1.58 6.32-4H16v4h6v-4h2V9H13.32C12.17 6.58 9.72 5 7 5m15 8h-2v4h-2v-4h-6.06l-.23.67C11.01 15.66 9.11 17 7 17c-2.76 0-5-2.24-5-5s2.24-5 5-5c2.11 0 4.01 1.34 4.71 3.33l.23.67H22zM7 9c-1.65 0-3 1.35-3 3s1.35 3 3 3 3-1.35 3-3-1.35-3-3-3m0 4c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1" />
                </svg>
            </div>
            <div class="label short one">Password ...</div>
            <div class="label full">Password<br>Manager</div>
        </a>
        <a href="https://one.google.com/" class="icon-item">
            <div class="menuicon">
                <svg xmlns="http://www.w3.org/2000/svg" width="43" height="43" viewBox="0 0 24 24">
                    <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                        stroke-width="2">
                        <path d="M11 5v13.982a2 2 0 0 0 4 0V5a2 2 0 1 0-4 0" />
                        <path
                            d="M6.63 8.407a2.125 2.125 0 0 0-.074 2.944c.77.834 2.051.869 2.862.077l4.95-4.834c.812-.792.846-2.11.076-2.945a1.984 1.984 0 0 0-2.861-.077z" />
                    </g>
                </svg>
            </div>
            <div class="label short one">Google O...</div>
            <div class="label full">Google<br>One</div>
        </a>
        <a href="https://google.com/travel/" class="icon-item">
            <div class="menuicon">
                <svg xmlns="http://www.w3.org/2000/svg" width="43" height="43" viewBox="0 0 24 24">
                    <path fill="currentColor"
                        d="M11 6h2V4h-2zm1 6q-1.9 0-3.625-.788T5 9.45V8q0-.825.588-1.412T7 6h2V3q0-.425.288-.712T10 2h4q.425 0 .713.288T15 3v3h2q.825 0 1.413.588T19 8v1.45q-1.65.975-3.375 1.763T12 12m-5 9q-.825 0-1.412-.587T5 19v-7.3q1.4.85 2.888 1.45t3.112.8V14q0 .425.288.713T12 15t.713-.288T13 14v-.05q1.625-.2 3.113-.8T19 11.7V19q0 .825-.587 1.413T17 21q0 .425-.288.713T16 22q-.4 0-.562-.363T15 21H9q0 .425-.288.713T8 22q-.4 0-.562-.363T7 21" />
                </svg>
            </div>
            <div class="label short">Travel</div>
        </a>
        <a href="https://classroom.google.com/" class="icon-item">
            <div class="menuicon">
                <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24">
                    <path fill="currentColor"
                        d="M1.637 1.637C.732 1.637 0 2.369 0 3.273v17.454c0 .904.732 1.636 1.637 1.636h20.726c.905 0 1.637-.732 1.637-1.636V3.273c0-.904-.732-1.636-1.637-1.636zm.545 2.181h19.636v16.364h-2.726v-1.09h-4.91v1.09h-12zM12 8.182a1.636 1.636 0 1 0 0 3.273 1.636 1.636 0 1 0 0-3.273m-4.363 1.91c-.678 0-1.229.55-1.229 1.226a1.228 1.228 0 0 0 2.455 0c0-.677-.549-1.226-1.226-1.226m8.726 0a1.227 1.227 0 1 0 0 2.453 1.227 1.227 0 0 0 0-2.453M12 12.545c-1.179 0-2.413.401-3.148 1.006a4.1 4.1 0 0 0-1.215-.188c-1.314 0-2.729.695-2.729 1.559v.896h14.184v-.896c0-.864-1.415-1.559-2.729-1.559-.41 0-.83.068-1.215.188-.735-.605-1.969-1.006-3.148-1.006" />
                </svg>
            </div>
            <div class="label short">Classroom</div>
        </a>
        <a href="https://books.google.com/" class="icon-item">
            <div class="menuicon">
                <svg xmlns="http://www.w3.org/2000/svg" width="41" height="41" viewBox="0 0 24 24">
                    <path fill="currentColor"
                        d="M18 22a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-6v7L9.5 7.5 7 9V2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2z" />
                </svg>
            </div>
            <div class="label short">Books</div>
        </a>
        <a href="https://blogger.com/" class="icon-item">
            <div class="menuicon">
                <svg xmlns="http://www.w3.org/2000/svg" width="37" height="37" viewBox="0 0 24 24">
                    <path fill="currentColor"
                        d="M21.976 24H2.026C.9 24 0 23.1 0 21.976V2.026C0 .9.9 0 2.025 0H22.05C23.1 0 24 .9 24 2.025v19.95C24 23.1 23.1 24 21.976 24M12 3.975H9A5.025 5.025 0 0 0 3.975 9v6A5.025 5.025 0 0 0 9 20.024h6A5.025 5.025 0 0 0 20.024 15v-3.975c0-.6-.45-1.05-1.05-1.05H18a.995.995 0 0 1-.976-.976A5.025 5.025 0 0 0 12 3.973zm3.074 12H9c-.525 0-.975-.45-.975-.975s.45-.976.975-.976h6.074c.526 0 .977.45.977.976s-.45.976-.975.976zm-2.55-7.95c.527 0 .976.45.976.975s-.45.975-.975.975h-3.6c-.525 0-.976-.45-.976-.975s.45-.975.975-.975z" />
                </svg>
            </div>
            <div class="label short">Blogger</div>
        </a>
        <a href="https://earth.google.com/" class="icon-item">
            <div class="menuicon">
                <svg xmlns="http://www.w3.org/2000/svg" width="43" height="43" viewBox="0 0 24 24">
                    <path fill="currentColor"
                        d="M12 12.14c-.91-1.37-1.86-2.36-2.86-2.95-1-.6-1.87-.81-2.64-.64-.73.18-1.36.59-1.86 1.25-.44.59-.64 1.26-.64 2.01V12c0 .78.11 1.58.36 2.39.09.25.14.25.19 0 .12-.62.41-1.08.86-1.36.46-.28 1.06-.27 1.81.02.75.3 1.48.95 2.2 1.9 1.28 1.72 2.78 2.77 4.5 3.14 2.22.32 3.89-.39 5.02-2.09.31-.61.56-1.14.7-1.61.09-.31.05-.34-.14-.09-.47.62-1.1 1.03-1.9 1.2-.8.2-1.71 0-2.74-.5-1.03-.57-1.98-1.5-2.86-2.86m4.97-3.98c-1.56-2.35-3.25-3.66-5.06-3.99-1.44-.22-3 .28-4.69 1.5-.22.16-.32.24-.31.26.02.02.15-.04.4-.16 2.5-1.22 4.91.06 7.22 3.84.5.84 1.02 1.5 1.57 1.97s1.06.75 1.55.84c.48.08.92.08 1.31-.04.39-.13.74-.33 1.04-.61 0-.6-.09-1.27-.31-1.97-.5.12-.95.08-1.34-.12-.39-.18-.85-.71-1.38-1.52M12 2c2.75 0 5.1 1 7.05 2.95S22 9.25 22 12s-1 5.1-2.95 7.05S14.75 22 12 22s-5.1-1-7.05-2.95S2 14.75 2 12s1-5.1 2.95-7.05S9.25 2 12 2" />
                </svg>
            </div>
            <div class="label short">Earth</div>
        </a>
        <a href="https://artsandculture.google.com/" class="icon-item">
            <div class="menuicon">
                <svg xmlns="http://www.w3.org/2000/svg" width="43" height="43" viewBox="0 0 24 24">
                    <path fill="currentColor"
                        d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2m5 15H7v-2h10zm-9-3v-3h2v3zm3 0v-3h2v3zm3 0v-3h2v3zm3-4H7V8.5L12 6l5 2.5z" />
                </svg>
            </div>
            <div class="label short one">Arts and ...</div>
            <div class="label full">Arts and<br>Culture</div>
        </a>
        <a href="https://google.com/save/" class="icon-item">
            <div class="menuicon">
                <svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 24 24">
                    <path fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                        d="M6 6.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C7.52 3 8.08 3 9.2 3h5.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C18 4.52 18 5.08 18 6.2v13.305c0 .486 0 .729-.101.862a.5.5 0 0 1-.37.198c-.167.01-.369-.125-.773-.394L12 17l-4.756 3.17c-.404.27-.606.405-.774.395a.5.5 0 0 1-.369-.198C6 20.234 6 19.991 6 19.505z" />
                </svg>
            </div>
            <div class="label short">Saved</div>
        </a>
        <a href="https://chromewebstore.google.com/" class="icon-item">
            <div class="menuicon">
                <svg xmlns="http://www.w3.org/2000/svg" width="39" height="39" viewBox="0 0 24 24">
                    <path fill="currentColor"
                        d="M0 1.637v19.09c0 .9.736 1.636 1.636 1.636h.131a10.4 10.4 0 0 1-.13-1.636 10.3 10.3 0 0 1 1.667-5.64l4.202 7.276h1.128A3.77 3.77 0 0 1 12 16.958a3.77 3.77 0 0 1 3.366 5.406h1.048a4.7 4.7 0 0 0-1.587-5.406h6.83a10.34 10.34 0 0 1 .577 5.406h.13c.9 0 1.636-.737 1.636-1.637V1.637Zm9.273 2.181h5.454a1.09 1.09 0 1 1 0 2.182H9.273a1.09 1.09 0 1 1 0-2.182M12 10.364a10.36 10.36 0 0 1 9.233 5.652H12a4.71 4.71 0 0 0-4.677 4.149L3.91 14.25A10.34 10.34 0 0 1 12 10.364" />
                </svg>
            </div>
            <div class="label short one">Chrome ...</div>
            <div class="label full">Chrome<br>Web Store</div>
        </a>
    </div>
    <!-- ________________ End of Google App Menu ________________ -->

    <div class="centerDiv">
        <div class="leftDiv" id="leftDiv">

            <!-- ____________clock___________ -->
            <div class="clock" id="analogClock">

                <svg fill="none" height="100%" viewBox="0 0 461 461" width="100%" xmlns="http://www.w3.org/2000/svg">
                    <path class="bgLightTint" clip-rule="evenodd"
                        d="M93.6379 63.9405C89.7543 78.4344 78.4333 89.7554 63.9394 93.639L56.4989 95.6327C34.0934 101.636 20.7969 124.666 26.8005 147.072L28.7201 154.236C32.6038 168.73 28.46 184.195 17.8497 194.805L12.3015 200.353C-4.1005 216.755 -4.10051 243.348 12.3015 259.75L17.9236 265.372C28.5338 275.983 32.6776 291.447 28.794 305.941L26.8004 313.382C20.7968 335.787 34.0933 358.817 56.4989 364.821L63.9395 366.815C78.4334 370.698 89.7544 382.019 93.638 396.513L95.6322 403.956C101.636 426.361 124.666 439.658 147.071 433.654L154.513 431.66C169.007 427.777 184.472 431.92 195.082 442.531L200.353 447.802C216.755 464.204 243.348 464.204 259.75 447.802L265.097 442.455C275.707 431.845 291.172 427.701 305.666 431.585L313.383 433.653C335.788 439.656 358.818 426.36 364.822 403.954L366.815 396.515C370.699 382.021 382.02 370.7 396.514 366.816L403.955 364.822C426.361 358.819 439.657 335.789 433.654 313.383L431.586 305.665C427.702 291.172 431.846 275.707 442.456 265.096L447.802 259.75C464.204 243.348 464.204 216.755 447.802 200.353L442.53 195.081C431.92 184.471 427.776 169.006 431.66 154.512L433.654 147.071C439.657 124.665 426.361 101.635 403.955 95.6312L396.514 93.6373C382.02 89.7537 370.699 78.4327 366.815 63.9389L364.822 56.4994C358.818 34.0938 335.788 20.7974 313.383 26.8009L305.942 28.7946C291.448 32.6782 275.983 28.5345 265.373 17.9242L259.75 12.3015C243.348 -4.10051 216.755 -4.1005 200.353 12.3015L194.806 17.8491C184.196 28.4593 168.731 32.6031 154.237 28.7195L147.071 26.7995C124.666 20.7959 101.636 34.0924 95.6322 56.498L93.6379 63.9405Z"
                        fill="#FFF" fill-rule="evenodd" />
                </svg>
                <div class="centerPoint">
                    <div class="sui" id="hour"></div>
                    <div class="sui" id="second"></div>
                    <div class="sui" id="minute"></div>
                </div>
            </div>
            <div class="clock" id="digitalClock">
                <svg fill="none" height="100%" viewBox="60 0 460 450" width="100%" xmlns="http://www.w3.org/2000/svg">
                    <!-- Background oval shape -->
                    <rect class="bgLightTint" height="350" rx="180" width="460" x="60" y="40"></rect>

                    <!-- Date Text -->
                    <text id="digidate" x="290" y="120" text-anchor="middle" fill="#E2EEFF" font-size="28"
                        font-family="Arial" class="digidate">Thu 9</text>

                    <!-- Full Time Text (Hour:Minute) -->
                    <text x="290" y="260" id="digiclock" class="digiclock" font-family="Arial">
                        <tspan id="digihours">6</tspan>
                        <tspan id="digicolon" dx="-34">:</tspan>
                        <tspan id="digiminutes" dx="-34">28</tspan>
                    </text>

                    <!-- AM/PM Text -->
                    <text id="amPm" x="290" y="330" text-anchor="middle" fill="#E2EEFF" font-size="28"
                        font-family="Arial" class="amPm">AM</text>
                </svg>
            </div>

            <!-- ____________end of clock______________ -->

            <div class="ttteexxtt">
                <div id="userText" contenteditable="true" spellcheck="false">Click here to edit</div>
                <div id="date"></div>
            </div>
        </div>
        <!-- ---------end of leftDiv--------------- -->

        <div class="rightDiv" id="rightDiv">
            <!-- ---weather stuff--------- -->
            <div class="topDiv" id="hideWeather">
                <div class="lrectangle bgLightTint">
                    <div id="conditionText"></div>
                    <div class="cconnt">
                        <div class="humidityBar">
                            <div class="thinLine"></div>
                            <div class="slider" id="slider">
                                <div id="humidityLevel"></div>
                            </div>
                        </div>

                        <div class="tilesContainer">
                            <div class="tiles">
                                <div class="icon">
                                    <!-- <img src="./svgs/feels.svg" alt=""> -->
                                    <svg fill="none" height="24" viewBox="0 0 24 24" width="24"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path id="darkFeelsLikeIcon" class="accentColor"
                                            d="M8 10.255V5C8 3.93913 8.42143 2.92172 9.17157 2.17157C9.92172 1.42143 10.9391 1 12 1C13.0609 1 14.0783 1.42143 14.8284 2.17157C15.5786 2.92172 16 3.93913 16 5V10.255C17.223 11.1066 18.1423 12.3262 18.6241 13.7365C19.1059 15.1467 19.125 16.6739 18.6788 18.0958C18.2325 19.5176 17.3441 20.76 16.1429 21.642C14.9416 22.524 13.4903 22.9996 12 22.9996C10.5097 22.9996 9.05837 22.524 7.85714 21.642C6.6559 20.76 5.7675 19.5176 5.32123 18.0958C4.87496 16.6739 4.89412 15.1467 5.37592 13.7365C5.85772 12.3262 6.77702 11.1066 8 10.255ZM8 16C8 17.0609 8.42143 18.0783 9.17157 18.8284C9.92172 19.5786 10.9391 20 12 20C13.0609 20 14.0783 19.5786 14.8284 18.8284C15.5786 18.0783 16 17.0609 16 16H8Z" />
                                    </svg>

                                </div>
                                <span id="feelsLike"></span>
                            </div>
                            <div class="tiles location">
                                <div class="icon">
                                    <img src="./svgs/location.svg" alt="">
                                </div>
                                <span class="location_spn" id="location"></span>
                            </div>
                        </div>
                        <!-- end of tilesContainer -->
                    </div>
                </div>

                <!-- -----rAndakar-------- -->
                <div class="rAndakar">
                    <svg fill="none" height="100%" viewBox="0 0 288 288" width="100%"
                        xmlns="http://www.w3.org/2000/svg">
                        <rect class="bgLightTint" fill="#E2EEFF" height="304.742" rx="123.401"
                            transform="rotate(45 164.485 -51)" width="246.801" x="164.485" y="-51" />
                    </svg>
                    <div class="wInfo">
                        <div id="temp">?</div>
                        <img alt="weatherIcon" id="wIcon" src="./svgs/defaultWeather.svg">
                    </div>
                </div>
            </div>
            <!-- ------end of weather stuff------------ -->

            <!-- ----------searchbar-------------- -->
            <div class="searchbar bgLightTint" id="searchbar">

                <div class="searchIcon">
                    <svg fill="none" height="100%" viewBox="0 0 45 45" width="100%" xmlns="http://www.w3.org/2000/svg">
                        <path id="searchIconDark" class="accentColor" clip-rule="evenodd"
                            d="M5.00087 20.0137C5.00087 18.0425 5.38915 16.0906 6.14353 14.2695C6.89791 12.4484 8.00363 10.7936 9.39755 9.39981C10.7915 8.00598 12.4463 6.90034 14.2675 6.146C16.0888 5.39167 18.0408 5.00342 20.0121 5.00342C21.9834 5.00342 23.9354 5.39167 25.7566 6.146C27.5779 6.90034 29.2327 8.00598 30.6266 9.39981C32.0205 10.7936 33.1262 12.4484 33.8806 14.2695C34.635 16.0906 35.0233 18.0425 35.0233 20.0137C35.0233 23.9946 33.4417 27.8125 30.6266 30.6275C27.8114 33.4425 23.9933 35.0239 20.0121 35.0239C16.0309 35.0239 12.2127 33.4425 9.39755 30.6275C6.5824 27.8125 5.00087 23.9946 5.00087 20.0137ZM20.0121 1.23625e-07C16.8268 0.000456127 13.6877 0.761065 10.8556 2.21861C8.02347 3.67616 5.58012 5.78855 3.72863 8.38023C1.87714 10.9719 0.670974 13.968 0.210373 17.1196C-0.250229 20.2711 0.0480379 23.4871 1.08039 26.5002C2.11273 29.5133 3.84934 32.2365 6.14589 34.4435C8.44244 36.6505 11.2326 38.2776 14.2845 39.1895C17.3364 40.1014 20.5618 40.2718 23.6928 39.6865C26.8238 39.1013 29.7699 37.7772 32.2862 35.8245L40.7601 44.2977C41.2319 44.7534 41.8639 45.0056 42.5199 44.9999C43.1758 44.9942 43.8033 44.7311 44.2672 44.2673C44.7311 43.8034 44.9942 43.176 44.9999 42.52C45.0056 41.8641 44.7534 41.2322 44.2977 40.7603L35.8239 32.287C38.1208 29.3287 39.5415 25.7852 39.9244 22.0595C40.3073 18.3338 39.637 14.5754 37.9897 11.2118C36.3424 7.84812 33.7843 5.01415 30.6062 3.03213C27.4281 1.05011 23.7576 -0.000416085 20.0121 1.23625e-07ZM20.0121 30.0205C22.6662 30.0205 25.2117 28.9662 27.0884 27.0896C28.9652 25.2129 30.0195 22.6676 30.0195 20.0137C30.0195 17.3597 28.9652 14.8144 27.0884 12.9378C25.2117 11.0611 22.6662 10.0068 20.0121 10.0068C17.3579 10.0068 14.8125 11.0611 12.9357 12.9378C11.059 14.8144 10.0046 17.3597 10.0046 20.0137C10.0046 22.6676 11.059 25.2129 12.9357 27.0896C14.8125 28.9662 17.3579 30.0205 20.0121 30.0205Z"
                            fill-rule="evenodd" />
                    </svg>
                </div>
                <div class="searchIcon">
                    <!-- Dropdown Button -->
                    <div class="dropdown search-dropdown">
                        <!-- Default Search Engine -->
                        <button id="default-dropdown-item" style="cursor: pointer;" role="button" class="dropdown-btn">
                            <div id="default-dropdown" data-default data-engine-name="default" data-engine="0"
                                class="dropdown-item">
                                <svg fill="none" height="24" viewBox="0 0 24 24" width="24"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path class="darkIconForDarkTheme" fill="#fffffff0"
                                        style="transform: scale(0.86); transform-origin: center;"
                                        d="M12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12q0-.175-.012-.363t-.013-.312q-.125.725-.675 1.2T18 13h-2q-.825 0-1.412-.587T14 11v-1h-4V8q0-.825.588-1.412T12 6h1q0-.575.313-1.012t.762-.713q-.5-.125-1.012-.2T12 4Q8.65 4 6.325 6.325T4 12h5q1.65 0 2.825 1.175T13 16v1h-3v2.75q.5.125.988.188T12 20" />
                                </svg>
                                <span class="engine-name" id="defaultEngineDD">
                                    Default
                                </span>
                            </div>
                        </button>
                        <div class="dropdown-content">
                            <!-- Default Google Icon -->
                            <div id="google-dropdown" data-engine-name="google" data-engine="1" class="dropdown-item">
                                <svg fill="none" height="28" viewBox="0 0 28 28" width="28"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <rect class="accentColor" height="28" rx="14" width="28" />
                                    <path class="darkIconForDarkTheme"
                                        style="transform: scale(0.85); transform-origin: center;"
                                        d="M24.805 12.0177C24.9359 12.756 25.0011 13.504 25 14.2534C25 17.6 23.7796 20.4297 21.6559 22.345H21.6587C19.8016 24.0265 17.2487 25 14.2216 25C11.2455 25 8.3912 23.8411 6.28674 21.7783C4.18227 19.7154 3 16.9176 3 14.0004C3 11.0831 4.18227 8.28528 6.28674 6.22244C8.3912 4.15961 11.2455 3.00073 14.2216 3.00073C17.0073 2.96875 19.6976 3.99459 21.7289 5.86338L18.5251 9.00378C17.367 7.92165 15.8214 7.32907 14.2216 7.35383C11.2942 7.35383 8.80719 9.28977 7.92068 11.8967C7.45064 13.2627 7.45064 14.7421 7.92068 16.1082H7.92489C8.8156 18.711 11.2984 20.6469 14.2258 20.6469C15.7379 20.6469 17.0368 20.2674 18.044 19.5964H18.0398C18.6246 19.2167 19.1248 18.7247 19.5103 18.1502C19.8958 17.5758 20.1585 16.9307 20.2827 16.2539H14.2216V12.0191L24.805 12.0177Z"
                                        fill="#fffffff0" />
                                </svg>
                                <span class="engine-name" id="googleEngineDD">
                                    Google
                                </span>
                            </div>
                            <!-- Duck -->
                            <div data-engine="2" data-engine-name="duck" id="duck-dropdown" class="dropdown-item">
                                <svg fill="none" height="28" viewBox="0 0 28 28" width="28"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <rect class="accentColor" height="28" rx="14" width="28" />
                                    <path class="darkIconForDarkTheme"
                                        style="transform: scale(0.85); transform-origin: center;"
                                        d="M10.5 7C10.1022 7 9.72064 7.15804 9.43934 7.43934C9.15804 7.72064 9 8.10218 9 8.5C9 8.89782 9.15804 9.27936 9.43934 9.56066C9.72064 9.84196 10.1022 10 10.5 10C10.8978 10 11.2794 9.84196 11.5607 9.56066C11.842 9.27936 12 8.89782 12 8.5C12 8.10218 11.842 7.72064 11.5607 7.43934C11.2794 7.15804 10.8978 7 10.5 7ZM12 4C13.3261 4 14.5979 4.52678 15.5355 5.46447C16.4732 6.40215 17 7.67392 17 9C17 10.7 16.15 12.2 14.86 13.1C16.44 13.25 18.22 13.61 20 14.5C23 16 24 14 24 14C24 14 23 23 17 23H11C11 23 6 23 6 18C6 15 9 14 8 12C4 12 4 8.5 4 8.5C5 9 6.24 9 7 8.65C7.09333 7.3872 7.66043 6.20632 8.58766 5.34399C9.5149 4.48166 10.7338 4.0016 12 4Z"
                                        fill="#fffffff0" />
                                </svg>
                                <span class="engine-name" id="duckEngineDD">
                                    Duck
                                </span>
                            </div>
                            <!-- Bing -->
                            <div data-engine="3" data-engine-name="bing" id="bing-dropdown" class="dropdown-item">
                                <svg fill="none" height="28" viewBox="0 0 28 28" width="28"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <rect class="accentColor" height="28" rx="14" width="28" />
                                    <path class="darkIconForDarkTheme"
                                        style="transform: scale(0.95); transform-origin: center;"
                                        d="M22.9991 13.1645C22.9954 13.0734 22.9651 12.9855 22.9119 12.9118C22.8588 12.8382 22.7853 12.7822 22.7007 12.751L13.8694 9.98251C13.7046 9.93107 13.6294 10.0197 13.7018 10.1788L15.3442 13.8304C15.4167 13.9904 15.604 14.18 15.7602 14.2524L18.0135 15.2966C18.1697 15.369 18.1735 15.4957 18.021 15.5776L8.40754 20.7525C8.25601 20.8345 8.23624 20.8059 8.36425 20.6887L12.0575 17.3219C12.197 17.1796 12.28 16.9905 12.291 16.7904L12.2947 6.58526C12.291 6.49394 12.2606 6.40578 12.2073 6.33199C12.154 6.25821 12.0803 6.20212 11.9954 6.17084L8.2993 5.01334C8.13459 4.9619 8 5.06383 8 5.24008V20.7211C8 20.8974 8.11483 21.1241 8.25601 21.2251L12.0114 23.9183C12.1526 24.0193 12.3879 24.0279 12.5357 23.9373L22.7308 17.723C22.8093 17.6688 22.8744 17.597 22.921 17.5133C22.9677 17.4295 22.9947 17.336 23 17.24V13.1645H22.9991Z"
                                        fill="#fffffff0" />
                                </svg>
                                <span class="engine-name" id="bingEngineDD">
                                    Bing
                                </span>
                            </div>

                            <div data-engine="4" data-engine-name="brave" id="brave-dropdown" class="dropdown-item">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                                    <rect class="accentColor" height="24" rx="12" width="24" />
                                    <path class="darkIconForDarkTheme"
                                        style="transform: scale(0.9); transform-origin: center;" fill-rule="evenodd"
                                        d="m15.013 2l1.716 1.983s1.507-.426 2.218.299a62 62 0 0 1 1.298 1.364l-.46 1.152l.585 1.705s-1.723 6.65-1.925 7.463c-.398 1.599-.67 2.217-1.8 3.027a152 152 0 0 1-3.742 2.584c-.287.2-.608.423-.903.423s-.617-.224-.904-.423q-.117-.083-.226-.153a152 152 0 0 1-3.516-2.43c-1.13-.811-1.402-1.43-1.8-3.028c-.202-.812-1.925-7.463-1.925-7.463l.586-1.705l-.46-1.152s.585-.64 1.297-1.364c.711-.725 2.218-.299 2.218-.299L8.986 2zM7.751 5.241s-2.207 2.719-2.207 3.3c0 .48.19.668.414.89q.07.069.143.146l1.655 1.79l.054.057c.165.169.409.418.237.832l-.035.084c-.189.449-.42 1.002-.125 1.563c.314.597.853.995 1.199.93c.345-.067 1.156-.498 1.454-.696s1.243-.991 1.243-1.295c0-.253-.68-.675-1.01-.88l-.147-.093l-.162-.104c-.301-.19-.845-.536-.859-.688c-.017-.188-.01-.244.233-.709c.051-.099.112-.205.174-.315c.232-.405.49-.86.433-1.184c-.064-.368-.63-.578-1.107-.757l-.175-.065l-.498-.19v-.001a44 44 0 0 1-1.096-.426c-.12-.057-.09-.11.277-.146l.178-.019c.455-.05 1.292-.14 1.7-.024l.264.073c.457.127 1.018.281 1.072.37l.027.042c.052.075.085.123.028.44l-.094.508c-.127.672-.324 1.724-.349 1.96l-.011.095c-.032.263-.053.438.247.508l.078.018c.338.08.834.195 1.014.195c.179 0 .675-.116 1.013-.195l.078-.018c.3-.07.279-.245.247-.508l-.01-.095c-.026-.236-.223-1.285-.35-1.957l-.094-.51c-.057-.318-.024-.366.028-.44l.027-.043c.054-.089.615-.243 1.072-.37l.265-.073c.407-.116 1.245-.025 1.699.024l.178.019c.367.035.398.09.277.146c-.087.041-.618.244-1.096.426l-.498.19l-.174.066c-.479.179-1.043.39-1.108.757c-.058.325.202.779.433 1.185c.062.109.123.215.175.314c.242.465.249.52.232.709c-.014.153-.558.497-.86.688c-.07.044-.127.08-.16.104l-.148.093c-.33.205-1.01.627-1.01.88c0 .304.945 1.098 1.243 1.295c.298.198 1.11.63 1.455.695c.345.066.884-.332 1.198-.929c.296-.56.064-1.114-.124-1.563l-.036-.084c-.171-.414.072-.663.237-.832l.054-.056l1.655-1.791q.074-.078.144-.146c.223-.222.413-.41.413-.89c0-.581-2.207-3.3-2.207-3.3s-1.863.363-2.114.363c-.2 0-.587-.136-.99-.277l-.307-.107c-.503-.17-.837-.172-.837-.172h.009h-.018H12c-.006 0-.34.003-.838.172q-.152.052-.306.107c-.404.141-.79.277-.99.277c-.252 0-2.115-.363-2.115-.363m5.688 9.78c-.59-.31-1.325-.575-1.44-.575s-.85.265-1.439.576l-.374.196c-.395.207-.674.354-.78.422c-.137.087-.053.251.071.34c.125.09 1.797 1.41 1.96 1.556l.065.06c.156.143.356.326.498.326c.141 0 .34-.183.497-.326l.066-.06a99 99 0 0 1 1.959-1.555c.124-.09.208-.254.071-.341c-.105-.068-.385-.214-.778-.421z"
                                        clip-rule="evenodd" fill="#fffffff0" />
                                </svg>
                                <span class="engine-name" id="braveEngineDD">
                                    Brave
                                </span>
                            </div>

                            <div data-engine="5" data-engine-name="youtube" id="youtube-dropdown" class="dropdown-item">
                                <svg fill="none" height="28" viewBox="0 0 28 28" width="28"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <rect class="accentColor" height="28" rx="14" width="28" />
                                    <path class="darkIconForDarkTheme"
                                        style="transform: scale(0.95); transform-origin: center;"
                                        d="M12 17L17.19 14L12 11V17ZM23.56 9.17C23.69 9.64 23.78 10.27 23.84 11.07C23.91 11.87 23.94 12.56 23.94 13.16L24 14C24 16.19 23.84 17.8 23.56 18.83C23.31 19.73 22.73 20.31 21.83 20.56C21.36 20.69 20.5 20.78 19.18 20.84C17.88 20.91 16.69 20.94 15.59 20.94L14 21C9.81 21 7.2 20.84 6.17 20.56C5.27 20.31 4.69 19.73 4.44 18.83C4.31 18.36 4.22 17.73 4.16 16.93C4.09 16.13 4.06 15.44 4.06 14.84L4 14C4 11.81 4.16 10.2 4.44 9.17C4.69 8.27 5.27 7.69 6.17 7.44C6.64 7.31 7.5 7.22 8.82 7.16C10.12 7.09 11.31 7.06 12.41 7.06L14 7C18.19 7 20.8 7.16 21.83 7.44C22.73 7.69 23.31 8.27 23.56 9.17Z"
                                        fill="#fffffff0" />
                                </svg>
                                <span class="engine-name" id="youtubeEngineDD">
                                    YouTube
                                </span>
                            </div>

                            <div data-engine="6" data-engine-name="gImages" id="gImages-dropdown" class="dropdown-item">
                                <svg height="100%" width="100%" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
                                    <rect class="accentColor" height="100%" rx="50%" width="100%" />
                                    <path class="darkIconForDarkTheme" fill="#fffffff0"
                                        style="transform: scale(0.8); transform-origin: center;"
                                        d="M 24.84375 0 C 24.351563 0.078125 23.992188 0.503906 24 1 L 24 11 L 13 11 C 12.96875 11 12.9375 11 12.90625 11 C 12.65625 11.019531 12.421875 11.128906 12.25 11.3125 L 12.25 11.34375 C 12.226563 11.363281 12.207031 11.382813 12.1875 11.40625 L 0.25 24.3125 C -0.0273438 24.605469 -0.101563 25.039063 0.0625 25.40625 C 0.226563 25.777344 0.597656 26.007813 1 26 L 11 26 L 11 37 C 10.992188 37.28125 11.105469 37.554688 11.3125 37.75 L 24.3125 49.75 C 24.605469 50.027344 25.039063 50.101563 25.40625 49.9375 C 25.777344 49.773438 26.007813 49.402344 26 49 L 26 39 L 37 39 C 37.28125 39.007813 37.554688 38.894531 37.75 38.6875 L 49.75 25.6875 C 50.027344 25.394531 50.101563 24.960938 49.9375 24.59375 C 49.773438 24.222656 49.402344 23.992188 49 24 L 39 24 L 39 13 C 39.007813 12.71875 38.894531 12.445313 38.6875 12.25 L 25.6875 0.25 C 25.460938 0.0390625 25.148438 -0.0507813 24.84375 0 Z M 26 3.3125 L 36.5 13 L 27.25 22.25 C 26.480469 21.363281 26 20.210938 26 18.9375 L 26 12 C 26 11.96875 26 11.9375 26 11.90625 Z M 13 13.5 L 22.25 22.75 C 21.363281 23.519531 20.210938 24 18.9375 24 L 3.3125 24 Z M 25 22.5625 C 25.597656 23.558594 26.441406 24.402344 27.4375 25 C 26.441406 25.597656 25.597656 26.441406 25 27.4375 C 24.402344 26.441406 23.558594 25.597656 22.5625 25 C 23.558594 24.402344 24.402344 23.558594 25 22.5625 Z M 31.0625 26 L 46.6875 26 L 37 36.5 L 27.75 27.25 C 28.636719 26.480469 29.789063 26 31.0625 26 Z M 22.75 27.75 C 23.519531 28.636719 24 29.789063 24 31.0625 L 24 38 C 24 38.03125 24 38.0625 24 38.09375 L 24 46.6875 L 13.5 37 Z" />
                                </svg>
                                <span class="engine-name" id="gImagesEngineDD">Images</span>
                            </div>

                            <div data-engine="7" data-engine-name="reddit" id="reddit-dropdown" class="dropdown-item">
                                <svg height="100%" width="100%" viewBox="0 0 256 256"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <rect class="accentColor" height="100%" rx="50%" width="100%" />
                                    <path class="darkIconForDarkTheme" fill="#fffffff0"
                                        style="transform: scale(1.1); transform-origin: center;"
                                        d="M213.15 129.22c0-10.376-8.391-18.617-18.617-18.617a18.74 18.74 0 0 0-12.97 5.189c-12.818-9.157-30.368-15.107-49.9-15.87l8.544-39.981l27.773 5.95c.307 7.02 6.104 12.667 13.278 12.667c7.324 0 13.275-5.95 13.275-13.278c0-7.324-5.95-13.275-13.275-13.275c-5.188 0-9.768 3.052-11.904 7.478l-30.976-6.562c-.916-.154-1.832 0-2.443.458c-.763.458-1.22 1.22-1.371 2.136l-9.464 44.558c-19.837.612-37.692 6.562-50.662 15.872a18.74 18.74 0 0 0-12.971-5.188c-10.377 0-18.617 8.391-18.617 18.617c0 7.629 4.577 14.037 10.988 16.939a33.6 33.6 0 0 0-.458 5.646c0 28.686 33.42 52.036 74.621 52.036c41.202 0 74.622-23.196 74.622-52.036a35 35 0 0 0-.458-5.646c6.408-2.902 10.985-9.464 10.985-17.093M85.272 142.495c0-7.324 5.95-13.275 13.278-13.275c7.324 0 13.275 5.95 13.275 13.275s-5.95 13.278-13.275 13.278c-7.327.15-13.278-5.953-13.278-13.278m74.317 35.251c-9.156 9.157-26.553 9.768-31.588 9.768c-5.188 0-22.584-.765-31.59-9.768c-1.371-1.373-1.371-3.51 0-4.883c1.374-1.371 3.51-1.371 4.884 0c5.8 5.8 18.008 7.782 26.706 7.782s21.058-1.983 26.704-7.782c1.374-1.371 3.51-1.371 4.884 0c1.22 1.373 1.22 3.51 0 4.883m-2.443-21.822c-7.325 0-13.275-5.95-13.275-13.275s5.95-13.275 13.275-13.275c7.327 0 13.277 5.95 13.277 13.275c0 7.17-5.95 13.275-13.277 13.275" />
                                </svg>
                                <span class="engine-name" id="redditEngineDD">Reddit</span>
                            </div>

                            <div data-engine="8" data-engine-name="wikipedia" id="wikipedia-dropdown"
                                class="dropdown-item">
                                <svg height="100%" width="100%" viewBox="0 -0.7 32 32"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <rect class="accentColor" height="100%" rx="50%" width="100%" />
                                    <path class="darkIconForDarkTheme" fill="#fffffff0"
                                        style="transform: scale(0.85); transform-origin: center;"
                                        d="M30 9.215a.31.31 0 0 1-.313.308h-1.68l-7.616 16.215a.31.31 0 0 1-.278.18h-.004a.31.31 0 0 1-.28-.172l-3.614-7.168l-3.902 7.18a.313.313 0 0 1-.555-.016L4.055 9.523H2.313A.31.31 0 0 1 2 9.215V8.39a.31.31 0 0 1 .313-.309h6.21a.31.31 0 0 1 .313.309v.824a.31.31 0 0 1-.313.308H7.188l5.316 12.262l2.766-5.168l-3.508-7.09h-.844a.313.313 0 0 1-.313-.312v-.82c0-.172.141-.313.313-.313h4.598a.31.31 0 0 1 .308.313v.82a.307.307 0 0 1-.308.308h-.813l2.02 4.415l2.402-4.415h-1.473a.31.31 0 0 1-.312-.308v-.82a.31.31 0 0 1 .312-.313h4.465a.31.31 0 0 1 .309.313v.82a.307.307 0 0 1-.309.308h-.98l-3.504 6.372l2.855 5.875L26 9.523h-1.746a.31.31 0 0 1-.313-.308v-.82c0-.172.141-.313.313-.313h5.433a.31.31 0 0 1 .313.313z" />
                                </svg>
                                <span class="engine-name" id="wikipediaEngineDD">Wikipedia</span>
                            </div>

                            <div data-engine="9" data-engine-name="quora" id="quora-dropdown" class="dropdown-item">
                                <svg height="100%" width="100%" viewBox="0 -0.5 32 32"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <rect class="accentColor" height="100%" rx="50%" width="100%" />
                                    <path class="darkIconForDarkTheme" fill="#fffffff0"
                                        style="transform: scale(0.73); transform-origin: center;"
                                        d="M29 23.86h-2a1.72 1.72 0 0 1-1.73 1.72c-1.15 0-1.82-.86-2.58-2a11 11 0 0 0 4.79-9.1c.09-7.19-5.85-11.89-12.17-11.89S3 7.37 3 14.37s6 11.79 12.17 11.79a10.7 10.7 0 0 0 3.07-.48c1.15 2.11 2.59 3.74 5.46 3.74a5 5 0 0 0 5.3-5.56m-8.14-3.45a6.31 6.31 0 0 0-5.56-3.16a6 6 0 0 0-3.74 1.15l.64 1.6a2.6 2.6 0 0 1 .86-.1c1.82 0 3 1.53 4.12 3.64a7.6 7.6 0 0 1-1.91.19C10.86 23.76 9 20.6 9 14.47s1.91-9.3 6.23-9.3s6.32 3.16 6.32 9.3a20.7 20.7 0 0 1-.72 5.94Z" />
                                </svg>
                                <span class="engine-name" id="quoraEngineDD">Quora</span>
                            </div>

                        </div>
                    </div>
                </div>

                <div class="searchbar-content">
                    <input id="searchQ" placeholder="Type here..." type="text" autocomplete="off">

                    <div class="searchControls">
                        <!-- Mic Icon -->
                        <div class="micIcon" id="micIcon">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -1 24 24" height="100%" width="100%">
                                <path fill="currentColor"
                                    d="M12 14q-1.25 0-2.125-.875T9 11V5q0-1.25.875-2.125T12 2t2.125.875T15 5v6q0 1.25-.875 2.125T12 14m-1 7v-3.075q-2.6-.35-4.3-2.325T5 11h2q0 2.075 1.463 3.538T12 16t3.538-1.463T17 11h2q0 2.625-1.7 4.6T13 17.925V21z" />
                            </svg>
                        </div>
                        <!-- Search Button -->
                        <button id="enterBtn">Search</button>
                    </div>
                </div>
            </div>
            <div id="resultBox" class="resultBox bgLightTint" style="display: none;"></div>
            <!-- ----------end of searchbar-------------- -->

            <!-- ----------search with------------------- -->
            <div class="searchWithCont" style="visibility: hidden;" id="search-with-container">

                <div class="hint bgLightTint" id="searchWithHint"></div>

                <div class="searchEnginesContainer">

                    <div class="search-engine bgLightTint" data-category="search-with">
                        <svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                            <path class="darkIconForDarkTheme" fill="white"
                                style="transform: scale(0.95); transform-origin: center;"
                                d="M12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12q0-.175-.012-.363t-.013-.312q-.125.725-.675 1.2T18 13h-2q-.825 0-1.412-.587T14 11v-1h-4V8q0-.825.588-1.412T12 6h1q0-.575.313-1.012t.762-.713q-.5-.125-1.012-.2T12 4Q8.65 4 6.325 6.325T4 12h5q1.65 0 2.825 1.175T13 16v1h-3v2.75q.5.125.988.188T12 20" />
                        </svg>
                        <label class="engine-name" id="defaultEngine">Default</label>
                        <input checked class="radio-button" name="search-engine" type="radio" value="engine0">
                    </div>

                    <div class="search-engine bgLightTint" data-category="search-with">
                        <svg fill="none" height="28" viewBox="0 0 28 28" width="28" xmlns="http://www.w3.org/2000/svg">
                            <rect class="accentColor" fill="#FF000F" height="28" rx="14" width="28" />
                            <path class="darkIconForDarkTheme"
                                d="M24.805 12.0177C24.9359 12.756 25.0011 13.504 25 14.2534C25 17.6 23.7796 20.4297 21.6559 22.345H21.6587C19.8016 24.0265 17.2487 25 14.2216 25C11.2455 25 8.3912 23.8411 6.28674 21.7783C4.18227 19.7154 3 16.9176 3 14.0004C3 11.0831 4.18227 8.28528 6.28674 6.22244C8.3912 4.15961 11.2455 3.00073 14.2216 3.00073C17.0073 2.96875 19.6976 3.99459 21.7289 5.86338L18.5251 9.00378C17.367 7.92165 15.8214 7.32907 14.2216 7.35383C11.2942 7.35383 8.80719 9.28977 7.92068 11.8967C7.45064 13.2627 7.45064 14.7421 7.92068 16.1082H7.92489C8.8156 18.711 11.2984 20.6469 14.2258 20.6469C15.7379 20.6469 17.0368 20.2674 18.044 19.5964H18.0398C18.6246 19.2167 19.1248 18.7247 19.5103 18.1502C19.8958 17.5758 20.1585 16.9307 20.2827 16.2539H14.2216V12.0191L24.805 12.0177Z"
                                fill="white" />
                        </svg>
                        <label class="engine-name" id="googleEngine">Google</label>
                        <input class="radio-button" name="search-engine" type="radio" value="engine1">
                    </div>

                    <div class="search-engine bgLightTint" data-category="search-with">
                        <svg fill="none" height="28" viewBox="0 0 28 28" width="28" xmlns="http://www.w3.org/2000/svg">
                            <rect class="accentColor" fill="#FF00ff" height="28" rx="14" width="28" />
                            <path class="darkIconForDarkTheme"
                                d="M10.5 7C10.1022 7 9.72064 7.15804 9.43934 7.43934C9.15804 7.72064 9 8.10218 9 8.5C9 8.89782 9.15804 9.27936 9.43934 9.56066C9.72064 9.84196 10.1022 10 10.5 10C10.8978 10 11.2794 9.84196 11.5607 9.56066C11.842 9.27936 12 8.89782 12 8.5C12 8.10218 11.842 7.72064 11.5607 7.43934C11.2794 7.15804 10.8978 7 10.5 7ZM12 4C13.3261 4 14.5979 4.52678 15.5355 5.46447C16.4732 6.40215 17 7.67392 17 9C17 10.7 16.15 12.2 14.86 13.1C16.44 13.25 18.22 13.61 20 14.5C23 16 24 14 24 14C24 14 23 23 17 23H11C11 23 6 23 6 18C6 15 9 14 8 12C4 12 4 8.5 4 8.5C5 9 6.24 9 7 8.65C7.09333 7.3872 7.66043 6.20632 8.58766 5.34399C9.5149 4.48166 10.7338 4.0016 12 4Z"
                                fill="white" />
                        </svg>
                        <label class="engine-name" id="duckEngine">Duck</label>
                        <input class="radio-button" name="search-engine" type="radio" value="engine2">
                    </div>

                    <div class="search-engine bgLightTint" data-category="search-with">
                        <svg fill="none" height="28" viewBox="0 0 28 28" width="28" xmlns="http://www.w3.org/2000/svg">
                            <rect class="accentColor" fill="#FF000F" height="28" rx="14" width="28" />
                            <path class="darkIconForDarkTheme"
                                d="M22.9991 13.1645C22.9954 13.0734 22.9651 12.9855 22.9119 12.9118C22.8588 12.8382 22.7853 12.7822 22.7007 12.751L13.8694 9.98251C13.7046 9.93107 13.6294 10.0197 13.7018 10.1788L15.3442 13.8304C15.4167 13.9904 15.604 14.18 15.7602 14.2524L18.0135 15.2966C18.1697 15.369 18.1735 15.4957 18.021 15.5776L8.40754 20.7525C8.25601 20.8345 8.23624 20.8059 8.36425 20.6887L12.0575 17.3219C12.197 17.1796 12.28 16.9905 12.291 16.7904L12.2947 6.58526C12.291 6.49394 12.2606 6.40578 12.2073 6.33199C12.154 6.25821 12.0803 6.20212 11.9954 6.17084L8.2993 5.01334C8.13459 4.9619 8 5.06383 8 5.24008V20.7211C8 20.8974 8.11483 21.1241 8.25601 21.2251L12.0114 23.9183C12.1526 24.0193 12.3879 24.0279 12.5357 23.9373L22.7308 17.723C22.8093 17.6688 22.8744 17.597 22.921 17.5133C22.9677 17.4295 22.9947 17.336 23 17.24V13.1645H22.9991Z"
                                fill="white" />
                        </svg>
                        <label class="engine-name" id="bingEngine" data-category="search-with">Bing</label>
                        <input class="radio-button" name="search-engine" type="radio" value="engine3">
                    </div>

                    <div class="search-engine bgLightTint" data-category="search-with">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 -0.5 24 24">
                            <rect class="accentColor" fill="#FF000F" height="28" rx="14" width="28" />
                            <path class="darkIconForDarkTheme" fill-rule="evenodd"
                                d="m15.013 2l1.716 1.983s1.507-.426 2.218.299a62 62 0 0 1 1.298 1.364l-.46 1.152l.585 1.705s-1.723 6.65-1.925 7.463c-.398 1.599-.67 2.217-1.8 3.027a152 152 0 0 1-3.742 2.584c-.287.2-.608.423-.903.423s-.617-.224-.904-.423q-.117-.083-.226-.153a152 152 0 0 1-3.516-2.43c-1.13-.811-1.402-1.43-1.8-3.028c-.202-.812-1.925-7.463-1.925-7.463l.586-1.705l-.46-1.152s.585-.64 1.297-1.364c.711-.725 2.218-.299 2.218-.299L8.986 2zM7.751 5.241s-2.207 2.719-2.207 3.3c0 .48.19.668.414.89q.07.069.143.146l1.655 1.79l.054.057c.165.169.409.418.237.832l-.035.084c-.189.449-.42 1.002-.125 1.563c.314.597.853.995 1.199.93c.345-.067 1.156-.498 1.454-.696s1.243-.991 1.243-1.295c0-.253-.68-.675-1.01-.88l-.147-.093l-.162-.104c-.301-.19-.845-.536-.859-.688c-.017-.188-.01-.244.233-.709c.051-.099.112-.205.174-.315c.232-.405.49-.86.433-1.184c-.064-.368-.63-.578-1.107-.757l-.175-.065l-.498-.19v-.001a44 44 0 0 1-1.096-.426c-.12-.057-.09-.11.277-.146l.178-.019c.455-.05 1.292-.14 1.7-.024l.264.073c.457.127 1.018.281 1.072.37l.027.042c.052.075.085.123.028.44l-.094.508c-.127.672-.324 1.724-.349 1.96l-.011.095c-.032.263-.053.438.247.508l.078.018c.338.08.834.195 1.014.195c.179 0 .675-.116 1.013-.195l.078-.018c.3-.07.279-.245.247-.508l-.01-.095c-.026-.236-.223-1.285-.35-1.957l-.094-.51c-.057-.318-.024-.366.028-.44l.027-.043c.054-.089.615-.243 1.072-.37l.265-.073c.407-.116 1.245-.025 1.699.024l.178.019c.367.035.398.09.277.146c-.087.041-.618.244-1.096.426l-.498.19l-.174.066c-.479.179-1.043.39-1.108.757c-.058.325.202.779.433 1.185c.062.109.123.215.175.314c.242.465.249.52.232.709c-.014.153-.558.497-.86.688c-.07.044-.127.08-.16.104l-.148.093c-.33.205-1.01.627-1.01.88c0 .304.945 1.098 1.243 1.295c.298.198 1.11.63 1.455.695c.345.066.884-.332 1.198-.929c.296-.56.064-1.114-.124-1.563l-.036-.084c-.171-.414.072-.663.237-.832l.054-.056l1.655-1.791q.074-.078.144-.146c.223-.222.413-.41.413-.89c0-.581-2.207-3.3-2.207-3.3s-1.863.363-2.114.363c-.2 0-.587-.136-.99-.277l-.307-.107c-.503-.17-.837-.172-.837-.172h.009h-.018H12c-.006 0-.34.003-.838.172q-.152.052-.306.107c-.404.141-.79.277-.99.277c-.252 0-2.115-.363-2.115-.363m5.688 9.78c-.59-.31-1.325-.575-1.44-.575s-.85.265-1.439.576l-.374.196c-.395.207-.674.354-.78.422c-.137.087-.053.251.071.34c.125.09 1.797 1.41 1.96 1.556l.065.06c.156.143.356.326.498.326c.141 0 .34-.183.497-.326l.066-.06a99 99 0 0 1 1.959-1.555c.124-.09.208-.254.071-.341c-.105-.068-.385-.214-.778-.421z"
                                clip-rule="evenodd" fill="white" />
                        </svg>
                        <label class="engine-name" id="braveEngine">Brave</label>
                        <input class="radio-button" name="search-engine" type="radio" value="engine4">
                    </div>

                    <div class="search-engine bgLightTint" data-category="search-on">
                        <svg fill="none" height="28" viewBox="0 0 28 28" width="28" xmlns="http://www.w3.org/2000/svg">
                            <rect class="accentColor" fill="#FF000F" height="28" rx="14" width="28" />
                            <path class="darkIconForDarkTheme"
                                d="M12 17L17.19 14L12 11V17ZM23.56 9.17C23.69 9.64 23.78 10.27 23.84 11.07C23.91 11.87 23.94 12.56 23.94 13.16L24 14C24 16.19 23.84 17.8 23.56 18.83C23.31 19.73 22.73 20.31 21.83 20.56C21.36 20.69 20.5 20.78 19.18 20.84C17.88 20.91 16.69 20.94 15.59 20.94L14 21C9.81 21 7.2 20.84 6.17 20.56C5.27 20.31 4.69 19.73 4.44 18.83C4.31 18.36 4.22 17.73 4.16 16.93C4.09 16.13 4.06 15.44 4.06 14.84L4 14C4 11.81 4.16 10.2 4.44 9.17C4.69 8.27 5.27 7.69 6.17 7.44C6.64 7.31 7.5 7.22 8.82 7.16C10.12 7.09 11.31 7.06 12.41 7.06L14 7C18.19 7 20.8 7.16 21.83 7.44C22.73 7.69 23.31 8.27 23.56 9.17Z"
                                fill="white" />
                        </svg>
                        <label class="engine-name" id="youtubeEngine">YouTube</label>
                        <input class="radio-button" name="search-engine" type="radio" value="engine5">
                    </div>

                    <div class="search-engine bgLightTint" data-category="search-on">
                        <svg height="100%" width="100%" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
                            <rect class="accentColor" fill="#FF000F" height="100%" rx="50%" width="100%" />
                            <path class="darkIconForDarkTheme" style="transform: scale(0.92); transform-origin: center;"
                                d="M 24.84375 0 C 24.351563 0.078125 23.992188 0.503906 24 1 L 24 11 L 13 11 C 12.96875 11 12.9375 11 12.90625 11 C 12.65625 11.019531 12.421875 11.128906 12.25 11.3125 L 12.25 11.34375 C 12.226563 11.363281 12.207031 11.382813 12.1875 11.40625 L 0.25 24.3125 C -0.0273438 24.605469 -0.101563 25.039063 0.0625 25.40625 C 0.226563 25.777344 0.597656 26.007813 1 26 L 11 26 L 11 37 C 10.992188 37.28125 11.105469 37.554688 11.3125 37.75 L 24.3125 49.75 C 24.605469 50.027344 25.039063 50.101563 25.40625 49.9375 C 25.777344 49.773438 26.007813 49.402344 26 49 L 26 39 L 37 39 C 37.28125 39.007813 37.554688 38.894531 37.75 38.6875 L 49.75 25.6875 C 50.027344 25.394531 50.101563 24.960938 49.9375 24.59375 C 49.773438 24.222656 49.402344 23.992188 49 24 L 39 24 L 39 13 C 39.007813 12.71875 38.894531 12.445313 38.6875 12.25 L 25.6875 0.25 C 25.460938 0.0390625 25.148438 -0.0507813 24.84375 0 Z M 26 3.3125 L 36.5 13 L 27.25 22.25 C 26.480469 21.363281 26 20.210938 26 18.9375 L 26 12 C 26 11.96875 26 11.9375 26 11.90625 Z M 13 13.5 L 22.25 22.75 C 21.363281 23.519531 20.210938 24 18.9375 24 L 3.3125 24 Z M 25 22.5625 C 25.597656 23.558594 26.441406 24.402344 27.4375 25 C 26.441406 25.597656 25.597656 26.441406 25 27.4375 C 24.402344 26.441406 23.558594 25.597656 22.5625 25 C 23.558594 24.402344 24.402344 23.558594 25 22.5625 Z M 31.0625 26 L 46.6875 26 L 37 36.5 L 27.75 27.25 C 28.636719 26.480469 29.789063 26 31.0625 26 Z M 22.75 27.75 C 23.519531 28.636719 24 29.789063 24 31.0625 L 24 38 C 24 38.03125 24 38.0625 24 38.09375 L 24 46.6875 L 13.5 37 Z"
                                fill="white" />
                        </svg>
                        <label class="engine-name" id="gImagesEngine">Images</label>
                        <input class="radio-button" name="search-engine" type="radio" value="engine6">
                    </div>

                    <div class="search-engine bgLightTint" data-category="search-on">
                        <svg fill="none" height="28" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
                            <rect class="accentColor" fill="#FF000F" height="28" rx="14" width="28" />
                            <path class="darkIconForDarkTheme" style="transform: scale(1.24); transform-origin: center;"
                                d="M213.15 129.22c0-10.376-8.391-18.617-18.617-18.617a18.74 18.74 0 0 0-12.97 5.189c-12.818-9.157-30.368-15.107-49.9-15.87l8.544-39.981l27.773 5.95c.307 7.02 6.104 12.667 13.278 12.667c7.324 0 13.275-5.95 13.275-13.278c0-7.324-5.95-13.275-13.275-13.275c-5.188 0-9.768 3.052-11.904 7.478l-30.976-6.562c-.916-.154-1.832 0-2.443.458c-.763.458-1.22 1.22-1.371 2.136l-9.464 44.558c-19.837.612-37.692 6.562-50.662 15.872a18.74 18.74 0 0 0-12.971-5.188c-10.377 0-18.617 8.391-18.617 18.617c0 7.629 4.577 14.037 10.988 16.939a33.6 33.6 0 0 0-.458 5.646c0 28.686 33.42 52.036 74.621 52.036c41.202 0 74.622-23.196 74.622-52.036a35 35 0 0 0-.458-5.646c6.408-2.902 10.985-9.464 10.985-17.093M85.272 142.495c0-7.324 5.95-13.275 13.278-13.275c7.324 0 13.275 5.95 13.275 13.275s-5.95 13.278-13.275 13.278c-7.327.15-13.278-5.953-13.278-13.278m74.317 35.251c-9.156 9.157-26.553 9.768-31.588 9.768c-5.188 0-22.584-.765-31.59-9.768c-1.371-1.373-1.371-3.51 0-4.883c1.374-1.371 3.51-1.371 4.884 0c5.8 5.8 18.008 7.782 26.706 7.782s21.058-1.983 26.704-7.782c1.374-1.371 3.51-1.371 4.884 0c1.22 1.373 1.22 3.51 0 4.883m-2.443-21.822c-7.325 0-13.275-5.95-13.275-13.275s5.95-13.275 13.275-13.275c7.327 0 13.277 5.95 13.277 13.275c0 7.17-5.95 13.275-13.277 13.275"
                                fill="white" />
                        </svg>
                        <label class="engine-name" id="redditEngine">Reddit</label>
                        <input class="radio-button" name="search-engine" type="radio" value="engine7">
                    </div>

                    <div class="search-engine bgLightTint" data-category="search-on">
                        <svg height="100%" width="100%" viewBox="0 -0.5 32 32" xmlns="http://www.w3.org/2000/svg">
                            <rect class="accentColor" fill="#FF000F" height="100%" rx="50%" width="100%" />
                            <path class="darkIconForDarkTheme" style="transform: scale(0.95); transform-origin: center;"
                                d="M30 9.215a.31.31 0 0 1-.313.308h-1.68l-7.616 16.215a.31.31 0 0 1-.278.18h-.004a.31.31 0 0 1-.28-.172l-3.614-7.168l-3.902 7.18a.313.313 0 0 1-.555-.016L4.055 9.523H2.313A.31.31 0 0 1 2 9.215V8.39a.31.31 0 0 1 .313-.309h6.21a.31.31 0 0 1 .313.309v.824a.31.31 0 0 1-.313.308H7.188l5.316 12.262l2.766-5.168l-3.508-7.09h-.844a.313.313 0 0 1-.313-.312v-.82c0-.172.141-.313.313-.313h4.598a.31.31 0 0 1 .308.313v.82a.307.307 0 0 1-.308.308h-.813l2.02 4.415l2.402-4.415h-1.473a.31.31 0 0 1-.312-.308v-.82a.31.31 0 0 1 .312-.313h4.465a.31.31 0 0 1 .309.313v.82a.307.307 0 0 1-.309.308h-.98l-3.504 6.372l2.855 5.875L26 9.523h-1.746a.31.31 0 0 1-.313-.308v-.82c0-.172.141-.313.313-.313h5.433a.31.31 0 0 1 .313.313z"
                                fill="white" />
                        </svg>
                        <label class="engine-name" id="wikipediaEngine">Wikipedia</label>
                        <input class="radio-button" name="search-engine" type="radio" value="engine8">
                    </div>

                    <div class="search-engine bgLightTint" data-category="search-on">
                        <svg height="100%" width="100%" viewBox="0 -0.7 32 32" xmlns="http://www.w3.org/2000/svg">
                            <rect class="accentColor" fill="#FF000F" height="100%" rx="50%" width="100%" />
                            <path class="darkIconForDarkTheme" style="transform: scale(0.84); transform-origin: center;"
                                d="M29 23.86h-2a1.72 1.72 0 0 1-1.73 1.72c-1.15 0-1.82-.86-2.58-2a11 11 0 0 0 4.79-9.1c.09-7.19-5.85-11.89-12.17-11.89S3 7.37 3 14.37s6 11.79 12.17 11.79a10.7 10.7 0 0 0 3.07-.48c1.15 2.11 2.59 3.74 5.46 3.74a5 5 0 0 0 5.3-5.56m-8.14-3.45a6.31 6.31 0 0 0-5.56-3.16a6 6 0 0 0-3.74 1.15l.64 1.6a2.6 2.6 0 0 1 .86-.1c1.82 0 3 1.53 4.12 3.64a7.6 7.6 0 0 1-1.91.19C10.86 23.76 9 20.6 9 14.47s1.91-9.3 6.23-9.3s6.32 3.16 6.32 9.3a20.7 20.7 0 0 1-.72 5.94Z"
                                fill="white" />
                        </svg>
                        <label class="engine-name" id="quoraEngine">Quora</label>
                        <input class="radio-button" name="search-engine" type="radio" value="engine9">
                    </div>

                </div>
            </div>
            <!-- ----------end of search with------------- -->
            <div class="quotesCont" id="motivationalQuotesCont">
                <div class="quotesContainer">
                    Discover possibilities, spark creativity, and embrace the joy of browsing with every new tab you
                    open!
                </div>
                <div class="authorName">
                    <div class="qtRounder">
                        <svg fill="none" height="100%" viewBox="0 0 30 30" width="100%"
                            xmlns="http://www.w3.org/2000/svg">
                            <g clip-path="url(#clip0_208_15)">
                                <path class="lessDark" clip-rule="evenodd"
                                    d="M30 0L0 0C16.5685 0 30 13.4315 30 30L30 0Z" fill="#FF429D" fill-rule="evenodd" />
                            </g>
                            <defs>
                                <clipPath id="clip0_208_15">
                                    <rect fill="white" height="30" width="30" />
                                </clipPath>
                            </defs>
                        </svg>
                    </div>
                    <div class="qtRounder2">
                        <svg fill="none" height="100%" viewBox="0 0 30 30" width="100%"
                            xmlns="http://www.w3.org/2000/svg">
                            <g clip-path="url(#clip0_208_15)">
                                <path class="lessDark" clip-rule="evenodd"
                                    d="M30 0L0 0C16.5685 0 30 13.4315 30 30L30 0Z" fill="#FF429D" fill-rule="evenodd" />
                            </g>
                            <defs>
                                <clipPath id="clip0_208_15">
                                    <rect fill="white" height="30" width="30" />
                                </clipPath>
                            </defs>
                        </svg>
                    </div>
                    <span>XengShi</span>
                </div>
            </div>

        </div>
        <!-- --------end of rightDiv---------------------- -->
    </div>
    <!---End of centerDiv--->

    <!-- ------shortcuts------------------ -->
    <div id="shortcuts-section">
        <div class="wrapper">
            <div id="flexMonitor"></div>
            <div id="defaultMonitor"></div>
            <div class="shortcutsContainer" id="shortcutsContainer"></div>
        </div>
    </div>

    <!-- --------end of shortcuts------------------ -->

    <!-- -----------AI-Tools------------------ -->
    <div class="aiToolsCont" id="aiToolsCont">

        <div class="hangno" id="aiToolsIcon">
            <div class="icon">
                <svg fill="none" height="100%" viewBox="0 0 280 280" width="100%" xmlns="http://www.w3.org/2000/svg">
                    <path id="aiIcon" class="accentColor" clip-rule="evenodd"
                        d="M152 178C152 163.641 163.641 152 178 152H254C268.359 152 280.275 163.76 277.393 177.827C267.155 227.797 227.797 267.155 177.827 277.393C163.76 280.275 152 268.359 152 254V178ZM128 183.26C128 206.423 99.9943 218.024 83.6152 201.645L8.78205 126.811C3.43206 121.461 0.529946 114.017 1.78833 106.556C10.5659 54.5162 50.7487 13.1442 102.17 2.60743C116.237 -0.275091 128 11.6406 128 26V183.26ZM0 214.74C0 191.577 28.0057 179.976 44.3847 196.355L127.994 279.964C127.998 279.968 128 279.974 128 279.979V279.979C128 279.991 127.991 280 127.979 280H26C11.6406 280 0 268.359 0 254V214.74ZM152 26C152 11.6406 163.641 0 178 0H254C268.359 0 280 11.6406 280 26V102C280 116.359 268.359 128 254 128H178C163.641 128 152 116.359 152 102V26Z"
                        fill="white" fill-rule="evenodd" />
                </svg>
            </div>
            <div class="label" id="ai_tools">AI Tools</div>
        </div>
        <!-- --------tools-------- -->

        <div class="toolsCont" id="toolsCont">
            <!-- ---------------- -->
            <a href="https://chatgpt.com/">
                <div class="tIcon">
                    <svg fill="none" height="100%" viewBox="0 0 32 32" width="100%" xmlns="http://www.w3.org/2000/svg">
                        <rect class="accentColor aiDarkIcons" width="100%" height="100%" rx="50%" />
                        <path class="bgLightTint" fill="white"
                            d="M14.7787 6.39973C15.5709 6.39973 16.3046 6.64694 16.9039 7.06695C15.3268 7.87457 13.8766 8.891 12.3373 9.76462L13.558 11.8431C15.4806 10.7511 17.2836 9.38301 19.3685 8.59579C19.9508 8.37739 20.5802 8.30867 21.1971 8.39613C21.814 8.4836 22.398 8.72435 22.8939 9.09561C23.3897 9.46687 23.781 9.95637 24.0307 10.5178C24.2804 11.0792 24.3803 11.694 24.3209 12.3039C22.8206 11.3643 21.1995 10.637 19.6615 9.76462L18.4408 11.8431C20.3634 12.9351 22.4715 13.7847 24.2061 15.1672C24.6895 15.5538 25.0646 16.0553 25.2959 16.6242C25.5272 17.1931 25.607 17.8106 25.5278 18.4183C25.4486 19.026 25.213 19.6038 24.8433 20.097C24.4736 20.5902 23.9821 20.9826 23.4151 21.2369C23.4944 19.4897 23.3235 17.746 23.3235 16H20.8822C20.8822 18.1817 21.1873 20.4017 20.837 22.5714C20.738 23.1763 20.4837 23.7464 20.098 24.2278C19.7124 24.7091 19.2082 25.0858 18.6332 25.3221C18.0581 25.5584 17.4313 25.6466 16.8119 25.5783C16.1925 25.51 15.6011 25.2875 15.0936 24.9319C16.672 24.1242 18.1234 23.1078 19.6615 22.2354L18.4408 20.1569C16.5182 21.2489 14.7152 22.617 12.6303 23.4042C12.0479 23.6226 11.4185 23.6913 10.8016 23.6039C10.1847 23.5164 9.60073 23.2757 9.10489 22.9044C8.60905 22.5331 8.21777 22.0436 7.96807 21.4822C7.71837 20.9208 7.6185 20.306 7.67792 19.6961C9.17938 20.6345 10.7992 21.3617 12.3373 22.2354L13.558 20.1569C11.6354 19.0649 9.52727 18.2153 7.79145 16.8328C7.30807 16.4461 6.93305 15.9445 6.70187 15.3755C6.47069 14.8066 6.39098 14.189 6.4703 13.5813C6.54962 12.9736 6.78533 12.3959 7.15515 11.9027C7.52496 11.4095 8.01664 11.0173 8.58368 10.7631C8.50433 12.5103 8.67523 14.254 8.67523 16H11.1166C11.1166 13.8183 10.8114 11.5971 11.1618 9.42862C11.3002 8.58356 11.7402 7.81459 12.403 7.25955C13.0658 6.70451 13.908 6.39969 14.7787 6.39973ZM19.4088 6.09012C18.7029 5.28249 17.791 4.67405 16.7669 4.32723C15.7428 3.98042 14.6433 3.90772 13.5812 4.1166C12.519 4.32548 11.5326 4.80841 10.723 5.51584C9.9134 6.22327 9.30986 7.12973 8.9743 8.14218C7.90982 8.33936 6.91788 8.81143 6.10028 9.50994C5.28267 10.2085 4.66885 11.1083 4.3218 12.117C3.97475 13.1257 3.90698 14.2071 4.12544 15.2501C4.34389 16.2931 4.84071 17.2602 5.5649 18.0521C5.20623 19.057 5.12606 20.1377 5.33261 21.1832C5.53917 22.2287 6.02502 23.2013 6.74028 24.0012C7.45554 24.8011 8.37444 25.3995 9.40267 25.7349C10.4309 26.0703 11.5314 26.1307 12.5912 25.9099C13.2971 26.7175 14.209 27.326 15.2331 27.6728C16.2572 28.0196 17.3567 28.0923 18.4188 27.8834C19.481 27.6745 20.4674 27.1916 21.277 26.4842C22.0866 25.7767 22.6901 24.8703 23.0257 23.8578C24.0902 23.6606 25.0821 23.1886 25.8997 22.4901C26.7173 21.7915 27.3311 20.8917 27.6782 19.883C28.0252 18.8743 28.093 17.7929 27.8746 16.7499C27.6561 15.7069 27.1593 14.7398 26.4351 13.9479C26.7938 12.943 26.8739 11.8623 26.6674 10.8168C26.4608 9.77131 25.975 8.7987 25.2597 7.99879C24.5445 7.19889 23.6256 6.60051 22.5973 6.26508C21.5691 5.92966 20.4686 5.86927 19.4088 6.09012Z" />
                    </svg>
                </div>
                <div class="tLabel" id="chatGPT">ChatGPT</div>
            </a>
            <!-- ---------------- -->
            <a href="https://gemini.google.com/app">
                <div class="tIcon">
                    <svg height="100%" viewBox="0 0 32 32" width="100%" xmlns="http://www.w3.org/2000/svg">
                        <rect class="accentColor aiDarkIcons" height="100%" rx="50%" width="100%" />
                        <path class="bgLightTint" style="transform: scale(0.95); transform-origin: center;"
                            d="M14.6069 21.7907L15.4899 19.7789C16.2624 18.0009 17.676 16.5754 19.4521 15.7832L21.8818 14.7102C22.6541 14.3689 22.6541 13.2509 21.8818 12.9086L19.5286 11.8696C17.7067 11.0568 16.2678 9.57889 15.509 7.74084L14.614 5.59687C14.5436 5.42075 14.4217 5.26971 14.2641 5.1633C14.1065 5.05689 13.9204 5 13.73 5C13.5396 5 13.3535 5.05689 13.1959 5.1633C13.0383 5.26971 12.9164 5.42075 12.846 5.59687L11.952 7.74084C11.1932 9.57889 9.75436 11.0568 7.93246 11.8696L5.57925 12.9096C4.80692 13.2499 4.80692 14.3689 5.57925 14.7102L8.00788 15.7832C9.7838 16.5751 11.1974 18.0003 11.9701 19.7779L12.8531 21.7897C12.9257 21.9615 13.0476 22.1082 13.2036 22.2113C13.3596 22.3145 13.5427 22.3695 13.73 22.3695C13.9173 22.3695 14.1004 22.3145 14.2564 22.2113C14.4124 22.1082 14.5343 21.9625 14.6069 21.7907ZM23.4435 26.6892L23.6919 26.1227C24.1275 25.1206 24.9244 24.3172 25.9255 23.8706L26.6897 23.5313C26.7823 23.4889 26.8608 23.421 26.9158 23.3356C26.9708 23.2501 27 23.1508 27 23.0494C27 22.9479 26.9708 22.8486 26.9158 22.7632C26.8608 22.6778 26.7823 22.6098 26.6897 22.5674L25.9687 22.2481C24.9417 21.7897 24.1306 20.9563 23.703 19.92L23.4476 19.3084C23.4098 19.2141 23.3445 19.1332 23.26 19.0762C23.1756 19.0193 23.0759 18.9888 22.9739 18.9888C22.8719 18.9888 22.7722 19.0193 22.6878 19.0762C22.6033 19.1332 22.538 19.2141 22.5002 19.3084L22.2448 19.919C21.8174 20.9557 21.0063 21.7894 19.9791 22.2481L19.257 22.5684C19.1647 22.611 19.0865 22.6789 19.0318 22.7642C18.977 22.8495 18.9479 22.9486 18.9479 23.0499C18.9479 23.1511 18.977 23.2503 19.0318 23.3356C19.0865 23.4209 19.1647 23.4888 19.257 23.5313L20.0213 23.8696C21.023 24.3162 21.8202 25.12 22.2559 26.1227L22.5043 26.6892C22.6853 27.1036 23.2625 27.1036 23.4435 26.6892Z" />
                    </svg>
                </div>
                <div class="tLabel" id="gemini">Gemini</div>
            </a>
            <!-- ---------------- -->
            <a href="https://copilot.microsoft.com/">
                <div class="tIcon">
                    <svg height="100%" width="100%" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect class="accentColor aiDarkIcons" width="100%" height="100%" rx="50%" fill="white" />
                        <path class="lessDark" fill="black"
                            d="M19.6119 7.4202C19.4846 6.98367 19.219 6.60026 18.8551 6.3276C18.4912 6.05495 18.0487 5.90777 17.5939 5.9082H16.9799C16.4874 5.90803 16.0103 6.08052 15.6317 6.39569C15.2532 6.71085 14.9971 7.14875 14.9079 7.6332L13.8549 13.3692L14.1169 12.4752C14.2443 12.0383 14.5097 11.6545 14.8735 11.3812C15.2373 11.1079 15.6799 10.9598 16.1349 10.9592H19.7049L21.2039 11.5412L22.6489 10.9592H22.2259C21.7712 10.9596 21.3286 10.8125 20.9647 10.5398C20.6008 10.2671 20.3353 9.88374 20.2079 9.4472L19.6119 7.4202ZM10.6049 22.5762C10.7318 23.0146 10.9977 23.3999 11.3626 23.6741C11.7274 23.9483 12.1715 24.0964 12.6279 24.0962H13.9349C14.4839 24.0971 15.0113 23.8831 15.4044 23.5C15.7975 23.1168 16.0249 22.595 16.0379 22.0462L16.1799 16.5162L15.8819 17.5292C15.7546 17.9657 15.489 18.3491 15.1251 18.6218C14.7612 18.8945 14.3187 19.0416 13.8639 19.0412H10.2619L8.97794 18.3432L7.58594 19.0412H7.99894C8.93794 19.0412 9.75994 19.6592 10.0219 20.5612L10.6049 22.5762Z" />
                        <path class="lessDark" fill="black"
                            d="M17.5051 5.90252H10.2141C8.12813 5.90252 6.87913 8.65452 6.04813 11.4115C5.05613 14.6745 3.76213 19.0415 7.50113 19.0415H10.6501C11.108 19.0416 11.5534 18.8928 11.9192 18.6175C12.285 18.3423 12.5514 17.9555 12.6781 17.5155C13.4205 14.9114 14.1748 12.3107 14.9411 9.71352C15.3231 8.41952 15.6431 7.31252 16.1321 6.61852C16.2838 6.39455 16.4888 6.21183 16.7286 6.08684C16.9685 5.96184 17.2347 5.8985 17.5051 5.90252Z" />
                        <path class="bgLightTint" fill="#252525"
                            d="M17.5051 5.90252H10.2141C8.12813 5.90252 6.87913 8.65452 6.04813 11.4115C5.05613 14.6745 3.76213 19.0415 7.50113 19.0415H10.6501C11.108 19.0416 11.5534 18.8928 11.9192 18.6175C12.285 18.3423 12.5514 17.9555 12.6781 17.5155C13.4205 14.9114 14.1748 12.3107 14.9411 9.71352C15.3231 8.41952 15.6431 7.31252 16.1321 6.61852C16.2838 6.39455 16.4888 6.21183 16.7286 6.08684C16.9685 5.96184 17.2347 5.8985 17.5051 5.90252ZM12.4991 24.0965H19.7911C21.8761 24.0965 23.1251 21.3395 23.9561 18.5875C24.9441 15.3245 26.2371 10.9585 22.4981 10.9585H19.3501C18.4081 10.9585 17.5801 11.5805 17.3231 12.4885C16.5813 15.0928 15.827 17.6935 15.0601 20.2905C14.6781 21.5845 14.3571 22.6965 13.8681 23.3855C13.717 23.6085 13.5127 23.7903 13.2737 23.9144C13.0347 24.0386 12.7684 24.1012 12.4991 24.0965Z" />
                        <path class="bgLightTint" fill="#252525"
                            d="M12.499 24.097H19.791C21.876 24.097 23.125 21.34 23.956 18.588C24.944 15.325 26.237 10.959 22.498 10.959H19.35C18.408 10.959 17.58 11.581 17.323 12.489C16.5812 15.0933 15.8269 17.694 15.06 20.291C14.678 21.585 14.357 22.697 13.868 23.386C13.7169 23.609 13.5126 23.7907 13.2736 23.9149C13.0346 24.039 12.7683 24.1016 12.499 24.097Z" />
                    </svg>
                </div>
                <div class="tLabel" id="copilot">Copilot</div>
            </a>
            <!-- ---------------- -->
            <a href="https://claude.ai/new/">
                <div class="tIcon">
                    <svg height="100%" width="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <rect class="accentColor aiDarkIcons" height="100%" rx="50%" width="100%" />
                        <path class="bgLightTint" style="transform: scale(0.85); transform-origin: center;"
                            d="m5.92 15.3l3.94-2.2l.06-.2l-.06-.1h-.2L9 12.76l-2.24-.06l-1.96-.1l-1.9-.1l-.48-.1l-.42-.6l.04-.3l.4-.26l.58.04l1.26.1l1.9.12l1.38.08l2.04.24h.32l.04-.14l-.1-.08l-.08-.08L7.8 10.2L5.68 8.8l-1.12-.82l-.6-.4l-.3-.4l-.12-.84l.54-.6l.74.06l.18.04l.74.58l1.6 1.22L9.4 9.2l.3.24l.12-.08l.02-.06l-.14-.22L8.6 7L7.4 4.92l-.54-.86l-.14-.52c-.06-.2-.08-.4-.08-.6l.6-.84l.36-.1l.84.12l.32.28l.52 1.2l.82 1.86l1.3 2.52l.4.76l.2.68l.06.2h.14v-.1l.1-1.44l.2-1.74l.2-2.24l.06-.64l.32-.76l.6-.4l.52.22l.4.58l-.06.36L14.32 5l-.52 2.42l-.3 1.64h.18l.2-.22l.82-1.08l1.38-1.72l.6-.7l.72-.74l.46-.36h.86l.62.94l-.28.98l-.88 1.12l-.74.94l-1.06 1.42l-.64 1.14l.06.08h.14l2.4-.52l1.28-.22l1.52-.26l.7.32l.08.32l-.28.68l-1.64.4l-1.92.4l-2.86.66l-.04.02l.04.06l1.28.12l.56.04h1.36l2.52.2l.66.4l.38.54l-.06.4l-1.02.52l-1.36-.32l-3.2-.76l-1.08-.26h-.16v.08l.92.9l1.66 1.5l2.12 1.94l.1.48l-.26.4l-.28-.04l-1.84-1.4l-.72-.6l-1.6-1.36h-.1v.14l.36.54l1.96 2.94l.1.9l-.14.28l-.52.2l-.54-.12l-1.16-1.6l-1.2-1.8l-.94-1.64l-.1.08l-.58 6.04l-.26.3l-.6.24l-.5-.4l-.28-.6l.28-1.24l.32-1.6l.26-1.28l.24-1.58l.14-.52v-.04h-.14l-1.2 1.66l-1.8 2.46l-1.44 1.52l-.34.14l-.6-.3l.06-.56l.32-.46l2-2.56l1.2-1.58l.8-.92l-.02-.1h-.06l-5.28 3.44l-.94.12l-.4-.4l.04-.6l.2-.2l1.6-1.1z" />
                    </svg>
                </div>
                <div class="tLabel" id="claude">Claude</div>
            </a>
            <!-- ---------------- -->
            <a href="https://grok.com/">
                <div class="tIcon">
                    <svg height="100%" width="100%" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
                        <rect class="accentColor aiDarkIcons" width="100%" height="100%" rx="50%" />
                        <path class="bgLightTint" style="transform: scale(0.72); transform-origin: center;"
                            d="M 47.658203 2.0566406 C 47.415078 2.0662656 47.174734 2.1631563 46.990234 2.3476562 L 40.880859 8.4648438 C 40.833859 8.4968438 40.789047 8.5351719 40.748047 8.5761719 L 19.146484 30.304688 C 18.777484 30.675688 18.755656 31.266109 19.097656 31.662109 C 19.440656 32.058109 20.027219 32.1245 20.449219 31.8125 L 35.529297 20.667969 C 35.657297 20.572969 35.818125 20.540172 35.953125 20.576172 C 36.101125 20.617172 36.145156 20.725719 36.160156 20.761719 C 37.941156 25.057719 36.981844 29.949656 33.714844 33.222656 C 30.821844 36.118656 26.849547 37.186391 22.810547 36.150391 C 22.575547 36.090391 22.321516 36.119422 22.103516 36.232422 L 16.794922 38.984375 C 16.467922 39.153375 16.259906 39.489422 16.253906 39.857422 C 16.247906 40.225422 16.445625 40.566094 16.765625 40.746094 C 19.618625 42.341094 22.706953 43.119141 25.751953 43.119141 C 30.372953 43.119141 34.89475 41.326094 38.34375 37.871094 C 42.74375 33.467094 44.536297 27.227297 43.154297 21.154297 C 43.150297 21.114297 43.142812 21.073203 43.132812 21.033203 C 41.376812 13.469203 43.505828 10.537469 48.173828 4.1054688 L 48.507812 3.640625 C 48.813813 3.217625 48.741703 2.6309688 48.345703 2.2929688 C 48.147703 2.1249687 47.901328 2.0470156 47.658203 2.0566406 z M 25.996094 7.1367188 C 21.206724 7.0397839 16.477547 8.8765469 12.935547 12.419922 C 7.8695469 17.492922 6.2917656 25.345937 9.0097656 31.960938 C 10.693766 36.058937 7.9562031 38.935484 4.7832031 42.271484 C 3.6512031 43.460484 2.4804844 44.691719 1.5214844 46.011719 C 1.2224844 46.425719 1.2801563 46.998797 1.6601562 47.341797 C 1.8501562 47.513797 2.0900781 47.599609 2.3300781 47.599609 C 2.5680781 47.599609 2.8080469 47.515703 2.9980469 47.345703 L 17.335938 34.525391 C 17.482938 34.416391 17.599922 34.268797 17.669922 34.091797 C 17.822922 33.712797 17.728594 33.278094 17.433594 32.996094 C 14.748594 30.429094 14.157766 27.483844 14.134766 25.464844 C 14.099766 22.358844 15.354984 19.296453 17.583984 17.064453 C 20.080984 14.562453 23.836578 13.331469 27.392578 13.855469 C 27.595578 13.883469 27.810047 13.850906 27.998047 13.753906 L 33.689453 10.800781 C 34.024453 10.627781 34.232516 10.278391 34.228516 9.9003906 C 34.224516 9.5223906 34.006016 9.1796719 33.666016 9.0136719 C 33.269016 8.8206719 32.857031 8.6362812 32.457031 8.4882812 C 30.361094 7.6242188 28.17308 7.18078 25.996094 7.1367188 z" />
                    </svg>
                </div>
                <div class="tLabel" id="grok">Grok</div>
            </a>
            <!-- ---------------- -->
            <a href="https://www.meta.ai/">
                <div class="tIcon">
                    <svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="0 0 24 24">
                        <rect class="accentColor aiDarkIcons" width="100%" height="100%" rx="50%" />
                        <path class="bgLightTint" style="transform: scale(0.75); transform-origin: center;"
                            d="M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a7 7 0 0 0 .265.86a5.3 5.3 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927c1.497 0 2.633-.671 3.965-2.444c.76-1.012 1.144-1.626 2.663-4.32l.756-1.339l.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314c1.046.987 1.992 1.22 3.06 1.22c1.075 0 1.876-.355 2.455-.843a3.7 3.7 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745c0-2.72-.681-5.357-2.084-7.45c-1.282-1.912-2.957-2.93-4.716-2.93c-1.047 0-2.088.467-3.053 1.308c-.652.57-1.257 1.29-1.82 2.05c-.69-.875-1.335-1.547-1.958-2.056c-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999c1.132 1.748 1.647 4.195 1.647 6.4c0 1.548-.368 2.9-1.839 2.9c-.58 0-1.027-.23-1.664-1.004c-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a45 45 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327c1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446c.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338c-1.191 1.649-1.81 1.817-2.486 1.817c-.524 0-1.038-.237-1.383-.794c-.263-.426-.464-1.13-.464-2.046c0-2.221.63-4.535 1.66-6.088c.454-.687.964-1.226 1.533-1.533a2.26 2.26 0 0 1 1.088-.285" />
                    </svg>
                </div>
                <div class="tLabel" id="metaAI">Meta AI</div>
            </a>
            <!-- ---------------- -->
            <!-- <a href="https://firefly.adobe.com/">
                <div class="tIcon">
                    <svg fill="none" height="100%" viewBox="0 0 32 32" width="100%" xmlns="http://www.w3.org/2000/svg">
                        <rect class="accentColor aiDarkIcons" fill="#FF4545" width="100%" height="100%" rx="50%" />
                        <path class="bgLightTint"
                            d="M18.3372 8L25 24V8H18.3372ZM7 8V24L13.6628 8H7ZM16.0113 13.8908L20.258 24H17.4743L16.2064 20.7759H13.0926L16.0113 13.8908H16.0113Z"
                            fill="white" />
                    </svg>
                </div>
                <div class="tLabel" id="firefly">Adobe Firefly</div>
            </a> -->
            <a href="https://chat.deepseek.com/">
                <div class="tIcon">
                    <svg height="100%" width="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <rect class="accentColor aiDarkIcons" width="100%" height="100%" rx="50%" />
                        <path class="bgLightTint" style="transform: scale(0.76); transform-origin: center;"
                            d="M23.748 4.482c-.254-.124-.364.113-.512.234-.051.039-.094.09-.137.136-.372.397-.806.657-1.373.626-.829-.046-1.537.214-2.163.848-.133-.782-.575-1.248-1.247-1.548-.352-.156-.708-.311-.955-.65-.172-.241-.219-.51-.305-.774-.055-.16-.11-.323-.293-.35-.2-.031-.278.136-.356.276-.313.572-.434 1.202-.422 1.84.027 1.436.633 2.58 1.838 3.393.137.093.172.187.129.323-.082.28-.18.552-.266.833-.055.179-.137.217-.329.14a5.526 5.526 0 01-1.736-1.18c-.857-.828-1.631-1.742-2.597-2.458a11.365 11.365 0 00-.689-.471c-.985-.957.13-1.743.388-1.836.27-.098.093-.432-.779-.428-.872.004-1.67.295-2.687.684a3.055 3.055 0 01-.465.137 9.597 9.597 0 00-2.883-.102c-1.885.21-3.39 1.102-4.497 2.623C.082 8.606-.231 10.684.152 12.85c.403 2.284 1.569 4.175 3.36 5.653 1.858 1.533 3.997 2.284 6.438 2.14 1.482-.085 3.133-.284 4.994-1.86.47.234.962.327 1.78.397.63.059 1.236-.03 1.705-.128.735-.156.684-.837.419-.961-2.155-1.004-1.682-.595-2.113-.926 1.096-1.296 2.746-2.642 3.392-7.003.05-.347.007-.565 0-.845-.004-.17.035-.237.23-.256a4.173 4.173 0 001.545-.475c1.396-.763 1.96-2.015 2.093-3.517.02-.23-.004-.467-.247-.588zM11.581 18c-2.089-1.642-3.102-2.183-3.52-2.16-.392.024-.321.471-.235.763.09.288.207.486.371.739.114.167.192.416-.113.603-.673.416-1.842-.14-1.897-.167-1.361-.802-2.5-1.86-3.301-3.307-.774-1.393-1.224-2.887-1.298-4.482-.02-.386.093-.522.477-.592a4.696 4.696 0 011.529-.039c2.132.312 3.946 1.265 5.468 2.774.868.86 1.525 1.887 2.202 2.891.72 1.066 1.494 2.082 2.48 2.914.348.292.625.514.891.677-.802.09-2.14.11-3.054-.614zm1-6.44a.306.306 0 01.415-.287.302.302 0 01.2.288.306.306 0 01-.31.307.303.303 0 01-.304-.308zm3.11 1.596c-.2.081-.399.151-.59.16a1.245 1.245 0 01-.798-.254c-.274-.23-.47-.358-.552-.758a1.73 1.73 0 01.016-.588c.07-.327-.008-.537-.239-.727-.187-.156-.426-.199-.688-.199a.559.559 0 01-.254-.078c-.11-.054-.2-.19-.114-.358.028-.054.16-.186.192-.21.356-.202.767-.136 1.146.016.352.144.618.408 1.001.782.391.451.462.576.685.914.176.265.336.537.445.848.067.195-.019.354-.25.452z"
                            fill="#4D6BFE" />
                    </svg>
                </div>
                <div class="tLabel" id="deepseek">DeepSeek</div>
            </a>
            <!-- ---------------- -->
            <a href="https://chat.qwen.ai/">
                <div class="tIcon">
                    <svg height="100%" width="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <rect class="accentColor aiDarkIcons" width="100%" height="100%" rx="50%" />
                        <path class="bgLightTint" style="transform: scale(0.75); transform-origin: center;"
                            d="M12.604 1.34c.393.69.784 1.382 1.174 2.075a.18.18 0 00.157.091h5.552c.174 0 .322.11.446.327l1.454 2.57c.19.337.24.478.024.837-.26.43-.513.864-.76 1.3l-.367.658c-.106.196-.223.28-.04.512l2.652 4.637c.172.301.111.494-.043.77-.437.785-.882 1.564-1.335 2.34-.159.272-.352.375-.68.37-.777-.016-1.552-.01-2.327.016a.099.099 0 00-.081.05 575.097 575.097 0 01-2.705 4.74c-.169.293-.38.363-.725.364-.997.003-2.002.004-3.017.002a.537.537 0 01-.465-.271l-1.335-2.323a.09.09 0 00-.083-.049H4.982c-.285.03-.553-.001-.805-.092l-1.603-2.77a.543.543 0 01-.002-.54l1.207-2.12a.198.198 0 000-.197 550.951 550.951 0 01-1.875-3.272l-.79-1.395c-.16-.31-.173-.496.095-.965.465-.813.927-1.625 1.387-2.436.132-.234.304-.334.584-.335a338.3 338.3 0 012.589-.001.124.124 0 00.107-.063l2.806-4.895a.488.488 0 01.422-.246c.524-.001 1.053 0 1.583-.006L11.704 1c.341-.003.724.032.9.34zm-3.432.403a.06.06 0 00-.052.03L6.254 6.788a.157.157 0 01-.135.078H3.253c-.056 0-.07.025-.041.074l5.81 10.156c.025.042.013.062-.034.063l-2.795.015a.218.218 0 00-.2.116l-1.32 2.31c-.044.078-.021.118.068.118l5.716.008c.046 0 .08.02.104.061l1.403 2.454c.046.081.092.082.139 0l5.006-8.76.783-1.382a.055.055 0 01.096 0l1.424 2.53a.122.122 0 00.107.062l2.763-.02a.04.04 0 00.035-.02.041.041 0 000-.04l-2.9-5.086a.108.108 0 010-.113l.293-.507 1.12-1.977c.024-.041.012-.062-.035-.062H9.2c-.059 0-.073-.026-.043-.077l1.434-2.505a.107.107 0 000-.114L9.225 1.774a.06.06 0 00-.053-.031zm6.29 8.02c.046 0 .058.02.034.06l-.832 1.465-2.613 4.585a.056.056 0 01-.05.029.058.058 0 01-.05-.029L8.498 9.841c-.02-.034-.01-.052.028-.054l.216-.012 6.722-.012z">
                    </svg>
                </div>
                <div class="tLabel" id="qwen">Qwen</div>
            </a>
            <!-- ---------------- -->
            <a href="https://www.perplexity.ai/">
                <div class="tIcon">
                    <svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="0 0 24 24">
                        <circle class="accentColor aiDarkIcons" cx="50%" cy="50%" r="50%" />
                        <path class="bgLightTint" style="transform: scale(0.82); transform-origin: center;"
                            d="m5.735 2l5.695 5.247V2.012h1.109v5.259L18.259 2v5.983h2.349v8.629h-2.342v5.327l-5.727-5.032v5.09h-1.11V16.99L5.742 22v-5.388H3.393v-8.63h2.342zm4.86 7.078H4.5v6.439h1.24v-2.031zM6.85 13.972v5.585l4.58-4.034V9.81zm5.72 1.497l4.588 4.03v-2.887h-.006v-2.646l-4.582-4.16zm5.696.048H19.5v-6.44h-6.047l4.814 4.363zm-1.115-7.534V4.519l-3.76 3.464zm-6.548 0l-3.76-3.464v3.464z" />
                    </svg>
                </div>
                <div class="tLabel" id="perplexity">Perplexity</div>
            </a>
        </div>
    </div>

    <!-- Settings Modal (hidden by default) -->
    <div id="aiToolsSettingsModal" class="ai-settings-modal" style="display: none;">
        <div class="ai-modal-content">
            <div class="ai-modal-header">
                <h3 id="aiSettingsHeader">AI Tools Settings</h3>
                <div id="closeAISettingsBtn" class="ai-close-button">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <line x1="18" y1="6" x2="6" y2="18"></line>
                        <line x1="6" y1="6" x2="18" y2="18"></line>
                    </svg>
                </div>
            </div>
            <p id="aiSettingsIntro">Select which AI tools to display</p>
            <div class="ai-tools-list">
                <form id="aiToolsForm">
                    <!-- These checkboxes will be populated/managed by JavaScript -->
                </form>
            </div>
            <div class="ai-modal-footer">
                <button id="resetAISettingsBtn" class="ai-reset-button">Reset</button>
                <button id="saveAISettingsBtn" class="ai-save-button">Save</button>
            </div>
        </div>
    </div>

    <!-- Modal Overlay (hidden by default) -->
    <div id="aiToolsSettingsOverlay" class="ai-modal-overlay" style="display: none;"></div>
    <!-- -----------end of AI-Tools------------------ -->

    <!-- ------Menu-bar----------- -->
    <div class="menuBar" id="menuBar" style="display: none;">
        <div class="menuCont" id="menuCont">
            <div class="topRounder">
                <!-- <img src="./svgs/rounder.svg" alt=""> -->
                <svg fill="none" height="100%" viewBox="0 0 30 30" width="100%" xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0_208_15)">
                        <path class="lessDark" clip-rule="evenodd" d="M30 0L0 0C16.5685 0 30 13.4315 30 30L30 0Z"
                            fill="#FF429D" fill-rule="evenodd" />
                    </g>
                    <defs>
                        <clipPath id="clip0_208_15">
                            <rect fill="white" height="30" width="30" />
                        </clipPath>
                    </defs>
                </svg>
            </div>
            <!-- ---end of rounder--- -->
            <div class="topDiv">
                <h1>Material You NewTab</h1>
            </div>
            <div class="optCont" id="optCont">
                <div class="page" id="overviewPage">
                    <div class="tilesCont">

                        <!-- ----tiles----------- -->
                        <a class="tiles" href="https://github.com/XengShi/materialYouNewTab">
                            <div class="icon">
                                <svg fill="none" height="100%" viewBox="0 0 20 20" width="100%"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path id="githab" class="bgLightTint"
                                        d="M10 0C4.475 0 0 4.58819 0 10.2529C0 14.7899 2.8625 18.6219 6.8375 19.9804C7.3375 20.0701 7.525 19.7625 7.525 19.4934C7.525 19.2499 7.5125 18.4425 7.5125 17.5838C5 18.058 4.35 16.9558 4.15 16.3791C4.0375 16.0843 3.55 15.1743 3.125 14.9308C2.775 14.7386 2.275 14.2644 3.1125 14.2516C3.9 14.2388 4.4625 14.9949 4.65 15.3025C5.55 16.8533 6.9875 16.4175 7.5625 16.1484C7.65 15.4819 7.9125 15.0334 8.2 14.777C5.975 14.5207 3.65 13.6364 3.65 9.71466C3.65 8.59965 4.0375 7.67689 4.675 6.95918C4.575 6.70286 4.225 5.65193 4.775 4.24215C4.775 4.24215 5.6125 3.97301 7.525 5.29308C8.325 5.06239 9.175 4.94704 10.025 4.94704C10.875 4.94704 11.725 5.06239 12.525 5.29308C14.4375 3.9602 15.275 4.24215 15.275 4.24215C15.825 5.65193 15.475 6.70286 15.375 6.95918C16.0125 7.67689 16.4 8.58684 16.4 9.71466C16.4 13.6492 14.0625 14.5207 11.8375 14.777C12.2 15.0975 12.5125 15.7126 12.5125 16.6738C12.5125 18.0452 12.5 19.1474 12.5 19.4934C12.5 19.7625 12.6875 20.0829 13.1875 19.9804C15.1728 19.2935 16.8979 17.9854 18.12 16.2403C19.3421 14.4953 19.9997 12.4012 20 10.2529C20 4.58819 15.525 0 10 0Z"
                                        fill="#617859" />
                                </svg>

                            </div>
                            <span id="github">Github</span>
                        </a>
                        <!-- -----end of tiles-------- -->
                        <!-- ----tiles----------- -->
                        <a class="tiles" href="https://xengshi.github.io/materialYouNewTab/docs/feedback.html">
                            <div class="icon">
                                <svg fill="none" height="100%" viewBox="0 0 18 17" width="100%"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path id="sujhaw" class="bgLightTint" clip-rule="evenodd"
                                        d="M10.35 0C12.3789 0 14.3247 0.801267 15.7594 2.22753C17.194 3.65379 18 5.58822 18 7.60526C18 9.6223 17.194 11.5567 15.7594 12.983C14.3247 14.4093 12.3789 15.2105 10.35 15.2105H9.9V16.0963C9.9 16.2151 9.87646 16.3326 9.83072 16.4423C9.78498 16.552 9.71795 16.6517 9.63344 16.7356C9.54894 16.8196 9.44862 16.8861 9.33824 16.9315C9.22785 16.9768 9.10955 17.0001 8.9901 17C6.7761 16.9982 4.5333 16.2636 2.8314 14.7596C1.1142 13.2403 0.0018 10.9829 0 8.06068V7.60526C0 5.58822 0.80598 3.65379 2.24063 2.22753C3.67529 0.801267 5.62109 0 7.65 0H10.35ZM5.85 6.26316C5.49196 6.26316 5.14858 6.40456 4.89541 6.65625C4.64223 6.90794 4.5 7.24931 4.5 7.60526C4.5 7.96121 4.64223 8.30258 4.89541 8.55427C5.14858 8.80597 5.49196 8.94737 5.85 8.94737C6.20804 8.94737 6.55142 8.80597 6.80459 8.55427C7.05777 8.30258 7.2 7.96121 7.2 7.60526C7.2 7.24931 7.05777 6.90794 6.80459 6.65625C6.55142 6.40456 6.20804 6.26316 5.85 6.26316ZM12.15 6.26316C11.792 6.26316 11.4486 6.40456 11.1954 6.65625C10.9422 6.90794 10.8 7.24931 10.8 7.60526C10.8 7.96121 10.9422 8.30258 11.1954 8.55427C11.4486 8.80597 11.792 8.94737 12.15 8.94737C12.508 8.94737 12.8514 8.80597 13.1046 8.55427C13.3578 8.30258 13.5 7.96121 13.5 7.60526C13.5 7.24931 13.3578 6.90794 13.1046 6.65625C12.8514 6.40456 12.508 6.26316 12.15 6.26316Z"
                                        fill="#0038FF" fill-rule="evenodd" />
                                </svg>
                            </div>
                            <span id="feedback">Feedback</span>
                        </a>
                        <!-- -----end of tiles-------- -->

                    </div>
                    <!-- end of tilesCont -->
                    <div class="divider"></div>

                    <div class="toggleTextsCont">
                        <div class="ttcont">
                            <div class="texts">
                                <div class="bigText" id="shortcutsText">Shortcuts</div>
                                <div class="infoText" id="enableShortcutsText">Show saved shortcuts</div>
                            </div>
                            <label class="switch">
                                <input id="shortcutsCheckbox" type="checkbox">
                                <span class="toggle"></span>
                            </label>
                        </div>

                        <div class="ttcont" id="shortcutEditField">
                            <div class="texts">
                                <div class="bigText" id="editShortcutsText">Edit Shortcuts</div>
                                <div class="infoText" id="shortcutsInfoText">Choose which shortcuts get shown</div>
                            </div>
                            <label class="switch">
                                <button id="shortcutEditButton">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                        style="transform: scale(1.1); transform-origin: center;">
                                        <path
                                            d="M12 21q-.425 0-.712-.288T11 20v-4q0-.425.288-.712T12 15t.713.288T13 16v1h7q.425 0 .713.288T21 18t-.288.713T20 19h-7v1q0 .425-.288.713T12 21m-8-2q-.425 0-.712-.288T3 18t.288-.712T4 17h4q.425 0 .713.288T9 18t-.288.713T8 19zm4-4q-.425 0-.712-.288T7 14v-1H4q-.425 0-.712-.288T3 12t.288-.712T4 11h3v-1q0-.425.288-.712T8 9t.713.288T9 10v4q0 .425-.288.713T8 15m4-2q-.425 0-.712-.288T11 12t.288-.712T12 11h8q.425 0 .713.288T21 12t-.288.713T20 13zm4-4q-.425 0-.712-.288T15 8V4q0-.425.288-.712T16 3t.713.288T17 4v1h3q.425 0 .713.288T21 6t-.288.713T20 7h-3v1q0 .425-.288.713T16 9M4 7q-.425 0-.712-.288T3 6t.288-.712T4 5h8q.425 0 .713.288T13 6t-.288.713T12 7z" />
                                    </svg>
                                </button>
                            </label>
                        </div>

                        <div class="ttcont" id="adaptiveIconField">
                            <div class="texts">
                                <div class="bigText" id="adaptiveIconText">Adaptive Icons</div>
                                <div class="infoText" id="adaptiveIconInfoText">Shortcut icons will match the theme
                                    color and appear smaller
                                </div>
                            </div>
                            <label class="switch">
                                <input id="adaptiveIconToggle" type="checkbox">
                                <span class="toggle"></span>
                            </label>
                        </div>

                        <div class="ttcont">
                            <div class="texts">
                                <div class="bigText" id="bookmarksText">Bookmarks</div>
                                <div class="infoText" id="bookmarksInfo">Show bookmarks sidebar</div>
                            </div>
                            <label class="switch">
                                <input id="bookmarksCheckbox" type="checkbox">
                                <span class="toggle"></span>
                            </label>
                        </div>

                        <div class="ttcont">
                            <div class="texts">
                                <div class="bigText" id="ai_tools_button">AI Tools</div>
                                <div class="infoText" id="enable_ai_tools">Show shortcuts for AI tools</div>
                            </div>
                            <label class="switch">
                                <input id="aiToolsCheckbox" type="checkbox">
                                <span class="toggle"></span>
                            </label>
                        </div>

                        <div class="ttcont" id="aiToolsEditField">
                            <div class="texts">
                                <div class="bigText" id="aiToolsSettingsText">AI Tools Settings</div>
                                <div class="infoText" id="aiToolsSettingsInfo">Select which AI tools to display</div>
                            </div>
                            <label class="switch">
                                <button id="aiToolsEditButton">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                        style="transform: scale(1.1); transform-origin: center;">
                                        <path
                                            d="M12 21q-.425 0-.712-.288T11 20v-4q0-.425.288-.712T12 15t.713.288T13 16v1h7q.425 0 .713.288T21 18t-.288.713T20 19h-7v1q0 .425-.288.713T12 21m-8-2q-.425 0-.712-.288T3 18t.288-.712T4 17h4q.425 0 .713.288T9 18t-.288.713T8 19zm4-4q-.425 0-.712-.288T7 14v-1H4q-.425 0-.712-.288T3 12t.288-.712T4 11h3v-1q0-.425.288-.712T8 9t.713.288T9 10v4q0 .425-.288.713T8 15m4-2q-.425 0-.712-.288T11 12t.288-.712T12 11h8q.425 0 .713.288T21 12t-.288.713T20 13zm4-4q-.425 0-.712-.288T15 8V4q0-.425.288-.712T16 3t.713.288T17 4v1h3q.425 0 .713.288T21 6t-.288.713T20 7h-3v1q0 .425-.288.713T16 9M4 7q-.425 0-.712-.288T3 6t.288-.712T4 5h8q.425 0 .713.288T13 6t-.288.713T12 7z" />
                                    </svg>
                                </button>
                            </label>
                        </div>

                        <div class="ttcont">
                            <div class="texts">
                                <div class="bigText" id="googleAppsMenuText">Google Apps</div>
                                <div class="infoText" id="googleAppsMenuInfo">Show shortcuts for Google Apps</div>
                            </div>
                            <label class="switch">
                                <input id="googleAppsCheckbox" type="checkbox">
                                <span class="toggle"></span>
                            </label>
                        </div>

                        <div class="ttcont">
                            <div class="texts">
                                <div class="bigText" id="todoListText">To Do List</div>
                                <div class="infoText" id="todoListInfo">Show a daily To Do list</div>
                            </div>
                            <label class="switch">
                                <input id="todoListCheckbox" type="checkbox">
                                <span class="toggle"></span>
                            </label>
                        </div>
                        <!-- ---🟡--- -->
                        <div class="ttcont">
                            <div class="texts">
                                <div class="bigText" id="hideClockBox">Hide Clock</div>
                                <div class="infoText" id="hideClockBoxInfo">Show or hide the clock and date</div>
                            </div>
                            <label class="switch">
                                <input id="hideClock" type="checkbox">
                                <span class="toggle"></span>
                            </label>
                        </div>
                        <!-- ---🟡--- -->
                        <div class="ttcont clockRegion">
                            <div class="texts">
                                <div class="bigText" id="digitalclocktitle">Digital Clock</div>
                                <div class="infoText" id="digitalclockinfo">Switch to the digital clock</div>
                            </div>
                            <label class="switch">
                                <input id="digitalCheckbox" type="checkbox">
                                <span class="toggle"></span>
                            </label>
                        </div>
                        <div class="ttcont clockRegion" id="timeformatField">
                            <div class="texts">
                                <div class="bigText" id="timeformattitle">12-Hour Format</div>
                                <div class="infoText" id="timeformatinfo">Use 12-hour time format</div>
                            </div>
                            <label class="switch">
                                <input id="12hourcheckbox" type="checkbox">
                                <span class="toggle"></span>
                            </label>
                        </div>
                        <div class="ttcont clockRegion" id="greetingField">
                            <div class="texts">
                                <div class="bigText" id="greetingtitle">Greeting</div>
                                <div class="infoText" id="greetinginfo">Show greeting below custom text</div>
                            </div>
                            <label class="switch">
                                <input id="greetingcheckbox" type="checkbox">
                                <span class="toggle"></span>
                            </label>
                        </div>
                        <!-- ---🟡--- -->
                        <div class="ttcont clockRegion">
                            <div class="texts">
                                <div class="bigText" id="userTextTitle">Customizable Text</div>
                                <div class="infoText" id="userTextInfo">Show custom text below the clock
                                </div>
                            </div>
                            <label class="switch">
                                <input id="userTextCheckbox" type="checkbox">
                                <span class="toggle"></span>
                            </label>
                        </div>
                        <!-- ---🟡--- -->
                        <div class="ttcont">
                            <div class="texts">
                                <div class="bigText" id="micIconTitle">Hide Microphone Icon</div>
                                <div class="infoText" id="micIconInfo">If voice typing is not working
                                </div>
                            </div>
                            <label class="switch">
                                <input id="micIconCheckbox" type="checkbox">
                                <span class="toggle"></span>
                            </label>
                        </div>

                        <div class="ttcont">
                            <div class="texts">
                                <div class="bigText" id="hideSearchWith">Hide Search Engines</div>
                                <div class="infoText" id="hideSearchWithInfo">Switch between search engines by clicking
                                    its icon
                                </div>
                            </div>
                            <label class="switch">
                                <input id="shortcut_switchcheckbox" type="checkbox">
                                <span class="toggle"></span>
                            </label>
                        </div>

                        <div class="ttcont" id="quotesToggle">
                            <div class="texts">
                                <div class="bigText" id="motivationalQuotesText">Motivational Quotes</div>
                                <div class="infoText" id="motivationalQuotesInfo">Show quotes below the searchbar
                                </div>
                            </div>
                            <label class="switch">
                                <input id="motivationalQuotesCheckbox" type="checkbox">
                                <span class="toggle"></span>
                            </label>
                        </div>

                        <!-- ---🟡--- -->
                        <div class="ttcont">
                            <div class="texts">
                                <div class="bigText" id="search_suggestions_button">Search Suggestions</div>
                                <div class="infoText" id="search_suggestions_text">Enable search suggestions
                                </div>
                            </div>
                            <label class="switch">
                                <input id="searchsuggestionscheckbox" type="checkbox" checked>
                                <span class="toggle"></span>
                            </label>
                        </div>

                        <div class="ttcont" id="proxybypassField">
                            <div class="texts">
                                <div class="bigText" id="useproxytitletext">Proxy Bypass</div>
                                <div class="infoText" id="useproxyText">If search suggestions aren't working</div>
                            </div>
                            <label class="switch">
                                <input id="useproxyCheckbox" type="checkbox">
                                <span class="toggle"></span>
                            </label>
                        </div>
                        <!-- ---🟡--- -->
                        <div class="ttcont unflex" id="proxyField">
                            <div class="texts">
                                <div class="bigText" id="ProxyText">CORS Bypass Proxy</div>
                                <div class="infoText" id="ProxySubtext">Add your own CORS bypass proxy
                                </div>
                            </div>
                            <input id="userproxy" placeholder="https://mynt-proxy.rhythmcorehq.com" type="text">
                            <div class="bottom">
                                <a href="https://github.com/Minuga-RC/MYNT-CORS-Bypass-Proxy" id="HostproxyButton"
                                    target="_blank">Host
                                    your own proxy</a>
                                <button class="savebtn" id="saveproxy">Save</button>
                            </div>
                        </div>
                        <!-- ---🟡--- -->
                        <div class="ttcont">
                            <div class="texts">
                                <div class="bigText" id="hideWeatherTitle">Hide Weather</div>
                                <div class="infoText" id="hideWeatherInfo">Disable the weather widgets
                                </div>
                            </div>

                            <label class="switch">
                                <input id="hideWeatherCheckbox" type="checkbox">
                                <span class="toggle"></span>
                            </label>
                        </div>

                        <div class="ttcont weather">
                            <div class="texts">
                                <div class="bigText" id="hideWeatherBox">Hide Weather Card</div>
                                <div class="infoText" id="hideWeatherBoxInfo">Show only temperature pill</div>
                            </div>
                            <label class="switch">
                                <input id="hideWeatherCard" type="checkbox">
                                <span class="toggle"></span>
                            </label>
                        </div>

                        <div class="ttcont weather" id="minMaxTempCont">
                            <div class="texts">
                                <div class="bigText" id="minMaxTempText">Min-Max Temperature</div>
                                <div class="infoText" id="minMaxTempSubText">Replace 'Feels Like' with minimum and
                                    maximum temperature</div>
                            </div>
                            <label class="switch">
                                <input id="minMaxTempCheckbox" type="checkbox">
                                <span class="toggle"></span>
                            </label>
                        </div>

                        <div class="ttcont weather">
                            <div class="texts">
                                <div class="bigText" id="fahrenheitCelsiusCheckbox">Switch to Fahrenheit</div>
                                <div class="infoText" id="fahrenheitCelsiusText">Refresh the page to apply changes
                                </div>
                            </div>
                            <label class="switch">
                                <input id="fahrenheitCheckbox" type="checkbox">
                                <span class="toggle"></span>
                            </label>
                        </div>

                        <div class="ttcont unflex weather" id="locationCont">
                            <div class="texts">
                                <div class="bigText" id="UserLocText">Enter your Location</div>
                                <div class="infoText" id="UserLocSubtext">If the weather location isn't correct
                                </div>
                            </div>

                            <input id="userLoc" placeholder="Your City or Coordinates (Latitude, Longitude)"
                                type="text">

                            <div id="locationSuggestions" class="location-suggestion-box"></div>

                            <div class="bottom">
                                <a href="https://xengshi.github.io/materialYouNewTab/privacy-policy.html"
                                    id="PrivacyPolicy" target="_blank">Privacy policy</a>
                                <button class="savebtn" id="saveLoc">Save</button>
                            </div>
                        </div>

                        <div class="ttcont weather">
                            <div class="texts">
                                <div class="bigText" id="useGPS">Use GPS</div>
                                <div class="infoText" id="useGPSInfo">Enable GPS for live location updates</div>
                            </div>
                            <label class="switch">
                                <input id="useGPScheckbox" type="checkbox">
                                <span class="toggle"></span>
                            </label>
                        </div>

                        <div class="ttcont unflex weather">
                            <div class="texts">
                                <div class="bigText" id="WeatherApiText">Enter your WeatherAPI key</div>
                                <div class="infoText" id="WeatherApiSubtext">If the weather functionality isn't working
                                </div>
                            </div>
                            <input id="userAPI" placeholder="Your weatherAPI key" type="text">
                            <div class="bottom">
                                <a href="https://xengshi.github.io/materialYouNewTab/docs/Get_WeatherAPI_Key.html"
                                    id="LearnMoreButton" target="_blank">Learn more</a>
                                <button class="savebtn" id="saveAPI">Save</button>
                            </div>
                        </div>
                        <!-- ---🟡--- -->
                        <div class="ttcont">
                            <div class="texts">
                                <div class="bigText" id="enableDarkMode">Dark Mode</div>
                                <div class="infoText" id="enableDarkModeInfo">
                                    Enable dark mode themes
                                </div>
                            </div>
                            <label class="switch">
                                <input id="enableDarkModeCheckbox" type="checkbox">
                                <span class="toggle"></span>
                            </label>
                        </div>
                        <!-- ---🟡--- -->

                    </div>
                    <br>
                    <div class="divider" id="divider2"></div>
                    <!-- start of languageSelector -->
                    <div class="languageSection">
                        <div class="languageIcon">
                            <svg height="100%" width="30px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                                <g id="languageSelectorIconSvg" class="accentColor">
                                    <path
                                        d="M4.545 6.714L4.11 8H3l1.862-5h1.284L8 8H6.833l-.435-1.286zm1.634-.736L5.5 3.956h-.049l-.679 2.022z" />
                                    <path
                                        d="M0 2a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v3h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-3H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zm7.138 9.995q.289.451.63.846c-.748.575-1.673 1.001-2.768 1.292c.178.217.451.635.555.867c1.125-.359 2.08-.844 2.886-1.494c.777.665 1.739 1.165 2.93 1.472c.133-.254.414-.673.629-.89c-1.125-.253-2.057-.694-2.82-1.284c.681-.747 1.222-1.651 1.621-2.757H14V8h-3v1.047h.765c-.318.844-.74 1.546-1.272 2.13a6 6 0 0 1-.415-.492a2 2 0 0 1-.94.31" />
                                </g>
                            </svg>
                        </div>

                        <!-- LANGUAGE SELECTION OPTIONS -->
                        <select class="languageSelector" id="languageSelector">
                            <option value="en">English</option>
                            <option value="az">Azerbaijani (Azərbaycanca)</option>
                            <option value="bn">Bangla (বাংলা)</option>
                            <option value="zh">Chinese (Simplified) (简体中文)</option>
                            <option value="zh_TW">Chinese (Traditional) (繁體中文)</option>
                            <option value="cs">Czech (Čeština)</option>
                            <option value="fr">French (Français)</option>
                            <option value="hi">Hindi (हिन्दी)</option>
                            <option value="hu">Hungarian (Magyar)</option>
                            <option value="idn">Indonesian (Bahasa Indonesia)</option>
                            <option value="it">Italian (Italiano)</option>
                            <option value="ja">Japanese (日本語)</option>
                            <option value="ko">Korean (한국어)</option>
                            <option value="mr">Marathi (मराठी)</option>
                            <option value="np">Nepali (नेपाली)</option>
                            <option value="pt">Portuguese (Brazil) (Português)</option>
                            <option value="ru">Russian (Русский)</option>
                            <option value="sl">Slovenian (Slovenščina)</option>
                            <option value="es">Spanish (Español)</option>
                            <option value="tr">Turkish (Türkçe)</option>
                            <option value="ur">Urdu (اردو)</option>
                            <option value="uz">Uzbek (O'zbek)</option>
                            <option value="vi">Vietnamese (Tiếng Việt)</option>
                            <!-- Place new language alphabetically -->
                        </select>
                        <!-- end of languageSelector -->
                    </div>
                    <br>

                    <div class="themingStuff">
                        <!-- ⚫🟣🔵🔴🟡🟢🟠⚪ -->
                        <div class="btn" id="themeButton">
                            <!-- <img src="./svgs/theme.svg" alt=""> -->
                            <svg fill="none" height="100%" viewBox="0 0 20 20" width="100%"
                                xmlns="http://www.w3.org/2000/svg">
                                <path id="themeIconSvg" class="accentColor"
                                    d="M14.2778 10C13.9684 10 13.6716 9.87708 13.4528 9.65829C13.234 9.4395 13.1111 9.14275 13.1111 8.83333C13.1111 8.52391 13.234 8.22717 13.4528 8.00837C13.6716 7.78958 13.9684 7.66667 14.2778 7.66667C14.5872 7.66667 14.8839 7.78958 15.1027 8.00837C15.3215 8.22717 15.4444 8.52391 15.4444 8.83333C15.4444 9.14275 15.3215 9.4395 15.1027 9.65829C14.8839 9.87708 14.5872 10 14.2778 10ZM11.9444 6.88889C11.635 6.88889 11.3383 6.76597 11.1195 6.54718C10.9007 6.32839 10.7778 6.03164 10.7778 5.72222C10.7778 5.4128 10.9007 5.11606 11.1195 4.89726C11.3383 4.67847 11.635 4.55556 11.9444 4.55556C12.2539 4.55556 12.5506 4.67847 12.7694 4.89726C12.9882 5.11606 13.1111 5.4128 13.1111 5.72222C13.1111 6.03164 12.9882 6.32839 12.7694 6.54718C12.5506 6.76597 12.2539 6.88889 11.9444 6.88889ZM8.05556 6.88889C7.74614 6.88889 7.44939 6.76597 7.2306 6.54718C7.0118 6.32839 6.88889 6.03164 6.88889 5.72222C6.88889 5.4128 7.0118 5.11606 7.2306 4.89726C7.44939 4.67847 7.74614 4.55556 8.05556 4.55556C8.36497 4.55556 8.66172 4.67847 8.88051 4.89726C9.09931 5.11606 9.22222 5.4128 9.22222 5.72222C9.22222 6.03164 9.09931 6.32839 8.88051 6.54718C8.66172 6.76597 8.36497 6.88889 8.05556 6.88889ZM5.72222 10C5.4128 10 5.11606 9.87708 4.89726 9.65829C4.67847 9.4395 4.55556 9.14275 4.55556 8.83333C4.55556 8.52391 4.67847 8.22717 4.89726 8.00837C5.11606 7.78958 5.4128 7.66667 5.72222 7.66667C6.03164 7.66667 6.32839 7.78958 6.54718 8.00837C6.76597 8.22717 6.88889 8.52391 6.88889 8.83333C6.88889 9.14275 6.76597 9.4395 6.54718 9.65829C6.32839 9.87708 6.03164 10 5.72222 10ZM10 3C8.14348 3 6.36301 3.7375 5.05025 5.05025C3.7375 6.36301 3 8.14348 3 10C3 11.8565 3.7375 13.637 5.05025 14.9497C6.36301 16.2625 8.14348 17 10 17C10.3094 17 10.6062 16.8771 10.825 16.6583C11.0437 16.4395 11.1667 16.1428 11.1667 15.8333C11.1667 15.53 11.05 15.2578 10.8633 15.0556C10.6844 14.8456 10.5678 14.5733 10.5678 14.2778C10.5678 13.9684 10.6907 13.6716 10.9095 13.4528C11.1283 13.234 11.425 13.1111 11.7344 13.1111H13.1111C14.1425 13.1111 15.1317 12.7014 15.861 11.9721C16.5903 11.2428 17 10.2536 17 9.22222C17 5.78444 13.8656 3 10 3Z"
                                    fill="#f00" />
                            </svg>
                        </div>
                        <!-- -------- -->
                        <div class="colorsContainer" id="colorsContainer">
                            <input class="colorPlate" name="color" type="radio" value="red">
                            <input class="colorPlate" name="color" type="radio" value="yellow">
                            <input class="colorPlate" name="color" type="radio" value="green">
                            <input class="colorPlate" name="color" type="radio" value="cyan">
                            <input id="dfChecked" class="colorPlate" name="color" type="radio" checked value="blue">

                            <!-- -------- -->
                            <input class="colorPlate" name="color" type="radio" value="pink">
                            <input class="colorPlate" name="color" type="radio" value="purple">
                            <input class="colorPlate" name="color" type="radio" value="orange">
                            <input class="colorPlate" name="color" type="radio" value="brown">
                            <input class="colorPlate" name="color" type="radio" value="silver">

                            <!-- -------- -->

                            <input class="colorPlate" name="color" type="radio" value="peach">
                            <input class="colorPlate" id="darkTheme" name="color" type="radio" value="dark">

                            <!-- ----Color Picker || ColorPicker---- -->
                            <label id="rangColor" class="colorPlate colorPickerLabel" for="colorPicker">Pick
                                color</label>
                            <input type="color" id="colorPicker" autocomplete="off" value="#EA1010" />
                            <!-- ----End of Color Picker || ColorPicker---- -->
                        </div>

                    </div>

                    <!-- ----Custom Wallpaper uploading thingsss------------- -->
                    <div class="uploadClearContainer">
                        <!-- Upload Wallpaper Button -->
                        <button class="uploadButton" id="uploadTrigger">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                                <path fill="currentColor"
                                    d="m11.558 13.646l-.084.071l-6.927 6.8a3.23 3.23 0 0 0 1.703.481h4.914l.356-1.423c.162-.648.497-1.24.97-1.712l2.11-2.11l-2.075-2.036l-.094-.078a.75.75 0 0 0-.873.007m4.945-5.394a.752.752 0 1 0-1.504 0a.752.752 0 0 0 1.504 0m-.843 6.441l-2.085-2.046l-.128-.117a2.25 2.25 0 0 0-2.888-.006l-.136.123l-6.938 6.81A3.23 3.23 0 0 1 3 17.75V6.25A3.25 3.25 0 0 1 6.25 3h11.499a3.25 3.25 0 0 1 3.25 3.25v4.762a3.28 3.28 0 0 0-2.608.95zM13.5 8.252a2.252 2.252 0 1 0 4.503 0a2.252 2.252 0 0 0-4.504 0m5.598 4.417l-5.901 5.901a2.7 2.7 0 0 0-.707 1.248l-.457 1.83c-.2.797.522 1.518 1.318 1.319l1.83-.458a2.7 2.7 0 0 0 1.248-.706L22.33 15.9a2.286 2.286 0 0 0-3.233-3.232" />
                            </svg>
                            <span id="uploadWallpaperText">Upload Wallpaper</span>
                        </button>

                        <!-- Random Wallpaper Button -->
                        <button class="randomButton" id="randomImageTrigger">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 1792 1600">
                                <path fill="currentColor" style="transform: scale(0.9); transform-origin: center;"
                                    d="M666 449q-60 92-137 273q-22-45-37-72.5T451.5 586t-51-56.5t-63-35T256 480H32q-14 0-23-9t-9-23V256q0-14 9-23t23-9h224q250 0 410 225m1126 799q0 14-9 23l-320 320q-9 9-23 9q-13 0-22.5-9.5t-9.5-22.5v-192q-32 0-85 .5t-81 1t-73-1t-71-5t-64-10.5t-63-18.5t-58-28.5t-59-40t-55-53.5t-56-69.5q59-93 136-273q22 45 37 72.5t40.5 63.5t51 56.5t63 35t81.5 14.5h256V928q0-14 9-23t23-9q12 0 24 10l319 319q9 9 9 23m0-896q0 14-9 23l-320 320q-9 9-23 9q-13 0-22.5-9.5T1408 672V480h-256q-48 0-87 15t-69 45t-51 61.5t-45 77.5q-32 62-78 171q-29 66-49.5 111t-54 105t-64 100t-74 83t-90 68.5t-106.5 42t-128 16.5H32q-14 0-23-9t-9-23v-192q0-14 9-23t23-9h224q48 0 87-15t69-45t51-61.5t45-77.5q32-62 78-171q29-66 49.5-111t54-105t64-100t74-83t90-68.5t106.5-42t128-16.5h256V32q0-14 9-23t23-9q12 0 24 10l319 319q9 9 9 23" />
                            </svg>
                        </button>

                        <!-- Clear Background Button -->
                        <button class="clearButton" id="clearImage">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                                <path fill="currentColor"
                                    d="M19 4h-3.5l-1-1h-5l-1 1H5v2h14M6 19a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7H6z" />
                            </svg>
                        </button>

                        <!-- Hidden File Input -->
                        <input type="file" id="imageUpload" accept="image/*" />
                    </div>
                    <!-- ----End of Custom Wallpaper uploading thingsss------------- -->

                    <!-- end of themingStuff -->

                    <!-- Settings -->
                    <div class="backupRestoreContainer">
                        <button class="backupRestoreBtn" id="backupBtn">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                                <path fill="currentColor"
                                    d="M6.5 20q-2.275 0-3.887-1.575T1 14.575q0-1.95 1.175-3.475T5.25 9.15q.625-2.3 2.5-3.725T12 4q2.925 0 4.963 2.038T19 11q1.725.2 2.863 1.488T23 15.5q0 1.875-1.312 3.188T18.5 20H13q-.825 0-1.412-.587T11 18v-5.15L9.4 14.4L8 13l4-4l4 4l-1.4 1.4l-1.6-1.55V18h5.5q1.05 0 1.775-.725T21 15.5t-.725-1.775T18.5 13H17v-2q0-2.075-1.463-3.538T12 6T8.463 7.463T7 11h-.5q-1.45 0-2.475 1.025T3 14.5t1.025 2.475T6.5 18H9v2zm5.5-7" />
                            </svg>
                            <span id="backupText">Backup</span>
                        </button>

                        <button class="backupRestoreBtn" id="restoreBtn">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                                <path fill="currentColor"
                                    d="M13.25 3a9.003 9.003 0 0 0-9.26 9H2.2c-.45 0-.67.54-.35.85l2.79 2.8c.2.2.51.2.71 0l2.79-2.8c.32-.31.09-.85-.35-.85h-1.8c0-3.9 3.18-7.05 7.1-7c3.72.05 6.85 3.18 6.9 6.9c.05 3.91-3.1 7.1-7 7.1c-1.61 0-3.1-.55-4.28-1.48a.994.994 0 0 0-1.32.08c-.42.43-.39 1.13.08 1.5a8.93 8.93 0 0 0 5.52 1.9c5.05 0 9.14-4.17 9-9.26c-.13-4.69-4.05-8.61-8.74-8.74m-.51 5c-.41 0-.75.34-.75.75v3.68c0 .35.19.68.49.86l3.12 1.85c.36.21.82.09 1.03-.26c.21-.36.09-.82-.26-1.03l-2.88-1.71v-3.4c0-.4-.33-.74-.75-.74" />
                            </svg>
                            <span id="restoreText">Restore</span>
                        </button>
                    </div>

                    <input type="file" id="fileInput" accept=".json" style="display: none;">

                    <div class="spacer"></div>
                    <button class="resetbtn" id="resetsettings">Reset Settings</button>

                    <!-- ----------Tips---------- -->
                    <div class="tips" id="tips">
                        <div class="ttcont">
                            <div class="texts">
                                <div class="bigText" id="switchSearchModes">Switch Search Modes</div>
                                <div class="infoText" id="switchSearchModesInfo">Click on ‘Search With’ to change the
                                    mode.</div>
                            </div>
                        </div>

                        <div class="ttcont hideOnMobile">
                            <div class="texts">
                                <div class="bigText" id="adjustZoom">Adjust Zoom</div>
                                <div class="infoText" id="adjustZoomInfo">Press Ctrl + "+" or Ctrl + "-" to adjust the
                                    zoom.</div>
                            </div>
                        </div>

                        <div class="ttcont hideOnMobile">
                            <div class="texts">
                                <div class="bigText" id="changeBrowserTheme">Change Browser Theme</div>
                                <div class="infoText" id="changeBrowserThemeInfo">Click the three dots (⋮) > More tools
                                    > Customize Chrome, then choose a color that matches the extension theme.</div>
                            </div>
                        </div>

                        <div class="ttcont hideOnMobile" id="firefoxHomepage" style="display: none;">
                            <div class="texts">
                                <div class="bigText" id="updateFirefoxHomepage">Update Homepage</div>
                                <div class="infoText" id="updateFirefoxHomepageInfo">To change your homepage like the
                                    new tab as well, visit <a
                                        href="https://github.com/XengShi/materialYouNewTab#-firefox"
                                        target="_blank">this link</a> and follow the instructions.
                                </div>
                            </div>
                        </div>

                        <button id="dontShowTips">Don't show it again</button>
                    </div>

                    <!-- ----------end of tips----- -->

                    <div id="menuCloseButton">
                        <!-- <img src="./svgs/x.svg" alt=""> -->
                        <div class="icon">
                            <svg id="closeBtnX" fill="none" height="30px" viewBox="0 0 34 34" width="30px"
                                xmlns="http://www.w3.org/2000/svg">
                                <path class="accentColor"
                                    d="M19.4038 17L24.2131 12.1924C24.5321 11.8734 24.7113 11.4408 24.7113 10.9896C24.7113 10.5385 24.5321 10.1059 24.2131 9.7869C23.8941 9.46791 23.4615 9.2887 23.0103 9.2887C22.5592 9.2887 22.1266 9.46791 21.8076 9.7869L17 14.5962L12.1924 9.7869C11.8734 9.46791 11.4408 9.2887 10.9896 9.2887C10.5385 9.2887 10.1059 9.46791 9.7869 9.7869C9.46791 10.1059 9.2887 10.5385 9.2887 10.9896C9.2887 11.4408 9.46791 11.8734 9.7869 12.1924L14.5962 17L9.7869 21.8076C9.46791 22.1266 9.2887 22.5592 9.2887 23.0103C9.2887 23.4615 9.46791 23.8941 9.7869 24.2131C10.1059 24.5321 10.5385 24.7113 10.9896 24.7113C11.4408 24.7113 11.8734 24.5321 12.1924 24.2131L17 19.4038L21.8076 24.2131C22.1266 24.5321 22.5592 24.7113 23.0103 24.7113C23.4615 24.7113 23.8941 24.5321 24.2131 24.2131C24.5321 23.8941 24.7113 23.4615 24.7113 23.0103C24.7113 22.5592 24.5321 22.1266 24.2131 21.8076L19.4038 17ZM17 34C7.6109 34 0 26.3891 0 17C0 7.6109 7.6109 0 17 0C26.3891 0 34 7.6109 34 17C34 26.3891 26.3891 34 17 34Z"
                                    fill="#23F22C" />
                            </svg>
                        </div>
                        <!-- <span>Close</span> -->
                    </div>
                    <!-- ------------------ -->


                </div>
                <!-- end of page 1 -->
                <div class="page" id="shortcutEditPage">
                    <div class="topBar">
                        <button id="backButton">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                                <path
                                    d="M21 11H6.414l5.293-5.293l-1.414-1.414L2.586 12l7.707 7.707l1.414-1.414L6.414 13H21z" />
                            </svg>
                        </button>
                        <div class="rightButtons">
                            <button id="newShortcutButton">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 -1 12 12">
                                    <path
                                        d="M6 1.5a.5.5 0 0 0-1 0V5H1.5a.5.5 0 0 0 0 1H5v3.5a.5.5 0 0 0 1 0V6h3.5a.5.5 0 0 0 0-1H6z" />
                                </svg>
                            </button>
                            <button id="resetButton">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                                    <path
                                        d="M13 15.75v-1.5h4v1.5zM14.5 21v-1.25H13v-1.5h1.5V17H16v4zm2.5-1.25v-1.5h4v1.5zM18 17v-4h1.5v1.25H21v1.5h-1.5V17zm2.775-7H18.7q-.65-2.2-2.475-3.6T12 5Q9.075 5 7.037 7.038T5 12q0 1.8.813 3.3T8 17.75V15h2v6H4v-2h2.35Q4.8 17.75 3.9 15.938T3 12q0-1.875.713-3.512t1.924-2.85t2.85-1.925T12 3q3.225 0 5.663 1.988T20.775 10" />
                                </svg>
                            </button>
                        </div>
                    </div>
                    <div class="pageTitle" id="editShortcutsList">Saved Shortcuts</div>
                    <div id="editShortcutsListInfo">You can add new shortcuts by clicking the "+" icon or edit existing
                        ones by clicking on the shortcut name or URL</div>
                    <div id="shortcutList"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- ------end of Menu-bar----------- -->
    <div id="menuButton"></div>
    <!-- ending-of-body -->

</body>

</html>