add touch events handling

This commit is contained in:
2026-01-08 22:35:59 +01:00
parent 1074a1e59a
commit c101d647dd
23 changed files with 435 additions and 818 deletions

View File

@@ -1,28 +1,35 @@
<rml>
<head>
<title>Demo</title>
<link type="text/template" href="window.rml" />
<style>
body
{
width: 300dp;
height: 225dp;
<head>
<link type="text/rcss" href="html.rcss"/>
<link type="text/rcss" href="phone.rcss"/>
<title>Fullscreen Mobile UI</title>
</head>
<body>
<div id="status-bar">
<span class="time">22:47</span>
<div class="status-icons">
<span class="icon">📶</span>
<span class="icon">🔋</span>
<span class="icon">📶</span>
<span class="icon">🔋</span>
<span class="icon">📶</span>
<span class="icon">🔋</span>
</div>
</div>
margin: auto;
}
<div id="content">
<div class="header-section">
<h1>Hello omar 3 hello! and hello LEO 2 Hello!</h1>
</div>
</div>
div#title_bar div#icon
{
display: none;
}
div#content
{
text-align: left;
}
</style>
</head>
<body template="window">
This is a sample.
</body>
<div id="nav-bar">
<div class="nav-item">Home</div>
<div class="nav-item">Apps</div>
<div class="nav-item">Settings</div>
<div class="nav-item">Home</div>
<div class="nav-item">Apps</div>
<div class="nav-item">Settings</div>
</div>
</body>
</rml>

93
src/main/assets/html.rcss Normal file
View File

@@ -0,0 +1,93 @@
body, div,
h1, h2, h3, h4,
h5, h6, p,
hr, pre,
tabset tabs
{
display: block;
}
h1
{
font-size: 2em;
margin: .67em 0;
}
h2
{
font-size: 1.5em;
margin: .75em 0;
}
h3
{
font-size: 1.17em;
margin: .83em 0;
}
h4, p
{
margin: 1.12em 0;
}
h5
{
font-size: .83em;
margin: 1.5em 0;
}
h6
{
font-size: .75em;
margin: 1.67em 0;
}
h1, h2, h3, h4,
h5, h6, strong
{
font-weight: bold;
}
em
{
font-style: italic;
}
pre
{
white-space: pre;
}
hr
{
border-width: 1px;
}
table
{
box-sizing: border-box;
display: table;
}
tr
{
box-sizing: border-box;
display: table-row;
}
td
{
box-sizing: border-box;
display: table-cell;
}
col
{
box-sizing: border-box;
display: table-column;
}
colgroup
{
display: table-column-group;
}
thead, tbody, tfoot
{
display: table-row-group;
}

110
src/main/assets/phone.rcss Normal file
View File

@@ -0,0 +1,110 @@
/* Ensure the body fills the entire window */
body {
font-family: LatoLatin;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: #0f0f12;
color: white;
}
/* Status Bar pinned to top */
#status-bar {
display: block;
height: 140px;
padding: 10px 20px 0;
background-color: rgba(255, 0, 0, 0.2);
}
.time {
float: left;
font-weight: bold;
font-size: 2em;
}
.status-icons {
float: right;
font-size: 2em;
}
.icon {
margin-left: 10px;
}
/* Content area grows to fill space */
#content {
padding: 20px;
/* Leaves room for status and nav bars */
height: 80%;
align: center;
}
.header-section {
margin-bottom: 30px;
text-align: center;
}
h1 {
font-size: 2.5em;
font-weight: bold;
}
/* Mobile-style cards */
.card {
background: #1e1e24;
border-radius: 20px;
padding: 20px;
margin-bottom: 15px;
border: 1px solid #333;
}
.card-title {
font-size: 1.2em;
margin-bottom: 10px;
color: #3498db;
}
.progress-bar {
height: 8px;
background: #333;
border-radius: 4px;
margin: 10px 0;
}
.progress-fill {
width: 84%;
height: 100%;
background: #3498db;
border-radius: 4px;
}
/* Navigation Bar pinned to bottom */
#nav-bar {
position: absolute;
bottom: 0;
width: 100%;
height: 65px;
background-color: #16161a;
display: flex;
justify-content: space-around;
align-items: center;
border-top: 1px solid #333;
}
.nav-item {
font-size: 1.9em;
color: #888;
background-color: red;
width: 100px;
height: 100px;
text-align: center;
vertical-align: middle;
line-height: 90px;
border-radius: 10px;
}
.nav-item:hover {
color: #3498db;
background-color: blue;
}