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

@@ -58,9 +58,9 @@
}
.contact-action-icon {
width: 48px;
height: 48px;
border-radius: 24px;
width: 56px;
height: 56px;
border-radius: 28px;
background-color: #BB86FC;
display: flex;
align-items: center;
@@ -69,13 +69,13 @@
}
.contact-action-icon img {
width: 24px;
height: 24px;
width: 32px;
height: 32px;
pointer-events: none;
}
.contact-action-label {
font-size: 12px;
font-size: 16px;
color: #B3B3B3;
}
@@ -90,8 +90,8 @@
}
.contact-info-icon {
width: 24px;
height: 24px;
width: 28px;
height: 28px;
margin-right: 16px;
}
@@ -100,7 +100,7 @@
}
.contact-info-label {
font-size: 12px;
font-size: 16px;
color: #B3B3B3;
}
@@ -114,9 +114,9 @@
<body class="contact-detail-screen" onload="updateContactDetail()">
<!-- 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">Contact</span>
<div class="btn-icon"><img src="../../icons/more.tga" style="width: 24px; height: 24px;"/></div>
<div class="btn-icon"><img src="../../icons/more.tga" style="width: 32px; height: 32px;"/></div>
</div>
<!-- Contact Header -->
@@ -143,14 +143,14 @@
<!-- Contact Info -->
<div class="contact-info-section">
<div class="contact-info-item">
<img src="../../icons/phone.tga" class="contact-info-icon" style="width: 24px; height: 24px;"/>
<img src="../../icons/phone.tga" class="contact-info-icon" style="width: 28px; height: 28px;"/>
<div class="contact-info-content">
<div class="contact-info-label">Mobile</div>
<div class="contact-info-value" id="contact-phone">+1 (555) 000-0000</div>
</div>
</div>
<div class="contact-info-item">
<img src="../../icons/message.tga" class="contact-info-icon" style="width: 24px; height: 24px;"/>
<img src="../../icons/message.tga" class="contact-info-icon" style="width: 28px; height: 28px;"/>
<div class="contact-info-content">
<div class="contact-info-label">Email</div>
<div class="contact-info-value" id="contact-email">email@example.com</div>

View File

@@ -22,7 +22,7 @@
.contact-letter {
padding: 8px 16px;
font-size: 14px;
font-size: 18px;
font-weight: 500;
color: #BB86FC;
background-color: #1E1E1E;
@@ -42,14 +42,14 @@
}
.contact-avatar {
width: 40px;
height: 40px;
border-radius: 20px;
width: 48px;
height: 48px;
border-radius: 24px;
margin-right: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-size: 20px;
color: #000000;
}
@@ -63,19 +63,19 @@
}
.contact-phone {
font-size: 13px;
font-size: 16px;
color: #B3B3B3;
margin-top: 2px;
}
.contact-call-btn {
width: 40px;
height: 40px;
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 20px;
border-radius: 28px;
}
.contact-call-btn:hover {
@@ -83,8 +83,8 @@
}
.contact-call-btn img {
width: 20px;
height: 20px;
width: 32px;
height: 32px;
pointer-events: none;
}
</style>
@@ -92,14 +92,14 @@
<body class="contacts-screen" data-model="contacts">
<!-- 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">Contacts</span>
<div class="btn-icon"><img src="../../icons/add.tga" style="width: 24px; height: 24px;"/></div>
<div class="btn-icon"><img src="../../icons/add.tga" style="width: 32px; height: 32px;"/></div>
</div>
<!-- Search Bar -->
<div class="search-bar">
<img src="../../icons/search.tga" class="search-icon" style="width: 20px; height: 20px;"/>
<img src="../../icons/search.tga" class="search-icon" style="width: 28px; height: 28px;"/>
<input class="search-input" type="text" placeholder="Search contacts"/>
</div>
@@ -120,20 +120,20 @@
</div>
<!-- FAB -->
<div class="btn-fab"><img src="../../icons/add.tga" style="width: 24px; height: 24px;"/></div>
<div class="btn-fab"><img src="../../icons/add.tga" style="width: 32px; height: 32px;"/></div>
<!-- Bottom Navigation -->
<div class="bottom-nav">
<div class="bottom-nav-item" onclick="navigateTo('dialer')">
<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 active">
<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>