Tuliskan Pertanyaan Anda Pada Form Dibawah Ini
Total Ada 4 Pertanyaan
Loading....
Berita Terbaru
Berita Populer
Komentar Terakhir
-
Robby Prihandaya
Komentar paling pedas Khamenei adalah Iran tidak pernah mengenal Israel. Negara ini juga secara ...
-
Tommy Utama
Para pengunjuk rasa membawa bendera-bendera Palestina dan foro-foto pemimpin tertinggi ...
-
Robby Prihandaya
Anda penyuka Transformer? Tentu hal yang paling menarik saat menonton film Transformer salah ...
<!doctype html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>D7D7 — Blood · MrRobot Vibe</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700;900&family=Share+Tech+Mono&display=swap" rel="stylesheet">
<style>
:root{
--bg:#050405;
--deep:#120000;
--blood:#a80000;
--light-blood:#ff4b4b;
--muted:#bba1a1;
}
html,body{height:100%;margin:0;background:linear-gradient(180deg,var(--bg) 0%, #080005 60%);font-family:system-ui,Arial;color:#fff;overflow:hidden}
.stage{
position:fixed;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;
z-index:1;
}
/* container card */
.card{
width:94vw;max-width:1100px;padding:28px;border-radius:14px;
background:linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.5));
box-shadow:0 30px 80px rgba(0,0,0,0.75), 0 6px 20px rgba(168,0,0,0.06);
border:1px solid rgba(255,255,255,0.03);
position:relative;overflow:visible;
display:flex;gap:22px;align-items:center;
}
/* left : silhouette */
.left{
width:34%;min-width:240px;display:flex;align-items:center;justify-content:center;
}
.hood{
width:100%;max-width:280px;
filter:drop-shadow(0 18px 40px rgba(0,0,0,0.9));
transform-origin:center center;
transition:transform .6s ease;
}
/* right : heading */
.right{
flex:1;padding:8px 6px;display:flex;flex-direction:column;align-items:flex-start;
}
.logo{
font-family: 'Cinzel Decorative', serif;
font-size:9vmin;line-height:0.85;letter-spacing:0.8vmin;
color: #ffdede;
text-transform:uppercase;
font-weight:900;
text-shadow:
0 2px 0 rgba(0,0,0,0.9),
0 8px 40px rgba(168,0,0,0.5),
0 0 26px rgba(255,40,40,0.15);
position:relative;
}
/* bloody underline + drips container */
.bar{
width:72%;height:8px;border-radius:6px;margin-top:12px;background:linear-gradient(90deg,var(--blood),var(--light-blood));
box-shadow:0 8px 28px rgba(168,0,0,0.45), inset 0 -6px 14px rgba(0,0,0,0.45);
position:relative;overflow:visible;
}
.bar::after{
content:'';position:absolute;left:8%;top:100%;width:6px;height:18px;border-radius:12px;
background:linear-gradient(180deg,var(--blood),#5a0000);
box-shadow:0 8px 18px rgba(0,0,0,0.6);
transform:translateY(-6px);
animation:drip 3.6s infinite;
opacity:0.95;
}
@keyframes drip{0%{transform:translateY(-6px)}60%{transform:translateY(26px)}100%{transform:translateY(-6px)}}
.sub{
margin-top:14px;color:var(--muted);font-family:'Share Tech Mono', monospace;font-size:1.2rem;
opacity:0.95;
}
/* canvas fills entire view for blood effects */
canvas#bloodCanvas{position:fixed;left:0;top:0;width:100%;height:100%;z-index:0;pointer-events:none}
/* small controls */
.controls{
position:absolute;right:18px;top:14px;font-family:monospace;font-size:0.9rem;color:rgba(255,200,200,0.85);
background:rgba(0,0,0,0.25);padding:6px 10px;border-radius:8px;backdrop-filter:blur(4px);
}
/* responsive tweak */
@media (max-width:820px){
.card{flex-direction:column;align-items:center;padding:18px}
.left{width:100%;order:2;margin-top:6px}
.right{order:1;align-items:center;text-align:center}
.logo{font-size:11vmin}
.bar{width:94%}
.controls{left:10px;right:auto}
}
/* small flicker/glitch pseudo */
.glitch{
display:inline-block;position:relative;
}
.glitch::before,.glitch::after{
content:attr(data-text);position:absolute;left:0;top:0;opacity:0.9;
clip-path:rect(0,9999px,999px,0);
}
.glitch::before{color:#ffb3b3;transform:translate(-4px,-2px);mix-blend-mode:screen;filter:blur(1px)}
.glitch::after{color:#ff0000;transform:translate(4px,2px);mix-blend-mode:screen;filter:blur(2px)}
</style>
</head>
<body>
<canvas id="bloodCanvas" aria-hidden="true"></canvas>
<div class="stage" role="main" aria-label="Blood Terminal D7D7_Mkaf7h">
<div class="card" id="mainCard">
<div class="left">
<!-- Stylized hooded silhouette (SVG) — evokes Mr Robot hood vibe -->
<svg class="hood" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Hooded silhouette">
<defs>
<linearGradient id="g1" x1="0" x2="1" y1="0" y2="1">
<stop offset="0" stop-color="#0b0b0b"/>
<stop offset="1" stop-color="#171212"/>
</linearGradient>
<filter id="soft" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="2" result="b"/>
<feBlend in="SourceGraphic" in2="b"/>
</filter>
</defs>
<rect width="100%" height="100%" fill="transparent"/>
<!-- hood shadow -->
<path d="M80 260 C55 210 64 150 115 120 C165 90 235 92 285 120 C340 150 345 210 320 260 C295 310 105 310 80 260Z"
fill="url(#g1)" filter="url(#soft)"/>
<!-- face cutout (dark) -->
<path d="M150 170 C150 140 185 110 220 110 C255 110 290 140 290 170 C290 210 260 240 220 240 C180 240 150 210 150 170Z" fill="#060606"/>
<!-- subtle red rim -->
<path d="M72 258 C90 220 120 190 160 180 C200 170 240 170 280 180 C320 190 350 220 328 258" fill="none" stroke="#460000" stroke-width="2.5" opacity="0.9"/>
</svg>
</div>
<div class="right">
<div class="logo glitch" data-text="D7D7_Mkaf7h">D7D7</div>
<div class="bar" aria-hidden="true"></div>
<div class="sub">KTEBH IS HERE — KTB • D7D7 • Vibe</div>
</div>
<div class="controls">Click anywhere to splatter • Double-click to clear</div>
</div>
</div>
<script>
/* JS: blood drops + splatter + small animations */
(function(){
const cvs = document.getElementById('bloodCanvas');
const ctx = cvs.getContext('2d');
let DPR = Math.max(1, devicePixelRatio || 1);
function resize(){
DPR = Math.max(1, devicePixelRatio || 1);
cvs.width = Math.floor(innerWidth * DPR);
cvs.height = Math.floor(innerHeight * DPR);
cvs.style.width = innerWidth + 'px';
cvs.style.height = innerHeight + 'px';
ctx.setTransform(DPR,0,0,DPR,0,0);
}
addEventListener('resize', resize, {passive:true});
resize();
// particles
const drops = [];
const bits = [];
function rand(a,b){return a + Math.random()*(b-a);}
function spawnDrop(x,y,vx=0,vy=2,r=6){
drops.push({x,y,vx,vy,r,life:0});
}
function splatter(x,y,power=14){
const count = 8 + Math.round(Math.random()*12);
for(let i=0;i<count;i++){
const ang = Math.PI*(Math.random()*1.6 - 0.3);
const s = 0.6 + Math.random()*1.6;
bits.push({
x,y,
vx: Math.cos(ang)*power*s*(0.3+Math.random()),
vy: Math.sin(ang)*power*s*(0.3+Math.random()),
r: 1 + Math.random()*3,
life:0
});
}
}
// spawn gentle header drips under logo periodically
const logo = document.querySelector('.logo');
function spawnHeaderDrips(){
const rect = logo.getBoundingClientRect();
const count = Math.max(6, Math.round(rect.width / 70));
for (let i=0;i<count;i++){
const x = rect.left + (i+Math.random())*(rect.width/count);
const y = rect.bottom + 4 + Math.random()*8;
spawnDrop(x,y, rand(-0.6,0.6), rand(1.4,2.6), rand(4,12));
}
}
setTimeout(spawnHeaderDrips, 200);
setInterval(spawnHeaderDrips, 1400);
// ambient spawn
function ambient(){
if (Math.random() < 0.16) spawnDrop(rand(0,innerWidth), -8, rand(-0.5,0.5), rand(1.4,3.4), rand(3,9));
}
// update loop
let last = performance.now();
function loop(now){
const dt = Math.min(40, now - last)/16.666;
last = now;
ambient();
ctx.clearRect(0,0,innerWidth,innerHeight);
// subtle tint
ctx.fillStyle = 'rgba(40,0,0,0.03)';
ctx.fillRect(0,0,innerWidth,innerHeight);
// drops
for (let i=drops.length-1;i>=0;i--){
const d = drops[i];
d.vy += 0.06*dt;
d.vx *= 0.995;
d.x += d.vx * dt * 6;
d.y += d.vy * dt * 6;
d.life += dt;
// draw blob radial gradient
const grd = ctx.createRadialGradient(d.x, d.y, 1, d.x, d.y, d.r*1.8);
grd.addColorStop(0, 'rgba(255,100,100,1)');
grd.addColorStop(0.5, 'rgba(160,0,0,0.95)');
grd.addColorStop(1, 'rgba(60,0,0,0)');
ctx.fillStyle = grd;
ctx.beginPath();
ctx.arc(d.x, d.y, d.r, 0, Math.PI*2);
ctx.fill();
if (d.y > innerHeight - 8 || d.life > 240){
splatter(d.x, Math.min(innerHeight-4,d.y), Math.min(22, 6 + d.r*0.6 + Math.random()*8));
drops.splice(i,1);
}
}
// bits
for (let i=bits.length-1;i>=0;i--){
const b = bits[i];
b.vy += 0.12*dt;
b.vx *= 0.995;
b.x += b.vx * dt;
b.y += b.vy * dt;
b.life += dt;
ctx.beginPath();
ctx.fillStyle = `rgba(140,0,0,${Math.max(0,1 - b.life/120)})`;
ctx.arc(b.x, b.y, b.r, 0, Math.PI*2);
ctx.fill();
if (b.y > innerHeight || b.life > 300) bits.splice(i,1);
}
requestAnimationFrame(loop);
}
requestAnimationFrame(loop);
// click to splat
document.addEventListener('click', (e) => {
// avoid clicks on controls if any
const x = e.clientX, y = e.clientY;
for (let i=0;i<12;i++) spawnDrop(x + rand(-50,50), y + rand(-18,18), rand(-3,3), rand(-1,3), rand(3,16));
splatter(x, y, 18 + Math.random()*30);
});
// double-click clears (fade out)
document.addEventListener('dblclick', () => {
// quick fade: spawn lots of smears then clear arrays
for (let i=0;i<120;i++){
bits.push({
x: rand(0,innerWidth),
y: rand(0,innerHeight),
vx: rand(-6,6), vy: rand(-6,6),
r: rand(2,6), life:0
});
}
setTimeout(()=>{drops.length=0; bits.length=0; ctx.clearRect(0,0,innerWidth,innerHeight);}, 550);
});
// tiny hover bob on hood
const hood = document.querySelector('.hood');
let phase = 0;
(function bob(){
phase += 0.02;
hood.style.transform = `translateY(${Math.sin(phase)*4}px) rotate(${Math.sin(phase/2)*1.2}deg)`;
requestAnimationFrame(bob);
})();
// small keyboard clear: Esc to clear canvas
document.addEventListener('keydown', (ev) => {
if (ev.key === 'Escape') {
drops.length=0; bits.length=0; ctx.clearRect(0,0,innerWidth,innerHeight);
}
});
})();
</script>
</body>
</html>
Bagaimana mendaftar sebagai reseller ya?