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

add icons and navigation

Browse Source
This commit is contained in:
omigamedev
2026-01-16 01:45:01 +01:00
parent 08327e5575
commit c6b05080bd
53 changed files with 232 additions and 358 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
assets/screens/browser.rml
View File

@@ -1,5 +1,6 @@
<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>
@@ -173,14 +174,13 @@
<!-- Browser Toolbar -->
<div class="browser-toolbar">
<div class="browser-nav-btn" onclick="goBack()">←</div>
<div class="browser-nav-btn disabled">→</div>
<div class="browser-nav-btn" onclick="goBack()"><img src="../icons/back.tga" style="width: 24px; height: 24px;"/></div>
<div class="browser-nav-btn disabled"><img src="../icons/forward.tga" style="width: 24px; height: 24px; opacity: 0.3;"/></div>
<div class="browser-url-bar">
<span class="browser-secure-icon">L</span>
<input class="browser-url" type="text" value="example.com"/>
</div>
<div class="browser-nav-btn">R</div>
<div class="browser-nav-btn">:</div>
<div class="browser-nav-btn"><img src="../icons/refresh.tga" style="width: 24px; height: 24px;"/></div>
<div class="browser-nav-btn"><img src="../icons/more.tga" style="width: 24px; height: 24px;"/></div>
</div>
<!-- Browser Content -->
@@ -213,7 +213,7 @@
<!-- Bottom Bar -->
<div class="browser-bottom-bar">
<div class="browser-tab-btn" onclick="goHome()">
<span class="browser-tab-icon">H</span>
<img src="../icons/home.tga" class="browser-tab-icon" style="width: 24px; height: 24px;"/>
<span class="browser-tab-label">Home</span>
</div>
<div class="browser-tab-btn">
@@ -221,11 +221,11 @@
<span class="browser-tab-label">Tabs</span>
</div>
<div class="browser-tab-btn">
<span class="browser-tab-icon">+</span>
<img src="../icons/add.tga" class="browser-tab-icon" style="width: 24px; height: 24px;"/>
<span class="browser-tab-label">New Tab</span>
</div>
<div class="browser-tab-btn">
<span class="browser-tab-icon">:</span>
<img src="../icons/menu.tga" class="browser-tab-icon" style="width: 24px; height: 24px;"/>
<span class="browser-tab-label">Menu</span>
</div>
</div>

15
assets/screens/contacts.rml
View File

@@ -1,5 +1,6 @@
<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>
@@ -71,14 +72,14 @@
<body class="contacts-screen">
<!-- App Bar -->
<div class="app-bar">
<div class="btn-icon" onclick="goBack()">←</div>
<div class="btn-icon" onclick="goBack()"><img src="../icons/back.tga" style="width: 24px; height: 24px;"/></div>
<span class="app-bar-title">Contacts</span>
<div class="btn-icon">+</div>
<div class="btn-icon"><img src="../icons/add.tga" style="width: 24px; height: 24px;"/></div>
</div>
<!-- Search Bar -->
<div class="search-bar">
<span class="search-icon">Q</span>
<img src="../icons/search.tga" class="search-icon" style="width: 20px; height: 20px;"/>
<input class="search-input" type="text" placeholder="Search contacts"/>
</div>
@@ -177,20 +178,20 @@
</div>
<!-- FAB -->
<div class="btn-fab">+</div>
<div class="btn-fab"><img src="../icons/add.tga" style="width: 24px; height: 24px;"/></div>
<!-- Bottom Navigation -->
<div class="bottom-nav">
<div class="bottom-nav-item" onclick="navigateTo('dialer')">
<span class="bottom-nav-icon">*</span>
<img src="../icons/dialpad.tga" class="bottom-nav-icon" style="width: 24px; height: 24px;"/>
<span class="bottom-nav-label">Keypad</span>
</div>
<div class="bottom-nav-item">
<span class="bottom-nav-icon">O</span>
<img src="../icons/history.tga" class="bottom-nav-icon" style="width: 24px; height: 24px;"/>
<span class="bottom-nav-label">Recent</span>
</div>
<div class="bottom-nav-item active">
<span class="bottom-nav-icon">@</span>
<img src="../icons/contacts.tga" class="bottom-nav-icon" style="width: 24px; height: 24px;"/>
<span class="bottom-nav-label">Contacts</span>
</div>
</div>

11
assets/screens/dialer.rml
View File

