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

basic ui elements

Browse Source
This commit is contained in:
omigamedev
2026-01-15 23:52:09 +01:00
parent b56f667a3a
commit ebf80052f0
13 changed files with 2655 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
assets/demo.rml
View File

@@ -1,39 +1,119 @@
<rml> <rml>
<head> <head>
<link type="text/rcss" href="html.rcss"/> <link type="text/rcss" href="ui/theme.rcss"/>
<link type="text/rcss" href="phone.rcss"/> <link type="text/rcss" href="ui/components.rcss"/>
<script src="demo.lua"></script> <script src="scripts/navigation.lua"></script>
<title>Fullscreen Mobile UI</title> <script src="scripts/phone.lua"></script>
</head> <title>Virtual Smartphone - Home</title>
<body> <style>
<div id="status-bar"> .home-screen {
<span class="time">22:47</span> width: 100%;
<div class="status-icons"> height: 100%;
<span class="icon">📶</span> background-color: #121212;
<span class="icon">🔋</span> display: flex;
<span class="icon">📶</span> flex-direction: column;
<span class="icon">🔋</span> }
<span class="icon">📶</span>
<span class="icon">🔋</span> .home-content {
</div> flex: 1;
padding-bottom: 80px;
}
</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">
<span>*</span>
<span>+</span>
<span>|</span>
</div>
</div> </div>
<div id="content"> <!-- App Grid -->
<div class="header-section"> <div class="home-content">
<h1>Hello omar 3 hello! and hello LEO 2 Hello!</h1> <div class="app-grid">
</div> <!-- Row 1 -->
<div class="button-container"> <div class="app-icon">
<button id="main-button" onclick="onButtonClick(event)">Click Me!</button> <div class="app-icon-image" style="background-color: #4CAF50;">P</div>
</div> <span class="app-icon-label">Phone</span>
</div>
<div class="app-icon">
<div class="app-icon-image" style="background-color: #2196F3;">M</div>
<span class="app-icon-label">Messages</span>
</div>
<div class="app-icon">
<div class="app-icon-image" style="background-color: #FF9800;">C</div>
<span class="app-icon-label">Contacts</span>
</div>
<div class="app-icon">
<div class="app-icon-image" style="background-color: #F44336;">B</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>
<span class="app-icon-label">Gallery</span>
</div>
<div class="app-icon">
<div class="app-icon-image" style="background-color: #00BCD4;">C</div>
<span class="app-icon-label">Camera</span>
</div>
<div class="app-icon">
<div class="app-icon-image" style="background-color: #607D8B;">S</div>
<span class="app-icon-label">Settings</span>
</div>
<div class="app-icon">
<div class="app-icon-image" style="background-color: #E91E63;">M</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>
<span class="app-icon-label">Calendar</span>
</div>
<div class="app-icon">
<div class="app-icon-image" style="background-color: #009688;">C</div>
<span class="app-icon-label">Clock</span>
</div>
<div class="app-icon">
<div class="app-icon-image" style="background-color: #795548;">N</div>
<span class="app-icon-label">Notes</span>
</div>
<div class="app-icon">
<div class="app-icon-image" style="background-color: #FF5722;">M</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>
<span class="app-icon-label">Store</span>
</div>
<div class="app-icon">
<div class="app-icon-image" style="background-color: #CDDC39;">F</div>
<span class="app-icon-label">Files</span>
</div>
<div class="app-icon">
<div class="app-icon-image" style="background-color: #FFC107;">C</div>
<span class="app-icon-label">Calculator</span>
</div>
<div class="app-icon">
<div class="app-icon-image" style="background-color: #673AB7;">W</div>
<span class="app-icon-label">Weather</span>
</div>
</div>
</div> </div>
<div id="nav-bar"> <!-- Dock -->
<div class="nav-item">Home</div> <div class="dock">
<div class="nav-item">Apps</div> <div class="dock-item" style="background-color: #4CAF50;">P</div>
<div class="nav-item">Settings</div> <div class="dock-item" style="background-color: #2196F3;">M</div>
<div class="nav-item">Home</div> <div class="dock-item" style="background-color: #FF9800;">C</div>
<div class="nav-item">Apps</div> <div class="dock-item" style="background-color: #F44336;">B</div>
<div class="nav-item">Settings</div>
</div> </div>
</body> </body>
</rml> </rml>

232
assets/screens/browser.rml Normal file
View File

