download_fin

.vs/ProjectSettings.json

@@ -0,0 +1,3 @@
+{
+  "CurrentProjectSetting": null
+}

.vs/VSWorkspaceState.json

@@ -0,0 +1,7 @@
+{
+  "ExpandedNodes": [
+    ""
+  ],
+  "SelectedNode": "\\index.html",
+  "PreviewInSolutionExplorer": false
+}

css/style.css

@@ -0,0 +1,616 @@
+ /* Общие стили */
+body {
+    margin: 0;
+    padding: 0;
+    font-family: 'Montserrat', sans-serif;
+    color: #333;
+    background-color: #f9f9f9;
+}
+
+.container {
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+.header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    background: white;
+    z-index: 100;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    height: 80px;
+    display: flex;
+    align-items: center;
+}
+
+.header .logo img {
+    height: 58px;
+    width: 354px;
+}
+
+.header .logo {
+      margin-right: auto; 
+}
+
+.app-container {
+    display: flex;
+    min-height: 100vh;
+    padding-top: 70px;
+}
+
+.main-content {
+    display: flex;
+    padding: 20px 0;
+}
+
+ /* меню бок */
+.app-sidebar {
+  width: 280px;
+  background-color: #fff;
+  border-right: 1px solid #eee;
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  padding: 30px 0;
+  box-sizing: border-box;
+}
+
+.sidebar-nav {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.sidebar-top, .sidebar-bottom {
+  list-style: none;
+  padding: 0 20px;
+  margin: 0;
+}
+
+.sidebar-bottom {
+  margin-top: auto;
+  padding-top: 20px;
+  border-top: 1px solid #eee;
+}
+
+.sidebar-nav a {
+  display: block;
+  padding: 12px 15px;
+  color: #666;
+  font-weight: 700;
+  font-size: 18px;
+  text-decoration: none;
+  border-radius: 6px;
+  transition: all 0.2s;
+}
+
+.sidebar-nav a:hover {
+  background: #f5f5f5;
+  color: #000;
+}
+
+.sidebar-nav .active {
+  color: #000;
+  background: #f0f0f0;
+}
+
+.logout-link {
+  color: #FF6464 !important;
+}
+
+
+.main {
+    flex: 1;
+}
+
+.app-main {
+  flex: 1;
+  padding: 40px;
+  background: #f9f9f9;
+}
+
+/* центрирование для страниц входа и регистрации */
+.auth-page {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+
+}
+
+/* общие стили для вх и рег */
+.login-container,
+.register-container {
+    width: 400px;
+    text-align: center;
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    padding: 40px;
+}
+
+.logo {
+    width: 100%; 
+    max-width: 900px; 
+    margin-bottom: 20px;
+}
+
+h2 {
+    margin-top: 0;
+    margin-bottom: 20px;
+    font-size: 45px;
+    color: #423E3E;
+}
+
+/* вход */
+.login-form {
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+    text-align: left;
+}
+
+.login-form label {
+    font-size: 14px;
+    color: #818181;
+}
+
+/* регистрация */
+.register-form {
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+    text-align: left;
+}
+
+.register-form label {
+    font-size: 14px;
+    color: #818181;
+}
+.register-form .row {
+    display: flex;
+    gap: 15px;
+}
+
+.register-form .input-group {
+    flex: 1;
+}
+
+/* поля ввода (рег, вход) */
+.login-form input[type="email"],
+.login-form input[type="password"],
+.register-form input[type="text"],
+.register-form input[type="email"],
+.register-form input[type="tel"],
+.register-form input[type="password"] {
+    width: 100%;
+    padding: 12px 15px;
+    font-size: 14px;
+    border: 1px solid #D1D1D1;
+    border-radius: 6px;
+    margin-top: 5px;
+}
+
+/* кнопки */
+.options {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 13px;
+    margin-top: 10px;
+}
+
+.checkbox {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.forgot,
+.login-link {
+    text-decoration: none;
+    color: #00A3FF;
+}
+
+button,
+.register-button {
+    background: linear-gradient(to right, #00A3FF, #00A3FF);
+    color: #fff;
+    padding: 12px;
+    border: none;
+    border-radius: 6px;
+    font-size: 16px;
+    cursor: pointer;
+    margin-top: 20px;
+    width: 100%;
+}
+
+.signup,
+.register-footer {
+    font-size: 14px;
+    margin-top: 15px;
+    color: #555;
+}
+
+.signup a,
+.register-footer a {
+    color: #00A3FF;
+    text-decoration: none;
+    font-weight: bold;
+}
+
+.register-header .subtitle {
+    font-size: 14px;
+    color: #888;
+    margin-bottom: 30px;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+
+.logo img {
+    max-width: 500px;
+    height: auto;
+}
+
+ /* отзывы */
+.reviews-container {
+  max-width: 1300px;
+  margin: 0 auto;
+}
+
+.reviews-title {
+  font-size: 24px;
+  font-weight: 700;
+  color: #000;
+  margin-bottom: 30px;
+  text-align: left;
+}
+
+.reviews-content {
+  display: flex;
+  gap: 30px;
+  align-items: flex-start;
+}
+
+.main-reviews {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+
+.review-image {
+  width: 100%;
+  max-width: 600px;
+  border-radius: 10px;
+}
+
+.last-reviews {
+  flex: 0 0 500px;
+  position: sticky;
+  top: 20px;
+}
+
+.last-reviews-image {
+  width: 100%;
+  border-radius: 10px;
+
+}
+
+.hero {
+    margin-bottom: 30px;
+    text-align: center;
+}
+
+.hero h1 {
+    font-size: 2.5em;
+    margin-bottom: 10px;
+}
+
+.hero p {
+    line-height: 1.6;
+}
+
+/* преимущества страница "о нас"*/
+.features h2 {
+    font-size: 2em;
+    margin-bottom: 20px;
+}
+
+.features-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 20px;
+}
+
+.feature-item {
+    padding: 20px;
+    border: 1px solid #eee;
+    border-radius: 5px;
+    background-color: #fff;
+    text-align: center;
+}
+
+.feature-item img {
+    max-width: 100px;
+    margin-bottom: 10px;
+    height: auto;
+}
+
+.feature-item h3 {
+    font-size: 1.4em;
+    margin-bottom: 10px;
+}
+
+.feature-item p {
+    line-height: 1.4;
+}
+
+.cta {
+    text-align: center;
+    padding: 30px 0;
+    background-color: #f0f0f0;
+}
+
+/* подвал общий */
+.footer {
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    padding: 10px 0;
+}
+
+/* "Доступные заказы" */
+.available-orders {
+    padding: 30px;
+    font-size: 35px;
+    text-align: center;
+}
+
+.orders-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 20px;
+}
+
+.order-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px;
+    border-bottom: 1px solid #eee;
+    background-color: #fff;
+    border-radius: 10px;
+    margin-bottom: 10px;
+    text-decoration: none;
+    color: inherit;
+}
+
+.order-row:hover {
+  background-color: #f0f0f0;
+}
+
+.order-title {
+    display: flex;
+    align-items: center;
+    font-size: 30px;
+    font-weight: bold;
+    color: #000;
+}
+
+.order-title img {
+    width: 71px;
+    height: 71;
+    margin-right: 10px;
+    border-radius: 5px;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.order-row:last-child {
+    border-bottom: none;
+}
+
+.order-row.header-row {
+    font-weight: bold;
+    background-color: #f0f0f0;
+    border-bottom: 2px solid #ccc;
+}
+
+.order-payment {
+    text-align: right;
+    font-weight: bold;
+    font-size: 25px;
+}
+
+.order-details {
+    padding: 20px;
+    background-color: #fff;
+    border-radius: 10px;
+}
+.right-filters {
+    width: 250px;
+    background: #ffffff;
+    padding: 20px;
+    border-left: 1px solid #e0e0e0;
+    box-shadow: -2px 0 5px rgba(0,0,0,0.05);
+}
+
+.filters-container {
+    position: sticky;
+    top: 20px;
+}
+
+.filters-title {
+    margin-top: 0;
+    margin-bottom: 20px;
+    font-size: 25px;
+    color: #333;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #eee;
+}
+
+.filter-options {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    font-size: 17px;
+}
+
+.filter-option {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 14px;
+    color: #555;
+    cursor: pointer;
+}
+
+.filter-option input[type="checkbox"] {
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+}
+
+.all-option {
+    margin-top: 15px;
+    padding-top: 15px;
+    border-top: 1px solid #eee;
+    font-weight: bold;
+}
+
+/* стили для страницы заказа */
+.order-header {
+    position: relative;
+    margin-bottom: 20px;
+    border-radius: 10px;
+    overflow: hidden;
+}
+
+.order-header-info {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    padding: 20px;
+    color: #fff;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 10px;
+}
+
+.order-header-info h1 {
+    font-size: 2em;
+    margin-bottom: 5px;
+}
+
+.order-header-info p {
+    font-style: italic;
+    font-size: 1.2em;
+    margin-top: 0;
+}
+
+.order-date {
+    font-style: italic;
+    color: #eee;
+}
+
+.order-image {
+    width: 100%;
+    height: 277px;
+    object-fit: cover;
+    border-radius: 10px;
+    display: block;
+}
+
+.order-description {
+    margin-bottom: 20px;
+}
+
+.order-description h2 {
+    font-size: 1.4em;
+    margin-bottom: 10px;
+}
+
+.order-info {
+    margin-bottom: 20px;
+}
+
+.order-info p {
+    font-size: 20px;
+    margin-bottom: 14px;
+}
+
+.accept-order-button {
+    background-color: #007bff;
+    color: #fff;
+    padding: 12px 30px;
+    border: none;
+    border-radius: 10px;
+    font-size: 1.2em;
+    font-family: 'Montserrat';
+    font-weight: 600 ;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    display: inline-block;
+    width: 422px;
+    height: 60px;
+    margin: 20px 0;
+}
+
+.accept-order-button:hover {
+    background-color: #0056b3;
+}
+
+.order-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px;
+    border-bottom: 1px solid #eee;
+    background-color: #fff;
+    border-radius: 10px;
+    margin-bottom: 10px;
+    text-decoration: none;
+    color: inherit;
+}
+
+.order-row:hover {
+    background-color: #f0f0f0;
+}
+
+.order-name {
+    font-size: 1.2em;
+}
+
+.reviews-layout {
+  display: flex;
+  gap: 40px;
+}
+
+.main-reviews {
+  flex: 1;
+}
+
+.recent-reviews {
+  width: 300px;
+  background: #f5f5f5;
+  padding: 20px;
+  border-radius: 8px;
+}
+
+
+

html/about.html

@@ -0,0 +1,312 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>МонтажКлик - О нас</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            font-family: 'Montserrat';
+            color: #333;
+            background-color: #f9f9f9;
+        }
+
+        .container {
+            width: 100%;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 20px;
+        }
+
+        .header {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: white;
+            z-index: 100;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            height: 80px;
+            display: flex;
+            align-items: center;
+        }
+
+        .header .logo img {
+            height: 58px;
+            width: 354px;
+        }
+
+        .app-container {
+            display: flex;
+            min-height: 100vh;
+            padding-top: 80px; 
+        }
+
+        .app-sidebar {
+        width: 280px;
+        background-color: #fff;
+        border-right: 1px solid #eee;
+        position: sticky;
+        top: 0;
+        height: 100vh;
+        padding: 30px 0;
+        box-sizing: border-box;
+        }
+
+        .sidebar-nav {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        }
+
+        .sidebar-top, .sidebar-bottom {
+        list-style: none;
+        padding: 0 20px;
+        margin: 0;
+        }
+
+        .sidebar-bottom {
+        margin-top: auto;
+        padding-top: 20px;
+        border-top: 1px solid #eee;
+        }
+
+        .sidebar-nav a {
+        display: block;
+        padding: 12px 15px;
+        color: #666;
+        font-weight: 700;
+        font-size: 18px;
+        text-decoration: none;
+        border-radius: 6px;
+        transition: all 0.2s;
+        }
+
+        .sidebar-nav a:hover {
+        background: #f5f5f5;
+        color: #000;
+        }
+
+        .sidebar-nav .active {
+        color: #000;
+        background: #f0f0f0;
+        }
+
+        .logout-link {
+        color: #FF6464 !important;
+        }
+
+        .app-main {
+            flex: 1;
+            padding: 40px;
+            background: #f9f9f9;
+        }
+
+        .hero {
+            margin-bottom: 40px;
+            text-align: left;
+        }
+
+        .hero-logo {
+            text-align: left;
+            margin-bottom: 20px;
+        }
+
+        .hero-logo img {
+            height: 100px;
+            width: auto;
+        }
+
+        .hero h1 {
+            font-size: 40px;
+            margin-bottom: 20px;
+            color: #000000;
+            text-align: center;
+        }
+
+        .hero p {
+            font-size: 24px;
+            text-align: left;
+            margin-bottom: 20px;
+        }
+
+        .features {
+            margin-bottom: 40px;
+        }
+
+        .features h2 {
+            font-size: 2em;
+            margin-bottom: 30px;
+            text-align: center;
+            color: #423E3E;
+        }
+
+        .features-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr); /* группа по 2 колонки */
+            gap: 20px;
+        }
+
+        .feature-item {
+            width: 619px;
+            height: 256px;
+            padding: 25px;
+            border: 1px solid #000;
+            border-radius: 8px;
+            background-color: #fff;
+            transition: transform 0.3s, box-shadow 0.3s;
+        }
+
+        .feature-item:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+        }
+
+        .feature-icon-text {
+            display: flex;
+            align-items: center;
+            font-size: 30px;
+            gap: 15px;
+            margin-bottom: 15px;
+        }
+
+        .feature-icon {
+            width: 52px;
+            height: 52px;
+            object-fit: contain;
+        }
+
+        .feature-item h3 {
+            font-size: 1.2em;
+            margin: 0; 
+            color: #000;
+        }
+
+        .feature-item p {
+            line-height: 1.5;
+            color: #000;
+            font-size: 26px;
+            align-items: center;
+            margin: 0;
+            padding-left: 55px;
+        }
+
+        .cta {
+            text-align: center;
+            padding: 40px 0;
+            background-color: #f0f0f0;
+            border-radius: 8px;
+            margin-top: 40px;
+        }
+
+        .cta p {
+            font-size: 1.2em;
+            margin: 10px 0;
+        }
+
+        .footer {
+            background-color: #333;
+            color: #fff;
+            text-align: center;
+            padding: 20px 0;
+            margin-top: auto;
+        }
+
+        .footer p {
+            margin: 0;
+            font-size: 14px;
+        }
+</style>
+</head>
+<body>
+
+    <header class="header">
+        <div class="container">
+            <a href="index.html" class="logo">
+                <img src="../img/logo.png" alt="МонтажКлик">
+            </a>
+        </div>
+    </header>
+
+    <div class="app-container">
+
+        <aside class="app-sidebar">
+            <nav class="sidebar-nav">
+                <ul class="sidebar-top">
+                    <li><a href="orders-developer.html">Доступные заказы</a></li>
+                    <li><a href="my-orders-developer.html">Мои заказы</a></li>
+                    <li><a href="profile-developer.html">Профиль</a></li>
+                    <li><a href="reviews.html">Отзывы</a></li>
+                    <li><a href="about.html" class="active">О нас</a></li>
+                </ul>
+                
+                <ul class="sidebar-bottom">
+                    <li><a href="#">Поддержка</a></li>
+                    <li><a href="#">О ShariX</a></li>
+                    <li><a href="login.html" class="logout-link">Выйти</a></li>
+                </ul>
+            </nav>
+        </aside>
+
+        <main class="app-main">
+            <section class="hero">
+                <div class="hero-logo">
+                    <img src="../img/logo.png" alt="МонтажКлик">
+                </div>
+                <h1>Добро пожаловать в МонтажКлик!</h1>
+                <p>Мы рады приветствовать вас на платформе «МонтажКлик» — вашем надежном помощнике в мире видеомонтажа! Наш сервис создан для того, чтобы соединить талантливых видеомонтажеров с теми, кто ищет качественные и профессиональные услуги по монтажу видео.</p>
+            </section>
+
+            <section class="features">
+                <h2>Почему выбирают МонтажКлик?</h2>
+                <div class="features-grid">
+                    <div class="feature-item">
+                        <div class="feature-icon-text">
+                        <img src="../img/wide-selection.svg" alt="Широкий выбор" class="feature-icon">
+                        <h3>Широкий выбор специалистов</h3>
+                    </div>
+                <p>У нас вы найдете множество профессионалов с различным опытом и стилем работы.</p>
+                </div>
+                <div class="feature-item">
+                    <div class="feature-icon-text">
+                        <img src="../img/easy-search.svg" alt="Удобный поиск" class="feature-icon">
+                        <h3>Удобный поиск</h3>
+                    </div>
+                <p>Легко находите подходящие заказы по вашим критериям — от стиля монтажа до бюджета.</p>
+                </div>
+                <div class="feature-item">
+                    <div class="feature-icon-text">
+                        <img src="../img/easy-interaction.svg" alt="Простота взаимодействия" class="feature-icon">
+                        <h3>Простота взаимодействия</h3>
+                    </div>
+                    <p>Мы обеспечиваем удобные инструменты для общения и сотрудничества между заказчиками и исполнителями.</p>
+                </div>
+                <div class="feature-item">
+                    <div class="feature-icon-text">
+                        <img src="../img/security.svg" alt="Надежность и безопасность" class="feature-icon">
+                        <h3>Надежность и безопасность</h3>
+                    </div>
+                    <p>Мы гарантируем безопасность сделок и защиту интересов обеих сторон.</p>
+                    </div>
+                </div>
+            </section>
+
+            <section class="cta">
+                <p>Присоединяйтесь к "МонтажКлик" и откройте для себя мир возможностей в видеомонтаже.</p>
+                <p>Начните свой путь к созданию великолепных видео уже сегодня!</p>
+            </section>
+        </main>
+    </div>
+
+    <footer class="footer">
+        <div class="container">
+            <p>&copy; 2024 МонтажКлик. Все права защищены.</p>
+        </div>
+    </footer>
+</body>
+</html>

