Files
dynr-websites/sample/static-hostedbubble.js

252 lines
14 KiB
JavaScript

(function() {
if (!document.getElementById('dynasty-fa-link')) {
const fa = document.createElement('link');
fa.id = 'dynasty-fa-link';
fa.rel = 'stylesheet';
fa.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css';
document.head.appendChild(fa);
}
const hostname = window.location.hostname;
const siteMap = {
'netbird.dynastyrevolution.com': 'S2x-KYLIE-NETBIRD',
'git.dynastyrevolution.com': 'S0x-GITEA',
'npm.dynastyrevolution.com': 'S1x-PROXY',
'test.dynastyrevolution.com': 'TESTING-NODE',
'library.dynastyrevolution.com': 'S4x-WEBSITE-PROD',
'dev.dynastyrevolution.com': 'S4x-WEBSITE-DEV',
's1x.dynastyrevolution.com': 'S1x-ALYSSA',
's2x.dynastyrevolution.com': 'S2x-CLARISSA',
's3x.dynastyrevolution.com': 'S3x-DALLAS-HUB',
's4x.dynastyrevolution.com': 'S4x-LOS ANGELES'
};
let currentSite = siteMap[hostname];
if (!currentSite) {
if (hostname.includes('.s0x.')) {
currentSite = 'S0x';
} else if (hostname.includes('.s1x.')) {
currentSite = 'S1x';
} else if (hostname.includes('.s2x.')) {
currentSite = 'S2x-';
}
}
if (!currentSite) currentSite = window.DYNR_SITE;
if (!currentSite) currentSite = hostname.endsWith('dynastyrevolution.com') ? "DYNR REDACTED PROXY" : "CORE-GATEWAY";
let currentRegion = "Global Edge Network";
if (currentSite.includes('S0x')) currentRegion = "Baltimore, Maryland";
else if (currentSite.includes('S1x')) currentRegion = "Austin, Texas";
else if (currentSite.includes('S2x')) currentRegion = "Ogden, Utah";
else if (currentSite.includes('S3x')) currentRegion = "Dallas, Texas";
else if (currentSite.includes('S4x')) currentRegion = "Los Angeles, California";
else if (currentSite === 'TESTING-NODE') currentRegion = "Local Sandbox";
const isAlertStatus = hostname.includes('test') || hostname.includes('dev') || hostname.includes('troubleshoot') || window.DYNR_STATUS === 'ALERT';
let badgeBorderColor = isAlertStatus ? '#FF0000' : '#1FD9F0';
let badgeTextColorClass = "";
if (currentSite.includes('KYLIE')) {
badgeBorderColor = '#80007F';
} else if (currentSite.includes('GITEA')) {
badgeBorderColor = '#D7AF00';
} else if (currentSite.includes('ALYSSA')) {
badgeBorderColor = '#1FD9F0';
badgeTextColorClass = "dynasty-gradient-text";
}
const dynastyHTML = `
<style>
.dynasty-gradient-bg { background: linear-gradient(90deg, #80007F, #D7AF00, #00D7FF, #80007F); background-size: 300% 100%; animation: dynasty-gradient-shift 8s ease infinite; }
.dynasty-gradient-text { background: linear-gradient(90deg, #80007F, #D7AF00, #00D7FF, #80007F); background-size: 300% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: dynasty-gradient-shift 8s ease infinite; }
#dynastyTrigger:hover.dynasty-gradient-bg,
#dynastyTrigger:hover .dynasty-gradient-text { animation-duration: 2s !important; }
@keyframes dynasty-gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
#dynastyTrigger { position: fixed; bottom: 20px; left: 20px; z-index: 9998; padding: 1px; border-radius: 9999px; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border: none; background-color: transparent; outline: none; }
#dynastyTrigger:hover { transform: scale(1.05); }
#dynastyTrigger.is-minimized { border-radius: 50%; }
.dynasty-bubble-inner { background-color: #000000; border-radius: 9999px; padding: 8px 16px; display: flex; align-items: center; font-family: ui-sans-serif, system-ui, sans-serif; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
#dynastyTrigger.is-minimized .dynasty-bubble-inner { padding: 0; width: 44px; height: 44px; border-radius: 50%; justify-content: center; }
.dynasty-expanded-content { display: flex; align-items: center; max-width: 400px; opacity: 1; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; }
#dynastyTrigger.is-minimized .dynasty-expanded-content { max-width: 0; opacity: 0; margin: 0; }
.dynasty-min-btn { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; transition: background-color 0.2s; margin-left: 8px; }
.dynasty-min-btn:hover { background-color: rgba(255,255,255,0.15); }
#dynastyModal { display: none; position: fixed; inset: 0; z-index: 9999; align-items: center; justify-content: center; background-color: rgba(0,0,0,0.8); backdrop-filter: blur(4px); font-family: ui-sans-serif, system-ui, sans-serif; }
#dynastyModal.show { display: flex; }
.dynasty-modal-content { background-color: #000000; border: 1px solid rgba(128,0,127,0.5); border-radius: 8px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); max-width: 425px; width: 90%; padding: 24px; position: relative; color: #ffffff; box-sizing: border-box; }
.dynasty-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 44px; border-radius: 6px; font-weight: bold; text-decoration: none; transition: all 0.2s; cursor: pointer; font-size: 16px; box-sizing: border-box; }
.dynasty-btn-primary { background-color: #80007F; color: #ffffff; border: none; }
.dynasty-btn-primary:hover { background-color: rgba(128,0,127,0.8); }
.dynasty-btn-secondary { background-color: transparent; border: 1px solid #D7AF00; color: #D7AF00; }
.dynasty-btn-secondary:hover { background-color: #D7AF00; color: #000000; }
.dynasty-btn-forcesync { background-color: transparent; border: 1px solid #af5fff; color: #af5fff; }
.dynasty-btn-forcesync:hover { background-color: #af5fff; color: #ffffff; }
.dynasty-btn-dynrblue { background-color: transparent; border: 1px solid #1FD9F0; color: #1FD9F0; }
.dynasty-btn-dynrblue:hover { background-color: #1FD9F0; color: #000000; }
.dynasty-btn-donate { background-color: transparent; border: 1px solid #c3a38c; color: #c3a38c; }
.dynasty-btn-donate:hover { background-color: #D7AF00; color: #000000; }
.dynasty-footer-grid { margin-top: 24px; border-top: 1px solid rgba(161, 161, 170, 0.2); padding-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.dynasty-footer-row { display: flex; justify-content: space-between; align-items: center; }
.dynasty-badge { padding: 4px 8px; border-radius: 6px; background-color: rgba(255, 255, 255, 0.05); }
.dynr-server-icon { width: 18px; height: 18px; fill: none; flex-shrink: 0; }
.dynr-rack-frame { stroke: ${badgeBorderColor}; stroke-width: 1.5; }
.dynr-server-unit { stroke: #a0a0a0; stroke-width: 1.5; }
.dynr-server-led { fill: rgba(255, 255, 255, 0.1); stroke: none; }
@keyframes twinklePurpleGold { 0%, 100% { fill: #80007F; filter: drop-shadow(0 0 2px #80007F); } 50% { fill: #D7AF00; filter: drop-shadow(0 0 5px #D7AF00); } }
@keyframes twinkleGoldBlue { 0%, 100% { fill: #D7AF00; filter: drop-shadow(0 0 2px #D7AF00); } 50% { fill: #1FD9F0; filter: drop-shadow(0 0 5px #1FD9F0); } }
@keyframes twinkleBluePurple { 0%, 100% { fill: #1FD9F0; filter: drop-shadow(0 0 2px #1FD9F0); } 50% { fill: #80007F; filter: drop-shadow(0 0 5px #80007F); } }
.twinkle-1 { animation: twinklePurpleGold 2s infinite ease-in-out; animation-delay: 0s; }
.twinkle-2 { animation: twinkleGoldBlue 1.75s infinite ease-in-out; animation-delay: 0.4s; }
.twinkle-3 { animation: twinkleBluePurple 2.25s infinite ease-in-out; animation-delay: 0.2s; }
.twinkle-4 { animation: twinklePurpleGold 1.5s infinite ease-in-out; animation-delay: 0.6s; }
#dynastyTrigger:hover .twinkle-1 { animation-duration: 0.5s !important; }
#dynastyTrigger:hover .twinkle-2 { animation-duration: 0.4s !important; }
#dynastyTrigger:hover .twinkle-3 { animation-duration: 0.6s !important; }
#dynastyTrigger:hover .twinkle-4 { animation-duration: 0.3s !important; }
</style>
<button id="dynastyTrigger" class="dynasty-gradient-bg">
<div class="dynasty-bubble-inner">
<div style="display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0;">
<svg class="dynr-server-icon" viewBox="0 0 24 24">
<rect x="3" y="2" width="18" height="20" rx="2" ry="2" class="dynr-rack-frame"></rect>
<line x1="3" y1="8" x2="21" y2="8" class="dynr-server-unit"></line>
<line x1="3" y1="14" x2="21" y2="14" class="dynr-server-unit"></line>
<circle cx="6" cy="5" r="1.2" class="dynr-server-led twinkle-1"></circle>
<circle cx="10" cy="5" r="1" class="dynr-server-led twinkle-2"></circle>
<circle cx="14" cy="5" r="1" class="dynr-server-led twinkle-3"></circle>
<circle cx="6" cy="11" r="1" class="dynr-server-led twinkle-4"></circle>
<circle cx="10" cy="11" r="1.2" class="dynr-server-led twinkle-1"></circle>
<circle cx="14" cy="11" r="1" class="dynr-server-led twinkle-2"></circle>
<circle cx="6" cy="17" r="1.2" class="dynr-server-led twinkle-3"></circle>
<circle cx="10" cy="17" r="1" class="dynr-server-led twinkle-4"></circle>
<circle cx="14" cy="17" r="1.2" class="dynr-server-led twinkle-1"></circle>
<line x1="18" y1="5" x2="19" y2="5" class="dynr-server-unit"></line>
<line x1="18" y1="11" x2="19" y2="11" class="dynr-server-unit"></line>
<line x1="18" y1="17" x2="19" y2="17" class="dynr-server-unit"></line>
<path d="M12 22 L12 24 M9 24 L15 24" class="dynr-server-unit"></path>
</svg>
</div>
<div class="dynasty-expanded-content">
<div style="height: 16px; width: 1px; background-color: #3f3f46; margin: 0 8px;"></div>
<span class="dynasty-gradient-text" style="font-weight: bold; font-size: 14px; white-space: nowrap;">Hosted by Dynasty Revolution ♡ </span>
<div id="dynastyMinimizeBtn" class="dynasty-min-btn">
<i class="fa-solid fa-xmark" style="font-size: 12px; color: #a1a1aa;"></i>
</div>
</div>
</div>
</button>
<div id="dynastyModal">
<div class="dynasty-modal-content">
<button id="closeDynastyModal" style="position: absolute; top: 16px; right: 16px; background: transparent; border: none; color: #a1a1aa; cursor: pointer; font-size: 20px;">
<i class="fa-solid fa-xmark"></i>
</button>
<div style="margin-bottom: 24px;">
<h2 style="color: #1FD9F0; font-size: 24px; font-weight: bold; margin: 0 0 8px 0; line-height: 1.2;">Dynasty Revolution IT</h2>
<p style="color: #a1a1aa; font-size: 14px; line-height: 1.5; margin: 0;">This instance is proudly hosted and maintained by SaavageBueno & Internal Developers at Dynasty Revolution (DYNR). We provide high-performance network services, private cloud hosting, and infrastructure management across the United States.</p>
<p style="color: #a1a1aa; font-size: 14px; line-height: 1.5; margin: 0;">Dynasty Revolution © 2026.</p>
</div>
<div style="display: flex; flex-direction: column; gap: 12px;">
<a href="https://dynastyrevolution.com" target="_blank" class="dynasty-btn dynasty-btn-primary">
<i class="fa-solid fa-arrow-up-right-from-square"></i> Visit Dynasty Revolution
</a>
<a href="https://git.dynastyrevolution.com" target="_blank" class="dynasty-btn dynasty-btn-secondary">
<i class="fa-brands fa-github" style="font-size: 18px;"></i> Access Gitea Repository
</a>
<button id="dynastyForceSync" class="dynasty-btn dynasty-btn-forcesync">
<i class="fa-solid fa-rotate" style="font-size: 18px;"></i> Force Sync
</button>
<a href="https://example.com" target="_blank" class="dynasty-btn dynasty-btn-dynrblue">
<i class="fa-solid fa-bolt" style="font-size: 18px;"></i> Coming Soon
</a>
<a href="https://donate.stripe.com/7sIbIW0Yeb3k9rOdQY" target="_blank" class="dynasty-btn dynasty-btn-donate">
<i class="fa-solid fa-heart" style="font-size: 18px;"></i> Donate
</a>
<a href="mailto:support@dynastyrevolution.com" class="dynasty-btn dynasty-gradient-bg" style="color: #ffffff; border: none;">
<i class="fa-solid fa-envelope" style="font-size: 18px;"></i> Contact Support
</a>
</div>
<div class="dynasty-footer-grid">
<div class="dynasty-footer-row">
<span style="color: #71717a; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600;">Server Region</span>
<span style="color: #a1a1aa; font-size: 12px; font-family: ui-sans-serif, system-ui, sans-serif;">
<i class="fa-solid fa-location-dot" style="margin-right: 4px; color: #71717a;"></i>${currentRegion}
</span>
</div>
<div class="dynasty-footer-row">
<span style="color: #71717a; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600;">Infrastructure Node</span>
<span class="dynasty-badge ${badgeTextColorClass}" style="color: ${badgeTextColorClass ? 'inherit' : badgeBorderColor}; border: 1px solid ${badgeBorderColor}; font-size: 11px; font-weight: bold; font-family: monospace;">
${currentSite}
</span>
</div>
</div>
</div>
</div>
`;
function injectDynasty() {
if (document.getElementById('dynastyTrigger')) return;
if (!document.body) return;
document.body.insertAdjacentHTML('beforeend', dynastyHTML);
const trigger = document.getElementById('dynastyTrigger');
const minBtn = document.getElementById('dynastyMinimizeBtn');
const modal = document.getElementById('dynastyModal');
const closeBtn = document.getElementById('closeDynastyModal');
const forceSyncBtn = document.getElementById('dynastyForceSync');
if (trigger) {
trigger.onclick = () => {
if (trigger.classList.contains('is-minimized')) {
trigger.classList.remove('is-minimized');
} else {
modal.classList.add('show');
}
};
}
if (minBtn) {
minBtn.onclick = (e) => {
e.stopPropagation();
trigger.classList.add('is-minimized');
};
}
if (closeBtn) closeBtn.onclick = () => modal.classList.remove('show');
if (modal) modal.onclick = (e) => { if (e.target.id === 'dynastyModal') modal.classList.remove('show'); };
if (forceSyncBtn) {
forceSyncBtn.onclick = () => {
if (typeof window !== 'undefined') {
localStorage.removeItem('dynr_scripts_cache');
window.location.reload();
}
};
}
}
setInterval(injectDynasty, 1000);
injectDynasty();
})();