+
+ );
+}
+
+export default App;
diff --git a/frontend/src/assets/react.svg b/frontend/src/assets/react.svg
new file mode 100644
index 0000000..6c87de9
--- /dev/null
+++ b/frontend/src/assets/react.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/frontend/src/components/Content.css b/frontend/src/components/Content.css
new file mode 100644
index 0000000..ea53723
--- /dev/null
+++ b/frontend/src/components/Content.css
@@ -0,0 +1,14 @@
+/* Content Component Styles */
+.app-content {
+ flex: 1;
+ overflow-y: auto;
+ padding: 1vh;
+ border-top: 2px solid rgba(49, 50, 68, 0.6);
+}
+
+.content-title {
+ font-size: 18px;
+ color: var(--accent-color, #89b4fa);
+ margin-bottom: 15px;
+ font-weight: 500;
+}
diff --git a/frontend/src/components/Content.jsx b/frontend/src/components/Content.jsx
new file mode 100644
index 0000000..6d5be4e
--- /dev/null
+++ b/frontend/src/components/Content.jsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import './Content.css';
+
+// Import content modules
+import Inventory from './content_modules/Inventory';
+import Cursors from './content_modules/Cursors';
+import Crates from './content_modules/Crates';
+import Settings from './content_modules/Settings';
+
+function Content({ activePage, cursors, currentCursorIndex, selectCursor, nextCursor, settings, setSettings }) {
+ // Render the appropriate content based on active page
+ const renderContent = () => {
+ switch (activePage) {
+ case 'inventory':
+ return
+
+
+ {renderContent()}
+
+ );
+}
+
+export default Content;
diff --git a/frontend/src/components/Footer.css b/frontend/src/components/Footer.css
new file mode 100644
index 0000000..a5140cb
--- /dev/null
+++ b/frontend/src/components/Footer.css
@@ -0,0 +1,21 @@
+/* Footer Component Styles */
+.app-footer {
+ width: 100%;
+ background-color: var(--footer-bg, #181825);
+ padding: 8px 15px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border-top: 1px solid var(--border-color, #313244);
+ font-size: 12px;
+}
+
+.app-status {
+ color: var(--text-color, #cdd6f4);
+ opacity: 0.8;
+}
+
+.app-version {
+ color: var(--text-color, #cdd6f4);
+ opacity: 0.6;
+}
diff --git a/frontend/src/components/Footer.jsx b/frontend/src/components/Footer.jsx
new file mode 100644
index 0000000..ceecce0
--- /dev/null
+++ b/frontend/src/components/Footer.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import './Footer.css';
+
+function Footer({ version, status }) {
+ return (
+
+ );
+}
+
+export default Footer;
diff --git a/frontend/src/components/Header.css b/frontend/src/components/Header.css
new file mode 100644
index 0000000..cf3e4ed
--- /dev/null
+++ b/frontend/src/components/Header.css
@@ -0,0 +1,100 @@
+/* Header Component Styles */
+.app-header {
+ width: 100%;
+ user-select: none;
+ height: 40px;
+ position: relative;
+ z-index: 10;
+ background-color: transparent; /* Reverted to original */
+ /* cursor: move; */ /* Removed, should be handled by drag region or default */
+}
+
+.tabs-container {
+ display: flex;
+ align-items: center;
+ height: 100%;
+ position: relative;
+ padding-right: 10px;
+ background-color: transparent;
+}
+
+/* Chrome-like tabs */
+.tab {
+ -webkit-app-region: no-drag; /* Override drag region for clickable tabs */
+ cursor: pointer; /* Ensure tabs have a pointer cursor */
+ height: 36px;
+ width: 42px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ font-size: 14px;
+ margin-right: 5px;
+ border-top-left-radius: 8px;
+ border-top-right-radius: 8px;
+ color: var(--text-color);
+ background-color: transparent;
+ transition: all 0.2s ease;
+ cursor: pointer;
+ margin-top: 4px;
+}
+
+.tab:hover:not(.active):not(.drag-handle) {
+ background-color: var(--tab-bg);
+ transform: translateY(-2px);
+}
+
+.tab.active {
+ background-color: var(--tab-active);
+ color: var(--accent-color);
+ z-index: 1;
+ height: 40px;
+ margin-top: 0;
+ box-shadow: 0 0 10px rgba(137, 180, 250, 0.3);
+}
+
+/* Special drag handle tab */
+.tab.drag-handle {
+ width: 30px;
+ background-color: transparent;
+ color: rgba(205, 214, 244, 0.5);
+}
+
+.tab.drag-handle:hover {
+ color: rgba(205, 214, 244, 0.8);
+}
+
+/* Window control buttons */
+.window-controls {
+ -webkit-app-region: no-drag; /* Override drag region for buttons */
+ cursor: default; /* Keep default cursor for controls area */
+ display: flex;
+ gap: 8px;
+ margin-left: auto;
+ margin-right: 10px;
+}
+
+.minimize-button,
+.close-button {
+ background: none;
+ border: none;
+ font-size: 16px;
+ line-height: 1;
+ color: var(--text-color);
+ cursor: pointer;
+ padding: 2px 8px;
+ border-radius: 4px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: all 0.2s;
+}
+
+.minimize-button:hover,
+.close-button:hover {
+ background-color: var(--button-hover);
+}
+
+.close-button:hover {
+ color: #f38ba8;
+}
diff --git a/frontend/src/components/Header.jsx b/frontend/src/components/Header.jsx
new file mode 100644
index 0000000..891c749
--- /dev/null
+++ b/frontend/src/components/Header.jsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import './Header.css';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+ faGripVertical,
+ faBoxOpen,
+ faMousePointer,
+ faBoxes,
+ faCog,
+ faBoxArchive,
+ faBox,
+ faWarehouse,
+ faGraduationCap,
+ faCubesStacked,
+ faBorderAll,
+ faBagShopping
+} from '@fortawesome/free-solid-svg-icons';
+
+function Header({ activePage, setActivePage, minimizeToTray, quitApp, settings }) {
+ // Navigation buttons for each page with icons
+ const navItems = [
+ { id: 'inventory', icon: faBagShopping, tooltip: 'Inventory' },
+ { id: 'cursors', icon: faMousePointer, tooltip: 'Cursors' },
+ { id: 'crates', icon: faBoxOpen, tooltip: 'Crates' },
+ { id: 'settings', icon: faCog, tooltip: 'Settings' }
+ ];
+
+ // Handle close button click based on settings
+ const handleCloseClick = () => {
+ if (settings && settings.minimizeToTrayOnClose) {
+ console.log('Close button clicked, minimizing to tray based on settings');
+ minimizeToTray();
+ } else {
+ console.log('Close button clicked, quitting application based on settings');
+ quitApp();
+ }
+ };
+
+ return (
+
+ {navItems.map((item) => (
+
+ setActivePage(item.id)}
+ title={item.tooltip}
+ >
+
+ ))}
+
+
+
+
+
+ {/* Current selected crate section */}
+
+ );
+}
+
+export default Crates;
diff --git a/frontend/src/components/content_modules/Cursors.css b/frontend/src/components/content_modules/Cursors.css
new file mode 100644
index 0000000..e62c40d
--- /dev/null
+++ b/frontend/src/components/content_modules/Cursors.css
@@ -0,0 +1,358 @@
+/* Cursors Module Styles */
+.cursors-container {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+}
+
+/* Equipped cursor banner */
+.equipped-cursor-banner {
+ height: 25%;
+ min-height: 120px;
+ max-height: 150px;
+ display: flex;
+ background-color: rgba(30, 30, 46, 0.3);
+ border-bottom: 2px solid rgba(49, 50, 68, 0.6);
+ padding: 10px;
+ margin-bottom: 10px;
+}
+
+
+
+.current-preview {
+ max-width: 80%;
+ max-height: 80%;
+ object-fit: contain;
+ filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.3));
+ transition: all 0.3s ease;
+}
+
+.current-preview.legendary {
+ animation: float 3s ease-in-out infinite;
+ filter: drop-shadow(0 0 8px rgba(249, 226, 175, 0.4));
+}
+
+@keyframes float {
+ 0% { transform: translateY(0px); }
+ 50% { transform: translateY(-5px); }
+ 100% { transform: translateY(0px); }
+}
+
+.equipped-cursor-details {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ flex: 1;
+}
+
+.equipped-cursor-info {
+ display: flex;
+ flex-direction: column;
+}
+
+.equipped-label {
+ font-size: 12px;
+ font-weight: 600;
+ color: rgba(205, 214, 244, 0.6);
+ letter-spacing: 1px;
+ margin-bottom: 4px;
+}
+
+.equipped-name {
+ font-size: 20px;
+ font-weight: 600;
+ margin-bottom: 5px;
+}
+
+.equipped-rarity {
+ font-size: 14px;
+ font-weight: 500;
+ opacity: 0.8;
+}
+
+.next-button {
+ align-self: flex-start;
+ background-color: rgba(65, 66, 88, 0.8);
+ border: none;
+ border-radius: 4px;
+ padding: 8px 15px;
+ color: var(--text-color);
+ font-size: 13px;
+ font-weight: 500;
+ cursor: pointer;
+ transition: all 0.2s;
+}
+
+.next-button:hover {
+ background-color: var(--accent-color);
+ color: #1e1e2e;
+ transform: translateY(-2px);
+}
+
+/* Library controls section */
+.cursors-controls {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ padding: 5px 10px 15px 10px;
+ border-bottom: 1px solid rgba(49, 50, 68, 0.4);
+}
+
+.search-box {
+ position: relative;
+ margin-bottom: 8px;
+}
+
+.search-icon {
+ position: absolute;
+ left: 10px;
+ top: 50%;
+ transform: translateY(-50%);
+ color: rgba(205, 214, 244, 0.5);
+ pointer-events: none;
+}
+
+.search-input {
+ width: 100%;
+ background-color: rgba(49, 50, 68, 0.3);
+ border: 1px solid rgba(49, 50, 68, 0.6);
+ border-radius: 4px;
+ color: var(--text-color);
+ padding: 8px 10px 8px 32px;
+ font-size: 14px;
+ outline: none;
+ transition: all 0.2s;
+}
+
+.search-input:focus {
+ border-color: var(--accent-color);
+ box-shadow: 0 0 5px rgba(137, 180, 250, 0.3);
+}
+
+.filter-controls {
+ display: flex;
+ gap: 8px;
+ flex-wrap: wrap;
+ overflow-x: auto;
+ padding-bottom: 5px;
+}
+
+.filter-button {
+ background-color: rgba(49, 50, 68, 0.4);
+ border: none;
+ border-radius: 4px;
+ padding: 5px 10px;
+ font-size: 12px;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ white-space: nowrap;
+ border-left: 3px solid transparent;
+}
+
+.filter-button:hover {
+ background-color: rgba(65, 66, 88, 0.6);
+}
+
+.filter-button.active {
+ background-color: rgba(65, 66, 88, 0.8);
+ color: var(--accent-color);
+}
+
+/* Rarity-based styling for filter buttons */
+.filter-button.common {
+ border-left-color: #a6adc8;
+}
+
+.filter-button.uncommon {
+ border-left-color: #a6e3a1;
+}
+
+.filter-button.rare {
+ border-left-color: #89b4fa;
+}
+
+.filter-button.epic {
+ border-left-color: #cba6f7;
+}
+
+.filter-button.legendary {
+ border-left-color: #f9e2af;
+}
+
+/* Main cursor library */
+.cursor-library {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ overflow-y: auto;
+ padding: 0 10px;
+ scrollbar-width: thin;
+ margin-top: 5px;
+}
+
+.rarity-section {
+ display: flex;
+ flex-direction: column;
+ margin-bottom: 20px;
+}
+
+.rarity-header {
+ display: flex;
+ align-items: center;
+ margin-bottom: 10px;
+ flex-wrap: nowrap;
+}
+
+.rarity-title {
+ font-size: 14px;
+ font-weight: 600;
+ margin: 0;
+ white-space: nowrap;
+ margin-right: 10px;
+}
+
+.rarity-line {
+ flex: 1;
+ height: 1px;
+ opacity: 0.3;
+}
+
+/* Rarity colors */
+.equipped-name.common, .equipped-rarity.common, .rarity-line.common { background-color: #a6adc8; }
+.equipped-name.uncommon, .equipped-rarity.uncommon, .rarity-line.uncommon { background-color: #a6e3a1; }
+.equipped-name.rare, .equipped-rarity.rare, .rarity-line.rare { background-color: #89b4fa; }
+.equipped-name.epic, .equipped-rarity.epic, .rarity-line.epic { background-color: #cba6f7; }
+.equipped-name.legendary, .equipped-rarity.legendary, .rarity-line.legendary { background-color: #f9e2af; }
+
+/* Horizontal scrolling cursor list */
+.cursor-list {
+ display: flex;
+ gap: 12px;
+ overflow-x: auto;
+ padding: 5px 0 15px 0;
+ scrollbar-width: thin;
+ margin-bottom: 5px;
+}
+
+.cursor-card {
+ min-width: 150px;
+ max-width: 180px;
+ background-color: rgba(49, 50, 68, 0.4);
+ border-radius: 8px;
+ overflow: hidden;
+ transition: all 0.2s ease;
+ cursor: pointer;
+ border: 1px solid rgba(49, 50, 68, 0.4);
+ position: relative;
+ flex: 0 0 auto;
+}
+
+/* Circular rarity indicator in top right */
+.cursor-card::before {
+ content: '';
+ position: absolute;
+ top: 8px;
+ right: 8px;
+ width: 12px;
+ height: 12px;
+ border-radius: 50%;
+ z-index: 5;
+ background-color: currentColor;
+ box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
+}
+
+/* Rarity colors */
+.cursor-card.common { color: #a6adc8; }
+.cursor-card.uncommon { color: #a6e3a1; }
+.cursor-card.rare { color: #89b4fa; }
+.cursor-card.epic { color: #cba6f7; }
+.cursor-card.legendary { color: #f9e2af; }
+
+/* Hover and active states */
+.cursor-card:hover {
+ transform: translateY(-3px) scale(1.02);
+ box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
+ border-color: currentColor;
+ z-index: 5;
+}
+
+.cursor-card:active {
+ transform: translateY(0) scale(0.98);
+}
+
+.cursor-card.active {
+ border-color: currentColor;
+ box-shadow: 0 0 12px currentColor;
+}
+
+/* Preview container */
+.cursor-preview-container {
+ height: 100px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: rgba(30, 30, 46, 0.5);
+ padding: 12px;
+}
+
+.cursor-preview-img {
+ max-width: 80%;
+ max-height: 80%;
+ object-fit: contain;
+ transition: transform 0.3s ease;
+}
+
+.cursor-card:hover .cursor-preview-img {
+ transform: scale(1.1);
+}
+
+/* Cursor details */
+.cursor-details {
+ padding: 10px;
+ display: flex;
+ flex-direction: column;
+ gap: 3px;
+}
+
+.cursor-name {
+ font-weight: 500;
+ font-size: 13px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.cursor-rarity-badge {
+ display: inline-block;
+ font-size: 11px;
+ text-transform: capitalize;
+ opacity: 0.7;
+}
+
+/* Animation for legendary items */
+.cursor-card.legendary::before {
+ animation: legendaryGlow 2s infinite;
+}
+
+@keyframes legendaryGlow {
+ 0% { opacity: 0.4; }
+ 50% { opacity: 0.9; }
+ 100% { opacity: 0.4; }
+}
+
+/* Empty states */
+.no-cursors, .no-results {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: rgba(49, 50, 68, 0.2);
+ border-radius: 8px;
+ padding: 20px;
+ text-align: center;
+ color: var(--text-color);
+ opacity: 0.7;
+ font-size: 14px;
+}
diff --git a/frontend/src/components/content_modules/Cursors.jsx b/frontend/src/components/content_modules/Cursors.jsx
new file mode 100644
index 0000000..3bad423
--- /dev/null
+++ b/frontend/src/components/content_modules/Cursors.jsx
@@ -0,0 +1,144 @@
+import React, { useState } from 'react';
+import './Cursors.css';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSort, faFilter, faSortAmountDown, faSearch } from '@fortawesome/free-solid-svg-icons';
+
+function Cursors({ cursors, currentCursorIndex, selectCursor, nextCursor }) {
+ const [filter, setFilter] = useState('all');
+ const [searchTerm, setSearchTerm] = useState('');
+
+ const currentCursor = cursors.length > 0 && currentCursorIndex < cursors.length
+ ? cursors[currentCursorIndex]
+ : null;
+
+ // This will eventually come from backend with proper data
+ const getRarity = (index) => {
+ const rarities = ['common', 'uncommon', 'rare', 'epic', 'legendary'];
+ return rarities[index % rarities.length];
+ };
+
+ // Group cursors by rarity
+ const cursorsByRarity = cursors.reduce((acc, cursor, index) => {
+ const rarity = getRarity(index);
+ if (!acc[rarity]) acc[rarity] = [];
+ acc[rarity].push({ ...cursor, index, rarity });
+ return acc;
+ }, {});
+
+ // Filter logic with search
+ const filteredCursors = Object.entries(cursorsByRarity)
+ .filter(([rarity, _]) => filter === 'all' || rarity === filter)
+ .map(([rarity, cursorsOfRarity]) => [
+ rarity,
+ cursorsOfRarity.filter(c =>
+ !searchTerm || c.name.toLowerCase().includes(searchTerm.toLowerCase())
+ )
+ ])
+ .filter(([_, cursors]) => cursors.length > 0);
+
+ return (
+
+
+
+ {/* Crates inventory section */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {selectedCrate.name}
+
+ You have: {selectedCrate.count}
+
+
+
+
+
+
+
+
+
+ Your Crates
+ + {crateTypes.reduce((total, crate) => total + crate.count, 0)} total + +
+ {crateTypes.map((crate, index) => (
+
+ crate.count > 0 && setSelectedCrateIndex(index)}
+ >
+
+ ))}
+
+
+ {crate.name}
+
+ {/* Current cursor equipped display */}
+ {currentCursor && (
+
+ );
+}
+
+export default Cursors;
diff --git a/frontend/src/components/content_modules/Inventory.css b/frontend/src/components/content_modules/Inventory.css
new file mode 100644
index 0000000..dfd6619
--- /dev/null
+++ b/frontend/src/components/content_modules/Inventory.css
@@ -0,0 +1,359 @@
+/* Inventory Module Styles */
+.inventory-container {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+}
+
+/* Search and filter controls */
+.inventory-controls {
+ display: flex;
+ justify-content: space-between;
+ padding: 8px 10px;
+ background-color: rgba(49, 50, 68, 0.4);
+ border-radius: 8px;
+ margin-top: 2%;
+ border: 1px solid rgba(49, 50, 68, 0.8);
+}
+
+.search-bar {
+ flex: 1;
+ margin-right: 10px;
+}
+
+.search-bar input {
+ width: 100%;
+ padding: 8px 12px;
+ border-radius: 4px;
+ border: 1px solid rgba(49, 50, 68, 0.8);
+ background-color: rgba(30, 30, 46, 0.7);
+ color: #cdd6f4;
+ font-size: 14px;
+}
+
+.search-bar input:focus {
+ outline: none;
+ border-color: var(--accent-color);
+ box-shadow: 0 0 0 2px rgba(137, 180, 250, 0.3);
+}
+
+.search-bar input::placeholder {
+ color: rgba(205, 214, 244, 0.5);
+}
+
+.rarity-filter {
+ width: 50px;
+ position: relative;
+ display: flex;
+ align-items: center;
+}
+
+.rarity-filter select {
+ width: 100%;
+ padding: 8px;
+ border-radius: 4px;
+ border: 1px solid rgba(49, 50, 68, 0.8);
+ background-color: rgba(30, 30, 46, 0.7);
+ color: transparent;
+ text-indent: -9999px;
+ font-size: 14px;
+ appearance: none;
+ background-image: url("data:image/svg+xml;utf8,");
+ background-repeat: no-repeat;
+ background-position: right 4px center;
+ cursor: pointer;
+}
+
+.rarity-filter .rarity-circle {
+ position: absolute;
+ aspect-ratio: 1/1;
+ width: 30%;
+ margin-left: 8px;
+
+
+ border-radius: 50%;
+ pointer-events: none;
+ z-index: 1;
+}
+
+/* Rarity colors for circle indicators */
+.rarity-circle.all {
+ background: linear-gradient(45deg, #a6adc8, #a6e3a1, #89b4fa, #cba6f7, #f9e2af);
+}
+.rarity-circle.common { background-color: #a6adc8; }
+.rarity-circle.uncommon { background-color: #a6e3a1; }
+.rarity-circle.rare { background-color: #89b4fa; }
+.rarity-circle.epic { background-color: #cba6f7; }
+.rarity-circle.legendary {
+ background-color: #f9e2af;
+ box-shadow: 0 0 5px #f9e2af;
+}
+
+/* Style dropdown options to show text and circles */
+.rarity-filter select option {
+ color: white;
+ position: relative;
+
+}
+
+.rarity-filter .rarity-option {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ color: white;
+}
+
+.rarity-filter select:focus {
+ outline: none;
+ border-color: var(--accent-color);
+ box-shadow: 0 0 0 2px rgba(137, 180, 250, 0.3);
+}
+
+/* Equipped cursor display */
+.equipped-cursor {
+ display: flex;
+ background-color: rgba(49, 50, 68);
+ border-radius: 8px;
+ padding: 10px;
+ min-height: 25%;
+ max-height: 25%;
+ border: 1px solid rgba(49, 50, 68, 0.8);
+ margin-top: 10px;
+}
+
+.equipped-cursor-image {
+ aspect-ratio: 1/1;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: rgba(30, 30, 46, 0.5);
+ border-radius: 6px;
+ border: 1px solid rgba(49, 50, 68, 0.6);
+ margin-right: 10px;
+}
+
+.equipped-image {
+ max-width: 80%;
+ max-height: 80%;
+ object-fit: contain;
+}
+
+.equipped-cursor-info {
+ display: flex;
+ flex-direction: column;
+}
+
+.equipped-cursor-info h3 {
+ font-size: 14px;
+ margin: 0 0 3px 0;
+ opacity: 0.8;
+}
+
+.equipped-cursor-name {
+ font-size: 16px;
+ font-weight: 500;
+}
+
+.equipped-cursor-rarity {
+ font-size: 12px;
+ opacity: 0.8;
+}
+
+/* Minecraft-style inventory */
+.cute-inventory {
+ min-height: 58%;
+ max-height: 58%;
+ display: flex;
+ overflow-y: auto;
+ flex-direction: column;
+ align-items: center;
+ background-color: rgba(30, 30, 46, 0.3);
+ border-radius: 8px;
+ box-sizing: border-box;
+ margin-top: 2%;
+ border: 1px solid rgba(49, 50, 68, 0.6);
+}
+
+.inventory-grid {
+ display: grid;
+ box-sizing: border-box;
+ width: 100%;
+ grid-template-columns: repeat(auto-fill, minmax(9vh, 1fr));
+}
+
+.inventory-slot {
+ aspect-ratio: 1;
+ background-color: rgba(49, 50, 68, 0.5);
+ border: 2px solid rgba(30, 30, 46, 0.8);
+ border-radius: 1vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin: 0.5vh;
+ position: relative;
+ transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+ overflow: hidden;
+}
+
+/* Rarity indicator as small circle in top right */
+.inventory-slot.has-item {
+ cursor: pointer;
+ position: relative;
+ border-color: rgba(30, 30, 46, 0.8);
+}
+
+/* Small circle rarity indicator in top right */
+.inventory-slot.has-item::after {
+ content: '';
+ position: absolute;
+ top: 5px;
+ right: 5px;
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ z-index: 5;
+}
+
+.inventory-slot.has-item.common::after {
+ background-color: #a6adc8;
+}
+
+.inventory-slot.has-item.uncommon::after {
+ background-color: #a6e3a1;
+}
+
+.inventory-slot.has-item.rare::after {
+ background-color: #89b4fa;
+}
+
+.inventory-slot.has-item.epic::after {
+ background-color: #cba6f7;
+}
+
+.inventory-slot.has-item.legendary::after {
+ background-color: #f9e2af;
+ box-shadow: 0 0 5px rgba(249, 226, 175, 0.8);
+ animation: pulseDot 2s infinite;
+}
+
+@keyframes pulseDot {
+ 0% { transform: scale(1); box-shadow: 0 0 5px rgba(249, 226, 175, 0.5); }
+ 50% { transform: scale(1.2); box-shadow: 0 0 8px rgba(249, 226, 175, 0.8); }
+ 100% { transform: scale(1); box-shadow: 0 0 5px rgba(249, 226, 175, 0.5); }
+}
+
+.inventory-slot.has-item:hover {
+ transform: scale(1.08);
+ z-index: 5;
+}
+
+.inventory-slot.has-item:active {
+ transform: scale(0.95);
+}
+
+/* Selected item overrides rarity glow */
+.inventory-slot.selected {
+ border-color: var(--accent-color) !important;
+ box-shadow: 0 0 12px var(--accent-color) !important;
+ z-index: 10;
+ animation: selectedPulse 1.5s infinite;
+}
+
+@keyframes selectedPulse {
+ 0% { box-shadow: 0 0 8px var(--accent-color) !important; }
+ 50% { box-shadow: 0 0 15px var(--accent-color) !important; }
+ 100% { box-shadow: 0 0 8px var(--accent-color) !important; }
+}
+
+/* Shine effect when clicked */
+.inventory-slot.has-item:active::after {
+ content: '';
+ position: absolute;
+ top: -50%;
+ left: -50%;
+ width: 200%;
+ height: 200%;
+ background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%);
+ opacity: 0.6;
+ transform: scale(0);
+ animation: clickRipple 0.5s ease-out;
+}
+
+@keyframes clickRipple {
+ 0% { transform: scale(0); opacity: 0.6; }
+ 100% { transform: scale(1); opacity: 0; }
+}
+
+.inventory-item {
+ width: 70%;
+ height: 70%;
+ object-fit: contain;
+}
+
+/* Tooltip that appears on hover */
+.inventory-tooltip {
+ position: absolute;
+ top: -40px;
+ left: 50%;
+ transform: translateX(-50%);
+ background-color: rgba(30, 30, 46, 0.95);
+ border-radius: 4px;
+ padding: 4px 8px;
+ min-width: 80px;
+ z-index: 10;
+ display: none;
+ flex-direction: column;
+ align-items: center;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+ pointer-events: none;
+ white-space: nowrap;
+}
+
+.inventory-slot:hover .inventory-tooltip {
+ display: flex;
+}
+
+.tooltip-name {
+ font-size: 12px;
+ font-weight: 500;
+}
+
+.tooltip-rarity {
+ font-size: 10px;
+ opacity: 0.8;
+}
+
+/* Rarity colors */
+.common, .common.equipped-cursor-name, .tooltip-name.common { color: #a6adc8; }
+.uncommon, .uncommon.equipped-cursor-name, .tooltip-name.uncommon { color: #a6e3a1; }
+.rare, .rare.equipped-cursor-name, .tooltip-name.rare { color: #89b4fa; }
+.epic, .epic.equipped-cursor-name, .tooltip-name.epic { color: #cba6f7; }
+.legendary, .legendary.equipped-cursor-name, .tooltip-name.legendary { color: #f9e2af; }
+
+/* Legendary glow effect */
+.inventory-slot.selected .inventory-item.legendary {
+ filter: drop-shadow(0 0 3px #f9e2af);
+ animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+ 0% { filter: drop-shadow(0 0 2px rgba(249, 226, 175, 0.5)); }
+ 50% { filter: drop-shadow(0 0 4px rgba(249, 226, 175, 0.8)); }
+ 100% { filter: drop-shadow(0 0 2px rgba(249, 226, 175, 0.5)); }
+}
+
+.inventory-footer {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ padding: 5px 0;
+}
+
+.cursor-count {
+ font-size: 12px;
+ color: var(--text-color);
+ opacity: 0.7;
+}
+
diff --git a/frontend/src/components/content_modules/Inventory.jsx b/frontend/src/components/content_modules/Inventory.jsx
new file mode 100644
index 0000000..435dcc1
--- /dev/null
+++ b/frontend/src/components/content_modules/Inventory.jsx
@@ -0,0 +1,157 @@
+import React, { useState, useEffect } from 'react';
+import './Inventory.css';
+
+function Inventory({ cursors, currentCursorIndex, selectCursor }) {
+ const [searchQuery, setSearchQuery] = useState('');
+ const [selectedRarity, setSelectedRarity] = useState('all');
+ const [filteredSlots, setFilteredSlots] = useState([]);
+ // Minecraft inventory typically has 27 slots (9x3)
+ const totalSlots = 36; // 9x4 grid
+
+ // This will eventually come from backend with proper data
+ const cursorRarities = {
+ common: 'Common',
+ uncommon: 'Uncommon',
+ rare: 'Rare',
+ epic: 'Epic',
+ legendary: 'Legendary'
+ };
+
+ // Assign mock rarities to cursors for demonstration
+ const getCursorRarity = (index) => {
+ const rarities = Object.keys(cursorRarities);
+ return rarities[index % rarities.length];
+ };
+
+ // Get currently selected cursor
+ const currentCursor = cursors.length > 0 && currentCursorIndex < cursors.length
+ ? cursors[currentCursorIndex]
+ : null;
+
+ // Create array of slots for the inventory grid
+ const inventorySlots = Array(totalSlots).fill(null).map((_, slotIndex) => {
+ // Map cursor to slot if available
+ const cursorIndex = slotIndex < cursors.length ? slotIndex : null;
+ const cursor = cursorIndex !== null ? cursors[cursorIndex] : null;
+ const rarity = cursor ? getCursorRarity(cursorIndex) : null;
+
+ return {
+ slotIndex,
+ cursor,
+ cursorIndex,
+ rarity
+ };
+ });
+
+ // Apply filters to inventory slots
+ useEffect(() => {
+ // First, filter the slots that match our criteria
+ let filtered = inventorySlots.filter(slot => {
+ // Filter by search query
+ const matchesSearch = !searchQuery ||
+ (slot.cursor && slot.cursor.name.toLowerCase().includes(searchQuery.toLowerCase()));
+
+ // Filter by rarity
+ const matchesRarity = selectedRarity === 'all' ||
+ (slot.rarity && slot.rarity === selectedRarity);
+
+ return matchesSearch && matchesRarity;
+ });
+
+ // Create a new array for the filtered slots, prioritizing slots with items
+ const filledSlots = filtered.filter(slot => slot.cursor);
+ const emptySlots = Array(totalSlots - filledSlots.length).fill(null)
+ .map((_, index) => ({
+ slotIndex: filledSlots.length + index,
+ cursor: null,
+ cursorIndex: null,
+ rarity: null
+ }));
+
+ // Combine filled slots at the beginning and empty ones at the end
+ const result = [...filledSlots, ...emptySlots];
+
+ setFilteredSlots(result);
+ }, [searchQuery, selectedRarity, inventorySlots]);
+
+ return (
+
+
+ )}
+
+ {/* Library controls */}
+
+ 
+
+
+
+
+
+
+ EQUIPPED
+ {currentCursor.name}
+
+ {getRarity(currentCursorIndex).toUpperCase()}
+
+
+
+
+ {/* Cursor library */}
+ {cursors.length > 0 ? (
+
+
+
+
+ {Object.keys(cursorsByRarity).map(rarity => (
+
+ ))}
+
+
+ {filteredCursors.map(([rarity, cursorsInRarity]) => (
+
+ ) : (
+
+
+ ))}
+
+ {filteredCursors.length === 0 && (
+
+
+
+ + {rarity.toUpperCase()} ({cursorsInRarity.length}) +
+ +
+ {cursorsInRarity.map((cursor) => (
+
+ selectCursor(cursor.index)}
+ >
+
+ ))}
+
+ 
+
+
+ {cursor.name}
+ {cursor.rarity}
+
+ No cursors match your search
+ )}
+
+
+ )}
+ No cursors found in assets directory
+
+ {/* Search and Filter Controls */}
+
+ {/* Equipped cursor display */}
+ {currentCursor && (
+
+ );
+}
+
+export default Inventory;
diff --git a/frontend/src/components/content_modules/Settings.css b/frontend/src/components/content_modules/Settings.css
new file mode 100644
index 0000000..4c6cd4f
--- /dev/null
+++ b/frontend/src/components/content_modules/Settings.css
@@ -0,0 +1,75 @@
+/* Settings Module Styles */
+.settings-container {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+}
+
+.settings-content {
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+}
+
+.settings-group {
+ background-color: var(--button-bg, #313244);
+ border-radius: 8px;
+ padding: 15px;
+ color: var(--text-color, #cdd6f4);
+}
+
+.settings-group h3 {
+ font-size: 16px;
+ font-weight: 500;
+ margin: 0 0 12px 0;
+ color: var(--accent-color, #89b4fa);
+}
+
+.setting-item {
+ padding: 8px 0;
+ display: flex;
+ align-items: center;
+}
+
+.setting-item label {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ cursor: pointer;
+ font-size: 14px;
+}
+
+.setting-item input[type="checkbox"] {
+ width: 16px;
+ height: 16px;
+ margin: 0;
+ appearance: none;
+ background-color: var(--modal-bg, #181825);
+ border: 1px solid var(--text-color, #cdd6f4);
+ border-radius: 3px;
+ outline: none;
+ cursor: pointer;
+ position: relative;
+}
+
+.setting-item input[type="checkbox"]:checked {
+ background-color: var(--accent-color, #89b4fa);
+ border-color: var(--accent-color, #89b4fa);
+}
+
+.setting-item input[type="checkbox"]:checked::after {
+ content: '✓';
+ font-size: 12px;
+ color: var(--bg-color, #1e1e2e);
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+
+.settings-group p {
+ margin: 5px 0;
+ font-size: 14px;
+ opacity: 0.8;
+}
diff --git a/frontend/src/components/content_modules/Settings.jsx b/frontend/src/components/content_modules/Settings.jsx
new file mode 100644
index 0000000..6f4a6da
--- /dev/null
+++ b/frontend/src/components/content_modules/Settings.jsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import './Settings.css';
+
+function Settings({ settings, setSettings }) {
+ // Handler for checkbox changes
+ const handleSettingChange = (settingName) => {
+ setSettings({
+ ...settings,
+ [settingName]: !settings[settingName]
+ });
+ };
+
+ return (
+
+
+ )}
+
+
+
+
+
+ Equipped
+ + {currentCursor.name} + + + {cursorRarities[getCursorRarity(currentCursorIndex)]} + +
+
+ {/* Minecraft-like inventory grid */}
+
+ setSearchQuery(e.target.value)}
+ />
+
+
+
+
+
+
+
+
+
+
+ {filteredSlots.map((slot) => (
+
+ slot.cursor && selectCursor(slot.cursorIndex)}
+ >
+ {slot.cursor && (
+ <>
+ 
+
+ ))}
+
+ {slot.cursor.name}
+ {cursorRarities[slot.rarity]}
+
+
+ )}
+
+
+ );
+}
+
+export default Settings;
diff --git a/frontend/src/cursors/default.png b/frontend/src/cursors/default.png
new file mode 100644
index 0000000..8643897
Binary files /dev/null and b/frontend/src/cursors/default.png differ
diff --git a/frontend/src/cursors/icon.png b/frontend/src/cursors/icon.png
new file mode 100644
index 0000000..8643897
Binary files /dev/null and b/frontend/src/cursors/icon.png differ
diff --git a/frontend/src/cursors/red.png b/frontend/src/cursors/red.png
new file mode 100644
index 0000000..fd5c6ad
Binary files /dev/null and b/frontend/src/cursors/red.png differ
diff --git a/frontend/src/index.css b/frontend/src/index.css
new file mode 100644
index 0000000..08a3ac9
--- /dev/null
+++ b/frontend/src/index.css
@@ -0,0 +1,68 @@
+:root {
+ font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+ line-height: 1.5;
+ font-weight: 400;
+
+ color-scheme: light dark;
+ color: rgba(255, 255, 255, 0.87);
+ background-color: #242424;
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+ font-weight: 500;
+ color: #646cff;
+ text-decoration: inherit;
+}
+a:hover {
+ color: #535bf2;
+}
+
+body {
+ margin: 0;
+ display: flex;
+ place-items: center;
+ min-width: 320px;
+ min-height: 100vh;
+}
+
+h1 {
+ font-size: 3.2em;
+ line-height: 1.1;
+}
+
+button {
+ border-radius: 8px;
+ border: 1px solid transparent;
+ padding: 0.6em 1.2em;
+ font-size: 1em;
+ font-weight: 500;
+ font-family: inherit;
+ background-color: #1a1a1a;
+ cursor: pointer;
+ transition: border-color 0.25s;
+}
+button:hover {
+ border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+ outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+ :root {
+ color: #213547;
+ background-color: #ffffff;
+ }
+ a:hover {
+ color: #747bff;
+ }
+ button {
+ background-color: #f9f9f9;
+ }
+}
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
new file mode 100644
index 0000000..774fd95
--- /dev/null
+++ b/frontend/src/main.jsx
@@ -0,0 +1,9 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+ Settings
+
+
+
+
+
+ Application Settings
+
+
+
+
+
+
+
+
+
+ Cursor Settings
+
+
+
+
+
+ About
+Cursor Rush v0.1.0
+A cross-platform application for customizing your cursor.
+