Eco Studio - Video Kassetalarni Raqamlashtirish
Перенаправление...
Eco Studio - Video Касседаларни Рақамлаштириш | Ташкент
Ўзинг эшишни сақлаб қол
Қадимий видео касседаларни юксак сифатли цифрал файлларга айланвириш
Шўро бериш
Кўпроқ масъулот
5000+
Рахамон хизмат қилинди
99.8%
Қониқарлик даражаси
VHS
Стандартным видеокассетам ва VHS-C кассетлари
Video8 & Hi8
8mm видео пленка форматлари
MiniDV
Цифрал видео касседалар
Бошка форматлар
Betacam, U-matic, Digital8 ва бошқаси
Утбориш ва таърих
Пленка жараёнгаи тиркаш
Фото сканлаш
Қадимой жорий фотолик жамоавий
Эга Studio ни танланинг
Узбекистонда рақамлаштириш сахасида өнён ва энг қўлай хизмат берувчи
4K/Full HD Сифат
Энг юқори сифатли видео
Тезкор жизамла
Бируз ичида натижа
Ёмон орзуига
Масъул мосла мова давр
Булак алоиса
Барча файлни диск рўйхатида ғора
1
Ташриф қилиш
Ҳаф-нашро қўлиш е фўғ. Кешанинг қон катра ташриф
→
2
Цунанл таърих
Озоқ адал қўл квалитет ва орзуини мерхамат
→
3
Октябрь даниқ
Юфал сифат ва сутган булун Карандаш
→
4
Қабул қилиш
Юқанги файлларни диск е облак сақлашда
VHS
50,000
сўм
Масъул кассета
✓ Full HD сифат
✓ MP4 формати
✓ Диск + облак
✓ 3 кунда
Танланиш
Сўқ сўт
Video8/Hi8
75,000
сўм
8mm пленка
✓ 4K сифат
✓ MP4 + MOV
✓ Диск + облак
✓ 2 кунда
Танланиш
MiniDV
100,000
сўм
Цифрал видео
✓ 4K оптимал
✓ Бухгалтери
✓ Диск + облак
✓ 1 кунда
Танланиш
🎁 Мухтасид ешар: 3+ касседа буюртмасида 15% чақалоқ!
★★★★★
"Энг яқшш сифат, энг юман нарх. Кесинимизда қоши жозибалик қайта жонга келди!"
★★★★★
"Шкодал даврдан қолган видеолар ҳамма сақланди. Ғояиндиғи эрнак бўлаклади!"
★★★★★
"Барча тезкор ва профессионал ишлоти. Ҳамма жануб сартови сифат!"
★★★★★
"Семейнинг энг қиммати йадини сақлади. Салмақи сўзги суўба йўқ!"
Қайси форматлар қабул қиламиз?
VHS, VHS-C, Video8, Hi8, MiniDV, Betacam, Digital8, U-matic ва фўғ. босқечлай жоан кибовикни кўтарамиз!
Қанча вақто ичида натижа беради?
Одатан 1-3 кун ичида. Масъул заказ сонига ва форматига кўра туши шоу сўзиш.
Касседага зарар юво олади жўп?
Йўқ, орзуй босқечин. Касседалар өзгаловли қолади, фақат рақамли нусхаси ишлаб чиқаледи.
Оджақ файлларни қаердан ўзи оладан?
Диск, USB ва облак сақлашда. Ҳамма нисбат туркум беримиз!
Нарх қай жин арзон қила олча?
3+ касседалар ниқлаганда 15% чақалоқ. Масъул буюртмалар ҳам арзонлашан оқсха бўлиши.
`/uz/style.css`
```css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary: #10B981;
--dark: #0F172A;
--darker: #0A0E27;
--light: #F1F5F9;
--gray: #64748B;
--gray-light: #E2E8F0;
--shadow: 0 20px 60px rgba(15, 23, 42, 0.3);
--shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.1);
--duration: 0.3s;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Inter', sans-serif;
background: var(--dark);
color: var(--light);
line-height: 1.6;
overflow-x: hidden;
}
/* CONTAINER */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* BUTTONS */
.btn {
padding: 12px 28px;
border: none;
border-radius: 8px;
font-family: 'Inter', sans-serif;
font-weight: 600;
cursor: pointer;
transition: all var(--duration) ease;
font-size: 14px;
display: inline-block;
text-decoration: none;
text-align: center;
}
.btn-primary {
background: var(--primary);
color: var(--dark);
}
.btn-primary:hover {
background: #059669;
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(16, 185, 129, 0.3);
}
.btn-outline {
background: transparent;
color: var(--primary);
border: 2px solid var(--primary);
}
.btn-outline:hover {
background: var(--primary);
color: var(--dark);
}
.btn-lg {
padding: 16px 40px;
font-size: 16px;
}
/* HEADER */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: rgba(15, 23, 42, 0.95);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(16, 185, 129, 0.1);
}
.header-content {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 0;
gap: 40px;
}
.logo {
display: flex;
align-items: center;
}
.logo a {
display: flex;
align-items: center;
gap: 12px;
font-size: 20px;
font-weight: 700;
color: var(--light);
text-decoration: none;
transition: color var(--duration) ease;
}
.logo a:hover {
color: var(--primary);
}
.nav {
display: flex;
gap: 30px;
flex: 1;
}
.nav-link {
color: var(--light);
text-decoration: none;
font-weight: 500;
transition: color var(--duration) ease;
position: relative;
}
.nav-link:hover,
.nav-link.active {
color: var(--primary);
}
.nav-link::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background: var(--primary);
transition: width var(--duration) ease;
}
.nav-link:hover::after,
.nav-link.active::after {
width: 100%;
}
.lang-switcher {
display: flex;
gap: 8px;
background: rgba(100, 116, 139, 0.1);
padding: 6px;
border-radius: 6px;
}
.lang-btn {
background: none;
border: none;
color: var(--gray);
font-weight: 600;
font-size: 12px;
padding: 6px 12px;
cursor: pointer;
border-radius: 4px;
transition: all var(--duration) ease;
}
.lang-btn.active {
background: var(--primary);
color: var(--dark);
}
.lang-btn:hover {
color: var(--primary);
}
.mobile-menu-toggle {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
}
.mobile-menu-toggle span {
width: 24px;
height: 2px;
background: var(--light);
border-radius: 2px;
transition: all var(--duration) ease;
}
/* HERO SECTION */
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
padding-top: 80px;
overflow: hidden;
}
.hero-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
.hero-video {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(15, 23, 42, 0.7) 0%, rgba(15, 23, 42, 0.5) 100%);
}
.hero-content {
position: relative;
z-index: 1;
text-align: center;
animation: fadeInUp 0.8s ease;
}
.hero-title {
font-size: 64px;
font-weight: 800;
line-height: 1.2;
margin-bottom: 24px;
color: var(--light);
}
.hero-subtitle {
font-size: 20px;
color: var(--gray-light);
margin-bottom: 40px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.hero-cta {
display: flex;
gap: 20px;
justify-content: center;
margin-bottom: 60px;
}
.hero-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
margin-top: 80px;
padding-top: 80px;
border-top: 1px solid rgba(16, 185, 129, 0.2);
}
.stat {
text-align: center;
}
.stat-number {
font-size: 48px;
font-weight: 800;
color: var(--primary);
margin-bottom: 8px;
}
.stat-label {
color: var(--gray-light);
font-size: 14px;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* SECTION HEADER */
.section-header {
text-align: center;
margin-bottom: 60px;
}
.section-header h2 {
font-size: 44px;
font-weight: 800;
margin-bottom: 16px;
color: var(--light);
}
.section-header p {
font-size: 18px;
color: var(--gray-light);
max-width: 500px;
margin: 0 auto;
}
/* SERVICES SECTION */
.services {
padding: 100px 0;
background: linear-gradient(180deg, var(--dark) 0%, var(--darker) 100%);
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
}
.service-card {
background: rgba(16, 185, 129, 0.05);
border: 1px solid rgba(16, 185, 129, 0.2);
border-radius: 12px;
padding: 40px 24px;
text-align: center;
transition: all var(--duration) ease;
cursor: pointer;
}
.service-card:hover {
background: rgba(16, 185, 129, 0.1);
border-color: var(--primary);
transform: translateY(-8px);
}
.service-icon {
width: 60px;
height: 60px;
margin: 0 auto 20px;
background: rgba(16, 185, 129, 0.1);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.service-icon svg {
width: 32px;
height: 32px;
stroke: var(--primary);
}
.service-card h3 {
font-size: 18px;
font-weight: 700;
margin-bottom: 12px;
color: var(--light);
}
.service-card p {
font-size: 14px;
color: var(--gray-light);
}
/* WHY US SECTION */
.why-us {
padding: 100px 0;
background: var(--dark);
}
.why-us-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.why-us-text h2 {
font-size: 40px;
font-weight: 800;
margin-bottom: 16px;
color: var(--light);
}
.why-us-text > p {
font-size: 16px;
color: var(--gray-light);
margin-bottom: 40px;
}
.features-list {
display: flex;
flex-direction: column;
gap: 24px;
}
.feature-item {
display: flex;
gap: 20px;
}
.feature-icon {
width: 40px;
height: 40px;
background: rgba(16, 185, 129, 0.2);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--primary);
}
.feature-item h4 {
font-size: 16px;
font-weight: 700;
margin-bottom: 4px;
color: var(--light);
}
.feature-item p {
font-size: 14px;
color: var(--gray-light);
}
.why-us-image img {
width: 100%;
border-radius: 12px;
box-shadow: var(--shadow);
}
/* GALLERY SECTION */
.gallery {
padding: 100px 0;
background: linear-gradient(180deg, var(--dark) 0%, var(--darker) 100%);
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 40px;
}
.gallery-item {
position: relative;
border-radius: 12px;
overflow: hidden;
aspect-ratio: 1;
}
.gallery-item p {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: rgba(15, 23, 42, 0.9);
padding: 12px 24px;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
color: var(--primary);
backdrop-filter: blur(10px);
}
/* BEFORE-AFTER SLIDER */
.before-after-slider {
position: relative;
}
.img-wrapper {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.before-img,
.after-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.after-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
clip-path: inset(0 50% 0 0);
}
.slider-handle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 4px;
height: 80%;
background: var(--primary);
cursor: ew-resize;
display: flex;
align-items: center;
justify-content: center;
}
.slider-arrow {
width: 30px;
height: 30px;
background: var(--primary);
border-radius: 4px;
position: absolute;
}
/* PROCESS SECTION */
.process {
padding: 100px 0;
background: var(--dark);
}
.process-steps {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
justify-content: center;
}
.process-step {
flex: 1;
min-width: 250px;
text-align: center;
padding: 30px;
background: rgba(16, 185, 129, 0.05);
border-radius: 12px;
border: 1px solid rgba(16, 185, 129, 0.2);
}
.step-number {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background: var(--primary);
color: var(--dark);
border-radius: 50%;
font-size: 24px;
font-weight: 700;
margin: 0 auto 20px;
}
.step-content h3 {
font-size: 18px;
font-weight: 700;
margin-bottom: 8px;
color: var(--light);
}
.step-content p {
font-size: 14px;
color: var(--gray-light);
}
.process-arrow {
display: none;
color: var(--primary);
font-size: 30px;
}
/* PRICING SECTION */
.pricing {
padding: 100px 0;
background: linear-gradient(180deg, var(--dark) 0%, var(--darker) 100%);
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
margin-bottom: 40px;
}
.pricing-card {
background: rgba(16, 185, 129, 0.05);
border: 1px solid rgba(16, 185, 129, 0.2);
border-radius: 12px;
padding: 40px 24px;
text-align: center;
transition: all var(--duration) ease;
position: relative;
}
.pricing-card:hover {
border-color: var(--primary);
transform: translateY(-8px);
}
.pricing-card.featured {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
border-color: var(--primary);
transform: scale(1.05);
}
.badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--primary);
color: var(--dark);
padding: 6px 16px;
border-radius: 20px;
font-size: 12px;
font-weight: 700;
}
.pricing-card h3 {
font-size: 20px;
font-weight: 700;
margin-bottom: 20px;
margin-top: 10px;
color: var(--light);
}
.price {
margin-bottom: 8px;
}
.amount {
font-size: 36px;
font-weight: 800;
color: var(--primary);
}
.currency {
font-size: 16px;
color: var(--gray-light);
}
.price-desc {
font-size: 14px;
color: var(--gray-light);
margin-bottom: 24px;
}
.price-features {
list-style: none;
margin-bottom: 30px;
text-align: left;
}
.price-features li {
padding: 10px 0;
border-bottom: 1px solid rgba(16, 185, 129, 0.1);
font-size: 14px;
color: var(--gray-light);
}
.pricing-note {
text-align: center;
padding: 24px;
background: rgba(16, 185, 129, 0.1);
border-radius: 12px;
border: 1px solid rgba(16, 185, 129, 0.2);
}
.pricing-note p {
font-size: 16px;
color: var(--light);
}
/* TESTIMONIALS SECTION */
.testimonials {
padding: 100px 0;
background: var(--dark);
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 30px;
}
.testimonial-card {
background: rgba(16, 185, 129, 0.05);
border: 1px solid rgba(16, 185, 129, 0.2);
border-radius: 12px;
padding: 30px;
transition: all var(--duration) ease;
}
.testimonial-card:hover {
background: rgba(16, 185, 129, 0.1);
border-color: var(--primary);
}
.stars {
color: #FCD34D;
font-size: 14px;
margin-bottom: 16px;
}
.testimonial-text {
font-size: 14px;
color: var(--gray-light);
margin-bottom: 24px;
line-height: 1.8;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 12px;
}
.author-avatar {
width: 44px;
height: 44px;
background: var(--primary);
color: var(--dark);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
}
.author-name {
font-weight: 600;
color: var(--light);
}
.author-location {
font-size: 12px;
color: var(--gray-light);
}
/* FAQ SECTION */
.faq {
padding: 100px 0;
background: linear-gradient(180deg, var(--dark) 0%, var(--darker) 100%);
}
.faq-list {
max-width: 600px;
margin: 0 auto;
}
.faq-item {
border-bottom: 1px solid rgba(16, 185, 129, 0.2);
}
.faq-item:last-child {
border-bottom: none;
}
.faq-question {
width: 100%;
background: none;
border: none;
color: var(--light);
font-weight: 600;
font-size: 16px;
padding: 24px 0;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
transition: color var(--duration) ease;
}
.faq-question:hover {
color: var(--primary);
}
.faq-question svg {
width: 20px;
height: 20px;
stroke: currentColor;
transition: transform var(--duration) ease;
}
.faq-item.active .faq-question svg {
transform: rotate(180deg);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height var(--duration) ease;
}
.faq-item.active .faq-answer {
max-height: 300px;
}
.faq-answer p {
color: var(--gray-light);
font-size: 14px;
padding-bottom: 24px;
line-height: 1.8;
}
/* CONTACT SECTION */
.contact {
padding: 100px 0;
background: var(--dark);
}
.contact-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
}
.contact-info h2 {
font-size: 36px;
font-weight: 800;
margin-bottom: 16px;
color: var(--light);
}
.contact-info > p {
font-size: 16px;
color: var(--gray-light);
margin-bottom: 40px;
}
.contact-details {
display: flex;
flex-direction: column;
gap: 30px;
margin-bottom: 40px;
}
.detail-item {
display: flex;
gap: 16px;
}
.detail-icon {
font-size: 24px;
flex-shrink: 0;
}
.detail-item h4 {
font-size: 14px;
font-weight: 700;
color: var(--light);
margin-bottom: 4px;
}
.detail-item p,
.detail-item a {
font-size: 14px;
color: var(--gray-light);
}
.detail-item a {
text-decoration: none;
transition: color var(--duration) ease;
}
.detail-item a:hover {
color: var(--primary);
}
.social-links {
display: flex;
gap: 12px;
}
.social-links a {
width: 40px;
height: 40px;
background: rgba(16, 185, 129, 0.1);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: var(--light);
text-decoration: none;
transition: all var(--duration) ease;
font-size: 18px;
}
.social-links a:hover {
background: var(--primary);
color: var(--dark);
}
/* CONTACT FORM */
.contact-form {
background: rgba(16, 185, 129, 0.05);
border: 1px solid rgba(16, 185, 129, 0.2);
border-radius: 12px;
padding: 40px;
}
.contact-form h3 {
font-size: 24px;
font-weight: 700;
margin-bottom: 30px;
color: var(--light);
}
.form-group {
margin-bottom: 20px;
position: relative;
}
.form-group input,
.form-group textarea,
.form-group select {
width: 100%;
padding: 12px 16px;
background: rgba(226, 232, 240, 0.1);
border: 1px solid rgba(16, 185, 129, 0.2);
border-radius: 8px;
color: var(--light);
font-family: 'Inter', sans-serif;
font-size: 14px;
transition: all var(--duration) ease;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
outline: none;
border-color: var(--primary);
background: rgba(226, 232, 240, 0.15);
}
.form-group input::placeholder,
.form-group textarea::placeholder {
color: var(--gray);
}
.form-group select {
cursor: pointer;
}
.form-group select option {
background: var(--darker);
color: var(--light);
}
.error-message {
font-size: 12px;
color: #EF4444;
display: none;
margin-top: 4px;
}
.form-group.error input,
.form-group.error textarea,
.form-group.error select {
border-color: #EF4444;
}
.form-group.error .error-message {
display: block;
}
.contact-form button {
width: 100%;
margin-top: 10px;
}
.form-note {
font-size: 12px;
color: var(--gray-light);
margin-top: 16px;
text-align: center;
}
/* MAP SECTION */
.map {
height: 400px;
background: var(--darker);
}
/* FOOTER */
.footer {
background: var(--darker);
border-top: 1px solid rgba(16, 185, 129, 0.1);
padding: 60px 0 30px;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 40px;
margin-bottom: 40px;
}
.footer-section h4 {
font-size: 14px;
font-weight: 700;
color: var(--light);
margin-bottom: 16px;
}
.footer-section p {
font-size: 13px;
color: var(--gray-light);
line-height: 1.8;
}
.footer-section ul {
list-style: none;
}
.footer-section ul li {
margin-bottom: 12px;
}
.footer-section ul li a {
font-size: 13px;
color: var(--gray-light);
text-decoration: none;
transition: color var(--duration) ease;
}
.footer-section ul li a:hover {
color: var(--primary);
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 30px;
border-top: 1px solid rgba(16, 185, 129, 0.1);
}
.footer-bottom p {
font-size: 12px;
color: var(--gray-light);
}
.footer-langs {
display: flex;
gap: 12px;
}
.footer-langs a {
font-size: 12px;
color: var(--gray-light);
text-decoration: none;
transition: color var(--duration) ease;
}
.footer-langs a:hover {
color: var(--primary);
}
/* MODAL */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 2000;
align-items: center;
justify-content: center;
animation: fadeIn 0.3s ease;
}
.modal.active {
display: flex;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.modal-content {
background: var(--dark);
border: 1px solid rgba(16, 185, 129, 0.2);
border-radius: 12px;
padding: 40px;
max-width: 450px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
animation: slideUp 0.3s ease;
position: relative;
}
@keyframes slideUp {
from {
transform: translateY(30px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.modal-close {
position: absolute;
top: 20px;
right: 20px;
background: none;
border: none;
color: var(--light);
font-size: 28px;
cursor: pointer;
transition: color var(--duration) ease;
}
.modal-close:hover {
color: var(--primary);
}
.modal-content h2 {
font-size: 24px;
font-weight: 700;
margin-bottom: 24px;
color: var(--light);
}
/* RESPONSIVE */
@media (max-width: 768px) {
.header-content {
gap: 16px;
}
.nav {
display: none;
}
.mobile-menu-toggle {
display: flex;
}
.hero-title {
font-size: 40px;
}
.hero-subtitle {
font-size: 16px;
}
.hero-cta {
flex-direction: column;
align-items: center;
}
.hero-stats {
grid-template-columns: 1fr;
gap: 24px;
}
.why-us-content {
grid-template-columns: 1fr;
gap: 40px;
}
.contact-content {
grid-template-columns: 1fr;
gap: 40px;
}
.process-steps {
flex-direction: column;
}
.process-arrow {
display: inline-block;
transform: rotate(90deg);
margin: 10px 0;
}
.section-header h2 {
font-size: 32px;
}
.footer-bottom {
flex-direction: column;
gap: 20px;
text-align: center;
}
}
@media (max-width: 480px) {
.hero-title {
font-size: 28px;
}
.section-header h2 {
font-size: 24px;
}
.pricing-card.featured {
transform: scale(1);
}
.services-grid,
.testimonials-grid {
grid-template-columns: 1fr;
}
}
```
---
## ⚙️ ФАЙЛ 4: `/uz/script.js`
```javascript
// ============ ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ ============
let currentLang = 'uz';
const translations = {};
// ============ ИНИЦИАЛИЗАЦИЯ ============
document.addEventListener('DOMContentLoaded', () => {
initLanguage();
initEvents();
initAnimations();
initBeforeAfterSliders();
initFAQ();
});
// ============ ЯЗЫК И ПЕРЕВОДЫ ============
async function initLanguage() {
currentLang = window.location.pathname.split('/')[1] || 'uz';
// Загрузить переводы из config.js
await loadTranslations();
// Установить активное кнопку языка
document.querySelectorAll('.lang-btn').forEach(btn => {
btn.classList.remove('active');
if (btn.dataset.lang === currentLang) {
btn.classList.add('active');
}
btn.addEventListener('click', (e) => {
e.preventDefault();
const lang = btn.dataset.lang;
window.location.href = `/${lang}/`;
});
});
}
async function loadTranslations() {
try {
const response = await fetch(`/uz/config.js`); // Все переводы в одном файле
} catch (error) {
console.log('Translations loaded from config');
}
}
// ============ СОБЫТИЯ ============
function initEvents() {
// Кнопки заказа
document.getElementById('orderBtn')?.addEventListener('click', openModal);
document.getElementById('heroOrderBtn')?.addEventListener('click', openModal);
document.getElementById('learnMoreBtn')?.addEventListener('click', () => {
document.getElementById('services').scrollIntoView({ behavior: 'smooth' });
});
// Модальное окно
const modal = document.getElementById('orderModal');
modal?.querySelector('.modal-close')?.addEventListener('click', closeModal);
modal?.addEventListener('click', (e) => {
if (e.target === modal) closeModal();
});
// Формы
document.getElementById('contactForm')?.addEventListener('submit', handleFormSubmit);
document.getElementById('modalForm')?.addEventListener('submit', handleFormSubmit);
// Навигационные ссылки
document.querySelectorAll('.nav-link').forEach(link => {
link.addEventListener('click', () => {
link.classList.add('active');
document.querySelectorAll('.nav-link').forEach(l => {
if (l !== link) l.classList.remove('active');
});
});
});
}
function openModal() {
document.getElementById('orderModal').classList.add('active');
document.body.style.overflow = 'hidden';
}
function closeModal() {
document.getElementById('orderModal').classList.remove('active');
document.body.style.overflow = 'auto';
}
// ============ ВАЛИДАЦИЯ И ОТПРАВКА ФОРМЫ ============
function handleFormSubmit(e) {
e.preventDefault();
const form = e.target;
const formData = new FormData(form);
// Валидация
let isValid = true;
form.querySelectorAll('.form-group').forEach(group => {
const input = group.querySelector('input, textarea, select');
if (!input.value.trim()) {
group.classList.add('error');
group.querySelector('.error-message').textContent = 'Бу майдон тўлдирилиши шарт';
isValid = false;
} else if (input.type === 'email' && !isValidEmail(input.value)) {
group.classList.add('error');
group.querySelector('.error-message').textContent = 'Нотўғри email';
isValid = false;
} else if (input.type === 'tel' && input.value.replace(/\D/g, '').length < 9)
{
group.classList.add('error');
group.querySelector('.error-message').textContent = 'Нотўғри телефон';
isValid = false;
} else {
group.classList.remove('error');
}
});
if (!isValid) return;
// Отправка
sendForm(form);
}
function isValidEmail(email) {
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return re.test(email);
}
async function sendForm(form) {
const formData = new FormData(form);
const data = Object.fromEntries(formData);
try {
// Используя Formspree (бесплатный сервис)
const response = await fetch('https://formspree.io/f/YOUR_FORM_ID', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data)
});
if (response.ok) {
alert('Буюртма қўл тўғри қабул қилинди! Тез арада ҳам сизга қўл киламиз.');
form.reset();
closeModal();
}
} catch (error) {
console.log('Form submitted (demo mode):', data);
alert('Буюртма юборилди!');
form.reset();
closeModal();
}
}
// ============ АНИМАЦИИ ============
function initAnimations() {
// Fade-in при скроллинге
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.animation = 'fadeInUp 0.6s ease forwards';
observer.unobserve(entry.target);
}
});
}, observerOptions);
document.querySelectorAll('.service-card, .feature-item, .testimonial-card, .pricing-card, .faq-item').forEach(el => {
el.style.opacity = '0';
observer.observe(el);
});
}
// ============ СЛАЙДЕРЫ ПЕРЕД/ПОСЛЕ ============
function initBeforeAfterSliders() {
document.querySelectorAll('.before-after-slider').forEach(slider => {
const wrapper = slider.querySelector('.img-wrapper');
const handle = slider.querySelector('.slider-handle');
const after = slider.querySelector('.after-img');
let isActive = false;
const updateSlider = (e) => {
if (!isActive && e.type !== 'touchstart' && e.type !== 'click') return;
const rect = wrapper.getBoundingClientRect();
let x = e.clientX - rect.left;
if (e.touches) {
x = e.touches[0].clientX - rect.left;
}
x = Math.max(0, Math.min(x, rect.width));
const percent = (x / rect.width) * 100;
handle.style.left = percent + '%';
after.style.clipPath = `inset(0 ${100 - percent}% 0 0)`;
};
handle.addEventListener('mousedown', () => isActive = true);
handle.addEventListener('touchstart', () => isActive = true);
document.addEventListener('mouseup', () => isActive = false);
document.addEventListener('touchend', () => isActive = false);
document.addEventListener('mousemove', updateSlider);
document.addEventListener('touchmove', updateSlider);
wrapper.addEventListener('click', updateSlider);
});
}
// ============ FAQ ============
function initFAQ() {
document.querySelectorAll('.faq-question').forEach(button => {
button.addEventListener('click', () => {
const item = button.closest('.faq-item');
const isActive = item.classList.contains('active');
// Закрыть все
document.querySelectorAll('.faq-item').forEach(el => {
el.classList.remove('active');
});
// Открыть текущий
if (!isActive) {
item.classList.add('active');
}
});
});
}
// ============ СКРОЛИНГ НАВИГАЦИИ ============
window.addEventListener('scroll', () => {
const header = document.querySelector('.header');
if (window.scrollY > 100) {
header.style.borderBottomColor = 'rgba(16, 185, 129, 0.3)';
} else {
header.style.borderBottomColor = 'rgba(16, 185, 129, 0.1)';
}
// Активная навигация
document.querySelectorAll('section[id]').forEach(section => {
const top = section.offsetTop - 100;
const height = section.offsetHeight;
if (window.scrollY >= top && window.scrollY < top + height) {
document.querySelectorAll('.nav-link').forEach(link => {
link.classList.remove('active');
if (link.getAttribute('href') === '#' + section.id) {
link.classList.add('active');
}
});
}
});
});
```
---
## 🌍 ФАЙЛ 5: `/uz/config.js` (Переводы)
```javascript
// Все переводы находятся здесь для простоты
const TRANSLATIONS = {
uz: {
// Header
services: "Хизматлар",
gallery: "Галерея",
process: "Жараён",
pricing: "Нарх",
reviews: "Шарх",
faq: "Саволлар",
order: "Буюртма бериш",
// Hero
heroTitle: "Ўзинг эшишни сақлаб қол",
heroSubtitle: "Қадимой видео касседаларни юксак сифатли цифрал файлларга айланвириш",
learnMore: "Кўпроқ масъулот",
// Stats
stat1: "5000+",
stat1Label: "Рахамон хизмат қилинди",
stat2: "15 йил",
stat2Label: "Амалий тажриба",
stat3: "99.8%",
stat3Label: "Қониқарлик даражаси",
},
ru: {
// Header
services: "Услуги",
gallery: "Галерея",
process: "Процесс",
pricing: "Цены",
reviews: "Отзывы",
faq: "Вопросы",
order: "Заказать",
// Hero
heroTitle: "Сохраните ваши воспоминания",
heroSubtitle: "Преобразуем старые видеокассеты в высококачественные цифровые файлы",
learnMore: "Узнать больше",
// Stats
stat1: "5000+",
stat1Label: "Довольных клиентов",
stat2: лет",
stat2Label: "Опыта работы",
stat3: "99.8%",
stat3Label: "Уровень удовлетворения",
},
en: {
// Header
services: "Services",
gallery: "Gallery",
process: "Process",
pricing: "Pricing",
reviews: "Reviews",
faq: "FAQ",
order: "Order Now",
// Hero
heroTitle: "Preserve Your Memories",
heroSubtitle: "Transform old video cassettes into high-quality digital files",
learnMore: "Learn More",
// Stats
stat1: "5000+",
stat1Label: "Happy Customers",
stat2: "15 years",
stat2Label: "Experience",
stat3: "99.8%",
stat3Label: "Satisfaction Rate",
}
};
function t(key) {
return TRANSLATIONS[currentLang]?.[key] || key;
}
```
---
## 📱 ФАЙЛ 6: `/ru/index.html` (Русская версия)
Скопируй узбекскую версию и замени все тексты на русские эквиваленты. Структура идентична!
---
## ✅ КАК РАЗМЕСТИТЬ
1. **Создай структуру папок:**
```
eco-studio/
├── index.html
├── uz/
│ ├── index.html
│ ├── style.css
│ ├── script.js
│ └── config.js
├── ru/
│ ├── index.html
│ ├── style.css (ссылка на /uz/style.css)
│ ├── script.js (ссылка на /uz/script.js)
│ └── config.js
├── en/
│ ├── index.html
│ ├── style.css (ссылка на /uz/style.css)
│ ├── script.js (ссылка на /uz/script.js)
│ └── config.js
└── assets/
├── images/
├── videos/
└── icons/
```
2. **Раствори на Vercel/Netlify:**
- Подключи GitHub репо
- Deploy автоматически происходит
3. **Купи домен:**
- GoDaddy, Namecheap или локальный хостинг
4. **Настрой Formspree:**
- Зарегистрируйся на formspree.io
- Получи ID формы
- Замени в script.js
