Skip to content

Commit e993d8b

Browse files
stringhandlerstringhandler
committed
update download button
1 parent 2686ea1 commit e993d8b

3 files changed

Lines changed: 210 additions & 0 deletions

File tree

‎docs/index.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -424,6 +424,29 @@ <h4>Legal</h4>
424424
</div>
425425
</footer>
426426

427+
<!-- Post-Download Community Modal -->
428+
<div id="community-modal" class="modal-overlay" role="dialog" aria-modal="true" aria-labelledby="modal-title" hidden>
429+
<div class="modal">
430+
<button class="modal-close" aria-label="Close">&times;</button>
431+
<div class="modal-icon">
432+
<svg viewBox="0 0 24 24" fill="currentColor" width="40" height="40"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03z"/></svg>
433+
</div>
434+
<h2 id="modal-title" class="modal-title">Your download is starting!</h2>
435+
<p class="modal-subtitle">While you wait — come hang out with other Dota Keeper players.</p>
436+
<div class="modal-actions">
437+
<a href="https://discord.gg/pgNrDSXV" target="_blank" rel="noopener" class="modal-btn modal-btn-discord">
438+
<svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03z"/></svg>
439+
Join the Discord
440+
</a>
441+
<a href="https://twitter.com/dotakeeperapp" target="_blank" rel="noopener" class="modal-btn modal-btn-twitter">
442+
<svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
443+
Follow on X
444+
</a>
445+
</div>
446+
<button class="modal-skip" id="modal-skip">Maybe later</button>
447+
</div>
448+
</div>
449+
427450
<script src="script.js"></script>
428451
</body>
429452
</html>

‎docs/script.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -452,6 +452,43 @@ function setupRippleEffect() {
452452
}
453453
}
454454