@@ -0,0 +1,232 @@
<rml>
<head>
<link type="text/rcss" href="../ui/theme.rcss"/>
<link type="text/rcss" href="../ui/components.rcss"/>
<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;
}
.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;
text-decoration: underline;
}
.browser-search-results {
padding: 16px;
}
.browser-search-item {
margin-bottom: 24px;
}
.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">
<!-- 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="browser-nav-btn" onclick="navigateTo('home')">←</div>
<div class="browser-nav-btn disabled">→</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>
<!-- Browser Content -->
<div class="browser-content">
<div class="browser-page">
<div class="browser-page-title">Example Domain</div>
<div class="browser-page-text">
This domain is for use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission.
</div>
<div class="browser-page-text">
<span class="browser-page-link">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">
<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">
<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="navigateTo('home')">
<span class="browser-tab-icon">H</span>
<span class="browser-tab-label">Home</span>
</div>
<div class="browser-tab-btn">
<span class="browser-tabs-indicator">3</span>
<span class="browser-tab-label">Tabs</span>
</div>
<div class="browser-tab-btn">
<span class="browser-tab-icon">+</span>
<span class="browser-tab-label">New Tab</span>
</div>
<div class="browser-tab-btn">
<span class="browser-tab-icon">:</span>
<span class="browser-tab-label">Menu</span>
</div>
</div>
</body>
</rml>

197
assets/screens/contacts.rml Normal file
View File

@@ -0,0 +1,197 @@
<rml>
<head>
<link type="text/rcss" href="../ui/theme.rcss"/>
<link type="text/rcss" href="../ui/components.rcss"/>
<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;
}
</style>
</head>
<body class="contacts-screen">
<!-- App Bar -->
<div class="app-bar">
<div class="btn-icon" onclick="navigateTo('home')">←</div>
<span class="app-bar-title">Contacts</span>
<div class="btn-icon">+</div>
</div>
<!-- Search Bar -->
<div class="search-bar">
<span class="search-icon">Q</span>
<input class="search-input" type="text" placeholder="Search contacts"/>
</div>
<!-- Contacts List -->
<div class="contacts-list">
<!-- A -->
<div class="contact-letter">A</div>
<div class="contact-item">
<div class="contact-avatar" style="background-color: #E91E63;">A</div>
<div class="contact-info">
<div class="contact-name">Alice Johnson</div>
<div class="contact-phone">+1 (555) 123-4567</div>
</div>
</div>
<div class="contact-item">
<div class="contact-avatar" style="background-color: #9C27B0;">A</div>
<div class="contact-info">
<div class="contact-name">Andrew Smith</div>
<div class="contact-phone">+1 (555) 234-5678</div>
</div>
</div>
<!-- B -->
<div class="contact-letter">B</div>
<div class="contact-item">
<div class="contact-avatar" style="background-color: #2196F3;">B</div>
<div class="contact-info">
<div class="contact-name">Bob Williams</div>
<div class="contact-phone">+1 (555) 345-6789</div>
</div>
</div>
<div class="contact-item">
<div class="contact-avatar" style="background-color: #00BCD4;">B</div>
<div class="contact-info">
<div class="contact-name">Brian Davis</div>
<div class="contact-phone">+1 (555) 456-7890</div>
</div>
</div>
<!-- C -->
<div class="contact-letter">C</div>
<div class="contact-item">
<div class="contact-avatar" style="background-color: #4CAF50;">C</div>
<div class="contact-info">
<div class="contact-name">Carol Martinez</div>
<div class="contact-phone">+1 (555) 567-8901</div>
</div>
</div>
<!-- D -->
<div class="contact-letter">D</div>
<div class="contact-item">
<div class="contact-avatar" style="background-color: #FF9800;">D</div>
<div class="contact-info">
<div class="contact-name">David Lee</div>
<div class="contact-phone">+1 (555) 678-9012</div>
</div>
</div>
<!-- J -->
<div class="contact-letter">J</div>
<div class="contact-item">
<div class="contact-avatar" style="background-color: #F44336;">J</div>
<div class="contact-info">
<div class="contact-name">John Wilson</div>
<div class="contact-phone">+1 (555) 789-0123</div>
</div>
</div>
<!-- M -->
<div class="contact-letter">M</div>
<div class="contact-item">
<div class="contact-avatar" style="background-color: #673AB7;">M</div>
<div class="contact-info">
<div class="contact-name">Mom</div>
<div class="contact-phone">+1 (555) 890-1234</div>
</div>
</div>
<div class="contact-item">
<div class="contact-avatar" style="background-color: #3F51B5;">M</div>
<div class="contact-info">
<div class="contact-name">Mike Brown</div>
<div class="contact-phone">+1 (555) 901-2345</div>
</div>
</div>
<!-- S -->
<div class="contact-letter">S</div>
<div class="contact-item">
<div class="contact-avatar" style="background-color: #009688;">S</div>
<div class="contact-info">
<div class="contact-name">Sarah Taylor</div>
<div class="contact-phone">+1 (555) 012-3456</div>
</div>
</div>
</div>
<!-- FAB -->
<div class="btn-fab">+</div>
<!-- Bottom Navigation -->
<div class="bottom-nav">
<div class="bottom-nav-item" onclick="navigateTo('dialer')">
<span class="bottom-nav-icon">*</span>
<span class="bottom-nav-label">Keypad</span>
</div>
<div class="bottom-nav-item">
<span class="bottom-nav-icon">O</span>
<span class="bottom-nav-label">Recent</span>
</div>
<div class="bottom-nav-item active">
<span class="bottom-nav-icon">@</span>
<span class="bottom-nav-label">Contacts</span>
</div>
</div>
</body>
</rml>

