<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ł…ŲÆŪŲ±ŪŲŖ Ł…ŲŲµŁŁ„Ų§ŲŖ | ŚŁ†ŲŖŪŲ³</title>
<style>
:root {
--primary-color: #4a6bdf;
--secondary-color: #f8f9fa;
--success-color: #28a745;
--text-color: #333;
--light-text: #6c757d;
--border-color: #dee2e6;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f5f7fa;
color: var(--text-color);
line-height: 1.6;
}
.container {
max-width: 100%;
padding: 20px;
margin: 0 auto;
}
/* ŲµŁŲŁ‡ Ł…Ų¹Ų±ŁŪ (Ų§Ų³Ł„Ų§ŪŲÆŁ‡Ų§) */
.intro-slider {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 20px;
}
.intro-slide {
display: none;
animation: fade 0.5s ease-in-out;
}
.intro-slide.active {
display: block;
}
.intro-slide img {
width: 200px;
height: 200px;
margin-bottom: 30px;
}
.intro-slide h2 {
font-size: 24px;
margin-bottom: 15px;
color: var(--primary-color);
}
.intro-slide p {
color: var(--light-text);
margin-bottom: 30px;
}
.slider-indicators {
display: flex;
justify-content: center;
margin-top: 30px;
}
.indicator {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #ccc;
margin: 0 5px;
cursor: pointer;
}
.indicator.active {
background-color: var(--primary-color);
}
.btn {
display: inline-block;
padding: 12px 24px;
background-color: var(--primary-color);
color: white;
border: none;
border-radius: 5px;
text-decoration: none;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
}
.btn:hover {
background-color: #3a5bd0;
}
.btn-outline {
background-color: transparent;
border: 1px solid var(--primary-color);
color: var(--primary-color);
}
.btn-outline:hover {
background-color: var(--primary-color);
color: white;
}
/* ŲµŁŲŁ‡ ŁŲ±ŁŲÆ */
.auth-container {
max-width: 400px;
margin: 50px auto;
padding: 30px;
background-color: white;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.auth-header {
text-align: center;
margin-bottom: 30px;
}
.auth-header img {
width: 80px;
height: 80px;
margin-bottom: 15px;
}
.auth-header h2 {
color: var(--primary-color);
margin-bottom: 10px;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
}
.form-control {
width: 100%;
padding: 12px 15px;
border: 1px solid var(--border-color);
border-radius: 5px;
font-size: 16px;
transition: border-color 0.3s;
}
.form-control:focus {
outline: none;
border-color: var(--primary-color);
}
.auth-footer {
text-align: center;
margin-top: 20px;
color: var(--light-text);
}
.auth-footer a {
color: var(--primary-color);
text-decoration: none;
}
/* ŲµŁŲŁ‡ ŲÆŲ±ŪŲ§ŁŲŖ ŲÆŲ³ŲŖŲ±Ų³Ū */
.permission-list {
list-style: none;
margin: 20px 0;
}
.permission-item {
display: flex;
align-items: center;
padding: 15px;
border: 1px solid var(--border-color);
border-radius: 5px;
margin-bottom: 10px;
}
.permission-item i {
margin-left: 10px;
color: var(--primary-color);
}
/* ŲµŁŲŁ‡ Ł¾ŪŲ§Ł… Ł…ŁŁŁ‚ŪŲŖ */
.success-container {
text-align: center;
padding: 50px 20px;
}
.success-icon {
width: 100px;
height: 100px;
background-color: var(--success-color);
color: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto 30px;
font-size: 40px;
}
.success-message h2 {
color: var(--success-color);
margin-bottom: 15px;
}
.success-message p {
color: var(--light-text);
margin-bottom: 30px;
}
@keyframes fade {
from {opacity: 0.4;}
to {opacity: 1;}
}
/* Ł†Ų§ŁŲØŲ±Ū ŲØŪŁ† ŲµŁŲŲ§ŲŖ */
.nav-buttons {
display: flex;
justify-content: space-between;
margin-top: 30px;
}
</style>
</head>
<body>
<!-- ŲµŁŲŁ‡ Ł…Ų¹Ų±ŁŪ Ų§Ł¾Ł„ŪŚ©ŪŲ´Ł† -->
<div id="intro-screen" class="container">
<div class="intro-slider">
<div class="intro-slide active">
<img src="https://via.placeholder.com/200" alt="Ł…ŲÆŪŲ±ŪŲŖ Ł…ŲŲµŁŁ„Ų§ŲŖ">
<h2>ŲØŁ‡ Ų§Ł¾Ł„ŪŚ©ŪŲ´Ł† Ł…ŲÆŪŲ±ŪŲŖ Ł…ŲŲµŁŁ„Ų§ŲŖ Ų®ŁŲ´ Ų¢Ł…ŲÆŪŲÆ</h2>
<p>ŲØŲ§ Ų§Ų³ŲŖŁŲ§ŲÆŁ‡ Ų§Ų² Ų§ŪŁ† Ų§Ł¾Ł„ŪŚ©ŪŲ´Ł† Ł…ŪŲŖŁŲ§Ł†ŪŲÆ Ł…ŲŲµŁŁ„Ų§ŲŖ Ų®ŁŲÆ Ų±Ų§ ŲØŁ‡ Ų³Ų§ŲÆŚÆŪ Ł…ŲÆŪŲ±ŪŲŖ Ś©Ł†ŪŲÆ</p>
</div>
<div class="intro-slide">
<img src="https://via.placeholder.com/200" alt="Ł„ŪŲ³ŲŖ Ł…ŲŲµŁŁ„Ų§ŲŖ">
<h2>Ł…ŲÆŪŲ±ŪŲŖ ŲŲ±ŁŁ‡Ų§Ū Ł…ŲŲµŁŁ„Ų§ŲŖ</h2>
<p>Ł„ŪŲ³ŲŖ Ś©Ų§Ł…Ł„Ū Ų§Ų² Ł…ŲŲµŁŁ„Ų§ŲŖ Ų®ŁŲÆ Ų±Ų§ ŲÆŲ§Ų´ŲŖŁ‡ ŲØŲ§Ų´ŪŲÆ Ł ŲØŁ‡ Ų±Ų§ŲŲŖŪ Ų¬Ų³ŲŖŲ¬Ł Ś©Ł†ŪŲÆ</p>
</div>
<div class="intro-slide">
<img src="https://via.placeholder.com/200" alt="Ų¢Ł†Ų§Ł„ŪŲ² ŁŲ±ŁŲ´">
<h2>Ų¢Ł†Ų§Ł„ŪŲ² Ł ŚÆŲ²Ų§Ų±Ų´ŚÆŪŲ±Ū</h2>
<p>ŚÆŲ²Ų§Ų±Ų´Ł‡Ų§Ū ŲÆŁ‚ŪŁ‚Ū Ų§Ų² ŁŲ±ŁŲ´ Ł Ł…ŁŲ¬ŁŲÆŪ Ł…ŲŲµŁŁ„Ų§ŲŖ Ų®ŁŲÆ ŲÆŲ±ŪŲ§ŁŲŖ Ś©Ł†ŪŲÆ</p>
</div>
<div class="slider-indicators">
<span class="indicator active"></span>
<span class="indicator"></span>
<span class="indicator"></span>
</div>
<div class="nav-buttons">
<button class="btn btn-outline" onclick="skipIntro()">Ų±ŲÆ Ś©Ų±ŲÆŁ†</button>
<button class="btn" onclick="nextSlide()">ŲØŲ¹ŲÆŪ</button>
</div>
</div>
</div>
<!-- ŲµŁŲŁ‡ ŁŲ±ŁŲÆ -->
<div id="login-screen" class="container" style="display: none;">
<div class="auth-container">
<div class="auth-header">
<img src="https://via.placeholder.com/80" alt="ŚŁ†ŲŖŪŲ³">
<h2>ŁŲ±ŁŲÆ ŲØŁ‡ ŲŲ³Ų§ŲØ Ś©Ų§Ų±ŲØŲ±Ū</h2>
<p>ŲØŲ±Ų§Ū ŲÆŲ³ŲŖŲ±Ų³Ū ŲØŁ‡ Ł¾Ł†Ł„ Ł…ŲÆŪŲ±ŪŲŖŲ Ł„Ų·ŁŲ§ ŁŲ§Ų±ŲÆ Ų´ŁŪŲÆ</p>
</div>
<form id="login-form">
<div class="form-group">
<label for="username">Ł†Ų§Ł… Ś©Ų§Ų±ŲØŲ±Ū</label>
<input type="text" id="username" class="form-control" placeholder="Ł†Ų§Ł… Ś©Ų§Ų±ŲØŲ±Ū Ų®ŁŲÆ Ų±Ų§ ŁŲ§Ų±ŲÆ Ś©Ł†ŪŲÆ">
</div>
<div class="form-group">
<label for="password">Ś©Ł„Ł…Ł‡ Ų¹ŲØŁŲ±</label>
<input type="password" id="password" class="form-control" placeholder="Ś©Ł„Ł…Ł‡ Ų¹ŲØŁŲ± Ų®ŁŲÆ Ų±Ų§ ŁŲ§Ų±ŲÆ Ś©Ł†ŪŲÆ">
</div>
<button type="submit" class="btn" style="width: 100%;">ŁŲ±ŁŲÆ</button>
</form>
<div class="auth-footer">
ŲŲ³Ų§ŲØ Ś©Ų§Ų±ŲØŲ±Ū Ł†ŲÆŲ§Ų±ŪŲÆŲ <a href="#" onclick="showRegister()">Ų«ŲØŲŖ Ł†Ų§Ł… Ś©Ł†ŪŲÆ</a>
</div>
</div>
</div>
<!-- ŲµŁŲŁ‡ Ų«ŲØŲŖ Ł†Ų§Ł… -->
<div id="register-screen" class="container" style="display: none;">
<div class="auth-container">
<div class="auth-header">
<img src="https://via.placeholder.com/80" alt="ŚŁ†ŲŖŪŲ³">
<h2>Ų«ŲØŲŖ Ł†Ų§Ł… Ų¬ŲÆŪŲÆ</h2>
<p>ŲØŲ±Ų§Ū Ų§Ų³ŲŖŁŲ§ŲÆŁ‡ Ų§Ų² Ų§Ł¾Ł„ŪŚ©ŪŲ´Ł†Ų Ł„Ų·ŁŲ§ Ų«ŲØŲŖ Ł†Ų§Ł… Ś©Ł†ŪŲÆ</p>
</div>
<form id="register-form">
<div class="form-group">
<label for="fullname">Ł†Ų§Ł… Ś©Ų§Ł…Ł„</label>
<input type="text" id="fullname" class="form-control" placeholder="Ł†Ų§Ł… Ł Ł†Ų§Ł… Ų®Ų§Ł†ŁŲ§ŲÆŚÆŪ Ų®ŁŲÆ Ų±Ų§ ŁŲ§Ų±ŲÆ Ś©Ł†ŪŲÆ">
</div>
<div class="form-group">
<label for="email">Ł¾Ų³ŲŖ Ų§Ł„Ś©ŲŖŲ±ŁŁ†ŪŚ©</label>
<input type="email" id="email" class="form-control" placeholder="Ų§ŪŁ…ŪŁ„ Ų®ŁŲÆ Ų±Ų§ ŁŲ§Ų±ŲÆ Ś©Ł†ŪŲÆ">
</div>
<div class="form-group">
<label for="reg-password">Ś©Ł„Ł…Ł‡ Ų¹ŲØŁŲ±</label>
<input type="password" id="reg-password" class="form-control" placeholder="Ś©Ł„Ł…Ł‡ Ų¹ŲØŁŲ± Ų®ŁŲÆ Ų±Ų§ ŁŲ§Ų±ŲÆ Ś©Ł†ŪŲÆ">
</div>
<div class="form-group">
<label for="confirm-password">ŲŖŚ©Ų±Ų§Ų± Ś©Ł„Ł…Ł‡ Ų¹ŲØŁŲ±</label>
<input type="password" id="confirm-password" class="form-control" placeholder="Ś©Ł„Ł…Ł‡ Ų¹ŲØŁŲ± Ų±Ų§ ŲŖŚ©Ų±Ų§Ų± Ś©Ł†ŪŲÆ">
</div>
<button type="submit" class="btn" style="width: 100%;">Ų«ŲØŲŖ Ł†Ų§Ł…</button>
</form>
<div class="auth-footer">
Ł‚ŲØŁ„Ų§ Ų«ŲØŲŖ Ł†Ų§Ł… Ś©Ų±ŲÆŁ‡Ų§ŪŲÆŲ <a href="#" onclick="showLogin()">ŁŲ§Ų±ŲÆ Ų´ŁŪŲÆ</a>
</div>
</div>
</div>
<!-- ŲµŁŲŁ‡ ŲÆŲ±ŪŲ§ŁŲŖ ŲÆŲ³ŲŖŲ±Ų³ŪŁ‡Ų§ -->
<div id="permission-screen" class="container" style="display: none;">
<div class="auth-container">
<div class="auth-header">
<img src="https://via.placeholder.com/80" alt="ŚŁ†ŲŖŪŲ³">
<h2>ŲÆŲ±Ų®ŁŲ§Ų³ŲŖ ŲÆŲ³ŲŖŲ±Ų³Ū</h2>
<p>ŲØŲ±Ų§Ū Ų§Ų³ŲŖŁŲ§ŲÆŁ‡ Ś©Ų§Ł…Ł„ Ų§Ų² Ų§Ł¾Ł„ŪŚ©ŪŲ´Ł†Ų ŲØŁ‡ ŲÆŲ³ŲŖŲ±Ų³ŪŁ‡Ų§Ū Ų²ŪŲ± Ł†ŪŲ§Ų² ŲÆŲ§Ų±ŪŁ…</p>
</div>
<ul class="permission-list">
<li class="permission-item">
<i>ā“</i>
<span>ŲÆŲ³ŲŖŲ±Ų³Ū ŲØŁ‡ ŲŲ§ŁŲøŁ‡ ŲÆŲ³ŲŖŚÆŲ§Ł‡ ŲØŲ±Ų§Ū Ų°Ų®ŪŲ±Ł‡ Ų§Ų·Ł„Ų§Ų¹Ų§ŲŖ Ł…ŲŲµŁŁ„Ų§ŲŖ</span>
</li>
<li class="permission-item">
<i>ā“</i>
<span>ŲÆŲ³ŲŖŲ±Ų³Ū ŲØŁ‡ ŲÆŁŲ±ŲØŪŁ† ŲØŲ±Ų§Ū Ų«ŲØŲŖ ŲŖŲµŁŪŲ± Ł…ŲŲµŁŁ„Ų§ŲŖ</span>
</li>
<li class="permission-item">
<i>ā“</i>
<span>ŲÆŲ³ŲŖŲ±Ų³Ū ŲØŁ‡ Ł…ŁŁ‚Ų¹ŪŲŖ Ų¬ŲŗŲ±Ų§ŁŪŲ§ŪŪ ŲØŲ±Ų§Ū Ų¢Ł†Ų§Ł„ŪŲ² Ł…Ł†Ų·Ł‚Ł‡Ų§Ū</span>
</li>
</ul>
<div class="nav-buttons">
<button class="btn btn-outline" onclick="showLogin()">ŲØŲ§Ų²ŚÆŲ´ŲŖ</button>
<button class="btn" onclick="grantPermissions()">ŲŖŲ§ŪŪŲÆ ŲÆŲ³ŲŖŲ±Ų³ŪŁ‡Ų§</button>
</div>
</div>
</div>
<!-- ŲµŁŲŁ‡ Ł¾ŪŲ§Ł… Ł…ŁŁŁ‚ŪŲŖ -->
<div id="success-screen" class="container" style="display: none;">
<div class="success-container">
<div class="success-icon">ā“</div>
<div class="success-message">
<h2>Ų«ŲØŲŖ Ł†Ų§Ł… ŲØŲ§ Ł…ŁŁŁ‚ŪŲŖ Ų§Ł†Ų¬Ų§Ł… Ų´ŲÆ!</h2>
<p>ŲŲ³Ų§ŲØ Ś©Ų§Ų±ŲØŲ±Ū Ų´Ł…Ų§ ŲØŲ§ Ł…ŁŁŁ‚ŪŲŖ Ų§ŪŲ¬Ų§ŲÆ Ų´ŲÆ. Ų§Ś©Ł†ŁŁ† Ł…ŪŲŖŁŲ§Ł†ŪŲÆ ŁŲ§Ų±ŲÆ Ų§Ł¾Ł„ŪŚ©ŪŲ´Ł† Ų´ŁŪŲÆ.</p>
<button class="btn" onclick="showDashboard()">ŁŲ±ŁŲÆ ŲØŁ‡ Ł¾Ł†Ł„ Ł…ŲÆŪŲ±ŪŲŖ</button>
</div>
</div>
</div>
<script>
// Ł…ŲÆŪŲ±ŪŲŖ Ų§Ų³Ł„Ų§ŪŲÆŁ‡Ų§Ū Ł…Ų¹Ų±ŁŪ
let currentSlide = 0;
const slides = document.querySelectorAll('.intro-slide');
const indicators = document.querySelectorAll('.indicator');
function nextSlide() {
slides[currentSlide].classList.remove('active');
indicators[currentSlide].classList.remove('active');
currentSlide = (currentSlide + 1) % slides.length;
slides[currentSlide].classList.add('active');
indicators[currentSlide].classList.add('active');
if (currentSlide === slides.length - 1) {
document.querySelector('.intro-slider .btn').textContent = 'Ų´Ų±ŁŲ¹ Ś©Ł†ŪŲÆ';
} else {
document.querySelector('.intro-slider .btn').textContent = 'ŲØŲ¹ŲÆŪ';
}
}
function skipIntro() {
document.getElementById('intro-screen').style.display = 'none';
showLogin();
}
// Ł†Ł…Ų§ŪŲ´ ŲµŁŲŲ§ŲŖ Ł…Ų®ŲŖŁ„Ł
function showLogin() {
hideAllScreens();
document.getElementById('login-screen').style.display = 'block';
}
function showRegister() {
hideAllScreens();
document.getElementById('register-screen').style.display = 'block';
}
function showPermissions() {
hideAllScreens();
document.getElementById('permission-screen').style.display = 'block';
}
function showSuccess() {
hideAllScreens();
document.getElementById('success-screen').style.display = 'block';
}
function showDashboard() {
// Ų§ŪŁ†Ų¬Ų§ ŲØŲ¹ŲÆŲ§ ŲµŁŲŁ‡ Ų§ŲµŁ„Ū Ų±Ų§ Ł†Ł…Ų§ŪŲ´ Ł…ŪŲÆŁ‡ŪŁ…
alert('ŲØŁ‡ Ł¾Ł†Ł„ Ł…ŲÆŪŲ±ŪŲŖ Ł…Ł†ŲŖŁ‚Ł„ Ł…ŪŲ´ŁŪŲÆ');
}
function hideAllScreens() {
document.getElementById('intro-screen').style.display = 'none';
document.getElementById('login-screen').style.display = 'none';
document.getElementById('register-screen').style.display = 'none';
document.getElementById('permission-screen').style.display = 'none';
document.getElementById('success-screen').style.display = 'none';
}
// Ł…ŲÆŪŲ±ŪŲŖ ŁŲ±Ł…Ł‡Ų§
document.getElementById('login-form').addEventListener('submit', function(e) {
e.preventDefault();
showPermissions();
});
document.getElementById('register-form').addEventListener('submit', function(e) {
e.preventDefault();
showSuccess();
});
function grantPermissions() {
showSuccess();
}
// Ų´Ų±ŁŲ¹ ŲØŲ§ ŲµŁŲŁ‡ Ł…Ų¹Ų±ŁŪ
hideAllScreens();
document.getElementById('intro-screen').style.display = 'block';
</script>
</body>
</html>