diff --git a/_sass/blocks/joinzone.scss b/_sass/blocks/joinzone.scss index 2586a67f..59e9de50 100644 --- a/_sass/blocks/joinzone.scss +++ b/_sass/blocks/joinzone.scss @@ -35,4 +35,92 @@ .download-prompt { margin-top: 30px; } -} \ No newline at end of file + + .joinzone__actions { + display: flex; + gap: 12px; + justify-content: center; + align-items: center; + flex-wrap: wrap; + margin-top: 14px; + } + + .joinzone__status { + margin-top: 16px; + color: #54595e; + } + + .joinzone__fallback { + margin-top: 18px; + max-width: 720px; + margin-left: auto; + margin-right: auto; + } +} + +.joinzone-openapp-modal { + position: fixed; + inset: 0; + z-index: 10000; + display: flex; + align-items: center; + justify-content: center; + padding: 20px; +} + +.joinzone-openapp-modal[hidden] { + display: none; +} + +.joinzone-openapp-modal__backdrop { + position: absolute; + inset: 0; + background: rgba(0, 0, 0, 0.55); +} + +.joinzone-openapp-modal__dialog { + position: relative; + width: 100%; + max-width: 560px; + background: #ffffff; + border-radius: 14px; + padding: 24px 22px; + box-shadow: 0 18px 60px rgba(0, 0, 0, 0.3); +} + +.joinzone-openapp-modal__title { + margin-top: 0; + margin-bottom: 8px; + color: #2d3e50; +} + +.joinzone-openapp-modal__text { + margin-top: 0; + color: #54595e; +} + +.joinzone-openapp-modal__actions { + display: flex; + gap: 12px; + flex-wrap: wrap; + margin-top: 16px; +} + +.joinzone-openapp-modal__note { + margin-top: 14px; + margin-bottom: 0; + color: #54595e; + font-size: 14px; +} + +.joinzone-openapp-modal__close { + position: absolute; + top: 10px; + right: 12px; + border: 0; + background: transparent; + font-size: 28px; + line-height: 1; + cursor: pointer; + color: #2d3e50; +} diff --git a/joinzone.html b/joinzone.html index 87361bb4..4bf298a2 100644 --- a/joinzone.html +++ b/joinzone.html @@ -9,66 +9,190 @@ --- + + +
+ +Click below to open the Diode app and join this Zone.
+No app? Download Diode
+Click the "Join" button on the Zones page in Diode and enter this Join Code!
-If Diode didn’t open, you can use the Join Code above or download the app.
+ Get Diode +
Need Diode?