shihaam/dhiraagu-edir
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

better desktop mode

Browse Source
This commit is contained in:
shihaam
2026-03-24 01:07:46 +05:00
parent 7b606ffc13
commit 0fae62068b
1 changed files with 57 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+38 -7
View File
@@ -101,14 +101,33 @@
.container { .container {
width: 100%; width: 100%;
max-width: 800px; max-width: 1400px;
}
.main-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
align-items: start;
}
.main-layout > .left-column,
.main-layout > .right-column {
display: flex;
flex-direction: column;
gap: 20px;
}
@media (max-width: 1024px) {
.main-layout {
grid-template-columns: 1fr;
}
} }
.card { .card {
background-color: var(--bg-card); background-color: var(--bg-card);
border: 2px solid var(--border); border: 2px solid var(--border);
padding: 28px; padding: 28px;
margin-bottom: 20px;
} }
.header { .header {
@@ -773,10 +792,11 @@
.emergency-grid { .emergency-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 12px; gap: 16px;
} }
.emergency-card { .emergency-card {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -840,6 +860,7 @@
.emergency-section { .emergency-section {
margin-top: 20px; margin-top: 20px;
border: 2px solid var(--border); border: 2px solid var(--border);
height: fit-content;
} }
.emergency-section summary { .emergency-section summary {
@@ -863,16 +884,20 @@
} }
.emergency-section summary::after { .emergency-section summary::after {
content: 'expand_more'; content: '▼';
font-family: 'Material Icons'; font-size: 12px;
font-size: 24px;
transition: transform 0.2s ease; transition: transform 0.2s ease;
opacity: 0.5;
} }
.emergency-section[open] summary::after { .emergency-section[open] summary::after {
transform: rotate(180deg); transform: rotate(180deg);
} }
.emergency-section summary:hover::after {
opacity: 1;
}
.emergency-section summary:hover { .emergency-section summary:hover {
color: var(--orange); color: var(--orange);
background-color: var(--bg-card); background-color: var(--bg-card);
@@ -885,6 +910,8 @@
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div class="main-layout">
<div class="left-column">
<div class="card"> <div class="card">
<div class="header"> <div class="header">
<div class="logo"> <div class="logo">
@@ -961,7 +988,9 @@
<p>Your searches will appear here</p> <p>Your searches will appear here</p>
</div> </div>
</div> </div>
</div>
<div class="right-column">
<div class="card"> <div class="card">
<div class="section-header"> <div class="section-header">
<h2 class="section-title">Emergency Numbers</h2> <h2 class="section-title">Emergency Numbers</h2>
@@ -1128,6 +1157,8 @@
</details> </details>
</div> </div>
</div> </div>
</div>
</div>
<div class="toast" id="toast"> <div class="toast" id="toast">
<span class="material-icons" id="toastIcon"></span> <span class="material-icons" id="toastIcon"></span>