Skip to content

Commit eff9526

Browse files
9711510497115104
committed
Fixed button alingments and hopefully metamask integration on mobile
1 parent 8393073 commit eff9526

File tree

4 files changed

+86
-44
lines changed

4 files changed

+86
-44
lines changed

‎create/index.html‎

Lines changed: 58 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,32 @@ <h1 style="margin: 0;">Create AI Attestation</h1>
8282
</span>
8383
</label>
8484

85-
<div class="import-url-container" style="margin-top: 10px; display: flex; gap: 10px; align-items: center;">
85+
<div class="import-url-container" style="margin-top: 10px;">
86+
<style>
87+
.import-url-container {
88+
display: flex;
89+
gap: 10px;
90+
align-items: center;
91+
}
92+
@media (max-width: 768px) {
93+
.import-url-container {
94+
flex-direction: column;
95+
gap: 8px;
96+
align-items: center;
97+
}
98+
.import-url-container input {
99+
width: 100%;
100+
max-width: 100%;
101+
}
102+
.import-url-container button {
103+
display: block;
104+
width: auto;
105+
max-width: 300px;
106+
margin: 0 auto;
107+
padding: 12px 24px;
108+
}
109+
}
110+
</style>
86111
<input type="url" id="import-url" placeholder="Or paste URL to import content..." style="flex: 1;">
87112
<button type="button" id="import-url-btn" class="btn btn-secondary">Import URL</button>
88113
</div>
@@ -208,7 +233,7 @@ <h1 style="margin: 0;">Create AI Attestation</h1>
208233
</div>
209234
<div id="wallet-section">
210235
<div style="padding: 15px; background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 8px;">
211-
<button type="button" id="connect-wallet" class="btn btn-secondary" style="width: 100%;">
236+
<button type="button" id="connect-wallet" class="btn btn-secondary" style="width: 100%; max-width: 100%; display: block; margin: 0 auto;">
212237
<span id="wallet-button-text">Connect Ethereum Wallet</span>
213238
<span id="wallet-spinner" style="display: none; margin-left: 10px;">⏳</span>
214239
</button>
@@ -229,8 +254,8 @@ <h1 style="margin: 0;">Create AI Attestation</h1>
229254
</div>
230255
</div>
231256

232-
<div style="margin-top: 30px;">
233-
<button type="submit" class="btn">Generate Attestation</button>
257+
<div style="margin-top: 30px; text-align: center;">
258+
<button type="submit" class="btn" style="display: inline-block;">Generate Attestation</button>
234259
</div>
235260
</form>
236261

@@ -860,6 +885,31 @@ <h1 style="margin: 0;">Create AI Attestation</h1>
860885

861886
// Mobile detection
862887
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
888+
const isIOS = /iPhone|iPad|iPod/.test(navigator.userAgent);
889+
890+
// Special check for iOS - even if ethereum is undefined, check if we can detect MetaMask app
891+
if (isIOS && !window.ethereum) {
892+
// On iOS, if user has MetaMask installed but we're in Safari/Chrome,
893+
// we need to use the deep link
894+
statusDiv.style.display = 'block';
895+
statusDiv.style.color = 'var(--color-warning)';
896+
897+
const currentUrl = window.location.href;
898+
const metamaskDeepLink = `metamask://dapp/${currentUrl.replace(/^https?:\/\//, '')}`;
899+
const metamaskUniversalLink = `https://metamask.app.link/dapp/${currentUrl.replace(/^https?:\/\//, '')}`;
900+
901+
statusDiv.innerHTML = `
902+
📱 MetaMask Mobile Detection<br><br>
903+
If you have MetaMask installed:<br>
904+
<a href="${metamaskDeepLink}" class="btn btn-secondary" style="display: block; margin: 10px auto; max-width: 300px;">Open in MetaMask App</a>
905+
<br>
906+
If the button above doesn't work:<br>
907+
<a href="${metamaskUniversalLink}" class="btn btn-secondary" style="display: block; margin: 10px auto; max-width: 300px;">Try Universal Link</a>
908+
<br>
909+
Or use <strong>"Local Signature"</strong> below for a simpler option.
910+
`;
911+
return;
912+
}
863913

