feat: add Jupiter Swap Terminal page + LAB card
This commit is contained in:
parent
cb413e2cf9
commit
2c3f2749b4
3 changed files with 391 additions and 0 deletions
|
|
@ -42,6 +42,13 @@
|
|||
border-left-color: #F5A623;
|
||||
box-shadow: 0 4px 20px rgba(245, 166, 35, 0.15);
|
||||
}
|
||||
.deploy-card--jupiter {
|
||||
border-left-color: rgba(123, 97, 255, 0.6);
|
||||
}
|
||||
.deploy-card--jupiter:hover {
|
||||
border-left-color: #7B61FF;
|
||||
box-shadow: 0 4px 20px rgba(123, 97, 255, 0.15);
|
||||
}
|
||||
.deploy-card-status {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.6rem;
|
||||
|
|
@ -144,6 +151,18 @@
|
|||
</div>
|
||||
<div class="deploy-card-url">jaeswift.xyz/tokenlauncher</div>
|
||||
</a>
|
||||
|
||||
<a href="/jupiterswap/" class="deploy-card deploy-card--jupiter">
|
||||
<div class="deploy-card-status" style="color: #7B61FF;">◆ EXPERIMENTAL</div>
|
||||
<div class="deploy-card-title">SWAP TERMINAL</div>
|
||||
<div class="deploy-card-desc">Swap any Solana token at the best rates. Powered by Jupiter aggregator — routes across all major DEXs.</div>
|
||||
<div class="deploy-card-tags">
|
||||
<span class="deploy-tag" style="color: rgba(123, 97, 255, 0.8); background: rgba(123, 97, 255, 0.08); border-color: rgba(123, 97, 255, 0.2);">SOLANA</span>
|
||||
<span class="deploy-tag" style="color: rgba(0, 209, 140, 0.8); background: rgba(0, 209, 140, 0.08); border-color: rgba(0, 209, 140, 0.2);">DEX</span>
|
||||
<span class="deploy-tag" style="color: rgba(123, 97, 255, 0.8); background: rgba(123, 97, 255, 0.08); border-color: rgba(123, 97, 255, 0.2);">JUPITER</span>
|
||||
</div>
|
||||
<div class="deploy-card-url">jaeswift.xyz/jupiterswap</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
172
css/jupiterswap.css
Normal file
172
css/jupiterswap.css
Normal file
|
|
@ -0,0 +1,172 @@
|
|||
/* ─── Jupiter Swap Terminal ─────────────────────────────────
|
||||
Military / CRT theme wrapper for Jupiter Terminal v4
|
||||
─────────────────────────────────────────────────────────── */
|
||||
|
||||
.jup-container {
|
||||
max-width: 520px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1.5rem 3rem;
|
||||
}
|
||||
|
||||
/* ── Info Panel ── */
|
||||
.jup-info-panel {
|
||||
background: rgba(16, 16, 16, 0.7);
|
||||
border: 1px solid rgba(123, 97, 255, 0.15);
|
||||
border-left: 3px solid rgba(123, 97, 255, 0.5);
|
||||
padding: 1rem 1.25rem;
|
||||
margin-bottom: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.jup-info-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.jup-info-icon {
|
||||
font-size: 0.5rem;
|
||||
color: #7B61FF;
|
||||
margin-top: 0.25rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.jup-info-text {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.65rem;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
line-height: 1.5;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.jup-info-referral .jup-info-icon {
|
||||
color: #00D18C;
|
||||
}
|
||||
|
||||
.jup-info-referral .jup-info-text {
|
||||
color: rgba(0, 209, 140, 0.5);
|
||||
}
|
||||
|
||||
/* ── Terminal Wrapper ── */
|
||||
.jup-terminal-wrapper {
|
||||
background: rgba(10, 10, 10, 0.95);
|
||||
border: 1px solid rgba(123, 97, 255, 0.2);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
box-shadow:
|
||||
0 0 30px rgba(123, 97, 255, 0.05),
|
||||
0 4px 20px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.jup-terminal-wrapper:hover {
|
||||
border-color: rgba(123, 97, 255, 0.35);
|
||||
box-shadow:
|
||||
0 0 40px rgba(123, 97, 255, 0.08),
|
||||
0 4px 24px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/* ── Terminal Title Bar ── */
|
||||
.jup-terminal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
padding: 0.6rem 1rem;
|
||||
background: rgba(20, 20, 20, 0.9);
|
||||
border-bottom: 1px solid rgba(123, 97, 255, 0.1);
|
||||
}
|
||||
|
||||
.jup-terminal-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #ff5f57;
|
||||
}
|
||||
|
||||
.jup-terminal-dot--yellow {
|
||||
background: #ffbd2e;
|
||||
}
|
||||
|
||||
.jup-terminal-dot--green {
|
||||
background: #28c840;
|
||||
}
|
||||
|
||||
.jup-terminal-title {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.55rem;
|
||||
color: rgba(123, 97, 255, 0.6);
|
||||
letter-spacing: 2px;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
/* ── Jupiter Terminal Container ── */
|
||||
#jupiter-terminal {
|
||||
min-height: 480px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Override Jupiter's internal styles for dark theme consistency */
|
||||
#jupiter-terminal iframe {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
/* ── Loading State ── */
|
||||
.jup-terminal-loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
padding: 3rem 1rem;
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(10, 10, 10, 0.95);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.jup-terminal-loading span {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.6rem;
|
||||
color: rgba(123, 97, 255, 0.6);
|
||||
letter-spacing: 3px;
|
||||
animation: jup-pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.jup-spinner {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 2px solid rgba(123, 97, 255, 0.15);
|
||||
border-top-color: #7B61FF;
|
||||
border-radius: 50%;
|
||||
animation: jup-spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes jup-spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes jup-pulse {
|
||||
0%, 100% { opacity: 0.6; }
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
|
||||
/* ── Responsive ── */
|
||||
@media (max-width: 600px) {
|
||||
.jup-container {
|
||||
padding: 0 0.75rem 2rem;
|
||||
}
|
||||
|
||||
.jup-info-panel {
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
#jupiter-terminal {
|
||||
min-height: 420px;
|
||||
}
|
||||
}
|
||||
200
jupiterswap/index.html
Normal file
200
jupiterswap/index.html
Normal file
|
|
@ -0,0 +1,200 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>JAESWIFT // SWAP TERMINAL</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=JetBrains+Mono:wght@300;400;500;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
<link rel="stylesheet" href="/css/section.css">
|
||||
<link rel="stylesheet" href="/css/jupiterswap.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="scanline-overlay"></div>
|
||||
<div class="grid-bg"></div>
|
||||
|
||||
<nav class="nav-main" id="navbar">
|
||||
<div class="nav-container">
|
||||
<a href="/" class="nav-logo">
|
||||
<span class="logo-bracket">[</span> JAE <span class="logo-bracket">]</span>
|
||||
</a>
|
||||
<button class="nav-toggle" id="navToggle" aria-label="Menu">
|
||||
<span></span><span></span><span></span>
|
||||
</button>
|
||||
<ul class="nav-menu" id="navMenu"></ul>
|
||||
<div class="nav-status">
|
||||
<span class="nav-clock" id="navClock"></span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="breadcrumb">
|
||||
<a href="/">HOME</a>
|
||||
<span class="separator">/</span>
|
||||
<a href="/armoury">ARMOURY</a>
|
||||
<span class="separator">/</span>
|
||||
<a href="/armoury/lab.html">LAB</a>
|
||||
<span class="separator">/</span>
|
||||
<span class="current">SWAP TERMINAL</span>
|
||||
</div>
|
||||
|
||||
<section class="section-header" style="padding-top: calc(var(--nav-height) + 1.5rem);">
|
||||
<div class="section-header-label">LAB // JUPITER AGGREGATOR</div>
|
||||
<h1 class="section-header-title">SWAP TERMINAL</h1>
|
||||
<p class="section-header-sub">> Swap any Solana token at the best rates — powered by Jupiter, routing across all major DEXs.</p>
|
||||
</section>
|
||||
|
||||
<div class="jup-container">
|
||||
|
||||
<!-- Info Panel -->
|
||||
<div class="jup-info-panel">
|
||||
<div class="jup-info-row">
|
||||
<span class="jup-info-icon">◆</span>
|
||||
<span class="jup-info-text">Best price routing across Raydium, Orca, Meteora, Phoenix, and 20+ DEXs</span>
|
||||
</div>
|
||||
<div class="jup-info-row">
|
||||
<span class="jup-info-icon">◆</span>
|
||||
<span class="jup-info-text">Connect your wallet via the navbar — the terminal will detect it automatically</span>
|
||||
</div>
|
||||
<div class="jup-info-row">
|
||||
<span class="jup-info-icon">◆</span>
|
||||
<span class="jup-info-text">Transactions are executed directly from your wallet — non-custodial</span>
|
||||
</div>
|
||||
<div class="jup-info-row jup-info-referral">
|
||||
<span class="jup-info-icon">◆</span>
|
||||
<span class="jup-info-text">A small referral fee supports JAESWIFT.XYZ development</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Terminal Wrapper -->
|
||||
<div class="jup-terminal-wrapper">
|
||||
<div class="jup-terminal-header">
|
||||
<span class="jup-terminal-dot"></span>
|
||||
<span class="jup-terminal-dot jup-terminal-dot--yellow"></span>
|
||||
<span class="jup-terminal-dot jup-terminal-dot--green"></span>
|
||||
<span class="jup-terminal-title">JUPITER SWAP TERMINAL v4</span>
|
||||
</div>
|
||||
<div id="jupiter-terminal"></div>
|
||||
<div class="jup-terminal-loading" id="jup-loading">
|
||||
<div class="jup-spinner"></div>
|
||||
<span>INITIALISING SWAP TERMINAL...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="footer-container">
|
||||
<div class="footer-left">
|
||||
<span class="footer-logo">[JAE]</span>
|
||||
<span class="footer-copy">© 2026 JAESWIFT.XYZ</span>
|
||||
</div>
|
||||
<div class="footer-right">
|
||||
<span class="footer-signal">SIGNAL ████<span class="signal-flicker">█</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/js/wallet-connect.js"></script>
|
||||
<script src="/js/nav.js"></script>
|
||||
<script src="/js/clock.js"></script>
|
||||
<script src="https://terminal.jup.ag/main-v4.js" data-preload defer></script>
|
||||
<script>
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
const REFERRAL = '9NuiHnHQ9kQVj8JwPCpmE4VU1MhwcYL9gWbkiAyn8';
|
||||
const RPC = 'https://api.mainnet-beta.solana.com';
|
||||
const loadingEl = document.getElementById('jup-loading');
|
||||
|
||||
function getWalletProvider() {
|
||||
// Pull provider from the sitewide wallet-connect system
|
||||
if (window.solWallet && window.solWallet.connected && window.solWallet.provider) {
|
||||
return window.solWallet.provider;
|
||||
}
|
||||
// Fallback: try Phantom / Solflare direct
|
||||
if (window.phantom?.solana?.isConnected) return window.phantom.solana;
|
||||
if (window.solflare?.isConnected) return window.solflare;
|
||||
return null;
|
||||
}
|
||||
|
||||
function launchTerminal() {
|
||||
if (!window.Jupiter || !window.Jupiter.init) {
|
||||
setTimeout(launchTerminal, 300);
|
||||
return;
|
||||
}
|
||||
|
||||
const walletProvider = getWalletProvider();
|
||||
|
||||
window.Jupiter.init({
|
||||
displayMode: 'integrated',
|
||||
integratedTargetId: 'jupiter-terminal',
|
||||
endpoint: RPC,
|
||||
platformFeeAndAccounts: undefined,
|
||||
referralAccount: REFERRAL,
|
||||
defaultExplorer: 'Solscan',
|
||||
formProps: {
|
||||
fixedOutputMint: false,
|
||||
},
|
||||
enableWalletPassthrough: true,
|
||||
passthroughWalletContextState: walletProvider ? {
|
||||
wallet: {
|
||||
adapter: walletProvider,
|
||||
readyState: 'Installed',
|
||||
},
|
||||
publicKey: walletProvider.publicKey || null,
|
||||
connected: true,
|
||||
connecting: false,
|
||||
disconnecting: false,
|
||||
connect: () => walletProvider.connect(),
|
||||
disconnect: () => walletProvider.disconnect(),
|
||||
select: () => {},
|
||||
sendTransaction: walletProvider.sendTransaction
|
||||
? walletProvider.sendTransaction.bind(walletProvider)
|
||||
: undefined,
|
||||
signTransaction: walletProvider.signTransaction
|
||||
? walletProvider.signTransaction.bind(walletProvider)
|
||||
: undefined,
|
||||
signAllTransactions: walletProvider.signAllTransactions
|
||||
? walletProvider.signAllTransactions.bind(walletProvider)
|
||||
: undefined,
|
||||
signMessage: walletProvider.signMessage
|
||||
? walletProvider.signMessage.bind(walletProvider)
|
||||
: undefined,
|
||||
} : undefined,
|
||||
});
|
||||
|
||||
// Hide loading once the terminal iframe/content appears
|
||||
const observer = new MutationObserver(function () {
|
||||
const termEl = document.getElementById('jupiter-terminal');
|
||||
if (termEl && termEl.children.length > 0) {
|
||||
if (loadingEl) loadingEl.style.display = 'none';
|
||||
observer.disconnect();
|
||||
}
|
||||
});
|
||||
observer.observe(document.getElementById('jupiter-terminal'), { childList: true, subtree: true });
|
||||
}
|
||||
|
||||
// Re-sync wallet when user connects via navbar
|
||||
window.addEventListener('wallet-connected', function () {
|
||||
// Re-init terminal with new wallet
|
||||
setTimeout(launchTerminal, 200);
|
||||
});
|
||||
|
||||
window.addEventListener('wallet-disconnected', function () {
|
||||
setTimeout(launchTerminal, 200);
|
||||
});
|
||||
|
||||
// Kick off
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
setTimeout(launchTerminal, 500);
|
||||
});
|
||||
} else {
|
||||
setTimeout(launchTerminal, 500);
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Reference in a new issue