html/active-order-customer.html

@@ -0,0 +1,344 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Монтаж выпуска про Чикаго - МонтажКлик</title>
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            font-family: 'Montserrat', sans-serif;
+            color: #333;
+            background-color: #f9f9f9;
+        }
+
+        .container {
+            width: 100%;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 20px;
+        }
+
+        .header {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: white;
+            z-index: 100;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            height: 80px;
+            display: flex;
+            align-items: center;
+        }
+
+        .header .logo img {
+            height: 58px;
+            width: 354px;
+        }
+
+        .app-container {
+            display: flex;
+            min-height: 100vh;
+            padding-top: 80px; 
+        }
+
+        .app-sidebar {
+        width: 280px;
+        background-color: #fff;
+        border-right: 1px solid #eee;
+        position: sticky;
+        top: 0;
+        height: 100vh;
+        padding: 30px 0;
+        box-sizing: border-box;
+        }
+
+        .sidebar-nav {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        }
+
+        .sidebar-top, .sidebar-bottom {
+        list-style: none;
+        padding: 0 20px;
+        margin: 0;
+        }
+
+        .sidebar-bottom {
+        margin-top: auto;
+        padding-top: 20px;
+        border-top: 1px solid #eee;
+        }
+
+        .sidebar-nav a {
+        display: block;
+        padding: 12px 15px;
+        color: #666;
+        font-weight: 700;
+        font-size: 18px;
+        text-decoration: none;
+        border-radius: 6px;
+        transition: all 0.2s;
+        }
+
+        .sidebar-nav a:hover {
+        background: #f5f5f5;
+        color: #000;
+        }
+
+        .sidebar-nav .active {
+        color: #000;
+        background: #f0f0f0;
+        }
+
+        .logout-link {
+        color: #FF6464 !important;
+        }
+
+        .app-main {
+            flex: 1;
+            padding: 40px;
+            background: #f9f9f9;
+        }
+
+        .order-status-container {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-top: 50px;
+            padding-top: 30px;
+            border-top: 1px solid #eee;
+        }
+
+        .order-status {
+            width: 180px;
+            height: 60px;
+            font-size: 24px;
+            font-weight: bold;
+            color: white;
+            background-color: #FFB84D;
+            text-align: center;
+            padding: 15px 30px;
+            border-radius: 8px;
+            display: inline-flex;
+            align-items: center;
+        }
+
+        .decline-button {
+            width: 422px;
+            height: 60px;
+            padding: 15px 30px;
+            background-color: #00A3FF;
+            color: white;
+            border: none;
+            border-radius: 8px;
+            font-size: 20px;
+            font-weight: bold;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+
+        .decline-button:hover {
+            background-color: #0395e9;
+        }
+
+        .order-section h2 {
+            font-size: 30px;
+            text-align: center;
+            font-weight: 700;
+            color: #000;
+            margin-bottom: 20px;
+            padding-bottom: 10px;
+            border-bottom: 1px solid #eee;
+        }
+
+        .task-list {
+            font-size: 24px;
+            list-style: none;
+            padding: 0;
+        }
+        
+        .task-item {
+            margin-bottom: 12px;
+            display: flex;
+            align-items: center;
+        }
+        
+        .task-item label {
+            font-size:24px;
+            cursor: pointer;
+        }
+        
+        .task-item input[type="checkbox"] {
+            margin-right: 12px;
+            width: 21px;
+            height: 21px;
+            cursor: pointer;
+        }
+        
+        .task-item label b {
+            font-size: 24px;
+        }
+        
+        .task-item[style*="margin-left: 28px"] label {
+            font-size: 24x;
+        }
+
+        .order-header {
+            position: relative;
+            margin-bottom: 20px;
+            border-radius: 10px;
+            overflow: hidden; 
+        }
+
+        .order-header-info {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-start; 
+            align-items: flex-start;
+            padding: 20px;
+            color: #fff; 
+            background: rgba(0, 0, 0, 0.5);
+            border-radius: 10px;
+        }
+
+        .order-header-info h1 {
+            font-size: 2em;
+            margin-bottom: 5px;
+        }
+
+        .order-header-info p {
+            font-style: italic;
+            font-size: 24px;
+            margin-top: 0;
+        }
+
+        .order-date {
+            font-style: italic;
+            color: #eee;
+        }
+
+        .order-image {
+            width: 100%;
+            height: 277px;
+            object-fit: cover;
+            border-radius: 10px;
+            display: block;
+        }
+
+        /* Остальные стили */
+        .order-description {
+            margin-bottom: 24px;
+        }
+
+        .order-description h2 {
+            font-size: 24px;
+            margin-bottom: 10px;
+        }
+
+        .order-info {
+            margin-bottom: 20px;
+        }
+
+        .order-info p {
+            font-size: 24px;
+            margin-bottom: 14px;
+        }
+
+        .footer {
+            margin-top: 60px;
+            text-align: center;
+            color: #666;
+            font-size: 14px;
+            padding: 30px 0;
+            border-top: 1px solid #eee;
+            background-color: #fff;
+        }
+
+        .footer {
+            background-color: #333;
+            color: #fff;
+            text-align: center;
+            padding: 10px 0;
+        }
+</style>
+</head>
+<body>
+    <div class="app-container">
+
+        <header class="header">
+            <div class="container">
+                <a href="#" class="logo">
+                    <img src="../img/logo.png" alt="МонтажКлик" >
+                </a>
+            </div>
+        </header>
+
+        <aside class="app-sidebar">
+            <nav class="sidebar-nav">
+                <ul class="sidebar-top">
+                    
+                    <li><a href="#" class="active">Мои заказы</a></li>
+                    <li><a href="#">Профиль</a></li>
+                    <li><a href="#">Отзывы</a></li>
+                    <li><a href="about.html">О нас</a></li>
+                </ul>
+                
+                <ul class="sidebar-bottom">
+                    <li><a href="#">Поддержка</a></li>
+                    <li><a href="#">O Sharix</a></li>
+                    <li><a href="#" class="logout-link">Выйти</a></li>
+                </ul>
+            </nav>
+        </aside>
+
+        <main class="app-main">
+            <section class="order-details">
+                <div class="order-header">
+                    <img src="../img/chicago.png" alt="Монтаж выпуска про Чикаго" class="order-image">
+                    <div class="order-header-info">
+                        <h1>Заказ от: Ксения</h1>
+                        <p class="order-date">19.09.2024</p>
+                    </div>
+                </div>
+        
+                <div class="order-info">
+                    <p><b>Задача:</b> Смонтировать тревелблог про Чикаго для канала UwuBlog. Подробнее со стилем монтажа можете ознакомиться, посмотрев предыдущие видео на канале.</p>
+                    <p><b>Дополнительные комментарии:</b>  Много анимаций и переходов.</p>
+                    <p><b>Длительность:</b> ~60 минут</p>
+                    <p><b>Референсы:</b></p>
+                    <p><b>Описание:</b> Выстроить сюжет видео и добавить аудиовставки из прикрепленных материалов.</p>
+                    <p><b>Срок выполнения:</b> С 1 ноября по 14 ноября.</p>
+                    <p><b>Оплата:</b> до 50.000₽</p>
+                </div>
+        
+            </section>
+
+        <div class="order-status-container">
+            <span class="order-status">В процессе...</span>
+            <button class="decline-button">Вернуться к заказам</button>
+        </div>
+
+        </main>
+    </div>
+
+    <footer class="footer">
+        <div class="container">
+            <p>&copy; 2024 МонтажКлик</p>
+        </div>
+    </footer>
+    </div>
+</body>
+</html>

html/active-order-developer.html

@@ -0,0 +1,377 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Монтаж выпуска про Чикаго - МонтажКлик</title>
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            font-family: 'Montserrat', sans-serif;
+            color: #333;
+            background-color: #f9f9f9;
+        }
+
+        .container {
+            width: 100%;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 20px;
+        }
+
+        .header {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: white;
+            z-index: 100;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            height: 80px;
+            display: flex;
+            align-items: center;
+        }
+
+        .header .logo img {
+            height: 58px;
+            width: 354px;
+        }
+
+        .app-container {
+            display: flex;
+            min-height: 100vh;
+            padding-top: 80px; 
+        }
+
+        .app-sidebar {
+        width: 280px;
+        background-color: #fff;
+        border-right: 1px solid #eee;
+        position: sticky;
+        top: 0;
+        height: 100vh;
+        padding: 30px 0;
+        box-sizing: border-box;
+        }
+
+        .sidebar-nav {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        }
+
+        .sidebar-top, .sidebar-bottom {
+        list-style: none;
+        padding: 0 20px;
+        margin: 0;
+        }
+
+        .sidebar-bottom {
+        margin-top: auto;
+        padding-top: 20px;
+        border-top: 1px solid #eee;
+        }
+
+        .sidebar-nav a {
+        display: block;
+        padding: 12px 15px;
+        color: #666;
+        font-weight: 700;
+        font-size: 18px;
+        text-decoration: none;
+        border-radius: 6px;
+        transition: all 0.2s;
+        }
+
+        .sidebar-nav a:hover {
+        background: #f5f5f5;
+        color: #000;
+        }
+
+        .sidebar-nav .active {
+        color: #000;
+        background: #f0f0f0;
+        }
+
+        .logout-link {
+        color: #FF6464 !important;
+        }
+
+        .app-main {
+            flex: 1;
+            padding: 40px;
+            background: #f9f9f9;
+        }
+
+        .order-status-container {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-top: 50px;
+            padding-top: 30px;
+            border-top: 1px solid #eee;
+        }
+
+        .order-status {
+            width: 180px;
+            height: 60px;
+            font-size: 24px;
+            font-weight: bold;
+            color: white;
+            background-color: #70E453;
+            text-align: center;
+            padding: 15px 30px;
+            border-radius: 8px;
+            display: inline-flex;
+            align-items: center;
+        }
+
+        .decline-button {
+            width: 422px;
+            height: 60px;
+            padding: 15px 30px;
+            background-color: #FF6464;
+            color: white;
+            border: none;
+            border-radius: 8px;
+            font-size: 20px;
+            font-weight: bold;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+
+        .decline-button:hover {
+            background-color: #E55353;
+        }
+
+        .order-section h2 {
+            font-size: 30px;
+            text-align: center;
+            font-weight: 700;
+            color: #000;
+            margin-bottom: 20px;
+            padding-bottom: 10px;
+            border-bottom: 1px solid #eee;
+        }
+
+        .task-list {
+            font-size: 24px;
+            list-style: none;
+            padding: 0;
+        }
+        
+        .task-item {
+            margin-bottom: 12px;
+            display: flex;
+            align-items: center;
+        }
+        
+        .task-item label {
+            font-size:24px;
+            cursor: pointer;
+        }
+        
+        .task-item input[type="checkbox"] {
+            margin-right: 12px;
+            width: 21px;
+            height: 21px;
+            cursor: pointer;
+        }
+        
+        .task-item label b {
+            font-size: 24px;
+        }
+        
+        .task-item[style*="margin-left: 28px"] label {
+            font-size: 24x;
+        }
+
+        .order-header {
+            position: relative;
+            margin-bottom: 20px;
+            border-radius: 10px;
+            overflow: hidden; 
+        }
+
+        .order-header-info {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-start; 
+            align-items: flex-start;
+            padding: 20px;
+            color: #fff; 
+            background: rgba(0, 0, 0, 0.5);
+            border-radius: 10px;
+        }
+
+        .order-header-info h1 {
+            font-size: 2em;
+            margin-bottom: 5px;
+        }
+
+        .order-header-info p {
+            font-style: italic;
+            font-size: 24px;
+            margin-top: 0;
+        }
+
+        .order-date {
+            font-style: italic;
+            color: #eee;
+        }
+
+        .order-image {
+            width: 100%;
+            height: 277px;
+            object-fit: cover;
+            border-radius: 10px;
+            display: block;
+        }
+
+        /* Остальные стили */
+        .order-description {
+            margin-bottom: 24px;
+        }
+
+        .order-description h2 {
+            font-size: 24px;
+            margin-bottom: 10px;
+        }
+
+        .order-info {
+            margin-bottom: 20px;
+        }
+
+        .order-info p {
+            font-size: 24px;
+            margin-bottom: 14px;
+        }
+
+        .footer {
+            margin-top: 60px;
+            text-align: center;
+            color: #666;
+            font-size: 14px;
+            padding: 30px 0;
+            border-top: 1px solid #eee;
+            background-color: #fff;
+        }
+
+        .footer {
+            background-color: #333;
+            color: #fff;
+            text-align: center;
+            padding: 10px 0;
+        }
+</style>
+</head>
+<body>
+    <div class="app-container">
+
+        <header class="header">
+            <div class="container">
+                <a href="#" class="logo">
+                    <img src="../img/logo.png" alt="МонтажКлик" >
+                </a>
+            </div>
+        </header>
+
+        <aside class="app-sidebar">
+            <nav class="sidebar-nav">
+                <ul class="sidebar-top">
+                    
+                    <li><a href="orders.html">Доступные заказы</a></li>
+                    <li><a href="#"  class="active">Мои заказы</a></li>
+                    <li><a href="#">Отзывы</a></li>
+                    <li><a href="#">Личный кабинет</a></li>
+                    <li><a href="about.html">О нас</a></li>
+                </ul>
+                
+                <ul class="sidebar-bottom">
+                    <li><a href="#">Поддержка</a></li>
+                    <li><a href="#">O Sharix</a></li>
+                    <li><a href="#" class="logout-link">Выйти</a></li>
+                </ul>
+            </nav>
+        </aside>
+
+        <main class="app-main">
+            <section class="order-details">
+                <div class="order-header">
+                    <img src="../img/chicago.png" alt="Монтаж выпуска про Чикаго" class="order-image">
+                    <div class="order-header-info">
+                        <h1>Заказ от: Ксения</h1>
+                        <p class="order-date">19.09.2024</p>
+                    </div>
+                </div>
+        
+                <div class="order-info">
+                    <p><b>Задача:</b> Смонтировать тревелблог про Чикаго для канала UwuBlog. Подробнее со стилем монтажа можете ознакомиться, посмотрев предыдущие видео на канале.</p>
+                    <p><b>Дополнительные комментарии:</b>  Много анимаций и переходов.</p>
+                    <p><b>Длительность:</b> ~60 минут</p>
+                    <p><b>Референсы:</b></p>
+                    <p><b>Описание:</b> Выстроить сюжет видео и добавить аудиовставки из прикрепленных материалов.</p>
+                    <p><b>Срок выполнения:</b> С 1 ноября по 14 ноября.</p>
+                    <p><b>Оплата:</b> до 50.000₽</p>
+                </div>
+        
+            </section>
+            <div class="order-section">
+                    <h2>Прогресс заказа</h2>
+                    <div class="task-list">
+                        <div class="task-item">
+                            <input type="checkbox" id="started">
+                            <label for="started">Начато редактирование</label>
+                        </div>
+                        <div class="task-item">
+                            <label for="tasks"><b>Задачи:</b></label>
+                        </div>
+                        <div class="task-item" style="margin-left: 28px;">
+                            <input type="checkbox" id="subtitles">
+                            <label for="subtitles">Добавление субтитров</label>
+                        </div>
+                        <div class="task-item" style="margin-left: 28px;">
+                            <input type="checkbox" id="color">
+                            <label for="color">Цветокоррекция</label>
+                        </div>
+                        <div class="task-item" style="margin-left: 28px;">
+                            <input type="checkbox" id="music">
+                            <label for="music">Добавление музыки</label>
+                        </div>
+                        <div class="task-item">
+                            <input type="checkbox" id="review">
+                            <label for="review">Отправлено на проверку</label>
+                        </div>
+                        <div class="task-item">
+                            <input type="checkbox" id="completed">
+                            <label for="completed">Заказ завершен</label>
+                        </div>
+                    </div>
+                </div>
+
+        <div class="order-status-container">
+            <span class="order-status">Заказ принят</span>
+            <button class="decline-button">Отказаться от заказа</button>
+        </div>
+
+        </main>
+    </div>
+
+    <footer class="footer">
+        <div class="container">
+            <p>&copy; 2024 МонтажКлик</p>
+        </div>
+    </footer>
+    </div>
+</body>
+</html>

html/add-order-customer.html

@@ -0,0 +1,334 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Добавление нового заказа - МонтажКлик</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            font-family: 'Montserrat';
+            color: #333;
+            background-color: #f9f9f9;
+        }
+
+        .container {
+            width: 100%;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 20px;
+        }
+
+        .header {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: white;
+            z-index: 100;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            height: 80px;
+            display: flex;
+            align-items: center;
+        }
+
+        .header .logo img {
+            height: 58px;
+            width: 354px;
+        }
+
+        .app-container {
+            display: flex;
+            min-height: 100vh;
+            padding-top: 80px;
+        }
+
+        .app-sidebar {
+            width: 280px;
+            background-color: #fff;
+            border-right: 1px solid #eee;
+            position: sticky;
+            top: 80px;
+            height: calc(100vh - 80px);
+            padding: 30px 0;
+            box-sizing: border-box;
+        }
+
+        .sidebar-nav {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+        }
+
+        .sidebar-top, .sidebar-bottom {
+            list-style: none;
+            padding: 0 20px;
+            margin: 0;
+        }
+
+        .sidebar-bottom {
+            margin-top: auto;
+            padding-top: 20px;
+            border-top: 1px solid #eee;
+        }
+
+        .sidebar-nav a {
+            display: block;
+            padding: 12px 15px;
+            color: #666;
+            font-weight: 700;
+            font-size: 18px;
+            text-decoration: none;
+            border-radius: 6px;
+            transition: all 0.2s;
+        }
+
+        .sidebar-nav a:hover {
+            background: #f5f5f5;
+            color: #000;
+        }
+
+        .sidebar-nav .active {
+            color: #000;
+            background: #f0f0f0;
+        }
+
+        .logout-link {
+            color: #FF6464 !important;
+        }
+
+        .app-main {
+            flex-grow: 1;
+            padding: 30px;
+            background-color: #fff;
+        }
+
+        .page-header {
+            font-size: 30px;
+            margin: 0 0 30px 0;
+            padding-bottom: 15px;
+            border-bottom: 1px solid #eee;
+            color: #000;
+            text-align: center
+        }
+
+        .order-form {
+            max-width: 800px;
+            margin: 0 auto;
+        }
+
+        .form-group {
+            margin-bottom: 25px;
+        }
+
+        .form-control {
+            width: 100%;
+            padding: 15px;
+            font-size: 20px;
+            font-weight: bold;
+            border: none;
+            border-radius: 10px;
+            box-sizing: border-box;
+            font-family: 'Montserrat', sans-serif;
+            background-color: #F2F2F2;
+            color: #666;
+        }
+
+        .form-control::placeholder {
+            color: #666666;
+        }
+
+        .form-control:focus {
+            outline: none;
+            background-color: #e8e8e8;
+        }
+
+        textarea.form-control {
+            min-height: 120px;
+            resize: vertical;
+        }
+
+        .tasks-list {
+            margin: 15px 0;
+        }
+
+        .task-item {
+            display: flex;
+            align-items: center;
+            margin-bottom: 10px;
+        }
+
+        .task-item input {
+            flex-grow: 1;
+            padding: 12px 15px;
+            border: none;
+            border-radius: 10px;
+            margin-right: 10px;
+            background-color: #F2F2F2;
+            font-size: 20px;
+            font-weight: bold;
+            color: #666666;
+        }
+
+        .form-group label {
+            font-size: 20px;
+            font-weight: 700;
+            margin-bottom: 12px;
+            display: block;
+            color: #000;
+        }
+
+        .add-task-btn {
+            background: none;
+            border: none;
+            color: #666;
+            font-size: 24px;
+            cursor: pointer;
+            padding: 5px;
+            display: flex;
+            align-items: center;
+            background-color: #F2F2F2;
+            border-radius: 10px;
+            width: 44px;
+            height: 44px;
+            justify-content: center;
+        }
+
+        .add-task-btn:hover {
+            color: #000;
+            background-color: #e8e8e8;
+        }
+
+        .duration-budget {
+            display: flex;
+            gap: 20px;
+            margin-bottom: 25px;
+        }
+
+        .duration-budget > div {
+            flex: 1;
+        }
+
+        .submit-btn {
+            background-color: #00A3FF;
+            color: white;
+            border: none;
+            padding: 15px 25px;
+            font-size: 18px;
+            font-weight: 700;
+            border-radius: 10px;
+            cursor: pointer;
+            transition: background-color 0.2s;
+            display: block;
+            width: 399px;
+            height: 70px;
+            margin: 40px auto 0;
+        }
+
+        .submit-btn:hover {
+            background-color: #3e8e41;
+        }
+
+
+        input[type="date"] {
+            appearance: none;
+            -webkit-appearance: none;
+            padding: 15px;
+            font-family: 'Montserrat', sans-serif;
+            color: #666;
+        }
+
+        input[type="date"]::-webkit-calendar-picker-indicator {
+            opacity: 0.5;
+            cursor: pointer;
+        }
+
+        input[type="date"]::-webkit-calendar-picker-indicator:hover {
+            opacity: 1;
+        }
+    </style>
+</head>
+<body>
+    <div class="app-container">
+
+        <header class="header">
+            <div class="container">
+                <a href="#" class="logo">
+                    <img src="../img/logo.png" alt="МонтажКлик">
+                </a>
+            </div>
+        </header>
+
+        <aside class="app-sidebar">
+            <nav class="sidebar-nav">
+                <ul class="sidebar-top">
+                    <li><a href="my-orders.html" class="active">Мои заказы</a></li>
+                    <li><a href="profile.html">Профиль</a></li>
+                    <li><a href="reviews.html">Отзывы</a></li>
+                    <li><a href="about.html">О нас</a></li>
+                </ul>
+                
+                <ul class="sidebar-bottom">
+                    <li><a href="#">Поддержка</a></li>
+                    <li><a href="#">О ShariX</a></li>
+                    <li><a href="#" class="logout-link">Выйти</a></li>
+                </ul>
+            </nav>
+        </aside>
+
+        <main class="app-main">
+            <div class="container">
+                <h1 class="page-header">Добавление нового заказа</h1>
+                
+                <form class="order-form">
+                    <div class="form-group">
+                        <input type="text" class="form-control" placeholder="Название заказа...">
+                    </div>
+                    
+                    <div class="form-group">
+                        <textarea class="form-control" placeholder="Описание заказа..."></textarea>
+                    </div>
+                    
+                    <div class="form-group">
+                        <label>Добавление задачи:</label>
+                        <div class="tasks-list">
+                            <div class="task-item">
+                                <input type="text" placeholder="Цветокоррекция" class="form-control">
+                            </div>
+                            <button type="button" class="add-task-btn">+</button>
+                        </div>
+                    </div>
+                    
+                    <div class="form-group">
+                        <input type="url" class="form-control" placeholder="Ссылка на референс...">
+                    </div>
+                    
+                    <div class="duration-budget">
+                        <div class="form-group">
+                            <input type="text" class="form-control" placeholder="Длительность">
+                        </div>
+                        
+                        <div class="form-group">
+                            <input type="text" class="form-control" placeholder="Бюджет">
+                        </div>
+                        
+                        <div class="form-group">
+                            <input type="date" class="form-control">
+                        </div>
+                    </div>
+                    
+                    <div class="form-group">
+                        <textarea class="form-control" placeholder="Дополнительные комментарии..."></textarea>
+                    </div>
+                    
+                    <button type="submit" class="submit-btn">Создать заказ</button>
+                </form>
+            </div>
+        </main>
+    </div>
+</body>
+</html>

