Skip to content

Fixed style inconsistencies for better mobile viewing of wallet.html #622

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
OFiDCrypt merged 1 commit into from
May 14, 2026
Merged

Fixed style inconsistencies for better mobile viewing of wallet.html #622

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
130 changes: 71 additions & 59 deletions cashlinks.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,19 +83,27 @@
<!-- JavaScript Libraries -->
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

<!-- Tailwind CSS -->
<!-- Tailwind CSS - Scoped to banner only -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
important: '.tailwind-banner', // ← Isolates everything
corePlugins: {
preflight: false // Prevents margin/padding resets
}
}
</script>

<style>
body h3 {
margin: 0 0 2rem 0;
}
<style>
body h3 {
margin: 0 0 2rem 0;
}

body p {
text-align: justify;
margin: 1.25rem 0;
}
</style>
body p {
text-align: justify;
margin: 1.25rem 0;
}
</style>

<!-- Meta Language -->
<meta http-equiv='content-language' content='en-gb'>
Expand Down Expand Up @@ -168,36 +176,39 @@
</ul>
</nav>

<!-- Main -->
<!-- MAIN CONTENT STARTS -->
<div id="main">

<div
class="relative flex items-center justify-between px-6 pt-5 pb-4 border-b border-purple-700 bg-gradient-to-r from-purple-950 to-black">
<!-- ISOLATED TAILWIND BANNER -->
<div class="tailwind-banner">
<div
class="relative flex items-center justify-between px-6 pt-5 pb-4 border-b border-purple-700 bg-gradient-to-r from-purple-950 to-black">

<div class="flex items-center gap-4 z-10">

<div onclick="window.location.href='/cashlinks-updater.html'"
class="flex bg-gradient-to-r from-purple-600 to-pink-500 text-white text-sm font-bold px-5 py-2.5 rounded-3xl items-center gap-2 cursor-pointer shadow-lg hover:shadow-xl transition-all">
<span class="text-xl">🔐</span>
Admin Panel
<div class="flex items-center gap-4 z-10">
<div onclick="window.location.href='/cashlinks-updater.html'"
class="flex bg-gradient-to-r from-purple-600 to-pink-500 text-white text-sm font-bold px-5 py-2.5 rounded-3xl items-center gap-2 cursor-pointer shadow-lg hover:shadow-xl transition-all">
<span class="text-xl">🔐</span>
Admin Panel
</div>
</div>

</div>

<h1
class="hidden md:block absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-3xl font-bold tracking-tight text-white pointer-events-none">
Digital Gifts
</h1>
<h1
class="hidden md:block absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-3xl font-bold tracking-tight text-white pointer-events-none">
Digital Gifts
</h1>

<div class="flex items-center gap-5 z-10">
<i
class="fa-solid fa-bell text-2xl text-white/80 hover:text-white cursor-pointer transition-colors"></i>
<div onclick="showProfile()"
class="w-10 h-10 bg-purple-300 rounded-full flex items-center justify-center text-black font-bold cursor-pointer hover:bg-purple-200 transition-colors">
👤
</div>
</div>

<div class="flex items-center gap-5 z-10">
<i
class="fa-solid fa-bell text-2xl text-white/80 hover:text-white cursor-pointer transition-colors"></i>
<div onclick="showProfile()"
class="w-10 h-10 bg-purple-300 rounded-full flex items-center justify-center text-black font-bold cursor-pointer hover:bg-purple-200 transition-colors">
👤</div>
</div>
</div>
<!-- END OF ISOLATED BANNER -->

<!-- Scrolling Ad Banner -->
<div id="expb-ball" class="ad-banner-wrapper">
Expand Down Expand Up @@ -275,20 +286,14 @@ <h2>Cash Links</h2>
container.innerHTML = '<p style="text-align:center; padding:40px; opacity:0.6;">Loading cash links...</p>';

