fix app layouts: remove style tags from content fragments, use component classes

This commit is contained in:
2026-01-20 17:40:38 +01:00
parent 4b47611902
commit 82bc0c78fe
25 changed files with 5350 additions and 537 deletions

View File

@@ -6,6 +6,7 @@
<link type="text/rcss" href="../../ui/layout.rcss"/>
<script src="../../scripts/navigation.lua"></script>
<script src="../../scripts/layout.lua"></script>
<script src="settings.lua"></script>
<title>Settings</title>
<style>
.settings-list {
@@ -46,6 +47,10 @@
background-color: #252525;
}
.settings-item:active {
background-color: #2A2A2A;
}
.settings-item + .settings-item {
border-top: 1px #333333;
}
@@ -63,6 +68,7 @@
width: 32px;
height: 32px;
opacity: 0.7;
pointer-events: none;
}
.settings-content {
@@ -95,6 +101,10 @@
position: relative;
}
.settings-toggle:hover {
background-color: #777777;
}
.settings-toggle.active {
background-color: rgba(187, 134, 252, 0.5);
}
@@ -160,7 +170,7 @@
}
</style>
</head>
<body class="app-screen" onload="initLayout(document)">
<body class="app-screen" onload="initLayout(document); initSettings(document)">
<!-- System Status Bar -->
<div class="system-status-bar">
<span id="status-time" class="system-status-time">12:30</span>
@@ -188,7 +198,7 @@
<div class="app-content with-nav">
<div class="settings-list">
<!-- User Card -->
<div class="user-card">
<div class="user-card" onclick="openUserProfile()">
<div class="user-avatar">U</div>
<div class="user-info">
<div class="user-name">User</div>
@@ -200,38 +210,38 @@
<!-- Network Section -->
<div class="settings-section">
<div class="settings-header">Network</div>
<div class="settings-item">
<div class="settings-item" onclick="openWifiSettings()">
<div class="settings-icon">
<img src="../../icons/wifi.tga"/>
</div>
<div class="settings-content">
<div class="settings-title">Wi-Fi</div>
<div class="settings-subtitle">Connected to MosisNetwork</div>
<div class="settings-subtitle" id="subtitle-wifi">Connected to MosisNetwork</div>
</div>
<div class="settings-toggle active">
<div id="toggle-wifi" class="settings-toggle active" onclick="toggleWifi(); event.stopPropagation();">
<div class="settings-toggle-thumb"></div>
</div>
</div>
<div class="settings-item">
<div class="settings-item" onclick="openBluetoothSettings()">
<div class="settings-icon">
<img src="../../icons/signal.tga"/>
<img src="../../icons/bluetooth.tga"/>
</div>
<div class="settings-content">
<div class="settings-title">Bluetooth</div>
<div class="settings-subtitle">Off</div>
<div class="settings-subtitle" id="subtitle-bluetooth">Off</div>
</div>
<div class="settings-toggle">
<div id="toggle-bluetooth" class="settings-toggle" onclick="toggleBluetooth(); event.stopPropagation();">
<div class="settings-toggle-thumb"></div>
</div>
</div>
<div class="settings-item">
<div class="settings-icon">
<img src="../../icons/signal.tga"/>
<img src="../../icons/airplane.tga"/>
</div>
<div class="settings-content">
<div class="settings-title">Airplane Mode</div>
</div>
<div class="settings-toggle">
<div id="toggle-airplane" class="settings-toggle" onclick="toggleAirplaneMode()">
<div class="settings-toggle-thumb"></div>
</div>
</div>
@@ -240,9 +250,9 @@
<!-- Device Section -->
<div class="settings-section">
<div class="settings-header">Device</div>
<div class="settings-item">
<div class="settings-item" onclick="openDisplaySettings()">
<div class="settings-icon">
<img src="../../icons/settings.tga"/>
<img src="../../icons/brightness.tga"/>
</div>
<div class="settings-content">
<div class="settings-title">Display</div>
@@ -250,9 +260,9 @@
</div>
<span class="settings-action">></span>
</div>
<div class="settings-item">
<div class="settings-item" onclick="openSoundSettings()">
<div class="settings-icon">
<img src="../../icons/music.tga"/>
<img src="../../icons/volume.tga"/>
</div>
<div class="settings-content">
<div class="settings-title">Sound</div>
@@ -260,9 +270,9 @@
</div>
<span class="settings-action">></span>
</div>
<div class="settings-item">
<div class="settings-item" onclick="openNotificationsSettings()">
<div class="settings-icon">
<img src="../../icons/message.tga"/>
<img src="../../icons/notifications.tga"/>
</div>
<div class="settings-content">
<div class="settings-title">Notifications</div>
@@ -270,23 +280,23 @@
</div>
<span class="settings-action">></span>
</div>
<div class="settings-item">
<div class="settings-item" onclick="openBatterySettings()">
<div class="settings-icon">
<img src="../../icons/battery.tga"/>
</div>
<div class="settings-content">
<div class="settings-title">Battery</div>
<div class="settings-subtitle">85% - 4h 30m remaining</div>
<div class="settings-subtitle" id="subtitle-battery">85% - Not charging</div>
</div>
<span class="settings-action">></span>
</div>
<div class="settings-item">
<div class="settings-item" onclick="openStorageSettings()">
<div class="settings-icon">
<img src="../../icons/files.tga"/>
<img src="../../icons/storage.tga"/>
</div>
<div class="settings-content">
<div class="settings-title">Storage</div>
<div class="settings-subtitle">32 GB of 128 GB used</div>
<div class="settings-subtitle" id="subtitle-storage">32 GB of 128 GB used</div>
</div>
<span class="settings-action">></span>
</div>
@@ -295,9 +305,9 @@
<!-- Privacy Section -->
<div class="settings-section">
<div class="settings-header">Privacy &amp; Security</div>
<div class="settings-item">
<div class="settings-item" onclick="openLockScreenSettings()">
<div class="settings-icon">
<img src="../../icons/account.tga"/>
<img src="../../icons/lock.tga"/>
</div>
<div class="settings-content">
<div class="settings-title">Lock Screen</div>
@@ -305,9 +315,9 @@
</div>
<span class="settings-action">></span>
</div>
<div class="settings-item">
<div class="settings-item" onclick="openPrivacySettings()">
<div class="settings-icon">
<img src="../../icons/account.tga"/>
<img src="../../icons/privacy.tga"/>
</div>
<div class="settings-content">
<div class="settings-title">Privacy</div>
@@ -315,15 +325,15 @@
</div>
<span class="settings-action">></span>
</div>
<div class="settings-item">
<div class="settings-item" onclick="openLocationSettings()">
<div class="settings-icon">
<img src="../../icons/maps.tga"/>
<img src="../../icons/location.tga"/>
</div>
<div class="settings-content">
<div class="settings-title">Location</div>
<div class="settings-subtitle">On - High accuracy</div>
<div class="settings-subtitle" id="subtitle-location">On - High accuracy</div>
</div>
<div class="settings-toggle active">
<div id="toggle-location" class="settings-toggle active" onclick="toggleLocation(); event.stopPropagation();">
<div class="settings-toggle-thumb"></div>
</div>
</div>
@@ -332,7 +342,7 @@
<!-- About Section -->
<div class="settings-section">
<div class="settings-header">About</div>
<div class="settings-item">
<div class="settings-item" onclick="openAboutPhone()">
<div class="settings-icon">
<img src="../../icons/phone.tga"/>
</div>