Steam Link Menü @Atze
// ==UserScript==
// @name Steam Link Menü
// @match https://steamcommunity.com/*
// @version 1.0
// @description Steam Link Menü @Atze
// @namespace https://greasyfork.org/users/1133399
// ==/UserScript==
(function () {
"use strict";
let version = GM_info.script.version;
console.log(`Steam Enhanced Version ${version}`);
// Store and retrieve ID from localStorage
const defaultID = "XXXXXXXXXXXXXXXX";
let steamID = localStorage.getItem("steamID") || defaultID;
let css = `
.steam-enhanced {
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
position: absolute;
z-index: 600;
top: 70px;
right: 270px;
opacity: 1; /* Normalerweise voll sichtbar */
width: 100%;
max-width: 175px;
margin-bottom: 10px;
padding: 0;
background: rgba(0, 0, 0, 255); /* Halbtransparenter Hintergrund */
border-radius: 4px;
font-weight: bold; /* Text fett machen */
transition: background-color 0.5s ease;
color: #FFF;
}
#changeSteamIDButton {
background-color: #4CAF50; /* Grüne Hintergrundfarbe */
color: white; /* Weiße Textfarbe */
border: none; /* Keinen Rand anzeigen */
padding: 10px 20px; /* Innenabstand */
text-align: center; /* Text zentrieren */
text-decoration: none; /* Keine Textdekoration */
display: inline-block; /* Als Inline-Block anzeigen */
font-size: 12px; /* Schriftgröße */
margin: 4px 2px; /* Außenabstand */
cursor: pointer; /* Cursor zum Klickzeiger ändern */
border-radius: 5px; /* Ecken abrunden */
transition-duration: 0.4s; /* Übergangsdauer für Hover-Effekt */
}
#changeSteamIDButton:hover {
background-color: #FFFB00; /* Dunklere grüne Farbe beim Darüberfahren */
color: #000000; /* Weiße Textfarbe */
}
.steam-enhanced-container {
justify-content: center; /* Horizontal zentrieren */
}
.steam-enhanced.pinned {
position: fixed;
}
.steam-enhanced header {
padding: 5px 5px 5px 10px;
}
.steam-enhanced h4 {
display: flex;
justify-content: center; /* Text nach links ausrichten */
align-items: center; /* Text vertikal zentrieren */
width: 100%;
font-size: 13px;
font-weight: bold; /* Text fett machen */
color: green;
text-decoration: underline;
}
.steam-enhanced h4 span {
display: flex;
width: 100%;
max-width: 50px;
justify-content: space-around;
}
.steam-enhanced h4 i#steamEnhancedToggle {
display: inline-block;
width: 20px;
height: 20px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAMAQMAAAC6HhTBAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRFAAAAxcPCp77KdQAAAAJ0Uk5TAP9bkSK1AAAAGklEQVR4nGNgQAPMfxgYGH8AGR+AOAFdlgEAUsADSd64CbwAAAAASUVORK5CYII=);
background-repeat: no-repeat;
background-position: right center;
cursor: pointer;
}
.steam-enhanced.expanded h4 i#steamEnhancedToggle {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAMAQMAAAC6HhTBAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRFAAAAxcPCp77KdQAAAAJ0Uk5TAP9bkSK1AAAAGUlEQVR4nGNgQAcJQPyBgYHxBwMD8x8MWQBLKANJzkSRZQAAAABJRU5ErkJggg==);
}
.steam-enhanced h4 i#steamEnhancedPin {
display: inline-block;
width: 20px;
height: 20px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAALtJREFUOE/Vk9ERwiAMhv+og3QPBDsKTGKdhG5SBXuO4SaNV671CPXqQ1+UJ46QL8n/A2Hjoo35WAD6GHgNqrQROUvAPXgwLBhOgAgehFYdjThfAkKwIPiyUuqM4ZQxbQ7+RUCMZ4CbjyN80+DRddVw2D8BapTWl3zWfgQT24HJaa2vc0xo0M8OEIRQ42ViVAzUpRMSMDqwwymrXE/7d0UMuOVOrL7E1BGA0vtVG8Xc/w+IMSYRc9vKj/YChYhmESTC7boAAAAASUVORK5CYII=);
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
background-size: contain;
}
.steam-enhanced h4 i#steamEnhancedPin.toggle {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAKdJREFUOE9jZKAQMFKonwHDgCuXLv7HZ6iOnj6KHiwGXJjPwMCYgN2Q/wt09AwSkeUwDLh66VLCf4b/87EZwMjAmKitp7dgsBtw+WL9//8MDWSFwfXz5xX+MjPdxxMLD/4z/kvU1TU8AFODEohXLuGLAZgW1JhAMQASA//sES5gdICw/yPZyHQQOSbwpkSIixgY0OMebzQiSw4DAy5fPg8ORORoQ49iAFq1UxFzHZ4rAAAAAElFTkSuQmCC");
background-color: red; /* Hintergrundfarbe auf Rot setzen */
background-position: center; /* Bild in der Mitte positionieren */
background-size: contain; /* Bildgröße anpassen, um es vollständig anzuzeigen */
}
.steam-enhanced a:hover {
color: red;
text-decoration: underline; /* Fügt eine Unterstreichung hinzu */
transition: color 0.5s ease-in-out;
text-shadow: 0 0 1px red;
}
.steam-enhanced-container {
padding: 5px 5px 5px 15px;
margin: 5px 0 5px 0;
user-select: none;
}
.steam-enhanced-container.hide {
display: none;
}
summary::after {
content: "";
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAMAQMAAAC6HhTBAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRFAAAAxcPCp77KdQAAAAJ0Uk5TAP9bkSK1AAAAGklEQVR4nGNgQAPMfxgYGH8AGR+AOAFdlgEAUsADSd64CbwAAAAASUVORK5CYII=);
width: 20px;
height: 20px;
display: inline-block;
background-repeat: no-repeat;
background-position: right center;
}
.quick-links.hide {
display: none;
}
.quick-links-toggle, .quick-links-toggle span {
display: flex;
}
.quick-links-toggle i {
content: "";
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAMAQMAAAC6HhTBAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRFAAAAxcPCp77KdQAAAAJ0Uk5TAP9bkSK1AAAAGklEQVR4nGNgQAPMfxgYGH8AGR+AOAFdlgEAUsADSd64CbwAAAAASUVORK5CYII=);
width: 20px;
height: 20px;
display: inline-block;
background-repeat: no-repeat;
background-position: right center;
}
.quick-navigation {
z-index: 500;
}
.change-profile-theme .color-themes,
.change-profile-theme .quick-navigation,
.change-profile-theme .useful-links {
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
display: flex;
flex-direction: column;
min-width: 130px;
margin-top: 5px;
margin-left: -5px;
padding: 15px;
padding-top: 10px;
padding-left: 15px;
background-color: rgba(0, 0, 0, 0.5);
border-top: 1px solid rgb(255 255 255 / 25%);
border-radius: 4px;
color: #fff;
}
.quick-icons-container {
display: flex;
justify-content: center; /* icons in the center horizontally */
}
.quick-icon {
background: #242c36;
margin: 0 15px 0 0;
width: 20px;
height: 20px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 4px;
padding: 3px;
}
.steam-enhanced-container details summary {
list-style: none;
display: flex;
justify-content: center; /* Zentriert den Text horizontal */
width: 100%; /* Stellt sicher, dass das Summary-Element die volle Breite einnimmt */
cursor: pointer;
text-align: center; /* Stellt sicher, dass der Text innerhalb des Flex-Containers zentriert ist */
color: #fff; /* Weißer Text für nicht geöffnete Menüs */
}
.steam-enhanced-container details[open] summary {
color: yellow; /* Blauer Text wenn geöffnet */
text-decoration: underline; /* Text unterstrichen wenn geöffnet */
font-size: larger; /* Größerer Text */
}
`;
let head = document.head || document.getElementsByTagName("head")[0],
style = document.createElement("style");
head.appendChild(style);
style.type = "text/css";
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
//* ==========================================================================
//* 1. Upload Artwork & Enable Custom Uploads Buttons
//* ==========================================================================
//* Upload custom artwork button to profile
(function () {
"use strict";
function rafAsync() {
return new Promise((resolve) => requestAnimationFrame(resolve));
}
async function checkElement(selector) {
let querySelector = null;
while (querySelector === null) {
await rafAsync();
querySelector = document.querySelector(selector);
}
return querySelector;
}
checkElement("#global_header").then((element) => {
console.log("global_header gefunden");
function setUploadArtworkButton() {
const uploadArtworkURL = `https://steamcommunity.com/sharedfiles/edititem/767/3/`;
const uploadCustomArtworkButtonContainer = document.createElement("div");
uploadCustomArtworkButtonContainer.id = "steamEnhanced";
uploadCustomArtworkButtonContainer.className = "steam-enhanced";
const bodyClasses = document.body.classList;
const currentTheme = bodyClasses.contains("Theme") ? "Theme" : "NoTheme";
function createQuickIcon(id, title, iconSvg) {
return `
<div class="profile_count_link">
<a id="${id}" title="${title}" class="quick-icon">
${iconSvg}
</a>
</div>
`;
}
// Profile Links
function createProfileLink(url, label, iconSvg, newTab = false) {
const targetAttribute = newTab ? ' target="_blank"' : '';
return `
<div class="profile_count_link">
<span class="icon">${iconSvg}</span>
<a href="${url}"${targetAttribute}>${label}</a>
</div>
`;
}
// Steam Enhanced Header
const steamEnhancedHeader = `
<header>
<h4>Link Menü<span><i id="steamEnhancedPin"></i> <i id="steamEnhancedToggle"></i></span></h4>
</header>
`;
// Quick-Icons Container
const quickIconsContainer = `
<div class="quick-icons-container">
${createQuickIcon("backToTop", "Back To Top", `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5"/></svg>`)}
${createQuickIcon("goToBottom", "Go To Bottom", `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1"/></svg>`)}
${createQuickIcon("reloadPage", "Reload Page", `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2z"/><path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466"/></svg>`)}
</div>
`;
// Profile Links Container
const profileLinksContainer = `
<hr class="profile-section-separator"/>
<div class="change-profile-theme quick-navigation">
<details>
<summary>Stats&More</summary>
<div class="quick-navigation">
<div class="profile_count1_link">
${createProfileLink(`https://csstats.gg/player/${steamID}`, "CSStats.gg", `<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 48.000000 48.000000" preserveAspectRatio="xMidYMid meet"><g transform="translate(0.000000,48.000000) scale(0.100000,-0.100000)" stroke="none"><path d="M367 473 c-4 -3 -7 -19 -7 -35 0 -16 -6 -57 -14 -91 -8 -34 -22 -102 -31 -152 -9 -49 -21 -109 -26 -132 -13 -61 -13 -63 31 -63 38 0 40 2 51 43 6 23 15 67 20 97 10 68 27 156 45 237 22 97 20 103 -24 103 -21 0 -42 -3 -45 -7z"/><path d="M215 303 c-4 -27 -11 -61 -15 -78 -5 -16 -16 -61 -24 -100 -8 -38 -17 -82 -21 -97 -7 -27 -6 -28 37 -28 l45 0 17 78 c10 42 24 102 31 132 8 30 16 74 20 98 l7 42 -46 0 -45 0 -6 -47z"/><path d="M72 228 c-5 -24 -17 -73 -26 -110 -9 -36 -16 -78 -16 -93 0 -25 2 -26 43 -23 41 3 42 4 48 43 4 22 16 79 26 127 11 48 18 90 15 93 -3 3 -22 5 -42 5 -36 0 -38 -2 -48 -42z"/></g></svg>`, true)}
${createProfileLink(`https://leetify.com/app/profile/${steamID}`, "Leetify", `<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 32.000000 32.000000" preserveAspectRatio="xMidYMid meet"><g transform="translate(0.000000,32.000000) scale(0.100000,-0.100000)" stroke="none"><path d="M36 262 c-4 -7 -16 -80 -18 -112 0 -8 -4 -19 -8 -25 -3 -5 -7 -27 -9 -47 l-2 -38 64 0 c68 0 95 15 83 45 -3 8 -1 15 5 15 6 0 7 5 4 10 -3 5 -17 10 -31 10 -23 0 -25 3 -21 40 4 37 17 69 17 42 0 -8 18 -12 46 -12 l45 0 -6 -52 c-4 -29 -11 -61 -16 -70 -15 -27 -11 -29 38 -26 45 3 48 5 55 38 5 19 10 42 12 50 40 150 49 140 -113 140 -77 0 -142 -4 -145 -8z"/></g></svg>`, true)}
</div>
</div>
</details>
</div>
<hr class="profile-section-separator"/>
<div class="change-profile-theme quick-navigation">
<details>
<summary>Steam Links</summary>
<div class="quick-navigation">
<div class="profile_count3_link">
${createProfileLink("https://steamstat.us/", "Steam Status", `<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 516.000000 516.000000" preserveAspectRatio="xMidYMid meet"><g transform="translate(0.000000,516.000000) scale(0.100000,-0.100000)" stroke="none"><path d="M1900 5070 c-594 -85 -1070 -245 -1405 -474 -127 -86 -290 -250 -349 -351 -43 -74 -75 -151 -65 -158 2 -2 310 -61 684 -131 l680 -127 69 16 c38 9 121 20 186 24 l117 8 324 194 323 194 16 68 c21 84 38 108 124 173 126 95 313 171 516 209 280 52 664 36 926 -40 238 -68 393 -166 453 -287 27 -54 31 -71 31 -146 0 -104 -21 -155 -91 -222 -155 -150 -461 -248 -838 -266 l-135 -7 -414 -149 c-227 -81 -419 -148 -426 -148 -7 0 -18 -18 -25 -41 -28 -93 -189 -194 -391 -245 -89 -22 -135 -27 -298 -31 -215 -6 -325 4 -462 44 -131 37 -226 87 -289 152 l-56 56 -440 86 c-242 47 -442 84 -445 81 -9 -7 175 -175 253 -232 l77 -54 -1 -51 0 -50 -72 -47 c-84 -55 -277 -224 -277 -243 0 -7 -7 -15 -15 -19 -8 -3 -15 -12 -15 -21 0 -8 -4 -15 -10 -15 -5 0 -10 -6 -10 -14 0 -8 -6 -21 -13 -28 -7 -7 -23 -37 -35 -66 -33 -76 -43 -299 -18 -363 47 -117 221 -310 368 -409 l67 -45 1 -52 0 -52 -61 -42 c-158 -107 -283 -241 -350 -373 l-39 -78 0 -143 0 -142 35 -69 c159 -315 616 -588 1240 -743 425 -105 687 -130 1397 -131 301 0 382 3 515 20 902 115 1579 435 1783 843 l40 79 0 142 c0 134 -1 144 -29 201 -58 123 -186 262 -343 372 l-78 55 1 51 0 52 82 57 c77 54 247 211 247 228 0 4 7 10 15 14 8 3 15 12 15 21 0 8 5 15 10 15 6 0 10 6 10 14 0 8 4 16 8 18 4 2 20 32 35 67 24 55 29 83 34 191 7 149 -2 184 -71 288 -57 86 -218 242 -318 310 l-78 53 0 52 0 52 72 50 c160 112 316 294 374 436 21 52 24 74 24 193 0 155 -11 195 -85 306 -230 346 -743 617 -1430 755 -340 69 -422 75 -1010 80 -485 4 -542 3 -665 -15z m-897 -2019 c311 -117 671 -196 1067 -237 239 -24 683 -37 855 -24 481 34 935 130 1293 271 49 20 90 29 127 29 49 0 55 -2 61 -23 3 -13 4 -127 2 -253 l-3 -229 -48 -77 c-89 -143 -215 -245 -429 -348 -305 -146 -695 -236 -1108 -256 -246 -12 -712 19 -950 62 -399 73 -787 237 -962 406 -51 50 -118 145 -118 168 0 8 -7 33 -15 55 -11 30 -14 96 -15 273 l0 232 56 0 c42 0 87 -12 187 -49z m7 -1382 c352 -123 776 -205 1184 -229 94 -6 230 -15 301 -20 282 -21 812 27 1175 106 151 33 401 105 519 149 117 44 197 48 206 12 4 -12 5 -122 3 -243 l-3 -220 -32 -65 c-134 -272 -615 -502 -1233 -589 -222 -31 -472 -43 -650 -31 -85 6 -191 14 -235 17 -384 25 -739 113 -1030 254 -230 111 -350 213 -423 359 l-37 75 -3 238 -3 238 58 0 c44 0 93 -12 203 -51z"/></g></svg>`, true)}
${createProfileLink(`https://steamid.io/lookup/${steamID}`, "Steam ID", `<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 516.000000 516.000000" preserveAspectRatio="xMidYMid meet"><g transform="translate(0.000000,516.000000) scale(0.100000,-0.100000)" stroke="none"><path d="M2337 5050 c-26 -23 -60 -66 -75 -94 l-27 -51 -3 -403 c-4 -477 -3 -480 82 -566 68 -67 113 -83 267 -92 96 -5 125 -4 167 10 63 21 135 88 165 154 22 46 22 57 22 467 0 394 -1 424 -19 465 -11 25 -33 60 -50 78 -57 62 -72 66 -286 70 l-195 4 -48 -42z"/><path d="M1158 4160 c-308 -52 -555 -284 -640 -600 -19 -70 -21 -123 -30 -730 -5 -360 -7 -979 -5 -1375 3 -705 4 -722 25 -800 12 -44 41 -118 64 -165 35 -71 58 -102 147 -191 110 -111 182 -159 297 -200 59 -21 62 -21 1559 -26 1499 -5 1500 -5 1559 16 112 40 186 89 291 195 86 86 108 115 148 196 26 52 57 131 69 175 21 79 21 101 30 1335 5 690 6 1309 3 1375 -12 241 -69 382 -220 543 -101 108 -218 182 -357 224 -69 20 -96 22 -464 26 l-391 3 -5 -98 c-14 -244 -143 -418 -366 -495 -63 -21 -80 -23 -267 -20 -137 1 -219 7 -260 17 -250 63 -414 277 -415 543 l0 62 -362 -1 c-200 -1 -384 -5 -410 -9z m517 -416 c126 -254 348 -439 604 -505 106 -28 408 -45 516 -29 304 44 567 245 702 536 l34 74 222 0 c235 0 282 -7 371 -52 110 -56 190 -182 207 -326 6 -46 6 -618 1 -1402 -10 -1475 -4 -1372 -79 -1480 -45 -64 -140 -132 -215 -155 -58 -17 -534 -18 -2103 -6 l-810 6 -69 34 c-88 43 -149 104 -189 189 l-32 67 -2 755 c-2 415 0 1054 5 1420 l7 665 29 62 c30 66 105 146 167 178 92 49 132 54 369 52 l225 -2 40 -81z"/><path d="M2467 2854 c-127 -33 -259 -137 -334 -262 -52 -87 -73 -157 -73 -241 0 -130 42 -231 140 -334 104 -111 182 -155 317 -178 89 -15 134 -12 207 12 84 28 144 69 218 147 134 143 177 308 128 491 -11 41 -34 96 -51 123 -44 68 -152 164 -223 197 -104 49 -243 68 -329 45z"/><path d="M1993 1681 c-69 -54 -182 -176 -227 -245 -132 -199 -140 -380 -23 -503 122 -129 253 -156 827 -168 511 -11 708 23 827 147 66 68 88 126 88 233 -1 102 -23 168 -92 272 -44 67 -167 199 -236 254 l-48 38 -48 -34 c-68 -49 -206 -112 -286 -130 -219 -51 -498 7 -687 141 l-47 33 -48 -38z"/></g></svg>`, true)}
</div>
</div>
</details>
</div>
<hr class="profile-section-separator"/>
<div class="profile-links">
${createProfileLink("https://steamcommunity.com/my/", "Profile", `<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12 4a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm-2 9a4 4 0 0 0-4 4v1a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-1a4 4 0 0 0-4-4h-4Z" clip-rule="evenodd"/></svg>`)}
${createProfileLink("https://steamcommunity.com/market", "Market", `<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M4 4a1 1 0 0 1 1-1h1.5a1 1 0 0 1 .979.796L7.939 6H19a1 1 0 0 1 .979 1.204l-1.25 6a1 1 0 0 1-.979.796H9.605l.208 1H17a3 3 0 1 1-2.83 2h-2.34a3 3 0 1 1-4.009-1.76L5.686 5H5a1 1 0 0 1-1-1Z" clip-rule="evenodd"/></svg>`)}
${createProfileLink("https://steamcommunity.com/my/inventory", "Inventar", `<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M20 10H4v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8ZM9 13v-1h6v1a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1Z" clip-rule="evenodd"/><path d="M2 6a2 2 0 0 1 2-2h16a2 2 0 1 1 0 4H4a2 2 0 0 1-2-2Z"/></svg>`)}
${createProfileLink("https://steamcommunity.com/my/tradeoffers", "Trade Offers", `<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m16 10 3-3m0 0-3-3m3 3H5v3m3 4-3 3m0 0 3 3m-3-3h14v-3m2.025 0H17m-9.975 4H6a1 1 0 0 0-1 1v2m12-3h1.025a1 1 0 0 1 1 1v2M16 11h1a1 1 0 0 0 1-1V8m-9.975 3H7a1 1 0 0 1-1-1V8"/></svg>`)}
`;
// Container mit HTML füllen
uploadCustomArtworkButtonContainer.innerHTML = `
${steamEnhancedHeader}
<div id="steamEnhancedContainer" class="steam-enhanced-container hide">
${quickIconsContainer}
<div class="divider"></div>
${profileLinksContainer}
<div class="divider"></div>
<div class="button-container">
<button id="changeSteamIDButton">Steam-ID ändern</button>
</div>
</div>
`;
// #mainContents
// const steamEnhancedContainer = document.getElementById("responsive_page_template_content");
const steamEnhancedWrapper = document.getElementById("responsive_page_template_content") || document.getElementById("mainContents");
if (steamEnhancedWrapper) {
steamEnhancedWrapper.appendChild(uploadCustomArtworkButtonContainer);
}
const backToTopButton = document.getElementById("backToTop");
// Add a click event listener to the element
backToTopButton.addEventListener("click", function () {
// Scroll to the top of the page
window.scrollTo({
top: 0,
behavior: "smooth", // You can use 'auto' or 'smooth' for smooth scrolling
});
});
const goToBottomButton = document.getElementById("goToBottom");
// Add a click event listener to the element
goToBottomButton.addEventListener("click", function () {
// Scroll to the bottom of the page
window.scrollTo({
top: document.documentElement.scrollHeight,
behavior: "smooth", // You can use 'auto' or 'smooth' for smooth scrolling
});
});
// Reload Page Functionality
const reloadPageButton = document.getElementById("reloadPage");
reloadPageButton.addEventListener("click", function () {
location.reload();
});
// Steam Enhanced Toggle
const steamEnhancedToggle = document.getElementById("steamEnhancedToggle");
const steamEnhancedContainer = document.getElementById("steamEnhancedContainer");
const steamEnhanced = document.getElementById("steamEnhanced");
const isExpanded = localStorage.getItem("steamEnhancedExpanded") === "true";
if (isExpanded) {
steamEnhanced.classList.add("expanded");
steamEnhancedToggle.classList.toggle("toggle");
steamEnhancedContainer.classList.toggle("hide");
}
steamEnhancedToggle.addEventListener("click", function () {
console.log("steamEnhancedToggle clicked");
steamEnhanced.classList.toggle("expanded");
steamEnhancedToggle.classList.toggle("toggle");
steamEnhancedContainer.classList.toggle("hide");
// Save 'pinned' class state to local storage
const isCurrentlyExpanded = steamEnhanced.classList.contains("expanded");
localStorage.setItem("steamEnhancedExpanded", isCurrentlyExpanded);
// Toggle 'toggle' class on steamEnhancedPin
steamEnhancedToggle.classList.toggle("toggle");
});
// Steam Enhanced Pin
const steamEnhancedPin = document.getElementById("steamEnhancedPin");
const isPinned = localStorage.getItem("steamEnhancedPinned") === "true";
if (isPinned) {
steamEnhanced.classList.add("pinned");
steamEnhancedPin.classList.add("toggle");
}
steamEnhancedPin.addEventListener("click", function () {
console.log("steamEnhancedPin clicked");
steamEnhanced.classList.toggle("pinned");
// Save 'pinned' class state to local storage
const isCurrentlyPinned = steamEnhanced.classList.contains("pinned");
localStorage.setItem("steamEnhancedPinned", isCurrentlyPinned);
// Toggle 'toggle' class on steamEnhancedPin
steamEnhancedPin.classList.toggle("toggle");
});
// Add event listener for changing Steam ID
const changeSteamIDButton = document.getElementById("changeSteamIDButton");
changeSteamIDButton.addEventListener("click", function () {
const newID = prompt("Enter new Steam ID:", steamID);
if (newID) {
steamID = newID;
localStorage.setItem("steamID", steamID);
location.reload();
}
});
function openInNewTab(url) {
const newTab = window.open(url, "_blank");
if (newTab) {
newTab.focus();
}
}
}
setTimeout(setUploadArtworkButton, 0);
});
checkElement("#global_header").then((element) => {
function setCommentSymbolsPicker() {
console.log("setCommentSymbolsPicker");
const symbolsDialogDetails = document.createElement("div");
symbolsDialogDetails.className = "symbols-container symbols-modal-container";
symbolsDialogDetails.innerHTML = `
<div id="symbolsModal" class="symbols-modal">
<a id="close">×</a>
<div class="subSection detailBox" id="2050699">
<div class="subSectionTitle">Invisible Spacers</div>
<div class="subSectionDesc">
Copy the space between these brackets: (⠀⠀⠀⠀⠀)
</div>
</div>
`;
setTimeout(setSymbolsCharactersModal, 1000);
}
setTimeout(setCommentSymbolsPicker, 1500);
});
})();
})();