|
|
<!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> |
|
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;900&family=Roboto:wght@300;400;500;700&family=Tajawal:wght@300;400;500;700;900&display=swap" rel="stylesheet"> |
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> |
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.12/typed.min.js"></script> |
|
|
|
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet"> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script> |
|
|
<style> |
|
|
:root { |
|
|
--primary-color: #4facfe; |
|
|
--primary-gradient: linear-gradient(to right, #4facfe 0%, #00f2fe 100%); |
|
|
--secondary-color: #36d1dc; |
|
|
--secondary-gradient: linear-gradient(to right, #36d1dc 0%, #5b86e5 100%); |
|
|
--accent-color: #ff6a88; |
|
|
--accent-gradient: linear-gradient(to right, #ff6a88 0%, #ff99ac 100%); |
|
|
--dark-color: #1d2b3a; |
|
|
--light-color: #f8fbff; |
|
|
--text-color: #334455; |
|
|
--bg-color: #ffffff; |
|
|
--card-bg: #f0f5ff; |
|
|
--footer-bg: #1a2b3c; |
|
|
--success-color: #2ee86a; |
|
|
--warning-color: #ffcc00; |
|
|
--info-color: #17a2b8; |
|
|
--transition: all 0.3s ease-in-out; |
|
|
--box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05); |
|
|
--card-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); |
|
|
--button-shadow: 0 10px 20px rgba(79, 172, 254, 0.3); |
|
|
--gold-color: #ffd700; |
|
|
--royal-gold: linear-gradient(45deg, #ffd700, #ffed4e); |
|
|
} |
|
|
|
|
|
|
|
|
[data-theme="dark"] { |
|
|
--primary-color: #4facfe; |
|
|
--primary-gradient: linear-gradient(to right, #4facfe 0%, #00f2fe 100%); |
|
|
--secondary-color: #36d1dc; |
|
|
--secondary-gradient: linear-gradient(to right, #36d1dc 0%, #5b86e5 100%); |
|
|
--accent-color: #ff6a88; |
|
|
--accent-gradient: linear-gradient(to right, #ff6a88 0%, #ff99ac 100%); |
|
|
--dark-color: #f0f5ff; |
|
|
--light-color: #1d2b3a; |
|
|
--text-color: #e0e0e0; |
|
|
--bg-color: #121a24; |
|
|
--card-bg: #1e2936; |
|
|
--footer-bg: #0c1218; |
|
|
--box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); |
|
|
--card-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); |
|
|
--button-shadow: 0 10px 20px rgba(79, 172, 254, 0.2); |
|
|
} |
|
|
|
|
|
|
|
|
[data-theme="cosmos"] { |
|
|
--primary-color: #7b2cbf; |
|
|
--primary-gradient: linear-gradient(to right, #7b2cbf 0%, #3a0ca3 100%); |
|
|
--secondary-color: #f72585; |
|
|
--secondary-gradient: linear-gradient(to right, #f72585 0%, #7209b7 100%); |
|
|
--accent-color: #4cc9f0; |
|
|
--accent-gradient: linear-gradient(to right, #4cc9f0 0%, #4361ee 100%); |
|
|
--dark-color: #e0fbfc; |
|
|
--light-color: #10002b; |
|
|
--text-color: #e0aaff; |
|
|
--bg-color: #240046; |
|
|
--card-bg: #3c096c; |
|
|
--footer-bg: #10002b; |
|
|
--box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); |
|
|
--card-shadow: 0 5px 15px rgba(121, 41, 191, 0.3); |
|
|
--button-shadow: 0 10px 20px rgba(123, 44, 191, 0.4); |
|
|
} |
|
|
|
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
transition: background-color 0.3s, color 0.3s; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Cairo', 'Tajawal', 'Roboto', sans-serif; |
|
|
background-color: var(--bg-color); |
|
|
color: var(--text-color); |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
|
|
|
[lang="ar"] { |
|
|
font-family: 'Cairo', 'Tajawal', sans-serif; |
|
|
direction: rtl; |
|
|
} |
|
|
|
|
|
[lang="en"] { |
|
|
font-family: 'Roboto', sans-serif; |
|
|
direction: ltr; |
|
|
} |
|
|
|
|
|
h1, h2, h3, h4, h5, h6 { |
|
|
font-weight: 700; |
|
|
margin-bottom: 1rem; |
|
|
line-height: 1.3; |
|
|
color: var(--dark-color); |
|
|
} |
|
|
|
|
|
p { |
|
|
line-height: 1.6; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
a { |
|
|
text-decoration: none; |
|
|
color: var(--primary-color); |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
[data-theme="dark"] a, [data-theme="cosmos"] a { |
|
|
color: white; |
|
|
} |
|
|
|
|
|
a:hover { |
|
|
color: var(--secondary-color); |
|
|
} |
|
|
|
|
|
.container { |
|
|
width: 100%; |
|
|
max-width: 1200px; |
|
|
margin: 0 auto; |
|
|
padding: 0 20px; |
|
|
} |
|
|
|
|
|
.section { |
|
|
padding: 80px 0; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.section-title { |
|
|
text-align: center; |
|
|
margin-bottom: 50px; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.section-title h2 { |
|
|
font-size: 2.5rem; |
|
|
display: inline-block; |
|
|
position: relative; |
|
|
z-index: 1; |
|
|
padding-bottom: 15px; |
|
|
} |
|
|
|
|
|
.section-title h2::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
width: 80px; |
|
|
height: 4px; |
|
|
background: var(--primary-gradient); |
|
|
border-radius: 2px; |
|
|
} |
|
|
|
|
|
.section-title h2::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
width: 40px; |
|
|
height: 4px; |
|
|
background: var(--accent-gradient); |
|
|
border-radius: 2px; |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0%, 100% { |
|
|
opacity: 1; |
|
|
width: 40px; |
|
|
} |
|
|
50% { |
|
|
opacity: 0.5; |
|
|
width: 60px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
#particles-js { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
z-index: -1; |
|
|
opacity: 0.5; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
[data-theme="cosmos"] #particles-js { |
|
|
opacity: 0.8; |
|
|
} |
|
|
|
|
|
|
|
|
.stars-container { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
z-index: -2; |
|
|
overflow: hidden; |
|
|
display: none; |
|
|
} |
|
|
|
|
|
[data-theme="cosmos"] .stars-container { |
|
|
display: block; |
|
|
} |
|
|
|
|
|
.star { |
|
|
position: absolute; |
|
|
background-color: white; |
|
|
border-radius: 50%; |
|
|
animation: twinkle 5s infinite; |
|
|
} |
|
|
|
|
|
@keyframes twinkle { |
|
|
0% { opacity: 0.3; } |
|
|
50% { opacity: 1; } |
|
|
100% { opacity: 0.3; } |
|
|
} |
|
|
|
|
|
.shooting-star { |
|
|
position: absolute; |
|
|
width: 4px; |
|
|
height: 4px; |
|
|
background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)); |
|
|
transform: rotate(45deg); |
|
|
animation: shoot 8s linear infinite; |
|
|
border-radius: 50%; |
|
|
box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.3); |
|
|
} |
|
|
|
|
|
@keyframes shoot { |
|
|
0% { |
|
|
transform: translateX(-100px) translateY(-100px) rotate(45deg); |
|
|
opacity: 1; |
|
|
} |
|
|
70% { |
|
|
opacity: 1; |
|
|
} |
|
|
100% { |
|
|
transform: translateX(calc(100vw + 100px)) translateY(calc(100vh + 100px)) rotate(45deg); |
|
|
opacity: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.header { |
|
|
position: sticky; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
padding: 15px 0; |
|
|
background-color: rgba(255, 255, 255, 0.95); |
|
|
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1); |
|
|
z-index: 100; |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .header { |
|
|
background-color: rgba(18, 26, 36, 0.95); |
|
|
} |
|
|
|
|
|
[data-theme="cosmos"] .header { |
|
|
background-color: rgba(36, 0, 70, 0.95); |
|
|
} |
|
|
|
|
|
.header.scrolled { |
|
|
padding: 10px 0; |
|
|
background-color: rgba(255, 255, 255, 0.98); |
|
|
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15); |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .header.scrolled { |
|
|
background-color: rgba(18, 26, 36, 0.98); |
|
|
} |
|
|
|
|
|
[data-theme="cosmos"] .header.scrolled { |
|
|
background-color: rgba(36, 0, 70, 0.98); |
|
|
} |
|
|
|
|
|
.navbar { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.logo { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.logo-image { |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
margin-left: 10px; |
|
|
border-radius: 8px; |
|
|
object-fit: cover; |
|
|
} |
|
|
|
|
|
.logo-text { |
|
|
font-size: 1.8rem; |
|
|
font-weight: 700; |
|
|
color: var(--dark-color); |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .logo-text, [data-theme="cosmos"] .logo-text { |
|
|
color: var(--dark-color); |
|
|
} |
|
|
|
|
|
|
|
|
.logo-animated { |
|
|
display: inline-block; |
|
|
min-width: 150px; |
|
|
font-weight: 700; |
|
|
} |
|
|
|
|
|
|
|
|
.language-selector { |
|
|
position: relative; |
|
|
margin-left: 20px; |
|
|
} |
|
|
|
|
|
.current-lang { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
cursor: pointer; |
|
|
padding: 5px 10px; |
|
|
border-radius: 5px; |
|
|
background-color: var(--card-bg); |
|
|
color: var(--dark-color); |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .current-lang, [data-theme="cosmos"] .current-lang { |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.current-lang:hover { |
|
|
background-color: var(--primary-color); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.current-lang img { |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
margin-left: 5px; |
|
|
border-radius: 50%; |
|
|
} |
|
|
|
|
|
.lang-dropdown { |
|
|
position: absolute; |
|
|
top: 100%; |
|
|
left: 0; |
|
|
width: 150px; |
|
|
background-color: var(--bg-color); |
|
|
border-radius: 5px; |
|
|
box-shadow: var(--card-shadow); |
|
|
overflow: hidden; |
|
|
display: none; |
|
|
z-index: 10; |
|
|
} |
|
|
|
|
|
.lang-option { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
padding: 10px; |
|
|
cursor: pointer; |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.lang-option:hover { |
|
|
background-color: var(--card-bg); |
|
|
} |
|
|
|
|
|
.lang-option img { |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
margin-left: 10px; |
|
|
border-radius: 50%; |
|
|
} |
|
|
|
|
|
.nav-menu { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.nav-list { |
|
|
display: flex; |
|
|
list-style: none; |
|
|
} |
|
|
|
|
|
.nav-item { |
|
|
margin: 0 15px; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.nav-link { |
|
|
color: var(--dark-color); |
|
|
font-weight: 600; |
|
|
position: relative; |
|
|
padding: 5px 0; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .nav-link, [data-theme="cosmos"] .nav-link { |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.nav-link img { |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
margin-left: 5px; |
|
|
border-radius: 50%; |
|
|
} |
|
|
|
|
|
.nav-link::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
background: var(--primary-gradient); |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.nav-link:hover::after, |
|
|
.nav-link.active::after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.nav-link:hover { |
|
|
color: var(--primary-color); |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .nav-link:hover, [data-theme="cosmos"] .nav-link:hover { |
|
|
color: var(--primary-color); |
|
|
} |
|
|
|
|
|
|
|
|
.theme-toggles { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 10px; |
|
|
} |
|
|
|
|
|
.theme-toggle { |
|
|
background: none; |
|
|
border: none; |
|
|
cursor: pointer; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
border-radius: 50%; |
|
|
font-size: 1.2rem; |
|
|
color: var(--dark-color); |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .theme-toggle, [data-theme="cosmos"] .theme-toggle { |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.theme-toggle:hover, .theme-toggle.active { |
|
|
background-color: var(--primary-color); |
|
|
color: white; |
|
|
transform: translateY(-3px); |
|
|
box-shadow: var(--button-shadow); |
|
|
} |
|
|
|
|
|
.cosmos-toggle { |
|
|
background: linear-gradient(45deg, #7b2cbf, #f72585); |
|
|
color: white; |
|
|
border: none; |
|
|
padding: 8px 12px; |
|
|
border-radius: 20px; |
|
|
font-size: 0.9rem; |
|
|
font-weight: 600; |
|
|
cursor: pointer; |
|
|
transition: var(--transition); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 5px; |
|
|
} |
|
|
|
|
|
.cosmos-toggle:hover { |
|
|
transform: translateY(-3px) scale(1.05); |
|
|
box-shadow: 0 10px 20px rgba(123, 44, 191, 0.4); |
|
|
} |
|
|
|
|
|
.cosmos-toggle.active { |
|
|
background: linear-gradient(45deg, #f72585, #7b2cbf); |
|
|
transform: translateY(-3px) scale(1.05); |
|
|
box-shadow: 0 10px 20px rgba(123, 44, 191, 0.4); |
|
|
} |
|
|
|
|
|
|
|
|
.mobile-menu-btn { |
|
|
display: none; |
|
|
background: none; |
|
|
border: none; |
|
|
font-size: 1.5rem; |
|
|
color: var(--dark-color); |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .mobile-menu-btn, [data-theme="cosmos"] .mobile-menu-btn { |
|
|
color: white; |
|
|
} |
|
|
|
|
|
|
|
|
.mobile-menu { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
right: -100%; |
|
|
width: 80%; |
|
|
height: 100%; |
|
|
background-color: var(--bg-color); |
|
|
transition: var(--transition); |
|
|
z-index: 1000; |
|
|
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1); |
|
|
overflow-y: auto; |
|
|
padding: 20px; |
|
|
} |
|
|
|
|
|
.mobile-menu.active { |
|
|
right: 0; |
|
|
} |
|
|
|
|
|
.mobile-menu-header { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
margin-bottom: 30px; |
|
|
padding-bottom: 15px; |
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .mobile-menu-header, [data-theme="cosmos"] .mobile-menu-header { |
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
|
|
|
.mobile-menu-close { |
|
|
background: none; |
|
|
border: none; |
|
|
font-size: 1.5rem; |
|
|
color: var(--dark-color); |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .mobile-menu-close, [data-theme="cosmos"] .mobile-menu-close { |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.mobile-menu-list { |
|
|
list-style: none; |
|
|
margin-bottom: 30px; |
|
|
} |
|
|
|
|
|
.mobile-menu-item { |
|
|
margin-bottom: 15px; |
|
|
} |
|
|
|
|
|
.mobile-menu-link { |
|
|
display: block; |
|
|
color: var(--dark-color); |
|
|
font-weight: 600; |
|
|
padding: 10px 0; |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .mobile-menu-link, [data-theme="cosmos"] .mobile-menu-link { |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.mobile-menu-link:hover { |
|
|
color: var(--primary-color); |
|
|
transform: translateX(10px); |
|
|
} |
|
|
|
|
|
|
|
|
.mobile-languages { |
|
|
margin-bottom: 30px; |
|
|
} |
|
|
|
|
|
.mobile-languages-title { |
|
|
font-size: 1.1rem; |
|
|
margin-bottom: 15px; |
|
|
color: var(--dark-color); |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .mobile-languages-title, [data-theme="cosmos"] .mobile-languages-title { |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.mobile-language-options { |
|
|
display: flex; |
|
|
flex-wrap: wrap; |
|
|
gap: 10px; |
|
|
} |
|
|
|
|
|
.mobile-language-option { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
padding: 8px 15px; |
|
|
border-radius: 20px; |
|
|
background-color: var(--card-bg); |
|
|
color: var(--dark-color); |
|
|
cursor: pointer; |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .mobile-language-option, [data-theme="cosmos"] .mobile-language-option { |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.mobile-language-option:hover { |
|
|
background-color: var(--primary-color); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.mobile-language-option.active { |
|
|
background-color: var(--primary-color); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.mobile-language-option img { |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
margin-left: 8px; |
|
|
border-radius: 50%; |
|
|
} |
|
|
|
|
|
|
|
|
.mobile-themes { |
|
|
margin-top: 30px; |
|
|
} |
|
|
|
|
|
.mobile-themes-title { |
|
|
font-size: 1.1rem; |
|
|
margin-bottom: 15px; |
|
|
color: var(--dark-color); |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .mobile-themes-title, [data-theme="cosmos"] .mobile-themes-title { |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.mobile-theme-options { |
|
|
display: flex; |
|
|
flex-wrap: wrap; |
|
|
gap: 10px; |
|
|
} |
|
|
|
|
|
.mobile-theme-option { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
border-radius: 50%; |
|
|
background-color: var(--card-bg); |
|
|
color: var(--dark-color); |
|
|
cursor: pointer; |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .mobile-theme-option, [data-theme="cosmos"] .mobile-theme-option { |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.mobile-theme-option:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: var(--button-shadow); |
|
|
} |
|
|
|
|
|
.mobile-theme-option.active { |
|
|
background-color: var(--primary-color); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.mobile-cosmos-option { |
|
|
background: linear-gradient(45deg, #7b2cbf, #f72585); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
|
|
|
.overlay { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background-color: rgba(0, 0, 0, 0.5); |
|
|
z-index: 999; |
|
|
opacity: 0; |
|
|
visibility: hidden; |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.overlay.active { |
|
|
opacity: 1; |
|
|
visibility: visible; |
|
|
} |
|
|
|
|
|
|
|
|
.hero { |
|
|
padding: 100px 0 80px; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.hero-content { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: space-between; |
|
|
gap: 50px; |
|
|
} |
|
|
|
|
|
.hero-text { |
|
|
flex: 1; |
|
|
} |
|
|
|
|
|
.hero-title { |
|
|
font-size: 3rem; |
|
|
margin-bottom: 20px; |
|
|
color: var(--dark-color); |
|
|
background: var(--primary-gradient); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
} |
|
|
|
|
|
[data-theme="cosmos"] .hero-title { |
|
|
background: linear-gradient(45deg, #f72585, #4cc9f0); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
} |
|
|
|
|
|
.hero-subtitle { |
|
|
display: inline-block; |
|
|
background: var(--primary-gradient); |
|
|
color: white; |
|
|
padding: 8px 20px; |
|
|
border-radius: 30px; |
|
|
font-weight: 600; |
|
|
margin-bottom: 20px; |
|
|
box-shadow: var(--button-shadow); |
|
|
} |
|
|
|
|
|
[data-theme="cosmos"] .hero-subtitle { |
|
|
background: linear-gradient(45deg, #7b2cbf, #3a0ca3); |
|
|
} |
|
|
|
|
|
.hero-description { |
|
|
color: var(--text-color); |
|
|
margin-bottom: 30px; |
|
|
font-size: 1.1rem; |
|
|
} |
|
|
|
|
|
.hero-buttons { |
|
|
display: flex; |
|
|
gap: 15px; |
|
|
} |
|
|
|
|
|
.btn { |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
padding: 12px 24px; |
|
|
border-radius: 8px; |
|
|
font-weight: 600; |
|
|
transition: var(--transition); |
|
|
border: none; |
|
|
cursor: pointer; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.btn-primary { |
|
|
background: var(--primary-gradient); |
|
|
color: white; |
|
|
box-shadow: var(--button-shadow); |
|
|
} |
|
|
|
|
|
[data-theme="cosmos"] .btn-primary { |
|
|
background: linear-gradient(45deg, #7b2cbf, #3a0ca3); |
|
|
} |
|
|
|
|
|
.btn-primary:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 15px 30px rgba(79, 172, 254, 0.4); |
|
|
} |
|
|
|
|
|
[data-theme="cosmos"] .btn-primary:hover { |
|
|
box-shadow: 0 15px 30px rgba(123, 44, 191, 0.4); |
|
|
} |
|
|
|
|
|
.btn-outline { |
|
|
background: transparent; |
|
|
border: 2px solid var(--primary-color); |
|
|
color: var(--dark-color); |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .btn-outline, [data-theme="cosmos"] .btn-outline { |
|
|
color: white; |
|
|
} |
|
|
|
|
|
[data-theme="cosmos"] .btn-outline { |
|
|
border-color: #7b2cbf; |
|
|
} |
|
|
|
|
|
.btn-outline:hover { |
|
|
background: var(--primary-gradient); |
|
|
color: white; |
|
|
transform: translateY(-3px); |
|
|
box-shadow: var(--button-shadow); |
|
|
border-color: transparent; |
|
|
} |
|
|
|
|
|
[data-theme="cosmos"] .btn-outline:hover { |
|
|
background: linear-gradient(45deg, #7b2cbf, #3a0ca3); |
|
|
box-shadow: 0 15px 30px rgba(123, 44, 191, 0.4); |
|
|
} |
|
|
|
|
|
.hero-image { |
|
|
flex: 1; |
|
|
max-width: 500px; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.hero-img { |
|
|
width: 100%; |
|
|
border-radius: 10px; |
|
|
box-shadow: var(--box-shadow); |
|
|
animation: float 6s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes float { |
|
|
0%, 100% { |
|
|
transform: translateY(0); |
|
|
} |
|
|
50% { |
|
|
transform: translateY(-20px); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.typing-effect-container { |
|
|
min-height: 60px; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
|
|
|
.about-us { |
|
|
background-color: var(--light-color); |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .about-us { |
|
|
background-color: var(--bg-color); |
|
|
} |
|
|
|
|
|
[data-theme="cosmos"] .about-us { |
|
|
background: linear-gradient(to bottom, #240046, #3c096c); |
|
|
} |
|
|
|
|
|
.about-content { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 50px; |
|
|
} |
|
|
|
|
|
.about-image { |
|
|
flex: 1; |
|
|
max-width: 500px; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.about-img { |
|
|
width: 100%; |
|
|
border-radius: 10px; |
|
|
box-shadow: var(--box-shadow); |
|
|
} |
|
|
|
|
|
.about-image-overlay { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.7)); |
|
|
border-radius: 10px; |
|
|
display: flex; |
|
|
align-items: flex-end; |
|
|
padding: 20px; |
|
|
opacity: 0; |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.about-image:hover .about-image-overlay { |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
.about-image-text { |
|
|
color: white; |
|
|
font-size: 1.5rem; |
|
|
font-weight: 700; |
|
|
} |
|
|
|
|
|
.about-text { |
|
|
flex: 1; |
|
|
} |
|
|
|
|
|
.about-title { |
|
|
font-size: 2.5rem; |
|
|
margin-bottom: 20px; |
|
|
color: var(--dark-color); |
|
|
} |
|
|
|
|
|
.about-subtitle { |
|
|
display: inline-block; |
|
|
background: var(--primary-gradient); |
|
|
color: white; |
|
|
padding: 5px 15px; |
|
|
border-radius: 30px; |
|
|
font-weight: 600; |
|
|
margin-bottom: 20px; |
|
|
font-size: 0.9rem; |
|
|
} |
|
|
|
|
|
[data-theme="cosmos"] .about-subtitle { |
|
|
background: linear-gradient(45deg, #7b2cbf, #3a0ca3); |
|
|
} |
|
|
|
|
|
.about-description { |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.about-features { |
|
|
margin-bottom: 30px; |
|
|
} |
|
|
|
|
|
.about-feature { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
margin-bottom: 15px; |
|
|
} |
|
|
|
|
|
.about-feature-icon { |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
background: var(--primary-gradient); |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
color: white; |
|
|
margin-left: 15px; |
|
|
flex-shrink: 0; |
|
|
} |
|
|
|
|
|
[data-theme="cosmos"] .about-feature-icon { |
|
|
background: linear-gradient(45deg, #7b2cbf, #3a0ca3); |
|
|
} |
|
|
|
|
|
.about-feature-text h4 { |
|
|
font-size: 1.1rem; |
|
|
margin-bottom: 5px; |
|
|
} |
|
|
|
|
|
.about-feature-text p { |
|
|
font-size: 0.9rem; |
|
|
margin-bottom: 0; |
|
|
} |
|
|
|
|
|
.about-counters { |
|
|
display: flex; |
|
|
flex-wrap: wrap; |
|
|
gap: 30px; |
|
|
margin-top: 30px; |
|
|
} |
|
|
|
|
|
.about-counter { |
|
|
flex: 1; |
|
|
min-width: 150px; |
|
|
text-align: center; |
|
|
padding: 20px; |
|
|
background-color: var(--bg-color); |
|
|
border-radius: 10px; |
|
|
box-shadow: var(--card-shadow); |
|
|
transition: var(--transition); |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.about-counter:hover { |
|
|
transform: translateY(-10px); |
|
|
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
[data-theme="cosmos"] .about-counter:hover { |
|
|
box-shadow: 0 15px 30px rgba(123, 44, 191, 0.3); |
|
|
} |
|
|
|
|
|
.about-counter::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 5px; |
|
|
background: var(--primary-gradient); |
|
|
} |
|
|
|
|
|
[data-theme="cosmos"] .about-counter::before { |
|
|
background: linear-gradient(45deg, #7b2cbf, #3a0ca3); |
|
|
} |
|
|
|
|
|
.about-counter-number { |
|
|
font-size: 2.5rem; |
|
|
font-weight: 700; |
|
|
margin-bottom: 10px; |
|
|
color: var(--primary-color); |
|
|
} |
|
|
|
|
|
[data-theme="cosmos"] .about-counter-number { |
|
|
color: #7b2cbf; |
|
|
} |
|
|
|
|
|
.about-counter-text { |
|
|
font-size: 1rem; |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
|
|
|
.services { |
|
|
background-color: var(--bg-color); |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.services-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); |
|
|
gap: 30px; |
|
|
} |
|
|
|
|
|
.service-card { |
|
|
background-color: var(--card-bg); |
|
|
border-radius: 15px; |
|
|
overflow: hidden; |
|
|
box-shadow: var(--card-shadow); |
|
|
transition: var(--transition); |
|
|
padding: 30px; |
|
|
text-align: center; |
|
|
position: relative; |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
.service-card:hover { |
|
|
transform: translateY(-10px); |
|
|
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
[data-theme="cosmos"] .service-card:hover { |
|
|
box-shadow: 0 15px 30px rgba(123, 44, 191, 0.3); |
|
|
} |
|
|
|
|
|
.service-card::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: var(--primary-gradient); |
|
|
opacity: 0; |
|
|
transition: var(--transition); |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
[data-theme="cosmos"] .service-card::before { |
|
|
background: linear-gradient(45deg, rgba(123, 44, 191, 0.8), rgba(58, 12, 163, 0.8)); |
|
|
} |
|
|
|
|
|
.service-card:hover::before { |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
.service-icon { |
|
|
width: 80px; |
|
|
height: 80px; |
|
|
background-color: white; |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
margin: 0 auto 20px; |
|
|
font-size: 2rem; |
|
|
color: var(--primary-color); |
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); |
|
|
transition: var(--transition); |
|
|
position: relative; |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
[data-theme="cosmos"] .service-icon { |
|
|
color: #7b2cbf; |
|
|
} |
|
|
|
|
|
.service-card:hover .service-icon { |
|
|
background-color: rgba(255, 255, 255, 0.2); |
|
|
color: white; |
|
|
transform: rotateY(360deg); |
|
|
box-shadow: 0 5px 15px rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
|
|
|
.service-title { |
|
|
font-size: 1.5rem; |
|
|
margin-bottom: 15px; |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.service-card:hover .service-title { |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.service-text { |
|
|
margin-bottom: 25px; |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.service-card:hover .service-text { |
|
|
color: rgba(255, 255, 255, 0.9); |
|
|
} |
|
|
|
|
|
|
|
|
.api-services { |
|
|
background-color: var(--light-color); |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .api-services { |
|
|
background-color: var(--bg-color); |
|
|
} |
|
|
|
|
|
[data-theme="cosmos"] .api-services { |
|
|
background: linear-gradient(to bottom, #240046, #3c096c); |
|
|
} |
|
|
|
|
|
.api-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); |
|
|
gap: 30px; |
|
|
} |
|
|
|
|
|
.api-card { |
|
|
background-color: var(--bg-color); |
|
|
border-radius: 15px; |
|
|
overflow: hidden; |
|
|
box-shadow: var(--card-shadow); |
|
|
transition: var(--transition); |
|
|
padding: 30px; |
|
|
} |
|
|
|
|
|
.api-card:hover { |
|
|
transform: translateY(-10px); |
|
|
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
[data-theme="cosmos"] .api-card:hover { |
|
|
box-shadow: 0 15px 30px rgba(123, 44, 191, 0.3); |
|
|
} |
|
|
|
|
|
.api-header { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.api-icon { |
|
|
width: 60px; |
|
|
height: 60px; |
|
|
background: var(--primary-gradient); |
|
|
border-radius: 12px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
margin-left: 15px; |
|
|
font-size: 1.5rem; |
|
|
color: white; |
|
|
box-shadow: var(--button-shadow); |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
[data-theme="cosmos"] .api-icon { |
|
|
background: linear-gradient(45deg, #7b2cbf, #3a0ca3); |
|
|
box-shadow: 0 5px 15px rgba(123, 44, 191, 0.3); |
|
|
} |
|
|
|
|
|
.api-card:hover .api-icon { |
|
|
transform: rotateY(360deg); |
|
|
} |
|
|
|
|
|
.api-title { |
|
|
font-size: 1.3rem; |
|
|
margin-bottom: 0; |
|
|
} |
|
|
|
|
|
.api-description { |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.api-features { |
|
|
margin-bottom: 25px; |
|
|
} |
|
|
|
|
|
.api-feature { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
|
|
|
.api-feature i { |
|
|
color: var(--success-color); |
|
|
margin-left: 10px; |
|
|
} |
|
|
|
|
|
|
|
|
.speedy { |
|
|
background-color: white; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .speedy { |
|
|
background-color: var(--bg-color); |
|
|
} |
|
|
|
|
|
[data-theme="cosmos"] .speedy { |
|
|
background: linear-gradient(to bottom, #3c096c, #5a189a); |
|
|
} |
|
|
|
|
|
.speedy-overlay { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: url('https://placehold.co/1920x1080/240046/fff?text=SPEEDY+Background') center/cover no-repeat; |
|
|
opacity: 0.1; |
|
|
z-index: 0; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
[data-theme="cosmos"] .speedy-overlay { |
|
|
opacity: 0.2; |
|
|
} |
|
|
|
|
|
.speedy-content { |
|
|
position: relative; |
|
|
z-index: 1; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 50px; |
|
|
} |
|
|
|
|
|
.speedy-text { |
|
|
flex: 1; |
|
|
} |
|
|
|
|
|
.speedy-title { |
|
|
font-size: 2.5rem; |
|
|
margin-bottom: 20px; |
|
|
background: linear-gradient(45deg, #7b2cbf, #f72585); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 2px; |
|
|
} |
|
|
|
|
|
.speedy-subtitle { |
|
|
display: inline-block; |
|
|
background: linear-gradient(45deg, #7b2cbf, #f72585); |
|
|
color: white; |
|
|
padding: 8px 20px; |
|
|
border-radius: 30px; |
|
|
font-weight: 600; |
|
|
margin-bottom: 20px; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 1px; |
|
|
} |
|
|
|
|
|
.speedy-description { |
|
|
margin-bottom: 30px; |
|
|
} |
|
|
|
|
|
.speedy-features { |
|
|
margin-bottom: 30px; |
|
|
} |
|
|
|
|
|
.speedy-feature { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
margin-bottom: 15px; |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.speedy-feature:hover { |
|
|
transform: translateX(10px); |
|
|
} |
|
|
|
|
|
.speedy-feature i { |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
background: linear-gradient(45deg, #7b2cbf, #f72585); |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
color: white; |
|
|
margin-left: 15px; |
|
|
font-size: 1.2rem; |
|
|
flex-shrink: 0; |
|
|
} |
|
|
|
|
|
.speedy-feature-text { |
|
|
flex: 1; |
|
|
} |
|
|
|
|
|
.speedy-feature-text h4 { |
|
|
font-size: 1.1rem; |
|
|
margin-bottom: 5px; |
|
|
} |
|
|
|
|
|
.speedy-feature-text p { |
|
|
font-size: 0.9rem; |
|
|
margin-bottom: 0; |
|
|
} |
|
|
|
|
|
.speedy-image { |
|
|
flex: 1; |
|
|
max-width: 500px; |
|
|
position: relative; |
|
|
perspective: 1000px; |
|
|
} |
|
|
|
|
|
.speedy-img { |
|
|
width: 100%; |
|
|
border-radius: 10px; |
|
|
box-shadow: 0 15px 30px rgba(123, 44, 191, 0.3); |
|
|
transform-style: preserve-3d; |
|
|
animation: speedy-rotate 8s infinite ease-in-out; |
|
|
} |
|
|
|
|
|
@keyframes speedy-rotate { |
|
|
0%, 100% { |
|
|
transform: rotateY(0) translateZ(0); |
|
|
} |
|
|
25% { |
|
|
transform: rotateY(5deg) translateZ(20px); |
|
|
} |
|
|
50% { |
|
|
transform: rotateY(0) translateZ(0); |
|
|
} |
|
|
75% { |
|
|
transform: rotateY(-5deg) translateZ(20px); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.previous-works { |
|
|
margin-top: 80px; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.works-title { |
|
|
font-size: 2.5rem; |
|
|
margin-bottom: 20px; |
|
|
background: var(--royal-gold); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 3px; |
|
|
} |
|
|
|
|
|
.works-description { |
|
|
max-width: 800px; |
|
|
margin: 0 auto 40px; |
|
|
} |
|
|
|
|
|
.works-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); |
|
|
gap: 30px; |
|
|
} |
|
|
|
|
|
.work-card { |
|
|
background-color: var(--card-bg); |
|
|
border-radius: 15px; |
|
|
overflow: hidden; |
|
|
box-shadow: var(--card-shadow); |
|
|
transition: var(--transition); |
|
|
position: relative; |
|
|
z-index: 1; |
|
|
border: 3px solid transparent; |
|
|
background-clip: padding-box; |
|
|
} |
|
|
|
|
|
.work-card::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: -3px; |
|
|
left: -3px; |
|
|
right: -3px; |
|
|
bottom: -3px; |
|
|
background: var(--royal-gold); |
|
|
border-radius: 18px; |
|
|
z-index: -1; |
|
|
opacity: 0; |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.work-card:hover::before { |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
.work-card:hover { |
|
|
transform: translateY(-10px) scale(1.03); |
|
|
box-shadow: 0 20px 40px rgba(255, 215, 0, 0.3); |
|
|
} |
|
|
|
|
|
.work-image { |
|
|
height: 200px; |
|
|
overflow: hidden; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.work-img { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
object-fit: cover; |
|
|
transition: var(--transition); |
|
|
border: 2px solid var(--gold-color); |
|
|
border-radius: 10px 10px 0 0; |
|
|
} |
|
|
|
|
|
.work-card:hover .work-img { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
|
|
|
.work-badge { |
|
|
position: absolute; |
|
|
top: 15px; |
|
|
right: 15px; |
|
|
background: var(--royal-gold); |
|
|
color: white; |
|
|
padding: 5px 12px; |
|
|
border-radius: 20px; |
|
|
font-size: 0.8rem; |
|
|
font-weight: 600; |
|
|
text-shadow: 1px 1px 2px rgba(0,0,0,0.3); |
|
|
} |
|
|
|
|
|
.work-content { |
|
|
padding: 25px; |
|
|
} |
|
|
|
|
|
.work-card-title { |
|
|
font-size: 1.4rem; |
|
|
margin-bottom: 15px; |
|
|
transition: var(--transition); |
|
|
color: var(--dark-color); |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .work-card-title, [data-theme="cosmos"] .work-card-title { |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.work-card-text { |
|
|
margin-bottom: 20px; |
|
|
transition: var(--transition); |
|
|
line-height: 1.6; |
|
|
} |
|
|
|
|
|
.work-tech-stack { |
|
|
display: flex; |
|
|
flex-wrap: wrap; |
|
|
gap: 8px; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.tech-tag { |
|
|
background: var(--primary-gradient); |
|
|
color: white; |
|
|
padding: 3px 8px; |
|
|
border-radius: 12px; |
|
|
font-size: 0.7rem; |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
.work-card-btn { |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
gap: 8px; |
|
|
font-weight: 600; |
|
|
color: var(--gold-color); |
|
|
transition: var(--transition); |
|
|
text-decoration: none; |
|
|
} |
|
|
|
|
|
.work-card-btn:hover { |
|
|
color: #ffed4e; |
|
|
transform: translateX(-5px); |
|
|
} |
|
|
|
|
|
|
|
|
.fastpro-media { |
|
|
background-color: var(--light-color); |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .fastpro-media { |
|
|
background-color: var(--bg-color); |
|
|
} |
|
|
|
|
|
[data-theme="cosmos"] .fastpro-media { |
|
|
background: linear-gradient(to bottom, #5a189a, #7b2cbf); |
|
|
} |
|
|
|
|
|
.media-categories { |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
flex-wrap: wrap; |
|
|
gap: 15px; |
|
|
margin-bottom: 50px; |
|
|
} |
|
|
|
|
|
.media-category-btn { |
|
|
background-color: var(--card-bg); |
|
|
color: var(--dark-color); |
|
|
border: none; |
|
|
padding: 12px 25px; |
|
|
border-radius: 30px; |
|
|
cursor: pointer; |
|
|
transition: var(--transition); |
|
|
font-weight: 600; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 8px; |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .media-category-btn, [data-theme="cosmos"] .media-category-btn { |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.media-category-btn:hover, .media-category-btn.active { |
|
|
background: var(--royal-gold); |
|
|
color: white; |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 10px 20px rgba(255, 215, 0, 0.3); |
|
|
} |
|
|
|
|
|
.media-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); |
|
|
gap: 30px; |
|
|
} |
|
|
|
|
|
.media-card { |
|
|
background-color: var(--bg-color); |
|
|
border-radius: 15px; |
|
|
overflow: hidden; |
|
|
box-shadow: var(--card-shadow); |
|
|
transition: var(--transition); |
|
|
border: 3px solid transparent; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.media-card::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: -3px; |
|
|
left: -3px; |
|
|
right: -3px; |
|
|
bottom: -3px; |
|
|
background: var(--royal-gold); |
|
|
border-radius: 18px; |
|
|
z-index: -1; |
|
|
opacity: 0; |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.media-card:hover::before { |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
.media-card:hover { |
|
|
transform: translateY(-10px); |
|
|
box-shadow: 0 20px 40px rgba(255, 215, 0, 0.2); |
|
|
} |
|
|
|
|
|
.media-thumbnail { |
|
|
position: relative; |
|
|
height: 200px; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.media-img { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
object-fit: cover; |
|
|
transition: var(--transition); |
|
|
border: 2px solid var(--gold-color); |
|
|
} |
|
|
|
|
|
.media-card:hover .media-img { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
|
|
|
.media-play-button { |
|
|
position: absolute; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
transform: translate(-50%, -50%); |
|
|
width: 60px; |
|
|
height: 60px; |
|
|
background: var(--royal-gold); |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
color: white; |
|
|
font-size: 1.5rem; |
|
|
opacity: 0.9; |
|
|
transition: var(--transition); |
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); |
|
|
} |
|
|
|
|
|
.media-card:hover .media-play-button { |
|
|
transform: translate(-50%, -50%) scale(1.1); |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
.media-type-badge { |
|
|
position: absolute; |
|
|
top: 15px; |
|
|
right: 15px; |
|
|
background: var(--royal-gold); |
|
|
color: white; |
|
|
padding: 5px 12px; |
|
|
border-radius: 20px; |
|
|
font-size: 0.8rem; |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.media-content { |
|
|
padding: 25px; |
|
|
} |
|
|
|
|
|
.media-title { |
|
|
font-size: 1.3rem; |
|
|
margin-bottom: 15px; |
|
|
color: var(--dark-color); |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .media-title, [data-theme="cosmos"] .media-title { |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.media-description { |
|
|
margin-bottom: 20px; |
|
|
line-height: 1.6; |
|
|
} |
|
|
|
|
|
.media-meta { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
font-size: 0.9rem; |
|
|
color: var(--text-color); |
|
|
} |
|
|
|
|
|
.media-date, .media-platform { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 5px; |
|
|
} |
|
|
|
|
|
.media-platform i { |
|
|
color: var(--gold-color); |
|
|
} |
|
|
|
|
|
|
|
|
.projects { |
|
|
background-color: var(--bg-color); |
|
|
} |
|
|
|
|
|
.project-categories { |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
flex-wrap: wrap; |
|
|
gap: 10px; |
|
|
margin-bottom: 40px; |
|
|
} |
|
|
|
|
|
.project-category-btn { |
|
|
background-color: var(--card-bg); |
|
|
color: var(--dark-color); |
|
|
border: none; |
|
|
padding: 10px 20px; |
|
|
border-radius: 30px; |
|
|
cursor: pointer; |
|
|
transition: var(--transition); |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .project-category-btn, [data-theme="cosmos"] .project-category-btn { |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.project-category-btn:hover, .project-category-btn.active { |
|
|
background: var(--primary-gradient); |
|
|
color: white; |
|
|
transform: translateY(-3px); |
|
|
box-shadow: var(--button-shadow); |
|
|
} |
|
|
|
|
|
[data-theme="cosmos"] .project-category-btn:hover, [data-theme="cosmos"] .project-category-btn.active { |
|
|
background: linear-gradient(45deg, #7b2cbf, #3a0ca3); |
|
|
box-shadow: 0 5px 15px rgba(123, 44, 191, 0.3); |
|
|
} |
|
|
|
|
|
.project-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); |
|
|
gap: 30px; |
|
|
} |
|
|
|
|
|
.project-card { |
|
|
background-color: var(--card-bg); |
|
|
border-radius: 15px; |
|
|
overflow: hidden; |
|
|
box-shadow: var(--card-shadow); |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.project-card:hover { |
|
|
transform: translateY(-10px); |
|
|
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
[data-theme="cosmos"] .project-card:hover { |
|
|
box-shadow: 0 15px 30px rgba(123, 44, 191, 0.3); |
|
|
} |
|
|
|
|
|
.project-image { |
|
|
position: relative; |
|
|
height: 200px; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.project-img { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
object-fit: cover; |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.project-card:hover .project-img { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
|
|
|
.project-overlay { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7)); |
|
|
opacity: 0; |
|
|
transition: var(--transition); |
|
|
display: flex; |
|
|
align-items: flex-end; |
|
|
padding: 20px; |
|
|
} |
|
|
|
|
|
.project-card:hover .project-overlay { |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
.project-tag { |
|
|
position: absolute; |
|
|
top: 20px; |
|
|
right: 20px; |
|
|
background: var(--primary-gradient); |
|
|
color: white; |
|
|
padding: 5px 15px; |
|
|
border-radius: 30px; |
|
|
font-size: 0.8rem; |
|
|
font-weight: 600; |
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
[data-theme="cosmos"] .project-tag { |
|
|
background: linear-gradient(45deg, #f72585, #7b2cbf); |
|
|
} |
|
|
|
|
|
.project-content { |
|
|
padding: 20px; |
|
|
} |
|
|
|
|
|
.project-title { |
|
|
font-size: 1.3rem; |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
|
|
|
.project-description { |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.project-meta { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
font-size: 0.9rem; |
|
|
color: var(--text-color); |
|
|
} |
|
|
|
|
|
.project-client, .project-date { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.project-client i, .project-date i { |
|
|
margin-left: 5px; |
|
|
color: var(--primary-color); |
|
|
} |
|
|
|
|
|
[data-theme="cosmos"] .project-client i, [data-theme="cosmos"] .project-date i { |
|
|
color: #f72585; |
|
|
} |
|
|
|
|
|
|
|
|
.whatsapp-float { |
|
|
position: fixed; |
|
|
bottom: 20px; |
|
|
left: 20px; |
|
|
z-index: 998; |
|
|
} |
|
|
|
|
|
.whatsapp-btn { |
|
|
width: 60px; |
|
|
height: 60px; |
|
|
background: linear-gradient(45deg, #25d366, #128c7e); |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
color: white; |
|
|
font-size: 1.8rem; |
|
|
text-decoration: none; |
|
|
box-shadow: 0 5px 15px rgba(37, 211, 102, 0.4); |
|
|
transition: var(--transition); |
|
|
animation: whatsapp-pulse 2s infinite; |
|
|
} |
|
|
|
|
|
.whatsapp-btn:hover { |
|
|
transform: scale(1.1); |
|
|
box-shadow: 0 8px 25px rgba(37, 211, 102, 0.6); |
|
|
} |
|
|
|
|
|
@keyframes whatsapp-pulse { |
|
|
0%, 100% { |
|
|
box-shadow: 0 5px 15px rgba(37, 211, 102, 0.4); |
|
|
} |
|
|
50% { |
|
|
box-shadow: 0 5px 15px rgba(37, 211, 102, 0.4), 0 0 0 10px rgba(37, 211, 102, 0.2); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.footer { |
|
|
background-color: var(--footer-bg); |
|
|
padding-top: 80px; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.footer-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); |
|
|
gap: 40px; |
|
|
margin-bottom: 50px; |
|
|
} |
|
|
|
|
|
.footer-widget h3 { |
|
|
font-size: 1.3rem; |
|
|
color: white; |
|
|
margin-bottom: 25px; |
|
|
position: relative; |
|
|
padding-bottom: 15px; |
|
|
} |
|
|
|
|
|
.footer-widget h3::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
right: 0; |
|
|
width: 50px; |
|
|
height: 3px; |
|
|
background: var(--primary-gradient); |
|
|
border-radius: 3px; |
|
|
} |
|
|
|
|
|
[data-theme="cosmos"] .footer-widget h3::after { |
|
|
background: linear-gradient(45deg, #f72585, #7b2cbf); |
|
|
} |
|
|
|
|
|
.footer-about p { |
|
|
color: rgba(255, 255, 255, 0.7); |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.footer-social { |
|
|
display: flex; |
|
|
gap: 10px; |
|
|
} |
|
|
|
|
|
.social-link { |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
background-color: rgba(255, 255, 255, 0.1); |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
color: white; |
|
|
transition: var(--transition); |
|
|
text-decoration: none; |
|
|
} |
|
|
|
|
|
.social-link:hover { |
|
|
background: var(--primary-gradient); |
|
|
transform: translateY(-5px); |
|
|
} |
|
|
|
|
|
[data-theme="cosmos"] .social-link:hover { |
|
|
background: linear-gradient(45deg, #f72585, #7b2cbf); |
|
|
} |
|
|
|
|
|
.footer-links ul { |
|
|
list-style: none; |
|
|
} |
|
|
|
|
|
.footer-links li { |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
|
|
|
.footer-links a { |
|
|
color: rgba(255, 255, 255, 0.7); |
|
|
transition: var(--transition); |
|
|
display: inline-block; |
|
|
} |
|
|
|
|
|
.footer-links a:hover { |
|
|
color: white; |
|
|
transform: translateX(10px); |
|
|
} |
|
|
|
|
|
.footer-contact p { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
color: rgba(255, 255, 255, 0.7); |
|
|
margin-bottom: 15px; |
|
|
} |
|
|
|
|
|
.footer-contact i { |
|
|
margin-left: 10px; |
|
|
width: 30px; |
|
|
height: 30px; |
|
|
background-color: rgba(255, 255, 255, 0.1); |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
color: var(--primary-color); |
|
|
} |
|
|
|
|
|
[data-theme="cosmos"] .footer-contact i { |
|
|
color: #f72585; |
|
|
} |
|
|
|
|
|
.footer-subscribe { |
|
|
position: relative; |
|
|
margin-top: 20px; |
|
|
} |
|
|
|
|
|
.footer-subscribe input { |
|
|
width: 100%; |
|
|
padding: 12px 15px; |
|
|
padding-left: 50px; |
|
|
background-color: rgba(255, 255, 255, 0.1); |
|
|
border: none; |
|
|
border-radius: 30px; |
|
|
color: white; |
|
|
outline: none; |
|
|
} |
|
|
|
|
|
.footer-subscribe button { |
|
|
position: absolute; |
|
|
left: 5px; |
|
|
top: 5px; |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
background: var(--primary-gradient); |
|
|
border: none; |
|
|
border-radius: 50%; |
|
|
color: white; |
|
|
cursor: pointer; |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
[data-theme="cosmos"] .footer-subscribe button { |
|
|
background: linear-gradient(45deg, #f72585, #7b2cbf); |
|
|
} |
|
|
|
|
|
.footer-subscribe button:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
|
|
|
.footer-bottom { |
|
|
padding: 20px 0; |
|
|
text-align: center; |
|
|
border-top: 1px solid rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
|
|
|
.footer-bottom p { |
|
|
color: rgba(255, 255, 255, 0.7); |
|
|
margin-bottom: 0; |
|
|
} |
|
|
|
|
|
.footer-bottom a { |
|
|
color: var(--primary-color); |
|
|
} |
|
|
|
|
|
[data-theme="cosmos"] .footer-bottom a { |
|
|
color: #f72585; |
|
|
} |
|
|
|
|
|
|
|
|
.back-to-top { |
|
|
position: fixed; |
|
|
bottom: 20px; |
|
|
right: 20px; |
|
|
width: 50px; |
|
|
height: 50px; |
|
|
background: var(--primary-gradient); |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
color: white; |
|
|
font-size: 1.2rem; |
|
|
cursor: pointer; |
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); |
|
|
transition: var(--transition); |
|
|
opacity: 0; |
|
|
visibility: hidden; |
|
|
z-index: 99; |
|
|
} |
|
|
|
|
|
[data-theme="cosmos"] .back-to-top { |
|
|
background: linear-gradient(45deg, #f72585, #7b2cbf); |
|
|
} |
|
|
|
|
|
.back-to-top.active { |
|
|
opacity: 1; |
|
|
visibility: visible; |
|
|
} |
|
|
|
|
|
.back-to-top:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); |
|
|
} |
|
|
|
|
|
|
|
|
.chatbot { |
|
|
position: fixed; |
|
|
bottom: 100px; |
|
|
left: 20px; |
|
|
z-index: 999; |
|
|
} |
|
|
|
|
|
.chatbot-toggle { |
|
|
width: 60px; |
|
|
height: 60px; |
|
|
background: var(--primary-gradient); |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
color: white; |
|
|
font-size: 1.5rem; |
|
|
cursor: pointer; |
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
[data-theme="cosmos"] .chatbot-toggle { |
|
|
background: linear-gradient(45deg, #f72585, #7b2cbf); |
|
|
} |
|
|
|
|
|
.chatbot-toggle:hover { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
|
|
|
.chatbot-window { |
|
|
position: absolute; |
|
|
bottom: 80px; |
|
|
left: 0; |
|
|
width: 350px; |
|
|
background-color: var(--bg-color); |
|
|
border-radius: 15px; |
|
|
box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2); |
|
|
overflow: hidden; |
|
|
display: none; |
|
|
flex-direction: column; |
|
|
height: 450px; |
|
|
} |
|
|
|
|
|
.chatbot-header { |
|
|
padding: 15px 20px; |
|
|
background: var(--primary-gradient); |
|
|
color: white; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: space-between; |
|
|
} |
|
|
|
|
|
[data-theme="cosmos"] .chatbot-header { |
|
|
background: linear-gradient(45deg, #7b2cbf, #3a0ca3); |
|
|
} |
|
|
|
|
|
.chatbot-title { |
|
|
font-size: 1.1rem; |
|
|
margin-bottom: 0; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.chatbot-close { |
|
|
background: none; |
|
|
border: none; |
|
|
color: white; |
|
|
font-size: 1.2rem; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.chatbot-messages { |
|
|
flex: 1; |
|
|
overflow-y: auto; |
|
|
padding: 20px; |
|
|
} |
|
|
|
|
|
.chat-message { |
|
|
margin-bottom: 15px; |
|
|
max-width: 80%; |
|
|
} |
|
|
|
|
|
.bot-message { |
|
|
background-color: var(--card-bg); |
|
|
padding: 10px 15px; |
|
|
border-radius: 15px 15px 15px 0; |
|
|
margin-right: auto; |
|
|
} |
|
|
|
|
|
.user-message { |
|
|
background: var(--primary-gradient); |
|
|
color: white; |
|
|
padding: 10px 15px; |
|
|
border-radius: 15px 15px 0 15px; |
|
|
margin-left: auto; |
|
|
} |
|
|
|
|
|
[data-theme="cosmos"] .user-message { |
|
|
background: linear-gradient(45deg, #f72585, #7b2cbf); |
|
|
} |
|
|
|
|
|
.chatbot-input { |
|
|
display: flex; |
|
|
padding: 15px; |
|
|
border-top: 1px solid rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .chatbot-input, [data-theme="cosmos"] .chatbot-input { |
|
|
border-top: 1px solid rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
|
|
|
.chatbot-input input { |
|
|
flex: 1; |
|
|
padding: 10px 15px; |
|
|
border: 1px solid rgba(0, 0, 0, 0.1); |
|
|
border-radius: 30px; |
|
|
outline: none; |
|
|
background-color: var(--bg-color); |
|
|
color: var(--text-color); |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .chatbot-input input, [data-theme="cosmos"] .chatbot-input input { |
|
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
|
|
|
.chatbot-send { |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
background: var(--primary-gradient); |
|
|
border: none; |
|
|
border-radius: 50%; |
|
|
margin-right: 10px; |
|
|
color: white; |
|
|
cursor: pointer; |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
[data-theme="cosmos"] .chatbot-send { |
|
|
background: linear-gradient(45deg, #f72585, #7b2cbf); |
|
|
} |
|
|
|
|
|
.chatbot-send:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: var(--button-shadow); |
|
|
} |
|
|
|
|
|
|
|
|
.fade-in { |
|
|
opacity: 0; |
|
|
transform: translateY(20px); |
|
|
transition: opacity 0.5s ease, transform 0.5s ease; |
|
|
} |
|
|
|
|
|
.fade-in.active { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 992px) { |
|
|
.hero-content, .about-content, .speedy-content { |
|
|
flex-direction: column; |
|
|
} |
|
|
|
|
|
.hero-text, .hero-image, .about-text, .about-image, .speedy-text, .speedy-image { |
|
|
max-width: 100%; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.hero-image, .about-image, .speedy-image { |
|
|
margin-top: 40px; |
|
|
} |
|
|
|
|
|
.hero-buttons, .about-features, .speedy-features { |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.about-feature, .speedy-feature { |
|
|
text-align: right; |
|
|
} |
|
|
|
|
|
.nav-list { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.mobile-menu-btn { |
|
|
display: block; |
|
|
} |
|
|
|
|
|
.services-grid, .api-grid, .project-grid, .works-grid, .media-grid { |
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); |
|
|
} |
|
|
|
|
|
.footer-grid { |
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); |
|
|
} |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.hero-title, .about-title, .speedy-title, .works-title { |
|
|
font-size: 2.5rem; |
|
|
} |
|
|
|
|
|
.hero-buttons { |
|
|
flex-direction: column; |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.hero-buttons .btn { |
|
|
width: 100%; |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
|
|
|
.services-grid, .api-grid, .project-grid, .works-grid, .media-grid { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
|
|
|
.project-categories, .media-categories { |
|
|
overflow-x: auto; |
|
|
white-space: nowrap; |
|
|
padding-bottom: 15px; |
|
|
justify-content: flex-start; |
|
|
} |
|
|
|
|
|
.chatbot-window { |
|
|
width: 320px; |
|
|
} |
|
|
|
|
|
.whatsapp-float { |
|
|
bottom: 100px; |
|
|
} |
|
|
} |
|
|
|
|
|
@media (max-width: 576px) { |
|
|
.hero-title, .about-title, .speedy-title, .works-title { |
|
|
font-size: 2rem; |
|
|
} |
|
|
|
|
|
.section-title h2 { |
|
|
font-size: 2rem; |
|
|
} |
|
|
|
|
|
.theme-toggles { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.chatbot-window { |
|
|
width: 280px; |
|
|
} |
|
|
|
|
|
.whatsapp-btn { |
|
|
width: 50px; |
|
|
height: 50px; |
|
|
font-size: 1.5rem; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<div id="particles-js"></div> |
|
|
|
|
|
|
|
|
<div class="stars-container" id="stars-container"></div> |
|
|
|
|
|
|
|
|
<header class="header"> |
|
|
<div class="container"> |
|
|
<div class="navbar"> |
|
|
<div class="logo"> |
|
|
<img src="https://ufastpro.com/wp-content/uploads/2024/11/ุชุตู
ูู
-ุจุฏูู-ุนููุงู-1-1.png" alt="FastPro Logo" class="logo-image"> |
|
|
<h1 class="logo-text"> |
|
|
<span class="logo-animated" id="logo-text">ูุงุณุช ุจุฑู</span> |
|
|
</h1> |
|
|
</div> |
|
|
|
|
|
<nav> |
|
|
<ul class="nav-list"> |
|
|
<li class="nav-item"> |
|
|
<a href="https://ufastpro.com/" class="nav-link active">ุงูุฑุฆูุณูุฉ</a> |
|
|
</li> |
|
|
<li class="nav-item"> |
|
|
<a href="#about-us" class="nav-link">ูุญู</a> |
|
|
</li> |
|
|
<li class="nav-item"> |
|
|
<a href="#services" class="nav-link">ุฎุฏู
ุงุชูุง</a> |
|
|
</li> |
|
|
<li class="nav-item"> |
|
|
<a href="#speedy" class="nav-link">ุฃุจุญุงุซูุง</a> |
|
|
</li> |
|
|
<li class="nav-item"> |
|
|
<a href="#projects" class="nav-link">ู
ุดุงุฑูุนูุง</a> |
|
|
</li> |
|
|
<li class="nav-item"> |
|
|
<a href="#all-programs" class="nav-link">ูู ุจุฑุงู
ุฌูุง</a> |
|
|
</li> |
|
|
<li class="nav-item"> |
|
|
<a href="#fastpro-media" class="nav-link">ู
ูุฏูุง ูุงุณุช ุจุฑู</a> |
|
|
</li> |
|
|
<li class="nav-item"> |
|
|
<a href="#contact" class="nav-link">ุชูุงุตู ู
ุนูุง</a> |
|
|
</li> |
|
|
</ul> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="language-selector" id="language-selector"> |
|
|
<div class="current-lang" id="current-lang"> |
|
|
<img src="https://placehold.co/100x100/ee0000/fff?text=AR" alt="ุงูุนุฑุจูุฉ"> |
|
|
<span>ุงูุนุฑุจูุฉ</span> |
|
|
<i class="fas fa-chevron-down"></i> |
|
|
</div> |
|
|
<div class="lang-dropdown" id="lang-dropdown"> |
|
|
<div class="lang-option" data-lang="ar"> |
|
|
<img src="https://placehold.co/100x100/ee0000/fff?text=AR" alt="ุงูุนุฑุจูุฉ"> |
|
|
<span>ุงูุนุฑุจูุฉ</span> |
|
|
</div> |
|
|
<div class="lang-option" data-lang="en"> |
|
|
<img src="https://placehold.co/100x100/0000ee/fff?text=EN" alt="English"> |
|
|
<span>English</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="theme-toggles"> |
|
|
<button class="theme-toggle light-toggle active" id="light-toggle" title="ุงููุถุน ุงููุงุชุญ"> |
|
|
<i class="fas fa-sun"></i> |
|
|
</button> |
|
|
<button class="theme-toggle dark-toggle" id="dark-toggle" title="ุงููุถุน ุงูุฏุงูู"> |
|
|
<i class="fas fa-moon"></i> |
|
|
</button> |
|
|
<button class="cosmos-toggle" id="cosmos-toggle"> |
|
|
<i class="fas fa-rocket"></i> OUR UNIVERSE |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<button class="mobile-menu-btn" id="mobile-menu-btn"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="whatsapp-float"> |
|
|
<a href="https://wa.me/201070159698" target="_blank" class="whatsapp-btn" title="ุชูุงุตู ู
ุนูุง ุนูู ุงููุงุชุณุงุจ"> |
|
|
<i class="fab fa-whatsapp"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mobile-menu" id="mobile-menu"> |
|
|
<div class="mobile-menu-header"> |
|
|
<div class="logo"> |
|
|
<img src="https://ufastpro.com/wp-content/uploads/2024/11/ุชุตู
ูู
-ุจุฏูู-ุนููุงู-1-1.png" alt="FastPro Logo" class="logo-image"> |
|
|
<h1 class="logo-text">ูุงุณุช ุจุฑู</h1> |
|
|
</div> |
|
|
<button class="mobile-menu-close" id="mobile-menu-close"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<ul class="mobile-menu-list"> |
|
|
<li class="mobile-menu-item"> |
|
|
<a href="#" class="mobile-menu-link">ุงูุฑุฆูุณูุฉ</a> |
|
|
</li> |
|
|
<li class="mobile-menu-item"> |
|
|
<a href="#about-us" class="mobile-menu-link">ู
ู ูุญู</a> |
|
|
</li> |
|
|
<li class="mobile-menu-item"> |
|
|
<a href="#services" class="mobile-menu-link">ุฎุฏู
ุงุชูุง</a> |
|
|
</li> |
|
|
<li class="mobile-menu-item"> |
|
|
<a href="#api-services" class="mobile-menu-link">ุฎุฏู
ุงุช API</a> |
|
|
</li> |
|
|
<li class="mobile-menu-item"> |
|
|
<a href="#speedy" class="mobile-menu-link">SPEEDY</a> |
|
|
</li> |
|
|
<li class="mobile-menu-item"> |
|
|
<a href="#projects" class="mobile-menu-link">ู
ุดุงุฑูุนูุง</a> |
|
|
</li> |
|
|
<li class="mobile-menu-item"> |
|
|
<a href="#all-programs" class="mobile-menu-link">ูู ุจุฑุงู
ุฌูุง</a> |
|
|
</li> |
|
|
<li class="mobile-menu-item"> |
|
|
<a href="#fastpro-media" class="mobile-menu-link">ู
ูุฏูุง ูุงุณุช ุจุฑู</a> |
|
|
</li> |
|
|
<li class="mobile-menu-item"> |
|
|
<a href="#contact" class="mobile-menu-link">ุชูุงุตู ู
ุนูุง</a> |
|
|
</li> |
|
|
</ul> |
|
|
|
|
|
|
|
|
<div class="mobile-languages"> |
|
|
<h3 class="mobile-languages-title">ุงุฎุชุฑ ุงููุบุฉ</h3> |
|
|
<div class="mobile-language-options"> |
|
|
<div class="mobile-language-option active" data-lang="ar"> |
|
|
<img src="https://placehold.co/100x100/ee0000/fff?text=AR" alt="ุงูุนุฑุจูุฉ"> |
|
|
<span>ุงูุนุฑุจูุฉ</span> |
|
|
</div> |
|
|
<div class="mobile-language-option" data-lang="en"> |
|
|
<img src="https://placehold.co/100x100/0000ee/fff?text=EN" alt="English"> |
|
|
<span>English</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mobile-themes"> |
|
|
<h3 class="mobile-themes-title">ุงุฎุชุฑ ุงูู
ุธูุฑ</h3> |
|
|
<div class="mobile-theme-options"> |
|
|
<button class="mobile-theme-option light-option active" id="mobile-light-toggle" title="ุงููุถุน ุงููุงุชุญ"> |
|
|
<i class="fas fa-sun"></i> |
|
|
</button> |
|
|
<button class="mobile-theme-option dark-option" id="mobile-dark-toggle" title="ุงููุถุน ุงูุฏุงูู"> |
|
|
<i class="fas fa-moon"></i> |
|
|
</button> |
|
|
<button class="mobile-theme-option mobile-cosmos-option" id="mobile-cosmos-toggle" title="SPEEDY UNIVERSE"> |
|
|
<i class="fas fa-rocket"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="overlay" id="overlay"></div> |
|
|
|
|
|
|
|
|
<section class="hero"> |
|
|
<div class="container"> |
|
|
<div class="hero-content"> |
|
|
<div class="hero-text" data-aos="fade-left"> |
|
|
<span class="hero-subtitle">ุญููู ุงูุฐูุงุก ุงูุงุตุทูุงุนู ุงูู
ุชุทูุฑุฉ</span> |
|
|
<h1 class="hero-title"> |
|
|
<div class="typing-effect-container" id="hero-typing"></div> |
|
|
</h1> |
|
|
<p class="hero-description"> |
|
|
ููุฏู
ุญููู ุจุฑู
ุฌูุฉ ู
ุชูุงู
ูุฉ ูู
ุจุชูุฑุฉ ุจุงุณุชุฎุฏุงู
ุฃุญุฏุซ ุชูููุงุช ุงูุฐูุงุก ุงูุงุตุทูุงุนู ูู
ุณุงุนุฏุชู ุนูู ุชุญููู ุฃูุฏุงูู ูุชูุจูุฉ ุงุญุชูุงุฌุงุชู ุงูุฑูู
ูุฉ ุจุทุฑููุฉ ุฐููุฉ ููุนุงูุฉ. |
|
|
</p> |
|
|
<div class="hero-buttons"> |
|
|
<a href="#services" class="btn btn-primary"> |
|
|
<i class="fas fa-brain"></i> ุงุณุชูุดู ุฎุฏู
ุงุชูุง |
|
|
</a> |
|
|
<a href="#contact" class="btn btn-outline"> |
|
|
<i class="fas fa-envelope"></i> ุชูุงุตู ู
ุนูุง |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hero-image" data-aos="fade-right"> |
|
|
<img src="https://ufastpro.com/wp-content/uploads/2025/04/ChatGPT-Image-Apr-13-2025-02_35_20-AM.png" alt="ุญููู ุงูุฐูุงุก ุงูุงุตุทูุงุนู" class="hero-img"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="about-us section" id="about-us"> |
|
|
<div class="container"> |
|
|
<div class="section-title"> |
|
|
<h2>ู
ู ูุญู</h2> |
|
|
<p>ุชุนุฑู ุนูู ูุฑูููุง ุงูู
ุชู
ูุฒ ููุตุฉ ูุฌุงุญูุง ูู ุนุงูู
ุงูุฐูุงุก ุงูุงุตุทูุงุนู</p> |
|
|
</div> |
|
|
|
|
|
<div class="about-content"> |
|
|
<div class="about-text" data-aos="fade-right"> |
|
|
<span class="about-subtitle">ูุตุฉ ูุฌุงุญ ู
ุชูุงุตูุฉ</span> |
|
|
<h2 class="about-title">ูุงุณุช ุจุฑู - ุฑูุงุฏ ุชูููุงุช ุงูุฐูุงุก ุงูุงุตุทูุงุนู ุงูุญุฏูุซุฉ</h2> |
|
|
<p class="about-description"> |
|
|
ุชุฃุณุณุช ุดุฑูุฉ ูุงุณุช ุจุฑู ูู ุนุงู
2022 ุนูู ูุฏ ู
ุฌู
ูุนุฉ ู
ู ุงูุฎุจุฑุงุก ุงูู
ุชุฎุตุตูู ูู ู
ุฌุงู ุงูุฐูุงุก ุงูุงุตุทูุงุนู ูุงูุจุฑู
ุฌุฉ ุงูู
ุชูุฏู
ุฉุ ุจูุฏู ุชูุฏูู
ุญููู ุชูููุฉ ู
ุจุชูุฑุฉ ุชุณุงุนุฏ ุงูุดุฑูุงุช ูุงูู
ุคุณุณุงุช ุนูู ู
ูุงูุจุฉ ุงูุชุทูุฑ ุงูุชูููููุฌู ุงูุณุฑูุน ูู ุงูุนุตุฑ ุงูุฑูู
ู. |
|
|
</p> |
|
|
<p class="about-description"> |
|
|
ูุญู ูุคู
ู ุจุฃู ุงูุฐูุงุก ุงูุงุตุทูุงุนู ูู ู
ุณุชูุจู ุงูุชูููููุฌูุงุ ููุนู
ู ุฌุงูุฏูู ุนูู ุชุทููุฑ ุญููู ุฐููุฉ ู
ุฎุตุตุฉ ุชูุจู ุงุญุชูุงุฌุงุช ุนู
ูุงุฆูุง ูุชุณุงุนุฏูู
ุนูู ุชุญููู ุฃูุตู ุงุณุชูุงุฏุฉ ู
ู ุงูุชูููุงุช ุงูุญุฏูุซุฉ. |
|
|
</p> |
|
|
|
|
|
<div class="about-features"> |
|
|
<div class="about-feature" data-aos="fade-up" data-aos-delay="100"> |
|
|
<div class="about-feature-icon"> |
|
|
<i class="fas fa-check"></i> |
|
|
</div> |
|
|
<div class="about-feature-text"> |
|
|
<h4>ุฎุจุฑุฉ ู
ุชุฎุตุตุฉ</h4> |
|
|
<p>ูุฑูู ู
ู ุงูุฎุจุฑุงุก ุงูู
ุชุฎุตุตูู ูู ู
ุฌุงูุงุช ุงูุฐูุงุก ุงูุงุตุทูุงุนู ูุชุทููุฑ ุงูุจุฑู
ุฌูุงุช ูุงูุชุญูู ุงูุฑูู
ู.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="about-feature" data-aos="fade-up" data-aos-delay="200"> |
|
|
<div class="about-feature-icon"> |
|
|
<i class="fas fa-check"></i> |
|
|
</div> |
|
|
<div class="about-feature-text"> |
|
|
<h4>ุญููู ู
ุฎุตุตุฉ</h4> |
|
|
<p>ูุทูุฑ ุญููู ุชูููุฉ ู
ุฎุตุตุฉ ุชูุงุณุจ ุงุญุชูุงุฌุงุช ูู ุนู
ููุ ู
ุน ุงูุชุฑููุฒ ุนูู ุชุญููู ุฃูุฏุงูู ุงูุงุณุชุฑุงุชูุฌูุฉ.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="about-feature" data-aos="fade-up" data-aos-delay="300"> |
|
|
<div class="about-feature-icon"> |
|
|
<i class="fas fa-check"></i> |
|
|
</div> |
|
|
<div class="about-feature-text"> |
|
|
<h4>ุชูููุงุช ู
ุชุทูุฑุฉ</h4> |
|
|
<p>ูุณุชุฎุฏู
ุฃุญุฏุซ ุงูุชูููุงุช ูุงูุฃุฏูุงุช ูู ู
ุฌุงู ุงูุฐูุงุก ุงูุงุตุทูุงุนู ูุชุทููุฑ ุงูุจุฑู
ุฌูุงุช ูุถู
ุงู ุชูุฏูู
ุฃูุถู ุงูุญููู.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<a href="#contact" class="btn btn-primary"> |
|
|
<i class="fas fa-users"></i> ุชุนุฑู ุนูู ูุฑูููุง |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="about-image" data-aos="fade-left"> |
|
|
<img src="https://ufastpro.com/wp-content/uploads/2025/04/Blue-and-White-Illustrative-Brainstorm-Presentation.jpg" alt="ู
ู ูุญู" class="about-img"> |
|
|
<div class="about-image-overlay"> |
|
|
<div class="about-image-text">ูุงุณุช ุจุฑู - ุงุจุชูุงุฑ ุจูุง ุญุฏูุฏ</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="about-counters"> |
|
|
<div class="about-counter" data-aos="zoom-in" data-aos-delay="100"> |
|
|
<div class="about-counter-number count-up" data-count="150">0</div> |
|
|
<div class="about-counter-text">ุนู
ูู ุญูู ุงูุนุงูู
</div> |
|
|
</div> |
|
|
<div class="about-counter" data-aos="zoom-in" data-aos-delay="200"> |
|
|
<div class="about-counter-number count-up" data-count="300">0</div> |
|
|
<div class="about-counter-text">ู
ุดุฑูุน ูุงุฌุญ</div> |
|
|
</div> |
|
|
<div class="about-counter" data-aos="zoom-in" data-aos-delay="300"> |
|
|
<div class="about-counter-number count-up" data-count="50">0</div> |
|
|
<div class="about-counter-text">ุฎุจูุฑ ู
ุชุฎุตุต</div> |
|
|
</div> |
|
|
<div class="about-counter" data-aos="zoom-in" data-aos-delay="400"> |
|
|
<div class="about-counter-number count-up" data-count="10">0</div> |
|
|
<div class="about-counter-text">ุฌูุงุฆุฒ ุชูููุฉ</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="services section" id="services"> |
|
|
<div class="container"> |
|
|
<div class="section-title"> |
|
|
<h2>ุฎุฏู
ุงุชูุง</h2> |
|
|
<p>ู
ุฌู
ูุนุฉ ู
ุชูุงู
ูุฉ ู
ู ุงูุฎุฏู
ุงุช ุงูู
ุชุทูุฑุฉ ูุชูุจูุฉ ุงุญุชูุงุฌุงุช ุนู
ูู</p> |
|
|
</div> |
|
|
|
|
|
<div class="services-grid"> |
|
|
<div class="service-card" data-aos="fade-up" data-aos-delay="100"> |
|
|
<div class="service-icon"> |
|
|
<i class="fas fa-robot"></i> |
|
|
</div> |
|
|
<h3 class="service-title">ุงูุฐูุงุก ุงูุงุตุทูุงุนู</h3> |
|
|
<p class="service-text"> |
|
|
ุชุทููุฑ ุญููู ุฐูุงุก ุงุตุทูุงุนู ู
ุฎุตุตุฉ ูุชุญุณูู ุนู
ููุงุช ุงูุฃุนู
ุงู ูุฒูุงุฏุฉ ุงูุฅูุชุงุฌูุฉ ูุชูููุฑ ุชุฌุงุฑุจ ู
ุณุชุฎุฏู
ูุฑูุฏุฉุ ู
ุน ุงูุชุฑููุฒ ุนูู ุงูุชุนูู
ุงูุขูู ูู
ุนุงูุฌุฉ ุงููุบุงุช ุงูุทุจูุนูุฉ. |
|
|
</p> |
|
|
<a href="#" class="btn btn-primary">ุงูู
ุฒูุฏ</a> |
|
|
</div> |
|
|
|
|
|
<div class="service-card" data-aos="fade-up" data-aos-delay="200"> |
|
|
<div class="service-icon"> |
|
|
<i class="fas fa-mobile-alt"></i> |
|
|
</div> |
|
|
<h3 class="service-title">ุชุทุจููุงุช ุงูุฌูุงู</h3> |
|
|
<p class="service-text"> |
|
|
ุชุตู
ูู
ูุชุทููุฑ ุชุทุจููุงุช ุฌูุงู ุนุตุฑูุฉ ูุณููุฉ ุงูุงุณุชุฎุฏุงู
ูู
ูุตุงุช iOS ู Android ู
ุน ุฏุนู
ูุงู
ู ููุบุฉ ุงูุนุฑุจูุฉ ูุงูุชูุงู
ู ู
ุน ุญููู ุงูุฐูุงุก ุงูุงุตุทูุงุนู ุงูู
ุชูุฏู
ุฉ. |
|
|
</p> |
|
|
<a href="#" class="btn btn-primary">ุงูู
ุฒูุฏ</a> |
|
|
</div> |
|
|
|
|
|
<div class="service-card" data-aos="fade-up" data-aos-delay="300"> |
|
|
<div class="service-icon"> |
|
|
<i class="fas fa-globe"></i> |
|
|
</div> |
|
|
<h3 class="service-title">ุชุทููุฑ ุงูููุจ</h3> |
|
|
<p class="service-text"> |
|
|
ุฅูุดุงุก ู
ูุงูุน ููุจ ู
ุชุฌุงูุจุฉ ูุชุทุจููุงุช ููุจ ู
ุชุทูุฑุฉ ู
ุน ูุงุฌูุงุช ู
ุณุชุฎุฏู
ุฌุฐุงุจุฉ ููุธุงุฆู ู
ุชูุฏู
ุฉ ุชุนู
ู ุจุณูุงุณุฉ ุนูู ุฌู
ูุน ุงูุฃุฌูุฒุฉ ูุงูู
ุชุตูุญุงุช. |
|
|
</p> |
|
|
<a href="#" class="btn btn-primary">ุงูู
ุฒูุฏ</a> |
|
|
</div> |
|
|
|
|
|
<div class="service-card" data-aos="fade-up" data-aos-delay="400"> |
|
|
<div class="service-icon"> |
|
|
<i class="fas fa-chart-line"></i> |
|
|
</div> |
|
|
<h3 class="service-title">ุชุญููู ุงูุจูุงูุงุช</h3> |
|
|
<p class="service-text"> |
|
|
ุชุญููู ุงูุจูุงูุงุช ุงูุถุฎู
ุฉ ูุงุณุชุฎุฑุงุฌ ุฑุคู ููู
ุฉ ูุฏุนู
ุงุชุฎุงุฐ ุงููุฑุงุฑุงุช ูุชุญุณูู ุงุณุชุฑุงุชูุฌูุงุช ุงูุนู
ู ู
ู ุฎูุงู ุชูููุงุช ุงูุชุนูู
ุงูุขูู ูุงูุชุญูููุงุช ุงูุชูุจุคูุฉ. |
|
|
</p> |
|
|
<a href="#" class="btn btn-primary">ุงูู
ุฒูุฏ</a> |
|
|
</div> |
|
|
|
|
|
<div class="service-card" data-aos="fade-up" data-aos-delay="500"> |
|
|
<div class="service-icon"> |
|
|
<i class="fas fa-lock"></i> |
|
|
</div> |
|
|
<h3 class="service-title">ุฃู
ู ุงูู
ุนููู
ุงุช</h3> |
|
|
<p class="service-text"> |
|
|
ุญู
ุงูุฉ ุฃูุธู
ุชู ูุจูุงูุงุชู ู
ู ุงูุชูุฏูุฏุงุช ุงูุฅููุชุฑูููุฉ ู
ุน ุญููู ุฃู
ููุฉ ู
ุชูุงู
ูุฉ ุชุนุชู
ุฏ ุนูู ุงูุฐูุงุก ุงูุงุตุทูุงุนู ูููุดู ุงูู
ุจูุฑ ุนู ู
ุญุงููุงุช ุงูุงุฎุชุฑุงู ูู
ูุนูุง. |
|
|
</p> |
|
|
<a href="#" class="btn btn-primary">ุงูู
ุฒูุฏ</a> |
|
|
</div> |
|
|
|
|
|
<div class="service-card" data-aos="fade-up" data-aos-delay="600"> |
|
|
<div class="service-icon"> |
|
|
<i class="fas fa-cloud"></i> |
|
|
</div> |
|
|
<h3 class="service-title">ุงูุญูุณุจุฉ ุงูุณุญุงุจูุฉ</h3> |
|
|
<p class="service-text"> |
|
|
ุชูููุฑ ุญููู ุณุญุงุจูุฉ ู
ุฑูุฉ ููุงุจูุฉ ููุชูุณุน ูุชุฎุฒูู ุงูุจูุงูุงุช ูู
ุนุงูุฌุชูุง ุจููุงุกุฉ ูุฃู
ุงูุ ู
ุน ุฏุนู
ูุงู
ู ููุชูุงู
ู ู
ุน ุฎุฏู
ุงุช ุงูุญูุณุจุฉ ุงูุณุญุงุจูุฉ ุงูุฑุงุฆุฏุฉ. |
|
|
</p> |
|
|
<a href="#" class="btn btn-primary">ุงูู
ุฒูุฏ</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="api-services section" id="api-services"> |
|
|
<div class="container"> |
|
|
<div class="section-title"> |
|
|
<h2>ุฎุฏู
ุงุช API</h2> |
|
|
<p>ูุงุฌูุงุช ุจุฑู
ุฌุฉ ูููุฉ ูู
ุฑูุฉ ูุชูุงู
ู ุณูู ู
ุน ุฃูุธู
ุชู</p> |
|
|
</div> |
|
|
|
|
|
<div class="api-grid"> |
|
|
<div class="api-card" data-aos="fade-up" data-aos-delay="100"> |
|
|
<div class="api-header"> |
|
|
<div class="api-icon"> |
|
|
<i class="fas fa-language"></i> |
|
|
</div> |
|
|
<h3 class="api-title">ู
ุนุงูุฌุฉ ุงููุบุฉ ุงูุทุจูุนูุฉ</h3> |
|
|
</div> |
|
|
<p class="api-description"> |
|
|
ูุงุฌูุฉ ุจุฑู
ุฌุฉ ู
ุชุทูุฑุฉ ูุชุญููู ูููู
ุงููุตูุต ุงูุนุฑุจูุฉ ูุงูุฅูุฌููุฒูุฉ ุจุฏูุฉ ุนุงููุฉุ ู
ุฏุนูู
ุฉ ุจุฃุญุฏุซ ุชูููุงุช ุงูุฐูุงุก ุงูุงุตุทูุงุนู. |
|
|
</p> |
|
|
<div class="api-features"> |
|
|
<div class="api-feature"> |
|
|
<i class="fas fa-check-circle"></i> |
|
|
<span>ุชุญููู ุงูู
ุดุงุนุฑ ูุงูุขุฑุงุก ุจุฏูุฉ ุชููู 95%</span> |
|
|
</div> |
|
|
<div class="api-feature"> |
|
|
<i class="fas fa-check-circle"></i> |
|
|
<span>ุงุณุชุฎุฑุงุฌ ุงูููุงูุงุช ูุงูู
ุนููู
ุงุช ุงูู
ูู
ุฉ</span> |
|
|
</div> |
|
|
<div class="api-feature"> |
|
|
<i class="fas fa-check-circle"></i> |
|
|
<span>ุฏุนู
ูุงู
ู ูููุฌุงุช ุงูุนุฑุจูุฉ ุงูู
ุฎุชููุฉ</span> |
|
|
</div> |
|
|
</div> |
|
|
<a href="#" class="btn btn-primary">ุงุณุชูุดุงู API</a> |
|
|
</div> |
|
|
|
|
|
<div class="api-card" data-aos="fade-up" data-aos-delay="200"> |
|
|
<div class="api-header"> |
|
|
<div class="api-icon"> |
|
|
<i class="fas fa-image"></i> |
|
|
</div> |
|
|
<h3 class="api-title">ุชุญููู ุงูุตูุฑ ูุงูุฑุคูุฉ</h3> |
|
|
</div> |
|
|
<p class="api-description"> |
|
|
ุชุญููู ุงูุตูุฑ ูุงูููุฏูููุงุช ุจุงุณุชุฎุฏุงู
ุงูุฐูุงุก ุงูุงุตุทูุงุนู ูุงุณุชุฎุฑุงุฌ ู
ุนููู
ุงุช ููู
ุฉ ูุชุญุณูู ุชุฌุฑุจุฉ ุงูู
ุณุชุฎุฏู
. |
|
|
</p> |
|
|
<div class="api-features"> |
|
|
<div class="api-feature"> |
|
|
<i class="fas fa-check-circle"></i> |
|
|
<span>ุงูุชุนุฑู ุนูู ุงููุฌูู ูุงูุฃุดูุงุก ุจุฏูุฉ ุนุงููุฉ</span> |
|
|
</div> |
|
|
<div class="api-feature"> |
|
|
<i class="fas fa-check-circle"></i> |
|
|
<span>ุงุณุชุฎุฑุงุฌ ุงููุตูุต ู
ู ุงูุตูุฑ ุจูุบุงุช ู
ุชุนุฏุฏุฉ</span> |
|
|
</div> |
|
|
<div class="api-feature"> |
|
|
<i class="fas fa-check-circle"></i> |
|
|
<span>ุชุญุณูู ุฌูุฏุฉ ุงูุตูุฑ ุชููุงุฆููุง</span> |
|
|
</div> |
|
|
</div> |
|
|
<a href="#" class="btn btn-primary">ุงุณุชูุดุงู API</a> |
|
|
</div> |
|
|
|
|
|
<div class="api-card" data-aos="fade-up" data-aos-delay="300"> |
|
|
<div class="api-header"> |
|
|
<div class="api-icon"> |
|
|
<i class="fas fa-microphone"></i> |
|
|
</div> |
|
|
<h3 class="api-title">ุงูุชุนุฑู ุนูู ุงูููุงู
</h3> |
|
|
</div> |
|
|
<p class="api-description"> |
|
|
ุชุญููู ุงูููุงู
ุฅูู ูุต ุจุฏูุฉ ุนุงููุฉ ู
ุน ุฏุนู
ุงููุบุฉ ุงูุนุฑุจูุฉ ูุงูููุฌุงุช ุงูู
ุฎุชููุฉุ ูุชุญููู ูุจุฑุฉ ุงูุตูุช ูุงูู
ุดุงุนุฑ. |
|
|
</p> |
|
|
<div class="api-features"> |
|
|
<div class="api-feature"> |
|
|
<i class="fas fa-check-circle"></i> |
|
|
<span>ุฏุนู
ุงูุชุนุฑู ุนูู ููุงู
ู
ุชุนุฏุฏ ุงูู
ุชุญุฏุซูู</span> |
|
|
</div> |
|
|
<div class="api-feature"> |
|
|
<i class="fas fa-check-circle"></i> |
|
|
<span>ุชุญููู ุงููุต ุฅูู ููุงู
ุทุจูุนู ููุงูุนู</span> |
|
|
</div> |
|
|
<div class="api-feature"> |
|
|
<i class="fas fa-check-circle"></i> |
|
|
<span>ุฏุนู
ุงูููุฌุงุช ุงูุนุฑุจูุฉ ุงูู
ุฎุชููุฉ</span> |
|
|
</div> |
|
|
</div> |
|
|
<a href="#" class="btn btn-primary">ุงุณุชูุดุงู API</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="speedy section" id="speedy"> |
|
|
<div class="speedy-overlay"></div> |
|
|
<div class="container"> |
|
|
<div class="section-title"> |
|
|
<h2>SPEEDY</h2> |
|
|
<p>ูู
ูุฐุฌ ุงูุฐูุงุก ุงูุงุตุทูุงุนู ุงูู
ุชุทูุฑ ููุดุฑูุงุช ูุงูู
ุคุณุณุงุช</p> |
|
|
</div> |
|
|
|
|
|
<div class="speedy-content"> |
|
|
<div class="speedy-text" data-aos="fade-right"> |
|
|
<span class="speedy-subtitle">ุงูุฌูู ุงููุงุฏู
ู
ู ุงูุฐูุงุก ุงูุงุตุทูุงุนู</span> |
|
|
<h2 class="speedy-title">SPEEDY MODEL</h2> |
|
|
<p class="speedy-description"> |
|
|
ูู
ูุฐุฌ SPEEDY ูู ุฃุญุฏุซ ุฅุตุฏุงุฑุงุชูุง ูู ู
ุฌุงู ุงูุฐูุงุก ุงูุงุตุทูุงุนูุ ู
ุตู
ู
ุฎุตูุตูุง ูุชูุจูุฉ ุงุญุชูุงุฌุงุช ุงูุดุฑูุงุช ูุงูู
ุคุณุณุงุช ุงูุชู ุชุชุทูุน ุฅูู ุชุญููู ููุฒุฉ ููุนูุฉ ูู ุฃุนู
ุงููุง ุจุงุณุชุฎุฏุงู
ุงูุชูููุงุช ุงูุฐููุฉ. |
|
|
</p> |
|
|
<p class="speedy-description"> |
|
|
ุจูุถู ูุฏุฑุงุชู ุงููุงุฆูุฉ ุนูู ู
ุนุงูุฌุฉ ุงูุจูุงูุงุช ูููู
ุงููุบุงุช ุงูุทุจูุนูุฉ ูุงุชุฎุงุฐ ุงููุฑุงุฑุงุช ุงูู
ุนูุฏุฉุ ูู
ูู ููู
ูุฐุฌ SPEEDY ุฃู ูุญุฏุซ ุซูุฑุฉ ูู ุทุฑููุฉ ุฅุฏุงุฑุฉ ุฃุนู
ุงูู ูุชูุงุนูู ู
ุน ุนู
ูุงุฆู. |
|
|
</p> |
|
|
|
|
|
<div class="speedy-features"> |
|
|
<div class="speedy-feature" data-aos="fade-up" data-aos-delay="100"> |
|
|
<i class="fas fa-bolt"></i> |
|
|
<div class="speedy-feature-text"> |
|
|
<h4>ุณุฑุนุฉ ูุงุฆูุฉ ูู ุงูู
ุนุงูุฌุฉ</h4> |
|
|
<p>ู
ุนุงูุฌุฉ ุงูุจูุงูุงุช ูุงูุงุณุชุฌุงุจุฉ ููุงุณุชุนูุงู
ุงุช ุจุณุฑุนุฉ ุชููู ุงููู
ุงุฐุฌ ุงูุชูููุฏูุฉ ุจูุณุจุฉ 200%.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="speedy-feature" data-aos="fade-up" data-aos-delay="200"> |
|
|
<i class="fas fa-brain"></i> |
|
|
<div class="speedy-feature-text"> |
|
|
<h4>ููู
ูุบูู ู
ุชูุฏู
</h4> |
|
|
<p>ููู
ูุงุณุชูุนุงุจ ุงููุบุงุช ุงูุทุจูุนูุฉ ุจุฏูุฉ ุนุงููุฉุ ู
ุน ุฏุนู
ูุงู
ู ููุบุฉ ุงูุนุฑุจูุฉ ูุงูููุฌุงุช ุงูู
ุฎุชููุฉ.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="speedy-feature" data-aos="fade-up" data-aos-delay="300"> |
|
|
<i class="fas fa-chart-pie"></i> |
|
|
<div class="speedy-feature-text"> |
|
|
<h4>ุชุญูููุงุช ุฐููุฉ</h4> |
|
|
<p>ุชุญููู ุงูุจูุงูุงุช ูุงุณุชุฎุฑุงุฌ ุฑุคู ููู
ุฉ ูุฏุนู
ุงุชุฎุงุฐ ุงููุฑุงุฑุงุช ุงูุงุณุชุฑุงุชูุฌูุฉ ูู ู
ุคุณุณุชู.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="speedy-feature" data-aos="fade-up" data-aos-delay="400"> |
|
|
<i class="fas fa-cog"></i> |
|
|
<div class="speedy-feature-text"> |
|
|
<h4>ูุงุจููุฉ ุงูุชุฎุตูุต</h4> |
|
|
<p>ุฅู
ูุงููุฉ ุชุฎุตูุต ุงููู
ูุฐุฌ ูููุงุณุจ ุงุญุชูุงุฌุงุช ุนู
ูู ุงููุฑูุฏุฉ ูุชุทุจููุงุชู ุงูู
ุฎุชููุฉ.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<a href="#contact" class="btn btn-primary"> |
|
|
<i class="fas fa-rocket"></i> ุฌุฑุจ SPEEDY ุงูุขู |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="speedy-image" data-aos="fade-left"> |
|
|
<img src="https://ufastpro.com/wp-content/uploads/2025/04/ุชุตู
ูู
-ุจุฏูู-ุนููุงู-1.jpg" alt="SPEEDY AI" class="speedy-img"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="previous-works"> |
|
|
<h2 class="works-title" data-aos="zoom-in">ุณุงุจูุฉ ุฃุนู
ุงููุง</h2> |
|
|
<p class="works-description" data-aos="zoom-in"> |
|
|
ุงุณุชูุดู ู
ุฌู
ูุนุฉ ู
ู ู
ุดุงุฑูุนูุง ุงูุญููููุฉ ูุงูู
ุจุชูุฑุฉ ุงูุชู ููุฐูุงูุง ุจูุฌุงุญ ูุนู
ูุงุฆูุง ูู ู
ุฎุชูู ุงููุทุงุนุงุช |
|
|
</p> |
|
|
|
|
|
<div class="works-grid"> |
|
|
<div class="work-card" data-aos="flip-left" data-aos-delay="100"> |
|
|
<div class="work-image"> |
|
|
<img src="https://ufastpro.com/wp-content/uploads/2025/01/Black-Gold-Modern-Law-Firm-Presentation-1.png" alt="ู
ุณุชุดุงุฑู ุงููุงูููู" class="work-img"> |
|
|
<div class="work-badge">AI ู
ูุชู
ู</div> |
|
|
</div> |
|
|
<div class="work-content"> |
|
|
<h3 class="work-card-title">ู
ุณุชุดุงุฑู ุงููุงูููู AI</h3> |
|
|
<p class="work-card-text"> |
|
|
ูุธุงู
ุฐูุงุก ุงุตุทูุงุนู ู
ุชุทูุฑ ููุงุณุชุดุงุฑุงุช ุงููุงููููุฉ ูุญูู ุงููุถุงูุงุ ูุณุงุนุฏ ุงูู
ุญุงู
ููุ ููุตูุบ ุงูุนููุฏ ุชููุงุฆูุงู ุจุฏูุฉ ุนุงููุฉ. |
|
|
</p> |
|
|
<div class="work-tech-stack"> |
|
|
<span class="tech-tag">Python</span> |
|
|
<span class="tech-tag">NLP</span> |
|
|
<span class="tech-tag">Machine Learning</span> |
|
|
<span class="tech-tag">Legal AI</span> |
|
|
</div> |
|
|
<a href="#" class="work-card-btn"> |
|
|
ุงุณุชูุดู ุงูู
ุดุฑูุน <i class="fas fa-arrow-left"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="work-card" data-aos="flip-left" data-aos-delay="200"> |
|
|
<div class="work-image"> |
|
|
<img src="https://ufastpro.com/wp-content/uploads/2024/11/f-stpro-1-1.png" alt="ู
ุฑุงุฌุนู ุงููุบูู" class="work-img"> |
|
|
<div class="work-badge">ุชุทุจูู ุฐูู</div> |
|
|
</div> |
|
|
<div class="work-content"> |
|
|
<h3 class="work-card-title">ู
ุฑุงุฌุนู ุงููุบูู AI</h3> |
|
|
<p class="work-card-text"> |
|
|
ุชุทุจูู ุฐูู ููู
ุฑุงุฌุนุฉ ุงููุบููุฉ ููุชุดู ุงูุฃุฎุทุงุก ุงููุญููุฉ ูุงูุฅู
ูุงุฆูุฉ ููุญุณู ุฌูุฏุฉ ุงููุตูุต ุจุงููุบุฉ ุงูุนุฑุจูุฉ ูุงูุฅูุฌููุฒูุฉ. |
|
|
</p> |
|
|
<div class="work-tech-stack"> |
|
|
<span class="tech-tag">React Native</span> |
|
|
<span class="tech-tag">AI Grammar</span> |
|
|
<span class="tech-tag">Arabic NLP</span> |
|
|
<span class="tech-tag">Mobile App</span> |
|
|
</div> |
|
|
<a href="#" class="work-card-btn"> |
|
|
ุงุณุชูุดู ุงูู
ุดุฑูุน <i class="fas fa-arrow-left"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="work-card" data-aos="flip-left" data-aos-delay="300"> |
|
|
<div class="work-image"> |
|
|
<img src="https://ufastpro.com/wp-content/uploads/2025/04/ุชุตู
ูู
-ุจุฏูู-ุนููุงู-1.jpg" alt="SPEEDY Model" class="work-img"> |
|
|
<div class="work-badge">ูู
ูุฐุฌ AI</div> |
|
|
</div> |
|
|
<div class="work-content"> |
|
|
<h3 class="work-card-title">SPEEDY AI Model</h3> |
|
|
<p class="work-card-text"> |
|
|
ูู
ูุฐุฌ ุฐูุงุก ุงุตุทูุงุนู ุดุงู
ู ู
ุชุนุฏุฏ ุงููุธุงุฆู ูุฌู
ุน ุจูู ุงูุชุญููู ุงููุตู ูุชูููุฏ ุงูู
ุญุชูู ูููู
ุงูู
ุดุงุนุฑ ูุงูุชุญูููุงุช ุงูู
ุชูุฏู
ุฉ. |
|
|
</p> |
|
|
<div class="work-tech-stack"> |
|
|
<span class="tech-tag">Transformer</span> |
|
|
<span class="tech-tag">GPT</span> |
|
|
<span class="tech-tag">Deep Learning</span> |
|
|
<span class="tech-tag">Multi-Modal AI</span> |
|
|
</div> |
|
|
<a href="#" class="work-card-btn"> |
|
|
ุงุณุชูุดู ุงูู
ุดุฑูุน <i class="fas fa-arrow-left"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="work-card" data-aos="flip-left" data-aos-delay="400"> |
|
|
<div class="work-image"> |
|
|
<img src="https://placehold.co/400x250/4facfe/fff?text=Smart+Analytics" alt="ู
ูุตุฉ ุงูุชุญูููุงุช ุงูุฐููุฉ" class="work-img"> |
|
|
<div class="work-badge">ู
ูุตุฉ ุชุญููู</div> |
|
|
</div> |
|
|
<div class="work-content"> |
|
|
<h3 class="work-card-title">ู
ูุตุฉ ุงูุชุญูููุงุช ุงูุฐููุฉ</h3> |
|
|
<p class="work-card-text"> |
|
|
ู
ูุตุฉ ู
ุชุทูุฑุฉ ูุชุญููู ุงูุจูุงูุงุช ุงูุถุฎู
ุฉ ูุฅูุชุงุฌ ุงูุชูุงุฑูุฑ ุงูุชูุงุนููุฉ ู
ุน ุฑุคู ุฐููุฉ ู
ุฏุนูู
ุฉ ุจุงูุฐูุงุก ุงูุงุตุทูุงุนู. |
|
|
</p> |
|
|
<div class="work-tech-stack"> |
|
|
<span class="tech-tag">Big Data</span> |
|
|
<span class="tech-tag">Apache Spark</span> |
|
|
<span class="tech-tag">Data Visualization</span> |
|
|
<span class="tech-tag">Business Intelligence</span> |
|
|
</div> |
|
|
<a href="#" class="work-card-btn"> |
|
|
ุงุณุชูุดู ุงูู
ุดุฑูุน <i class="fas fa-arrow-left"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="work-card" data-aos="flip-left" data-aos-delay="500"> |
|
|
<div class="work-image"> |
|
|
<img src="https://placehold.co/400x250/36d1dc/fff?text=Voice+Assistant" alt="ุงูู
ุณุงุนุฏ ุงูุตูุชู ุงูุฐูู" class="work-img"> |
|
|
<div class="work-badge">ู
ุณุงุนุฏ ุฐูู</div> |
|
|
</div> |
|
|
<div class="work-content"> |
|
|
<h3 class="work-card-title">ุงูู
ุณุงุนุฏ ุงูุตูุชู ุงูุฐูู</h3> |
|
|
<p class="work-card-text"> |
|
|
ู
ุณุงุนุฏ ุตูุชู ุฐูู ูููู
ุงููุบุฉ ุงูุนุฑุจูุฉ ูุงูููุฌุงุช ุงูู
ุญููุฉ ูููุฏู
ุงุณุชุฌุงุจุงุช ุทุจูุนูุฉ ูุฏูููุฉ ููู
ุณุชุฎุฏู
ูู. |
|
|
</p> |
|
|
<div class="work-tech-stack"> |
|
|
<span class="tech-tag">Speech Recognition</span> |
|
|
<span class="tech-tag">Voice Synthesis</span> |
|
|
<span class="tech-tag">Arabic ASR</span> |
|
|
<span class="tech-tag">Conversational AI</span> |
|
|
</div> |
|
|
<a href="#" class="work-card-btn"> |
|
|
ุงุณุชูุดู ุงูู
ุดุฑูุน <i class="fas fa-arrow-left"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="work-card" data-aos="flip-left" data-aos-delay="600"> |
|
|
<div class="work-image"> |
|
|
<img src="https://placehold.co/400x250/ff6a88/fff?text=E-Commerce+AI" alt="ู
ูุตุฉ ุงูุชุฌุงุฑุฉ ุงูุฐููุฉ" class="work-img"> |
|
|
<div class="work-badge">ุชุฌุงุฑุฉ ุฅููุชุฑูููุฉ</div> |
|
|
</div> |
|
|
<div class="work-content"> |
|
|
<h3 class="work-card-title">ู
ูุตุฉ ุงูุชุฌุงุฑุฉ ุงูุฐููุฉ</h3> |
|
|
<p class="work-card-text"> |
|
|
ู
ูุตุฉ ุชุฌุงุฑุฉ ุฅููุชุฑูููุฉ ู
ุฏุนูู
ุฉ ุจุงูุฐูุงุก ุงูุงุตุทูุงุนู ุชูุฏู
ุชูุตูุงุช ุดุฎุตูุฉ ูุชุญูููุงุช ุณููู ุงูุนู
ูุงุก ุงูู
ุชูุฏู
ุฉ. |
|
|
</p> |
|
|
<div class="work-tech-stack"> |
|
|
<span class="tech-tag">Recommendation Engine</span> |
|
|
<span class="tech-tag">Customer Analytics</span> |
|
|
<span class="tech-tag">E-commerce</span> |
|
|
<span class="tech-tag">Personalization</span> |
|
|
</div> |
|
|
<a href="#" class="work-card-btn"> |
|
|
ุงุณุชูุดู ุงูู
ุดุฑูุน <i class="fas fa-arrow-left"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="fastpro-media section" id="fastpro-media"> |
|
|
<div class="container"> |
|
|
<div class="section-title"> |
|
|
<h2>ู
ูุฏูุง ูุงุณุช ุจุฑู</h2> |
|
|
<p>ุงุณุชูุดู ู
ูุงูุงุชูุง ูููุฏูููุงุชูุง ูุจุซูุซูุง ุงูู
ุจุงุดุฑุฉ ุนูู ู
ูุตุงุช ุงูุชูุงุตู ุงูุงุฌุชู
ุงุนู</p> |
|
|
</div> |
|
|
|
|
|
<div class="media-categories"> |
|
|
<button class="media-category-btn active" data-filter="all"> |
|
|
<i class="fas fa-th"></i> ุงููู |
|
|
</button> |
|
|
<button class="media-category-btn" data-filter="articles"> |
|
|
<i class="fas fa-newspaper"></i> ุงูู
ูุงูุงุช |
|
|
</button> |
|
|
<button class="media-category-btn" data-filter="videos"> |
|
|
<i class="fas fa-video"></i> ุงูููุฏูููุงุช |
|
|
</button> |
|
|
<button class="media-category-btn" data-filter="live"> |
|
|
<i class="fas fa-broadcast-tower"></i> ุงูุจุซ ุงูู
ุจุงุดุฑ |
|
|
</button> |
|
|
<button class="media-category-btn" data-filter="tutorials"> |
|
|
<i class="fas fa-graduation-cap"></i> ุงูุฏุฑูุณ ุงูุชุนููู
ูุฉ |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="media-grid"> |
|
|
<div class="media-card" data-category="articles" data-aos="fade-up" data-aos-delay="100"> |
|
|
<div class="media-thumbnail"> |
|
|
<img src="https://placehold.co/400x250/4facfe/fff?text=AI+Article" alt="ู
ูุงู ุนู ุงูุฐูุงุก ุงูุงุตุทูุงุนู" class="media-img"> |
|
|
<div class="media-type-badge">ู
ูุงู</div> |
|
|
</div> |
|
|
<div class="media-content"> |
|
|
<h3 class="media-title">ู
ุณุชูุจู ุงูุฐูุงุก ุงูุงุตุทูุงุนู ูู ุงูุดุฑู ุงูุฃูุณุท</h3> |
|
|
<p class="media-description"> |
|
|
ุชุญููู ุดุงู
ู ูุงุชุฌุงูุงุช ุงูุฐูุงุก ุงูุงุตุทูุงุนู ูู ุงูู
ูุทูุฉ ุงูุนุฑุจูุฉ ูุงููุฑุต ุงูุงุณุชุซู
ุงุฑูุฉ ุงูู
ุชุงุญุฉ ูู ูุฐุง ุงููุทุงุน ุงููุงุดุฆ. |
|
|
</p> |
|
|
<div class="media-meta"> |
|
|
<div class="media-date"> |
|
|
<i class="fas fa-calendar-alt"></i> |
|
|
<span>15 ููุงูุฑ 2025</span> |
|
|
</div> |
|
|
<div class="media-platform"> |
|
|
<i class="fab fa-linkedin"></i> |
|
|
<span>LinkedIn</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="media-card" data-category="videos" data-aos="fade-up" data-aos-delay="200"> |
|
|
<div class="media-thumbnail"> |
|
|
<img src="https://placehold.co/400x250/36d1dc/fff?text=AI+Tutorial" alt="ุฏุฑุณ ุชุนููู
ู" class="media-img"> |
|
|
<div class="media-play-button"> |
|
|
<i class="fas fa-play"></i> |
|
|
</div> |
|
|
<div class="media-type-badge">ููุฏูู</div> |
|
|
</div> |
|
|
<div class="media-content"> |
|
|
<h3 class="media-title">ููููุฉ ุจูุงุก ูู
ูุฐุฌ ุฐูุงุก ุงุตุทูุงุนู ู
ู ุงูุตูุฑ</h3> |
|
|
<p class="media-description"> |
|
|
ุดุฑุญ ู
ูุตู ูุนู
ูู ูุฎุทูุงุช ุจูุงุก ูู
ูุฐุฌ ุฐูุงุก ุงุตุทูุงุนู ุจุงุณุชุฎุฏุงู
ุฃุญุฏุซ ุงูุชูููุงุช ูุงูุฃุฏูุงุช ุงูู
ุชุงุญุฉ. |
|
|
</p> |
|
|
<div class="media-meta"> |
|
|
<div class="media-date"> |
|
|
<i class="fas fa-calendar-alt"></i> |
|
|
<span>12 ููุงูุฑ 2025</span> |
|
|
</div> |
|
|
<div class="media-platform"> |
|
|
<i class="fab fa-youtube"></i> |
|
|
<span>@ufastpro</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="media-card" data-category="live" data-aos="fade-up" data-aos-delay="300"> |
|
|
<div class="media-thumbnail"> |
|
|
<img src="https://placehold.co/400x250/ff6a88/fff?text=Live+Stream" alt="ุจุซ ู
ุจุงุดุฑ" class="media-img"> |
|
|
<div class="media-play-button"> |
|
|
<i class="fas fa-circle" style="color: #ff0000;"></i> |
|
|
</div> |
|
|
<div class="media-type-badge">ุจุซ ู
ุจุงุดุฑ</div> |
|
|
</div> |
|
|
<div class="media-content"> |
|
|
<h3 class="media-title">ููุงุก ู
ุจุงุดุฑ: ุชุทููุฑ ุงูุฐูุงุก ุงูุงุตุทูุงุนู ูู 2025</h3> |
|
|
<p class="media-description"> |
|
|
ุฌูุณุฉ ููุงุดูุฉ ู
ูุชูุญุฉ ุญูู ุฃุญุฏุซ ุชุทูุฑุงุช ุงูุฐูุงุก ุงูุงุตุทูุงุนู ูุงูุชูููุงุช ุงููุงุดุฆุฉ ู
ุน ุฎุจุฑุงุก ุงูู
ุฌุงู. |
|
|
</p> |
|
|
<div class="media-meta"> |
|
|
<div class="media-date"> |
|
|
<i class="fas fa-calendar-alt"></i> |
|
|
<span>10 ููุงูุฑ 2025</span> |
|
|
</div> |
|
|
<div class="media-platform"> |
|
|
<i class="fab fa-facebook"></i> |
|
|
<span>@ufastpro</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="media-card" data-category="tutorials" data-aos="fade-up" data-aos-delay="400"> |
|
|
<div class="media-thumbnail"> |
|
|
<img src="https://placehold.co/400x250/7b2cbf/fff?text=Python+Tutorial" alt="ุฏุฑุณ ุจุงูุซูู" class="media-img"> |
|
|
<div class="media-play-button"> |
|
|
<i class="fas fa-play"></i> |
|
|
</div> |
|
|
<div class="media-type-badge">ุฏุฑุณ ุชุนููู
ู</div> |
|
|
</div> |
|
|
<div class="media-content"> |
|
|
<h3 class="media-title">ุชุนูู
Python ููุฐูุงุก ุงูุงุตุทูุงุนู - ุงูุฌุฒุก ุงูุฃูู</h3> |
|
|
<p class="media-description"> |
|
|
ุณูุณูุฉ ุชุนููู
ูุฉ ุดุงู
ูุฉ ูุชุนูู
ูุบุฉ ุงูุจุฑู
ุฌุฉ Python ูุชุทุจูููุง ูู ู
ุดุงุฑูุน ุงูุฐูุงุก ุงูุงุตุทูุงุนู ูุงูุชุนูู
ุงูุขูู. |
|
|
</p> |
|
|
<div class="media-meta"> |
|
|
<div class="media-date"> |
|
|
<i class="fas fa-calendar-alt"></i> |
|
|
<span>8 ููุงูุฑ 2025</span> |
|
|
</div> |
|
|
<div class="media-platform"> |
|
|
<i class="fab fa-youtube"></i> |
|
|
<span>@ufastpro</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="media-card" data-category="articles" data-aos="fade-up" data-aos-delay="500"> |
|
|
<div class="media-thumbnail"> |
|
|
<img src="https://placehold.co/400x250/f72585/fff?text=Tech+Trends" alt="ุงุชุฌุงูุงุช ุงูุชูููุฉ" class="media-img"> |
|
|
<div class="media-type-badge">ู
ูุงู</div> |
|
|
</div> |
|
|
<div class="media-content"> |
|
|
<h3 class="media-title">ุงุชุฌุงูุงุช ุงูุชูููุฉ ูุนุงู
2025</h3> |
|
|
<p class="media-description"> |
|
|
ูุธุฑุฉ ุดุงู
ูุฉ ุนูู ุฃูู
ุงูุงุชุฌุงูุงุช ุงูุชูููุฉ ุงูู
ุชููุนุฉ ูุนุงู
2025 ูุชุฃุซูุฑูุง ุนูู ุงูุฃุนู
ุงู ูุงูู
ุฌุชู
ุน. |
|
|
</p> |
|
|
<div class="media-meta"> |
|
|
<div class="media-date"> |
|
|
<i class="fas fa-calendar-alt"></i> |
|
|
<span>5 ููุงูุฑ 2025</span> |
|
|
</div> |
|
|
<div class="media-platform"> |
|
|
<i class="fab fa-medium"></i> |
|
|
<span>Medium</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="media-card" data-category="videos" data-aos="fade-up" data-aos-delay="600"> |
|
|
<div class="media-thumbnail"> |
|
|
<img src="https://placehold.co/400x250/4cc9f0/fff?text=Company+Story" alt="ูุตุฉ ุงูุดุฑูุฉ" class="media-img"> |
|
|
<div class="media-play-button"> |
|
|
<i class="fas fa-play"></i> |
|
|
</div> |
|
|
<div class="media-type-badge">ููุฏูู</div> |
|
|
</div> |
|
|
<div class="media-content"> |
|
|
<h3 class="media-title">ูุตุฉ ุชุฃุณูุณ ูุงุณุช ุจุฑู ูุฑุญูุฉ ุงููุฌุงุญ</h3> |
|
|
<p class="media-description"> |
|
|
ุชุนุฑู ุนูู ูุตุฉ ุชุฃุณูุณ ุดุฑูุฉ ูุงุณุช ุจุฑู ูุงูุชุญุฏูุงุช ุงูุชู ูุงุฌููุงูุง ููุฌุงุญุงุชูุง ูู ู
ุฌุงู ุงูุฐูุงุก ุงูุงุตุทูุงุนู. |
|
|
</p> |
|
|
<div class="media-meta"> |
|
|
<div class="media-date"> |
|
|
<i class="fas fa-calendar-alt"></i> |
|
|
<span>3 ููุงูุฑ 2025</span> |
|
|
</div> |
|
|
<div class="media-platform"> |
|
|
<i class="fab fa-facebook"></i> |
|
|
<span>@ufastpro</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="projects section" id="all-programs"> |
|
|
<div class="container"> |
|
|
<div class="section-title"> |
|
|
<h2>ูู ุจุฑุงู
ุฌูุง</h2> |
|
|
<p>ู
ุฌู
ูุนุฉ ุดุงู
ูุฉ ู
ู ุงูุจุฑุงู
ุฌ ูุงูุฃุฏูุงุช ุงูุชู ุทูุฑูุงูุง ูุชูุจูุฉ ุงุญุชูุงุฌุงุชู ุงูุชูููุฉ</p> |
|
|
</div> |
|
|
|
|
|
<div class="project-categories"> |
|
|
<button class="project-category-btn active" data-filter="all">ุงููู</button> |
|
|
<button class="project-category-btn" data-filter="ai-tools">ุฃุฏูุงุช AI</button> |
|
|
<button class="project-category-btn" data-filter="mobile-apps">ุชุทุจููุงุช ุงูุฌูุงู</button> |
|
|
<button class="project-category-btn" data-filter="web-platforms">ู
ูุตุงุช ุงูููุจ</button> |
|
|
<button class="project-category-btn" data-filter="apis">ูุงุฌูุงุช API</button> |
|
|
</div> |
|
|
|
|
|
<div class="project-grid"> |
|
|
|
|
|
<div class="project-card" data-category="ai-tools" data-aos="fade-up" data-aos-delay="100"> |
|
|
<div class="project-image"> |
|
|
<img src="https://ufastpro.com/wp-content/uploads/2025/04/ุชุตู
ูู
-ุจุฏูู-ุนููุงู-1.jpg" alt="SPEEDY AI" class="project-img"> |
|
|
<div class="project-overlay"> |
|
|
<a href="https://speedy.ufastpro.com" target="_blank" class="btn btn-primary">ุฒูุงุฑุฉ ุงูุจุฑูุงู
ุฌ</a> |
|
|
</div> |
|
|
<div class="project-tag">ูู
ูุฐุฌ AI</div> |
|
|
</div> |
|
|
<div class="project-content"> |
|
|
<h3 class="project-title">SPEEDY AI Model</h3> |
|
|
<p class="project-description"> |
|
|
ูู
ูุฐุฌ ุฐูุงุก ุงุตุทูุงุนู ู
ุชุทูุฑ ู
ุชุนุฏุฏ ุงููุธุงุฆู ูุฌู
ุน ุจูู ุงูุชุญููู ุงููุตู ูุชูููุฏ ุงูู
ุญุชูู ูููู
ุงูู
ุดุงุนุฑ. |
|
|
</p> |
|
|
<div class="project-meta"> |
|
|
<div class="project-client"> |
|
|
<i class="fas fa-link"></i> |
|
|
<a href="https://speedy.ufastpro.com" target="_blank">speedy.ufastpro.com</a> |
|
|
</div> |
|
|
<div class="project-date"> |
|
|
<i class="fas fa-calendar-alt"></i> |
|
|
<span>2025</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="project-card" data-category="ai-tools" data-aos="fade-up" data-aos-delay="200"> |
|
|
<div class="project-image"> |
|
|
<img src="https://ufastpro.com/wp-content/uploads/2025/01/Black-Gold-Modern-Law-Firm-Presentation-1.png" alt="ู
ุณุชุดุงุฑู ุงููุงูููู" class="project-img"> |
|
|
<div class="project-overlay"> |
|
|
<a href="https://legal.ufastpro.com" target="_blank" class="btn btn-primary">ุฒูุงุฑุฉ ุงูุจุฑูุงู
ุฌ</a> |
|
|
</div> |
|
|
<div class="project-tag">ู
ุณุงุนุฏ ูุงูููู</div> |
|
|
</div> |
|
|
<div class="project-content"> |
|
|
<h3 class="project-title">ู
ุณุชุดุงุฑู ุงููุงูููู AI</h3> |
|
|
<p class="project-description"> |
|
|
ูุธุงู
ุฐูุงุก ุงุตุทูุงุนู ููุงุณุชุดุงุฑุงุช ุงููุงููููุฉ ูุญูู ุงููุถุงูุง ููุณุงุนุฏ ูู ุตูุงุบุฉ ุงูุนููุฏ ูุงููุซุงุฆู ุงููุงููููุฉ. |
|
|
</p> |
|
|
<div class="project-meta"> |
|
|
<div class="project-client"> |
|
|
<i class="fas fa-link"></i> |
|
|
<a href="https://legal.ufastpro.com" target="_blank">legal.ufastpro.com</a> |
|
|
</div> |
|
|
<div class="project-date"> |
|
|
<i class="fas fa-calendar-alt"></i> |
|
|
<span>2025</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="project-card" data-category="mobile-apps" data-aos="fade-up" data-aos-delay="300"> |
|
|
<div class="project-image"> |
|
|
<img src="https://ufastpro.com/wp-content/uploads/2024/11/f-stpro-1-1.png" alt="ู
ุฑุงุฌุนู ุงููุบูู" class="project-img"> |
|
|
<div class="project-overlay"> |
|
|
<a href="https://apps.ufastpro.com/reviewer" target="_blank" class="btn btn-primary">ุชุญู
ูู ุงูุชุทุจูู</a> |
|
|
</div> |
|
|
<div class="project-tag">ุชุทุจูู ุฌูุงู</div> |
|
|
</div> |
|
|
<div class="project-content"> |
|
|
<h3 class="project-title">ู
ุฑุงุฌุนู ุงููุบูู</h3> |
|
|
<p class="project-description"> |
|
|
ุชุทุจูู ู
ุฑุงุฌุนุฉ ูุบููุฉ ุฐูู ููุชุดู ุงูุฃุฎุทุงุก ุงููุญููุฉ ูุงูุฅู
ูุงุฆูุฉ ููุญุณู ุฌูุฏุฉ ุงููุตูุต ุงูุนุฑุจูุฉ ูุงูุฅูุฌููุฒูุฉ. |
|
|
</p> |
|
|
<div class="project-meta"> |
|
|
<div class="project-client"> |
|
|
<i class="fas fa-mobile-alt"></i> |
|
|
<span>iOS & Android</span> |
|
|
</div> |
|
|
<div class="project-date"> |
|
|
<i class="fas fa-calendar-alt"></i> |
|
|
<span>2024</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="project-card" data-category="web-platforms" data-aos="fade-up" data-aos-delay="400"> |
|
|
<div class="project-image"> |
|
|
<img src="https://placehold.co/600x400/4facfe/fff?text=Analytics+Platform" alt="ู
ูุตุฉ ุงูุชุญูููุงุช" class="project-img"> |
|
|
<div class="project-overlay"> |
|
|
<a href="https://analytics.ufastpro.com" target="_blank" class="btn btn-primary">ุฒูุงุฑุฉ ุงูู
ูุตุฉ</a> |
|
|
</div> |
|
|
<div class="project-tag">ู
ูุตุฉ ููุจ</div> |
|
|
</div> |
|
|
<div class="project-content"> |
|
|
<h3 class="project-title">ู
ูุตุฉ ุงูุชุญูููุงุช ุงูุฐููุฉ</h3> |
|
|
<p class="project-description"> |
|
|
ู
ูุตุฉ ู
ุชุทูุฑุฉ ูุชุญููู ุงูุจูุงูุงุช ูุฅูุชุงุฌ ุงูุชูุงุฑูุฑ ุงูุชูุงุนููุฉ ู
ุน ุฑุคู ุฐููุฉ ู
ุฏุนูู
ุฉ ุจุงูุฐูุงุก ุงูุงุตุทูุงุนู. |
|
|
</p> |
|
|
<div class="project-meta"> |
|
|
<div class="project-client"> |
|
|
<i class="fas fa-link"></i> |
|
|
<a href="https://analytics.ufastpro.com" target="_blank">analytics.ufastpro.com</a> |
|
|
</div> |
|
|
<div class="project-date"> |
|
|
<i class="fas fa-calendar-alt"></i> |
|
|
<span>2024</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="project-card" data-category="apis" data-aos="fade-up" data-aos-delay="500"> |
|
|
<div class="project-image"> |
|
|
<img src="https://placehold.co/600x400/36d1dc/fff?text=Voice+API" alt="Voice API" class="project-img"> |
|
|
<div class="project-overlay"> |
|
|
<a href="https://api.ufastpro.com/voice" target="_blank" class="btn btn-primary">ุงุณุชุฎุฏู
API</a> |
|
|
</div> |
|
|
<div class="project-tag">ูุงุฌูุฉ API</div> |
|
|
</div> |
|
|
<div class="project-content"> |
|
|
<h3 class="project-title">Voice Recognition API</h3> |
|
|
<p class="project-description"> |
|
|
ูุงุฌูุฉ ุจุฑู
ุฌุฉ ู
ุชุทูุฑุฉ ููุชุนุฑู ุนูู ุงูููุงู
ูุชุญูููู ุฅูู ูุต ู
ุน ุฏุนู
ูุงู
ู ููุบุฉ ุงูุนุฑุจูุฉ ูุงูููุฌุงุช ุงูู
ุฎุชููุฉ. |
|
|
</p> |
|
|
<div class="project-meta"> |
|
|
<div class="project-client"> |
|
|
<i class="fas fa-link"></i> |
|
|
<a href="https://api.ufastpro.com/voice" target="_blank">api.ufastpro.com/voice</a> |
|
|
</div> |
|
|
<div class="project-date"> |
|
|
<i class="fas fa-calendar-alt"></i> |
|
|
<span>2024</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="project-card" data-category="apis" data-aos="fade-up" data-aos-delay="600"> |
|
|
<div class="project-image"> |
|
|
<img src="https://placehold.co/600x400/ff6a88/fff?text=NLP+API" alt="NLP API" class="project-img"> |
|
|
<div class="project-overlay"> |
|
|
<a href="https://api.ufastpro.com/nlp" target="_blank" class="btn btn-primary">ุงุณุชุฎุฏู
API</a> |
|
|
</div> |
|
|
<div class="project-tag">ูุงุฌูุฉ API</div> |
|
|
</div> |
|
|
<div class="project-content"> |
|
|
<h3 class="project-title">Arabic NLP API</h3> |
|
|
<p class="project-description"> |
|
|
ูุงุฌูุฉ ุจุฑู
ุฌุฉ ูู
ุนุงูุฌุฉ ุงููุบุฉ ุงูุทุจูุนูุฉ ุงูุนุฑุจูุฉ ู
ุน ุฅู
ูุงููุงุช ุชุญููู ุงูู
ุดุงุนุฑ ูุงุณุชุฎุฑุงุฌ ุงูููุงูุงุช ูุงูู
ูุงููู
. |
|
|
</p> |
|
|
<div class="project-meta"> |
|
|
<div class="project-client"> |
|
|
<i class="fas fa-link"></i> |
|
|
<a href="https://api.ufastpro.com/nlp" target="_blank">api.ufastpro.com/nlp</a> |
|
|
</div> |
|
|
<div class="project-date"> |
|
|
<i class="fas fa-calendar-alt"></i> |
|
|
<span>2024</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="footer" id="contact"> |
|
|
<div class="container"> |
|
|
<div class="footer-grid"> |
|
|
<div class="footer-widget footer-about"> |
|
|
<h3>ุนู ูุงุณุช ุจุฑู</h3> |
|
|
<p> |
|
|
ุดุฑูุฉ ุฑุงุฆุฏุฉ ูู ู
ุฌุงู ุชูููุงุช ุงูุฐูุงุก ุงูุงุตุทูุงุนู ูุชุทููุฑ ุงูุจุฑู
ุฌูุงุช ุงูู
ุชูุฏู
ุฉุ ููุฏู
ุญููู ู
ุจุชูุฑุฉ ูู
ุฎุตุตุฉ ูู
ุณุงุนุฏุฉ ุนู
ูุงุฆูุง ุนูู ุชุญููู ุงููุฌุงุญ ูู ุงูุนุตุฑ ุงูุฑูู
ู. |
|
|
</p> |
|
|
<div class="footer-social"> |
|
|
<a href="https://facebook.com/ufastpro" target="_blank" class="social-link"><i class="fab fa-facebook-f"></i></a> |
|
|
<a href="https://twitter.com/ufastpro" target="_blank" class="social-link"><i class="fab fa-twitter"></i></a> |
|
|
<a href="https://linkedin.com/company/ufastpro" target="_blank" class="social-link"><i class="fab fa-linkedin-in"></i></a> |
|
|
<a href="https://instagram.com/ufastpro" target="_blank" class="social-link"><i class="fab fa-instagram"></i></a> |
|
|
<a href="https://youtube.com/@ufastpro" target="_blank" class="social-link"><i class="fab fa-youtube"></i></a> |
|
|
<a href="https://tiktok.com/@ufastpro" target="_blank" class="social-link"><i class="fab fa-tiktok"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="footer-widget footer-links"> |
|
|
<h3>ุฑูุงุจุท ุณุฑูุนุฉ</h3> |
|
|
<ul> |
|
|
<li><a href="#">ุงูุฑุฆูุณูุฉ</a></li> |
|
|
<li><a href="#about-us">ู
ู ูุญู</a></li> |
|
|
<li><a href="#services">ุฎุฏู
ุงุชูุง</a></li> |
|
|
<li><a href="#api-services">ุฎุฏู
ุงุช API</a></li> |
|
|
<li><a href="#speedy">SPEEDY</a></li> |
|
|
<li><a href="#projects">ู
ุดุงุฑูุนูุง</a></li> |
|
|
<li><a href="#all-programs">ูู ุจุฑุงู
ุฌูุง</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="footer-widget footer-links"> |
|
|
<h3>ุจุฑุงู
ุฌูุง ุงูู
ุชุงุญุฉ</h3> |
|
|
<ul> |
|
|
<li><a href="https://speedy.ufastpro.com" target="_blank">SPEEDY AI Model</a></li> |
|
|
<li><a href="https://legal.ufastpro.com" target="_blank">ู
ุณุชุดุงุฑู ุงููุงูููู</a></li> |
|
|
<li><a href="https://apps.ufastpro.com/reviewer" target="_blank">ู
ุฑุงุฌุนู ุงููุบูู</a></li> |
|
|
<li><a href="https://analytics.ufastpro.com" target="_blank">ู
ูุตุฉ ุงูุชุญูููุงุช</a></li> |
|
|
<li><a href="https://api.ufastpro.com/voice" target="_blank">Voice API</a></li> |
|
|
<li><a href="https://api.ufastpro.com/nlp" target="_blank">Arabic NLP API</a></li> |
|
|
<li><a href="#fastpro-media">ู
ูุฏูุง ูุงุณุช ุจุฑู</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="footer-widget footer-contact"> |
|
|
<h3>ุชูุงุตู ู
ุนูุง</h3> |
|
|
<p> |
|
|
<i class="fas fa-map-marker-alt"></i> |
|
|
<span>ุงููุงูุฑุฉุ ุฌู
ููุฑูุฉ ู
ุตุฑ ุงูุนุฑุจูุฉ</span> |
|
|
</p> |
|
|
<p> |
|
|
<i class="fas fa-phone-alt"></i> |
|
|
<span>+20 107 015 9698</span> |
|
|
</p> |
|
|
<p> |
|
|
<i class="fas fa-envelope"></i> |
|
|
<span>[email protected]</span> |
|
|
</p> |
|
|
<div class="footer-subscribe"> |
|
|
<input type="email" placeholder="ุงูุจุฑูุฏ ุงูุฅููุชุฑููู ูููุดุฑุฉ ุงูุฅุฎุจุงุฑูุฉ"> |
|
|
<button><i class="fas fa-paper-plane"></i></button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="footer-bottom"> |
|
|
<p> |
|
|
ุฌู
ูุน ุงูุญููู ู
ุญููุธุฉ © 2025 ูุงุณุช ุจุฑู ููุฐูุงุก ุงูุงุตุทูุงุนู - @ufastpro ุนูู ุฌู
ูุน ู
ูุตุงุช ุงูุชูุงุตู ุงูุงุฌุชู
ุงุนู |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<div class="chatbot"> |
|
|
<div class="chatbot-toggle" id="chatbot-toggle"> |
|
|
<i class="fas fa-comment-dots"></i> |
|
|
</div> |
|
|
|
|
|
<div class="chatbot-window" id="chatbot-window"> |
|
|
<div class="chatbot-header"> |
|
|
<h3 class="chatbot-title">ู
ุณุงุนุฏ ูุงุณุช ุจุฑู</h3> |
|
|
<button class="chatbot-close" id="chatbot-close"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="chatbot-messages" id="chatbot-messages"> |
|
|
<div class="chat-message bot-message"> |
|
|
ู
ุฑุญุจูุง! ุฃูุง ู
ุณุงุนุฏ ูุงุณุช ุจุฑู ุงูุงูุชุฑุงุถู ุงูู
ุฏุนูู
ุจุชูููุฉ SPEEDY. ููู ูู
ูููู ู
ุณุงุนุฏุชู ุงูููู
ุ |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="chatbot-input"> |
|
|
<input type="text" id="chat-input" placeholder="ุงูุชุจ ุฑุณุงูุชู ููุง..."> |
|
|
<button class="chatbot-send" id="chat-send"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="back-to-top" id="back-to-top"> |
|
|
<i class="fas fa-arrow-up"></i> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
AOS.init({ |
|
|
duration: 800, |
|
|
once: true, |
|
|
offset: 100 |
|
|
}); |
|
|
|
|
|
|
|
|
const heroTyped = new Typed('#hero-typing', { |
|
|
strings: [ |
|
|
'ูุจุชูุฑ ุงูู
ุณุชูุจู ู
ุน ุชูููุงุช ุงูุฐูุงุก ุงูุงุตุทูุงุนู ุงูู
ุชูุฏู
ุฉ', |
|
|
'ูุทูุฑ ุญููู ุฐููุฉ ุชูุงุณุจ ุงุญุชูุงุฌุงุช ุนู
ูู ุงููุฑูุฏุฉ', |
|
|
'ูุญูู ุฃููุงุฑู ุฅูู ูุงูุน ุฑูู
ู ู
ุชุทูุฑ', |
|
|
'ูุฑุชูู ุจุฃุนู
ุงูู ุฅูู ุขูุงู ุฌุฏูุฏุฉ ู
ู ุงููุฌุงุญ' |
|
|
], |
|
|
typeSpeed: 50, |
|
|
backSpeed: 30, |
|
|
backDelay: 3000, |
|
|
loop: true |
|
|
}); |
|
|
|
|
|
|
|
|
const logoTyped = new Typed('#logo-text', { |
|
|
strings: ['ูุงุณุช ุจุฑู','ูุงุณุช ุจุฑู', 'FastPro'], |
|
|
typeSpeed: 50, |
|
|
backSpeed: 30, |
|
|
backDelay: 5000, |
|
|
loop: true |
|
|
}); |
|
|
|
|
|
|
|
|
const countUpElements = document.querySelectorAll('.count-up'); |
|
|
|
|
|
function animateCountUp(el) { |
|
|
const target = parseInt(el.getAttribute('data-count')); |
|
|
const count = parseInt(el.innerText); |
|
|
const increment = target / 50; |
|
|
|
|
|
if (count < target) { |
|
|
el.innerText = Math.ceil(count + increment); |
|
|
setTimeout(function() { |
|
|
animateCountUp(el); |
|
|
}, 50); |
|
|
} else { |
|
|
el.innerText = target; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const observer = new IntersectionObserver((entries) => { |
|
|
entries.forEach(entry => { |
|
|
if (entry.isIntersecting) { |
|
|
animateCountUp(entry.target); |
|
|
observer.unobserve(entry.target); |
|
|
} |
|
|
}); |
|
|
}, {threshold: 0.5}); |
|
|
|
|
|
countUpElements.forEach(el => { |
|
|
observer.observe(el); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const lightToggle = document.getElementById('light-toggle'); |
|
|
const darkToggle = document.getElementById('dark-toggle'); |
|
|
const cosmosToggle = document.getElementById('cosmos-toggle'); |
|
|
const mobileLightToggle = document.getElementById('mobile-light-toggle'); |
|
|
const mobileDarkToggle = document.getElementById('mobile-dark-toggle'); |
|
|
const mobileCosmosToggle = document.getElementById('mobile-cosmos-toggle'); |
|
|
const body = document.body; |
|
|
|
|
|
function setTheme(theme) { |
|
|
body.setAttribute('data-theme', theme); |
|
|
localStorage.setItem('theme', theme); |
|
|
|
|
|
|
|
|
lightToggle.classList.remove('active'); |
|
|
darkToggle.classList.remove('active'); |
|
|
cosmosToggle.classList.remove('active'); |
|
|
mobileLightToggle.classList.remove('active'); |
|
|
mobileDarkToggle.classList.remove('active'); |
|
|
mobileCosmosToggle.classList.remove('active'); |
|
|
|
|
|
if (theme === 'light' || !theme) { |
|
|
lightToggle.classList.add('active'); |
|
|
mobileLightToggle.classList.add('active'); |
|
|
initParticles('#4facfe'); |
|
|
} else if (theme === 'dark') { |
|
|
darkToggle.classList.add('active'); |
|
|
mobileDarkToggle.classList.add('active'); |
|
|
initParticles('#6078ff'); |
|
|
} else if (theme === 'cosmos') { |
|
|
cosmosToggle.classList.add('active'); |
|
|
mobileCosmosToggle.classList.add('active'); |
|
|
initParticles('#e0aaff'); |
|
|
createStars(); |
|
|
} |
|
|
} |
|
|
|
|
|
lightToggle.addEventListener('click', () => setTheme('light')); |
|
|
darkToggle.addEventListener('click', () => setTheme('dark')); |
|
|
cosmosToggle.addEventListener('click', () => setTheme('cosmos')); |
|
|
mobileLightToggle.addEventListener('click', () => { |
|
|
setTheme('light'); |
|
|
closeMobileMenu(); |
|
|
}); |
|
|
mobileDarkToggle.addEventListener('click', () => { |
|
|
setTheme('dark'); |
|
|
closeMobileMenu(); |
|
|
}); |
|
|
mobileCosmosToggle.addEventListener('click', () => { |
|
|
setTheme('cosmos'); |
|
|
closeMobileMenu(); |
|
|
}); |
|
|
|
|
|
|
|
|
const savedTheme = localStorage.getItem('theme'); |
|
|
if (savedTheme) { |
|
|
setTheme(savedTheme); |
|
|
} |
|
|
|
|
|
|
|
|
function createStars() { |
|
|
const starsContainer = document.getElementById('stars-container'); |
|
|
starsContainer.innerHTML = ''; |
|
|
|
|
|
|
|
|
for (let i = 0; i < 200; i++) { |
|
|
const star = document.createElement('div'); |
|
|
star.classList.add('star'); |
|
|
|
|
|
const size = Math.random() * 2 + 1; |
|
|
const x = Math.random() * window.innerWidth; |
|
|
const y = Math.random() * window.innerHeight; |
|
|
|
|
|
star.style.width = `${size}px`; |
|
|
star.style.height = `${size}px`; |
|
|
star.style.left = `${x}px`; |
|
|
star.style.top = `${y}px`; |
|
|
star.style.animationDelay = `${Math.random() * 5}s`; |
|
|
|
|
|
starsContainer.appendChild(star); |
|
|
} |
|
|
|
|
|
|
|
|
for (let i = 0; i < 5; i++) { |
|
|
const shootingStar = document.createElement('div'); |
|
|
shootingStar.classList.add('shooting-star'); |
|
|
|
|
|
const x = Math.random() * window.innerWidth; |
|
|
const y = Math.random() * window.innerHeight; |
|
|
|
|
|
shootingStar.style.left = `${x}px`; |
|
|
shootingStar.style.top = `${y}px`; |
|
|
shootingStar.style.animationDelay = `${Math.random() * 15}s`; |
|
|
|
|
|
starsContainer.appendChild(shootingStar); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function initParticles(color) { |
|
|
particlesJS('particles-js', { |
|
|
particles: { |
|
|
number: { |
|
|
value: 80, |
|
|
density: { |
|
|
enable: true, |
|
|
value_area: 800 |
|
|
} |
|
|
}, |
|
|
color: { |
|
|
value: color |
|
|
}, |
|
|
shape: { |
|
|
type: 'circle', |
|
|
stroke: { |
|
|
width: 0, |
|
|
color: '#000000' |
|
|
} |
|
|
}, |
|
|
opacity: { |
|
|
value: 0.5, |
|
|
random: false, |
|
|
animation: { |
|
|
enable: true, |
|
|
speed: 1, |
|
|
opacity_min: 0.1, |
|
|
sync: false |
|
|
} |
|
|
}, |
|
|
size: { |
|
|
value: 3, |
|
|
random: true, |
|
|
animation: { |
|
|
enable: true, |
|
|
speed: 2, |
|
|
size_min: 0.1, |
|
|
sync: false |
|
|
} |
|
|
}, |
|
|
line_linked: { |
|
|
enable: true, |
|
|
distance: 150, |
|
|
color: color, |
|
|
opacity: 0.4, |
|
|
width: 1 |
|
|
}, |
|
|
move: { |
|
|
enable: true, |
|
|
speed: 2, |
|
|
direction: 'none', |
|
|
random: false, |
|
|
straight: false, |
|
|
out_mode: 'out', |
|
|
bounce: false, |
|
|
attract: { |
|
|
enable: false, |
|
|
rotateX: 600, |
|
|
rotateY: 1200 |
|
|
} |
|
|
} |
|
|
}, |
|
|
interactivity: { |
|
|
detect_on: 'canvas', |
|
|
events: { |
|
|
onhover: { |
|
|
enable: true, |
|
|
mode: 'grab' |
|
|
}, |
|
|
onclick: { |
|
|
enable: true, |
|
|
mode: 'push' |
|
|
}, |
|
|
resize: true |
|
|
}, |
|
|
modes: { |
|
|
grab: { |
|
|
distance: 140, |
|
|
line_linked: { |
|
|
opacity: 1 |
|
|
} |
|
|
}, |
|
|
push: { |
|
|
particles_nb: 4 |
|
|
} |
|
|
} |
|
|
}, |
|
|
retina_detect: true |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
initParticles('#4facfe'); |
|
|
|
|
|
|
|
|
const currentLang = document.getElementById('current-lang'); |
|
|
const langDropdown = document.getElementById('lang-dropdown'); |
|
|
const langOptions = document.querySelectorAll('.lang-option'); |
|
|
const mobileLangOptions = document.querySelectorAll('.mobile-language-option'); |
|
|
|
|
|
currentLang.addEventListener('click', function() { |
|
|
langDropdown.style.display = langDropdown.style.display === 'block' ? 'none' : 'block'; |
|
|
}); |
|
|
|
|
|
document.addEventListener('click', function(event) { |
|
|
if (!currentLang.contains(event.target) && !langDropdown.contains(event.target)) { |
|
|
langDropdown.style.display = 'none'; |
|
|
} |
|
|
}); |
|
|
|
|
|
function setLanguage(lang) { |
|
|
|
|
|
document.documentElement.setAttribute('lang', lang); |
|
|
|
|
|
|
|
|
const selectedOption = document.querySelector(`.lang-option[data-lang="${lang}"]`); |
|
|
const mobileSelectedOption = document.querySelector(`.mobile-language-option[data-lang="${lang}"]`); |
|
|
|
|
|
if (selectedOption) { |
|
|
currentLang.innerHTML = selectedOption.innerHTML; |
|
|
} |
|
|
|
|
|
|
|
|
langOptions.forEach(option => { |
|
|
option.classList.remove('active'); |
|
|
}); |
|
|
|
|
|
mobileLangOptions.forEach(option => { |
|
|
option.classList.remove('active'); |
|
|
}); |
|
|
|
|
|
if (selectedOption) { |
|
|
selectedOption.classList.add('active'); |
|
|
} |
|
|
|
|
|
if (mobileSelectedOption) { |
|
|
mobileSelectedOption.classList.add('active'); |
|
|
} |
|
|
|
|
|
localStorage.setItem('language', lang); |
|
|
|
|
|
|
|
|
langDropdown.style.display = 'none'; |
|
|
|
|
|
let title; |
|
|
|
|
|
if (lang === 'ar') { |
|
|
title = 'ูุงุณุช ุจุฑู - ุญููู ุงูุฐูุงุก ุงูุงุตุทูุงุนู ุงูู
ุชูุฏู
ุฉ'; |
|
|
document.body.style.direction = 'rtl'; |
|
|
} else if (lang === 'en') { |
|
|
title = 'FastPro - Advanced AI Solutions'; |
|
|
document.body.style.direction = 'ltr'; |
|
|
} |
|
|
|
|
|
document.title = title; |
|
|
} |
|
|
|
|
|
langOptions.forEach(option => { |
|
|
option.addEventListener('click', function() { |
|
|
const lang = this.getAttribute('data-lang'); |
|
|
setLanguage(lang); |
|
|
}); |
|
|
}); |
|
|
|
|
|
mobileLangOptions.forEach(option => { |
|
|
option.addEventListener('click', function() { |
|
|
const lang = this.getAttribute('data-lang'); |
|
|
setLanguage(lang); |
|
|
closeMobileMenu(); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const savedLanguage = localStorage.getItem('language'); |
|
|
if (savedLanguage) { |
|
|
setLanguage(savedLanguage); |
|
|
} |
|
|
|
|
|
|
|
|
const mobileMenuBtn = document.getElementById('mobile-menu-btn'); |
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
const mobileMenuClose = document.getElementById('mobile-menu-close'); |
|
|
const overlay = document.getElementById('overlay'); |
|
|
|
|
|
function openMobileMenu() { |
|
|
mobileMenu.classList.add('active'); |
|
|
overlay.classList.add('active'); |
|
|
document.body.style.overflow = 'hidden'; |
|
|
} |
|
|
|
|
|
function closeMobileMenu() { |
|
|
mobileMenu.classList.remove('active'); |
|
|
overlay.classList.remove('active'); |
|
|
document.body.style.overflow = ''; |
|
|
} |
|
|
|
|
|
mobileMenuBtn.addEventListener('click', openMobileMenu); |
|
|
mobileMenuClose.addEventListener('click', closeMobileMenu); |
|
|
overlay.addEventListener('click', closeMobileMenu); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const targetId = this.getAttribute('href'); |
|
|
if (targetId === '#') return; |
|
|
|
|
|
const targetElement = document.querySelector(targetId); |
|
|
if (targetElement) { |
|
|
|
|
|
closeMobileMenu(); |
|
|
|
|
|
|
|
|
window.scrollTo({ |
|
|
top: targetElement.offsetTop - 80, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const projectCategoryBtns = document.querySelectorAll('.project-category-btn'); |
|
|
const projectCards = document.querySelectorAll('.project-card'); |
|
|
|
|
|
projectCategoryBtns.forEach(btn => { |
|
|
btn.addEventListener('click', function() { |
|
|
|
|
|
projectCategoryBtns.forEach(b => b.classList.remove('active')); |
|
|
|
|
|
this.classList.add('active'); |
|
|
|
|
|
const filter = this.getAttribute('data-filter'); |
|
|
|
|
|
projectCards.forEach(card => { |
|
|
if (filter === 'all') { |
|
|
card.style.display = 'block'; |
|
|
} else { |
|
|
if (card.getAttribute('data-category') === filter) { |
|
|
card.style.display = 'block'; |
|
|
} else { |
|
|
card.style.display = 'none'; |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const mediaCategoryBtns = document.querySelectorAll('.media-category-btn'); |
|
|
const mediaCards = document.querySelectorAll('.media-card'); |
|
|
|
|
|
mediaCategoryBtns.forEach(btn => { |
|
|
btn.addEventListener('click', function() { |
|
|
|
|
|
mediaCategoryBtns.forEach(b => b.classList.remove('active')); |
|
|
|
|
|
this.classList.add('active'); |
|
|
|
|
|
const filter = this.getAttribute('data-filter'); |
|
|
|
|
|
mediaCards.forEach(card => { |
|
|
if (filter === 'all') { |
|
|
card.style.display = 'block'; |
|
|
} else { |
|
|
if (card.getAttribute('data-category') === filter) { |
|
|
card.style.display = 'block'; |
|
|
} else { |
|
|
card.style.display = 'none'; |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const backToTopBtn = document.getElementById('back-to-top'); |
|
|
|
|
|
window.addEventListener('scroll', function() { |
|
|
if (window.pageYOffset > 300) { |
|
|
backToTopBtn.classList.add('active'); |
|
|
} else { |
|
|
backToTopBtn.classList.remove('active'); |
|
|
} |
|
|
}); |
|
|
|
|
|
backToTopBtn.addEventListener('click', function() { |
|
|
window.scrollTo({ |
|
|
top: 0, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const header = document.querySelector('.header'); |
|
|
|
|
|
window.addEventListener('scroll', function() { |
|
|
if (window.pageYOffset > 50) { |
|
|
header.classList.add('scrolled'); |
|
|
} else { |
|
|
header.classList.remove('scrolled'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const chatbotToggle = document.getElementById('chatbot-toggle'); |
|
|
const chatbotWindow = document.getElementById('chatbot-window'); |
|
|
const chatbotClose = document.getElementById('chatbot-close'); |
|
|
const chatbotMessages = document.getElementById('chatbot-messages'); |
|
|
const chatInput = document.getElementById('chat-input'); |
|
|
const chatSend = document.getElementById('chat-send'); |
|
|
|
|
|
chatbotToggle.addEventListener('click', function() { |
|
|
chatbotWindow.style.display = chatbotWindow.style.display === 'flex' ? 'none' : 'flex'; |
|
|
}); |
|
|
|
|
|
chatbotClose.addEventListener('click', function() { |
|
|
chatbotWindow.style.display = 'none'; |
|
|
}); |
|
|
|
|
|
function sendMessage() { |
|
|
const message = chatInput.value.trim(); |
|
|
if (!message) return; |
|
|
|
|
|
|
|
|
const userMessageElement = document.createElement('div'); |
|
|
userMessageElement.classList.add('chat-message', 'user-message'); |
|
|
userMessageElement.textContent = message; |
|
|
chatbotMessages.appendChild(userMessageElement); |
|
|
|
|
|
|
|
|
chatInput.value = ''; |
|
|
|
|
|
|
|
|
chatbotMessages.scrollTop = chatbotMessages.scrollHeight; |
|
|
|
|
|
|
|
|
setTimeout(function() { |
|
|
const botResponses = [ |
|
|
"ุดูุฑุงู ูุชูุงุตูู ู
ุนูุง! ููู ูู
ูููู ู
ุณุงุนุฏุชู ุจุฎุตูุต ุฎุฏู
ุงุชูุงุ", |
|
|
"ูู ุชุฑุบุจ ูู ู
ุนุฑูุฉ ุงูู
ุฒูุฏ ุนู ูู
ูุฐุฌ SPEEDY ูุฅู
ูุงููุงุชูุ", |
|
|
"ูู
ูููู ุชูุตููู ุจุฃุญุฏ ุฎุจุฑุงุฆูุง ูู
ูุงูุดุฉ ุงุญุชูุงุฌุงุชู ุจุดูู ู
ูุตู.", |
|
|
"ูู ูุฏูู ุฃู ุงุณุชูุณุงุฑุงุช ุญูู ู
ุดุงุฑูุนูุง ุฃู ุฎุฏู
ุงุชูุงุ", |
|
|
"ูู
ูููู ุชูุฏูู
ู
ุนููู
ุงุช ู
ูุตูุฉ ุญูู ุจุฑุงู
ุฌูุง ุงูู
ุฎุชููุฉ ูู
ุง ุชุดู
ูู ู
ู ู
ูุฒุงุช.", |
|
|
"ุฃูุง ููุง ูู
ุณุงุนุฏุชู! ูู ุชูุฏ ู
ุนุฑูุฉ ููู ูู
ูู ูุญููู ุงูุฐูุงุก ุงูุงุตุทูุงุนู ุชุญุณูู ุฃุนู
ุงููุ" |
|
|
]; |
|
|
|
|
|
const randomResponse = botResponses[Math.floor(Math.random() * botResponses.length)]; |
|
|
|
|
|
const botMessageElement = document.createElement('div'); |
|
|
botMessageElement.classList.add('chat-message', 'bot-message'); |
|
|
botMessageElement.textContent = randomResponse; |
|
|
chatbotMessages.appendChild(botMessageElement); |
|
|
|
|
|
|
|
|
chatbotMessages.scrollTop = chatbotMessages.scrollHeight; |
|
|
}, 1000); |
|
|
} |
|
|
|
|
|
chatSend.addEventListener('click', sendMessage); |
|
|
|
|
|
chatInput.addEventListener('keypress', function(event) { |
|
|
if (event.key === 'Enter') { |
|
|
sendMessage(); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
