Skip to content

Commit 2b87bf8

Browse files
sahmed0sahmed0
committed
media queries for smartphones
1 parent 121e494 commit 2b87bf8

6 files changed

Lines changed: 484 additions & 249 deletions

File tree

‎src/App.module.css‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
/* Copyright (c) 2026 Sajid Ahmed. All rights reserved. */
2+
3+
.appContainer {
4+
color: #1e293b;
5+
height: 100vh;
6+
width: 100vw;
7+
overflow: hidden;
8+
position: relative;
9+
display: flex;
10+
flex-direction: column;
11+
}
12+
13+
.header {
14+
padding: 1rem 1.5rem;
15+
background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.9));
16+
backdrop-filter: blur(8px) saturate(2.0);
17+
-webkit-backdrop-filter: blur(8px) saturate(2.0);
18+
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
19+
border-top: 1px solid rgba(255, 255, 255, 0.7);
20+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
21+
display: flex;
22+
align-items: center;
23+
justify-content: space-between;
24+
z-index: 30;
25+
position: relative;
26+
flex-shrink: 0;
27+
}
28+
29+
.title {
30+
margin: 0;
31+
font-size: 1.2rem;
32+
font-weight: 800;
33+
color: #1e293b;
34+
letter-spacing: -0.02em;
35+
display: flex;
36+
align-items: center;
37+
gap: 8px;
38+
}
39+
40+
.symbol {
41+
color: #3b82f6;
42+
}
43+
44+
.nav {
45+
display: flex;
46+
align-items: center;
47+
gap: 20px;
48+
}
49+
50+
.githubLink {
51+
display: flex;
52+
align-items: center;
53+
color: #1e293b;
54+
text-decoration: none;
55+
transition: all 0.2s;
56+
opacity: 0.8;
57+
}
58+
59+
.githubLink:hover {
60+
opacity: 1;
61+
transform: scale(1.1);
62+
}
63+
64+
.divider {
65+
height: 16px;
66+
width: 1px;
67+
background: rgba(59, 130, 246, 0.2);
68+
}
69+
70+
.copyright {
71+
font-size: 12px;
72+
font-weight: 600;
73+
color: #64748b;
74+
opacity: 0.8;
75+
letter-spacing: 0.02em;
76+
}
77+
78+
.mainContent {
79+
position: relative;
80+
flex: 1;
81+
min-height: 0;
82+
display: flex;
83+
}
84+
85+
@media (max-width: 768px) {
86+
.header {
87+
padding: 0.75rem 1rem;
88+
}
89+
90+
.title {
91+
font-size: 1rem;
92+
}
93+
94+
.nav {
95+
gap: 12px;
96+
}
97+
98+
.copyright {
99+
display: none;
100+
}
101+
102+
.titleText {
103+
display: none;
104+
}
105+
}

‎src/App.tsx‎

Lines changed: 11 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,35 @@
11
import HeatmapContainer from "./components/HeatmapContainer";
22
import { activeSymbol } from './ui/store';
3+
import styles from './App.module.css';
34

45
function App() {
56
return (
6-
<div style="color: #1e293b; height: 100vh; width: 100vw; overflow: hidden; position: relative;">
7-
<header style={{
8-
padding: '1rem 1.5rem',
9-
background: 'linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.9))',
10-
'backdrop-filter': 'blur(8px) saturate(2.0)',
11-
'-webkit-backdrop-filter': 'blur(8px) saturate(2.0)',
12-
'border-bottom': '1px solid rgba(255, 255, 255, 0.3)',
13-
'border-top': '1px solid rgba(255, 255, 255, 0.7)',
14-
'box-shadow': '0 10px 30px rgba(0, 0, 0, 0.05), inset 0 0 0 1px rgba(255, 255, 255, 0.1)',
15-
display: 'flex',
16-
'align-items': 'center',
17-
'justify-content': 'space-between',
18-
'z-index': '30',
19-
position: 'relative',
20-
}}>
21-
<h1 style={{
22-
margin: '0',
23-
'font-size': '1.2rem',
24-
'font-weight': '800',
25-
color: '#1e293b',
26-
'letter-spacing': '-0.02em',
27-
display: 'flex',
28-
'align-items': 'center',
29-
gap: '8px',
30-
}}>
31-
<span style={{ color: '#3b82f6' }}>{activeSymbol().replace('USDT', '/USDT')}</span>{' '}
32-
Binance Order Book Heatmap
7+
<div class={styles.appContainer}>
8+
<header class={styles.header}>
9+
<h1 class={styles.title}>
10+
<span class={styles.symbol}>{activeSymbol().replace('USDT', '/USDT')}</span>{' '}
11+
<span class={styles.titleText}>Binance Order Book Heatmap</span>
3312
</h1>
3413

35-
<div style={{
36-
display: 'flex',
37-
'align-items': 'center',
38-
gap: '20px',
39-
}}>
14+
<div class={styles.nav}>
4015
<a
4116
href="https://github.com/sahmed0/crypto-order-book-heatmap.git"
4217
target="_blank"
4318
rel="noopener noreferrer"
44-
style={{
45-
display: 'flex',
46-
'align-items': 'center',
47-
color: '#1e293b',
48-
'text-decoration': 'none',
49-
transition: 'all 0.2s',
50-
opacity: '0.8',
51-
}}
52-
onMouseEnter={(e) => {
53-
e.currentTarget.style.opacity = '1';
54-
e.currentTarget.style.transform = 'scale(1.1)';
55-
}}
56-
onMouseLeave={(e) => {
57-
e.currentTarget.style.opacity = '0.8';
58-
e.currentTarget.style.transform = 'scale(1)';
59-
}}
19+
class={styles.githubLink}
6020
>
6121
<svg height="24" width="24" viewBox="0 0 16 16" fill="currentColor">
6222
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
6323
</svg>
6424
</a>
65-
<div style={{
66-
height: '16px',
67-
width: '1px',
68-
background: 'rgba(59, 130, 246, 0.2)',
69-
}} />
70-
<span style={{
71-
'font-size': '12px',
72-
'font-weight': '600',
73-
color: '#64748b',
74-
opacity: '0.8',
75-
'letter-spacing': '0.02em',
76-
}}>
25+
<div class={styles.divider} />
26+
<span class={styles.copyright}>
7727
&copy; 2026 Sajid Ahmed
7828
</span>
7929
</div>
8030
</header>
8131

82-
<main style="position: relative; height: calc(100% - 52px);">
32+
<main class={styles.mainContent}>
8333
{/* Switch back to live container */}
8434
<HeatmapContainer />
8535
</main>

0 commit comments

Comments
 (0)