@@ -1,5 +1,6 @@
<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>
@@ -107,7 +108,7 @@
<body class="dialer-screen">
<!-- App Bar -->
<div class="app-bar">
<div class="btn-icon" onclick="goBack()">←</div>
<div class="btn-icon" onclick="goBack()"><img src="../icons/back.tga" style="width: 24px; height: 24px;"/></div>
<span class="app-bar-title">Phone</span>
</div>
@@ -175,21 +176,21 @@
<!-- Call Button -->
<div class="dial-actions">
<div class="dial-call-btn" onclick="makeCall()">C</div>
<div class="dial-call-btn" onclick="makeCall()"><img src="../icons/call_small.tga" style="width: 32px; height: 32px;"/></div>
</div>
<!-- Bottom Navigation -->
<div class="bottom-nav">
<div class="bottom-nav-item active">
<span class="bottom-nav-icon">*</span>
<img src="../icons/dialpad.tga" class="bottom-nav-icon" style="width: 24px; height: 24px;"/>
<span class="bottom-nav-label">Keypad</span>
</div>
<div class="bottom-nav-item">
<span class="bottom-nav-icon">O</span>
<img src="../icons/history.tga" class="bottom-nav-icon" style="width: 24px; height: 24px;"/>
<span class="bottom-nav-label">Recent</span>
</div>
<div class="bottom-nav-item" onclick="navigateTo('contacts')">
<span class="bottom-nav-icon">@</span>
<img src="../icons/contacts.tga" class="bottom-nav-icon" style="width: 24px; height: 24px;"/>
<span class="bottom-nav-label">Contacts</span>
</div>
</div>

81
assets/screens/home.rml
View File

@@ -1,8 +1,10 @@
<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"/>
<title>Home</title>
<script src="../scripts/navigation.lua"></script>
<title>Virtual Smartphone - Home</title>
<style>
.home-screen {
width: 100%;
@@ -17,13 +19,20 @@
padding-bottom: 80px;
}
.wallpaper-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(180deg, rgba(18,18,18,0.3) 0%, rgba(18,18,18,0.8) 100%);
.app-icon-image img {
width: 32px;
height: 32px;
pointer-events: none;
}
.dock-item img {
width: 32px;
height: 32px;
pointer-events: none;
}
.status-bar-icons img {
pointer-events: none;
}
</style>
</head>
@@ -32,9 +41,9 @@
<div class="status-bar">
<span class="status-bar-time">12:30</span>
<div class="status-bar-icons">
<span>*</span>
<span>+</span>
<span>|</span>
<img src="../icons/wifi.tga" style="width: 16px; height: 16px;"/>
<img src="../icons/signal.tga" style="width: 16px; height: 16px;"/>
<img src="../icons/battery.tga" style="width: 16px; height: 16px;"/>
</div>
</div>
@@ -42,74 +51,74 @@
<div class="home-content">
<div class="app-grid">
<!-- Row 1 -->
<div class="app-icon" onclick="navigateTo('dialer')">
<div class="app-icon-image" style="background-color: #4CAF50;">P</div>
<div class="app-icon">
<div class="app-icon-image" style="background-color: #4CAF50;" onclick="navigateTo('dialer')"><img src="../icons/phone.tga"/></div>
<span class="app-icon-label">Phone</span>
</div>
<div class="app-icon" onclick="navigateTo('messages')">
<div class="app-icon-image" style="background-color: #2196F3;">M</div>
<div class="app-icon">
<div class="app-icon-image" style="background-color: #2196F3;" onclick="navigateTo('messages')"><img src="../icons/message.tga"/></div>
<span class="app-icon-label">Messages</span>
</div>
<div class="app-icon" onclick="navigateTo('contacts')">
<div class="app-icon-image" style="background-color: #FF9800;">C</div>
<div class="app-icon">
<div class="app-icon-image" style="background-color: #FF9800;" onclick="navigateTo('contacts')"><img src="../icons/contacts.tga"/></div>
<span class="app-icon-label">Contacts</span>
</div>
<div class="app-icon" onclick="navigateTo('browser')">
<div class="app-icon-image" style="background-color: #F44336;">B</div>
<div class="app-icon">
<div class="app-icon-image" style="background-color: #F44336;" onclick="navigateTo('browser')"><img src="../icons/browser.tga"/></div>
<span class="app-icon-label">Browser</span>
</div>
<!-- Row 2 -->
<div class="app-icon">
<div class="app-icon-image" style="background-color: #9C27B0;">G</div>
<div class="app-icon-image" style="background-color: #9C27B0;"><img src="../icons/gallery.tga"/></div>
<span class="app-icon-label">Gallery</span>
</div>
<div class="app-icon">
<div class="app-icon-image" style="background-color: #00BCD4;">C</div>
<div class="app-icon-image" style="background-color: #00BCD4;"><img src="../icons/camera.tga"/></div>
<span class="app-icon-label">Camera</span>
</div>
<div class="app-icon" onclick="navigateTo('settings')">
<div class="app-icon-image" style="background-color: #607D8B;">S</div>
<div class="app-icon">
<div class="app-icon-image" style="background-color: #607D8B;" onclick="navigateTo('settings')"><img src="../icons/settings.tga"/></div>
<span class="app-icon-label">Settings</span>
</div>
<div class="app-icon">
<div class="app-icon-image" style="background-color: #E91E63;">M</div>
<div class="app-icon-image" style="background-color: #E91E63;"><img src="../icons/music.tga"/></div>
<span class="app-icon-label">Music</span>
</div>
<!-- Row 3 -->
<div class="app-icon">
<div class="app-icon-image" style="background-color: #3F51B5;">C</div>
<div class="app-icon-image" style="background-color: #3F51B5;"><img src="../icons/calendar.tga"/></div>
<span class="app-icon-label">Calendar</span>
</div>
<div class="app-icon">
<div class="app-icon-image" style="background-color: #009688;">C</div>
<div class="app-icon-image" style="background-color: #009688;"><img src="../icons/clock.tga"/></div>
<span class="app-icon-label">Clock</span>
</div>
<div class="app-icon">
<div class="app-icon-image" style="background-color: #795548;">N</div>
<div class="app-icon-image" style="background-color: #795548;"><img src="../icons/notes.tga"/></div>
<span class="app-icon-label">Notes</span>
</div>
<div class="app-icon">
<div class="app-icon-image" style="background-color: #FF5722;">M</div>
<div class="app-icon-image" style="background-color: #FF5722;"><img src="../icons/maps.tga"/></div>
<span class="app-icon-label">Maps</span>
</div>
<!-- Row 4 -->
<div class="app-icon">
<div class="app-icon-image" style="background-color: #8BC34A;">S</div>
<div class="app-icon-image" style="background-color: #8BC34A;"><img src="../icons/store.tga"/></div>
<span class="app-icon-label">Store</span>
</div>
<div class="app-icon">
<div class="app-icon-image" style="background-color: #CDDC39;">F</div>
<div class="app-icon-image" style="background-color: #CDDC39;"><img src="../icons/files.tga"/></div>
<span class="app-icon-label">Files</span>
</div>
<div class="app-icon">
<div class="app-icon-image" style="background-color: #FFC107;">C</div>
<div class="app-icon-image" style="background-color: #FFC107;"><img src="../icons/calculator.tga"/></div>
<span class="app-icon-label">Calculator</span>
</div>
<div class="app-icon">
<div class="app-icon-image" style="background-color: #673AB7;">W</div>
<div class="app-icon-image" style="background-color: #673AB7;"><img src="../icons/weather.tga"/></div>
<span class="app-icon-label">Weather</span>
</div>
</div>
@@ -117,10 +126,10 @@
<!-- Dock -->
<div class="dock">
<div class="dock-item" style="background-color: #4CAF50;" onclick="navigateTo('dialer')">P</div>
<div class="dock-item" style="background-color: #2196F3;" onclick="navigateTo('messages')">M</div>
<div class="dock-item" style="background-color: #FF9800;" onclick="navigateTo('contacts')">C</div>
<div class="dock-item" style="background-color: #F44336;" onclick="navigateTo('browser')">B</div>
<div class="dock-item" style="background-color: #4CAF50;" onclick="navigateTo('dialer')"><img src="../icons/phone.tga"/></div>
<div class="dock-item" style="background-color: #2196F3;" onclick="navigateTo('messages')"><img src="../icons/message.tga"/></div>
<div class="dock-item" style="background-color: #FF9800;" onclick="navigateTo('contacts')"><img src="../icons/contacts.tga"/></div>
<div class="dock-item" style="background-color: #F44336;" onclick="navigateTo('browser')"><img src="../icons/browser.tga"/></div>
</div>
</body>
</rml>

