235 lines
11 KiB
PHP
235 lines
11 KiB
PHP
<?php
|
|
/**
|
|
* صفحه ۴۰۴ — طرح hesabix2
|
|
*
|
|
* @package Hesabix2
|
|
*/
|
|
|
|
get_header();
|
|
|
|
$wrap = 'max-w-6xl mx-auto px-4 sm:px-6 lg:px-8';
|
|
?>
|
|
|
|
<section class="hesabix2-404 min-h-[70vh] flex flex-col justify-center py-16 sm:py-24 relative overflow-hidden">
|
|
<!-- پس‌زمینه نرم -->
|
|
<div class="absolute inset-0 bg-gradient-to-b from-light-50/80 via-transparent to-brand-500/5 pointer-events-none" aria-hidden="true"></div>
|
|
<div class="absolute top-1/4 left-1/4 w-72 h-72 bg-brand-400/10 rounded-full blur-3xl pointer-events-none" aria-hidden="true"></div>
|
|
<div class="absolute bottom-1/4 right-1/4 w-96 h-96 bg-accent-400/10 rounded-full blur-3xl pointer-events-none" aria-hidden="true"></div>
|
|
|
|
<div class="<?php echo $wrap; ?> relative z-10">
|
|
<div class="max-w-2xl mx-auto text-center">
|
|
<!-- روبات معیوب انیمیشن‌دار -->
|
|
<div id="hesabix2-404-robot" class="hesabix2-404-robot mb-8 flex justify-center" aria-hidden="true">
|
|
<div class="robot-container relative">
|
|
<svg id="robot-svg" class="w-64 h-72 sm:w-80 sm:h-96 min-w-[16rem] text-slate-500" viewBox="0 0 120 140" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- آنتن کج (گروه برای چرخش) -->
|
|
<g id="robot-antenna-group" transform-origin="60 8">
|
|
<line id="robot-antenna" class="robot-antenna" x1="60" y1="8" x2="55" y2="0" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
|
|
<circle id="robot-antenna-bulb" cx="55" cy="0" r="3" fill="#0ea5e9" class="antenna-bulb"/>
|
|
</g>
|
|
<!-- سر -->
|
|
<rect id="robot-head" x="25" y="15" width="70" height="45" rx="8" fill="#e2e8f0" stroke="#94a3b8" stroke-width="2" class="robot-head"/>
|
|
<!-- چشم چپ (معیوب - چشمک) -->
|
|
<rect id="robot-eye-left" x="38" y="28" width="14" height="14" rx="3" fill="#0ea5e9" class="robot-eye"/>
|
|
<rect id="robot-eye-left-inner" x="41" y="31" width="8" height="8" rx="2" fill="#f0f9ff" class="robot-eye-inner"/>
|
|
<!-- چشم راست (معیوب) -->
|
|
<rect id="robot-eye-right" x="68" y="28" width="14" height="14" rx="3" fill="#0ea5e9" class="robot-eye"/>
|
|
<rect id="robot-eye-right-inner" x="71" y="31" width="8" height="8" rx="2" fill="#f0f9ff" class="robot-eye-inner"/>
|
|
<!-- دهان (خط نوسانی) -->
|
|
<path id="robot-mouth" d="M 42 52 Q 60 58 78 52" stroke="#64748b" stroke-width="2" stroke-linecap="round" fill="none" class="robot-mouth"/>
|
|
<!-- بدن -->
|
|
<rect id="robot-body" x="30" y="62" width="60" height="50" rx="6" fill="#cbd5e1" stroke="#94a3b8" stroke-width="2" class="robot-body"/>
|
|
<!-- دکمه روی سینه -->
|
|
<circle id="robot-chest-btn" cx="60" cy="82" r="6" fill="#f97316" class="robot-chest-btn"/>
|
|
<!-- بازوی آویزان (معیوب) — مفصل شانه روی لبهٔ راست بدن؛ مختصات نسبی برای چرخش درست -->
|
|
<g id="robot-arm-loose" transform="translate(88 68)">
|
|
<g id="robot-arm-loose-swing" transform="rotate(-14)">
|
|
<rect x="0" y="0" width="10" height="28" rx="3" fill="#94a3b8" stroke="#64748b" stroke-width="1.5"/>
|
|
<circle cx="5" cy="32" r="7" fill="#94a3b8" stroke="#64748b" stroke-width="1.5"/>
|
|
</g>
|
|
</g>
|
|
<!-- بازوی معمولی -->
|
|
<rect x="20" y="68" width="12" height="35" rx="4" fill="#94a3b8" stroke="#64748b" stroke-width="1.5"/>
|
|
<circle cx="22" cy="100" r="8" fill="#94a3b8" stroke="#64748b" stroke-width="1.5"/>
|
|
<!-- پای چپ -->
|
|
<rect id="robot-leg-left" x="38" y="112" width="18" height="22" rx="4" fill="#94a3b8" stroke="#64748b" stroke-width="1.5" class="robot-leg"/>
|
|
<!-- پای راست -->
|
|
<rect id="robot-leg-right" x="64" y="112" width="18" height="22" rx="4" fill="#94a3b8" stroke="#64748b" stroke-width="1.5" class="robot-leg"/>
|
|
<!-- جرقه‌ها (جاوااسکریپت پر می‌کند) -->
|
|
</svg>
|
|
<div id="robot-sparks" class="robot-sparks absolute inset-0 pointer-events-none"></div>
|
|
</div>
|
|
</div>
|
|
<!-- عدد ۴۰۴ با استایل متمایز -->
|
|
<div class="hesabix2-404-number mb-6" aria-hidden="true">
|
|
<span class="inline-block text-[8rem] sm:text-[10rem] font-black leading-none bg-clip-text text-transparent bg-gradient-to-l from-brand-500 via-brand-400 to-accent-400 drop-shadow-sm">
|
|
۴۰۴
|
|
</span>
|
|
</div>
|
|
|
|
<h1 class="text-2xl sm:text-3xl font-bold text-slate-800 mb-3">
|
|
<?php esc_html_e('صفحه پیدا نشد', 'hesabix2'); ?>
|
|
</h1>
|
|
<p class="text-slate-600 mb-8 text-lg leading-relaxed">
|
|
<?php esc_html_e('متأسفانه صفحه‌ای که دنبالش هستید وجود ندارد یا جابه‌جا شده است.', 'hesabix2'); ?>
|
|
</p>
|
|
|
|
<!-- دکمه‌ها -->
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
|
|
<a href="<?php echo esc_url(home_url('/')); ?>" class="inline-flex items-center justify-center gap-2 bg-brand-500 hover:bg-brand-600 text-white font-semibold px-6 py-3.5 rounded-2xl transition shadow-md hover:shadow-lg min-h-[52px] w-full sm:w-auto">
|
|
<svg class="w-5 h-5 rtl:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
|
|
</svg>
|
|
<?php esc_html_e('بازگشت به صفحه اصلی', 'hesabix2'); ?>
|
|
</a>
|
|
<a href="<?php echo esc_url(home_url('/contact/')); ?>" class="inline-flex items-center justify-center gap-2 border-2 border-slate-300 text-slate-700 hover:border-brand-500 hover:text-brand-600 font-medium px-6 py-3.5 rounded-2xl transition min-h-[52px] w-full sm:w-auto">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
|
|
</svg>
|
|
<?php esc_html_e('تماس با پشتیبانی', 'hesabix2'); ?>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- جستجو (اختیاری) -->
|
|
<div class="mt-12 pt-8 border-t border-slate-200/80">
|
|
<p class="text-slate-500 text-sm mb-4"><?php esc_html_e('یا از جستجو استفاده کنید:', 'hesabix2'); ?></p>
|
|
<?php get_search_form(); ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
.hesabix2-404-robot .robot-container { transform-origin: center bottom; transition: transform 0.08s ease-out; }
|
|
.hesabix2-404-robot .robot-head { transform-origin: 60px 37px; }
|
|
.hesabix2-404-robot .robot-antenna { transform-origin: 60px 8px; }
|
|
.hesabix2-404-robot .antenna-bulb { filter: drop-shadow(0 0 4px currentColor); }
|
|
.robot-spark { position: absolute; width: 4px; height: 4px; background: #f97316; border-radius: 50%; opacity: 0; pointer-events: none; }
|
|
</style>
|
|
|
|
<script>
|
|
(function() {
|
|
'use strict';
|
|
|
|
var robot = document.getElementById('hesabix2-404-robot');
|
|
if (!robot) return;
|
|
|
|
var svg = document.getElementById('robot-svg');
|
|
var head = document.getElementById('robot-head');
|
|
var eyeLeft = document.getElementById('robot-eye-left');
|
|
var eyeRight = document.getElementById('robot-eye-right');
|
|
var eyeLeftInner = document.getElementById('robot-eye-left-inner');
|
|
var eyeRightInner = document.getElementById('robot-eye-right-inner');
|
|
var mouth = document.getElementById('robot-mouth');
|
|
var armLooseSwing = document.getElementById('robot-arm-loose-swing');
|
|
var antennaGroup = document.getElementById('robot-antenna-group');
|
|
var chestBtn = document.getElementById('robot-chest-btn');
|
|
var legLeft = document.getElementById('robot-leg-left');
|
|
var legRight = document.getElementById('robot-leg-right');
|
|
var sparksContainer = document.getElementById('robot-sparks');
|
|
var container = robot.querySelector('.robot-container');
|
|
|
|
function rand(min, max) {
|
|
return min + Math.random() * (max - min);
|
|
}
|
|
|
|
function randInt(min, max) {
|
|
return Math.floor(rand(min, max + 1));
|
|
}
|
|
|
|
// چشمک زدن نامنظم چشم‌ها (معیوب)
|
|
function flickerEyes() {
|
|
var hide = Math.random() > 0.6;
|
|
var opacity = hide ? 0.15 : 1;
|
|
eyeLeft.style.opacity = opacity;
|
|
eyeRight.style.opacity = Math.random() > 0.7 ? opacity : (1 - opacity * 0.5);
|
|
eyeLeftInner.style.opacity = hide ? 0 : 1;
|
|
eyeRightInner.style.opacity = eyeRight.style.opacity < 0.5 ? 0 : 1;
|
|
setTimeout(flickerEyes, randInt(80, 400));
|
|
}
|
|
|
|
// لرزش کلی ربات
|
|
function shakeRobot() {
|
|
if (!container) return;
|
|
var x = randInt(-3, 3);
|
|
var y = randInt(-2, 2);
|
|
var r = rand(-2, 2);
|
|
container.style.transform = 'translate(' + x + 'px, ' + y + 'px) rotate(' + r + 'deg)';
|
|
setTimeout(function() {
|
|
container.style.transform = '';
|
|
}, 80);
|
|
setTimeout(shakeRobot, randInt(800, 2200));
|
|
}
|
|
|
|
// حرکت سر و آنتن
|
|
function wobbleHead() {
|
|
if (!head || !antennaGroup) return;
|
|
var angle = rand(-8, 8);
|
|
head.setAttribute('transform', 'rotate(' + angle + ' 60 37)');
|
|
antennaGroup.setAttribute('transform', 'rotate(' + (angle * 0.8) + ' 60 8)');
|
|
setTimeout(function() {
|
|
head.removeAttribute('transform');
|
|
antennaGroup.setAttribute('transform', '');
|
|
}, 150);
|
|
setTimeout(wobbleHead, randInt(600, 1800));
|
|
}
|
|
|
|
// بازوی آویزان نوسان (مرکز چرخش = ۰٬۰ نسبت به translate شانه)
|
|
function swingArm() {
|
|
if (!armLooseSwing) return;
|
|
var angle = rand(-32, -10);
|
|
armLooseSwing.setAttribute('transform', 'rotate(' + angle + ')');
|
|
setTimeout(swingArm, randInt(300, 700));
|
|
}
|
|
|
|
// دهان لرزان
|
|
function jitterMouth() {
|
|
if (!mouth) return;
|
|
var dy = randInt(-1, 1);
|
|
mouth.setAttribute('d', 'M 42 ' + (52 + dy) + ' Q 60 ' + (58 + dy) + ' 78 ' + (52 + dy));
|
|
setTimeout(jitterMouth, randInt(100, 250));
|
|
}
|
|
|
|
// جرقه از دکمه سینه
|
|
function addSpark() {
|
|
if (!sparksContainer || !chestBtn) return;
|
|
var rect = container.getBoundingClientRect();
|
|
var cx = rect.left + rect.width / 2;
|
|
var cy = rect.top + rect.height * 0.45;
|
|
var spark = document.createElement('div');
|
|
spark.className = 'robot-spark';
|
|
spark.style.left = (50 + rand(-8, 8)) + '%';
|
|
spark.style.top = (42 + rand(-5, 5)) + '%';
|
|
sparksContainer.appendChild(spark);
|
|
var angle = rand(0, Math.PI * 2);
|
|
var dist = rand(15, 45);
|
|
var tx = Math.cos(angle) * dist;
|
|
var ty = Math.sin(angle) * dist - 20;
|
|
spark.animate([
|
|
{ opacity: 1, transform: 'scale(1) translate(0, 0)' },
|
|
{ opacity: 0, transform: 'scale(0.3) translate(' + tx + 'px, ' + ty + 'px)' }
|
|
], { duration: 400, easing: 'ease-out' }).onfinish = function() {
|
|
spark.remove();
|
|
};
|
|
setTimeout(addSpark, randInt(500, 1500));
|
|
}
|
|
|
|
// چشم دکمه سینه چشمک
|
|
function blinkChestBtn() {
|
|
if (!chestBtn) return;
|
|
chestBtn.style.opacity = Math.random() > 0.5 ? '0.6' : '1';
|
|
setTimeout(blinkChestBtn, randInt(200, 600));
|
|
}
|
|
|
|
// شروع انیمیشن‌ها با تأخیر پراکنده
|
|
setTimeout(flickerEyes, 200);
|
|
setTimeout(shakeRobot, 500);
|
|
setTimeout(wobbleHead, 400);
|
|
setTimeout(swingArm, 300);
|
|
setTimeout(jitterMouth, 100);
|
|
setTimeout(addSpark, 800);
|
|
setTimeout(blinkChestBtn, 350);
|
|
})();
|
|
</script>
|
|
|
|
<?php get_footer(); ?>
|