diff --git a/web/app/components/CenterCol.tsx b/web/app/components/CenterCol.tsx index c76b310..475bc09 100644 --- a/web/app/components/CenterCol.tsx +++ b/web/app/components/CenterCol.tsx @@ -91,11 +91,26 @@ export default function CenterCol() { greet += 'evening' } + const nth = function(d) { + if (d > 3 && d < 21) return 'th'; + switch (d % 10) { + case 1: return "st"; + case 2: return "nd"; + case 3: return "rd"; + default: return "th"; + } + } + + const dayName = function(d) { + const days = ["Monday", "Tuesday", "Wednesday", "Thhursday", "Friday", "Saturday", "Sunday"] + return days[d-1] + } + return (
{greet}, Nishant
-
{"It's 3rd of January, a Monday"}
+
{`It's ${today.getDate()}${nth(today.getDate())} of ${today.toLocaleString('default', { month: 'long' })}, a ${dayName(today.getDay())}`}
diff --git a/web/app/page.module.css b/web/app/page.module.css index d7f8a56..a419bbe 100644 --- a/web/app/page.module.css +++ b/web/app/page.module.css @@ -9,3 +9,22 @@ gap: 30px; } +.overlay { + display: flex; + justify-content: center; + align-items: center; + position: absolute; + width: 100vw; + height: 100vh; + background: #F0F1F5; + padding: 20px; + color: #7F7C9A; + font: bold 1.2em Arial, Sans-serif; + +} + +@media screen and (min-width: 600px){ + .overlay { + visibility: hidden; + } +} diff --git a/web/app/page.tsx b/web/app/page.tsx index 94a9438..14a5792 100644 --- a/web/app/page.tsx +++ b/web/app/page.tsx @@ -6,10 +6,13 @@ import RecentTransactions from './components/RecentTransactions' export default function Home() { return ( -
- - - -
+ <> +
+ + + +
+
The demo is best viewed on the Desktop :)
+ ) }