196
assets/screens/dialer.rml Normal file
View File

@@ -0,0 +1,196 @@
<rml>
<head>
<link type="text/rcss" href="../ui/theme.rcss"/>
<link type="text/rcss" href="../ui/components.rcss"/>
<script src="../scripts/phone.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">
<!-- App Bar -->
<div class="app-bar">
<div class="btn-icon" onclick="navigateTo('home')">←</div>
<span class="app-bar-title">Phone</span>
</div>
<!-- Tabs -->
<div class="dialer-tabs">
<div class="dialer-tab" id="tab-keypad">Keypad</div>
<div class="dialer-tab active" id="tab-recent">Recent</div>
<div class="dialer-tab" id="tab-contacts">Contacts</div>
</div>
<!-- Dial Display -->
<div class="dial-display" id="dial-display"></div>
<!-- Dial Pad -->
<div class="dial-pad">
<div class="dial-key" onclick="dialPress('1')">
<span class="dial-key-number">1</span>
<span class="dial-key-letters"></span>
</div>
<div class="dial-key" onclick="dialPress('2')">
<span class="dial-key-number">2</span>
<span class="dial-key-letters">ABC</span>
</div>
<div class="dial-key" onclick="dialPress('3')">
<span class="dial-key-number">3</span>
<span class="dial-key-letters">DEF</span>
</div>
<div class="dial-key" onclick="dialPress('4')">
<span class="dial-key-number">4</span>
<span class="dial-key-letters">GHI</span>
</div>
<div class="dial-key" onclick="dialPress('5')">
<span class="dial-key-number">5</span>
<span class="dial-key-letters">JKL</span>
</div>
<div class="dial-key" onclick="dialPress('6')">
<span class="dial-key-number">6</span>
<span class="dial-key-letters">MNO</span>
</div>
<div class="dial-key" onclick="dialPress('7')">
<span class="dial-key-number">7</span>
<span class="dial-key-letters">PQRS</span>
</div>
<div class="dial-key" onclick="dialPress('8')">
<span class="dial-key-number">8</span>
<span class="dial-key-letters">TUV</span>
</div>
<div class="dial-key" onclick="dialPress('9')">
<span class="dial-key-number">9</span>
<span class="dial-key-letters">WXYZ</span>
</div>
<div class="dial-key" onclick="dialPress('*')">
<span class="dial-key-number">*</span>
<span class="dial-key-letters"></span>
</div>
<div class="dial-key" onclick="dialPress('0')">
<span class="dial-key-number">0</span>
<span class="dial-key-letters">+</span>
</div>
<div class="dial-key" onclick="dialPress('#')">
<span class="dial-key-number">#</span>
<span class="dial-key-letters"></span>
</div>
</div>
<!-- Call Button -->
<div class="dial-actions">
<div class="dial-call-btn" onclick="makeCall()">C</div>
</div>
<!-- Bottom Navigation -->
<div class="bottom-nav">
<div class="bottom-nav-item active">
<span class="bottom-nav-icon">*</span>
<span class="bottom-nav-label">Keypad</span>
</div>
<div class="bottom-nav-item">
<span class="bottom-nav-icon">O</span>
<span class="bottom-nav-label">Recent</span>
</div>
<div class="bottom-nav-item" onclick="navigateTo('contacts')">
<span class="bottom-nav-icon">@</span>
<span class="bottom-nav-label">Contacts</span>
</div>
</div>
</body>
</rml>

126
assets/screens/home.rml Normal file
View File

