Copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Not Found - ahmadrazalab </title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: #333;
overflow-x: hidden;
}
.container {
text-align: center;
max-width: 600px;
padding: 2rem;
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
animation: fadeInUp 0.8s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.logo {
margin-bottom: 2rem;
}
.logo img {
max-width: 200px;
height: auto;
}
.error-number {
font-size: 8rem;
font-weight: 700;
color: #6366f1;
line-height: 1;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
60% {
transform: translateY(-5px);
}
}
.error-title {
font-size: 2rem;
font-weight: 600;
color: #1f2937;
margin-bottom: 1rem;
}
.error-message {
font-size: 1.1rem;
color: #6b7280;
margin-bottom: 2rem;
line-height: 1.6;
}
.button-group {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 2rem;
}
.btn {
display: inline-flex;
align-items: center;
padding: 12px 24px;
border: none;
border-radius: 8px;
text-decoration: none;
font-weight: 500;
font-size: 1rem;
transition: all 0.3s ease;
cursor: pointer;
min-width: 140px;
justify-content: center;
}
.btn-primary {
background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: white;
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}
.btn-secondary {
background: white;
color: #6366f1;
border: 2px solid #6366f1;
}
.btn-secondary:hover {
background: #6366f1;
color: white;
transform: translateY(-2px);
}
.help-text {
color: #9ca3af;
font-size: 0.9rem;
margin-top: 1rem;
}
.help-text a {
color: #6366f1;
text-decoration: none;
font-weight: 500;
}
.help-text a:hover {
text-decoration: underline;
}
.floating-shapes {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
}
.shape {
position: absolute;
opacity: 0.1;
animation: float 6s ease-in-out infinite;
}
.shape:nth-child(1) {
top: 20%;
left: 10%;
width: 60px;
height: 60px;
background: #ff6b6b;
border-radius: 50%;
animation-delay: 0s;
}
.shape:nth-child(2) {
top: 60%;
right: 10%;
width: 80px;
height: 80px;
background: #4ecdc4;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
animation-delay: 2s;
}
.shape:nth-child(3) {
bottom: 20%;
left: 20%;
width: 40px;
height: 40px;
background: #ffe66d;
transform: rotate(45deg);
animation-delay: 4s;
}
@keyframes float {
0%, 100% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(180deg);
}
}
@media (max-width: 768px) {
.container {
margin: 1rem;
padding: 1.5rem;
}
.error-number {
font-size: 6rem;
}
.error-title {
font-size: 1.5rem;
}
.button-group {
flex-direction: column;
align-items: center;
}
.btn {
width: 100%;
max-width: 280px;
}
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
}
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.3);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.5);
}
</style>
</head>
<body>
<div class="floating-shapes">
<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>
</div>
<div class="container">
<div class="logo">
<svg width="200" height="50" viewBox="0 0 200 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- <text x="0" y="35" font-family="Inter, sans-serif" font-size="24" font-weight="700" fill="#6366f1">
ahmadrazalab
</text> -->
<!-- <text x="120" y="35" font-family="Inter, sans-serif" font-size="16" font-weight="400" fill="#8b5cf6">
Payments
</text> -->
</svg>
</div>
<div class="error-number">404</div>
<h1 class="error-title">Oops! Page Not Found</h1>
<p class="error-message">
We're sorry, but the page you're looking for seems to have gone on a little payment adventure.
Don't worry, our team is working hard to bring it back safely!
</p>
<div class="button-group">
<a href="https://ahmadraza.in" class="btn btn-primary">
Go Home
</a>
<!-- <a href="https://www.org-name.com" class="btn btn-secondary">
← Go Back
</a> -->
</div>
<div class="help-text">
<p>
Still having trouble?
<a href="https://ahmadraza.in/contact-us/">Contact our support team</a> or
<a href="https://ahmadraza.in/docs/help/overview">visit our help center</a>
</p>
</div>
</div>
<script>
// Add some interactive elements
document.addEventListener('DOMContentLoaded', function() {
// Add click effect to buttons
const buttons = document.querySelectorAll('.btn');
buttons.forEach(button => {
button.addEventListener('click', function(e) {
const ripple = document.createElement('span');
const rect = this.getBoundingClientRect();
const size = Math.max(rect.width, rect.height);
const x = e.clientX - rect.left - size / 2;
const y = e.clientY - rect.top - size / 2;
ripple.style.width = ripple.style.height = size + 'px';
ripple.style.left = x + 'px';
ripple.style.top = y + 'px';
ripple.classList.add('ripple');
this.appendChild(ripple);
setTimeout(() => {
ripple.remove();
}, 600);
});
});
// Add hover effect to the error number
const errorNumber = document.querySelector('.error-number');
errorNumber.addEventListener('mouseover', function() {
this.style.transform = 'scale(1.1) rotate(5deg)';
});
errorNumber.addEventListener('mouseout', function() {
this.style.transform = 'scale(1) rotate(0deg)';
});
// Konami code easter egg
let konamiCode = [];
const konamiSequence = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65];
document.addEventListener('keydown', function(e) {
konamiCode.push(e.keyCode);
if (konamiCode.length > konamiSequence.length) {
konamiCode.shift();
}
if (konamiCode.join(',') === konamiSequence.join(',')) {
document.querySelector('.error-message').innerHTML =
"🎉 Congratulations! You found the secret code! Your payment processing skills are legendary! 🎉";
document.body.style.background = 'linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 50%, #ffe66d 100%)';
}
});
});
// Add ripple effect styles
const style = document.createElement('style');
style.textContent = `
.btn {
position: relative;
overflow: hidden;
}
.ripple {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.6);
transform: scale(0);
animation: ripple-animation 0.6s linear;
pointer-events: none;
}
@keyframes ripple-animation {
to {
transform: scale(4);
opacity: 0;
}
}
`;
document.head.appendChild(style);
</script>
</body>
</html>