html/login.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>МонтажКлик - Вход</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="../css/style.css" />
+</head>
+<body class="auth-page">
+  <div class="login-container">
+    <img src="../img/logo.png" class="logo" />
+    <h2>Вход</h2>
+    <form class="login-form">
+      <label for="email">Авторизуйтесь за секунду</label>
+      <input type="email" id="email" placeholder="Email" required />
+      <input type="password" id="password" placeholder="Пароль" required />
+      <div class="options">
+        <label class="checkbox"><input type="checkbox" checked /> Запомнить меня</label>
+        <a href="#" class="forgot">Забыли пароль?</a>
+      </div>
+      <button type="submit">Войти</button>
+    </form>
+    <p class="signup">Нет аккаунта? <a href="#">Создать</a></p>
+  </div>
+</body>
+</html>
+ 

html/my-orders-customer.html

@@ -0,0 +1,303 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet">
+    <title>Мои заказы - МонтажКлик</title>
+
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            font-family: 'Montserrat', sans-serif;
+            color: #333;
+            background-color: #f9f9f9;
+        }
+
+        .container {
+            width: 100%;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 20px;
+        }
+
+        .header {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: white;
+            z-index: 100;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            height: 80px;
+            display: flex;
+            align-items: center;
+        }
+
+        .header .logo img {
+            height: 58px;
+            width: 354px;
+        }
+
+        .header .logo {
+            margin-right: auto;
+        }
+
+        .app-container {
+            display: flex;
+            min-height: 100vh;
+            padding-top: 70px;
+        }
+
+        .app-sidebar {
+            width: 280px;
+            background-color: #fff;
+            border-right: 1px solid #eee;
+            position: sticky;
+            top: 0;
+            height: 100vh;
+            padding: 30px 0;
+            box-sizing: border-box;
+        }
+
+        .sidebar-nav {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+        }
+
+        .sidebar-top, .sidebar-bottom {
+            list-style: none;
+            padding: 0 20px;
+            margin: 0;
+        }
+
+        .sidebar-bottom {
+            margin-top: auto;
+            padding-top: 20px;
+            border-top: 1px solid #eee;
+        }
+
+        .sidebar-nav a {
+            display: block;
+            padding: 12px 15px;
+            color: #666;
+            font-weight: 700;
+            font-size: 18px;
+            text-decoration: none;
+            border-radius: 6px;
+            transition: all 0.2s;
+        }
+
+        .sidebar-nav a:hover {
+            background: #f5f5f5;
+            color: #000;
+        }
+
+        .sidebar-nav .active {
+            color: #000;
+            background: #f0f0f0;
+        }
+
+        .logout-link {
+            color: #FF6464 !important;
+        }
+
+        .app-main {
+            flex-grow: 1;
+            padding: 20px;
+            background-color: #fff;
+        }
+
+        .page-title {
+            font-size: 50px;
+            font-weight: bold;
+            text-align: center;
+            margin-bottom: 20px;
+        }
+
+        .orders-count {
+            font-size: 16px;
+            color: #666;
+            margin-bottom: 30px;
+            display: block;
+            text-align: left;
+        }
+
+
+        .orders-header {
+            display: grid;
+            grid-template-columns: 1fr 305px 184px;
+            margin-bottom: 15px;
+            font-size: 16px;
+            font-weight: normal;
+            padding-bottom: 10px;
+            border-bottom: 1px solid #eee;
+            color: #666;
+            align-items: center;
+        }
+
+        .orders-grid {
+            display: grid;
+            gap: 15px;
+            width: 100%;
+
+        }
+
+        .order-card {
+            background: white;
+            border-radius: 8px;
+            padding: 15px;
+            display: grid;
+            grid-template-columns: 1fr 305px 184px;
+            gap: 15px;
+            align-items: center;
+        }
+        .order-card:last-child {
+    border-bottom: none;
+}
+
+        .order-title {
+            font-weight: bold;
+            font-size: 22px;
+            color: #000;
+        }
+
+        .order-status {
+            width: 305px;
+            height: 54px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            font-weight: bold;
+            border-radius: 10px;
+            border: none;
+            cursor: default;
+        }
+
+        .status-accepted {
+            background-color: #FB7B7B;
+            color: #fff;
+        }
+
+        .status-in-progress {
+            background-color: #FFB84D;
+            color: #fff;
+        }
+
+        .details-button {
+            background-color: #00A3FF;
+            color: white;
+            width: 184px;
+            height: 54px;
+            border-radius: 10px;
+            font-size: 16px;
+            font-weight: bold;
+            cursor: pointer;
+            border: none;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .history-button-container {
+            display: flex;
+            justify-content: flex-end;
+            margin-top: 180px;
+            padding-bottom: 20px;
+        }
+
+        .history-button {
+            background-color: #00A3FF;
+            color: white;
+            width: 250px;
+            height: 54px;
+            border-radius: 10px;
+            font-size: 16px;
+            font-weight: bold;
+            cursor: pointer;
+            border: none;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            text-decoration: none;
+        }
+        .footer {
+            margin-top: 40px;
+            text-align: center;
+            color: #666;
+            font-size: 14px;
+            padding: 20px 0;
+            border-top: 1px solid #eee;
+        }
+    </style>
+</head>
+<body>
+    <header class="header">
+        <div class="container">
+            <a href="index.html" class="logo">
+                <img src="../img/logo.png" alt="МонтажКлик">
+            </a>
+        </div>
+    </header>
+
+    <div class="app-container">
+
+        <aside class="app-sidebar">
+            <nav class="sidebar-nav">
+                <ul class="sidebar-top">
+                    <li><a href="my-orders-developer.html" class="active">Мои заказы</a></li>
+                    <li><a href="profile-developer.html">Профиль</a></li>
+                    <li><a href="reviews.html">Отзывы</a></li>
+                    <li><a href="about.html">О нас</a></li>
+                </ul>
+                
+                <ul class="sidebar-bottom">
+                    <li><a href="#">Поддержка</a></li>
+                    <li><a href="#">О ShariX</a></li>
+                    <li><a href="login.html" class="logout-link">Выйти</a></li>
+                </ul>
+            </nav>
+        </aside>
+
+        <main class="app-main">
+            <div class="container">
+                <h1 class="page-title">Мои заказы</h1>
+                
+                <span class="orders-count">Всего: 2</span>
+                
+                <div class="orders-header">
+                    <div>Название</div>
+                    <div>Прогресс</div>
+                    <div></div>
+                </div>
+                
+                <div class="orders-grid">
+
+                    <div class="order-card">
+                        <div class="order-title">Тревелблог про Чикаго</div>
+                        <div class="order-status status-accepted">Принят</div>
+                        <button class="details-button">Подробнее</button>
+                    </div>
+                    
+
+                    <div class="order-card">
+                        <div class="order-title">Видеоролик "Культурные различия Китая и России"</div>
+                        <div class="order-status status-in-progress">В процессе...</div>
+                        <button class="details-button">Подробнее</button>
+                    </div>
+                
+                </div>
+
+                <div class="history-button-container">
+                    <a href="order-history.html" class="history-button">Добавить заказ</a>
+                </div>
+                
+            </div>
+        </main>
+
+    </div>
+</body>
+</html>

html/my-orders-developer.html

@@ -0,0 +1,278 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet">
+    <title>Мои заказы - МонтажКлик</title>
+
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            font-family: 'Montserrat', sans-serif;
+            color: #333;
+            background-color: #f9f9f9;
+        }
+
+        .container {
+            width: 100%;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 20px;
+        }
+
+        .header {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: white;
+            z-index: 100;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            height: 80px;
+            display: flex;
+            align-items: center;
+        }
+
+        .header .logo img {
+            height: 58px;
+            width: 354px;
+        }
+
+        .header .logo {
+            margin-right: auto;
+        }
+
+
+        .app-container {
+            display: flex;
+            min-height: 100vh;
+            padding-top: 70px;
+        }
+
+        .app-sidebar {
+            width: 280px;
+            background-color: #fff;
+            border-right: 1px solid #eee;
+            position: sticky;
+            top: 0;
+            height: 100vh;
+            padding: 30px 0;
+            box-sizing: border-box;
+        }
+
+        .sidebar-nav {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+        }
+
+        .sidebar-top, .sidebar-bottom {
+            list-style: none;
+            padding: 0 20px;
+            margin: 0;
+        }
+
+        .sidebar-bottom {
+            margin-top: auto;
+            padding-top: 20px;
+            border-top: 1px solid #eee;
+        }
+
+        .sidebar-nav a {
+            display: block;
+            padding: 12px 15px;
+            color: #666;
+            font-weight: 700;
+            font-size: 18px;
+            text-decoration: none;
+            border-radius: 6px;
+            transition: all 0.2s;
+        }
+
+        .sidebar-nav a:hover {
+            background: #f5f5f5;
+            color: #000;
+        }
+
+        .sidebar-nav .active {
+            color: #000;
+            background: #f0f0f0;
+        }
+
+        .logout-link {
+            color: #FF6464 !important;
+        }
+
+        .app-main {
+            flex-grow: 1;
+            padding: 20px;
+            background-color: #fff;
+        }
+
+        .page-title {
+            font-size: 50px;
+            font-weight: bold;
+            text-align: center;
+            margin-bottom: 20px;
+        }
+
+        .orders-count {
+            font-size: 16px;
+            color: #666;
+            margin-bottom: 30px;
+            display: block;
+            text-align: left;
+        }
+
+
+        .orders-header {
+            display: grid;
+            grid-template-columns: 1fr 305px 184px;
+            margin-bottom: 15px;
+            font-size: 16px;
+            font-weight: normal;
+            padding-bottom: 10px;
+            border-bottom: 1px solid #eee;
+            color: #666;
+            align-items: center;
+        }
+
+        .orders-grid {
+            display: grid;
+            gap: 15px;
+            width: 100%;
+
+        }
+
+        .order-card {
+            background: white;
+            border-radius: 8px;
+            padding: 15px;
+            display: grid;
+            grid-template-columns: 1fr 305px 184px;
+            gap: 15px;
+            align-items: center;
+        }
+
+        .order-card:last-child {
+            border-bottom: none;
+        }
+
+        .order-title {
+            font-weight: bold;
+            font-size: 22px;
+            color: #000;
+        }
+
+        .order-status {
+            width: 305px;
+            height: 54px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            font-weight: bold;
+            border-radius: 10px;
+            border: none;
+            cursor: default;
+        }
+
+        .status-accepted {
+            background-color: #FB7B7B;
+            color: #fff;
+        }
+
+        .status-in-progress {
+            background-color: #FFB84D;
+            color: #fff;
+        }
+
+        .details-button {
+            background-color: #00A3FF;
+            color: white;
+            width: 184px;
+            height: 54px;
+            border-radius: 10px;
+            font-size: 16px;
+            font-weight: bold;
+            cursor: pointer;
+            border: none;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .footer {
+            margin-top: 40px;
+            text-align: center;
+            color: #666;
+            font-size: 14px;
+            padding: 20px 0;
+            border-top: 1px solid #eee;
+        }
+    </style>
+</head>
+<body>
+    <header class="header">
+        <div class="container">
+            <a href="index.html" class="logo">
+                <img src="../img/logo.png" alt="МонтажКлик">
+            </a>
+        </div>
+    </header>
+
+    <div class="app-container">
+
+        <aside class="app-sidebar">
+            <nav class="sidebar-nav">
+                <ul class="sidebar-top">
+                    <li><a href="orders-developer.html">Доступные заказы</a></li>
+                    <li><a href="my-orders-developer.html" class="active">Мои заказы</a></li>
+                    <li><a href="profile-developer.html">Профиль</a></li>
+                    <li><a href="reviews.html">Отзывы</a></li>
+                    <li><a href="about.html">О нас</a></li>
+                </ul>
+                
+                <ul class="sidebar-bottom">
+                    <li><a href="#">Поддержка</a></li>
+                    <li><a href="#">О ShariX</a></li>
+                    <li><a href="login.html" class="logout-link">Выйти</a></li>
+                </ul>
+            </nav>
+        </aside>
+
+        <main class="app-main">
+            <div class="container">
+                <h1 class="page-title">Мои заказы</h1>
+                
+                <span class="orders-count">Всего: 2</span>
+                
+                <div class="orders-header">
+                    <div>Название</div>
+                    <div>Прогресс</div>
+                    <div></div>
+                </div>
+                
+                <div class="orders-grid">
+
+                    <div class="order-card">
+                        <div class="order-title">Тревелблог про Чикаго</div>
+                        <div class="order-status status-accepted">Принят</div>
+                        <button class="details-button">Подробнее</button>
+                    </div>
+                    
+
+                    <div class="order-card">
+                        <div class="order-title">Видеоролик "Культурные различия Китая и России"</div>
+                        <div class="order-status status-in-progress">В процессе...</div>
+                        <button class="details-button">Подробнее</button>
+                    </div>
+                </div>
+
+            </div>
+        </main>
+    </div>
+</body>
+</html>

html/order-chicago-developer.html

@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Монтаж выпуска про Чикаго - МонтажКлик</title>
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="../css/style.css">
+</head>
+<body>
+    <div class="app-container">
+
+        <header class="header">
+            <div class="container">
+                <a href="#" class="logo">
+                    <img src="../img/logo.png" alt="МонтажКлик" >
+                </a>
+            </div>
+        </header>
+
+        <aside class="app-sidebar">
+            <nav class="sidebar-nav">
+                <ul class="sidebar-top">
+                    
+                    <li><a href="orders.html" class="active">Доступные заказы</a></li>
+                    <li><a href="#">Мои заказы</a></li>
+                    <li><a href="#">Отзывы</a></li>
+                    <li><a href="#">Личный кабинет</a></li>
+                    <li><a href="about.html">О нас</a></li>
+                </ul>
+                
+                <ul class="sidebar-bottom">
+                    <li><a href="#">Поддержка</a></li>
+                    <li><a href="#">O Sharix</a></li>
+                    <li><a href="#" class="logout-link">Выйти</a></li>
+                </ul>
+            </nav>
+        </aside>
+
+        <main class="app-main">
+            <section class="order-details">
+                <div class="order-header">
+                    <img src="../img/chicago.png" alt="Монтаж выпуска про Чикаго" class="order-image">
+                    <div class="order-header-info">
+                        <h1>Заказ от: Ксения</h1>
+                        <p class="order-date">19.09.2024</p>
+                    </div>
+                </div>
+        
+                <div class="order-info">
+                    <p><b>Задача:</b> Смонтировать тревелблог про Чикаго для канала UwuBlog. Подробнее со стилем монтажа можете ознакомиться, посмотрев предыдущие видео на канале.</p>
+                    <p><b>Дополнительные комментарии:</b>  Много анимаций и переходов.</p>
+                    <p><b>Длительность:</b> ~60 минут</p>
+                    <p><b>Референсы:</b></p>
+                    <p><b>Описание:</b> Выстроить сюжет видео и добавить аудиовставки из прикрепленных материалов.</p>
+                    <p><b>Срок выполнения:</b> С 1 ноября по 14 ноября.</p>
+                    <p><b>Оплата:</b> до 50.000₽</p>
+                </div>
+        
+                <button class="accept-order-button">Принять заказ</button>
+            </section>
+        </main>
+    </div>
+
+    <footer class="footer">
+        <div class="container">
+            <p>&copy; 2024 МонтажКлик</p>
+        </div>
+    </footer>
+    </div>
+</body>
+</html>

html/orders-developer.html

@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>МонтажКлик - Профессиональный монтаж видео</title>
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="../css/style.css">
+</head>
+<body>
+
+    <header class="header">
+        <div class="container">
+            <a href="index.html" class="logo">
+                <img src="../img/logo.png" alt="МонтажКлик">
+            </a>
+        </div>
+    </header>
+
+    <div class="app-container">
+
+        <aside class="app-sidebar">
+            <nav class="sidebar-nav">
+                <ul class="sidebar-top">
+                    <li><a href="orders-developer.html"  class="active">Доступные заказы</a></li>
+                    <li><a href="my-orders-developer.html">Мои заказы</a></li>
+                    <li><a href="profile-developer.html">Профиль</a></li>
+                    <li><a href="reviews.html">Отзывы</a></li>
+                    <li><a href="about.html">О нас</a></li>
+                </ul>
+                
+                <ul class="sidebar-bottom">
+                    <li><a href="#">Поддержка</a></li>
+                    <li><a href="#">О ShariX</a></li>
+                    <li><a href="login.html" class="logout-link">Выйти</a></li>
+                </ul>
+            </nav>
+        </aside>
+
+        <main class="main">
+            <section class="available-orders">
+                <h1>Доступные заказы</h1>
+                <div class="orders-table">
+                    <div class="order-row header-row">
+                        <div class="order-title">Название</div>
+                        <div class="order-payment">Оплата</div>
+                    </div>
+                
+                    <a href="order-chicago.html" class="order-row">
+                        <div class="order-title">
+                            <img src="../img/youtube.svg" alt="YouTube">
+                            Монтаж выпуска про Чикаго
+                        </div>
+                        <div class="order-payment">
+                            до 50.000₽
+                            <br>
+                            Сергей Б.
+                        </div>
+                    </a>
+                
+                    <a href="order-tiktok.html" class="order-row">
+                        <div class="order-title">
+                            <img src="../img/tiktok.svg" alt="TikTok">
+                            Монтаж короткого клипа
+                        </div>
+                        <div class="order-payment">
+                            до 10.000₽
+                            <br>
+                            Максим Ж.
+                        </div>
+                    </a>
+                
+                    <a href="order-vk.html" class="order-row">
+                        <div class="order-title">
+                            <img src="../img/vk.svg" alt="VK">
+                            Монтаж шоу про танцы
+                        </div>
+                        <div class="order-payment">
+                            до 70.000₽
+                            <br>
+                            Мария И.
+                        </div>
+                    </a>
+                </div>
+            </section>
+        </main>
+
+        <aside class="right-filters">
+            <div class="filters-container">
+                <h3 class="filters-title">Фильтры</h3>
+                <div class="filter-options">
+                    <label class="filter-option">
+                        <input type="checkbox"> Короткие видео
+                    </label>
+                    <label class="filter-option">
+                        <input type="checkbox"> Длинные видео
+                    </label>
+                    <label class="filter-option">
+                        <input type="checkbox"> Сериалы
+                    </label>
+                    <label class="filter-option">
+                        <input type="checkbox"> Фильмы
+                    </label>
+                    <label class="filter-option">
+                        <input type="checkbox"> Нарезки
+                    </label>
+                    <label class="filter-option">
+                        <input type="checkbox"> Шоу
+                    </label>
+                    <label class="filter-option all-option">
+                        <input type="checkbox" checked> Все
+                    </label>
+                </div>
+            </div>
+        </aside>
+    </div>
+
+    <footer class="footer">
+        <div class="container">
+            <p>&copy; 2024 МонтажКлик</p>
+        </div>
+    </footer>
+
+</body>
+</html>

html/profile-customer.html

@@ -0,0 +1,299 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Профиль - МонтажКлик</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            font-family: 'Montserrat', sans-serif;
+            color: #333;
+            background-color: #f9f9f9;
+        }
+
+        .container {
+            width: 100%;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 20px;
+        }
+
+        /* Хедер */
+        .header {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: white;
+            z-index: 100;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            height: 80px;
+            display: flex;
+            align-items: center;
+        }
+
+        .header .logo img {
+            height: 58px;
+            width: 354px;
+        }
+
+        /* Основной контейнер */
+        .app-container {
+            display: flex;
+            min-height: 100vh;
+            padding-top: 80px;
+        }
+
+        /* Боковая панель */
+        .app-sidebar {
+            width: 280px;
+            background-color: #fff;
+            border-right: 1px solid #eee;
+            position: sticky;
+            top: 80px;
+            height: calc(100vh - 80px);
+            padding: 30px 0;
+            box-sizing: border-box;
+        }
+
+        .sidebar-nav {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+        }
+
+        .sidebar-top, .sidebar-bottom {
+            list-style: none;
+            padding: 0 20px;
+            margin: 0;
+        }
+
+        .sidebar-bottom {
+            margin-top: auto;
+            padding-top: 20px;
+            border-top: 1px solid #eee;
+        }
+
+        .sidebar-nav a {
+            display: block;
+            padding: 12px 15px;
+            color: #666;
+            font-weight: 700;
+            font-size: 18px;
+            text-decoration: none;
+            border-radius: 6px;
+            transition: all 0.2s;
+        }
+
+        .sidebar-nav a:hover {
+            background: #f5f5f5;
+            color: #000;
+        }
+
+        .sidebar-nav .active {
+            color: #000;
+            background: #f0f0f0;
+        }
+
+        .logout-link {
+            color: #FF6464 !important;
+        }
+
+        /* Основное содержимое */
+        .app-main {
+            flex-grow: 1;
+            padding: 20px;
+            background-color: #fff;
+        }
+
+        .profile-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 30px;
+        }
+
+        .profile-header h1 {
+            font-size: 28px;
+            margin: 0;
+        }
+
+        .profile-status {
+            background-color: #4CAF50;
+            color: white;
+            padding: 5px 10px;
+            border-radius: 5px;
+            font-size: 14px;
+            font-weight: bold;
+        }
+
+        .profile-section {
+            margin-bottom: 30px;
+        }
+
+        .profile-section h2 {
+            font-size: 20px;
+            margin-bottom: 15px;
+            color: #333;
+            border-bottom: 1px solid #eee;
+            padding-bottom: 10px;
+        }
+
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-bottom: 20px;
+        }
+
+        table, th, td {
+            border: 1px solid #ddd;
+        }
+
+        th, td {
+            padding: 12px;
+            text-align: left;
+        }
+
+        th {
+            background-color: #f5f5f5;
+        }
+
+        .profile-info {
+            background-color: #f9f9f9;
+            padding: 20px;
+            border-radius: 8px;
+            margin-bottom: 20px;
+            display: flex;
+            flex-wrap: wrap;
+            gap: 20px;
+        }
+
+        .profile-info p {
+            margin: 0;
+            font-size: 20px;
+        }
+
+        .profile-info strong {
+            font-weight: 700;
+        }
+
+        .stats-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 15px;
+            margin-bottom: 20px;
+        }
+
+        .stat-item {
+            background-color: #f9f9f9;
+            padding: 15px;
+            border-radius: 5px;
+        }
+
+        .stat-item strong {
+            display: block;
+            font-size: 18px;
+            margin-bottom: 5px;
+        }
+
+        .skills-list {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+        }
+
+        .skill-tag {
+            background-color: #e0e0e0;
+            padding: 8px 15px;
+            border-radius: 20px;
+            font-size: 18px;
+            font-weight: 500;
+        }
+        
+        .profile-content {
+            display: flex;
+            gap: 30px;
+        }
+        
+        .profile-details {
+            flex: 1;
+        }
+        
+        .profile-photo {
+            width: 320px;
+            height: 320px;
+            border-radius: 8px;
+            object-fit: cover;
+        }
+    </style>
+</head>
+<body>
+    <div class="app-container">
+
+        <header class="header">
+            <div class="container">
+                <a href="#" class="logo">
+                    <img src="../img/logo.png" alt="МонтажКлик">
+                </a>
+            </div>
+        </header>
+
+        <aside class="app-sidebar">
+            <nav class="sidebar-nav">
+                <ul class="sidebar-top">
+                    <li><a href="my-orders-customer.html">Мои заказы</a></li>
+                    <li><a href="profile-customer.html" class="active">Профиль</a></li>
+                    <li><a href="reviews.html">Отзывы</a></li>
+                    <li><a href="about.html">О нас</a></li>
+                </ul>
+                
+                <ul class="sidebar-bottom">
+                    <li><a href="#">Поддержка</a></li>
+                    <li><a href="#">О ShariX</a></li>
+                    <li><a href="#" class="logout-link">Выйти</a></li>
+                </ul>
+            </nav>
+        </aside>
+
+        <main class="app-main">
+            <div class="container">
+
+                <div class="profile-content">
+                    <div class="profile-details">
+
+                        <div class="profile-section">
+                            <div class="profile-info">
+                                <p><strong>Имя пользователя:</strong> Иван</p>
+                            </div>
+                        </div>
+
+                        <div class="profile-section">
+                            <h2>Номер телефона</h2>
+                            <div class="stat-item" style="font-size: 24px;">122 - 332 - 322</div>
+                            
+                            <h2>Почта</h2>
+                            <div class="stat-item" style="font-size: 24px;"> ivanivan@ivan.ru </div>
+                            
+                            <h2>Активные заказы</h2>
+                            <div class="stat-item" style="font-size: 24px;">2</div>
+                            
+                            <h2>Дата регистрации</h2>
+                            <div class="stat-item" style="font-size: 24px;">01.01.2025</div>
+                        </div>
+                    </div>
+
+                    <img src="../img/profile.png" alt="Фото профиля" class="profile-photo">
+                </div>
+            </div>
+        </main>
+    </div>
+</body>
+</html>