@@ -0,0 +1,126 @@
<rml>
<head>
<link type="text/rcss" href="../ui/theme.rcss"/>
<link type="text/rcss" href="../ui/components.rcss"/>
<title>Home</title>
<style>
.home-screen {
width: 100%;
height: 100%;
background-color: #121212;
display: flex;
flex-direction: column;
}
.home-content {
flex: 1;
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%);
}
</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">
<span>*</span>
<span>+</span>
<span>|</span>
</div>
</div>
<!-- App Grid -->
<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>
<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>
<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>
<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>
<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>
<span class="app-icon-label">Gallery</span>
</div>
<div class="app-icon">
<div class="app-icon-image" style="background-color: #00BCD4;">C</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>
<span class="app-icon-label">Settings</span>
</div>
<div class="app-icon">
<div class="app-icon-image" style="background-color: #E91E63;">M</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>
<span class="app-icon-label">Calendar</span>
</div>
<div class="app-icon">
<div class="app-icon-image" style="background-color: #009688;">C</div>
<span class="app-icon-label">Clock</span>
</div>
<div class="app-icon">
<div class="app-icon-image" style="background-color: #795548;">N</div>
<span class="app-icon-label">Notes</span>
</div>
<div class="app-icon">
<div class="app-icon-image" style="background-color: #FF5722;">M</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>
<span class="app-icon-label">Store</span>
</div>
<div class="app-icon">
<div class="app-icon-image" style="background-color: #CDDC39;">F</div>
<span class="app-icon-label">Files</span>
</div>
<div class="app-icon">
<div class="app-icon-image" style="background-color: #FFC107;">C</div>
<span class="app-icon-label">Calculator</span>
</div>
<div class="app-icon">
<div class="app-icon-image" style="background-color: #673AB7;">W</div>
<span class="app-icon-label">Weather</span>
</div>
</div>
</div>
<!-- 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>
</body>
</rml>

174
assets/screens/lock.rml Normal file
View File

@@ -0,0 +1,174 @@
<rml>
<head>
<link type="text/rcss" href="../ui/theme.rcss"/>
<link type="text/rcss" href="../ui/components.rcss"/>
<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="navigateTo('home')">
<!-- 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')">P</div>
<div class="lock-shortcut">C</div>
</div>
</body>
</rml>

222
assets/screens/messages.rml Normal file
View File

@@ -0,0 +1,222 @@
<rml>
<head>
<link type="text/rcss" href="../ui/theme.rcss"/>
<link type="text/rcss" href="../ui/components.rcss"/>
<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;
}
/* Chat View Styles */
.chat-header {
display: flex;
align-items: center;
padding: 8px 0;
}
.chat-header-avatar {
width: 36px;
height: 36px;
border-radius: 18px;
background-color: #BB86FC;
margin-right: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
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: #B3B3B3;
}
.chat-messages {
flex: 1;
overflow: auto;
padding: 16px;
}
</style>
</head>
<body class="messages-screen">
<!-- App Bar -->
<div class="app-bar">
<div class="btn-icon" onclick="navigateTo('home')">←</div>
<span class="app-bar-title">Messages</span>
<div class="btn-icon">Q</div>
</div>
<!-- Conversations List -->
<div class="conversations-list">
<div class="conversation-item">
<div class="conversation-avatar" style="background-color: #4CAF50;">J</div>
<div class="conversation-content">
<div class="conversation-header">
<span class="conversation-name">John Wilson</span>
<span class="conversation-time">2:30 PM</span>
</div>
<div class="conversation-preview">Hey, are you coming to the party tonight?</div>
</div>
<div class="conversation-unread">2</div>
</div>
<div class="conversation-item">
<div class="conversation-avatar" style="background-color: #673AB7;">M</div>
<div class="conversation-content">
<div class="conversation-header">
<span class="conversation-name">Mom</span>
<span class="conversation-time">1:15 PM</span>
</div>
<div class="conversation-preview">Don't forget to call your grandmother!</div>
</div>
</div>
<div class="conversation-item">
<div class="conversation-avatar" style="background-color: #E91E63;">A</div>
<div class="conversation-content">
<div class="conversation-header">
<span class="conversation-name">Alice Johnson</span>
<span class="conversation-time">Yesterday</span>
</div>
<div class="conversation-preview">Thanks for the help with the project!</div>
</div>
</div>
<div class="conversation-item">
<div class="conversation-avatar" style="background-color: #2196F3;">B</div>
<div class="conversation-content">
<div class="conversation-header">
<span class="conversation-name">Bob Williams</span>
<span class="conversation-time">Yesterday</span>
</div>
<div class="conversation-preview">Did you see the game last night?</div>
</div>
</div>
<div class="conversation-item">
<div class="conversation-avatar" style="background-color: #FF9800;">W</div>
<div class="conversation-content">
<div class="conversation-header">
<span class="conversation-name">Work Group</span>
<span class="conversation-time">Mon</span>
</div>
<div class="conversation-preview">Sarah: Meeting moved to 3pm</div>
</div>
</div>
<div class="conversation-item">
<div class="conversation-avatar" style="background-color: #009688;">S</div>
<div class="conversation-content">
<div class="conversation-header">
<span class="conversation-name">Sarah Taylor</span>
<span class="conversation-time">Sun</span>
</div>
<div class="conversation-preview">See you at the coffee shop!</div>
</div>
</div>
<div class="conversation-item">
<div class="conversation-avatar" style="background-color: #F44336;">D</div>
<div class="conversation-content">
<div class="conversation-header">
<span class="conversation-name">David Lee</span>
<span class="conversation-time">Sat</span>
</div>
<div class="conversation-preview">Great talking to you!</div>
</div>
</div>
</div>
<!-- FAB -->
<div class="btn-fab">+</div>
</body>
</rml>