455+
// ================================
456+
// POST-DOWNLOAD COMMUNITY MODAL
457+
// ================================
458+
function setupDownloadModal() {
459+
const modal = document.getElementById('community-modal');
460+
if (!modal) return;
461+
462+
const closeModal = () => {
463+
modal.classList.remove('visible');
464+
setTimeout(() => { modal.hidden = true; }, 300);
465+
};
466+
467+
const openModal = () => {
468+
modal.hidden = false;
469+
// Force reflow so the transition plays
470+
modal.offsetHeight;
471+
modal.classList.add('visible');
472+
};
473+
474+
// Trigger on any download button click — let the download proceed normally
475+
const downloadBtns = document.querySelectorAll('.btn-download, #dl-windows, #dl-macos-arm, #dl-macos-x64, #dl-linux');
476+
downloadBtns.forEach(btn => {
477+
btn.addEventListener('click', () => {
478+
setTimeout(openModal, 800);
479+
});
480+
});
481+
482+
modal.querySelector('.modal-close').addEventListener('click', closeModal);
483+
document.getElementById('modal-skip').addEventListener('click', closeModal);
484+
modal.addEventListener('click', (e) => {
485+
if (e.target === modal) closeModal();
486+
});
487+
document.addEventListener('keydown', (e) => {
488+
if (e.key === 'Escape' && !modal.hidden) closeModal();
489+
});
490+
}
491+
455492
// ================================
456493
// INITIALIZE EVERYTHING
457494
// ================================
@@ -477,6 +514,9 @@ document.addEventListener('DOMContentLoaded', () => {
477514
// Setup button ripple effects
478515
setupRippleEffect();
479516

517+
// Setup post-download community modal
518+
setupDownloadModal();
519+
480520
// Log welcome message
481521
console.log('%c⚔️ DOTA KEEPER ⚔️', 'font-size: 24px; font-weight: bold; color: #f4c430;');
482522
console.log('%cTrack your matches. Set your goals. Dominate the game.', 'font-size: 14px; color: #94a3b8;');

‎docs/style.css‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1161,3 +1161,150 @@ button:focus {
11611161
color: #fff;
11621162
transform: translateY(-1px);
11631163
}
1164+
1165+
/* Post-download community modal */
1166+
.modal-overlay {
1167+
position: fixed;
1168+
inset: 0;
1169+
background: rgba(0, 0, 0, 0.75);
1170+
backdrop-filter: blur(6px);
1171+
display: flex;
1172+
align-items: center;
1173+
justify-content: center;
1174+
z-index: 1000;
1175+
padding: 1rem;
1176+
opacity: 0;
1177+
transition: opacity 0.3s ease;
1178+
}
1179+
1180+
.modal-overlay.visible {
1181+
opacity: 1;
1182+
}
1183+
1184+
.modal-overlay[hidden] {
1185+
display: none;
1186+
}
1187+
1188+
.modal {
1189+
background: linear-gradient(135deg, rgba(20, 25, 45, 0.98), rgba(14, 18, 32, 0.98));
1190+
border: 1px solid rgba(244, 196, 48, 0.2);
1191+
border-radius: 16px;
1192+
padding: 2.5rem 2rem 2rem;
1193+
max-width: 420px;
1194+
width: 100%;
1195+
text-align: center;
1196+
position: relative;
1197+
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255,255,255,0.05);
1198+
transform: translateY(20px);
1199+
transition: transform 0.3s ease;
1200+
}
1201+
1202+
.modal-overlay.visible .modal {
1203+
transform: translateY(0);
1204+
}
1205+
1206+
.modal-close {
1207+
position: absolute;
1208+
top: 1rem;
1209+
right: 1rem;
1210+
background: none;
1211+
border: none;
1212+
color: #64748b;
1213+
font-size: 1.5rem;
1214+
line-height: 1;
1215+
cursor: pointer;
1216+
padding: 0.25rem 0.5rem;
1217+
border-radius: 4px;
1218+
transition: color 0.2s, background 0.2s;
1219+
}
1220+
1221+
.modal-close:hover {
1222+
color: var(--text-primary);
1223+
background: rgba(255,255,255,0.08);
1224+
}
1225+
1226+
.modal-icon {
1227+
color: #5865F2;
1228+
margin-bottom: 1rem;
1229+
}
1230+
1231+
.modal-title {
1232+
font-family: var(--font-display);
1233+
font-size: 1.4rem;
1234+
font-weight: 700;
1235+
color: var(--text-primary);
1236+
margin: 0 0 0.5rem;
1237+
text-transform: uppercase;
1238+
letter-spacing: 0.03em;
1239+
}
1240+
1241+
.modal-subtitle {
1242+
color: #94a3b8;
1243+
font-size: 0.95rem;
1244+
margin: 0 0 1.75rem;
1245+
line-height: 1.5;
1246+
}
1247+
1248+
.modal-actions {
1249+
display: flex;
1250+
flex-direction: column;
1251+
gap: 0.75rem;
1252+
margin-bottom: 1rem;
1253+
}
1254+
1255+
.modal-btn {
1256+
display: flex;
1257+
align-items: center;
1258+
justify-content: center;
1259+
gap: 0.6rem;
1260+
padding: 0.85rem 1.5rem;
1261+
font-family: var(--font-display);
1262+
font-size: 0.95rem;
1263+
font-weight: 700;
1264+
text-transform: uppercase;
1265+
letter-spacing: 0.05em;
1266+
text-decoration: none;
1267+
border-radius: 8px;
1268+
transition: all 0.2s ease;
1269+
}
1270+
1271+
.modal-btn-discord {
1272+
background: #5865F2;
1273+
color: #fff;
1274+
border: none;
1275+
}
1276+
1277+
.modal-btn-discord:hover {
1278+
background: #4752c4;
1279+
transform: translateY(-2px);
1280+
box-shadow: 0 8px 24px rgba(88, 101, 242, 0.4);
1281+
}
1282+
1283+
.modal-btn-twitter {
1284+
background: rgba(29, 161, 242, 0.12);
1285+
color: #6bb8f5;
1286+
border: 1px solid rgba(29, 161, 242, 0.35);
1287+
}
1288+
1289+
.modal-btn-twitter:hover {
1290+
background: rgba(29, 161, 242, 0.25);
1291+
border-color: #1DA1F2;
1292+
color: #fff;
1293+
transform: translateY(-2px);
1294+
}
1295+
1296+
.modal-skip {
1297+
background: none;
1298+
border: none;
1299+
color: #64748b;
1300+
font-size: 0.8rem;
1301+
cursor: pointer;
1302+
padding: 0.5rem;
1303+
transition: color 0.2s;
1304+
text-decoration: underline;
1305+
text-underline-offset: 3px;
1306+
}
1307+
1308+
.modal-skip:hover {
1309+
color: #94a3b8;
1310+
}

0 commit comments

Comments
 (0)