add device-side app management with AppManager, UpdateService and App Store UI (M10)
This commit is contained in:
@@ -4,6 +4,7 @@
|
||||
<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 {
|
||||
@@ -296,6 +297,121 @@
|
||||
.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;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
/* 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">
|
||||
@@ -471,18 +587,44 @@
|
||||
|
||||
<!-- Bottom Navigation -->
|
||||
<div class="store-bottom-nav">
|
||||
<div class="store-nav-item active">
|
||||
<div id="nav-apps" class="store-nav-item active" onclick="showHome()">
|
||||
<img src="../../icons/home.tga"/>
|
||||
<span>Apps</span>
|
||||
</div>
|
||||
<div class="store-nav-item">
|
||||
<div id="nav-games" class="store-nav-item" onclick="showGames()">
|
||||
<img src="../../icons/game.tga"/>
|
||||
<span>Games</span>
|
||||
</div>
|
||||
<div class="store-nav-item">
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user