armaan

<!DOCTYPE html>

<head>

<title>Elixir Style Animation Slider</title>

<style>

html, body {

margin: 0; padding: 0;

height: 100%; width:100vw;

overflow: hidden;

-webkit-user-select: none;

user-select: none;

background: #181818;

}

body {

display: flex;

flex-direction: column;

align-items: center;

justify-content: flex-end;

min-height: 100vh;

width: 100vw;

position: relative;

font-family: 'Segoe UI', sans-serif;

}

.preloader {

display: flex;

align-items: center;

justify-content: center;

position: fixed;

top: 0; left: 0; width: 100vw; height: 100vh;

background: #181818;

z-index: 9999;

}

.preloader img {

width: 180px; /* आप यहां साइज बदल सकते हैं */

height: 120px;

object-fit: contain;

border-radius: 12px;

box-shadow: 0 6px 22px #0009;

background: #fff;

}

.hidden {

display: none !important;

}

.slider-wrapper {

position: absolute;

top: 0; left: 0; right: 0;

bottom: 100px;

width: 100vw;

height: calc(100vh - 100px);

z-index: 1;

overflow: hidden;

}

.slider-img {

position: absolute;

width: 100vw;

height: 100%;

left: 0;

top: 0;

object-fit: cover;

opacity: 0;

will-change: transform, opacity;

transition: opacity 1s, transform 5s;

pointer-events: none;

}

.slider-img.active {

opacity: 1;

z-index: 2;

transform: scale(1.08);

transition: opacity 1s, transform 5s;

}

.button-row {

width: 100vw;

display: flex;

justify-content: center;

gap: 18px;

position: absolute;

bottom: 120px;

left: 0;

z-index: 5;

margin-bottom: 0;

}

.link-btn {

display: flex;

align-items: center;

justify-content: center;

padding: 0;

width: 62px;

height: 62px;

border-radius: 15px;

border: none;

background: linear-gradient(90deg, #36379e 50%, #e76060 100%);

color: #fff;

text-decoration: none;

box-shadow: 0 6px 18px #0005;

font-weight: 600;

cursor: pointer;

min-width: 62px;

outline: none;

position: relative;

overflow: hidden;

transition: background 0.25s, transform 0.2s;

touch-action: manipulation;

letter-spacing: .03em;

user-select: none;

pointer-events: auto;

}

.link-btn:active {

transform: scale(0.95);

}

.link-btn::before {

content: '';

position: absolute;

top: 0; left: 0; right: 0; bottom: 0;

background: rgba(0, 0, 0, 0.5);

border-radius: 15px;

z-index: 0;

}

.link-btn img {

position: relative;

z-index: 1;

width: 100%;

height: 100%;

object-fit: cover;

pointer-events: none;

user-select: none;

animation: circleAnimation 4s linear infinite;

transform-origin: center;

}

.spinner {

display: none;

border: 4px solid rgba(255, 255, 255, 0.3);

border-radius: 50%;

border-top: 4px solid #fff;

width: 40px;

height: 40px;

animation: spin 0.8s linear infinite;

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

z-index: 10;

}

.link-btn.loading {

pointer-events: none;

}

.link-btn.loading::after {

content: '';

position: absolute;

top: 0; left: 0; right: 0; bottom: 0;

background: rgba(0, 0, 0, 0.6);

border-radius: 15px;

z-index: 5;

}

.link-btn.loading .spinner {

display: block;

}

.link-btn.loading img {

opacity: 0.3;

}

.credit-bar {

width: 100vw;

text-align: center;

color: #9ea6b8;

font-size: 14px;

background: rgba(2,9,29,0.88);

padding: 8px 0;

letter-spacing: 1.5px;

z-index: 7;

position: absolute;

left: 0;

bottom: 38px;

font-family: Arial, sans-serif;

font-weight: 500;

box-shadow: 0 -3px 16px #0002;

user-select: none;

pointer-events: none;

}

img, .slider-img {

-webkit-touch-callout: none;

-webkit-user-drag: none;

user-drag: none;

-webkit-user-select: none;

user-select: none;

}

body, * {

-webkit-tap-highlight-color: transparent;

}

@keyframes spin {

0% { transform: translate(-50%, -50%) rotate(0deg);}

100% { transform: translate(-50%, -50%) rotate(360deg);}

}

</style>

</head>

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/Flag_of_Indian_Armed_Forces.svg/1024px-Flag_of_Indian_Armed_Forces.svg.png"

alt="preloader" draggable="false" style="width:180px;height:120px;" />

</div>

</div>

</a>

</a>

</a>

</a>

</div>

Official Armaan 2.0<br/> Integrated HQ of MoD (Army)

</div>

// Show preloader and hide main content initially

const preloader = document.getElementById('preloader');

const sliderWrapper = document.getElementById('sliderWrapper');

const buttonRow = document.getElementById('buttonRow');

const creditBar = document.getElementById('creditBar');

// After 2 seconds hide preloader, show main UI

setTimeout(() => {

preloader.style.display = 'none';

sliderWrapper.style.display = 'block';

buttonRow.style.display = 'flex';

creditBar.style.display = 'block';

}, 2000);

// Original slider code unchanged

const imgs = document.querySelectorAll('.slider-img');

let index = 0, total = imgs.length;

function showImg(idx) {

imgs.forEach((img, i) => {

img.classList.remove('active');

if (i === idx) img.classList.add('active');

});

}

function nextImg() {

index = (index + 1) % total;

showImg(index);

}

setInterval(nextImg, 5000);

showImg(index);

function handleBtnClick(e) {

e.preventDefault();

const btn = e.currentTarget;

const url = btn.dataset.url;

if (btn.classList.contains('loading')) return;

btn.classList.add('loading');

setTimeout(() => {

window.location.href = url;

}, 2000);

}

document.querySelectorAll('.link-btn').forEach(btn => {

btn.addEventListener('click', handleBtnClick);

});

document.body.addEventListener('copy', function(e) {

e.preventDefault();

return false;

});

document.addEventListener('gesturestart', function(e) {

e.preventDefault();

});

document.addEventListener('touchmove', function(event) {

if (event.touches.length > 1) {

event.preventDefault();

}

}, { passive: false });

window.scrollTo(0, 0);

window.addEventListener('scroll', () => {

window.scrollTo(0, 0);

});

</script>

</body>

</html>

armaan

Contact Form