add rich Store app UI with featured banner, categories, and app listings
This commit is contained in:
@@ -1,11 +1,209 @@
|
||||
<!-- Store App Content Fragment -->
|
||||
<!-- Styles are in shell.rml -->
|
||||
<!-- Uses classes from components.rcss -->
|
||||
|
||||
<div class="app-content">
|
||||
<div class="app-header">
|
||||
<span class="app-header-title">Store</span>
|
||||
<div class="app-bar">
|
||||
<span class="app-bar-title">Mosis Store</span>
|
||||
<div class="app-bar-actions">
|
||||
<div class="btn-icon" onclick="searchStore()">
|
||||
<img src="../../icons/search.tga" style="width: 28px; height: 28px;"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-body">
|
||||
<span class="placeholder-text">Store App</span>
|
||||
|
||||
<div style="flex: 1; overflow: auto;">
|
||||
<!-- Featured Banner -->
|
||||
<div style="margin: 16px; padding: 24px; background-color: #7c3aed; border-radius: 16px;">
|
||||
<div style="font-size: 14px; color: rgba(255,255,255,0.8); margin-bottom: 4px;">FEATURED</div>
|
||||
<div style="font-size: 24px; color: #FFFFFF; font-weight: bold; margin-bottom: 8px;">Weather Pro</div>
|
||||
<div style="font-size: 14px; color: rgba(255,255,255,0.9); margin-bottom: 16px;">Beautiful forecasts with live radar</div>
|
||||
<div class="btn-primary" onclick="installApp('weather')" style="width: 100px;">
|
||||
<span>Install</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Categories -->
|
||||
<div class="section-header">
|
||||
<span class="section-title">Categories</span>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; gap: 12px; padding: 0 16px; overflow-x: auto;">
|
||||
<div onclick="openCategory('games')" style="min-width: 100px; padding: 16px; background-color: #1a1a1a; border-radius: 12px; display: flex; flex-direction: column; align-items: center; cursor: pointer;">
|
||||
<div style="width: 48px; height: 48px; border-radius: 12px; background-color: #F44336; display: flex; align-items: center; justify-content: center; margin-bottom: 8px;">
|
||||
<span style="font-size: 24px; color: #FFFFFF;">G</span>
|
||||
</div>
|
||||
<span style="font-size: 14px; color: #FFFFFF;">Games</span>
|
||||
</div>
|
||||
<div onclick="openCategory('social')" style="min-width: 100px; padding: 16px; background-color: #1a1a1a; border-radius: 12px; display: flex; flex-direction: column; align-items: center; cursor: pointer;">
|
||||
<div style="width: 48px; height: 48px; border-radius: 12px; background-color: #2196F3; display: flex; align-items: center; justify-content: center; margin-bottom: 8px;">
|
||||
<span style="font-size: 24px; color: #FFFFFF;">S</span>
|
||||
</div>
|
||||
<span style="font-size: 14px; color: #FFFFFF;">Social</span>
|
||||
</div>
|
||||
<div onclick="openCategory('tools')" style="min-width: 100px; padding: 16px; background-color: #1a1a1a; border-radius: 12px; display: flex; flex-direction: column; align-items: center; cursor: pointer;">
|
||||
<div style="width: 48px; height: 48px; border-radius: 12px; background-color: #4CAF50; display: flex; align-items: center; justify-content: center; margin-bottom: 8px;">
|
||||
<span style="font-size: 24px; color: #FFFFFF;">T</span>
|
||||
</div>
|
||||
<span style="font-size: 14px; color: #FFFFFF;">Tools</span>
|
||||
</div>
|
||||
<div onclick="openCategory('media')" style="min-width: 100px; padding: 16px; background-color: #1a1a1a; border-radius: 12px; display: flex; flex-direction: column; align-items: center; cursor: pointer;">
|
||||
<div style="width: 48px; height: 48px; border-radius: 12px; background-color: #FF9800; display: flex; align-items: center; justify-content: center; margin-bottom: 8px;">
|
||||
<span style="font-size: 24px; color: #FFFFFF;">M</span>
|
||||
</div>
|
||||
<span style="font-size: 14px; color: #FFFFFF;">Media</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Popular Apps -->
|
||||
<div class="section-header">
|
||||
<span class="section-title">Popular Apps</span>
|
||||
<span class="section-action" onclick="seeAllPopular()">SEE ALL</span>
|
||||
</div>
|
||||
|
||||
<div class="list">
|
||||
<div class="list-item" onclick="openAppDetails('socialvr')">
|
||||
<div class="list-item-avatar" style="background-color: #E91E63; border-radius: 12px;">S</div>
|
||||
<div class="list-item-content">
|
||||
<span class="list-item-title">SocialVR</span>
|
||||
<span class="list-item-subtitle">Connect in virtual reality</span>
|
||||
</div>
|
||||
<div class="btn-outline" onclick="installApp('socialvr'); event.stopPropagation();" style="padding: 8px 16px;">
|
||||
<span style="font-size: 14px;">Install</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-divider"></div>
|
||||
|
||||
<div class="list-item" onclick="openAppDetails('vrfit')">
|
||||
<div class="list-item-avatar" style="background-color: #4CAF50; border-radius: 12px;">V</div>
|
||||
<div class="list-item-content">
|
||||
<span class="list-item-title">VR Fitness</span>
|
||||
<span class="list-item-subtitle">Workout in virtual worlds</span>
|
||||
</div>
|
||||
<div class="btn-outline" onclick="installApp('vrfit'); event.stopPropagation();" style="padding: 8px 16px;">
|
||||
<span style="font-size: 14px;">Install</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-divider"></div>
|
||||
|
||||
<div class="list-item" onclick="openAppDetails('notesync')">
|
||||
<div class="list-item-avatar" style="background-color: #FF9800; border-radius: 12px;">N</div>
|
||||
<div class="list-item-content">
|
||||
<span class="list-item-title">NoteSync</span>
|
||||
<span class="list-item-subtitle">Notes across all devices</span>
|
||||
</div>
|
||||
<div class="btn-outline" onclick="installApp('notesync'); event.stopPropagation();" style="padding: 8px 16px;">
|
||||
<span style="font-size: 14px;">Install</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-divider"></div>
|
||||
|
||||
<div class="list-item" onclick="openAppDetails('mediaplayer')">
|
||||
<div class="list-item-avatar" style="background-color: #9C27B0; border-radius: 12px;">M</div>
|
||||
<div class="list-item-content">
|
||||
<span class="list-item-title">Media Player</span>
|
||||
<span class="list-item-subtitle">Play all video formats</span>
|
||||
</div>
|
||||
<div class="btn-outline" onclick="installApp('mediaplayer'); event.stopPropagation();" style="padding: 8px 16px;">
|
||||
<span style="font-size: 14px;">Install</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- New Releases -->
|
||||
<div class="section-header">
|
||||
<span class="section-title">New Releases</span>
|
||||
<span class="section-action" onclick="seeAllNew()">SEE ALL</span>
|
||||
</div>
|
||||
|
||||
<div class="list">
|
||||
<div class="list-item" onclick="openAppDetails('calculator')">
|
||||
<div class="list-item-avatar" style="background-color: #607D8B; border-radius: 12px;">C</div>
|
||||
<div class="list-item-content">
|
||||
<span class="list-item-title">Calculator</span>
|
||||
<span class="list-item-subtitle">Scientific calculator</span>
|
||||
</div>
|
||||
<div class="btn-outline" onclick="installApp('calculator'); event.stopPropagation();" style="padding: 8px 16px;">
|
||||
<span style="font-size: 14px;">Install</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-divider"></div>
|
||||
|
||||
<div class="list-item" onclick="openAppDetails('filemanager')">
|
||||
<div class="list-item-avatar" style="background-color: #795548; border-radius: 12px;">F</div>
|
||||
<div class="list-item-content">
|
||||
<span class="list-item-title">File Manager</span>
|
||||
<span class="list-item-subtitle">Organize your files</span>
|
||||
</div>
|
||||
<div class="btn-outline" onclick="installApp('filemanager'); event.stopPropagation();" style="padding: 8px 16px;">
|
||||
<span style="font-size: 14px;">Install</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-divider"></div>
|
||||
|
||||
<div class="list-item" onclick="openAppDetails('clock')">
|
||||
<div class="list-item-avatar" style="background-color: #00BCD4; border-radius: 12px;">C</div>
|
||||
<div class="list-item-content">
|
||||
<span class="list-item-title">Clock</span>
|
||||
<span class="list-item-subtitle">Alarms, timers, world clock</span>
|
||||
</div>
|
||||
<div class="btn-outline" onclick="installApp('clock'); event.stopPropagation();" style="padding: 8px 16px;">
|
||||
<span style="font-size: 14px;">Install</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom padding -->
|
||||
<div style="height: 24px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function searchStore()
|
||||
print("[Store] Search")
|
||||
if showToast then
|
||||
showToast("Search apps")
|
||||
end
|
||||
end
|
||||
|
||||
function openCategory(category)
|
||||
print("[Store] Opening category: " .. category)
|
||||
if showToast then
|
||||
showToast("Category: " .. category)
|
||||
end
|
||||
end
|
||||
|
||||
function openAppDetails(appId)
|
||||
print("[Store] Opening app details: " .. appId)
|
||||
if showToast then
|
||||
showToast("App details: " .. appId)
|
||||
end
|
||||
end
|
||||
|
||||
function installApp(appId)
|
||||
print("[Store] Installing app: " .. appId)
|
||||
if showToast then
|
||||
showToast("Installing " .. appId .. "...")
|
||||
end
|
||||
end
|
||||
|
||||
function seeAllPopular()
|
||||
print("[Store] See all popular apps")
|
||||
if showToast then
|
||||
showToast("Popular apps")
|
||||
end
|
||||
end
|
||||
|
||||
function seeAllNew()
|
||||
print("[Store] See all new releases")
|
||||
if showToast then
|
||||
showToast("New releases")
|
||||
end
|
||||
end
|
||||
|
||||
print("[Store] Content loaded")
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user