CSS Store implemented

README.md

@@ -87,6 +87,7 @@ Kute is a high-performance Krunker client designed to enhance your gaming experi
 - [x] Autoupdater with a download progress window, plus changelogs
 - [x] Rebindable kute hotkeys
 - [x] Spotify overlay - by [@Liamoulee](https://github.com/Liamoulee)
+- [x] CSS Store - by [@Liamoulee](https://github.com/Liamoulee)
 - [ ] BetterKDR™️ (coming soon)
 - [x] and more...
 

server/public/index.html

@@ -385,6 +385,7 @@ <h3>Interface</h3>
             <h3>Customization</h3>
             <div><span></span><b>Resource swapper</b><p>Replaces game files with your own. The manager shows what the game loads, drop a file onto the one it replaces and it lands in the right place. CSS and other text files can be written and edited right there, and CSS swaps apply instantly.</p></div>
             <div><span></span><b>CSS Manager</b><p>Keep as many CSS themes as you like: write them in the client with syntax highlighting and a live preview, paste them or import .css files, and switch between them with one click. They always load after Krunker's styles, so your rules win.</p></div>
+            <div><span></span><b>CSS Store</b><p>Browse CSS made by the community right in the CSS Manager, with previews, and download any of them with one click.</p></div>
             <div><span></span><b>Kute CSS</b><p>One switch gives the whole client Kute's look: menus, settings, every window and popup, the social window and the HUD, with a few cats. Colors that mean something, like KR, rarities and health, stay as they are, and your own CSS still wins.</p></div>
             <div><span></span><b>Motion blur</b><p>A slight blur while you turn the camera, with adjustable strength. The HUD stays sharp, and nothing runs while you stand still.</p></div>
             <div><span></span><b>Custom sky</b><p>Your own sky on every map: starfield, aurora, synthwave and more built in, a color gradient, or any image you drop into the skies folder.</p></div>

src/frontend/components/managers/customCss.html

@@ -102,20 +102,148 @@
 .managerPopup.legacy #ccFiles {
 	display: none;
 }
+
+#ccStorePanel {
+	flex: 1 1 auto;
+	min-height: 0;
+	margin-bottom: 0;
+	overflow-y: auto;
+}
+
+.managerBody:not(.storeOpen) > #ccStorePanel,
+.managerBody.storeOpen > #ccEditor,
+.managerBody.storeOpen > #ccFiles,
+.managerPopup.legacy #ccStore {
+	display: none;
+}
+
+#ccStoreBack {
+	margin-left: auto;
+}
+
+#ccStoreList {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
+	gap: 0.9em;
+	padding: 0.9em;
+}
+
+#ccStoreList > .empty {
+	grid-column: 1 / -1;
+}
+
+.storeCard {
+	display: flex;
+	flex-direction: column;
+	gap: 0.3em;
+	padding: 0.6em;
+	border: 1px solid var(--line);
+	border-radius: 8px;
+	background: #202020;
+}
+
+.storeShot {
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	aspect-ratio: 16 / 9;
+	overflow: hidden;
+	border-radius: 5px;
+	background: #2b2b2b;
+	color: #555;
+}
+
+.storeShot .mi {
+	font-size: 32px;
+}
+
+.storeShot img {
+	position: absolute;
+	inset: 0;
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	cursor: zoom-in;
+}
+
+#ccZoom {
+	position: fixed;
+	inset: 0;
+	z-index: 10;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	box-sizing: border-box;
+	padding: 40px;
+	background: rgba(0, 0, 0, 0.88);
+	cursor: zoom-out;
+}
+
+#ccZoom img {
+	max-width: 100%;
+	max-height: 100%;
+	object-fit: contain;
+	border-radius: 8px;
+	box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
+	cursor: default;
+}
+
+#ccZoom .managerClose {
+	position: absolute;
+	top: 16px;
+	right: 24px;
+	font-size: 2.2em;
+}
+
+.storeName {
+	overflow: hidden;
+	color: #fff;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.storeAuthor {
+	min-height: 1.2em;
+	overflow: hidden;
+	color: var(--muted);
+	font-size: 0.85em;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.storeCard .btn {
+	justify-content: center;
+	margin-top: 0.3em;
+}
+
+.storeCard .btn.done {
+	color: var(--muted);
+	cursor: default;
+	pointer-events: none;
+}
 </style>
 <div class="managerPopup">
 	<div class="managerHeader">
 		<h2 class="managerTitle">CSS Manager</h2>
 		<label class="previewToggle" title="Show the file you edit right away, closing puts the active one back"><input type="checkbox" id="ccLive" checked>Live preview</label>
 		<div class="btn" id="ccPeek" title="Hold to look at the game behind this window"><span class="mi">visibility</span>Hold to peek</div>
 		<div class="btn" id="ccFolder"><span class="mi">folder_open</span>Show folder</div>
+		<div class="btn" id="ccStore" title="Download CSS made by the community"><span class="mi">storefront</span>CSS Store</div>
 		<div class="managerClose" data-close>&times;</div>
 	</div>
 	<div class="managerHint" id="ccHint">One file is active at a time and loads after all of Krunker's styles, so a rule with the same selector wins.
 		Krunker's inline styles and its own <code>!important</code> rules still need <code>!important</code> here. Files live in <code>Documents\kute\css</code>.</div>
 	<div class="managerError" data-error hidden></div>
 	<div class="managerNotice" id="ccOff" hidden><span>CSS Manager is switched off (Settings, Customization), nothing of this is applied.</span></div>
 	<div class="managerBody">
+		<div class="group" id="ccStorePanel">
+			<div class="groupHead">
+				<div class="groupTitle">CSS Store</div>
+				<div class="btn small" id="ccStoreBack"><span class="mi">arrow_back</span>Back</div>
+			</div>
+			<div id="ccStoreList"></div>
+		</div>
 		<div id="ccEditor"></div>
 		<div class="group" id="ccFiles">
 			<div class="groupHead">