Напиши мне, пожалуйста, сайт на HTML, CSS и JS, используя элементы его макета, которые я составил в Figma, а также следуя моим требованиям. Предоставь мне готовый код файлов HTML, CSS и JS. Я ожидаю от тебя не пример, не отправную точку, не помощь с направлением в нужное русло, а **готовый** сайт по всем моим требованиям. Если не сможешь уместить код в одном сообщении, не страшно, просто напиши об этом и я попрошу тебя продолжить его написание в следующем сообщении.

# Элементы макета сайта с Figma

## Вся страница

### Layout

```
/* ПК */
position: relative;
width: 1863px;
height: 920px;
/* Auto layout */
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
padding: 0px;
```

### Style

```
border: 2px solid rgb(0, 0, 0);
background: rgb(247, 249, 247);
```

## Вся страница → Боковая панель

### Layout

```
/* Боковая панель */
position: static;
width: 320px;
height: 918px;
/* Auto layout */
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 20;
padding: 20px;


/* Inside Auto Layout */
flex: none;
order: 0;
flex-grow: 0;
margin: 0px 0px;
```

### Style

```
background: rgb(235, 245, 236);
```

## Вся страница → Боковая панель → Заголовок панели

### Layout

```
/* Заголовок */
position: static;
width: 280px;
height: 81px;
/* Auto layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 10px;


/* Inside Auto Layout */
flex: none;
order: 0;
align-self: stretch;
flex-grow: 0;
margin: 20px 0px;
```

## Вся страница → Боковая панель → Заголовок панели → Текст «Дефлекта»

### Layout

```
/* Дефлекта */
position: static;
width: 260px;
height: 61px;
/* Auto layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 10px;


/* Inside Auto Layout */
flex: none;
order: 0;
flex-grow: 0;
margin: 0px 0px;
```

### Font Layout

```
color: rgb(11, 76, 19);
font-family: Days One;
font-size: 48px;
font-weight: 400;
line-height: 61px;
letter-spacing: 0%;
text-align: left;
```

### Content

```
Дефлекта
```

## Вся страница → Боковая панель → Пункты панели

### Layout

```
/* Пункты панели */
position: static;
width: 280px;
height: 478px;
/* Auto layout */
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 10;
padding: 0px;


/* Inside Auto Layout */
flex: none;
order: 1;
align-self: stretch;
flex-grow: 0;
margin: 20px 0px;
```

## Вся страница → Боковая панель → Пункты панели → Главная

### Layout

```
/* Главная */
position: static;
width: 164px;
height: 51px;
/* Auto layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 10;
padding: 5px 10px 5px 10px;


/* Inside Auto Layout */
flex: none;
order: 0;
flex-grow: 0;
margin: 10px 0px;
```

## Вся страница → Боковая панель → Пункты панели → Обо мне

### Layout

```
/* Обо мне */
position: static;
width: 169px;
height: 51px;
/* Auto layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 10;
padding: 5px 10px 5px 10px;


/* Inside Auto Layout */
flex: none;
order: 1;
flex-grow: 0;
margin: 10px 0px;
```

## Вся страница → Содержание раздела

### Layout

```
/* Страница */
position: static;
width: 1543px;
height: 920px;
/* Auto layout */
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
padding: 0px;


/* Inside Auto Layout */
flex: none;
order: 1;
align-self: stretch;
flex-grow: 1;
margin: 0px 0px;
```

## Вся страница → Содержание раздела → Вверхняя часть

### Layout

```
/* Верх */
position: static;
width: 1543px;
height: 898px;
/* Auto layout */
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 10;
padding: 0px 20px 0px 20px;


/* Inside Auto Layout */
flex: none;
order: 0;
flex-grow: 0;
margin: 0px 0px;
```

## Вся страница → Содержание раздела → Промотка списка к верху

### Layout

```
/* Frame 16 */
position: static;
width: 800px;
height: 51px;
/* Auto layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 10;
padding: 10px 20px 10px 20px;


/* Inside Auto Layout */
flex: none;
order: undefined;
flex-grow: 0;
margin: 0px 0px;
```

### Style

```
border-radius: 20px;

box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
background: rgb(247, 249, 247);
```

## Вся страница → Содержание раздела → Нижняя часть

### Layout

```
/* Низ */
position: static;
width: 1543px;
height: 150px;
/* Auto layout */
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 10;
padding: 20px;


/* Inside Auto Layout */
flex: none;
order: 1;
flex-grow: 1;
margin: 0px 0px;
```

# Шрифт

На всём сайте должен использоваться шрифт Days One из Google Fonts.

## `<link>`

### Embed code in the `<head>` of your html

```
<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=Days+One&display=swap" rel="stylesheet">
```

### Days One: CSS class

```
.days-one-regular { font-family: "Days One", sans-serif; font-weight: 400; font-style: normal; }
```

## `@import`

### Embed code in the `<head>` of your html

```
<style> @import url('https://fonts.googleapis.com/css2?family=Days+One&display=swap'); </style>
```

### Days One: CSS class

```
.days-one-regular { font-family: "Days One", sans-serif; font-weight: 400; font-style: normal; }
```

# Требования

* Наведение курсором на пункты боковой панели должно подсвечивать их;
* Сайт должен динамически подстраиваться под размер окна браузера;
* На сайте должен быть список проектов и поиск в нём с фильтрами (на выбор людям даются теги, которые могут содержать эти проекты и по которым их можно отсеивать) и вариантами сортировки по количеству скачиваний, подписчиков, общей популярности, дате обновления и по алфавиту;
* На боковой панели должен быть пункт настроек, при нажатии на который мы открываем этот раздел и в нём есть возможность сменить язык сайта и выбрать цветовую схему (зелёная светлая, зелёная тёмная, розовая светлая, розовая тёмная). В зависимости от выбора меняются все цвета на сайте, не только в основной части сайта (то есть, боковую панель это тоже касается);
* Любые изменённые настройки должны сохраняться;
* Боковая панель должна быть свёртываемой.