try {
// Load the latest data from GitHub Pages
const response = await fetch('/cashlinks-data.json', { cache: 'no-store' });

if (!response.ok) throw new Error('JSON not found');

const cashLinksData = await response.json();

container.innerHTML = '';

// Create 3 rows of 3 items (exactly matches your CSS)
for (let i = 0; i < cashLinksData.length; i += 3) {
const rowDiv = document.createElement('div');
rowDiv.className = 'cashlinks-items';

const rowItems = cashLinksData.slice(i, i + 3);

rowItems.forEach(token => {
Expand All @@ -306,42 +311,39 @@ <h3>${token.title}</h3>
Claim Cash
</button>
</div>
</article>
`;
</article>`;
rowDiv.innerHTML += itemHTML;
});

container.appendChild(rowDiv);
}

// --- NEW: HANDLE JUMP LINKS (#ticker) ---
// --- UNIFIED GLOW LOGIC FOR JUMP LINKS ---
const currentHash = window.location.hash;
if (currentHash) {
// We use a tiny timeout to ensure the DOM has finished painting the new articles
setTimeout(() => {
const targetElement = document.querySelector(currentHash);
if (targetElement) {
targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });

// Optional: Temporary highlight effect so the user knows they "landed"
targetElement.style.outline = "2px solid #a000ff";
targetElement.style.outlineOffset = "5px";
setTimeout(() => { targetElement.style.outline = "none"; }, 2000);
targetElement.scrollIntoView({ behavior: 'smooth', block: 'center' });

// Apply Soft Purple Face Glow
targetElement.style.transition = "all 0.8s ease-in-out";
targetElement.style.backgroundColor = "rgba(168, 85, 247, 0.25)";
targetElement.style.boxShadow = "inset 0 0 30px rgba(168, 85, 247, 0.5), 0 0 20px rgba(168, 85, 247, 0.3)";

// Fade out
setTimeout(() => {
targetElement.style.backgroundColor = "";
targetElement.style.boxShadow = "none";
}, 2500);
}
}, 150);
}, 200);
}

} catch (err) {
console.error(err);
container.innerHTML = `
<p style="text-align:center; padding:40px; color:#ff6688;">
⚠️ Could not load cash links.<br>
Make sure cashlinks-data.json exists in your repo root.
</p>`;
container.innerHTML = `<p style="text-align:center; padding:40px; color:#ff6688;">⚠️ Error loading links.</p>`;
}
}

// Render when page loads
document.addEventListener('DOMContentLoaded', renderCashLinks);
</script>

Expand Down Expand Up @@ -557,9 +559,19 @@ <h2>Select a Token</h2>
const element = document.getElementById(tokenId);
if (element) {
element.scrollIntoView({ behavior: 'smooth', block: 'center' });
element.style.transition = 'background-color 0.8s ease';
element.style.backgroundColor = 'rgba(100, 200, 255, 0.15)';
setTimeout(() => { element.style.backgroundColor = ''; }, 1600);

// --- UNIFIED GLOW LOGIC FOR DIRECTORY ---
element.style.transition = 'all 0.8s ease-in-out';

// Apply Soft Purple Face Glow
element.style.backgroundColor = 'rgba(168, 85, 247, 0.25)';
element.style.boxShadow = 'inset 0 0 30px rgba(168, 85, 247, 0.5), 0 0 20px rgba(168, 85, 247, 0.3)';

// Fade out
setTimeout(() => {
element.style.backgroundColor = '';
element.style.boxShadow = 'none';
}, 2500);
}
}

Expand Down
105 changes: 75 additions & 30 deletions wallet.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<meta name="description"
content="Giddy Key Wallet — your personal Solana wallet for $GIDDY, $eXPB Bouncy Ball, and local currencies.">

<link rel="stylesheet" href="/assets/css/main.css">
<link class="restore-typography" rel="stylesheet" href="/assets/css/main.css">
<noscript>
<link rel="stylesheet" href="/assets/css/noscript.css">
</noscript>
Expand Down Expand Up @@ -84,14 +84,15 @@

#mobileClaimBubble {
position: fixed;
right: 15px;
bottom: calc(73px + env(safe-area-inset-bottom));
right: 13px;
bottom: calc(68px + env(safe-area-inset-bottom));
z-index: 50;
display: flex;
align-items: center;
}

/* Remove border + outline from the close button */

#mobileClaimBubble .close-btn {
border: none;
outline: none;
Expand Down Expand Up @@ -256,13 +257,13 @@ <h2 class="text-4xl font-bold mt-6 mb-6"></h2>
<img src="https://flagcdn.com/w40/ca.png" alt="Canada" class="h-5">
</div>

<div class="card p-5 fade-in mb-12">
<div id="walletTotalCard" class="card p-5 fade-in mb-12">
<div class="flex justify-between items-start">
<div class="flex items-center gap-3">
<div class="text-4xl">💼</div>
<div class="text-4xl">💰</div>
<div>
<div class="font-bold text-2xl">TOTAL</div>
<div class="text-sm text-zinc-400">BALANCE</div>
<div class="text-sm text-zinc-400">CASH IN BAG</div>
</div>
</div>
<div class="text-right">
Expand All @@ -271,15 +272,20 @@ <h2 class="text-4xl font-bold mt-6 mb-6"></h2>
<div class="text-green-400 text-sm">+0.01% Today</div>
</div>
</div>
<div class="flex justify-center gap-8 mt-8">
<button onclick="buyToken()"
class="w-20 h-20 bg-purple-600 hover:bg-purple-500 rounded-full text-4xl">＋</button>
<button onclick="sellToken()"
class="w-20 h-20 bg-purple-600 hover:bg-purple-500 rounded-full text-4xl">－</button>
</div>
<div class="flex justify-center gap-12 text-sm mt-2">
<div>Buy</div>
<div>Sell</div>

