make ui bigger

This commit is contained in:
2026-01-16 14:52:18 +01:00
parent 2e2a9d0603
commit fbb6917812
23 changed files with 1252 additions and 1623 deletions

View File

@@ -24,7 +24,7 @@
flex: 1;
padding: 16px;
text-align: center;
font-size: 14px;
font-size: 18px;
color: #B3B3B3;
cursor: pointer;
}
@@ -56,15 +56,15 @@
}
.call-avatar {
width: 40px;
height: 40px;
border-radius: 20px;
width: 48px;
height: 48px;
border-radius: 24px;
background-color: #BB86FC;
margin-right: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-size: 20px;
color: #000000;
}
@@ -78,7 +78,7 @@
}
.call-type {
font-size: 13px;
font-size: 16px;
color: #B3B3B3;
margin-top: 2px;
}
@@ -88,26 +88,31 @@
}
.call-time {
font-size: 13px;
font-size: 16px;
color: #666666;
}
.call-action {
width: 40px;
height: 40px;
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-size: 24px;
color: #4CAF50;
cursor: pointer;
border-radius: 28px;
}
.call-action:hover {
background-color: rgba(76, 175, 80, 0.2);
}
</style>
</head>
<body class="dialer-screen" data-model="phone">
<!-- App Bar -->
<div class="app-bar">
<div class="app-bar-nav btn-icon" onclick="goBack()"><img src="../../icons/back.tga" style="width: 24px; height: 24px;"/></div>
<div class="app-bar-nav btn-icon" onclick="goBack()"><img src="../../icons/back.tga" style="width: 32px; height: 32px;"/></div>
<span class="app-bar-title">Phone</span>
</div>
@@ -177,21 +182,21 @@
<div class="dial-actions">
<div style="width: 56px;"></div>
<div class="dial-call-btn" data-event-click="make_call()"><img src="../../icons/call_small.tga" style="width: 32px; height: 32px; pointer-events: none;"/></div>
<div class="btn-icon" data-event-click="dial_backspace()" style="width: 56px; height: 56px;"><img src="../../icons/backspace.tga" style="width: 24px; height: 24px; pointer-events: none;"/></div>
<div class="btn-icon" data-event-click="dial_backspace()" style="width: 56px; height: 56px;"><img src="../../icons/backspace.tga" style="width: 32px; height: 32px; pointer-events: none;"/></div>
</div>
<!-- Bottom Navigation -->
<div class="bottom-nav">
<div class="bottom-nav-item active">
<img src="../../icons/dialpad.tga" class="bottom-nav-icon" style="width: 24px; height: 24px;"/>
<img src="../../icons/dialpad.tga" class="bottom-nav-icon" style="width: 32px; height: 32px;"/>
<span class="bottom-nav-label">Keypad</span>
</div>
<div class="bottom-nav-item">
<img src="../../icons/history.tga" class="bottom-nav-icon" style="width: 24px; height: 24px;"/>
<img src="../../icons/history.tga" class="bottom-nav-icon" style="width: 32px; height: 32px;"/>
<span class="bottom-nav-label">Recent</span>
</div>
<div class="bottom-nav-item" onclick="navigateTo('contacts')">
<img src="../../icons/contacts.tga" class="bottom-nav-icon" style="width: 24px; height: 24px;"/>
<img src="../../icons/contacts.tga" class="bottom-nav-icon" style="width: 32px; height: 32px;"/>
<span class="bottom-nav-label">Contacts</span>
</div>
</div>