diff --git a/index.html b/index.html index b166d94..a8f920f 100644 --- a/index.html +++ b/index.html @@ -539,8 +539,12 @@ background-color: var(--bg-secondary); } - .mobile-table .phone-link .material-icons { - font-size: 14px; + .mobile-table .phone-icon-btn .material-icons { + font-size: 16px; + } + + .mobile-table .phone-text { + font-size: 13px; } .table-container { @@ -645,40 +649,49 @@ letter-spacing: 1px; } - .phone-cell { - display: inline-flex; - align-items: center; - gap: 8px; + td.phone-number { + padding: 16px 14px; } - .phone-link { - display: inline-flex; + .phone-cell { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 6px; + } + + .phone-icons { + display: flex; + flex-direction: row; + gap: 12px; + } + + .phone-icon-btn { + display: flex; align-items: center; + justify-content: center; color: var(--orange); text-decoration: none; transition: all 0.15s ease; + cursor: pointer; + background: none; + border: none; + padding: 0; } - .phone-link:hover { + .phone-icon-btn:hover { color: #ffaa44; } - .phone-link .material-icons { + .phone-icon-btn .material-icons { font-size: 18px; } .phone-text { color: var(--orange); - cursor: pointer; - transition: all 0.15s ease; - } - - .phone-text:hover { - color: #ffaa44; - } - - .phone-text:active { - opacity: 0.7; + font-weight: 700; + font-family: 'Roboto Mono', monospace; + letter-spacing: 1px; } .result { @@ -896,6 +909,24 @@ padding: 16px; } + .qr-card { + text-align: center; + } + + .qr-card .confirm-title { + margin-bottom: 24px; + } + + .qr-container { + display: flex; + justify-content: center; + margin-bottom: 24px; + } + + .qr-container canvas { + border: 2px solid var(--border); + } + @media (max-width: 768px) { .container { padding: 0; @@ -1351,6 +1382,16 @@ +
+
+

QR Code

+
+
+ +
+
+
+