selector {
animation: blink-effect 2s linear infinite;
}
@keyframes blink-effect {
0%, 100% {
opacity: 1; /* দেখা যাবে */
}
50% {
opacity: 0; /* অদৃশ্য */
}
}
selector {
animation: pulse-new 20s ease-in-out infinite;
}
@keyframes pulse-new {
0%, 25%, 50%, 75%, 100% {
transform: scale(1);
}
12.5%, 37.5%, 62.5%, 87.5% {
transform: scale(1.1);
}
}
pixel-tags
1- dlv – fb – product – id
2=dlv – fb – product – name
3=dlv – fb – currency
4=dlv – fb – product – price
5=dlv – FB – Order ID
6= scroll depth
1= ecommerce.items.0.item_id
2= ecommerce.items.0.item_name
3= ecommerce.currency
4= ecommerce.items.0.price
5= ecommerce.transaction_id
6= (built in variable) scroll depth treshold+unites+direction
1=Purchase
1=purchase
2=ViewContent
2=view_item
3= scroll depth
3= (verticle)>persentages>10, 25, 50, 75, 90, 100 > (percent)
1= FB ALL PAGE VIEW> PIXEL ID> page view>trigger= all page
2= view content> pixel id>viewcontent>object properties-5>
1- content_type = product
2-currency
3-value
4-content_ids
5-content_name
>triggers= view content
3= (copy previous)
purchase>pixel id>purchase>object pro (5)+1- order_id(variable)> trigger=purchase
4= SCROLL DEPTH> fb pixel> custom> scroll >object pro(1)> persent_scroll={{Scroll Depth Threshold}}
>triggers=scroll depth
selector {
background: linear-gradient(20deg, black, #1900AA, #863CFF, #863CFF);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
padding: 10px;
}
selector{
background: linear-gradient(900deg, white, black);
}
selector{
background: linear-gradient(900deg, white, black);
}
.rainbow {
font-size: 4rem;
font-weight: 800;
background: linear-gradient(
90deg,
red, blue, black
);
background-size: 200%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: rainbow 3s linear infinite;
}
@keyframes rainbow {
0% {
background-position: 200%;
}
100% {
background-position: 0%;
}
}
selector{
background: linear-gradient(900deg, white, black);
}
.rainbow {
font-size: 4rem;
font-weight: 800;
background: linear-gradient(
90deg,
red, blue, black
);
background-size: 200%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: rainbow 3s linear infinite;
}
@keyframes rainbow {
0% {
background-position: 200%;
}
100% {
background-position: 0%;
}
}
selector{
background: linear-gradient(900deg, white, black);
}
.rainbow {
font-size: 4rem;
font-weight: 800;
background: linear-gradient(
90deg,
red, blue, black
);
background-size: 200%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: rainbow 3s linear infinite;
}
@keyframes rainbow {
0% {
background-position: 200%;
}
100% {
background-position: 0%;
}
}
fake order solution
fake order solution
multi order block & wp+call
11 digit number validation
add_action(‘woocommerce_checkout_process’, function() {
$phone = sanitize_text_field($_POST[‘billing_phone’] ?? ”);
$phone = preg_replace(‘/\s+/’, ”, $phone);
// Valid BD formats
if ($phone && !preg_match(‘/^(?:\+8801|8801|01)[3-9]\d{8}$/’, $phone)) {
wc_add_notice(
__(‘⚠️ দয়া করে ১১ ডিজিটের সঠিক বাংলাদেশি মোবাইল নাম্বার লিখুন (01XXXXXXXXX)।’),
‘error’
);
}
});
add_action(‘wp_footer’, function(){
if(!is_checkout()) return;
?>
<script>
document.addEventListener(“DOMContentLoaded”, function(){
let phoneField = document.querySelector(“#billing_phone”);
if(!phoneField) return;
let msg = document.createElement(“small”);
msg.style.display = “block”;
msg.style.marginTop = “6px”;
msg.style.fontSize = “13px”;
phoneField.parentNode.appendChild(msg);
phoneField.addEventListener(“input”, function(){
let phone = phoneField.value.replace(/\s+/g,”);
let valid = /^(?:\+8801|8801|01)[3-9]\d{8}$/;
if(phone.length < 11){
phoneField.style.border = “2px solid #e74c3c”;
msg.style.color = “#e74c3c”;
msg.innerText = “দয়া করে সঠিক মোবাইল নাম্বার লিখুন”;
}
else if(valid.test(phone)){
phoneField.style.border = “2px solid #2ecc71”;
msg.style.color = “#2ecc71”;
msg.innerText = “✔ সঠিক মোবাইল নাম্বার”;
}
else{
phoneField.style.border = “2px solid #e74c3c”;
msg.style.color = “#e74c3c”;
msg.innerText = “দয়া করে সঠিক বাংলাদেশি নাম্বার লিখুন”;
}
});
});
</script>
<?php
});
show user ip
function get_the_user_ip() {
$ip = $_SERVER['REMOTE_ADDR'] ?? '';
// Prioritize client IP over forwarded IP
if (!empty($_SERVER['HTTP_CLIENT_IP'])) {
$ip = $_SERVER['HTTP_CLIENT_IP'];
} elseif (!empty($_SERVER['HTTP_X_FORWARDED_FOR'])) {
$ip = trim(explode(',', $_SERVER['HTTP_X_FORWARDED_FOR'])[0]);
}
return apply_filters('wpb_get_ip', $ip);
}
add_shortcode('show_ip', 'get_the_user_ip');
stop duplicate order.txt+ hours
function eideshi_get_customer_ip() {
if (class_exists('WC_Geolocation')) {
$ip = WC_Geolocation::get_ip_address();
if (!empty($ip)) {
return sanitize_text_field($ip);
}
}
$keys = [
'HTTP_CF_CONNECTING_IP',
'HTTP_X_REAL_IP',
'HTTP_X_FORWARDED_FOR',
'HTTP_CLIENT_IP',
'REMOTE_ADDR',
];
foreach ($keys as $key) {
if (!empty($_SERVER[$key])) {
$ip = $_SERVER[$key];
if (strpos($ip, ',') !== false) {
$ip = explode(',', $ip)[0];
}
return sanitize_text_field(trim($ip));
}
}
return '';
}
add_action('woocommerce_checkout_process', function () {
$cooldown = 2 * HOUR_IN_SECONDS; // 2 hours
$ip = eideshi_get_customer_ip();
if (empty($ip)) {
return;
}
$orders = wc_get_orders([
'limit' => 1,
'status' => ['pending','processing','completed','on-hold'],
'date_created' => '>' . (time() - $cooldown),
'meta_query' => [
[
'key' => '_customer_ip',
'value' => $ip,
],
],
'return' => 'ids',
]);
if (!empty($orders)) {
wc_add_notice(
'⚠️ আপনি সম্প্রতি একটি অর্ডার করেছেন। অনুগ্রহ করে ২ ঘণ্টা পরে আবার চেষ্টা করুন।',
'error'
);
}
});
add_action('woocommerce_checkout_create_order', function ($order) {
$ip = eideshi_get_customer_ip();
if (!empty($ip)) {
$order->update_meta_data('_customer_ip', $ip);
}
});
fake order (All setup+last update)
if (!defined(‘ABSPATH’)) exit;
/*————————————————————–
# Admin Menu
————————————————————–*/
add_action(‘admin_menu’, function () {
add_menu_page(
‘Order Blocker’,
‘Order Blocker’,
‘manage_options’,
‘order-blocker’,
‘order_blocker_settings_page’,
‘dashicons-shield’,
25
);
});
/*————————————————————–
# Settings Page
————————————————————–*/
function order_blocker_settings_page()
{
if (isset($_POST[‘save_block_data’])) {
update_option(‘ob_blocked_phones’, sanitize_textarea_field($_POST[‘blocked_phones’]));
update_option(‘ob_blocked_emails’, sanitize_textarea_field($_POST[‘blocked_emails’]));
update_option(‘ob_blocked_ips’, sanitize_textarea_field($_POST[‘blocked_ips’]));
update_option(‘ob_phone_error_message’, sanitize_text_field($_POST[‘phone_error_message’]));
update_option(‘ob_phone_validation_enabled’, isset($_POST[‘phone_validation_enabled’]) ? ‘1’ : ‘0’);
update_option(‘ob_multi_order_error_message’, sanitize_text_field($_POST[‘multi_order_error_message’]));
update_option(‘ob_multi_order_call_number’, sanitize_text_field($_POST[‘multi_order_call_number’]));
update_option(‘ob_multi_order_whatsapp_number’, sanitize_text_field($_POST[‘multi_order_whatsapp_number’]));
update_option(‘ob_multi_order_enabled’, isset($_POST[‘multi_order_enabled’]) ? ‘1’ : ‘0’);
echo ‘<div class=”updated”><p>Saved Successfully</p></div>’;
}
$phones = get_option(‘ob_blocked_phones’, ”);
$emails = get_option(‘ob_blocked_emails’, ”);
$ips = get_option(‘ob_blocked_ips’, ”);
$phone_error = get_option(‘ob_phone_error_message’, ‘⚠️ Invalid Mobile number! Please enter a valid 11-digit Bangladeshi mobile number (01XXXXXXXXX).’);
$phone_validation_enabled = get_option(‘ob_phone_validation_enabled’, ‘0’);
$multi_order_error = get_option(‘ob_multi_order_error_message’, ‘⚠️ আপনার একটি অর্ডার এখনও সম্পন্ন হয়নি। নতুন অর্ডার করতে নিচের নম্বরগুলোতে যোগাযোগ করুন।’);
$multi_order_call = get_option(‘ob_multi_order_call_number’, ‘01971428757’);
$multi_order_whatsapp = get_option(‘ob_multi_order_whatsapp_number’, ‘8801971428757’);
$multi_order_enabled = get_option(‘ob_multi_order_enabled’, ‘0’);
?>
<div class=”wrap”>
<h1>Order Blocker Settings</h1>
<form method=”post”>
<h3>Blocked Phone Numbers (1 per line)</h3>
<textarea name=”blocked_phones” rows=”6″ style=”width:100%;”><?php echo esc_textarea($phones); ?></textarea>
<h3>Blocked Emails (1 per line)</h3>
<textarea name=”blocked_emails” rows=”6″ style=”width:100%;”><?php echo esc_textarea($emails); ?></textarea>
<h3>Blocked IP Addresses (1 per line)</h3>
<textarea name=”blocked_ips” rows=”6″ style=”width:100%;”><?php echo esc_textarea($ips); ?></textarea>
<h3>Phone 11-Digit Validation</h3>
<label><input type=”checkbox” name=”phone_validation_enabled” value=”1″ <?php checked($phone_validation_enabled,’1′); ?> /> Enable Validation</label>
<p>Current Error Message:</p>
<input type=”text” name=”phone_error_message” value=”<?php echo esc_attr($phone_error); ?>” style=”width:100%; padding:8px;”>
<h3>Multi-Order Block + Stylish Popup</h3>
<label><input type=”checkbox” name=”multi_order_enabled” value=”1″ <?php checked($multi_order_enabled,’1′); ?> /> Enable Multi-Order Block</label>
<p>Popup Error Message:</p>
<input type=”text” name=”multi_order_error_message” value=”<?php echo esc_attr($multi_order_error); ?>” style=”width:100%; padding:8px;”>
<p>Call Number:</p>
<input type=”text” name=”multi_order_call_number” value=”<?php echo esc_attr($multi_order_call); ?>” style=”width:100%; padding:8px;”>
<p>WhatsApp Number:</p>
<input type=”text” name=”multi_order_whatsapp_number” value=”<?php echo esc_attr($multi_order_whatsapp); ?>” style=”width:100%; padding:8px;”>
<br><br>
<input type=”submit” name=”save_block_data” class=”button button-primary” value=”Save Settings”>
</form>
</div>
<?php
}
/*————————————————————–
# Normalize Phone
————————————————————–*/
function ob_normalize_phone($phone)
{
$phone = preg_replace(‘/\D/’, ”, $phone);
if (substr($phone,0,3) === ‘880’) {
$phone = ‘0’ . substr($phone,3);
}
if (substr($phone,0,2) !== ’01’ && strlen($phone) == 10) {
$phone = ‘0’.$phone;
}
return $phone;
}
/*————————————————————–
# Checkout Validation
————————————————————–*/
add_action(‘woocommerce_checkout_process’, function () {
$blocked_phones = array_filter(array_map(‘trim’, explode(“\n”, get_option(‘ob_blocked_phones’, ”))));
$blocked_emails = array_filter(array_map(‘trim’, explode(“\n”, get_option(‘ob_blocked_emails’, ”))));
$blocked_ips = array_filter(array_map(‘trim’, explode(“\n”, get_option(‘ob_blocked_ips’, ”))));
$phone_error = get_option(‘ob_phone_error_message’, ‘⚠️ Invalid Mobile number! Please enter a valid 11-digit Bangladeshi mobile number (01XXXXXXXXX).’);
$phone_validation_enabled = get_option(‘ob_phone_validation_enabled’, ‘0’);
$multi_order_error = get_option(‘ob_multi_order_error_message’, ‘⚠️ আপনার একটি অর্ডার এখনও সম্পন্ন হয়নি। নতুন অর্ডার করতে নিচের নম্বরগুলোতে যোগাযোগ করুন।’);
$multi_order_call = get_option(‘ob_multi_order_call_number’, ‘01971428757’);
$multi_order_whatsapp = get_option(‘ob_multi_order_whatsapp_number’, ‘8801971428757’);
$multi_order_enabled = get_option(‘ob_multi_order_enabled’,’0′);
$billing_phone = isset($_POST[‘billing_phone’]) ? ob_normalize_phone($_POST[‘billing_phone’]) : ”;
$billing_email = isset($_POST[‘billing_email’]) ? strtolower(trim($_POST[‘billing_email’])) : ”;
$user_ip = $_SERVER[‘REMOTE_ADDR’];
$blocked_phones = array_map(‘ob_normalize_phone’, $blocked_phones);
$blocked_emails = array_map(‘strtolower’, $blocked_emails);
// — Phone / Email / IP Block —
if(in_array($billing_phone, $blocked_phones, true) || in_array($billing_email, $blocked_emails, true) || in_array($user_ip, $blocked_ips, true)) {
wc_add_notice(‘আপনি অর্ডার করতে পারবেন না।’, ‘error’);
}
// — Phone 11-Digit Validation —
if($phone_validation_enabled === ‘1’) {
if($billing_phone && !preg_match(‘/^01[3-9]\d{8}$/’, $billing_phone)) {
wc_add_notice($phone_error, ‘error’);
}
}
// — Multi-Order Popup —
if($multi_order_enabled === ‘1’) {
$device_id = $_COOKIE[‘device_id’] ?? ”;
$args = [
‘limit’ => -1,
‘status’ => [‘pending’,’processing’,’on-hold’],
‘billing_email’ => $billing_email
];
$orders = wc_get_orders($args);
foreach($orders as $order){
$order_phone = $order->get_billing_phone();
$order_ip = get_post_meta($order->get_id(),’_user_ip’,true);
$order_device = get_post_meta($order->get_id(),’_device_id’,true);
if(($billing_phone && $billing_phone === $order_phone) ||
($user_ip && $user_ip === $order_ip) ||
($device_id && $device_id === $order_device)) {
$msg = ‘<div class=”custom-popup-error”>
<p>’.$multi_order_error.'</p>
<div class=”btn-group”>
<a href=”tel:’.$multi_order_call.'” class=”btn-call” target=”_blank”>📞 Call Now</a>
<a href=”https://wa.me/’.$multi_order_whatsapp.'” class=”btn-whatsapp” target=”_blank”>💬 WhatsApp</a>
</div>
</div>’;
wc_add_notice($msg,’error’);
break;
}
}
if(!$device_id){
$device_id_new = bin2hex(random_bytes(10));
setcookie(‘device_id’,$device_id_new,time() + (86400 * 30),”/”);
}
}
});
/*————————————————————–
# Save IP & Device ID
————————————————————–*/
add_action(‘woocommerce_checkout_update_order_meta’, function($order_id){
$ip = $_SERVER[‘REMOTE_ADDR’] ?? ‘unknown_ip’;
$device_id = $_COOKIE[‘device_id’] ?? ‘unknown_device_id’;
update_post_meta($order_id,’_user_ip’,sanitize_text_field($ip));
update_post_meta($order_id,’_device_id’,sanitize_text_field($device_id));
});
/*————————————————————–
# Styling Popup
————————————————————–*/
add_action(‘wp_head’, function(){
if(is_checkout() || function_exists(‘cartflows’)){ ?>
<style>
.custom-popup-error { background:#fff0f0; border:2px solid #ff4d4d; padding:20px 25px; border-radius:10px; color:#b30000; font-size:17px; font-weight:600; text-align:center; box-shadow:0 6px 15px rgba(255,0,0,0.2); animation:popupFadeIn 0.7s ease forwards; margin-bottom:20px; }
.custom-popup-error .btn-group { margin-top:15px; display:flex; justify-content:center; gap:20px; }
.custom-popup-error .btn-call, .custom-popup-error .btn-whatsapp { display:inline-block; padding:12px 22px; border-radius:30px; font-weight:700; color:white !important; text-decoration:none; box-shadow:0 4px 10px rgba(0,0,0,0.15); transition: background-color 0.3s ease; min-width:130px; }
.custom-popup-error .btn-call { background-color:#B30000 !important; }
.custom-popup-error .btn-call:hover { background-color:#000 !important; }
.custom-popup-error .btn-whatsapp { background-color:#1DA851 !important; }
.custom-popup-error .btn-whatsapp:hover { background-color:#000 !important; }
@keyframes popupFadeIn { 0% {opacity:0; transform:translateY(-10px);} 100% {opacity:1; transform:translateY(0);} }
@media (max-width:480px){
.custom-popup-error { padding:15px 12px !important; font-size:14px !important; border-radius:8px !important; }
.custom-popup-error .btn-group { gap:8px !important; }
.custom-popup-error .btn-call, .custom-popup-error .btn-whatsapp { padding:8px 14px !important; font-size:12px !important; min-width:auto !important; border-radius:20px !important; }
}
</style>
<?php }
});
/*————————————————————–
# Smooth Scroll to Error
————————————————————–*/
add_action(‘wp_footer’, function () {
if(is_checkout()){ ?>
<script>
document.addEventListener(“DOMContentLoaded”, function() {
const errorBox = document.querySelector(“.woocommerce-error”);
if(errorBox){ errorBox.scrollIntoView({behavior:”smooth”}); }
});
</script>
<?php }
});
button
Duel btn - call and order
<!DOCTYPE html>
<html lang=”bn”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link href=”https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@500;600;700&display=swap” rel=”stylesheet”>
<style>
:root {
–order-color: #FF0000;
–call-color: #2d6bcb;
–btn-padding: 14px 5px;
–btn-font-size: 1.6rem;
–or-size: 44px;
–or-font-size: 1.1rem;
}
.dual-btn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 400px;
margin: 0 auto;
}
.btn {
flex: 1;
border: none;
font-weight: 600;
color: white;
cursor: pointer;
font-family: ‘Hind Siliguri’, sans-serif;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
transition: all 0.2s ease;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: flex;
align-items: center;
justify-content: center;
padding: var(–btn-padding);
font-size: var(–btn-font-size);
text-decoration: none;
}
.order-btn {
background: var(–order-color);
border-radius: 40px 0 0 40px;
padding-right: 18px;
margin-right: -4px;
}
.order-btn:hover {
background: #c41e2b;
transform: scale(1.02);
}
.call-btn {
background: var(–call-color);
border-radius: 0 40px 40px 0;
padding-left: 18px;
margin-left: -4px;
}
.call-btn:hover {
background: #1245a0;
transform: scale(1.02);
}
.or-circle {
width: var(–or-size);
height: var(–or-size);
background: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: var(–or-font-size);
font-weight: 800;
color: #1e293b;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), 0 0 0 4px #f0f3f8;
flex-shrink: 0;
z-index: 5;
margin: 0 -12px;
border: 2px solid rgba(255, 255, 255, 0.9);
}
.or-circle:hover {
transform: scale(1.05) rotate(360deg);
transition: all 0.4s ease;
}
@media (max-width: 400px) {
:root {
–btn-padding: 12px 5px;
–btn-font-size: 1.1rem;
–or-size: 40px;
–or-font-size: 1rem;
}
}
@media (max-width: 320px) {
:root {
–btn-padding: 10px 3px;
–btn-font-size: 1rem;
–or-size: 36px;
–or-font-size: 0.9rem;
}
}
</style>
</head>
<body>
<div class=”dual-btn”>
<a href=”#order” class=”btn order-btn”>অর্ডার করুন</a>
<div class=”or-circle”>OR</div>
<a href=”tel:01742-660231″ class=”btn call-btn”>কল করুন</a>
</div>
</body>
</html>
checkoiut btn - attention shake
.button.alt.wp-element-button{
animation: subtleShake 3s infinite;
transform-origin: center;
}
@keyframes subtleShake {
0% { transform: rotate(0deg); }
80% { transform: rotate(0deg); }
82% { transform: rotate(-3deg); }
84% { transform: rotate(3deg); }
86% { transform: rotate(-2deg); }
88% { transform: rotate(2deg); }
90% { transform: rotate(-1deg); }
92% { transform: rotate(1deg); }
94% { transform: rotate(0deg); }
100% { transform: rotate(0deg); }
}
checkoiut btn - grow animation
.button.alt.wp-element-button{
animation: growBtn 1.8s ease-in-out infinite;
transition: 0.3s;
}
@keyframes growBtn{
0%{
transform: scale(1);
}
50%{
transform: scale(1.08);
}
100%{
transform: scale(1);
}
}
Background css
bg white
<style>
.pattern-bg-white {
–mx: 0;
–my: 0;
–a-x: calc(var(–mx) * 8px);
–a-y: calc(var(–my) * 8px);
–b-x: calc(var(–mx) * -6px);
–b-y: calc(var(–my) * -6px);
–c-x: calc(var(–mx) * 4px);
–c-y: calc(var(–my) * 4px);
background:
repeating-linear-gradient(
45deg,
transparent calc(-650% / 13) calc(50% / 13),
rgba(0, 0, 0, 0.05) 0 calc(100% / 13),
transparent 0 calc(150% / 13),
rgba(0, 0, 0, 0.05) 0 calc(200% / 13),
transparent 0 calc(250% / 13),
rgba(0, 0, 0, 0.05) 0 calc(300% / 13)
)
calc(0px + var(–c-x)) calc(0px + var(–c-y)),
repeating-linear-gradient(
45deg,
transparent calc(-650% / 13) calc(50% / 13),
rgba(0, 0, 0, 0.04) 0 calc(100% / 13),
transparent 0 calc(150% / 13),
rgba(0, 0, 0, 0.04) 0 calc(200% / 13),
transparent 0 calc(250% / 13),
rgba(0, 0, 0, 0.04) 0 calc(300% / 13)
)
calc(32px + var(–a-x)) calc(32px + var(–a-y)),
repeating-linear-gradient(
-45deg,
transparent calc(-650% / 13) calc(50% / 13),
rgba(0, 0, 0, 0.05) 0 calc(100% / 13),
transparent 0 calc(150% / 13),
rgba(0, 0, 0, 0.05) 0 calc(200% / 13),
transparent 0 calc(250% / 13),
rgba(0, 0, 0, 0.05) 0 calc(300% / 13)
)
calc(0px + var(–b-x)) calc(0px + var(–b-y)),
repeating-linear-gradient(
-45deg,
transparent calc(-650% / 13) calc(50% / 13),
rgba(0, 0, 0, 0.04) 0 calc(100% / 13),
transparent 0 calc(150% / 13),
rgba(0, 0, 0, 0.04) 0 calc(200% / 13),
transparent 0 calc(250% / 13),
rgba(0, 0, 0, 0.04) 0 calc(300% / 13)
)
calc(32px + var(–a-x)) calc(32px + var(–a-y)),
#ffffff; /* 🔥 white background */
background-size: 64px 64px;
}
</style>
bg black
<style>
.pattern-bg {
–mx: 0;
–my: 0;
–a-x: calc(var(–mx) * 8px);
–a-y: calc(var(–my) * 8px);
–b-x: calc(var(–mx) * -6px);
–b-y: calc(var(–my) * -6px);
–c-x: calc(var(–mx) * 4px);
–c-y: calc(var(–my) * 4px);
background:
repeating-linear-gradient(
45deg,
#0000 calc(-650% / 13) calc(50% / 13),
#100f0f 0 calc(100% / 13),
#0000 0 calc(150% / 13),
#100f0f 0 calc(200% / 13),
#0000 0 calc(250% / 13),
#100f0f 0 calc(300% / 13)
)
calc(0px + var(–c-x)) calc(0px + var(–c-y)),
repeating-linear-gradient(
45deg,
#0000 calc(-650% / 13) calc(50% / 13),
#100f0f 0 calc(100% / 13),
#0000 0 calc(150% / 13),
#100f0f 0 calc(200% / 13),
#0000 0 calc(250% / 13),
#100f0f 0 calc(300% / 13)
)
calc(32px + var(–a-x)) calc(32px + var(–a-y)),
repeating-linear-gradient(
-45deg,
#0000 calc(-650% / 13) calc(50% / 13),
#100f0f 0 calc(100% / 13),
#0000 0 calc(150% / 13),
#100f0f 0 calc(200% / 13),
#0000 0 calc(250% / 13),
#100f0f 0 calc(300% / 13)
)
calc(0px + var(–b-x)) calc(0px + var(–b-y)),
repeating-linear-gradient(
-45deg,
#0000 calc(-650% / 13) calc(50% / 13),
#100f0f 0 calc(100% / 13),
#0000 0 calc(150% / 13),
#100f0f 0 calc(200% / 13),
#0000 0 calc(250% / 13),
#100f0f 0 calc(300% / 13)
)
calc(32px + var(–a-x)) calc(32px + var(–a-y)) #1e1e1e;
background-size: 64px 64px;
}
</style>
pre loader
html pre loader- box box
<!DOCTYPE html>
<html lang=”bn”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<style>
/* CSS Variables */
:root {
–x9-loader-size: 250px;
–x9-loader-duration: 2s;
–x9-background: linear-gradient(0deg, rgba(50, 50, 50, 0.2) 0%, rgba(100, 100, 100, 0.2) 100%);
}
/* Preloader Container */
.x9-preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000000;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
transition: opacity 0.5s ease;
}
.x9-preloader.hide {
opacity: 0;
pointer-events: none;
}
/* Loader Styles */
.x9-loader {
–size: var(–x9-loader-size);
–duration: var(–x9-loader-duration);
–background: var(–x9-background);
height: var(–size);
aspect-ratio: 1;
position: relative;
}
.x9-loader .x9-box {
position: absolute;
background: rgba(100, 100, 100, 0.15);
background: var(–background);
border-radius: 50%;
border-top: 1px solid rgba(100, 100, 100, 1);
box-shadow: rgba(0, 0, 0, 0.3) 0px 10px 10px -0px;
backdrop-filter: blur(5px);
animation: x9-ripple var(–duration) infinite ease-in-out;
}
.x9-loader .x9-box:nth-child(1) {
inset: 40%;
z-index: 99;
}
.x9-loader .x9-box:nth-child(2) {
inset: 30%;
z-index: 98;
border-color: rgba(100, 100, 100, 0.8);
animation-delay: 0.2s;
}
.x9-loader .x9-box:nth-child(3) {
inset: 20%;
z-index: 97;
border-color: rgba(100, 100, 100, 0.6);
animation-delay: 0.4s;
}
.x9-loader .x9-box:nth-child(4) {
inset: 10%;
z-index: 96;
border-color: rgba(100, 100, 100, 0.4);
animation-delay: 0.6s;
}
.x9-loader .x9-box:nth-child(5) {
inset: 0%;
z-index: 95;
border-color: rgba(100, 100, 100, 0.2);
animation-delay: 0.8s;
}
@keyframes x9-ripple {
0% {
transform: scale(1);
box-shadow: rgba(0, 0, 0, 0.3) 0px 10px 10px -0px;
}
50% {
transform: scale(1.3);
box-shadow: rgba(0, 0, 0, 0.3) 0px 30px 20px -0px;
}
100% {
transform: scale(1);
box-shadow: rgba(0, 0, 0, 0.3) 0px 10px 10px -0px;
}
}
</style>
</head>
<body>
<div class=”x9-preloader” id=”x9-preloader”>
<div class=”x9-loader”>
<div class=”x9-box”></div>
<div class=”x9-box”></div>
<div class=”x9-box”></div>
<div class=”x9-box”></div>
<div class=”x9-box”></div>
</div>
</div>
<script>
// Hide preloader when page is fully loaded
window.addEventListener(‘load’, function() {
const preloader = document.getElementById(‘x9-preloader’);
if (preloader) {
preloader.classList.add(‘hide’);
setTimeout(function() {
preloader.style.display = ‘none’;
}, 500);
}
});
</script>
<!– Your existing website content goes here –>
<!– আপনার ওয়েবসাইটের কন্টেন্ট এখানে বসবে –>
</body>
</html>
php pre loader- dot dot
add_action(‘wp_footer’, function() {
// Only Homepage
if (!is_front_page()) return;
?>
<!– PRELOADER –>
<div id=”preloader”>
<div class=”loader”>
<div class=”circle”>
<div class=”dot”></div>
<div class=”outline”></div>
</div>
<div class=”circle”>
<div class=”dot”></div>
<div class=”outline”></div>
</div>
<div class=”circle”>
<div class=”dot”></div>
<div class=”outline”></div>
</div>
<div class=”circle”>
<div class=”dot”></div>
<div class=”outline”></div>
</div>
</div>
</div>
<style>
#preloader {
position: fixed;
inset: 0;
background: #000;
z-index: 999999;
display: flex;
justify-content: center;
align-items: center;
}
.loader {
display: flex;
justify-content: center;
align-items: center;
–color: rgba(255,255,255,0.8);
–animation: 2s ease-in-out infinite;
}
.loader .circle {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 20px;
height: 20px;
border: solid 2px var(–color);
border-radius: 50%;
margin: 0 10px;
animation: circle-keys var(–animation);
}
.loader .circle .dot {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
border-radius: 50%;
background-color: var(–color);
animation: dot-keys var(–animation);
}
.loader .circle .outline {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
border-radius: 50%;
animation: outline-keys var(–animation);
}
.circle:nth-child(2) { animation-delay: 0.3s; }
.circle:nth-child(3) { animation-delay: 0.6s; }
.circle:nth-child(4) { animation-delay: 0.9s; }
.circle:nth-child(2) .dot { animation-delay: 0.3s; }
.circle:nth-child(3) .dot { animation-delay: 0.6s; }
.circle:nth-child(4) .dot { animation-delay: 0.9s; }
.circle:nth-child(1) .outline { animation-delay: 0.9s; }
.circle:nth-child(2) .outline { animation-delay: 1.2s; }
.circle:nth-child(3) .outline { animation-delay: 1.5s; }
.circle:nth-child(4) .outline { animation-delay: 1.8s; }
@keyframes circle-keys {
0% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.5); opacity: 0.5; }
100% { transform: scale(1); opacity: 1; }
}
@keyframes dot-keys {
0% { transform: translate(-50%, -50%) scale(1); }
50% { transform: translate(-50%, -50%) scale(0); }
100% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes outline-keys {
0% {
transform: translate(-50%, -50%) scale(0);
outline: solid 10px var(–color);
outline-offset: 0;
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(1);
outline: solid 0 transparent;
outline-offset: 10px;
opacity: 0;
}
}
</style>
<script>
window.addEventListener(“load”, function() {
var preloader = document.getElementById(“preloader”);
setTimeout(function() {
preloader.style.opacity = “0”;
preloader.style.transition = “0.5s ease”;
setTimeout(function(){
preloader.style.display = “none”;
}, 500);
}, 500);
});
</script>
<?php
});