Skip to content

Commit 54bd422

Browse files
developeranazdeveloperanaz
authored
Implement maintenance overlay and button enhancements
Added maintenance overlay and updated button styles.
1 parent caeaae9 commit 54bd422

1 file changed

Lines changed: 178 additions & 3 deletions

File tree

‎webapps/gofile.io/index.html‎

Lines changed: 178 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -129,15 +129,20 @@
129129
overflow: hidden;
130130
}
131131

132-
button:hover {
132+
button:hover:not(:disabled) {
133133
opacity: 0.9;
134134
transform: translateY(-1px);
135135
}
136136

137-
button:active {
137+
button:active:not(:disabled) {
138138
transform: scale(0.98);
139139
}
140140

141+
button:disabled {
142+
opacity: 0.5;
143+
cursor: not-allowed;
144+
}
145+
141146
.generate-btn {
142147
width: 100%;
143148
margin-top: 1.5rem;
@@ -320,6 +325,83 @@
320325
transition: all 0.2s ease;
321326
}
322327

328+
.maintenance-overlay {
329+
position: fixed;
330+
top: 0;
331+
left: 0;
332+
width: 100%;
333+
height: 100%;
334+
background: rgba(10, 10, 18, 0.98);
335+
z-index: 9999;
336+
display: none;
337+
align-items: center;
338+
justify-content: center;
339+
backdrop-filter: blur(10px);
340+
}
341+
342+
.maintenance-overlay.active {
343+
display: flex;
344+
}
345+
346+
.maintenance-content {
347+
background: var(--surface);
348+
border: 2px solid var(--border);
349+
border-radius: 24px;
350+
padding: 3rem;
351+
max-width: 600px;
352+
text-align: center;
353+
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
354+
}
355+
356+
.maintenance-icon {
357+
font-size: 5rem;
358+
color: #ff9500;
359+
margin-bottom: 1.5rem;
360+
animation: pulse 2s infinite;
361+
}
362+
363+
@keyframes pulse {
364+
0%, 100% { opacity: 1; }
365+
50% { opacity: 0.5; }
366+
}
367+
368+
.maintenance-title {
369+
font-size: 2rem;
370+
color: var(--primary);
371+
margin-bottom: 1rem;
372+
}
373+
374+
.maintenance-message {
375+
font-size: 1.1rem;
376+
margin-bottom: 2rem;
377+
line-height: 1.8;
378+
}
379+
380+
.maintenance-contact {
381+
background: rgba(255, 255, 255, 0.05);
382+
padding: 1.5rem;
383+
border-radius: 12px;
384+
margin-top: 2rem;
385+
}
386+
387+
.maintenance-contact h4 {
388+
color: var(--primary);
389+
margin-bottom: 1rem;
390+
}
391+
392+
.maintenance-contact a {
393+
color: var(--secondary);
394+
text-decoration: none;
395+
display: inline-block;
396+
margin: 0.5rem;
397+
}
398+
399+
.timer-text {
400+
font-size: 0.85rem;
401+
color: rgba(224, 224, 255, 0.6);
402+
margin-top: 0.5rem;
403+
}
404+
323405
footer {
324406
position: absolute;
325407
bottom: 0;
@@ -352,6 +434,19 @@
352434
body {
353435
padding-bottom: 100px;
354436
}
437+
438+
.maintenance-content {
439+
padding: 2rem;
440+
margin: 1rem;
441+
}
442+
443+
.maintenance-icon {
444+
font-size: 3.5rem;
445+
}
446+
447+
.maintenance-title {
448+
font-size: 1.5rem;
449+
}
355450
}
356451

357452
@keyframes ripple {
@@ -372,15 +467,44 @@
372467
</style>
373468
</head>
374469
<body>
470+
<div id="maintenanceOverlay" class="maintenance-overlay">
471+
<div class="maintenance-content">
472+
<div class="maintenance-icon">
473+
<i class="fas fa-tools"></i>
474+
</div>
475+
<h1 class="maintenance-title">Under Maintenance</h1>
476+
<div class="maintenance-message">
477+
<p><strong>Oops! We're currently performing some upgrades.</strong></p>
478+
<p>The system is temporarily unavailable due to maintenance work. This could be caused by server issues, API updates, or system optimization.</p>
479+
<p>We apologize for any inconvenience. Please check back soon!</p>
480+
</div>
481+
<div class="maintenance-contact">
482+
<h4><i class="fas fa-user-circle"></i> Need Help?</h4>
483+
<p>Contact the developer:</p>
484+
<div>
485+
<a href="https://github.com/developeranaz" target="_blank">
486+
<i class="fab fa-github"></i> GitHub: developeranaz
487+
</a>
488+
</div>
489+
<div>
490+
<a href="https://t.me/gitdeveloperanaz" target="_blank">
491+
<i class="fab fa-telegram"></i> Telegram: @gitdeveloperanaz
492+
</a>
493+
</div>
494+
</div>
495+
</div>
496+
</div>
497+
375498
<div class="container">
376499
<h2><i class="fas fa-code"></i> GoFile Index CodeGen [11-12-2025] Something has changed with gofile.io, I think. I am looking for a fix. Please be patient and don't blame me. 😿</h2>
377500

378501
<div class="email-group">
379502
<input type="email" id="emailInput" class="email-input" placeholder="Enter your email address" />
380-
<button class="send-btn" onclick="sendLoginLink(event)">
503+
<button class="send-btn" id="sendLoginBtn" onclick="sendLoginLink(event)">
381504
<i class="fas fa-paper-plane"></i> Send Login Link
382505
</button>
383506
</div>
507+
<div id="timerText" class="timer-text"></div>
384508

385509
<p style="margin-top: 20px;">
386510
Don't know how to use? <a href="https://github.com/developeranaz/gofile-to-cloudflare-index" target="_blank">See instructions</a>.
@@ -503,6 +627,49 @@ <h3><i class="fas fa-check-circle"></i> Login Succeeded</h3>
503627
</footer>
504628

505629
<script>
630+
// Check maintenance status on page load
631+
async function checkMaintenanceStatus() {
632+
try {
633+
const response = await fetch('https://raw.githubusercontent.com/developeranaz/developeranaz.github.io/refs/heads/gh-pages/webapps/gofile.io/maintenance.log');
634+
const text = await response.text();
635+
const status = text.trim().toUpperCase();
636+
637+
if (status === 'TRUE') {
638+
document.getElementById('maintenanceOverlay').classList.add('active');
639+
return true;
640+
}
641+
return false;
642+
} catch (error) {
643+
console.log('Could not check maintenance status');
644+
return false;
645+
}
646+
}
647+
648+
// Timer management for send login button
649+
let clickCount = 0;
650+
const timerDurations = [30, 30, 60, 120, 300];
651+
let currentTimer = null;
652+
653+
function startTimer(seconds) {
654+
const btn = document.getElementById('sendLoginBtn');
655+
const timerText = document.getElementById('timerText');
656+
btn.disabled = true;
657+
658+
let remaining = seconds;
659+
timerText.textContent = `Please wait ${remaining} seconds before sending another link`;
660+
661+
currentTimer = setInterval(() => {
662+
remaining--;
663+
if (remaining > 0) {
664+
timerText.textContent = `Please wait ${remaining} seconds before sending another link`;
665+
} else {
666+
clearInterval(currentTimer);
667+
btn.disabled = false;
668+
timerText.textContent = '';
669+
}
670+
}, 1000);
671+
}
672+
506673
function createRipple(event) {
507674
const btn = event.currentTarget;
508675
const circle = document.createElement("div");
@@ -543,6 +710,11 @@ <h3><i class="fas fa-check-circle"></i> Login Succeeded</h3>
543710
const result = await response.json();
544711
if (result.status === "ok") {
545712
showAlert("Login link sent! Check your email.", true);
713+
714+
// Start timer with progressive delays
715+
const timerIndex = Math.min(clickCount, timerDurations.length - 1);
716+
startTimer(timerDurations[timerIndex]);
717+
clickCount++;
546718
} else {
547719
showAlert("Error: " + (result.error || "Failed to send link"), false);
548720
}
@@ -629,6 +801,9 @@ <h3><i class="fas fa-check-circle"></i> Login Succeeded</h3>
629801
document.body.removeChild(a);
630802
URL.revokeObjectURL(url);
631803
}
804+
805+
// Check maintenance on load
806+
checkMaintenanceStatus();
632807
</script>
633808
</body>
634809
</html>

0 commit comments

Comments
 (0)