html/profile-developer.html

@@ -0,0 +1,325 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Профиль - МонтажКлик</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            font-family: 'Montserrat', sans-serif;
+            color: #333;
+            background-color: #f9f9f9;
+        }
+
+        .container {
+            width: 100%;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 20px;
+        }
+
+        /* Хедер */
+        .header {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: white;
+            z-index: 100;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            height: 80px;
+            display: flex;
+            align-items: center;
+        }
+
+        .header .logo img {
+            height: 58px;
+            width: 354px;
+        }
+
+        /* Основной контейнер */
+        .app-container {
+            display: flex;
+            min-height: 100vh;
+            padding-top: 80px;
+        }
+
+        /* Боковая панель */
+        .app-sidebar {
+            width: 280px;
+            background-color: #fff;
+            border-right: 1px solid #eee;
+            position: sticky;
+            top: 80px;
+            height: calc(100vh - 80px);
+            padding: 30px 0;
+            box-sizing: border-box;
+        }
+
+        .sidebar-nav {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+        }
+
+        .sidebar-top, .sidebar-bottom {
+            list-style: none;
+            padding: 0 20px;
+            margin: 0;
+        }
+
+        .sidebar-bottom {
+            margin-top: auto;
+            padding-top: 20px;
+            border-top: 1px solid #eee;
+        }
+
+        .sidebar-nav a {
+            display: block;
+            padding: 12px 15px;
+            color: #666;
+            font-weight: 700;
+            font-size: 18px;
+            text-decoration: none;
+            border-radius: 6px;
+            transition: all 0.2s;
+        }
+
+        .sidebar-nav a:hover {
+            background: #f5f5f5;
+            color: #000;
+        }
+
+        .sidebar-nav .active {
+            color: #000;
+            background: #f0f0f0;
+        }
+
+        .logout-link {
+            color: #FF6464 !important;
+        }
+
+        /* Основное содержимое */
+        .app-main {
+            flex-grow: 1;
+            padding: 20px;
+            background-color: #fff;
+        }
+
+        .profile-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 30px;
+        }
+
+        .profile-header h1 {
+            font-size: 28px;
+            margin: 0;
+        }
+
+        .profile-status {
+            background-color: #4CAF50;
+            color: white;
+            padding: 5px 10px;
+            border-radius: 5px;
+            font-size: 14px;
+            font-weight: bold;
+        }
+
+        .profile-section {
+            margin-bottom: 30px;
+        }
+
+        .profile-section h2 {
+            font-size: 20px;
+            margin-bottom: 15px;
+            color: #333;
+            border-bottom: 1px solid #eee;
+            padding-bottom: 10px;
+        }
+
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-bottom: 20px;
+        }
+
+        table, th, td {
+            border: 1px solid #ddd;
+        }
+
+        th, td {
+            padding: 12px;
+            text-align: left;
+        }
+
+        th {
+            background-color: #f5f5f5;
+        }
+
+        .profile-info {
+            background-color: #f9f9f9;
+            padding: 20px;
+            border-radius: 8px;
+            margin-bottom: 20px;
+            display: flex;
+            flex-wrap: wrap;
+            gap: 20px;
+        }
+
+        .profile-info p {
+            margin: 0;
+            font-size: 20px;
+        }
+
+        .profile-info strong {
+            font-weight: 700;
+        }
+
+        .stats-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 15px;
+            margin-bottom: 20px;
+        }
+
+        .stat-item {
+            background-color: #f9f9f9;
+            padding: 15px;
+            border-radius: 5px;
+        }
+
+        .stat-item strong {
+            display: block;
+            font-size: 18px;
+            margin-bottom: 5px;
+        }
+
+        .skills-list {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+        }
+
+        .skill-tag {
+            background-color: #e0e0e0;
+            padding: 8px 15px;
+            border-radius: 20px;
+            font-size: 18px;
+            font-weight: 500;
+        }
+        
+        .profile-content {
+            display: flex;
+            gap: 30px;
+        }
+        
+        .profile-details {
+            flex: 1;
+        }
+        
+        .profile-photo {
+            width: 320px;
+            height: 320px;
+            border-radius: 8px;
+            object-fit: cover;
+        }
+    </style>
+</head>
+<body>
+    <div class="app-container">
+
+        <header class="header">
+            <div class="container">
+                <a href="#" class="logo">
+                    <img src="../img/logo.png" alt="МонтажКлик">
+                </a>
+            </div>
+        </header>
+
+        <aside class="app-sidebar">
+            <nav class="sidebar-nav">
+                <ul class="sidebar-top">
+                    <li><a href="orders-developer.html">Доступные заказы</a></li>
+                    <li><a href="my-orders-developer.html">Мои заказы</a></li>
+                    <li><a href="profile.html" class="active">Профиль</a></li>
+                    <li><a href="reviews.html">Отзывы</a></li>
+                    <li><a href="about.html">О нас</a></li>
+                </ul>
+                
+                <ul class="sidebar-bottom">
+                    <li><a href="#">Поддержка</a></li>
+                    <li><a href="#">О ShariX</a></li>
+                    <li><a href="#" class="logout-link">Выйти</a></li>
+                </ul>
+            </nav>
+        </aside>
+
+        <main class="app-main">
+            <div class="container">
+
+                <div class="profile-content">
+                    <div class="profile-details">
+
+                        <div class="profile-section">
+                            <div class="profile-info">
+                                <p><strong>Имя пользователя:</strong> Max Uwu</p>
+                                <p><strong>Почта:</strong> imu@gmail.com</p>
+                                <p><strong>Телефон:</strong> 123-456-800</p>
+                                <p><strong>Адрес:</strong> Российская Федерация, г. Москва</p>
+                            </div>
+                        </div>
+
+
+                        <div class="profile-section">
+                            <table>
+                                <tr>
+                                    <th>Образование</th>
+                                    <th>Дата регистрации на площадке</th>
+                                </tr>
+                                <tr>
+                                    <td>MTV, Журналист</td>
+                                    <td>Ноябрь 21, 2024</td>
+                                </tr>
+                            </table>
+                        </div>
+
+                        <div class="profile-section">
+                            <h2>Готовых проектов</h2>
+                            <div class="stat-item" style="font-size: 24px;">12</div>
+                            
+                            <h2>Средняя цена за час работы</h2>
+                            <div class="stat-item" style="font-size: 24px;">5500 ₽</div>
+                            
+                            <h2>Сейчас работаю над</h2>
+                            <div class="stat-item" style="font-size: 24px;">10 проектами</div>
+                            
+                            <h2>Коммуникация</h2>
+                            <div class="stat-item" style="font-size: 24px;">Могу работать в команде</div>
+                        </div>
+
+                        <div class="profile-section">
+                            <h2>Мой стек</h2>
+                            <ul class="skills-list">
+                                <li class="skill-tag">Adobe Premier</li>
+                                <li class="skill-tag">Adobe Photoshop</li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <img src="../img/profile.png" alt="Фото профиля" class="profile-photo">
+                </div>
+            </div>
+        </main>
+    </div>
+</body>
+</html>