292
assets/screens/settings.rml Normal file
View File

@@ -0,0 +1,292 @@
<rml>
<head>
<link type="text/rcss" href="../ui/theme.rcss"/>
<link type="text/rcss" href="../ui/components.rcss"/>
<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;
}
.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">
<!-- App Bar -->
<div class="app-bar">
<div class="btn-icon" onclick="navigateTo('home')">←</div>
<span class="app-bar-title">Settings</span>
<div class="btn-icon">Q</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@example.com</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">Connected to Home_Network</div>
</div>
<div class="settings-toggle active">
<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">Off</div>
</div>
<div class="settings-toggle">
<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">
<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">85% - About 12h 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">45.2 GB used of 128 GB</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">On - High accuracy</div>
</div>
<div class="settings-toggle active">
<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>

54
assets/scripts/navigation.lua Normal file
View File

@@ -0,0 +1,54 @@
-- Navigation System for Virtual Smartphone
-- Handles screen transitions and state management
-- Screen registry
local screens = {
home = "screens/home.rml",
lock = "screens/lock.rml",
dialer = "screens/dialer.rml",
contacts = "screens/contacts.rml",
messages = "screens/messages.rml",
settings = "screens/settings.rml",
browser = "screens/browser.rml"
}
-- Current screen state
local current_screen = "home"
local screen_history = {}
-- Navigate to a screen
function navigateTo(screen_name)
if screens[screen_name] then
-- Add current screen to history
table.insert(screen_history, current_screen)
current_screen = screen_name
-- Load the new document
-- Note: In RmlUi, we'd typically use document loading
print("Navigating to: " .. screen_name)
else
print("Unknown screen: " .. screen_name)
end
end
-- Go back to previous screen
function goBack()
if #screen_history > 0 then
current_screen = table.remove(screen_history)
print("Going back to: " .. current_screen)
else
print("No history to go back to")
end
end
-- Get current screen name
function getCurrentScreen()
return current_screen
end
-- Clear navigation history
function clearHistory()
screen_history = {}
end
print("Navigation system initialized")

80
assets/scripts/phone.lua Normal file
View File

@@ -0,0 +1,80 @@
-- Phone/Dialer functionality for Virtual Smartphone
-- Dial pad state
local dial_number = ""
local max_digits = 15
-- Add a digit to the dial display
function dialPress(digit)
if #dial_number < max_digits then
dial_number = dial_number .. digit
updateDialDisplay()
print("Dialed: " .. digit .. " | Number: " .. dial_number)
end
end
-- Clear the last digit
function dialBackspace()
if #dial_number > 0 then
dial_number = dial_number:sub(1, -2)
updateDialDisplay()
print("Backspace | Number: " .. dial_number)
end
end
-- Clear all digits
function dialClear()
dial_number = ""
updateDialDisplay()
print("Cleared dial pad")
end
-- Update the dial display element
function updateDialDisplay()
local display = document:GetElementById("dial-display")
if display then
-- Format number with dashes for readability
local formatted = formatPhoneNumber(dial_number)
display.inner_rml = formatted
end
end
-- Format phone number for display
function formatPhoneNumber(number)
local len = #number
if len == 0 then
return ""
elseif len <= 3 then
return number
elseif len <= 6 then
return number:sub(1, 3) .. "-" .. number:sub(4)
elseif len <= 10 then
return "(" .. number:sub(1, 3) .. ") " .. number:sub(4, 6) .. "-" .. number:sub(7)
else
return "+1 (" .. number:sub(1, 3) .. ") " .. number:sub(4, 6) .. "-" .. number:sub(7, 10)
end
end
-- Make a call (simulated)
function makeCall()
if #dial_number > 0 then
print("Calling: " .. dial_number)
-- In a real app, this would initiate a call
-- For now, just show feedback
else
print("No number to call")
end
end
-- End a call (simulated)
function endCall()
print("Call ended")
dialClear()
end
-- Get the current dial number
function getDialNumber()
return dial_number
end
print("Phone system initialized")

704
assets/ui/components.rcss Normal file
View File

