add touch events handling
This commit is contained in:
@@ -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
93
src/main/assets/html.rcss
Normal 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
110
src/main/assets/phone.rcss
Normal 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;
|
||||
}
|
||||
Reference in New Issue
Block a user