html/registration.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>МонтажКлик - Регистрация</title>
+    <link rel="stylesheet" href="../css/style.css">
+      <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
+</head>
+<body class="auth-page">
+    <div class="register-container">
+        <div class="register-header">
+            <img src="../img/logo.png" class="logo" />
+            <h2>Регистрация</h2>
+        </div>
+
+        <form class="register-form">
+            <label for="name-fields">Авторизуйтесь за секунду</label>
+            <div class="name-fields">
+                <div class="input-group">
+                    <input type="text" id="name" placeholder="Имя" required>
+                </div>
+    
+                <div class="input-group">
+                    <input type="text" id="surname" placeholder="Фамилия" required>
+                </div>
+            </div>
+
+            <div class="contact-fields">
+                <div class="input-group">
+                    <input type="tel" id="phone" placeholder="Номер телефона" required>
+                </div>
+                <div class="input-group">
+                    <input type="email" id="email" placeholder="Email" required>
+                </div>
+            </div>
+
+            <div class="pass-rep">
+                <div class="input-group single-field">
+                    <input type="password" id="password" placeholder="Пароль" required>
+                </div>
+                <div class="input-group single-field">
+                    <input type="password" id="password" placeholder="Повторите пароль" required>
+                </div>
+            </div>
+
+            <button type="submit" class="register-button">Создать аккаунт</button>
+        </form>
+
+        <div class="register-footer">
+            <p>Есть аккаунт? <a href="#" class="login-link">Войти</a></p>
+        </div>
+    </div>
+</body>
+</html>