@@ -0,0 +1,704 @@
/* ==============================================
Components: Material UI Components
============================================== */
/* ============== Status Bar ============== */
.status-bar {
height: 24px;
padding: 0 12px;
background-color: transparent;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
color: #FFFFFF;
}
.status-bar-time {
font-weight: 500;
}
.status-bar-icons {
display: flex;
gap: 4px;
}
/* ============== App Bar ============== */
.app-bar {
height: 56px;
padding: 0 16px;
background-color: #1E1E1E;
display: flex;
align-items: center;
}
.app-bar-nav {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 8px;
}
.app-bar-title {
font-size: 20px;
font-weight: 500;
flex: 1;
color: #FFFFFF;
}
.app-bar-actions {
display: flex;
}
/* ============== Buttons ============== */
.btn {
padding: 12px 24px;
font-size: 14px;
font-weight: 500;
font-family: LatoLatin;
text-align: center;
border-radius: 4px;
cursor: pointer;
}
.btn-primary {
background-color: #BB86FC;
color: #000000;
}
.btn-primary:hover {
background-color: #D4A5FF;
}
.btn-primary:active {
background-color: #9A67EA;
}
.btn-secondary {
background-color: #03DAC6;
color: #000000;
}
.btn-secondary:hover {
background-color: #4AEADB;
}
.btn-outlined {
background-color: transparent;
border: 1px solid #BB86FC;
color: #BB86FC;
}
.btn-outlined:hover {
background-color: rgba(187, 134, 252, 0.1);
}
.btn-text {
background-color: transparent;
color: #BB86FC;
padding: 8px 16px;
}
.btn-text:hover {
background-color: rgba(187, 134, 252, 0.1);
}
/* Icon Button */
.btn-icon {
width: 48px;
height: 48px;
padding: 0;
border-radius: 24px;
background-color: transparent;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.btn-icon:hover {
background-color: rgba(255, 255, 255, 0.1);
}
/* Floating Action Button */
.btn-fab {
width: 56px;
height: 56px;
border-radius: 28px;
background-color: #BB86FC;
color: #000000;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
position: absolute;
bottom: 72px;
right: 16px;
}
.btn-fab:hover {
background-color: #D4A5FF;
}
/* ============== Input Fields ============== */
.input-container {
margin-bottom: 16px;
}
.input-label {
font-size: 12px;
color: #B3B3B3;
margin-bottom: 4px;
}
.input-field {
width: 100%;
padding: 12px 0;
font-size: 16px;
font-family: LatoLatin;
color: #FFFFFF;
background-color: transparent;
border: none;
border-bottom: 1px solid #333333;
}
.input-field:focus {
border-bottom-color: #BB86FC;
}
.input-field:hover {
border-bottom-color: #666666;
}
/* Search Input */
.search-bar {
display: flex;
align-items: center;
padding: 8px 16px;
background-color: #2D2D2D;
border-radius: 24px;
margin: 8px 16px;
}
.search-icon {
font-size: 20px;
color: #B3B3B3;
margin-right: 12px;
}
.search-input {
flex: 1;
background-color: transparent;
border: none;
font-size: 16px;
color: #FFFFFF;
}
/* ============== Cards ============== */
.card {
background-color: #1E1E1E;
border-radius: 8px;
padding: 16px;
margin: 8px;
}
.card-elevated {
background-color: #2D2D2D;
}
.card-header {
font-size: 20px;
font-weight: 500;
margin-bottom: 8px;
color: #FFFFFF;
}
.card-subtitle {
font-size: 14px;
color: #B3B3B3;
margin-bottom: 12px;
}
.card-content {
font-size: 14px;
color: #B3B3B3;
}
.card-actions {
display: flex;
justify-content: flex-end;
margin-top: 16px;
gap: 8px;
}
/* ============== Lists ============== */
.list {
display: flex;
flex-direction: column;
}
.list-item {
display: flex;
align-items: center;
padding: 12px 16px;
min-height: 48px;
cursor: pointer;
}
.list-item:hover {
background-color: rgba(255, 255, 255, 0.05);
}
.list-item:active {
background-color: rgba(255, 255, 255, 0.1);
}
.list-item-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;
}
.list-item-icon {
width: 40px;
height: 40px;
margin-right: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: #B3B3B3;
}
.list-item-content {
flex: 1;
display: flex;
flex-direction: column;
}
.list-item-title {
font-size: 16px;
color: #FFFFFF;
}
.list-item-subtitle {
font-size: 14px;
color: #B3B3B3;
margin-top: 2px;
}
.list-item-action {
font-size: 24px;
color: #666666;
}
.list-divider {
height: 1px;
background-color: #333333;
margin-left: 72px;
}
.list-header {
padding: 16px 16px 8px 16px;
font-size: 14px;
font-weight: 500;
color: #BB86FC;
}
/* ============== Bottom Navigation ============== */
.bottom-nav {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 56px;
background-color: #1E1E1E;
display: flex;
border-top: 1px solid #333333;
}
.bottom-nav-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
color: #666666;
}
.bottom-nav-item:hover {
color: #B3B3B3;
}
.bottom-nav-item.active {
color: #BB86FC;
}
.bottom-nav-icon {
font-size: 24px;
margin-bottom: 4px;
}
.bottom-nav-label {
font-size: 12px;
}
/* ============== Dialogs/Modals ============== */
.modal-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
}
.modal-dialog {
background-color: #2D2D2D;
border-radius: 8px;
padding: 24px;
width: 280px;
max-width: 90%;
}
.modal-title {
font-size: 20px;
font-weight: 500;
color: #FFFFFF;
margin-bottom: 16px;
}
.modal-content {
font-size: 14px;
color: #B3B3B3;
margin-bottom: 24px;
}
.modal-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
}
/* ============== Toast/Snackbar ============== */
.toast {
position: absolute;
bottom: 72px;
left: 16px;
right: 16px;
background-color: #323232;
color: #FFFFFF;
padding: 14px 16px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
}
.toast-action {
color: #BB86FC;
font-weight: 500;
margin-left: 16px;
}
/* ============== Toggle/Switch ============== */
.toggle {
width: 36px;
height: 20px;
border-radius: 10px;
background-color: #666666;
position: relative;
cursor: pointer;
}
.toggle.active {
background-color: rgba(187, 134, 252, 0.5);
}
.toggle-thumb {
width: 16px;
height: 16px;
border-radius: 8px;
background-color: #B3B3B3;
position: absolute;
top: 2px;
left: 2px;
}
.toggle.active .toggle-thumb {
background-color: #BB86FC;
left: 18px;
}
/* ============== Chips/Tags ============== */
.chip {
display: inline-flex;
align-items: center;
padding: 6px 12px;
background-color: #2D2D2D;
border-radius: 16px;
font-size: 14px;
color: #FFFFFF;
margin: 4px;
}
.chip-icon {
margin-right: 8px;
}
.chip-delete {
margin-left: 8px;
font-size: 18px;
color: #B3B3B3;
}
/* ============== Dividers ============== */
.divider {
height: 1px;
background-color: #333333;
}
.divider-inset {
margin-left: 72px;
}
/* ============== App Grid (Home Screen) ============== */
.app-grid {
display: flex;
flex-wrap: wrap;
padding: 16px;
}
.app-icon {
width: 25%;
display: flex;
flex-direction: column;
align-items: center;
padding: 12px 0;
cursor: pointer;
}
.app-icon:hover {
background-color: rgba(255, 255, 255, 0.05);
border-radius: 8px;
}
.app-icon-image {
width: 48px;
height: 48px;
border-radius: 12px;
background-color: #BB86FC;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: #000000;
margin-bottom: 8px;
}
.app-icon-label {
font-size: 12px;
color: #FFFFFF;
text-align: center;
}
/* ============== Dock ============== */
.dock {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 80px;
background-color: rgba(30, 30, 30, 0.9);
display: flex;
justify-content: space-around;
align-items: center;
padding: 0 32px;
}
.dock-item {
width: 56px;
height: 56px;
border-radius: 14px;
background-color: #BB86FC;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
color: #000000;
cursor: pointer;
}
.dock-item:hover {
transform: scale(1.1);
}
/* ============== Dial Pad ============== */
.dial-pad {
display: flex;
flex-wrap: wrap;
padding: 16px;
}
.dial-key {
width: 33.33%;
height: 72px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 36px;
}
.dial-key:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.dial-key:active {
background-color: rgba(255, 255, 255, 0.2);
}
.dial-key-number {
font-size: 32px;
font-weight: 300;
color: #FFFFFF;
}
.dial-key-letters {
font-size: 10px;
color: #B3B3B3;
letter-spacing: 2px;
margin-top: 2px;
}
.dial-display {
font-size: 36px;
font-weight: 300;
color: #FFFFFF;
text-align: center;
padding: 24px 16px;
letter-spacing: 2px;
}
.dial-actions {
display: flex;
justify-content: center;
padding: 16px;
gap: 48px;
}
.dial-call-btn {
width: 64px;
height: 64px;
border-radius: 32px;
background-color: #4CAF50;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
color: #FFFFFF;
cursor: pointer;
}
.dial-call-btn:hover {
background-color: #66BB6A;
}
/* ============== Chat Bubbles ============== */
.chat-container {
display: flex;
flex-direction: column;
padding: 16px;
gap: 8px;
}
.chat-bubble {
max-width: 75%;
padding: 10px 14px;
border-radius: 18px;
font-size: 14px;
}
.chat-bubble-sent {
align-self: flex-end;
background-color: #BB86FC;
color: #000000;
border-bottom-right-radius: 4px;
}
.chat-bubble-received {
align-self: flex-start;
background-color: #2D2D2D;
color: #FFFFFF;
border-bottom-left-radius: 4px;
}
.chat-timestamp {
font-size: 11px;
color: #666666;
text-align: center;
margin: 8px 0;
}
.chat-input-container {
display: flex;
align-items: center;
padding: 8px 16px;
background-color: #1E1E1E;
border-top: 1px solid #333333;
}
.chat-input {
flex: 1;
padding: 10px 16px;
background-color: #2D2D2D;
border-radius: 24px;
border: none;
font-size: 16px;
color: #FFFFFF;
margin-right: 8px;
}
.chat-send-btn {
width: 40px;
height: 40px;
border-radius: 20px;
background-color: #BB86FC;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #000000;
cursor: pointer;
}

