manohar/dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: mobile responsive layout

Browse source
This commit is contained in:
Manohar Gupta 2026-05-11 10:05:28 +05:30
parent 780668d7ef
commit 5cf6f658ef
1 changed files with 26 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
index.html
View file

@ -15,6 +15,28 @@
html,body,#root{min-height:100vh} html,body,#root{min-height:100vh}
body{font-family:'DM Sans',sans-serif} body{font-family:'DM Sans',sans-serif}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--pulse-c)}70%{box-shadow:0 0 0 5px transparent}100%{box-shadow:0 0 0 0 transparent}} @keyframes pulse{0%{box-shadow:0 0 0 0 var(--pulse-c)}70%{box-shadow:0 0 0 5px transparent}100%{box-shadow:0 0 0 0 transparent}}
/* ── Mobile responsive ───────────────────────────────────────── */
@media (max-width: 640px) {
.main { padding: 20px 14px 48px !important; }
.hdr { flex-direction: column !important; gap: 16px !important; }
.clock { font-size: 48px !important; letter-spacing: -1px !important; }
.clock-s { font-size: 28px !important; }
.pill { border-radius: 10px !important; align-self: stretch !important; flex-wrap: wrap !important; }
.pill-cell { flex: 1 1 40% !important; padding: 8px 10px !important; }
.pill-div { display: none !important; }
.pill-val { font-size: 14px !important; }
.pill-lbl { font-size: 10px !important; }
.wgrid { grid-template-columns: 1fr 1fr !important; }
.sgrid { grid-template-columns: 1fr 1fr !important; }
.dark-btn { top: 12px !important; right: 12px !important; width: 34px !important; height: 34px !important; font-size: 15px !important; }
.ts-lbl { top: 17px !important; right: 52px !important; }
}
@media (max-width: 400px) {
.clock { font-size: 38px !important; }
.wgrid { grid-template-columns: 1fr !important; }
.sgrid { grid-template-columns: 1fr !important; }
}
</style> </style>
</head> </head>
<body> <body>
@ -178,10 +200,10 @@ function Markets({data}){
function StatCell({val,lbl}){ function StatCell({val,lbl}){
const[h,sH]=useState(false); const[h,sH]=useState(false);
return( return(
<div onMouseEnter={()=>sH(true)} onMouseLeave={()=>sH(false)} <div className='pill-cell' onMouseEnter={()=>sH(true)} onMouseLeave={()=>sH(false)}
style={{textAlign:"center",padding:"8px 20px",background:h?"var(--c-accent-faint)":"transparent",transition:"background 0.15s",cursor:"default"}}> style={{textAlign:"center",padding:"8px 20px",background:h?"var(--c-accent-faint)":"transparent",transition:"background 0.15s",cursor:"default"}}>
<div style={{fontFamily:"'DM Mono',monospace",fontWeight:500,fontSize:15,color:h?"var(--c-accent)":"var(--c-text)",transition:"color 0.15s"}}>{val}</div> <div className='pill-val' style={{fontFamily:"'DM Mono',monospace",fontWeight:500,fontSize:15,color:h?"var(--c-accent)":"var(--c-text)",transition:"color 0.15s"}}>{val}</div>
<div style={{fontSize:11,color:h?"var(--c-accent)":"var(--c-muted)",marginTop:2,letterSpacing:"0.06em",textTransform:"uppercase",transition:"color 0.15s"}}>{lbl}</div> <div className='pill-lbl' style={{fontSize:11,color:h?"var(--c-accent)":"var(--c-muted)",marginTop:2,letterSpacing:"0.06em",textTransform:"uppercase",transition:"color 0.15s"}}>{lbl}</div>
</div> </div>
); );
} }
@ -278,7 +300,7 @@ function App(){
<div style={{fontSize:14,color:"var(--c-muted)",marginBottom:6}}>{greet(now.getHours())}, Manohar</div> <div style={{fontSize:14,color:"var(--c-muted)",marginBottom:6}}>{greet(now.getHours())}, Manohar</div>
<div style={{fontFamily:"'DM Mono',monospace",fontSize:60,fontWeight:500,letterSpacing:"-2px",lineHeight:1,color:"var(--c-text)"}}> <div style={{fontFamily:"'DM Mono',monospace",fontSize:60,fontWeight:500,letterSpacing:"-2px",lineHeight:1,color:"var(--c-text)"}}>
{String(now.getHours()).padStart(2,"0")}:{String(now.getMinutes()).padStart(2,"0")} {String(now.getHours()).padStart(2,"0")}:{String(now.getMinutes()).padStart(2,"0")}
<span style={{fontSize:35,opacity:0.35,marginLeft:4}}>:{String(now.getSeconds()).padStart(2,"0")}</span> <span className='clock-s' style={{fontSize:35,opacity:0.35,marginLeft:4}}>:{String(now.getSeconds()).padStart(2,"0")}</span>
</div> </div>
<div style={{marginTop:6,display:"flex",alignItems:"center",gap:8}}> <div style={{marginTop:6,display:"flex",alignItems:"center",gap:8}}>
<span style={{fontSize:13,fontWeight:500,color:"var(--c-muted)"}}>{now.toLocaleDateString("en-US",{weekday:"long"})}</span> <span style={{fontSize:13,fontWeight:500,color:"var(--c-muted)"}}>{now.toLocaleDateString("en-US",{weekday:"long"})}</span>