864914
// Check if any ethereum provider exists
865915
if (typeof window.ethereum === 'undefined') {
@@ -883,16 +933,16 @@ <h1 style="margin: 0;">Create AI Attestation</h1>
883933
const currentUrl = window.location.href;
884934
const metamaskDeepLink = `https://metamask.app.link/dapp/${currentUrl.replace(/^https?:\/\//, '')}`;
885935

886-
mobileMessage += `<a href="${metamaskDeepLink}" class="btn btn-secondary" style="margin: 10px 0;">Open in MetaMask Browser</a><br><br>`;
936+
mobileMessage += `<a href="${metamaskDeepLink}" class="btn btn-secondary" style="display: block; margin: 10px auto; max-width: 300px;">Open in MetaMask Browser</a><br>`;
887937

888938
mobileMessage += 'Option 2: Install MetaMask<br>';
889939
if (isIOS) {
890-
mobileMessage += '<a href="https://apps.apple.com/app/metamask/id1438144202" target="_blank" class="btn btn-secondary">Get MetaMask for iOS</a>';
940+
mobileMessage += '<a href="https://apps.apple.com/app/metamask/id1438144202" target="_blank" class="btn btn-secondary" style="display: block; margin: 10px auto; max-width: 300px;">Get MetaMask for iOS</a>';
891941
} else {
892-
mobileMessage += '<a href="https://play.google.com/store/apps/details?id=io.metamask" target="_blank" class="btn btn-secondary">Get MetaMask for Android</a>';
942+
mobileMessage += '<a href="https://play.google.com/store/apps/details?id=io.metamask" target="_blank" class="btn btn-secondary" style="display: block; margin: 10px auto; max-width: 300px;">Get MetaMask for Android</a>';
893943
}
894944

895-
mobileMessage += '<br><br>Option 3: Use <strong>"Local Signature"</strong> below for a simpler option.';
945+
mobileMessage += '<br>Option 3: Use <strong>"Local Signature"</strong> below for a simpler option.';
896946
} else {
897947
mobileMessage += 'MetaMask browser detected but provider not available.<br>';
898948
mobileMessage += 'Please try refreshing the page or use <strong>"Local Signature"</strong> below.';

‎examples/index.html‎

Lines changed: 0 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -603,37 +603,6 @@ <h1 style="font-size: 32px; margin: 0 0 16px 0; padding-bottom: 10px; border-bot
603603
</div>
604604
</div>
605605

606-
<!-- Website Footer -->
607-
<div class="example-container">
608-
<div class="example-header">
609-
<h3>Website Footer with Minimal Badge</h3>
610-
</div>
611-
<div class="example-content" style="padding: 0;">
612-
<footer style="background: #1a1a1a; color: #e5e7eb; padding: 40px; text-align: center;">
613-
<div style="max-width: 800px; margin: 0 auto;">
614-
<div style="display: flex; justify-content: space-around; flex-wrap: wrap; gap: 30px; margin-bottom: 30px;">
615-
<div>
616-
<h4 style="color: white; margin-bottom: 10px;">Product</h4>
617-
<div style="font-size: 14px; line-height: 2;">Features<br>Pricing<br>Documentation</div>
618-
</div>
619-
<div>
620-
<h4 style="color: white; margin-bottom: 10px;">Company</h4>
621-
<div style="font-size: 14px; line-height: 2;">About<br>Blog<br>Careers</div>
622-
</div>
623-
<div>
624-
<h4 style="color: white; margin-bottom: 10px;">Legal</h4>
625-
<div style="font-size: 14px; line-height: 2;">Privacy<br>Terms<br>Security</div>
626-
</div>
627-
</div>
628-
<div style="border-top: 1px solid #374151; padding-top: 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;">
629-
<div style="font-size: 14px;">© 2025 TechCorp. All rights reserved.</div>
630-
<a href="#" class="badge-glass-minimal" style="color: rgba(255, 255, 255, 0.7); border-color: rgba(255, 255, 255, 0.2);">ai-assisted</a>
631-
</div>
632-
</div>
633-
</footer>
634-
</div>
635-
</div>
636-
637606
<!-- Academic Paper with LaTeX Style -->
638607
<div class="example-container">
639608
<div class="example-header">

‎static/style.css‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1062,7 +1062,7 @@ summary {
10621062
/* URL import mobile fix - Stack input and button */
10631063
.import-url-container {
10641064
flex-direction: column !important;
1065-
align-items: stretch !important;
1065+
align-items: center !important;
10661066
}
10671067

10681068
.import-url-container input[type="url"] {
@@ -1071,8 +1071,10 @@ summary {
10711071
}
10721072

10731073
.import-url-container button {
1074-
width: 100% !important;
1075-
margin: 0 !important;
1074+
width: auto !important;
1075+
max-width: 300px !important;
1076+
margin: 0 auto !important;
1077+
display: block !important;
10761078
}
10771079

10781080
input[type="text"],

‎verify/index.html‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,8 +78,29 @@ <h1>Verify AI Attestation</h1>
7878
<input type="url" id="url-input" placeholder="https://example.com/attestation.json">
7979
</div>
8080

81-
<button id="verify-btn" class="btn">Verify Attestation</button>
82-
<a href="/create/" class="btn btn-secondary" style="margin-left: 10px;">Back to Create</a>
81+
<div class="button-group" style="display: flex; flex-wrap: wrap; gap: 10px;">
82+
<style>
83+
.button-group {
84+
justify-content: flex-start;
85+
}
86+
@media (max-width: 768px) {
87+
.button-group {
88+
justify-content: center;
89+
flex-direction: row;
90+
}
91+
.button-group button,
92+
.button-group a {
93+
flex: 0 1 auto;
94+
min-width: 120px;
95+
max-width: 160px;
96+
padding: 10px 16px;
97+
font-size: 16px;
98+
}
99+
}
100+
</style>
101+
<button id="verify-btn" class="btn">Verify Attestation</button>
102+
<a href="/create/" class="btn btn-secondary">Back to Create</a>
103+
</div>
83104

84105
<div style="margin-top: 30px;">
85106
<details>

0 commit comments

Comments
 (0)