Skip to content
GitLab
Commit e859f5f0 authored by Антонов Егор Алексеевич's avatar Антонов Егор Алексеевич
Browse files

Страница профиля пользователя приведена к общему стилю.

parent 0369b6a3
develop profile revert-7060de16
2 merge requests!18Страница профиля пользователя приведена к общему стилю сайта,!16Profile
Hide whitespace changes
Inline Side-by-side
Showing
with 219 additions and 27 deletions
+219 -27
movere_local/mainapp/templates/mainapp/profile.html
+ 219
− 27
View file @ e859f5f0
...@@ -5,49 +5,243 @@ ...@@ -5,49 +5,243 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movere | Профиль</title> <title>Movere | Профиль</title>
<link rel="icon" type="image/x-icon" href="{% static 'assets/icon.ico' %}" /> <link rel="icon" type="image/x-icon" href="{% static 'assets/logo_hse.ico' %}" />
<link rel="stylesheet" href="{% static 'css/style.css' %}"> {# <link rel="stylesheet" href="{% static 'css/style.css' %}"> #}
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Krona+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@200..1000&display=swap');
body {
font-family: "Krona One", serif;
margin: 0;
font-weight: 400;
font-style: normal;
background-color: #121212;
color: #FFFFFF;
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
background-color: #121212; /* Цвет в тон страницы */
padding: 30px 20px;
/* position: fixed; */
top: 0;
/* z-index: 10; */
/* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); */
}
.navbar .logo {
display: flex; /* Располагает элементы (логотип и текст) в одну строку */
align-items: center; /* Вертикальное выравнивание элементов по центру */
margin-left: 100px;
margin-top: 20px;
/* margin-left: 30px; */
}
.navbar .logo img {
height: 60px; /* Размер логотипа */
margin-right: 15px; /* Отступ между логотипом и текстом */
}
.navbar .logo span {
font-size: 20px; /* Размер текста */
font-weight: bold;
color: #FFFFFF; /* Цвет текста */
white-space: nowrap; /* Запрещает перенос текста на новую строку */
}
.navbar .profile-btn {
background-color: rgb(45, 42, 42);/* Прозрачный фон */
color: #FFFFFF;
border: 1px solid #ffffff00; /* Белая рамка */
padding: 15px 30px; /* Увеличенный внутренний отступ */
font-family: "Mulish";
/* font-weight: bold; */
font-size: 16px; /* Увеличенный размер шрифта */
border-radius: 20px; /* Скругленные углы */
cursor: pointer;
transition: transform 0.3s, background-color 0.3s, color 0.3s;
margin-right: 10%; /*Отступ справа */
/* margin-left: 10%; */
}
.navbar .profile-btn:hover {
background-color: rgb(58, 54, 54); /* Полупрозрачный белый при наведении */
transform: scale(1.1); /* Увеличение кнопки */
}
.navbar .storage_home_button {
background-color: rgb(45, 42, 42);/* Прозрачный фон */
color: #FFFFFF;
border: 1px solid #ffffff00; /* Белая рамка */
padding: 15px 30px; /* Увеличенный внутренний отступ */
font-family: "Mulish", sans-serif;
/* font-weight: bold; */
font-size: 16px; /* Увеличенный размер шрифта */
border-radius: 20px; /* Скругленные углы */
cursor: pointer;
transition: transform 0.3s, background-color 0.3s, color 0.3s;
margin-right: 10%; /*Отступ справа */
/* margin-left: 10%; */
}
.navbar .storage_home_button:hover {
background-color: rgb(58, 54, 54); /* Полупрозрачный белый при наведении */
transform: scale(1.1); /* Увеличение кнопки */
}
.navbar .btns_in_nav {
display: flex;
margin-right: 10%;
}
main {
font-family: "Mulish";
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.container {
margin: 10vh auto 0 auto;
display: flex;
flex-direction: column;
justify-items: flex-start;
gap: 1rem;
padding: 1rem;
background-color: #333333;
border: 0.15rem solid rgb(82, 82, 82);
border-radius: 10px;
width: 20%;
min-width: 20rem;
box-shadow: 0 0 10px #8d53ff;
}
.container h2 {
text-align: center;
margin: 0.5rem;
}
.fields {
display: flex;
flex-direction: column;
gap: 1rem;
/* padding: 1rem; */
}
.field {
background-color: #333333;
display: flex;
flex-direction: column;
margin: 0 auto 20 auto;
padding: 5px;
align-items: stretch;
border: 2px solid rgb(88, 88, 88);
border-radius: 10px;
transition: border-color;
}
/* .field:hover {
border-color: #8d53ff;
} */
.field label {
font-weight: bold;
padding: 0.5rem;
}
.field input {
background-color: #121212;
color: whitesmoke;
padding: 0.5rem;
border: none;
border-radius: 0.5rem;
}
.container .buttons {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
width: 100%;
/* padding: 1rem; */
}
.container .buttons button {
border: 2px solid rgba(73, 0, 209, 0);
border-radius: 2rem;
padding: 0.7rem;
width: 90%;
color: rgb(190, 190, 190);
background-color: #444444;
transition: background-color ease 300ms, border ease 300ms;
}
.buttons button:hover {
border: 2px solid rgba(255, 255, 255, 1);
background-color: #6200d3;
}
.buttons .logout:hover {
border: 2px solid rgba(255, 255, 255, 1);
background-color: #6d1717;
}
</style>
</head> </head>
<body> <body>
<nav class="navbar"> <div class="navbar">
<a class="movere" href="{% url 'home' %}" title="Домашняя страница"> <div class="logo">
<img class="icon" src="{% static 'assets/logo.png' %}" alt="icon-movere"> <a href="{% url 'home' %}" style="text-decoration: none; color: inherit; display: flex; align-items: center;">
<h1>MOVERE</h1> <img src="{% static 'mainapp/images/download.png' %}" alt="Logo">
</a> <span>MOVERELAB</span>
<div class="navbar-buttons">
{% comment %} <a class="navbar-button home" href="{% url 'home' %}">
<img class="icon" src="{% static 'assets/home.png' %}" alt="icon-home" title="Домашняя страница">
<h1>ДОМОЙ</h1>
</a> {% endcomment %}
<a class="navbar-button profile" href="{% url 'profile' %}" title="Профиль">
<img class="icon" src="{% static 'assets/profile.png' %}" alt="icon-profile">
{% comment %} <h1>ПРОФИЛЬ</h1> {% endcomment %}
</a> </a>
</div> </div>
</nav> <div class="btns_in_nav">
<main class="mainclass"> <button class="profile-btn" onclick="location.href='{% url 'home' %}'">Домой</button>
<button class="profile-btn" onclick="location.href='{% url 'profile' %}'">Профиль</button>
</div>
</div>
{# <h1>>>> ПРОФИЛЬ</h1> #}
<main>
<div class="container"> <div class="container">
<h2 class="profile-header">Профиль</h2> <h2>Профиль</h2>
<div class="fields"> <div class="fields">
<div class="field"> <div on_click="copy_to_clipboard()" class="field">
<label for="username">Имя пользователя</label> <label for="username">Имя пользователя</label>
<input type="text" id="username" name="username" value="{{ user.username }}" placeholder="Введите имя пользователя" autocomplete="username" readonly required> <input type="text" id="username" name="username" value="{{ user.username }}" placeholder="Введите имя пользователя" autocomplete="username" readonly required>
</div> </div>
<div class="field"> <div on_click="copy_to_clipboard()" class="field">
<label for="first_name">Имя</label> <label for="first_name">Имя</label>
<input type="text" id="first_name" name="first_name" value="{{ user.first_name }}" placeholder="Введите имя" autocomplete="given-name" readonly required> <input type="text" id="first_name" name="first_name" value="{{ user.first_name }}" placeholder="Введите имя" autocomplete="given-name" readonly required>
</div> </div>
<div class="field"> <div on_click="copy_to_clipboard()" class="field">
<label for="last_name">Фамилия</label> <label for="last_name">Фамилия</label>
<input type="text" id="last_name" name="last_name" value="{{ user.last_name }}" placeholder="Введите фамилию" autocomplete="family-name" readonly required> <input type="text" id="last_name" name="last_name" value="{{ user.last_name }}" placeholder="Введите фамилию" autocomplete="family-name" readonly required>
</div> </div>
<div class="field"> <div on_click="copy_to_clipboard()" class="field">
<label for="email">Адрес электронной почты</label> <label for="email">Адрес электронной почты</label>
<input type="email" id="email" name="email" value="{{ user.email }}" placeholder="Введите адрес электронной почты" autocomplete="email" readonly required> <input type="email" id="email" name="email" value="{{ user.email }}" placeholder="Введите адрес электронной почты" autocomplete="email" readonly required>
</div> </div>
...@@ -56,9 +250,7 @@ ...@@ -56,9 +250,7 @@
<form action="{% url 'logout' %}" method="POST"> <form action="{% url 'logout' %}" method="POST">
{% csrf_token %} {% csrf_token %}
<div class="buttons"> <div class="buttons">
{% comment %} <a href="{% url 'edit_profile' %}"> {% endcomment %} {# <button class="buttons change-profile" type="button" onclick="location.href='{% url 'edit_profile' %}'">Редактировать профиль</button> #}
<button class="buttons change-profile" type="button" onclick="location.href='{% url 'edit_profile' %}'">Редактировать профиль</button>
{% comment %} </a> {% endcomment %}
<button class="buttons logout" type="submit">Выйти из аккаунта</a></button> <button class="buttons logout" type="submit">Выйти из аккаунта</a></button>
</div> </div>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment