File size: 2,068 Bytes
b5f2cf9
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>سبع أسطر</title>
    <style>
        *{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',sans-serif}
        body{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);color:#eaeaea}
        .card{background:rgba(255,255,255,0.05);backdrop-filter:blur(10px);padding:3rem;border-radius:20px;border:1px solid rgba(255,255,255,0.1);text-align:center;max-width:400px}
        h1{font-size:2.5rem;margin-bottom:1rem;background:linear-gradient(90deg,#e94560,#ff6b6b);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
        p{color:#a0a0a0;line-height:1.8;font-size:1.1rem}
        .counter{font-size:4rem;font-weight:700;color:#e94560;margin:1rem 0;text-shadow:0 0 30px rgba(233,69,96,0.5)}
        button{background:linear-gradient(90deg,#e94560,#ff6b6b);border:none;padding:1rem 2.5rem;color:white;font-size:1.1rem;border-radius:50px;cursor:pointer;transition:all 0.3s}
        button:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(233,69,96,0.4)}
        .built-with{position:fixed;top:1rem;left:1rem;font-size:0.75rem;opacity:0.6}
        .built-with a{color:#e94560;text-decoration:none}
    </style>
</head>
<body>
    <div class="card">
        <h1>سبع أسطر فقط!</h1>
        <p>هذا التطبيق بسيط وجميل، مبني بـ 7 أسطر من JavaScript</p>
        <div class="counter" id="count">0</div>
        <button onclick="increment()">اضغط هنا!</button>
    </div>
    <div class="built-with">Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a></div>
    <script>
        let c=0;const increment=()=>{c++;document.getElementById('count').textContent=c;const b=document.querySelector('button');b.style.transform='scale(0.95)';setTimeout(()=>b.style.transform='scale(1)',100)}
    </script>
</body>
</html>