HyperCube/Pages/Desktop.razor

@page "/Desktop"
@attribute [Authorize]

<div class="blocks">
    <div class="first-block">
        <div class="top__block">
            <div class="header-block header-block_first">
                <div class="header-block__text">Календарь событий</div>
                <div class="header-block__span">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
            <div class="slider">
                <div class="slider__item">
                    Тема: Цифровой двойник синтеза метанола <br>
                    Организатор: ООО«ПроК» <br>
                    Дата проведения: с 1 дек. по 30 дек. 2021 года <br>
                    Формат: Цифровой хакатон <br>
                    Статус: Открыта регистрация <br>
                    ID: Dh001<br>
                </div>                
            </div>
            <div class="footer-block">
                <div class="footer-block__left__button">
                    <img src="img/left_button.svg" alt="">
                    <p>Влево</p>
                </div>
                <div class="footer-block__right__button">
                    <p>Вправо</p>
                    <img src="img/right_button.svg" alt="">
                </div>
            </div>
        </div>
        <div class="bottom__block">
            <div class="first-block__inforamtion__box">
                <div class="header-block header-block_first">
                    <div class="header-block__text">Описание мероприятия</div>
                    <div class="header-block__span">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
                <div class="first-block__inforamtion">
                    <p>
                        Цели хакатона <a class="first-block__inforamtion__item" href="">Почитать про формат</a><br>
                        Создание экспертного сообщества по теме разработки математической модели<br>
                    </p>
                    <p>Создание библиотеки знаний <a class="first-block__inforamtion__item" href="">Посмотреть библиотеку</a> по синтезу метанола в нефтехимической промышленности</p>
                    <p>Обучение работы с цифровыми решениями 2DH: <br>-с большими массивами данных и информации<br>-извлечения ценных знаний из неструктурированных данных и информации</p>
                    <a class="first-block__inforamtion__item" href="">Почитать правила</a>
                    <p>
                        Бюджет: 1 200 2dh <br>
                        Рейтинг прохождения: +250mmr
                    </p>
                    <p>Зарегистрировалось 24 пользователя</p>
                </div>
            </div>
            <div class="first-block__inforamtion__button">
                <button class="btn_grey">Подать заявку</button>
                <button class="btn_grey">Сохранить</button>
                <button class="btn_grey">Поделиться</button>
            </div>
        </div>
    </div>
    <div class="second-block">
        <div class="header-block header-block_second">
            <div class="header-block__text">Рабочий стол</div>
            <div class="header-block__span">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
        <div class="second-block__button">
            <button class="btn_white tab-button active" data-content='download'>Загрузка</button>
            <button class="btn_white tab-button" data-content="verify">Верифицировать</button>
            <button class="btn_white tab-button" data-content="other">Другое</button>
        </div>
        <div class="second-block__form visible" data-content='download'>
            <p>Загрузка материала</p>
            <form action="">
                <label class="upload__label">
                    <input type="text" placeholder="Выбрать мероприятие" class="form-control upload__input">
                    <div class="upload__input-descr">+ Добавить автора. Указывать имена авторов через запятую</div>
                </label>
                <label class="upload__label">
                    <input type="text" placeholder="Наименование статьи" class="form-control upload__input">
                    <div class="upload__input-descr">+ Добавить автора. Указывать имена авторов через запятую</div>
                </label>
                <label class="upload__label">
                    <input type="text" placeholder="Год издания" class="form-control upload__input">
                    <div class="upload__input-descr">+ Добавить автора. Указывать имена авторов через запятую</div>
                </label>
                <label class="upload__label">
                    <input type="text" placeholder="Автор" class="form-control upload__input">
                    <div class="upload__input-descr">+ Добавить автора. Указывать имена авторов через запятую</div>
                </label>
                <label class="upload__label">
                    <textarea placeholder="Аннотация" class="form-control upload__textarea"></textarea>
                    <div class="upload__input-descr">+ Добавить автора. Указывать имена авторов через запятую</div>
                </label>
                <label class="upload__label">
                    <input type="text" placeholder="Ссылка на статью" class="form-control upload__input">
                    <div class="upload__input-descr">+ Добавить автора. Указывать имена авторов через запятую</div>
                </label>
                <label class="upload__label">
                    <input type="text" placeholder="Ключевые слова" class="form-control upload__input">
                    <div class="upload__input-descr">+ Добавить автора. Указывать имена авторов через запятую</div>
                </label>
                <div class="second-block__input__file__label__box">
                    <input name="file" type="file" id="input_file" class="second-block__input__file" data-files='download_files'>
                    <label for="input_file" class="second-block__input__file__label" id="file_label">
                        <span>+</span>
                        <p>Прикрепить файл</p>
                    </label>
                    <p id="file_name" class="js-input-file" data-files='download_files'></p>
                </div>
                <div class="second-block__form__button">
                    <button class="btn_grey">Отправить на верификацию</button>
                    <button class="btn_grey">Сохранить</button>
                </div>
            </form>
        </div>
        <div class="second-block__form" data-content="verify">
            <p>Валидация материала</p>
            <form action="">
                <label class="upload__label upload__label_mb">
                    <input type="text" placeholder="Укажите номер материала" class="form-control upload__input">
                    <div class="upload__input-descr">+ Добавить автора. Указывать имена авторов через запятую</div>
                </label>
                <input type="checkbox" class="checkbox__input" name="verify" id="radio">
                <label class="сheckbox__label" for="radio">
                    Материал сформирован не по правилам
                </label>
                <input type="checkbox" class="checkbox__input" name="verify" id="radio2">
                <label class="сheckbox__label" for="radio2">
                    Не являюсь экспертом в этой теме
                </label>
                <input type="checkbox" class="checkbox__input" name="verify" id="radio3">
                <label class="сheckbox__label" for="radio3">
                    Требуется дополнительная экспертиза
                </label>
                <input type="checkbox" class="checkbox__input" name="verify" id="radio4">
                <label class="сheckbox__label" for="radio4">
                    Требуется дополнительная экспертиза
                </label>
                <input type="checkbox" class="checkbox__input" name="verify" id="radio5">
                <label class="сheckbox__label" for="radio5">
                    Отклонить, указать причину
                </label>
                <label class="upload__label">
                    <textarea placeholder="Причина" class="form-control upload__textarea"></textarea>
                    <div class="upload__input-descr">+ Добавить автора. Указывать имена авторов через запятую</div>
                </label>
                <label class="upload__label">
                    <textarea placeholder="Указать через запятую теги" class="form-control upload__textarea"></textarea>
                    <div class="upload__input-descr">+ Добавить автора. Указывать имена авторов через запятую</div>
                </label>
                <div class="second-block__input__file__label__box">
                    <input name="file" type="file" id="input_file_verify" class="second-block__input__file" data-files='verify_files'>
                    <label for="input_file_verify" class="second-block__input__file__label" id="file_label_verify">
                        <span>+</span>
                        <p>Прикрепить файл</p>
                    </label>
                    <p id="file_name_verify" class="js-input-file" data-files='verify_files'></p>
                </div>
                <div class="second-block__form__button">
                    <button class="btn_grey">Валидация</button>
                    <button class="btn_grey">Сохранить</button>
                </div>
            </form>
        </div>
    </div>
    <div class="third-block">
        <div class="header-block header-block_third">
            <div class="header-block__text">Библиотека</div>
            <div class="header-block__span" id="sort_libary">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
        <div class="third-block__dropbox">
            <p class="third-block__dropbox__header__text">Сортировка</p>
            <p class="third-block__dropbox__header__text">Выбрать</p>
            <select name="" id="" class="third-block__dropbox__select">
                <option value="Верифицированные">Верифицированные</option>
                <option value="На верификации">На верификации</option>
                <option value="Отклоненные">Отклоненные</option>
            </select>
            <label for="" class="third-block__dropbox__search">
                Найти по номеру
                <input type="text">
            </label>
            <label for="" class="third-block__dropbox__search">
                Найти по мераприятию
                <input type="text">
            </label>
            <label for="" class="third-block__dropbox__search"></label>
        </div>
        <div class="third-block__info">
            <ul class="third-block__info__ul">
                @foreach (var articleModel in AppData.Articles)
                {
                <li class="third-block__info__li">@(counter++) | <a href="@($"/docedit/{articleModel.Key}")">@articleModel.Value.Name</a></li>
                }
            </ul>
        </div>
    </div>
</div>