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
+57 -26
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,18 +910,20 @@
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div class="card"> <div class="main-layout">
<div class="header"> <div class="left-column">
<div class="logo"> <div class="card">
<div class="logo-icon"> <div class="header">
<span class="material-icons">contacts</span> <div class="logo">
<div class="logo-icon">
<span class="material-icons">contacts</span>
</div>
<h1>E-Dir</h1>
</div>
<p class="subtitle">Dhiraagu Directory Lookup</p>
</div> </div>
<h1>E-Dir</h1>
</div>
<p class="subtitle">Dhiraagu Directory Lookup</p>
</div>
<form id="searchForm"> <form id="searchForm">
<div class="input-group"> <div class="input-group">
<input <input
type="tel" type="tel"
@@ -954,18 +981,20 @@
</div> </div>
</div> </div>
<div class="mobile-table" id="mobileTable"></div> <div class="mobile-table" id="mobileTable"></div>
<div id="emptyStateMobile" class="empty-state mobile-table"> <div id="emptyStateMobile" class="empty-state mobile-table">
<span class="material-icons">history</span> <span class="material-icons">history</span>
<h3>No search history yet</h3> <h3>No search history yet</h3>
<p>Your searches will appear here</p> <p>Your searches will appear here</p>
</div>
</div> </div>
</div> </div>
<div class="card"> <div class="right-column">
<div class="section-header"> <div class="card">
<h2 class="section-title">Emergency Numbers</h2> <div class="section-header">
</div> <h2 class="section-title">Emergency Numbers</h2>
</div>
<div class="emergency-grid"> <div class="emergency-grid">
<a href="tel:119" class="emergency-card emergency-critical"> <a href="tel:119" class="emergency-card emergency-critical">
<span class="material-icons">local_police</span> <span class="material-icons">local_police</span>
@@ -1126,6 +1155,8 @@
</a> </a>
</div> </div>
</details> </details>
</div>
</div>
</div> </div>
</div> </div>