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

work in progress

Browse Source
This commit is contained in:
omigamedev
2026-01-16 12:43:06 +01:00
parent 77a9579025
commit c8ee7defe8
236 changed files with 11405 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

256
src/main/assets/apps/browser/browser.rml Normal file
View File

@@ -0,0 +1,256 @@
<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>Browser</title>
<style>
.browser-screen {
width: 100%;
height: 100%;
background-color: #121212;
display: flex;
flex-direction: column;
}
.browser-toolbar {
display: flex;
align-items: center;
padding: 8px;
background-color: #1E1E1E;
gap: 8px;
}
.browser-nav-btn {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #B3B3B3;
cursor: pointer;
border-radius: 20px;
}
.browser-nav-btn:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.browser-nav-btn.disabled {
color: #444444;
cursor: default;
}
.browser-nav-btn.disabled:hover {
background-color: transparent;
}
.browser-url-bar {
flex: 1;
display: flex;
align-items: center;
padding: 8px 16px;
background-color: #2D2D2D;
border-radius: 20px;
}
.browser-secure-icon {
font-size: 14px;
color: #4CAF50;
margin-right: 8px;
}
.browser-url {
flex: 1;
font-size: 14px;
color: #FFFFFF;
background: transparent;
border: none;
}
.browser-content {
flex: 1;
background-color: #FFFFFF;
overflow: auto;
}
.browser-page {
padding: 16px;
color: #000000;
}
.browser-page-title {
font-size: 24px;
font-weight: bold;
color: #1a0dab;
margin-bottom: 16px;
}
.browser-page-text {
font-size: 14px;
line-height: 1.6;
color: #333333;
margin-bottom: 16px;
}
.browser-page-link {
color: #1a0dab;
cursor: pointer;
}
.browser-page-link:hover {
text-decoration: underline;
}
.browser-search-results {
padding: 16px;
}
.browser-search-item {
margin-bottom: 24px;
cursor: pointer;
}
.browser-search-item:hover {
background-color: #f0f0f0;
}
.browser-search-title {
font-size: 18px;
color: #1a0dab;
margin-bottom: 4px;
}
.browser-search-url {
font-size: 13px;
color: #006621;
margin-bottom: 4px;
}
.browser-search-desc {
font-size: 14px;
color: #545454;
line-height: 1.4;
}
.browser-bottom-bar {
display: flex;
align-items: center;
padding: 8px 16px;
background-color: #1E1E1E;
border-top: 1px solid #333333;
}
.browser-tab-btn {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 8px;
cursor: pointer;
color: #B3B3B3;
}
.browser-tab-btn:hover {
color: #FFFFFF;
}
.browser-tab-icon {
font-size: 20px;
margin-bottom: 4px;
}
.browser-tab-label {
font-size: 11px;
}
.browser-tabs-indicator {
padding: 4px 8px;
border: 1px solid #B3B3B3;
border-radius: 4px;
font-size: 12px;
color: #B3B3B3;
}
</style>
</head>
<body class="browser-screen" data-model="browser">
<!-- Status Bar -->
<div class="status-bar">
<span class="status-bar-time">12:30</span>
<div class="status-bar-icons">
<span>*</span>
<span>+</span>
<span>|</span>
</div>
</div>
<!-- Browser Toolbar -->
<div class="browser-toolbar">
<div class="app-bar-nav browser-nav-btn" data-class-disabled="!can_go_back" 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">🔒</span>
<input class="browser-url" type="text" data-value="current_url"/>
</div>
<div class="browser-nav-btn" data-event-click="refresh()">
<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 -->
<div class="browser-content">
<div class="browser-page">
<div class="browser-page-title">{{ page_title }}</div>
<div class="browser-page-text">
{{ page_content }}
</div>
<div class="browser-page-text">
<span class="browser-page-link" data-event-click="navigate('iana.org')">More information...</span>
</div>
<div style="margin-top: 32px; padding-top: 16px; border-top: 1px solid #e0e0e0;">
<div class="browser-page-title" style="font-size: 18px;">Related Links</div>
<div class="browser-search-item" data-event-click="navigate('iana.org/domains')">
<div class="browser-search-title">IANA — IANA-managed Reserved Domains</div>
<div class="browser-search-url">www.iana.org > domains > reserved</div>
<div class="browser-search-desc">Certain domains are set aside and unavailable for registration. Learn about reserved top-level domains.</div>
</div>
<div class="browser-search-item" data-event-click="navigate('tools.ietf.org/html/rfc2606')">
<div class="browser-search-title">RFC 2606 - Reserved Top Level DNS Names</div>
<div class="browser-search-url">tools.ietf.org > html > rfc2606</div>
<div class="browser-search-desc">This document describes some domain names that are reserved for documentation purposes.</div>
</div>
</div>
</div>
</div>
<!-- Bottom Bar -->
<div class="browser-bottom-bar">
<div class="browser-tab-btn" onclick="goHome()">
<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">
<span class="browser-tabs-indicator">{{ tabs.size }}</span>
<span class="browser-tab-label">Tabs</span>
</div>
<div class="browser-tab-btn">
<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">
<img src="../../icons/menu.tga" class="browser-tab-icon" style="width: 24px; height: 24px;"/>
<span class="browser-tab-label">Menu</span>
</div>
</div>
</body>
</rml>

