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 :)
+ >
)
}