html/reviews.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>МонтажКлик - Отзывы</title>
+  <link rel="stylesheet" href="../css/style.css">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
+    
+</head>
+<body>
+
+  <header class="header">
+    <div class="container">
+      <a href="#" class="logo">
+        <img src="../img/logo.png" alt="МонтажКлик">
+      </a>
+    </div>
+  </header>
+
+  <div class="app-container">
+
+    <aside class="app-sidebar">
+      <nav class="sidebar-nav">
+        <ul class="sidebar-top">
+          <li><a href="#">Доступные заказы</a></li>
+          <li><a href="#">Мои заказы</a></li>
+          <li><a href="#">Профиль</a></li>
+          <li><a href="#" class="active">Отзывы</a></li>
+          <li><a href="#">О нас</a></li>
+        </ul>
+        
+        <ul class="sidebar-bottom">
+          <li><a href="#">Поддержка</a></li>
+          <li><a href="#">О ShariX</a></li>
+          <li><a href="#" class="logout-link">Выйти</a></li>
+        </ul>
+      </nav>
+    </aside>
+
+    <main class="app-main">
+      <div class="reviews-container">
+        <h1 class="reviews-title">— отзывы популярных брендов</h1>
+    
+        <div class="reviews-content">
+          <div class="main-reviews">
+            <img src="../img/webflow-review.png" alt="Отзыв Webflow" class="review-image">
+            <img src="../img/zapier-review.png" alt="Отзыв Zapier" class="review-image">
+          </div>
+          
+          <div class="last-reviews">
+            <img src="../img/last-reviews.png" alt="Последние отзывы" class="last-reviews-image">
+          </div>
+        </div>
+      </div>
+    </main>
+  </div>
+</body>
+</html>