161
src/main/assets/apps/contacts/contact_detail.rml Normal file
View File

@@ -0,0 +1,161 @@
<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="../../scripts/phone.lua"></script>
<script src="../../scripts/contacts.lua"></script>
<title>Contact</title>
<style>
.contact-detail-screen {
width: 100%;
height: 100%;
background-color: #121212;
display: flex;
flex-direction: column;
}
.contact-header {
background: linear-gradient(180deg, #1E1E1E 0%, #121212 100%);
padding: 24px;
display: flex;
flex-direction: column;
align-items: center;
}
.contact-avatar-large {
width: 96px;
height: 96px;
border-radius: 48px;
background-color: #BB86FC;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
color: #000000;
margin-bottom: 16px;
}
.contact-name-large {
font-size: 24px;
font-weight: 500;
color: #FFFFFF;
margin-bottom: 8px;
}
.contact-actions {
display: flex;
gap: 32px;
margin-top: 24px;
}
.contact-action {
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
}
.contact-action-icon {
width: 48px;
height: 48px;
border-radius: 24px;
background-color: #BB86FC;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 8px;
}
.contact-action-icon img {
width: 24px;
height: 24px;
pointer-events: none;
}
.contact-action-label {
font-size: 12px;
color: #B3B3B3;
}
.contact-info-section {
padding: 16px;
}
.contact-info-item {
display: flex;
align-items: center;
padding: 16px 0;
}
.contact-info-icon {
width: 24px;
height: 24px;
margin-right: 16px;
}
.contact-info-content {
flex: 1;
}
.contact-info-label {
font-size: 12px;
color: #B3B3B3;
}
.contact-info-value {
font-size: 16px;
color: #FFFFFF;
margin-top: 4px;
}
</style>
</head>
<body class="contact-detail-screen" onload="updateContactDetail()">
<!-- 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">Contact</span>
<div class="btn-icon"><img src="../../icons/more.tga" style="width: 24px; height: 24px;"/></div>
</div>
<!-- Contact Header -->
<div class="contact-header">
<div class="contact-avatar-large" id="contact-avatar">?</div>
<div class="contact-name-large" id="contact-name">Contact Name</div>
<div class="contact-actions">
<div class="contact-action" id="call-action">
<div class="contact-action-icon" style="background-color: #4CAF50;">
<img src="../../icons/phone.tga"/>
</div>
<span class="contact-action-label">Call</span>
</div>
<div class="contact-action" id="message-action">
<div class="contact-action-icon" style="background-color: #2196F3;">
<img src="../../icons/message.tga"/>
</div>
<span class="contact-action-label">Message</span>
</div>
</div>
</div>
<!-- Contact Info -->
<div class="contact-info-section">
<div class="contact-info-item">
<img src="../../icons/phone.tga" class="contact-info-icon" style="width: 24px; height: 24px;"/>
<div class="contact-info-content">
<div class="contact-info-label">Mobile</div>
<div class="contact-info-value" id="contact-phone">+1 (555) 000-0000</div>
</div>
</div>
<div class="contact-info-item">
<img src="../../icons/message.tga" class="contact-info-icon" style="width: 24px; height: 24px;"/>
<div class="contact-info-content">
<div class="contact-info-label">Email</div>
<div class="contact-info-value" id="contact-email">email@example.com</div>
</div>
</div>
</div>
</body>
</rml>

141
src/main/assets/apps/contacts/contacts.rml Normal file
View File

@@ -0,0 +1,141 @@
<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>Contacts</title>
<style>
.contacts-screen {
width: 100%;
height: 100%;
background-color: #121212;
display: flex;
flex-direction: column;
}
.contacts-list {
flex: 1;
overflow: auto;
padding-bottom: 56px;
}
.contact-letter {
padding: 8px 16px;
font-size: 14px;
font-weight: 500;
color: #BB86FC;
background-color: #1E1E1E;
position: sticky;
top: 0;
}
.contact-item {
display: flex;
align-items: center;
padding: 12px 16px;
cursor: pointer;
}
.contact-item:hover {
background-color: rgba(255, 255, 255, 0.05);
}
.contact-avatar {
width: 40px;
height: 40px;
border-radius: 20px;
margin-right: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: #000000;
}
.contact-info {
flex: 1;
}
.contact-name {
font-size: 16px;
color: #FFFFFF;
}
.contact-phone {
font-size: 13px;
color: #B3B3B3;
margin-top: 2px;
}
.contact-call-btn {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 20px;
}
.contact-call-btn:hover {
background-color: rgba(76, 175, 80, 0.2);
}
.contact-call-btn img {
width: 20px;
height: 20px;
pointer-events: none;
}
</style>
</head>
<body class="contacts-screen" data-model="contacts">
<!-- 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">Contacts</span>
<div class="btn-icon"><img src="../../icons/add.tga" style="width: 24px; height: 24px;"/></div>
</div>
<!-- Search Bar -->
<div class="search-bar">
<img src="../../icons/search.tga" class="search-icon" style="width: 20px; height: 20px;"/>
<input class="search-input" type="text" placeholder="Search contacts"/>
</div>
<!-- Contacts List -->
<div class="contacts-list">
<div data-for="contact : contacts">
<div class="contact-item" data-event-click="select_contact(contact.id); navigateTo('contact_detail')">
<div class="contact-avatar" data-style-background-color="contact.color">{{ contact.initial }}</div>
<div class="contact-info">
<div class="contact-name">{{ contact.name }}</div>
<div class="contact-phone">{{ contact.phone }}</div>
</div>
<div class="contact-call-btn">
<img src="../../icons/phone.tga"/>
</div>
</div>
</div>
</div>
<!-- FAB -->
<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')">
<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">
<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">
<img src="../../icons/contacts.tga" class="bottom-nav-icon" style="width: 24px; height: 24px;"/>
<span class="bottom-nav-label">Contacts</span>
</div>
</div>
</body>
</rml>

126
src/main/assets/apps/dialer/calling.rml Normal file
View File

@@ -0,0 +1,126 @@
<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="../../scripts/phone.lua"></script>
<title>Calling</title>
<style>
.calling-screen {
width: 100%;
height: 100%;
background: linear-gradient(180deg, #1a237e 0%, #121212 100%);
display: flex;
flex-direction: column;
align-items: center;
}
.calling-status {
margin-top: 80px;
font-size: 14px;
color: #4CAF50;
text-transform: uppercase;
letter-spacing: 2px;
}
.calling-name {
margin-top: 24px;
font-size: 32px;
font-weight: 300;
color: #FFFFFF;
}
.calling-number {
margin-top: 8px;
font-size: 16px;
color: #B3B3B3;
}
.calling-avatar {
margin-top: 48px;
width: 120px;
height: 120px;
border-radius: 60px;
background-color: #BB86FC;
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
color: #000000;
}
.calling-actions {
position: absolute;
bottom: 120px;
display: flex;
gap: 48px;
}
.call-action-btn {
width: 64px;
height: 64px;
border-radius: 32px;
background-color: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.call-action-btn:hover {
background-color: rgba(255, 255, 255, 0.2);
}
.call-action-btn img {
width: 28px;
height: 28px;
pointer-events: none;
}
.end-call-btn {
position: absolute;
bottom: 40px;
width: 72px;
height: 72px;
border-radius: 36px;
background-color: #F44336;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.end-call-btn:hover {
background-color: #E53935;
}
.end-call-btn img {
width: 32px;
height: 32px;
pointer-events: none;
transform: rotate(135deg);
}
</style>
</head>
<body class="calling-screen">
<div class="calling-status">Calling...</div>
<div class="calling-name" id="calling-name">Unknown</div>
<div class="calling-number" id="calling-number"></div>
<div class="calling-avatar" id="calling-avatar">?</div>
<div class="calling-actions">
<div class="call-action-btn">
<img src="../../icons/dialpad.tga"/>
</div>
<div class="call-action-btn">
<img src="../../icons/contacts.tga"/>
</div>
</div>
<div class="end-call-btn" onclick="endCall()">
<img src="../../icons/phone.tga"/>
</div>
</body>
</rml>

199
src/main/assets/apps/dialer/dialer.rml Normal file
View File

@@ -0,0 +1,199 @@
<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>Phone</title>
<style>
.dialer-screen {
width: 100%;
height: 100%;
background-color: #121212;
display: flex;
flex-direction: column;
}
.dialer-tabs {
display: flex;
background-color: #1E1E1E;
border-bottom: 1px solid #333333;
}
.dialer-tab {
flex: 1;
padding: 16px;
text-align: center;
font-size: 14px;
color: #B3B3B3;
cursor: pointer;
}
.dialer-tab.active {
color: #BB86FC;
border-bottom: 2px solid #BB86FC;
}
.dialer-content {
flex: 1;
display: flex;
flex-direction: column;
}
.recent-calls {
flex: 1;
overflow: auto;
}
.call-item {
display: flex;
align-items: center;
padding: 12px 16px;
}
.call-item:hover {
background-color: rgba(255, 255, 255, 0.05);
}
.call-avatar {
width: 40px;
height: 40px;
border-radius: 20px;
background-color: #BB86FC;
margin-right: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: #000000;
}
.call-info {
flex: 1;
}
.call-name {
font-size: 16px;
color: #FFFFFF;
}
.call-type {
font-size: 13px;
color: #B3B3B3;
margin-top: 2px;
}
.call-type.missed {
color: #CF6679;
}
.call-time {
font-size: 13px;
color: #666666;
}
.call-action {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #4CAF50;
cursor: pointer;
}
</style>
</head>
<body class="dialer-screen" data-model="phone">
<!-- 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">Phone</span>
</div>
<!-- Tabs -->
<div class="dialer-tabs">
<div class="dialer-tab active" id="tab-keypad">Keypad</div>
<div class="dialer-tab" id="tab-recent">Recent</div>
<div class="dialer-tab" onclick="navigateTo('contacts')">Contacts</div>
</div>
<!-- Dial Display -->
<div class="dial-display">{{ dial_number }}</div>
<!-- Dial Pad -->
<div class="dial-pad">
<div class="dial-key" data-event-click="dial_press('1')">
<span class="dial-key-number">1</span>
<span class="dial-key-letters"></span>
</div>
<div class="dial-key" data-event-click="dial_press('2')">
<span class="dial-key-number">2</span>
<span class="dial-key-letters">ABC</span>
</div>
<div class="dial-key" data-event-click="dial_press('3')">
<span class="dial-key-number">3</span>
<span class="dial-key-letters">DEF</span>
</div>
<div class="dial-key" data-event-click="dial_press('4')">
<span class="dial-key-number">4</span>
<span class="dial-key-letters">GHI</span>
</div>
<div class="dial-key" data-event-click="dial_press('5')">
<span class="dial-key-number">5</span>
<span class="dial-key-letters">JKL</span>
</div>
<div class="dial-key" data-event-click="dial_press('6')">
<span class="dial-key-number">6</span>
<span class="dial-key-letters">MNO</span>
</div>
<div class="dial-key" data-event-click="dial_press('7')">
<span class="dial-key-number">7</span>
<span class="dial-key-letters">PQRS</span>
</div>
<div class="dial-key" data-event-click="dial_press('8')">
<span class="dial-key-number">8</span>
<span class="dial-key-letters">TUV</span>
</div>
<div class="dial-key" data-event-click="dial_press('9')">
<span class="dial-key-number">9</span>
<span class="dial-key-letters">WXYZ</span>
</div>
<div class="dial-key" data-event-click="dial_press('*')">
<span class="dial-key-number">*</span>
<span class="dial-key-letters"></span>
</div>
<div class="dial-key" data-event-click="dial_press('0')">
<span class="dial-key-number">0</span>
<span class="dial-key-letters">+</span>
</div>
<div class="dial-key" data-event-click="dial_press('#')">
<span class="dial-key-number">#</span>
<span class="dial-key-letters"></span>
</div>
</div>
<!-- Call Actions -->
<div class="dial-actions">
<div style="width: 56px;"></div>
<div class="dial-call-btn" data-event-click="make_call()"><img src="../../icons/call_small.tga" style="width: 32px; height: 32px; pointer-events: none;"/></div>
<div class="btn-icon" data-event-click="dial_backspace()" style="width: 56px; height: 56px;"><img src="../../icons/backspace.tga" style="width: 24px; height: 24px; pointer-events: none;"/></div>
</div>
<!-- Bottom Navigation -->
<div class="bottom-nav">
<div class="bottom-nav-item active">
<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">
<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')">
<img src="../../icons/contacts.tga" class="bottom-nav-icon" style="width: 24px; height: 24px;"/>
<span class="bottom-nav-label">Contacts</span>
</div>
</div>
</body>
</rml>

135
src/main/assets/apps/home/home.rml Normal file
View File

@@ -0,0 +1,135 @@
<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>Virtual Smartphone - Home</title>
<style>
.home-screen {
width: 100%;
height: 100%;
background-color: #121212;
display: flex;
flex-direction: column;
}
.home-content {
flex: 1;
padding-bottom: 80px;
}
.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>
<body class="home-screen">
<!-- Status Bar -->
<div class="status-bar">
<span class="status-bar-time">12:30</span>
<div class="status-bar-icons">
<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>
<!-- App Grid -->
<div class="home-content">
<div class="app-grid">
<!-- Row 1 -->
<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">
<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">
<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">
<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;"><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;"><img src="../../icons/camera.tga"/></div>
<span class="app-icon-label">Camera</span>
</div>
<div id="app-settings" 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;"><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;"><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;"><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;"><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;"><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;"><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;"><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;"><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;"><img src="../../icons/weather.tga"/></div>
<span class="app-icon-label">Weather</span>
</div>
</div>
</div>
<!-- Dock -->
<div class="dock">
<div id="dock-phone" class="dock-item" style="background-color: #4CAF50;" onclick="navigateTo('dialer')"><img src="../../icons/phone.tga"/></div>
<div id="dock-messages" class="dock-item" style="background-color: #2196F3;" onclick="navigateTo('messages')"><img src="../../icons/message.tga"/></div>
<div id="dock-contacts" class="dock-item" style="background-color: #FF9800;" onclick="navigateTo('contacts')"><img src="../../icons/contacts.tga"/></div>
<div id="dock-browser" class="dock-item" style="background-color: #F44336;" onclick="navigateTo('browser')"><img src="../../icons/browser.tga"/></div>
</div>
</body>
</rml>

176
src/main/assets/apps/home/lock.rml Normal file
View File

@@ -0,0 +1,176 @@
<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>Lock Screen</title>
<style>
.lock-screen {
width: 100%;
height: 100%;
background-color: #121212;
display: flex;
flex-direction: column;
}
.lock-content {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.lock-time {
font-size: 72px;
font-weight: 200;
color: #FFFFFF;
letter-spacing: 2px;
}
.lock-date {
font-size: 18px;
color: #B3B3B3;
margin-top: 8px;
}
.lock-swipe {
position: absolute;
bottom: 100px;
left: 0;
right: 0;
text-align: center;
}
.lock-swipe-text {
font-size: 14px;
color: #666666;
}
.lock-swipe-icon {
font-size: 24px;
color: #666666;
margin-top: 8px;
}
.lock-shortcuts {
position: absolute;
bottom: 32px;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
padding: 0 32px;
}
.lock-shortcut {
width: 48px;
height: 48px;
border-radius: 24px;
background-color: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #FFFFFF;
cursor: pointer;
}
.lock-shortcut:hover {
background-color: rgba(255, 255, 255, 0.2);
}
.lock-notifications {
margin-top: 48px;
width: 100%;
padding: 0 24px;
}
.lock-notification {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 16px;
margin-bottom: 8px;
display: flex;
align-items: center;
}
.lock-notification-icon {
width: 32px;
height: 32px;
border-radius: 8px;
background-color: #2196F3;
margin-right: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: #FFFFFF;
}
.lock-notification-content {
flex: 1;
}
.lock-notification-title {
font-size: 14px;
font-weight: 500;
color: #FFFFFF;
}
.lock-notification-text {
font-size: 13px;
color: #B3B3B3;
margin-top: 2px;
}
</style>
</head>
<body class="lock-screen" onclick="goHome()">
<!-- Status Bar -->
<div class="status-bar">
<span class="status-bar-time">12:30</span>
<div class="status-bar-icons">
<span>*</span>
<span>+</span>
<span>|</span>
</div>
</div>
<!-- Main Content -->
<div class="lock-content">
<div class="lock-time">12:30</div>
<div class="lock-date">Wednesday, January 15</div>
<!-- Notifications -->
<div class="lock-notifications">
<div class="lock-notification">
<div class="lock-notification-icon">M</div>
<div class="lock-notification-content">
<div class="lock-notification-title">Messages</div>
<div class="lock-notification-text">John: Hey, are you coming to...</div>
</div>
</div>
<div class="lock-notification">
<div class="lock-notification-icon" style="background-color: #4CAF50;">P</div>
<div class="lock-notification-content">
<div class="lock-notification-title">Missed Call</div>
<div class="lock-notification-text">Mom - 10 minutes ago</div>
</div>
</div>
</div>
</div>
<!-- Swipe to unlock -->
<div class="lock-swipe">
<div class="lock-swipe-icon">^</div>
<div class="lock-swipe-text">Swipe up to unlock</div>
</div>
<!-- Shortcuts -->
<div class="lock-shortcuts">
<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>

164
src/main/assets/apps/messages/chat.rml Normal file
View File

@@ -0,0 +1,164 @@
<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="../../scripts/messages.lua"></script>
<title>Chat</title>
<style>
.chat-screen {
width: 100%;
height: 100%;
background-color: #121212;
display: flex;
flex-direction: column;
}
.chat-header {
display: flex;
align-items: center;
padding: 8px 16px;
background-color: #1E1E1E;
}
.chat-avatar {
width: 40px;
height: 40px;
border-radius: 20px;
margin-right: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: #000000;
}
.chat-header-info {
flex: 1;
}
.chat-header-name {
font-size: 16px;
font-weight: 500;
color: #FFFFFF;
}
.chat-header-status {
font-size: 12px;
color: #4CAF50;
}
.chat-messages {
flex: 1;
overflow: auto;
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
}
.message-bubble {
max-width: 75%;
padding: 10px 14px;
border-radius: 18px;
font-size: 14px;
line-height: 1.4;
}
.message-sent {
align-self: flex-end;
background-color: #BB86FC;
color: #000000;
border-bottom-right-radius: 4px;
}
.message-received {
align-self: flex-start;
background-color: #2D2D2D;
color: #FFFFFF;
border-bottom-left-radius: 4px;
}
.message-time {
font-size: 11px;
color: #666666;
margin-top: 4px;
text-align: right;
}
.message-time-received {
text-align: left;
}
.chat-input-bar {
display: flex;
align-items: center;
padding: 8px 16px;
background-color: #1E1E1E;
gap: 8px;
}
.chat-input {
flex: 1;
padding: 10px 16px;
background-color: #2D2D2D;
border-radius: 24px;
color: #FFFFFF;
font-size: 14px;
}
.chat-send-btn {
width: 44px;
height: 44px;
border-radius: 22px;
background-color: #BB86FC;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.chat-send-btn:hover {
background-color: #9C64FC;
}
.chat-send-btn img {
width: 20px;
height: 20px;
pointer-events: none;
}
</style>
</head>
<body class="chat-screen">
<!-- Chat Header -->
<div class="app-bar">
<div class="app-bar-nav btn-icon" onclick="goBack()"><img src="../../icons/back.tga" style="width: 24px; height: 24px;"/></div>
<div class="chat-avatar" id="chat-avatar" style="background-color: #4CAF50;">J</div>
<div class="chat-header-info">
<div class="chat-header-name" id="chat-name">John Wilson</div>
<div class="chat-header-status">Online</div>
</div>
<div class="btn-icon"><img src="../../icons/phone.tga" style="width: 24px; height: 24px;"/></div>
<div class="btn-icon"><img src="../../icons/more.tga" style="width: 24px; height: 24px;"/></div>
</div>
<!-- Messages -->
<div class="chat-messages" id="chat-messages">
<div class="message-bubble message-received">Hey!</div>
<div class="message-bubble message-received">What are you up to?</div>
<div class="message-bubble message-sent">Not much, just working</div>
<div class="message-bubble message-received">Cool! There's a party at Mike's tonight</div>
<div class="message-bubble message-received">Hey, are you coming to the party tonight?</div>
</div>
<!-- Input Bar -->
<div class="chat-input-bar">
<div class="btn-icon"><img src="../../icons/add.tga" style="width: 24px; height: 24px;"/></div>
<input class="chat-input" type="text" placeholder="Type a message..." id="message-input"/>
<div class="chat-send-btn">
<img src="../../icons/send.tga"/>
</div>
</div>
</body>
</rml>

117
src/main/assets/apps/messages/messages.rml Normal file
View File

@@ -0,0 +1,117 @@
<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>Messages</title>
<style>
.messages-screen {
width: 100%;
height: 100%;
background-color: #121212;
display: flex;
flex-direction: column;
}
.conversations-list {
flex: 1;
overflow: auto;
}
.conversation-item {
display: flex;
align-items: center;
padding: 12px 16px;
cursor: pointer;
}
.conversation-item:hover {
background-color: rgba(255, 255, 255, 0.05);
}
.conversation-avatar {
width: 48px;
height: 48px;
border-radius: 24px;
margin-right: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #000000;
}
.conversation-content {
flex: 1;
min-width: 0;
}
.conversation-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.conversation-name {
font-size: 16px;
font-weight: 500;
color: #FFFFFF;
}
.conversation-time {
font-size: 12px;
color: #666666;
}
.conversation-preview {
font-size: 14px;
color: #B3B3B3;
margin-top: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.conversation-unread {
width: 20px;
height: 20px;
border-radius: 10px;
background-color: #BB86FC;
color: #000000;
font-size: 11px;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
margin-left: 8px;
}
</style>
</head>
<body class="messages-screen" data-model="messages">
<!-- 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">Messages</span>
<div class="btn-icon"><img src="../../icons/search.tga" style="width: 24px; height: 24px;"/></div>
</div>
<!-- Conversations List -->
<div class="conversations-list">
<div class="conversation-item" data-for="conv : conversations" data-event-click="select_conversation(conv.id); navigateTo('chat')">
<div class="conversation-avatar" data-style-background-color="conv.color">{{ conv.name | slice(0, 1) }}</div>
<div class="conversation-content">
<div class="conversation-header">
<span class="conversation-name">{{ conv.name }}</span>
<span class="conversation-time">{{ conv.time }}</span>
</div>
<div class="conversation-preview">{{ conv.last_message }}</div>
</div>
<div class="conversation-unread" data-if="conv.unread > 0">{{ conv.unread }}</div>
</div>
</div>
<!-- FAB -->
<div class="btn-fab"><img src="../../icons/add.tga" style="width: 24px; height: 24px;"/></div>
</body>
</rml>

298
src/main/assets/apps/settings/settings.rml Normal file
View File

@@ -0,0 +1,298 @@
<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>Settings</title>
<style>
.settings-screen {
width: 100%;
height: 100%;
background-color: #121212;
display: flex;
flex-direction: column;
}
.settings-list {
flex: 1;
overflow: auto;
}
.settings-section {
margin-bottom: 8px;
}
.settings-header {
padding: 16px 16px 8px 16px;
font-size: 14px;
font-weight: 500;
color: #BB86FC;
}
.settings-item {
display: flex;
align-items: center;
padding: 16px;
cursor: pointer;
background-color: #1E1E1E;
}
.settings-item:hover {
background-color: #252525;
}
.settings-item + .settings-item {
border-top: 1px solid #333333;
}
.settings-icon {
width: 40px;
height: 40px;
margin-right: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
color: #B3B3B3;
}
.settings-content {
flex: 1;
}
.settings-title {
font-size: 16px;
color: #FFFFFF;
}
.settings-subtitle {
font-size: 13px;
color: #B3B3B3;
margin-top: 2px;
}
.settings-action {
font-size: 20px;
color: #666666;
}
.settings-toggle {
width: 44px;
height: 24px;
border-radius: 12px;
background-color: #666666;
position: relative;
cursor: pointer;
}
.settings-toggle.active {
background-color: rgba(187, 134, 252, 0.5);
}
.settings-toggle-thumb {
width: 20px;
height: 20px;
border-radius: 10px;
background-color: #B3B3B3;
position: absolute;
top: 2px;
left: 2px;
}
.settings-toggle.active .settings-toggle-thumb {
background-color: #BB86FC;
left: 22px;
}
.settings-value {
font-size: 14px;
color: #B3B3B3;
}
.user-card {
display: flex;
align-items: center;
padding: 20px 16px;
background-color: #1E1E1E;
margin-bottom: 8px;
}
.user-avatar {
width: 64px;
height: 64px;
border-radius: 32px;
background-color: #BB86FC;
margin-right: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
color: #000000;
}
.user-info {
flex: 1;
}
.user-name {
font-size: 20px;
font-weight: 500;
color: #FFFFFF;
}
.user-email {
font-size: 14px;
color: #B3B3B3;
margin-top: 4px;
}
</style>
</head>
<body class="settings-screen" data-model="settings">
<!-- 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">Settings</span>
<div class="btn-icon"><img src="../../icons/search.tga" style="width: 24px; height: 24px;"/></div>
</div>
<!-- Settings List -->
<div class="settings-list">
<!-- User Card -->
<div class="user-card">
<div class="user-avatar">U</div>
<div class="user-info">
<div class="user-name">{{ user_name }}</div>
<div class="user-email">{{ user_email }}</div>
</div>
<span class="settings-action">></span>
</div>
<!-- Network Section -->
<div class="settings-section">
<div class="settings-header">Network</div>
<div class="settings-item">
<div class="settings-icon">W</div>
<div class="settings-content">
<div class="settings-title">Wi-Fi</div>
<div class="settings-subtitle" data-if="wifi">Connected to {{ wifi_network }}</div>
<div class="settings-subtitle" data-if="!wifi">Off</div>
</div>
<div class="settings-toggle" data-class-active="wifi" data-event-click="wifi = !wifi">
<div class="settings-toggle-thumb"></div>
</div>
</div>
<div class="settings-item">
<div class="settings-icon">B</div>
<div class="settings-content">
<div class="settings-title">Bluetooth</div>
<div class="settings-subtitle" data-if="bluetooth">On</div>
<div class="settings-subtitle" data-if="!bluetooth">Off</div>
</div>
<div class="settings-toggle" data-class-active="bluetooth" data-event-click="bluetooth = !bluetooth">
<div class="settings-toggle-thumb"></div>
</div>
</div>
<div class="settings-item">
<div class="settings-icon">A</div>
<div class="settings-content">
<div class="settings-title">Airplane Mode</div>
</div>
<div class="settings-toggle" data-class-active="airplane_mode" data-event-click="airplane_mode = !airplane_mode">
<div class="settings-toggle-thumb"></div>
</div>
</div>
</div>
<!-- Device Section -->
<div class="settings-section">
<div class="settings-header">Device</div>
<div class="settings-item">
<div class="settings-icon">D</div>
<div class="settings-content">
<div class="settings-title">Display</div>
<div class="settings-subtitle">Brightness, wallpaper, sleep</div>
</div>
<span class="settings-action">></span>
</div>
<div class="settings-item">
<div class="settings-icon">S</div>
<div class="settings-content">
<div class="settings-title">Sound</div>
<div class="settings-subtitle">Volume, ringtone, vibration</div>
</div>
<span class="settings-action">></span>
</div>
<div class="settings-item">
<div class="settings-icon">N</div>
<div class="settings-content">
<div class="settings-title">Notifications</div>
<div class="settings-subtitle">App notifications, Do not disturb</div>
</div>
<span class="settings-action">></span>
</div>
<div class="settings-item">
<div class="settings-icon">B</div>
<div class="settings-content">
<div class="settings-title">Battery</div>
<div class="settings-subtitle">{{ battery_percent }}% - {{ battery_remaining }}</div>
</div>
<span class="settings-action">></span>
</div>
<div class="settings-item">
<div class="settings-icon">S</div>
<div class="settings-content">
<div class="settings-title">Storage</div>
<div class="settings-subtitle">{{ storage_used }}</div>
</div>
<span class="settings-action">></span>
</div>
</div>
<!-- Privacy Section -->
<div class="settings-section">
<div class="settings-header">Privacy &amp; Security</div>
<div class="settings-item">
<div class="settings-icon">L</div>
<div class="settings-content">
<div class="settings-title">Lock Screen</div>
<div class="settings-subtitle">PIN, pattern, fingerprint</div>
</div>
<span class="settings-action">></span>
</div>
<div class="settings-item">
<div class="settings-icon">P</div>
<div class="settings-content">
<div class="settings-title">Privacy</div>
<div class="settings-subtitle">Permissions, account activity</div>
</div>
<span class="settings-action">></span>
</div>
<div class="settings-item">
<div class="settings-icon">L</div>
<div class="settings-content">
<div class="settings-title">Location</div>
<div class="settings-subtitle" data-if="location">On - High accuracy</div>
<div class="settings-subtitle" data-if="!location">Off</div>
</div>
<div class="settings-toggle" data-class-active="location" data-event-click="location = !location">
<div class="settings-toggle-thumb"></div>
</div>
</div>
</div>
<!-- About Section -->
<div class="settings-section">
<div class="settings-header">About</div>
<div class="settings-item">
<div class="settings-icon">I</div>
<div class="settings-content">
<div class="settings-title">About Phone</div>
<div class="settings-subtitle">Model, software version</div>
</div>
<span class="settings-action">></span>
</div>
</div>
</div>
</body>
</rml>