136 lines
5.4 KiB
HTML
136 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ja">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
|
|
<title>App Info - Aiat</title>
|
|
<link rel="icon" type="image/png" href="/static/favicon.png">
|
|
<style>
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
|
line-height: 1.6;
|
|
color: #1a1a1a;
|
|
background: #fff;
|
|
padding: 20px;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
body { background: #000; color: #e0e0e0; }
|
|
a { color: #6bb3ff; }
|
|
h1, h2, h3 { color: #fff; }
|
|
.section { background: #1a1a1a; }
|
|
.info-item { background: #2a2a2a; }
|
|
}
|
|
.header { margin-bottom: 32px; }
|
|
.back-link { display: inline-block; margin-bottom: 16px; font-size: 14px; color: #0066cc; text-decoration: none; }
|
|
.back-link:hover { text-decoration: underline; }
|
|
.app-header { text-align: center; margin-bottom: 32px; }
|
|
.app-icon { width: 80px; height: 80px; border-radius: 18px; margin-bottom: 12px; }
|
|
.app-name { font-size: 24px; font-weight: bold; margin-bottom: 4px; }
|
|
.app-version { font-size: 14px; color: #666; }
|
|
.section { background: #f5f5f5; border-radius: 16px; padding: 20px; margin-bottom: 16px; }
|
|
.section-title { font-size: 13px; font-weight: 600; color: #999; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; }
|
|
.description { font-size: 15px; line-height: 22px; }
|
|
.info-grid { display: flex; flex-wrap: wrap; gap: 8px; }
|
|
.info-item { flex: 1; min-width: 45%; text-align: center; background: #e8e8e8; border-radius: 12px; padding: 12px; }
|
|
.info-label { font-size: 11px; color: #999; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
|
|
.info-value { font-size: 16px; font-weight: 600; }
|
|
.developer-name { font-size: 18px; font-weight: 600; margin-bottom: 12px; }
|
|
.link-row { display: flex; align-items: center; padding: 12px 0; border-top: 1px solid rgba(0,0,0,0.1); }
|
|
.link-icon { font-size: 14px; font-weight: 600; color: #666; width: 70px; }
|
|
.link-value { flex: 1; font-size: 14px; color: #0084ff; text-decoration: none; }
|
|
.link-value:hover { text-decoration: underline; }
|
|
.link-arrow { font-size: 16px; color: #ccc; }
|
|
.bitcoin-row { display: flex; align-items: center; background: rgba(247, 147, 26, 0.08); border-radius: 12px; padding: 14px; gap: 10px; }
|
|
.bitcoin-label { font-size: 18px; font-weight: 600; color: #f7931a; }
|
|
.bitcoin-address { flex: 1; font-size: 11px; font-family: monospace; color: #666; word-break: break-all; }
|
|
.copy-btn { font-size: 12px; color: #999; cursor: pointer; min-width: 50px; text-align: right; }
|
|
.copy-btn:hover { color: #0084ff; }
|
|
.footer { text-align: center; margin-top: 32px; padding-top: 20px; border-top: 1px solid #ddd; }
|
|
.copyright { font-size: 12px; color: #999; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<a href="/" class="back-link">← Back to syu.is</a>
|
|
</div>
|
|
|
|
<div class="app-header">
|
|
<img src="/static/app.png" alt="Aiat" class="app-icon">
|
|
<div class="app-name">Aiat</div>
|
|
<div class="app-version">v1.111.0</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<p class="description">Aiat is a social networking application based on AT Protocol. Connect with your community on syu.is.</p>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<div class="section-title">App Information</div>
|
|
<div class="info-grid">
|
|
<div class="info-item">
|
|
<div class="info-label">Version</div>
|
|
<div class="info-value">1.111.0</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">Category</div>
|
|
<div class="info-value">Social</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">Supported OS</div>
|
|
<div class="info-value">iOS 26.0+</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">Price</div>
|
|
<div class="info-value">Free</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<div class="section-title">Developer</div>
|
|
<div class="developer-name">syui</div>
|
|
<div class="link-row">
|
|
<span class="link-icon">GitHub</span>
|
|
<a href="https://github.com/syui" class="link-value" target="_blank">github.com/syui</a>
|
|
<span class="link-arrow">→</span>
|
|
</div>
|
|
<div class="link-row">
|
|
<span class="link-icon">ATProto</span>
|
|
<a href="https://syu.is/syui" class="link-value" target="_blank">syu.is/syui</a>
|
|
<span class="link-arrow">→</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<div class="section-title">Bitcoin</div>
|
|
<div class="bitcoin-row">
|
|
<span class="bitcoin-label">₿</span>
|
|
<span class="bitcoin-address" id="btc-address">3BqHXxraZyBapyNpJmniJDh9zqzuB8aoRr</span>
|
|
<span class="copy-btn" onclick="copyBTC()">copy</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
<p class="copyright">© syui</p>
|
|
</div>
|
|
|
|
<script>
|
|
function copyBTC() {
|
|
const addr = document.getElementById('btc-address').textContent;
|
|
navigator.clipboard.writeText(addr).then(() => {
|
|
const btn = document.querySelector('.copy-btn');
|
|
btn.textContent = 'copied!';
|
|
btn.style.color = '#4CAF50';
|
|
setTimeout(() => {
|
|
btn.textContent = 'copy';
|
|
btn.style.color = '';
|
|
}, 2000);
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|