Ahmadi/tecvico-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: finalize UI/UX

Browse Source
This commit is contained in:
mohamad
2026-08-01 16:30:24 +03:30
parent 3c50abf404
commit 28e0f7f8fe
26 changed files with 822 additions and 528 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/accounts/profile.html
+52 -52
View File
@@ -1,64 +1,64 @@
{% extends "base.html" %}
{% extends "portal_base.html" %}
{% load static %}
{% block title %}Profile{% endblock %}
{% block title %}Profile & Account{% endblock %}
{% block portal_title %}Profile & account{% endblock %}
{% block portal_subtitle %}Build a complete professional profile so Tecvico can understand your work and communicate clearly.{% endblock %}
{% block content %}
<section class="page-hero" aria-labelledby="profile-heading">
<div class="container">
<div class="page-hero-content">
<h1 class="page-hero-title" id="profile-heading">Your Profile</h1>
<p class="page-hero-subtitle">Keep your contact details up to date for project communication.</p>
</div>
</div>
</section>
{% block portal_content %}
<div class="dashboard-form-layout">
<section class="dashboard-panel dashboard-form-card" aria-labelledby="profile-details-title">
<div class="dashboard-panel__header"><div><h2 id="profile-details-title">Professional profile</h2><p>Your profile information is visible only to you and the Tecvico team.</p></div></div>
<form method="post" enctype="multipart/form-data" novalidate>
{% csrf_token %}
{% if form.non_field_errors %}<div class="form-errors">{{ form.non_field_errors }}</div>{% endif %}
<section class="section">
<div class="container container--narrow">
<div class="glass-card portal-card fade-in">
<form method="post" novalidate>
{% csrf_token %}
<div class="profile-avatar-field form-group{% if form.avatar.errors %} has-error{% endif %}">
<div class="profile-avatar-preview" aria-hidden="true">
<img src="{% if user.client_profile.avatar %}{{ user.client_profile.avatar.url }}{% else %}{% static 'images/tecvico/default-avatar.png' %}{% endif %}" alt="" />
</div>
<div>
<label for="id_avatar">Profile picture</label>
{{ form.avatar }}
<p class="form-hint">JPG, PNG, or WebP. Maximum 5 MB. A square image works best.</p>
{{ form.avatar.errors }}
</div>
</div>
<div class="profile-form-section">
<h3>Identity</h3>
<div class="form-grid form-grid--2">
<div class="form-group">
<label for="id_first_name">First name <span class="required-star">*</span></label>
{{ form.first_name }}
{{ form.first_name.errors }}
</div>
<div class="form-group">
<label for="id_last_name">Last name <span class="required-star">*</span></label>
{{ form.last_name }}
{{ form.last_name.errors }}
</div>
</div>
<div class="form-group">
<label for="id_email">Email <span class="required-star">*</span></label>
{{ form.email }}
{{ form.email.errors }}
<div class="form-group"><label for="id_first_name">First name <span class="required-star">*</span></label>{{ form.first_name }}{{ form.first_name.errors }}</div>
<div class="form-group"><label for="id_last_name">Last name <span class="required-star">*</span></label>{{ form.last_name }}{{ form.last_name.errors }}</div>
</div>
<div class="form-group"><label for="id_email">Email address <span class="required-star">*</span></label>{{ form.email }}<p class="form-hint">Used for project updates and secure account communication.</p>{{ form.email.errors }}</div>
</div>
<div class="profile-form-section">
<h3>Professional information</h3>
<div class="form-grid form-grid--2">
<div class="form-group">
<label for="id_company">Company</label>
{{ form.company }}
{{ form.company.errors }}
</div>
<div class="form-group">
<label for="id_phone">Phone</label>
{{ form.phone }}
{{ form.phone.errors }}
</div>
<div class="form-group"><label for="id_company">Organization</label>{{ form.company }}{{ form.company.errors }}</div>
<div class="form-group"><label for="id_job_title">Role or job title</label>{{ form.job_title }}{{ form.job_title.errors }}</div>
</div>
<div class="form-group"><label for="id_bio">Professional bio</label>{{ form.bio }}<p class="form-hint">Up to 600 characters about your research, technical work, or project interests.</p>{{ form.bio.errors }}</div>
</div>
<div class="form-group">
<label for="id_timezone">Timezone <span class="required-star">*</span></label>
{{ form.timezone }}
{{ form.timezone.errors }}
</div>
<div class="profile-form-section">
<h3>Contact details</h3>
<div class="form-group"><label for="id_phone">Phone number</label>{{ form.phone }}{{ form.phone.errors }}</div>
</div>
<button type="submit" class="btn-primary btn-submit">Save profile</button>
</form>
</div>
</div>
</section>
<div class="dashboard-form-actions"><button type="submit" class="btn-primary">Save profile</button></div>
</form>
</section>
<aside class="profile-context-card">
<div class="profile-context-card__avatar"><img src="{% if user.client_profile.avatar %}{{ user.client_profile.avatar.url }}{% else %}{% static 'images/tecvico/default-avatar.png' %}{% endif %}" alt="" /></div>
<h2>{{ user.get_full_name|default:user.username }}</h2>
{% if user.client_profile.job_title or user.client_profile.company %}<p>{% if user.client_profile.job_title %}{{ user.client_profile.job_title }}{% endif %}{% if user.client_profile.job_title and user.client_profile.company %} · {% endif %}{% if user.client_profile.company %}{{ user.client_profile.company }}{% endif %}</p>{% else %}<p>{{ user.email }}</p>{% endif %}
{% if user.client_profile.bio %}<div class="profile-context-card__expertise">{{ user.client_profile.bio|truncatechars:150 }}</div>{% endif %}
<div class="profile-context-card__rule"></div>
<span class="profile-context-card__label">Account status</span>
<strong class="profile-status"><span></span> Active client account</strong>
</aside>
</div>
{% endblock %}