work in progress
This commit is contained in:
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 129 B |
256
src/main/assets/apps/browser/browser.rml
Normal file
256
src/main/assets/apps/browser/browser.rml
Normal 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
161
src/main/assets/apps/contacts/contact_detail.rml
Normal 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
141
src/main/assets/apps/contacts/contacts.rml
Normal 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
126
src/main/assets/apps/dialer/calling.rml
Normal 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
199
src/main/assets/apps/dialer/dialer.rml
Normal 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
135
src/main/assets/apps/home/home.rml
Normal 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
176
src/main/assets/apps/home/lock.rml
Normal 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
164
src/main/assets/apps/messages/chat.rml
Normal 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
117
src/main/assets/apps/messages/messages.rml
Normal 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
298
src/main/assets/apps/settings/settings.rml
Normal 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 & 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>
|
||||
BIN
src/main/assets/fonts/LatoLatin-Bold.ttf
LFS
Normal file
BIN
src/main/assets/fonts/LatoLatin-Bold.ttf
LFS
Normal file
Binary file not shown.
BIN
src/main/assets/fonts/LatoLatin-BoldItalic.ttf
LFS
Normal file
BIN
src/main/assets/fonts/LatoLatin-BoldItalic.ttf
LFS
Normal file
Binary file not shown.
BIN
src/main/assets/fonts/LatoLatin-Italic.ttf
LFS
Normal file
BIN
src/main/assets/fonts/LatoLatin-Italic.ttf
LFS
Normal file
Binary file not shown.
BIN
src/main/assets/fonts/LatoLatin-Regular.ttf
LFS
Normal file
BIN
src/main/assets/fonts/LatoLatin-Regular.ttf
LFS
Normal file
Binary file not shown.
BIN
src/main/assets/fonts/NotoEmoji-Regular.ttf
LFS
Normal file
BIN
src/main/assets/fonts/NotoEmoji-Regular.ttf
LFS
Normal file
Binary file not shown.
93
src/main/assets/fonts/Roboto/OFL.txt
Normal file
93
src/main/assets/fonts/Roboto/OFL.txt
Normal file
@@ -0,0 +1,93 @@
|
||||
Copyright 2011 The Roboto Project Authors (https://github.com/googlefonts/roboto-classic)
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
https://openfontlicense.org
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
118
src/main/assets/fonts/Roboto/README.txt
Normal file
118
src/main/assets/fonts/Roboto/README.txt
Normal file
@@ -0,0 +1,118 @@
|
||||
Roboto Variable Font
|
||||
====================
|
||||
|
||||
This download contains Roboto as both variable fonts and static fonts.
|
||||
|
||||
Roboto is a variable font with these axes:
|
||||
wdth
|
||||
wght
|
||||
|
||||
This means all the styles are contained in these files:
|
||||
Roboto-VariableFont_wdth,wght.ttf
|
||||
Roboto-Italic-VariableFont_wdth,wght.ttf
|
||||
|
||||
If your app fully supports variable fonts, you can now pick intermediate styles
|
||||
that aren’t available as static fonts. Not all apps support variable fonts, and
|
||||
in those cases you can use the static font files for Roboto:
|
||||
static/Roboto_Condensed-Thin.ttf
|
||||
static/Roboto_Condensed-ExtraLight.ttf
|
||||
static/Roboto_Condensed-Light.ttf
|
||||
static/Roboto_Condensed-Regular.ttf
|
||||
static/Roboto_Condensed-Medium.ttf
|
||||
static/Roboto_Condensed-SemiBold.ttf
|
||||
static/Roboto_Condensed-Bold.ttf
|
||||
static/Roboto_Condensed-ExtraBold.ttf
|
||||
static/Roboto_Condensed-Black.ttf
|
||||
static/Roboto_SemiCondensed-Thin.ttf
|
||||
static/Roboto_SemiCondensed-ExtraLight.ttf
|
||||
static/Roboto_SemiCondensed-Light.ttf
|
||||
static/Roboto_SemiCondensed-Regular.ttf
|
||||
static/Roboto_SemiCondensed-Medium.ttf
|
||||
static/Roboto_SemiCondensed-SemiBold.ttf
|
||||
static/Roboto_SemiCondensed-Bold.ttf
|
||||
static/Roboto_SemiCondensed-ExtraBold.ttf
|
||||
static/Roboto_SemiCondensed-Black.ttf
|
||||
static/Roboto-Thin.ttf
|
||||
static/Roboto-ExtraLight.ttf
|
||||
static/Roboto-Light.ttf
|
||||
static/Roboto-Regular.ttf
|
||||
static/Roboto-Medium.ttf
|
||||
static/Roboto-SemiBold.ttf
|
||||
static/Roboto-Bold.ttf
|
||||
static/Roboto-ExtraBold.ttf
|
||||
static/Roboto-Black.ttf
|
||||
static/Roboto_Condensed-ThinItalic.ttf
|
||||
static/Roboto_Condensed-ExtraLightItalic.ttf
|
||||
static/Roboto_Condensed-LightItalic.ttf
|
||||
static/Roboto_Condensed-Italic.ttf
|
||||
static/Roboto_Condensed-MediumItalic.ttf
|
||||
static/Roboto_Condensed-SemiBoldItalic.ttf
|
||||
static/Roboto_Condensed-BoldItalic.ttf
|
||||
static/Roboto_Condensed-ExtraBoldItalic.ttf
|
||||
static/Roboto_Condensed-BlackItalic.ttf
|
||||
static/Roboto_SemiCondensed-ThinItalic.ttf
|
||||
static/Roboto_SemiCondensed-ExtraLightItalic.ttf
|
||||
static/Roboto_SemiCondensed-LightItalic.ttf
|
||||
static/Roboto_SemiCondensed-Italic.ttf
|
||||
static/Roboto_SemiCondensed-MediumItalic.ttf
|
||||
static/Roboto_SemiCondensed-SemiBoldItalic.ttf
|
||||
static/Roboto_SemiCondensed-BoldItalic.ttf
|
||||
static/Roboto_SemiCondensed-ExtraBoldItalic.ttf
|
||||
static/Roboto_SemiCondensed-BlackItalic.ttf
|
||||
static/Roboto-ThinItalic.ttf
|
||||
static/Roboto-ExtraLightItalic.ttf
|
||||
static/Roboto-LightItalic.ttf
|
||||
static/Roboto-Italic.ttf
|
||||
static/Roboto-MediumItalic.ttf
|
||||
static/Roboto-SemiBoldItalic.ttf
|
||||
static/Roboto-BoldItalic.ttf
|
||||
static/Roboto-ExtraBoldItalic.ttf
|
||||
static/Roboto-BlackItalic.ttf
|
||||
|
||||
Get started
|
||||
-----------
|
||||
|
||||
1. Install the font files you want to use
|
||||
|
||||
2. Use your app's font picker to view the font family and all the
|
||||
available styles
|
||||
|
||||
Learn more about variable fonts
|
||||
-------------------------------
|
||||
|
||||
https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
|
||||
https://variablefonts.typenetwork.com
|
||||
https://medium.com/variable-fonts
|
||||
|
||||
In desktop apps
|
||||
|
||||
https://theblog.adobe.com/can-variable-fonts-illustrator-cc
|
||||
https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
|
||||
|
||||
Online
|
||||
|
||||
https://developers.google.com/fonts/docs/getting_started
|
||||
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
|
||||
https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
|
||||
|
||||
Installing fonts
|
||||
|
||||
MacOS: https://support.apple.com/en-us/HT201749
|
||||
Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
|
||||
Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
|
||||
|
||||
Android Apps
|
||||
|
||||
https://developers.google.com/fonts/docs/android
|
||||
https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
|
||||
|
||||
License
|
||||
-------
|
||||
Please read the full license text (OFL.txt) to understand the permissions,
|
||||
restrictions and requirements for usage, redistribution, and modification.
|
||||
|
||||
You can use them in your products & projects – print or digital,
|
||||
commercial or otherwise.
|
||||
|
||||
This isn't legal advice, please consider consulting a lawyer and see the full
|
||||
license for all details.
|
||||
BIN
src/main/assets/fonts/Roboto/Roboto-Italic-VariableFont_wdth,wght.ttf
LFS
Normal file
BIN
src/main/assets/fonts/Roboto/Roboto-Italic-VariableFont_wdth,wght.ttf
LFS
Normal file
Binary file not shown.
BIN
src/main/assets/fonts/Roboto/Roboto-VariableFont_wdth,wght.ttf
LFS
Normal file
BIN
src/main/assets/fonts/Roboto/Roboto-VariableFont_wdth,wght.ttf
LFS
Normal file
Binary file not shown.
BIN
src/main/assets/fonts/Roboto/static/Roboto-Black.ttf
LFS
Normal file
BIN
src/main/assets/fonts/Roboto/static/Roboto-Black.ttf
LFS
Normal file
Binary file not shown.
BIN
src/main/assets/fonts/Roboto/static/Roboto-BlackItalic.ttf
LFS
Normal file
BIN
src/main/assets/fonts/Roboto/static/Roboto-BlackItalic.ttf
LFS
Normal file
Binary file not shown.
BIN
src/main/assets/fonts/Roboto/static/Roboto-Bold.ttf
LFS
Normal file
BIN
src/main/assets/fonts/Roboto/static/Roboto-Bold.ttf
LFS
Normal file
Binary file not shown.
BIN
src/main/assets/fonts/Roboto/static/Roboto-BoldItalic.ttf
LFS
Normal file
BIN
src/main/assets/fonts/Roboto/static/Roboto-BoldItalic.ttf
LFS
Normal file
Binary file not shown.
BIN
src/main/assets/fonts/Roboto/static/Roboto-ExtraBold.ttf
LFS
Normal file
BIN
src/main/assets/fonts/Roboto/static/Roboto-ExtraBold.ttf
LFS
Normal file
Binary file not shown.
BIN
src/main/assets/fonts/Roboto/static/Roboto-ExtraBoldItalic.ttf
LFS
Normal file
BIN
src/main/assets/fonts/Roboto/static/Roboto-ExtraBoldItalic.ttf
LFS
Normal file
Binary file not shown.
BIN
src/main/assets/fonts/Roboto/static/Roboto-ExtraLight.ttf
LFS
Normal file
BIN
src/main/assets/fonts/Roboto/static/Roboto-ExtraLight.ttf
LFS
Normal file
Binary file not shown.
BIN
src/main/assets/fonts/Roboto/static/Roboto-ExtraLightItalic.ttf
LFS
Normal file
BIN
src/main/assets/fonts/Roboto/static/Roboto-ExtraLightItalic.ttf
LFS
Normal file
Binary file not shown.
BIN
src/main/assets/fonts/Roboto/static/Roboto-Italic.ttf
LFS
Normal file
BIN
src/main/assets/fonts/Roboto/static/Roboto-Italic.ttf
LFS
Normal file
Binary file not shown.
BIN
src/main/assets/fonts/Roboto/static/Roboto-Light.ttf
LFS
Normal file
BIN
src/main/assets/fonts/Roboto/static/Roboto-Light.ttf
LFS
Normal file
Binary file not shown.
BIN
src/main/assets/fonts/Roboto/static/Roboto-LightItalic.ttf
LFS
Normal file
BIN
src/main/assets/fonts/Roboto/static/Roboto-LightItalic.ttf
LFS
Normal file
Binary file not shown.
BIN
src/main/assets/fonts/Roboto/static/Roboto-Medium.ttf
LFS
Normal file
BIN
src/main/assets/fonts/Roboto/static/Roboto-Medium.ttf
LFS
Normal file
Binary file not shown.
BIN
src/main/assets/fonts/Roboto/static/Roboto-MediumItalic.ttf
LFS
Normal file
BIN
src/main/assets/fonts/Roboto/static/Roboto-MediumItalic.ttf
LFS
Normal file
Binary file not shown.
BIN
src/main/assets/fonts/Roboto/static/Roboto-Regular.ttf
LFS
Normal file
BIN
src/main/assets/fonts/Roboto/static/Roboto-Regular.ttf
LFS
Normal file
Binary file not shown.
BIN
src/main/assets/fonts/Roboto/static/Roboto-SemiBold.ttf
LFS
Normal file
BIN
src/main/assets/fonts/Roboto/static/Roboto-SemiBold.ttf
LFS
Normal file
Binary file not shown.
BIN
src/main/assets/fonts/Roboto/static/Roboto-SemiBoldItalic.ttf
LFS
Normal file
BIN
src/main/assets/fonts/Roboto/static/Roboto-SemiBoldItalic.ttf
LFS
Normal file
Binary file not shown.
BIN
src/main/assets/fonts/Roboto/static/Roboto-Thin.ttf
LFS
Normal file
BIN
src/main/assets/fonts/Roboto/static/Roboto-Thin.ttf
LFS
Normal file
Binary file not shown.
BIN
src/main/assets/fonts/Roboto/static/Roboto-ThinItalic.ttf
LFS
Normal file
BIN
src/main/assets/fonts/Roboto/static/Roboto-ThinItalic.ttf
LFS
Normal file
Binary file not shown.
BIN
src/main/assets/fonts/Roboto/static/Roboto_Condensed-Black.ttf
LFS
Normal file
BIN
src/main/assets/fonts/Roboto/static/Roboto_Condensed-Black.ttf
LFS
Normal file
Binary file not shown.
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user