mirror of
https://github.com/eduard256/Strix
synced 2026-04-21 13:37:27 +00:00
Refine HomeKit page: add Apple HomeKit logo, centered layout, back button
Replace text-only header with official HomeKit house icon and "Apple HomeKit" label. Pin input centered on screen, back button aligned to container edge. Remove device info table and decorative elements for a cleaner look matching the rest of the frontend.
This commit is contained in:
eduard256
parent
8398832960
commit
89c5d83a6f
1 changed files with 54 additions and 11 deletions
|
|
@ -57,17 +57,41 @@
|
|||
.container { max-width: 540px; }
|
||||
}
|
||||
|
||||
.hero { text-align: center; margin-bottom: 3rem; }
|
||||
|
||||
.title {
|
||||
font-size: 4rem; font-weight: 700;
|
||||
letter-spacing: 0.1em; margin-bottom: 0.5rem;
|
||||
background: linear-gradient(135deg, var(--purple-light), var(--purple-primary));
|
||||
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
.back-wrapper {
|
||||
position: absolute; top: 1.5rem;
|
||||
left: 50%; transform: translateX(-50%);
|
||||
width: 100%; max-width: 480px;
|
||||
padding: 0 1.5rem;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.subtitle { font-size: 0.875rem; color: var(--text-secondary); }
|
||||
@media (min-width: 768px) {
|
||||
.back-wrapper { max-width: 540px; }
|
||||
}
|
||||
|
||||
.btn-back {
|
||||
display: inline-flex; align-items: center; gap: 0.5rem;
|
||||
background: none; border: none;
|
||||
color: var(--text-secondary); font-size: 0.875rem;
|
||||
font-family: var(--font-primary); cursor: pointer;
|
||||
padding: 0.5rem 0;
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
.btn-back:hover { color: var(--purple-primary); }
|
||||
|
||||
.hero { text-align: center; margin-bottom: 2.5rem; }
|
||||
|
||||
.title {
|
||||
font-size: 1.25rem; font-weight: 600;
|
||||
letter-spacing: 0.03em;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.homekit-logo {
|
||||
width: 72px; height: 72px;
|
||||
margin: 0 auto;
|
||||
filter: drop-shadow(0 4px 16px rgba(255, 171, 31, 0.3));
|
||||
}
|
||||
|
||||
.form-group { margin-bottom: 1.5rem; }
|
||||
|
||||
|
|
@ -75,7 +99,6 @@
|
|||
display: flex; align-items: center; gap: 0.5rem;
|
||||
font-size: 0.875rem; font-weight: 500;
|
||||
color: var(--text-secondary); margin-bottom: 0.75rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Info icon + tooltip */
|
||||
|
|
@ -244,10 +267,26 @@
|
|||
</head>
|
||||
<body>
|
||||
|
||||
<div class="back-wrapper">
|
||||
<button class="btn-back" id="btn-back">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M12 4L6 10l6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
Back
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="screen">
|
||||
<div class="container">
|
||||
<div class="hero">
|
||||
<h1 class="title" style="-webkit-text-fill-color:var(--text-primary); background:none;">HOME KIT</h1>
|
||||
<svg class="homekit-logo" viewBox="100 120 824 780" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="#FA9012" d="M883.2,413.1l-70.4-55.6l0,0V231.1c0-8.6-3.4-11-9.5-11h-64.4c-7,0-11.3,1.4-11.3,11v59.1l0,0 C634.5,216.7,533.6,137,529.8,134c-7.6-6-12.3-7.6-17.8-7.6c-5.4,0-10.1,1.6-17.8,7.6c-7.6,6-343.2,271.1-353.4,279.1 c-12.4,9.8-8.9,23.9,4.9,23.9h65.5v355.6c0,23,9.2,32.2,31.1,32.2h539.4c21.9,0,31.1-9.2,31.1-32.2V436.9h65.5 C892.1,436.9,895.6,422.9,883.2,413.1z M757.6,742.6c0,15.9-8.2,26.9-24.8,26.9H291.1c-16.6,0-24.8-11-24.8-26.9V410.3 c0-19.3,8.4-31.6,18.1-39.2l212.4-167.7c5.6-4.4,10.4-6.3,15.1-6.3s9.5,1.9,15.1,6.4l212.4,167.7c9.6,7.6,18.1,19.9,18.1,39.2 V742.6z"/>
|
||||
<path fill="#FFAB1F" d="M739.6,371.1L527.1,203.3c-5.6-4.4-10.6-6.3-15.1-6.3c-4.6,0-9.5,1.9-15.1,6.4L284.4,371.1 c-9.6,7.6-18.1,19.9-18.1,39.2v332.3c0,15.9,8.2,26.9,24.8,26.9h441.7c16.6,0,24.8-11,24.8-26.9V410.3 C757.6,391,749.2,378.7,739.6,371.1z M702.6,692.7c0,14.8-8.4,21.7-20.7,21.7H342.2c-12.3,0-20.7-6.9-20.7-21.7V433.2 c0-14.4,3.4-22.6,13.6-30.7c5.8-4.6,160.3-126.6,164.4-129.8c4.1-3.3,8.5-4.9,12.5-4.9c4,0,8.4,1.7,12.5,4.9 c4.1,3.3,158.6,125.3,164.4,129.8c10.2,8.1,13.6,16.4,13.6,30.7L702.6,692.7z"/>
|
||||
<path fill="#FFBE41" d="M688.9,402.5c-5.8-4.5-160.3-126.6-164.4-129.8c-4.1-3.3-8.5-4.9-12.5-4.9c-4,0-8.4,1.7-12.5,4.9 c-4.1,3.3-158.6,125.3-164.4,129.8c-10.2,8.1-13.6,16.4-13.6,30.7v259.5c0,14.8,8.4,21.7,20.7,21.7h339.7 c12.3,0,20.7-6.9,20.7-21.7V433.2C702.5,418.9,699.1,410.6,688.9,402.5z M647.4,642.8c0,11.9-6.6,16.5-15.6,16.5H392.2 c-9,0-15.6-4.6-15.6-16.5V456.2c0-8.3,0-14.9,9.1-22.2c6-4.8,113.2-89.4,116.4-91.9s6.4-3.8,9.9-3.8c3.6,0.1,7.1,1.5,9.9,3.8 c3.2,2.5,110.4,87.1,116.4,91.9c9.1,7.3,9.1,13.9,9.1,22.2L647.4,642.8z"/>
|
||||
<path fill="#FFD260" d="M638.3,434c-6-4.8-113.2-89.4-116.4-91.9c-2.8-2.4-6.3-3.7-9.9-3.8c-3.5,0-6.7,1.3-9.9,3.8 S391.6,429.2,385.7,434c-9.1,7.3-9.1,13.9-9.1,22.2v186.6c0,11.9,6.6,16.5,15.6,16.5h239.5c9,0,15.6-4.6,15.6-16.5V456.2 C647.4,447.8,647.4,441.2,638.3,434z M592.3,593c0,9.2-4.6,11.2-11,11.2H442.8c-6.4,0-11-2.1-11-11.2V479.1 c0-6.4,2.9-12.6,7.8-16.6c2.8-2.3,63-49.4,65.1-51.1c4.2-3.5,10.4-3.5,14.6,0c2.2,1.7,62.3,48.8,65.1,51.1 c5,4.1,7.9,10.2,7.8,16.6L592.3,593z"/>
|
||||
<path fill="#FFE780" d="M512,604.1h69.2c6.4,0,11-2.1,11-11.2V479.1c0-6.4-2.9-12.6-7.8-16.6c-2.8-2.3-63-49.4-65.1-51.1 c-4.2-3.5-10.4-3.5-14.6,0c-2.1,1.7-62.3,48.8-65.1,51.1c-5,4.1-7.9,10.2-7.8,16.6v113.8c0,9.2,4.6,11.2,11,11.2L512,604.1z"/>
|
||||
</svg>
|
||||
<h1 class="title">Apple HomeKit</h1>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
|
|
@ -493,6 +532,10 @@
|
|||
}
|
||||
|
||||
// navigation
|
||||
document.getElementById('btn-back').addEventListener('click', function() {
|
||||
window.location.href = 'index.html';
|
||||
});
|
||||
|
||||
document.getElementById('btn-standard').addEventListener('click', function() {
|
||||
var p = new URLSearchParams();
|
||||
if (ip) p.set('ip', ip);
|
||||
|
|
|
|||
Loading…
Reference in a new issue