5
assets/screens/lock.rml
View File

@@ -1,5 +1,6 @@
<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>
@@ -168,8 +169,8 @@
<!-- Shortcuts -->
<div class="lock-shortcuts">
<div class="lock-shortcut" onclick="navigateTo('dialer')">P</div>
<div class="lock-shortcut">C</div>
<div class="lock-shortcut" onclick="navigateTo('dialer')"><img src="../icons/phone.tga" style="width: 32px; height: 32px;"/></div>
<div class="lock-shortcut"><img src="../icons/camera.tga" style="width: 32px; height: 32px;"/></div>
</div>
</body>
</rml>

7
assets/screens/messages.rml
View File

@@ -1,5 +1,6 @@
<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>
@@ -131,9 +132,9 @@
<body class="messages-screen">
<!-- App Bar -->
<div class="app-bar">
<div class="btn-icon" onclick="goBack()">←</div>
<div class="btn-icon" onclick="goBack()"><img src="../icons/back.tga" style="width: 24px; height: 24px;"/></div>
<span class="app-bar-title">Messages</span>
<div class="btn-icon">Q</div>
<div class="btn-icon"><img src="../icons/search.tga" style="width: 24px; height: 24px;"/></div>
</div>
<!-- Conversations List -->
@@ -218,6 +219,6 @@
</div>
<!-- FAB -->
<div class="btn-fab">+</div>
<div class="btn-fab"><img src="../icons/add.tga" style="width: 24px; height: 24px;"/></div>
</body>
</rml>

5
assets/screens/settings.rml
View File

@@ -1,5 +1,6 @@
<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>
@@ -149,9 +150,9 @@
<body class="settings-screen">
<!-- App Bar -->
<div class="app-bar">
<div class="btn-icon" onclick="goBack()">←</div>
<div class="btn-icon" onclick="goBack()"><img src="../icons/back.tga" style="width: 24px; height: 24px;"/></div>
<span class="app-bar-title">Settings</span>
<div class="btn-icon">Q</div>
<div class="btn-icon"><img src="../icons/search.tga" style="width: 24px; height: 24px;"/></div>
</div>
<!-- Settings List -->