html
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<title>UITRA NET | Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
:root{
--main1:#3a0ca3;
--main2:#b5179e;
--main3:#00f5ff;
}
*{box-sizing:border-box;}
body{
margin:0;
min-height:100vh;
background:linear-gradient(135deg,#020024,#090979,#020024);
font-family:Tahoma, Arial;
display:flex;
justify-content:center;
align-items:center;
color:#fff;
}
/*背景 حركة*/
body::before{
content:"";
position:fixed;
inset:0;
background:
radial-gradient(circle at 20% 20%, rgba(181,23,158,.15), transparent 40%),
radial-gradient(circle at 80% 80%, rgba(0,245,255,.15), transparent 40%);
animation:move 20s infinite alternate;
}
@keyframes move{
from{transform:scale(1) translate(0,0);}
to{transform:scale(1.2) translate(-40px,-20px);}
}
.container{
width:100%;
max-width:430px;
padding:20px;
}
.card{
background:rgba(0,0,0,0.7);
backdrop-filter:blur(12px);
border-radius:25px;
padding:35px;
box-shadow:0 0 60px rgba(0,0,0,1);
text-align:center;
animation:open 1s ease;
}
@keyframes open{
from{opacity:0; transform:scale(.9)}
to{opacity:1; transform:scale(1)}
}
.logo{
font-size:32px;
font-weight:bold;
background:linear-gradient(90deg,var(--main3),var(--main2),var(--main3));
background-size:200%;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
animation:shine 3s linear infinite;
letter-spacing:4px;
}
@keyframes shine{
0%{background-position:0%}
100%{background-position:200%}
}
.quote{
margin:16px 0 25px;
font-size:14px;
color:#ccc;
line-height:1.6;
}
.progress{
height:5px;
background:#111;
border-radius:10px;
overflow:hidden;
margin-bottom:25px;
}
.bar{
width:40%;
height:100%;
background:linear-gradient(90deg,var(--main3),var(--main2));
animation:load 2s infinite alternate;
}
@keyframes load{
from{width:20%;}
to{width:90%;}
}
input{
width:100%;
padding:14px;
margin-bottom:18px;
border-radius:12px;
border:none;
background:#111;
color:#fff;
outline:none;
transition:.3s;
}
input:focus{
box-shadow:0 0 10px var(--main3);
}
.btn{
width:100%;
padding:14px;
border-radius:12px;
border:none;
background:linear-gradient(135deg,var(--main3),var(--main2));
font-weight:bold;
cursor:pointer;
transition:.3s;
color:#000;
}
.btn:hover{
transform:scale(1.05);
}
.whatsapp{
margin-top:15px;
color:#25d366;
font-size:14px;
}
.footer{
margin-top:10px;
font-size:12px;
color:#777;
}
.error{color:#ff4d6d;margin-bottom:10px}
</style>
</head>
<body>
<div class="container">
<div class="card">
\<div class="logo"\>UITRA NET\</div\>
\<div class="progress"\>
\<div class="bar"\>\</div\>
\</div\>
\<div class="quote"\>
"مرغمون أحياناً أن ندوس على عقبات مؤلمة لـ !! نصل"
\</div\>
$(if error)
\<div class="error"\>$(error)\</div\>
$(endif)
\<form action="$(link-login-only)" method="post"\>
\<input type="hidden" name="dst" value="$(link-orig)"\>
\<input type="hidden" name="popup" value="true"\>
\<input type="text" name="username" placeholder="اسم المستخدم" required\>
\<input type="password" name="password" placeholder="كلمة المرور" required\>
\<input class="btn" type="submit" value="دخول الشبكة"\>
\</form\>
\<div class="whatsapp"\>
📞 +963 998 973 559
\</div\>
\<div class="footer"\>© UITRA NET\</div\>
</div>
</div>
</body>
</html>