<div class="flex flex-col items-center mt-8">
<div class="flex justify-center gap-8">
<div class="flex flex-col items-center w-20">
<button onclick="buyToken()"
class="w-20 h-20 bg-purple-600 hover:bg-purple-500 rounded-full text-4xl mb-2">＋</button>
<span class="text-sm font-medium">Buy</span>
</div>
<div class="flex flex-col items-center w-20">
<button onclick="sellToken()"
class="w-20 h-20 bg-purple-600 hover:bg-purple-500 rounded-full text-4xl mb-2">－</button>
<span class="text-sm font-medium">Sell</span>
</div>
</div>
</div>
</div>
</div>
Expand All @@ -298,6 +304,7 @@ <h2 class="text-4xl font-bold mt-6 mb-6"></h2>

</div>

<!-- ONLY CHANGE: mobile floating bubble moved outside #wrapper + class="mobile-claim" + positioning from the working version -->
<div id="mobileClaimBubble" onclick="claimBonus()"
class="mobile-claim bg-gradient-to-r from-purple-600 to-pink-500 text-white text-sm font-bold px-5 py-3 rounded-3xl shadow-2xl cursor-pointer items-center gap-2">
<span>🎁</span>
Expand All @@ -315,31 +322,19 @@ <h2 class="text-4xl font-bold mt-6 mb-6"></h2>
else if (token === 'giddy') window.location.href = '/onegiddy.html';
}
function goToShop() { window.location.href = '/shop.html'; }
function claimBonus() {
window.location.href = "/cashlinks.html#giddy";
}
function claimBonus() { window.location.href = "/cashlinks.html#giddy"; }
function buyToken() { alert("Buy Interface Loading..."); }
function sellToken() { alert("Sell Interface Loading..."); }
function showProfile() { alert("Profile coming soon"); }

function dismissClaimBubble() {
const bubble = document.getElementById('mobileClaimBubble');
if (bubble) {
bubble.style.setProperty('display', 'none', 'important');
bubble.setAttribute('data-visible', 'false');
setTimeout(() => bubble.style.setProperty('display', 'none', 'important'), 300);
}
localStorage.setItem('claimBubbleDismissed', 'true');
}

window.addEventListener('load', () => {
if (window.innerWidth < 768 && localStorage.getItem('claimBubbleDismissed') !== 'true') {
document.getElementById('mobileClaimBubble').style.display = 'flex';
}
});

const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => { if (entry.isIntersecting) entry.target.classList.add('visible'); });
}, { threshold: 0.1 });
document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
</script>

<script src="/assets/js/jquery.min.js"></script>
Expand All @@ -351,6 +346,56 @@ <h2 class="text-4xl font-bold mt-6 mb-6"></h2>
<script src="/assets/js/main.js"></script>
<script src="/assets/js/ofid-main.js"></script>

<script>
jQuery(document).ready(function ($) {
const bubble = document.getElementById('mobileClaimBubble');
const targetCard = document.getElementById('walletTotalCard');

// Set default mobile layout visibility state safely on page ready execution
if (bubble) {
if (window.innerWidth < 768 && localStorage.getItem('claimBubbleDismissed') !== 'true') {
bubble.setAttribute('data-visible', 'true');
} else {
bubble.setAttribute('data-visible', 'false');
}
}

// Framework-safe Intersection tracking directly on the buy/sell module
if (targetCard && bubble) {
const bndObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (localStorage.getItem('claimBubbleDismissed') === 'true') return;

if (entry.isIntersecting) {
// Total card is showing inside the main screen space -> fade it out
bubble.setAttribute('data-visible', 'false');
} else {
// Card is scrolled away -> pull the bubble back up
if (entry.boundingClientRect.top > 0) {
bubble.setAttribute('data-visible', 'true');
}
}
});
}, {
root: null,
rootMargin: '0px 0px -40px 0px',
threshold: 0.1
});

bndObserver.observe(targetCard);
}

// Normal scroll reveal loop
const fallbackObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) entry.target.classList.add('visible');
});
}, { threshold: 0.1 });

document.querySelectorAll('.fade-in').forEach(el => fallbackObserver.observe(el));
});
</script>

</body>

</html>
Loading