omigamedev
56dc8337af
- Replace linear-gradient with solid colors (not supported in RmlUi) - Replace border shorthand with border-width/border-color properties - Replace display:grid with flexbox in music quick-access cards - Remove unsupported transition property - Fix border-radius: 50% to use 9999px in theme.rcss - Fix third-party app icon/label sizes to match system apps (72x72px, 16px) - Replace data-model bindings with static values in settings Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
631 lines
18 KiB
Plaintext
631 lines
18 KiB
Plaintext
<rml>
|
|
<head>
|
|
<link type="text/rcss" href="../../ui/html.rcss"/>
|
|
<link type="text/rcss" href="../../ui/theme.rcss"/>
|
|
<link type="text/rcss" href="../../ui/components.rcss"/>
|
|
<script src="../../scripts/navigation.lua"></script>
|
|
<script src="store.lua"></script>
|
|
<title>Store</title>
|
|
<style>
|
|
.store-screen {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #121212;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.store-content {
|
|
flex: 1;
|
|
overflow: auto;
|
|
padding-bottom: 16px;
|
|
}
|
|
|
|
/* Search Bar */
|
|
.store-search {
|
|
margin: 16px;
|
|
background-color: #2D2D2D;
|
|
border-radius: 24px;
|
|
padding: 12px 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.store-search img {
|
|
width: 28px;
|
|
height: 28px;
|
|
margin-right: 12px;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.store-search-text {
|
|
font-size: 16px;
|
|
color: #B3B3B3;
|
|
}
|
|
|
|
/* Section Headers */
|
|
.section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 16px 16px 8px 16px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.section-action {
|
|
font-size: 18px;
|
|
color: #BB86FC;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Featured Banner */
|
|
.featured-banner {
|
|
margin: 0 16px 16px 16px;
|
|
height: 160px;
|
|
background-color: #7C3AED;
|
|
border-radius: 16px;
|
|
padding: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.featured-tag {
|
|
font-size: 16px;
|
|
color: rgba(255,255,255,0.7);
|
|
text-transform: uppercase;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.featured-title {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
color: #FFFFFF;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.featured-subtitle {
|
|
font-size: 18px;
|
|
color: rgba(255,255,255,0.8);
|
|
}
|
|
|
|
/* App Cards Row */
|
|
.app-cards-row {
|
|
display: flex;
|
|
overflow-x: auto;
|
|
padding: 0 16px;
|
|
gap: 12px;
|
|
}
|
|
|
|
.app-card {
|
|
min-width: 140px;
|
|
background-color: #1E1E1E;
|
|
border-radius: 12px;
|
|
padding: 12px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.app-card:hover {
|
|
background-color: #252525;
|
|
}
|
|
|
|
.app-card-icon {
|
|
width: 64px;
|
|
height: 64px;
|
|
border-radius: 14px;
|
|
margin-bottom: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 28px;
|
|
color: #000000;
|
|
}
|
|
|
|
.app-card-name {
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.app-card-category {
|
|
font-size: 16px;
|
|
color: #B3B3B3;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.app-card-rating {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 16px;
|
|
color: #B3B3B3;
|
|
}
|
|
|
|
.app-card-rating img {
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
/* App List Items */
|
|
.app-list-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 12px 16px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.app-list-item:hover {
|
|
background-color: #1E1E1E;
|
|
}
|
|
|
|
.app-list-icon {
|
|
width: 56px;
|
|
height: 56px;
|
|
border-radius: 12px;
|
|
margin-right: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 24px;
|
|
color: #000000;
|
|
}
|
|
|
|
.app-list-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.app-list-name {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.app-list-meta {
|
|
font-size: 16px;
|
|
color: #B3B3B3;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.app-list-rating {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.app-list-rating img {
|
|
width: 18px;
|
|
height: 18px;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.app-list-rating span {
|
|
font-size: 16px;
|
|
color: #B3B3B3;
|
|
}
|
|
|
|
.install-btn {
|
|
background-color: #BB86FC;
|
|
color: #000000;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
padding: 10px 22px;
|
|
border-radius: 22px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.install-btn:hover {
|
|
background-color: #D4A5FF;
|
|
}
|
|
|
|
.install-btn.installed {
|
|
background-color: transparent;
|
|
color: #BB86FC;
|
|
border-width: 1px;
|
|
border-color: #BB86FC;
|
|
}
|
|
|
|
/* Category Chips */
|
|
.category-chips {
|
|
display: flex;
|
|
overflow-x: auto;
|
|
padding: 0 16px;
|
|
gap: 8px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.category-chip {
|
|
background-color: #2D2D2D;
|
|
color: #FFFFFF;
|
|
font-size: 14px;
|
|
padding: 8px 16px;
|
|
border-radius: 20px;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.category-chip:hover {
|
|
background-color: #3D3D3D;
|
|
}
|
|
|
|
.category-chip.active {
|
|
background-color: #BB86FC;
|
|
color: #000000;
|
|
}
|
|
|
|
/* Bottom Nav */
|
|
.store-bottom-nav {
|
|
display: flex;
|
|
height: 56px;
|
|
background-color: #1E1E1E;
|
|
}
|
|
|
|
.store-nav-item {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
color: #B3B3B3;
|
|
}
|
|
|
|
.store-nav-item.active {
|
|
color: #BB86FC;
|
|
}
|
|
|
|
.store-nav-item img {
|
|
width: 32px;
|
|
height: 32px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.store-nav-item span {
|
|
font-size: 16px;
|
|
}
|
|
|
|
/* Color palette for app icons */
|
|
.bg-purple { background-color: #BB86FC; }
|
|
.bg-teal { background-color: #03DAC6; }
|
|
.bg-orange { background-color: #FF9800; }
|
|
.bg-blue { background-color: #2196F3; }
|
|
.bg-green { background-color: #4CAF50; }
|
|
.bg-red { background-color: #F44336; }
|
|
.bg-pink { background-color: #E91E63; }
|
|
.bg-indigo { background-color: #3F51B5; }
|
|
|
|
/* Dialog Overlay */
|
|
.dialog-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.dialog {
|
|
background-color: #2D2D2D;
|
|
border-radius: 16px;
|
|
padding: 24px;
|
|
min-width: 280px;
|
|
max-width: 320px;
|
|
}
|
|
|
|
.dialog-title {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
color: #FFFFFF;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.dialog-message {
|
|
font-size: 16px;
|
|
color: #B3B3B3;
|
|
margin-bottom: 24px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.dialog-status {
|
|
font-size: 14px;
|
|
color: #B3B3B3;
|
|
margin-top: 12px;
|
|
text-align: center;
|
|
}
|
|
|
|
.dialog-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 12px;
|
|
}
|
|
|
|
.dialog-btn {
|
|
background-color: transparent;
|
|
color: #BB86FC;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
padding: 10px 20px;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.dialog-btn:hover {
|
|
background-color: rgba(187, 134, 252, 0.1);
|
|
}
|
|
|
|
/* Progress Bar */
|
|
.progress-container {
|
|
width: 100%;
|
|
height: 4px;
|
|
background-color: #1E1E1E;
|
|
border-radius: 2px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-bar {
|
|
height: 100%;
|
|
background-color: #BB86FC;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
/* Toast */
|
|
.toast {
|
|
position: fixed;
|
|
bottom: 80px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background-color: #323232;
|
|
color: #FFFFFF;
|
|
font-size: 14px;
|
|
padding: 12px 24px;
|
|
border-radius: 8px;
|
|
z-index: 1001;
|
|
}
|
|
|
|
/* Badge */
|
|
.badge {
|
|
position: absolute;
|
|
top: 4px;
|
|
right: 4px;
|
|
background-color: #F44336;
|
|
color: #FFFFFF;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
min-width: 18px;
|
|
height: 18px;
|
|
border-radius: 9px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 4px;
|
|
}
|
|
|
|
.store-nav-item {
|
|
position: relative;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="store-screen">
|
|
<!-- App Bar -->
|
|
<div class="app-bar">
|
|
<div class="app-bar-nav btn-icon" onclick="goBack()">
|
|
<img src="../../icons/back.tga" style="width: 32px; height: 32px;"/>
|
|
</div>
|
|
<span class="app-bar-title">Mosis Store</span>
|
|
<div class="btn-icon">
|
|
<img src="../../icons/account.tga" style="width: 32px; height: 32px;"/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Store Content -->
|
|
<div class="store-content">
|
|
<!-- Search Bar -->
|
|
<div class="store-search">
|
|
<img src="../../icons/search.tga"/>
|
|
<span class="store-search-text">Search apps & games</span>
|
|
</div>
|
|
|
|
<!-- Featured Banner -->
|
|
<div class="featured-banner">
|
|
<span class="featured-tag">Featured</span>
|
|
<span class="featured-title">Weather Pro</span>
|
|
<span class="featured-subtitle">Beautiful forecasts for your virtual world</span>
|
|
</div>
|
|
|
|
<!-- Category Chips -->
|
|
<div class="category-chips">
|
|
<div class="category-chip active">For You</div>
|
|
<div class="category-chip">Games</div>
|
|
<div class="category-chip">Social</div>
|
|
<div class="category-chip">Productivity</div>
|
|
<div class="category-chip">Entertainment</div>
|
|
<div class="category-chip">Tools</div>
|
|
</div>
|
|
|
|
<!-- Recommended Section -->
|
|
<div class="section-header">
|
|
<span class="section-title">Recommended for You</span>
|
|
<span class="section-action">See all</span>
|
|
</div>
|
|
|
|
<div class="app-cards-row">
|
|
<div class="app-card">
|
|
<div class="app-card-icon bg-teal">N</div>
|
|
<div class="app-card-name">Notes</div>
|
|
<div class="app-card-category">Productivity</div>
|
|
<div class="app-card-rating">4.7</div>
|
|
</div>
|
|
<div class="app-card">
|
|
<div class="app-card-icon bg-orange">C</div>
|
|
<div class="app-card-name">Calculator</div>
|
|
<div class="app-card-category">Tools</div>
|
|
<div class="app-card-rating">4.5</div>
|
|
</div>
|
|
<div class="app-card">
|
|
<div class="app-card-icon bg-blue">W</div>
|
|
<div class="app-card-name">Weather</div>
|
|
<div class="app-card-category">Weather</div>
|
|
<div class="app-card-rating">4.8</div>
|
|
</div>
|
|
<div class="app-card">
|
|
<div class="app-card-icon bg-green">M</div>
|
|
<div class="app-card-name">Maps</div>
|
|
<div class="app-card-category">Navigation</div>
|
|
<div class="app-card-rating">4.6</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Top Apps Section -->
|
|
<div class="section-header">
|
|
<span class="section-title">Top Free Apps</span>
|
|
<span class="section-action">See all</span>
|
|
</div>
|
|
|
|
<!-- App List -->
|
|
<div class="app-list-item">
|
|
<div class="app-list-icon bg-purple">S</div>
|
|
<div class="app-list-info">
|
|
<div class="app-list-name">Social Hub</div>
|
|
<div class="app-list-meta">Social • 12 MB</div>
|
|
<div class="app-list-rating">
|
|
<span>4.9 • 1.2M downloads</span>
|
|
</div>
|
|
</div>
|
|
<div class="install-btn">Install</div>
|
|
</div>
|
|
|
|
<div class="app-list-item">
|
|
<div class="app-list-icon bg-red">G</div>
|
|
<div class="app-list-info">
|
|
<div class="app-list-name">Games Center</div>
|
|
<div class="app-list-meta">Games • 45 MB</div>
|
|
<div class="app-list-rating">
|
|
<span>4.7 • 890K downloads</span>
|
|
</div>
|
|
</div>
|
|
<div class="install-btn">Install</div>
|
|
</div>
|
|
|
|
<div class="app-list-item">
|
|
<div class="app-list-icon bg-indigo">F</div>
|
|
<div class="app-list-info">
|
|
<div class="app-list-name">File Manager</div>
|
|
<div class="app-list-meta">Tools • 8 MB</div>
|
|
<div class="app-list-rating">
|
|
<span>4.6 • 650K downloads</span>
|
|
</div>
|
|
</div>
|
|
<div class="install-btn installed">Open</div>
|
|
</div>
|
|
|
|
<div class="app-list-item">
|
|
<div class="app-list-icon bg-pink">M</div>
|
|
<div class="app-list-info">
|
|
<div class="app-list-name">Music Player</div>
|
|
<div class="app-list-meta">Music • 18 MB</div>
|
|
<div class="app-list-rating">
|
|
<span>4.5 • 520K downloads</span>
|
|
</div>
|
|
</div>
|
|
<div class="install-btn">Install</div>
|
|
</div>
|
|
|
|
<div class="app-list-item">
|
|
<div class="app-list-icon bg-teal">P</div>
|
|
<div class="app-list-info">
|
|
<div class="app-list-name">Photo Editor</div>
|
|
<div class="app-list-meta">Photography • 32 MB</div>
|
|
<div class="app-list-rating">
|
|
<span>4.4 • 410K downloads</span>
|
|
</div>
|
|
</div>
|
|
<div class="install-btn">Install</div>
|
|
</div>
|
|
|
|
<!-- New Games Section -->
|
|
<div class="section-header">
|
|
<span class="section-title">New Games</span>
|
|
<span class="section-action">See all</span>
|
|
</div>
|
|
|
|
<div class="app-cards-row">
|
|
<div class="app-card">
|
|
<div class="app-card-icon bg-red">P</div>
|
|
<div class="app-card-name">Puzzle Quest</div>
|
|
<div class="app-card-category">Puzzle</div>
|
|
<div class="app-card-rating">4.8</div>
|
|
</div>
|
|
<div class="app-card">
|
|
<div class="app-card-icon bg-green">R</div>
|
|
<div class="app-card-name">Racing VR</div>
|
|
<div class="app-card-category">Racing</div>
|
|
<div class="app-card-rating">4.6</div>
|
|
</div>
|
|
<div class="app-card">
|
|
<div class="app-card-icon bg-blue">S</div>
|
|
<div class="app-card-name">Space Explorer</div>
|
|
<div class="app-card-category">Adventure</div>
|
|
<div class="app-card-rating">4.7</div>
|
|
</div>
|
|
<div class="app-card">
|
|
<div class="app-card-icon bg-orange">C</div>
|
|
<div class="app-card-name">Card Master</div>
|
|
<div class="app-card-category">Card</div>
|
|
<div class="app-card-rating">4.5</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bottom Navigation -->
|
|
<div class="store-bottom-nav">
|
|
<div id="nav-apps" class="store-nav-item active" onclick="showHome()">
|
|
<img src="../../icons/home.tga"/>
|
|
<span>Apps</span>
|
|
</div>
|
|
<div id="nav-games" class="store-nav-item" onclick="showGames()">
|
|
<img src="../../icons/game.tga"/>
|
|
<span>Games</span>
|
|
</div>
|
|
<div id="nav-updates" class="store-nav-item" onclick="showUpdates()">
|
|
<img src="../../icons/download.tga"/>
|
|
<span>Updates</span>
|
|
<div id="updates-badge" class="badge" style="display: none;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Progress Dialog (hidden by default) -->
|
|
<div id="progress-dialog" class="dialog-overlay" style="display: none;">
|
|
<div class="dialog">
|
|
<div id="progress-title" class="dialog-title">Installing...</div>
|
|
<div class="progress-container">
|
|
<div id="progress-bar" class="progress-bar" style="width: 0%;"></div>
|
|
</div>
|
|
<div id="progress-status" class="dialog-status">Preparing...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Error Dialog (hidden by default) -->
|
|
<div id="error-dialog" class="dialog-overlay" style="display: none;">
|
|
<div class="dialog">
|
|
<div class="dialog-title">Error</div>
|
|
<div id="error-message" class="dialog-message"></div>
|
|
<div class="dialog-actions">
|
|
<div class="dialog-btn" onclick="hideError()">OK</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toast (hidden by default) -->
|
|
<div id="toast" class="toast" style="display: none;"></div>
|
|
</body>
|
|
</rml>
|