basic ui elements

2026-01-15 23:52:09 +01:00
parent b56f667a3a
commit ebf80052f0
13 changed files with 2655 additions and 33 deletions
--- a/assets/screens/home.rml
+++ b/assets/screens/home.rml
@@ -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>