omar/MosisService
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

apps ui

Browse Source
This commit is contained in:
omigamedev
2026-01-16 13:53:59 +01:00
parent 5f015e0f50
commit 2e2a9d0603
15 changed files with 1795 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

488
src/main/assets/apps/store/store.rml Normal file
View File

@@ -0,0 +1,488 @@
<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>
<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: 20px;
height: 20px;
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: 14px;
color: #BB86FC;
cursor: pointer;
}
/* Featured Banner */
.featured-banner {
margin: 0 16px 16px 16px;
height: 160px;
background: linear-gradient(135deg, #BB86FC 0%, #6200EE 100%);
border-radius: 16px;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.featured-tag {
font-size: 12px;
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: 14px;
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: 14px;
font-weight: 500;
color: #FFFFFF;
margin-bottom: 4px;
}
.app-card-category {
font-size: 12px;
color: #B3B3B3;
margin-bottom: 8px;
}
.app-card-rating {
display: flex;
align-items: center;
font-size: 12px;
color: #B3B3B3;
}
.app-card-rating img {
width: 12px;
height: 12px;
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: 13px;
color: #B3B3B3;
margin-top: 2px;
}
.app-list-rating {
display: flex;
align-items: center;
margin-top: 4px;
}
.app-list-rating img {
width: 14px;
height: 14px;
margin-right: 4px;
}
.app-list-rating span {
font-size: 13px;
color: #B3B3B3;
}
.install-btn {
background-color: #BB86FC;
color: #000000;
font-size: 13px;
font-weight: 600;
padding: 8px 20px;
border-radius: 20px;
cursor: pointer;
}
.install-btn:hover {
background-color: #D4A5FF;
}
.install-btn.installed {
background-color: transparent;
color: #BB86FC;
border: 1px solid #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: 24px;
height: 24px;
margin-bottom: 4px;
}
.store-nav-item span {
font-size: 12px;
}
/* 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; }
</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: 24px; height: 24px;"/>
</div>
<span class="app-bar-title">Mosis Store</span>
<div class="btn-icon">
<img src="../../icons/account.tga" style="width: 24px; height: 24px;"/>
</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 &amp; 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 &bull; 12 MB</div>
<div class="app-list-rating">
<span>4.9 &bull; 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 &bull; 45 MB</div>
<div class="app-list-rating">
<span>4.7 &bull; 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 &bull; 8 MB</div>
<div class="app-list-rating">
<span>4.6 &bull; 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 &bull; 18 MB</div>
<div class="app-list-rating">
<span>4.5 &bull; 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 &bull; 32 MB</div>
<div class="app-list-rating">
<span>4.4 &bull; 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 class="store-nav-item active">
<img src="../../icons/home.tga"/>
<span>Apps</span>
</div>
<div class="store-nav-item">
<img src="../../icons/game.tga"/>
<span>Games</span>
</div>
<div class="store-nav-item">
<img src="../../icons/download.tga"/>
<span>Updates</span>
</div>
</div>
</body>
</rml>