247
assets/ui/theme.rcss Normal file
View File

@@ -0,0 +1,247 @@
/* ==============================================
Theme: Material Dark for Virtual Smartphone
============================================== */
/* Base body styling */
body {
font-family: LatoLatin;
background-color: #121212;
color: #FFFFFF;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
/* ============== Typography ============== */
.text-h1 {
font-size: 96px;
font-weight: 300;
}
.text-h2 {
font-size: 60px;
font-weight: 300;
}
.text-h3 {
font-size: 48px;
font-weight: 400;
}
.text-h4 {
font-size: 34px;
font-weight: 400;
}
.text-h5 {
font-size: 24px;
font-weight: 400;
}
.text-h6 {
font-size: 20px;
font-weight: 500;
}
.text-body1 {
font-size: 16px;
font-weight: 400;
}
.text-body2 {
font-size: 14px;
font-weight: 400;
}
.text-caption {
font-size: 12px;
font-weight: 400;
}
.text-overline {
font-size: 10px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1.5px;
}
/* ============== Text Colors ============== */
.text-primary {
color: #FFFFFF;
}
.text-secondary {
color: #B3B3B3;
}
.text-disabled {
color: #666666;
}
.text-accent {
color: #BB86FC;
}
.text-accent-secondary {
color: #03DAC6;
}
.text-error {
color: #CF6679;
}
/* ============== Background Colors ============== */
.bg-primary {
background-color: #121212;
}
.bg-surface {
background-color: #1E1E1E;
}
.bg-surface-variant {
background-color: #2D2D2D;
}
.bg-accent {
background-color: #BB86FC;
}
.bg-accent-secondary {
background-color: #03DAC6;
}
.bg-error {
background-color: #CF6679;
}
/* ============== Spacing Utilities ============== */
.p-0 { padding: 0; }
.p-1 { padding: 4px; }
.p-2 { padding: 8px; }
.p-3 { padding: 12px; }
.p-4 { padding: 16px; }
.p-5 { padding: 24px; }
.p-6 { padding: 32px; }
.p-8 { padding: 48px; }
.m-0 { margin: 0; }
.m-1 { margin: 4px; }
.m-2 { margin: 8px; }
.m-3 { margin: 12px; }
.m-4 { margin: 16px; }
.m-5 { margin: 24px; }
.m-6 { margin: 32px; }
.m-8 { margin: 48px; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
/* ============== Layout Utilities ============== */
.flex {
display: flex;
}
.flex-row {
display: flex;
flex-direction: row;
}
.flex-col {
display: flex;
flex-direction: column;
}
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.flex-between {
display: flex;
justify-content: space-between;
}
.flex-around {
display: flex;
justify-content: space-around;
}
.flex-1 {
flex: 1;
}
.w-full {
width: 100%;
}
.h-full {
height: 100%;
}
.text-center {
text-align: center;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
/* ============== Border Utilities ============== */
.rounded {
border-radius: 4px;
}
.rounded-lg {
border-radius: 8px;
}
.rounded-xl {
border-radius: 16px;
}
.rounded-full {
border-radius: 50%;
}
.border {
border: 1px solid #333333;
}
.border-bottom {
border-bottom: 1px solid #333333;
}
/* ============== Screen Structure ============== */
.screen {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
background-color: #121212;
}
.screen-content {
flex: 1;
overflow: auto;
}

20
main.cpp
View File

@@ -181,7 +181,25 @@ int main(const int argc, const char* argv[])
return EXIT_FAILURE; return EXIT_FAILURE;
} }
const std::filesystem::path assets_path = std::filesystem::absolute(file.parent_path()); // Find the assets folder by checking for fonts
std::filesystem::path assets_path = std::filesystem::absolute(file.parent_path());
// Walk up the directory tree to find a folder containing .ttf fonts
while (!assets_path.empty() && assets_path.has_parent_path())
{
bool has_fonts = false;
for (const auto& entry : std::filesystem::directory_iterator(assets_path))
{
if (entry.path().extension() == ".ttf")
{
has_fonts = true;
break;
}
}
if (has_fonts) break;
assets_path = assets_path.parent_path();
}
load_fonts(assets_path); load_fonts(assets_path);
Rml::ElementDocument* document = context->LoadDocument(file.string()); Rml::ElementDocument* document = context->LoadDocument(file.string());