2026-01-06 10:17:05 +00:00
|
|
|
import {
|
|
|
|
|
customElement,
|
|
|
|
|
DeesElement,
|
|
|
|
|
type TemplateResult,
|
|
|
|
|
html,
|
|
|
|
|
property,
|
|
|
|
|
css,
|
|
|
|
|
cssManager,
|
|
|
|
|
state,
|
|
|
|
|
} from '@design.estate/dees-element';
|
|
|
|
|
import { DeesAppuiSecondarymenu, DeesIcon } from '@design.estate/dees-catalog';
|
2026-01-12 10:57:54 +00:00
|
|
|
import type { ISecondaryMenuGroup, ISecondaryMenuItem } from '../../elements/interfaces/secondarymenu.js';
|
|
|
|
|
import { demo } from './eco-view-settings.demo.js';
|
2026-01-06 10:17:05 +00:00
|
|
|
|
|
|
|
|
// Ensure components are registered
|
|
|
|
|
DeesAppuiSecondarymenu;
|
|
|
|
|
DeesIcon;
|
|
|
|
|
|
|
|
|
|
declare global {
|
|
|
|
|
interface HTMLElementTagNameMap {
|
2026-01-12 10:57:54 +00:00
|
|
|
'eco-view-settings': EcoViewSettings;
|
2026-01-06 10:17:05 +00:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export type TSettingsPanel =
|
|
|
|
|
| 'general'
|
|
|
|
|
| 'network'
|
|
|
|
|
| 'bluetooth'
|
|
|
|
|
| 'display'
|
|
|
|
|
| 'sound'
|
|
|
|
|
| 'notifications'
|
|
|
|
|
| 'privacy'
|
|
|
|
|
| 'accounts'
|
|
|
|
|
| 'apps'
|
|
|
|
|
| 'updates'
|
|
|
|
|
| 'about';
|
|
|
|
|
|
2026-01-12 10:57:54 +00:00
|
|
|
@customElement('eco-view-settings')
|
|
|
|
|
export class EcoViewSettings extends DeesElement {
|
2026-01-06 10:17:05 +00:00
|
|
|
public static demo = demo;
|
2026-01-12 10:57:54 +00:00
|
|
|
public static demoGroup = 'Views';
|
2026-01-06 10:17:05 +00:00
|
|
|
|
|
|
|
|
public static styles = [
|
|
|
|
|
cssManager.defaultStyles,
|
|
|
|
|
css`
|
|
|
|
|
:host {
|
|
|
|
|
display: block;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background: ${cssManager.bdTheme('#f5f5f7', 'hsl(240 6% 10%)')};
|
|
|
|
|
color: ${cssManager.bdTheme('hsl(0 0% 10%)', 'hsl(0 0% 98%)')};
|
|
|
|
|
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.settings-container {
|
|
|
|
|
display: flex;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
dees-appui-secondarymenu {
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
background: ${cssManager.bdTheme('#ffffff', 'hsl(240 6% 8%)')};
|
|
|
|
|
border-right: 1px solid ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(240 5% 15%)')};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.content {
|
|
|
|
|
flex: 1;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
padding: 32px 48px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.panel-header {
|
|
|
|
|
margin-bottom: 32px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.panel-title {
|
|
|
|
|
font-size: 28px;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
color: ${cssManager.bdTheme('hsl(0 0% 10%)', 'hsl(0 0% 98%)')};
|
|
|
|
|
margin-bottom: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.panel-description {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.settings-section {
|
|
|
|
|
background: ${cssManager.bdTheme('#ffffff', 'hsl(240 6% 12%)')};
|
|
|
|
|
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(240 5% 18%)')};
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
margin-bottom: 24px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.section-title {
|
|
|
|
|
padding: 16px 20px 12px;
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 50%)')};
|
|
|
|
|
text-transform: uppercase;
|
|
|
|
|
letter-spacing: 0.5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.settings-item {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
padding: 14px 20px;
|
|
|
|
|
border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 94%)', 'hsl(240 5% 15%)')};
|
|
|
|
|
transition: background 0.15s ease;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.settings-item:first-child {
|
|
|
|
|
border-top: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.settings-item:hover {
|
|
|
|
|
background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(240 5% 14%)')};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.settings-item.clickable {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.item-left {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 14px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.item-icon {
|
|
|
|
|
width: 32px;
|
|
|
|
|
height: 32px;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.item-icon.blue { background: hsl(217 91% 60%); }
|
|
|
|
|
.item-icon.green { background: hsl(142 71% 45%); }
|
|
|
|
|
.item-icon.orange { background: hsl(25 95% 53%); }
|
|
|
|
|
.item-icon.purple { background: hsl(262 83% 58%); }
|
|
|
|
|
.item-icon.red { background: hsl(0 72% 51%); }
|
|
|
|
|
.item-icon.teal { background: hsl(175 84% 32%); }
|
|
|
|
|
.item-icon.gray { background: hsl(220 9% 46%); }
|
|
|
|
|
|
|
|
|
|
.item-info {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
gap: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.item-label {
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
color: ${cssManager.bdTheme('hsl(0 0% 10%)', 'hsl(0 0% 98%)')};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.item-sublabel {
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 55%)')};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.item-right {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 8px;
|
|
|
|
|
color: ${cssManager.bdTheme('hsl(0 0% 60%)', 'hsl(0 0% 50%)')};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.item-value {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 55%)')};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.toggle-switch {
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 44px;
|
|
|
|
|
height: 24px;
|
|
|
|
|
background: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(240 5% 25%)')};
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
transition: background 0.2s ease;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.toggle-switch.active {
|
|
|
|
|
background: hsl(217 91% 60%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.toggle-switch::after {
|
|
|
|
|
content: '';
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 2px;
|
|
|
|
|
left: 2px;
|
|
|
|
|
width: 20px;
|
|
|
|
|
height: 20px;
|
|
|
|
|
background: white;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
transition: transform 0.2s ease;
|
|
|
|
|
box-shadow: ${cssManager.bdTheme('0 1px 3px rgba(0,0,0,0.2)', 'none')};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.toggle-switch.active::after {
|
|
|
|
|
transform: translateX(20px);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.slider-container {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 12px;
|
|
|
|
|
min-width: 200px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.slider {
|
|
|
|
|
flex: 1;
|
|
|
|
|
height: 4px;
|
|
|
|
|
background: ${cssManager.bdTheme('hsl(0 0% 88%)', 'hsl(240 5% 25%)')};
|
|
|
|
|
border-radius: 2px;
|
|
|
|
|
position: relative;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.slider-fill {
|
|
|
|
|
height: 100%;
|
|
|
|
|
background: hsl(217 91% 60%);
|
|
|
|
|
border-radius: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.slider-value {
|
|
|
|
|
min-width: 36px;
|
|
|
|
|
text-align: right;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 70%)')};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
select {
|
|
|
|
|
padding: 8px 32px 8px 12px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(240 5% 25%)')};
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
background: ${cssManager.bdTheme('#ffffff', 'hsl(240 6% 15%)')};
|
|
|
|
|
color: ${cssManager.bdTheme('hsl(0 0% 10%)', 'hsl(0 0% 90%)')};
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
appearance: none;
|
|
|
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-position: right 10px center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
select:focus {
|
|
|
|
|
outline: none;
|
|
|
|
|
border-color: hsl(217 91% 60%);
|
|
|
|
|
}
|
|
|
|
|
`,
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
@property({ type: String })
|
|
|
|
|
accessor activePanel: TSettingsPanel = 'general';
|
|
|
|
|
|
|
|
|
|
@state()
|
|
|
|
|
accessor wifiEnabled = true;
|
|
|
|
|
|
|
|
|
|
@state()
|
|
|
|
|
accessor bluetoothEnabled = true;
|
|
|
|
|
|
|
|
|
|
@state()
|
|
|
|
|
accessor darkMode = true;
|
|
|
|
|
|
|
|
|
|
@state()
|
|
|
|
|
accessor notificationsEnabled = true;
|
|
|
|
|
|
|
|
|
|
@state()
|
|
|
|
|
accessor soundEnabled = true;
|
|
|
|
|
|
|
|
|
|
@state()
|
|
|
|
|
accessor brightness = 80;
|
|
|
|
|
|
|
|
|
|
@state()
|
|
|
|
|
accessor volume = 70;
|
|
|
|
|
|
|
|
|
|
private getMenuGroups(): ISecondaryMenuGroup[] {
|
|
|
|
|
return [
|
|
|
|
|
{
|
|
|
|
|
name: 'System',
|
|
|
|
|
iconName: 'lucide:settings',
|
|
|
|
|
items: [
|
|
|
|
|
{
|
|
|
|
|
key: 'general',
|
|
|
|
|
iconName: 'lucide:settings',
|
|
|
|
|
action: () => this.activePanel = 'general',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: 'display',
|
|
|
|
|
iconName: 'lucide:monitor',
|
|
|
|
|
action: () => this.activePanel = 'display',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: 'sound',
|
|
|
|
|
iconName: 'lucide:volume2',
|
|
|
|
|
action: () => this.activePanel = 'sound',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: 'notifications',
|
|
|
|
|
iconName: 'lucide:bell',
|
|
|
|
|
action: () => this.activePanel = 'notifications',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: 'Network',
|
|
|
|
|
iconName: 'lucide:wifi',
|
|
|
|
|
items: [
|
|
|
|
|
{
|
|
|
|
|
key: 'network',
|
|
|
|
|
iconName: 'lucide:wifi',
|
|
|
|
|
action: () => this.activePanel = 'network',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: 'bluetooth',
|
|
|
|
|
iconName: 'lucide:bluetooth',
|
|
|
|
|
action: () => this.activePanel = 'bluetooth',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: 'Personal',
|
|
|
|
|
iconName: 'lucide:user',
|
|
|
|
|
items: [
|
|
|
|
|
{
|
|
|
|
|
key: 'accounts',
|
|
|
|
|
iconName: 'lucide:user',
|
|
|
|
|
action: () => this.activePanel = 'accounts',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: 'privacy',
|
|
|
|
|
iconName: 'lucide:shield',
|
|
|
|
|
action: () => this.activePanel = 'privacy',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: 'System Info',
|
|
|
|
|
iconName: 'lucide:info',
|
|
|
|
|
items: [
|
|
|
|
|
{
|
|
|
|
|
key: 'apps',
|
|
|
|
|
iconName: 'lucide:layoutGrid',
|
|
|
|
|
action: () => this.activePanel = 'apps',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: 'updates',
|
|
|
|
|
iconName: 'lucide:download',
|
|
|
|
|
action: () => this.activePanel = 'updates',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: 'about',
|
|
|
|
|
iconName: 'lucide:info',
|
|
|
|
|
action: () => this.activePanel = 'about',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
private getSelectedItem(): ISecondaryMenuItem | null {
|
|
|
|
|
for (const group of this.getMenuGroups()) {
|
|
|
|
|
for (const item of group.items) {
|
|
|
|
|
if ('key' in item && item.key === this.activePanel) {
|
|
|
|
|
return item;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return null;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
public render(): TemplateResult {
|
|
|
|
|
return html`
|
|
|
|
|
<div class="settings-container">
|
|
|
|
|
<dees-appui-secondarymenu
|
|
|
|
|
.heading=${'Settings'}
|
|
|
|
|
.groups=${this.getMenuGroups()}
|
|
|
|
|
.selectedItem=${this.getSelectedItem()}
|
|
|
|
|
></dees-appui-secondarymenu>
|
|
|
|
|
<div class="content">
|
|
|
|
|
${this.renderActivePanel()}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
`;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
private renderActivePanel(): TemplateResult {
|
|
|
|
|
switch (this.activePanel) {
|
|
|
|
|
case 'general':
|
|
|
|
|
return this.renderGeneralPanel();
|
|
|
|
|
case 'network':
|
|
|
|
|
return this.renderNetworkPanel();
|
|
|
|
|
case 'bluetooth':
|
|
|
|
|
return this.renderBluetoothPanel();
|
|
|
|
|
case 'display':
|
|
|
|
|
return this.renderDisplayPanel();
|
|
|
|
|
case 'sound':
|
|
|
|
|
return this.renderSoundPanel();
|
|
|
|
|
case 'notifications':
|
|
|
|
|
return this.renderNotificationsPanel();
|
|
|
|
|
case 'privacy':
|
|
|
|
|
return this.renderPrivacyPanel();
|
|
|
|
|
case 'accounts':
|
|
|
|
|
return this.renderAccountsPanel();
|
|
|
|
|
case 'apps':
|
|
|
|
|
return this.renderAppsPanel();
|
|
|
|
|
case 'updates':
|
|
|
|
|
return this.renderUpdatesPanel();
|
|
|
|
|
case 'about':
|
|
|
|
|
return this.renderAboutPanel();
|
|
|
|
|
default:
|
|
|
|
|
return this.renderGeneralPanel();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
private renderGeneralPanel(): TemplateResult {
|
|
|
|
|
return html`
|
|
|
|
|
<div class="panel-header">
|
|
|
|
|
<div class="panel-title">General</div>
|
|
|
|
|
<div class="panel-description">Configure general system settings</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="settings-section">
|
|
|
|
|
<div class="section-title">Appearance</div>
|
|
|
|
|
<div class="settings-item">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<div class="item-icon gray">
|
|
|
|
|
<dees-icon .icon=${'lucide:moon'} .iconSize=${18}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div class="item-label">Dark Mode</div>
|
|
|
|
|
<div class="item-sublabel">Use dark theme throughout the system</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="toggle-switch ${this.darkMode ? 'active' : ''}"
|
|
|
|
|
@click=${() => this.darkMode = !this.darkMode}
|
|
|
|
|
></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="settings-item">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<div class="item-icon blue">
|
|
|
|
|
<dees-icon .icon=${'lucide:type'} .iconSize=${18}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div class="item-label">Text Size</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<select>
|
|
|
|
|
<option>Small</option>
|
|
|
|
|
<option selected>Medium</option>
|
|
|
|
|
<option>Large</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="settings-section">
|
|
|
|
|
<div class="section-title">Language & Region</div>
|
|
|
|
|
<div class="settings-item clickable">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<div class="item-icon purple">
|
|
|
|
|
<dees-icon .icon=${'lucide:globe'} .iconSize=${18}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div class="item-label">Language</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-right">
|
|
|
|
|
<span class="item-value">English (US)</span>
|
|
|
|
|
<dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="settings-item clickable">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<div class="item-icon teal">
|
|
|
|
|
<dees-icon .icon=${'lucide:clock'} .iconSize=${18}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div class="item-label">Time Zone</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-right">
|
|
|
|
|
<span class="item-value">UTC+01:00</span>
|
|
|
|
|
<dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
`;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
private renderNetworkPanel(): TemplateResult {
|
|
|
|
|
return html`
|
|
|
|
|
<div class="panel-header">
|
|
|
|
|
<div class="panel-title">Network</div>
|
|
|
|
|
<div class="panel-description">Manage Wi-Fi and network connections</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="settings-section">
|
|
|
|
|
<div class="section-title">Wi-Fi</div>
|
|
|
|
|
<div class="settings-item">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<div class="item-icon blue">
|
|
|
|
|
<dees-icon .icon=${'lucide:wifi'} .iconSize=${18}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div class="item-label">Wi-Fi</div>
|
|
|
|
|
<div class="item-sublabel">${this.wifiEnabled ? 'Connected to HomeNetwork' : 'Off'}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="toggle-switch ${this.wifiEnabled ? 'active' : ''}"
|
|
|
|
|
@click=${() => this.wifiEnabled = !this.wifiEnabled}
|
|
|
|
|
></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
${this.wifiEnabled ? html`
|
|
|
|
|
<div class="settings-section">
|
|
|
|
|
<div class="section-title">Available Networks</div>
|
|
|
|
|
<div class="settings-item clickable">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div class="item-label">HomeNetwork</div>
|
|
|
|
|
<div class="item-sublabel">Connected</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-right">
|
|
|
|
|
<dees-icon .icon=${'lucide:lock'} .iconSize=${14}></dees-icon>
|
|
|
|
|
<dees-icon .icon=${'lucide:wifi'} .iconSize=${16}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="settings-item clickable">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div class="item-label">OfficeWiFi</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-right">
|
|
|
|
|
<dees-icon .icon=${'lucide:lock'} .iconSize=${14}></dees-icon>
|
|
|
|
|
<dees-icon .icon=${'lucide:wifi'} .iconSize=${16}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="settings-item clickable">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div class="item-label">CoffeeShop_Guest</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-right">
|
|
|
|
|
<dees-icon .icon=${'lucide:wifi'} .iconSize=${16}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
` : ''}
|
|
|
|
|
`;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
private renderBluetoothPanel(): TemplateResult {
|
|
|
|
|
return html`
|
|
|
|
|
<div class="panel-header">
|
|
|
|
|
<div class="panel-title">Bluetooth</div>
|
|
|
|
|
<div class="panel-description">Manage Bluetooth devices and connections</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="settings-section">
|
|
|
|
|
<div class="section-title">Bluetooth</div>
|
|
|
|
|
<div class="settings-item">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<div class="item-icon blue">
|
|
|
|
|
<dees-icon .icon=${'lucide:bluetooth'} .iconSize=${18}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div class="item-label">Bluetooth</div>
|
|
|
|
|
<div class="item-sublabel">${this.bluetoothEnabled ? 'On' : 'Off'}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="toggle-switch ${this.bluetoothEnabled ? 'active' : ''}"
|
|
|
|
|
@click=${() => this.bluetoothEnabled = !this.bluetoothEnabled}
|
|
|
|
|
></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
${this.bluetoothEnabled ? html`
|
|
|
|
|
<div class="settings-section">
|
|
|
|
|
<div class="section-title">Connected Devices</div>
|
|
|
|
|
<div class="settings-item clickable">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<div class="item-icon gray">
|
|
|
|
|
<dees-icon .icon=${'lucide:headphones'} .iconSize=${18}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div class="item-label">AirPods Pro</div>
|
|
|
|
|
<div class="item-sublabel">Connected</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="settings-section">
|
|
|
|
|
<div class="section-title">Available Devices</div>
|
|
|
|
|
<div class="settings-item clickable">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div class="item-label">Magic Keyboard</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="settings-item clickable">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div class="item-label">JBL Speaker</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
` : ''}
|
|
|
|
|
`;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
private renderDisplayPanel(): TemplateResult {
|
|
|
|
|
return html`
|
|
|
|
|
<div class="panel-header">
|
|
|
|
|
<div class="panel-title">Display</div>
|
|
|
|
|
<div class="panel-description">Adjust display and brightness settings</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="settings-section">
|
|
|
|
|
<div class="section-title">Brightness</div>
|
|
|
|
|
<div class="settings-item">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<div class="item-icon orange">
|
|
|
|
|
<dees-icon .icon=${'lucide:sun'} .iconSize=${18}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div class="item-label">Brightness</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="slider-container">
|
|
|
|
|
<dees-icon .icon=${'lucide:sunDim'} .iconSize=${16}></dees-icon>
|
|
|
|
|
<div class="slider">
|
|
|
|
|
<div class="slider-fill" style="width: ${this.brightness}%"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<dees-icon .icon=${'lucide:sun'} .iconSize=${16}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="settings-item">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<div class="item-icon blue">
|
|
|
|
|
<dees-icon .icon=${'lucide:sparkles'} .iconSize=${18}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div class="item-label">Auto-Brightness</div>
|
|
|
|
|
<div class="item-sublabel">Automatically adjust based on ambient light</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="toggle-switch active"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="settings-section">
|
|
|
|
|
<div class="section-title">Night Shift</div>
|
|
|
|
|
<div class="settings-item">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<div class="item-icon orange">
|
|
|
|
|
<dees-icon .icon=${'lucide:moonStar'} .iconSize=${18}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div class="item-label">Night Shift</div>
|
|
|
|
|
<div class="item-sublabel">Reduce blue light in the evening</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="toggle-switch"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="settings-section">
|
|
|
|
|
<div class="section-title">Resolution</div>
|
|
|
|
|
<div class="settings-item">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<div class="item-icon purple">
|
|
|
|
|
<dees-icon .icon=${'lucide:monitor'} .iconSize=${18}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div class="item-label">Display Resolution</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<select>
|
|
|
|
|
<option>1920 x 1080</option>
|
|
|
|
|
<option selected>2560 x 1440</option>
|
|
|
|
|
<option>3840 x 2160</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
`;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
private renderSoundPanel(): TemplateResult {
|
|
|
|
|
return html`
|
|
|
|
|
<div class="panel-header">
|
|
|
|
|
<div class="panel-title">Sound</div>
|
|
|
|
|
<div class="panel-description">Configure audio settings and output devices</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="settings-section">
|
|
|
|
|
<div class="section-title">Volume</div>
|
|
|
|
|
<div class="settings-item">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<div class="item-icon blue">
|
|
|
|
|
<dees-icon .icon=${'lucide:volume2'} .iconSize=${18}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div class="item-label">Output Volume</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="slider-container">
|
|
|
|
|
<dees-icon .icon=${'lucide:volumeX'} .iconSize=${16}></dees-icon>
|
|
|
|
|
<div class="slider">
|
|
|
|
|
<div class="slider-fill" style="width: ${this.volume}%"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<span class="slider-value">${this.volume}%</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="settings-item">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<div class="item-icon gray">
|
|
|
|
|
<dees-icon .icon=${'lucide:volumeX'} .iconSize=${18}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div class="item-label">Mute</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="toggle-switch ${!this.soundEnabled ? 'active' : ''}"
|
|
|
|
|
@click=${() => this.soundEnabled = !this.soundEnabled}
|
|
|
|
|
></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="settings-section">
|
|
|
|
|
<div class="section-title">Output Device</div>
|
|
|
|
|
<div class="settings-item clickable">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<div class="item-icon teal">
|
|
|
|
|
<dees-icon .icon=${'lucide:speaker'} .iconSize=${18}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div class="item-label">Built-in Speakers</div>
|
|
|
|
|
<div class="item-sublabel">Selected</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<dees-icon .icon=${'lucide:check'} .iconSize=${18}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="settings-item clickable">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<div class="item-icon gray">
|
|
|
|
|
<dees-icon .icon=${'lucide:headphones'} .iconSize=${18}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div class="item-label">AirPods Pro</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="settings-section">
|
|
|
|
|
<div class="section-title">Sound Effects</div>
|
|
|
|
|
<div class="settings-item">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div class="item-label">Play sound effects</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="toggle-switch active"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="settings-item">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div class="item-label">Play startup sound</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="toggle-switch active"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
`;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
private renderNotificationsPanel(): TemplateResult {
|
|
|
|
|
return html`
|
|
|
|
|
<div class="panel-header">
|
|
|
|
|
<div class="panel-title">Notifications</div>
|
|
|
|
|
<div class="panel-description">Control how apps notify you</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="settings-section">
|
|
|
|
|
<div class="section-title">Notifications</div>
|
|
|
|
|
<div class="settings-item">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<div class="item-icon red">
|
|
|
|
|
<dees-icon .icon=${'lucide:bell'} .iconSize=${18}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div class="item-label">Allow Notifications</div>
|
|
|
|
|
<div class="item-sublabel">Show notifications from apps and services</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="toggle-switch ${this.notificationsEnabled ? 'active' : ''}"
|
|
|
|
|
@click=${() => this.notificationsEnabled = !this.notificationsEnabled}
|
|
|
|
|
></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
${this.notificationsEnabled ? html`
|
|
|
|
|
<div class="settings-section">
|
|
|
|
|
<div class="section-title">App Notifications</div>
|
|
|
|
|
<div class="settings-item clickable">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<div class="item-icon blue">
|
|
|
|
|
<dees-icon .icon=${'lucide:mail'} .iconSize=${18}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div class="item-label">Mail</div>
|
|
|
|
|
<div class="item-sublabel">Banners, Sounds, Badges</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="settings-item clickable">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<div class="item-icon green">
|
|
|
|
|
<dees-icon .icon=${'lucide:messageSquare'} .iconSize=${18}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div class="item-label">Messages</div>
|
|
|
|
|
<div class="item-sublabel">Banners, Sounds, Badges</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="settings-item clickable">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<div class="item-icon orange">
|
|
|
|
|
<dees-icon .icon=${'lucide:calendar'} .iconSize=${18}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div class="item-label">Calendar</div>
|
|
|
|
|
<div class="item-sublabel">Banners, Sounds</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
` : ''}
|
|
|
|
|
`;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
private renderPrivacyPanel(): TemplateResult {
|
|
|
|
|
return html`
|
|
|
|
|
<div class="panel-header">
|
|
|
|
|
<div class="panel-title">Privacy & Security</div>
|
|
|
|
|
<div class="panel-description">Manage privacy settings and app permissions</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="settings-section">
|
|
|
|
|
<div class="section-title">Privacy</div>
|
|
|
|
|
<div class="settings-item clickable">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<div class="item-icon blue">
|
|
|
|
|
<dees-icon .icon=${'lucide:mapPin'} .iconSize=${18}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div class="item-label">Location Services</div>
|
|
|
|
|
<div class="item-sublabel">On</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="settings-item clickable">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<div class="item-icon green">
|
|
|
|
|
<dees-icon .icon=${'lucide:camera'} .iconSize=${18}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div class="item-label">Camera</div>
|
|
|
|
|
<div class="item-sublabel">3 apps have access</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="settings-item clickable">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<div class="item-icon red">
|
|
|
|
|
<dees-icon .icon=${'lucide:mic'} .iconSize=${18}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div class="item-label">Microphone</div>
|
|
|
|
|
<div class="item-sublabel">2 apps have access</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="settings-section">
|
|
|
|
|
<div class="section-title">Security</div>
|
|
|
|
|
<div class="settings-item clickable">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<div class="item-icon gray">
|
|
|
|
|
<dees-icon .icon=${'lucide:fingerprint'} .iconSize=${18}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div class="item-label">Touch ID & Password</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
`;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
private renderAccountsPanel(): TemplateResult {
|
|
|
|
|
return html`
|
|
|
|
|
<div class="panel-header">
|
|
|
|
|
<div class="panel-title">Accounts</div>
|
|
|
|
|
<div class="panel-description">Manage your accounts and sign-in options</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="settings-section">
|
|
|
|
|
<div class="settings-item clickable">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<div class="item-icon blue" style="width: 48px; height: 48px; border-radius: 24px; font-size: 20px; font-weight: 600;">
|
|
|
|
|
JD
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div class="item-label">John Doe</div>
|
|
|
|
|
<div class="item-sublabel">john.doe@example.com</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="settings-section">
|
|
|
|
|
<div class="section-title">Connected Accounts</div>
|
|
|
|
|
<div class="settings-item clickable">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<div class="item-icon" style="background: #4285f4;">
|
|
|
|
|
<dees-icon .icon=${'lucide:mail'} .iconSize=${18}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div class="item-label">Google</div>
|
|
|
|
|
<div class="item-sublabel">john.doe@gmail.com</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="settings-item clickable">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<div class="item-icon" style="background: #0078d4;">
|
|
|
|
|
<dees-icon .icon=${'lucide:cloud'} .iconSize=${18}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div class="item-label">Microsoft</div>
|
|
|
|
|
<div class="item-sublabel">john.doe@outlook.com</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
`;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
private renderAppsPanel(): TemplateResult {
|
|
|
|
|
return html`
|
|
|
|
|
<div class="panel-header">
|
|
|
|
|
<div class="panel-title">Apps</div>
|
|
|
|
|
<div class="panel-description">Manage installed applications</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="settings-section">
|
|
|
|
|
<div class="section-title">Default Apps</div>
|
|
|
|
|
<div class="settings-item clickable">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<div class="item-icon blue">
|
|
|
|
|
<dees-icon .icon=${'lucide:globe'} .iconSize=${18}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div class="item-label">Web Browser</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-right">
|
|
|
|
|
<span class="item-value">Browser</span>
|
|
|
|
|
<dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="settings-item clickable">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<div class="item-icon blue">
|
|
|
|
|
<dees-icon .icon=${'lucide:mail'} .iconSize=${18}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div class="item-label">Email Client</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-right">
|
|
|
|
|
<span class="item-value">Mail</span>
|
|
|
|
|
<dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="settings-section">
|
|
|
|
|
<div class="section-title">Installed Apps</div>
|
|
|
|
|
<div class="settings-item clickable">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div class="item-label">Browser</div>
|
|
|
|
|
<div class="item-sublabel">Version 120.0.1</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="settings-item clickable">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div class="item-label">Mail</div>
|
|
|
|
|
<div class="item-sublabel">Version 16.0</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="settings-item clickable">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div class="item-label">Calendar</div>
|
|
|
|
|
<div class="item-sublabel">Version 14.0</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
`;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
private renderUpdatesPanel(): TemplateResult {
|
|
|
|
|
return html`
|
|
|
|
|
<div class="panel-header">
|
|
|
|
|
<div class="panel-title">Software Updates</div>
|
|
|
|
|
<div class="panel-description">Keep your system up to date</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="settings-section">
|
|
|
|
|
<div class="settings-item">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<div class="item-icon green">
|
|
|
|
|
<dees-icon .icon=${'lucide:checkCircle'} .iconSize=${18}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div class="item-label">Your system is up to date</div>
|
|
|
|
|
<div class="item-sublabel">Last checked: Today at 9:00 AM</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="settings-section">
|
|
|
|
|
<div class="section-title">Update Settings</div>
|
|
|
|
|
<div class="settings-item">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div class="item-label">Automatic Updates</div>
|
|
|
|
|
<div class="item-sublabel">Download and install updates automatically</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="toggle-switch active"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="settings-item">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div class="item-label">Beta Updates</div>
|
|
|
|
|
<div class="item-sublabel">Receive early access to new features</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="toggle-switch"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
`;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
private renderAboutPanel(): TemplateResult {
|
|
|
|
|
return html`
|
|
|
|
|
<div class="panel-header">
|
|
|
|
|
<div class="panel-title">About</div>
|
|
|
|
|
<div class="panel-description">System information and details</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="settings-section">
|
|
|
|
|
<div class="settings-item">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div class="item-label">Device Name</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<span class="item-value">EcoBridge Desktop</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="settings-item">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div class="item-label">System Version</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<span class="item-value">EcoOS 1.0.0</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="settings-item">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div class="item-label">Processor</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<span class="item-value">ARM64</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="settings-item">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div class="item-label">Memory</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<span class="item-value">16 GB</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="settings-item">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div class="item-label">Storage</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<span class="item-value">512 GB (256 GB Available)</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="settings-section">
|
|
|
|
|
<div class="section-title">Legal</div>
|
|
|
|
|
<div class="settings-item clickable">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div class="item-label">Terms of Service</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<dees-icon .icon=${'lucide:externalLink'} .iconSize=${16}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="settings-item clickable">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div class="item-label">Privacy Policy</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<dees-icon .icon=${'lucide:externalLink'} .iconSize=${16}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="settings-item clickable">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
<div class="item-label">Open Source Licenses</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<dees-icon .icon=${'lucide:externalLink'} .iconSize=${16}></dees-icon>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
`;
|
|
|
|
|
}
|
|
|
|
|
}
|
