Skip to content

Commit

Permalink
update Profile
Browse files Browse the repository at this point in the history 
update Profile
  • Loading branch information
@SevdiKa
SevdiKa committed Jun 17, 2024
1 parent 3f98321 commit 8a80ce9
Show file tree
Hide file tree
Showing 3 changed files with 199 additions and 15 deletions.
3 changes: 2 additions & 1 deletion session.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,5 +10,6 @@
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJrZXZpbmNhbm5vbkBleGFtcGxlLm9yZyIsImV4cCI6MTcxODYzNjczNn0.8f1wNW79uBmJqkBoxaw7te_tkwXQ8_ZBV3Jy1UiuZM4": "kevincannon@example.org",
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJjaGVsc2VhaGFyZGluZ0BleGFtcGxlLm5ldCIsImV4cCI6MTcxODYzNzcwNn0.dUhbqzHmXRQi7Dipnz5P8TfrkkxrcFV7DA0hsAzCsHQ": "chelseaharding@example.net",
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJncmVnb3J5NTdAZXhhbXBsZS5jb20iLCJleHAiOjE3MTg2NTM1MzF9.pixW5sG3uoXeoBj3jPWXf-zOWv10eJ-en7-QY30aWsI": "gregory57@example.com",
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJnd2FzaGluZ3RvbkBleGFtcGxlLm5ldCIsImV4cCI6MTcxODY1NzY3NH0.xd-LmbZDC9-wZeM-OP_psbnNl68O0FPt3BUASnQ9dL0": "gwashington@example.net"
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJnd2FzaGluZ3RvbkBleGFtcGxlLm5ldCIsImV4cCI6MTcxODY1NzY3NH0.xd-LmbZDC9-wZeM-OP_psbnNl68O0FPt3BUASnQ9dL0": "gwashington@example.net",
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJnd2FzaGluZ3RvbkBleGFtcGxlLm5ldCIsImV4cCI6MTcxODY1ODYxNX0.Uv9MCQcBBzR7JzagopryRnU8ct1Thr_Dy8paOFM8yyU": "gwashington@example.net"
}
209 changes: 196 additions & 13 deletions templates/profile.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,73 @@
{% block title %}Profile{% endblock %}
{% block content%}
{% include "/components/header_home.html" %}
<style>
.avatar-group {
display: flex;
margin-left: -16px;
}
.avatar {
margin-left: -8px;
z-index: 1;
}
.avatar img {
width: 3rem;
height: 3rem;
border-radius: 50%;
border: 2px solid white;
}
.avatar:nth-child(1) { z-index: 4; }
.avatar:nth-child(2) { z-index: 3; }
.avatar:nth-child(3) { z-index: 2; }
.avatar:nth-child(4) { z-index: 1; }

.stats {
display: flex;
gap: 16px; /* Abstand zwischen den stat-Elementen */
padding: 16px;
background: white;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}

.stat {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 16px;
background: #f9f9f9;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.stat-figure {
margin-bottom: 8px;
}

.stat-title {
font-size: 1rem;
font-weight: 600;
margin-bottom: 4px;
}

.stat-value {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 4px;
}

.stat-desc {
font-size: 0.875rem;
color: #666;
}
</style>
<div class="grid grid-cols-1 sm:grid-cols-4 items-stretch">
<div class="p-5 flex items-start justify-center h-full sm:col-span-1">
<!-- Links Element -->
<div>
<img
<img src="data:image/jpeg;charset=utf-8;base64, {{ profile_picture }}"
src="data:image/jpeg;charset=utf-8;base64, {{ profile_picture }}"
alt="Minimal landscape" class="max-w-full h-auto max-h-96 w-auto" />
<div class="mt-4 space-y-2">
<hr class="border-gray-200">
Expand All @@ -30,17 +91,41 @@ <h4 class="font-bold">X</h4>
<h2 class="font-bold text-2xl">{{ name }}</h2>
<p>Institution</p>
<p>Bereich</p>
<hr class="border-gray-200">
<div class="flex mt-4">
<img
src="https://raw.githubusercontent.com/picocss/examples/master/v2-html-classless/img/aleksandar-jason-a562ZEFKW8I-unsplash-2000x1000.jpg"
alt="Minimal landscape" class="w-1/3 h-auto max-h-96 mb-4" />
<img
src="https://raw.githubusercontent.com/picocss/examples/master/v2-html-classless/img/aleksandar-jason-a562ZEFKW8I-unsplash-2000x1000.jpg"
alt="Minimal landscape" class="w-1/3 h-auto max-h-96 mb-4" />
<img
src="https://raw.githubusercontent.com/picocss/examples/master/v2-html-classless/img/aleksandar-jason-a562ZEFKW8I-unsplash-2000x1000.jpg"
alt="Minimal landscape" class="w-1/3 h-auto max-h-96 mb-4" />
<hr class="border-gray-200" style="margin-bottom: 16px;">
<div class="flex space-x-4">
<div class="stat">
<div class="stat-figure text-secondary">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-8 h-8 stroke-current"><path
stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</div>
<div class="stat-title">Downloads</div>
<div class="stat-value">31K</div>
<div class="stat-desc">Jan 1st - Feb 1st</div>
</div>

<div class="stat">
<div class="stat-figure text-secondary">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-8 h-8 stroke-current"><path
stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0
100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path></svg>
</div>
<div class="stat-title">New Users</div>
<div class="stat-value">4,200</div>
<div class="stat-desc">↗︎ 400 (22%)</div>
</div>

<div class="stat">
<div class="stat-figure text-secondary">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-8 h-8 stroke-current"><path
stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"></path></svg>
</div>
<div class="stat-title">New Registers</div>
<div class="stat-value">1,200</div>
<div class="stat-desc">↘︎ 90 (14%)</div>
</div>
</div>
<hr class="border-gray-200">
<div class="mt-4">
Expand All @@ -54,6 +139,104 @@ <h2 class="font-bold text-2xl">Publikationen</h2>
</div>
<div class="p-5 flex items-start justify-center h-full sm:col-span-1">
<!-- Rechts Element -->
<div>
<h4 class="font-bold">Following</h4>
<hr class="border-gray-200" style="margin-bottom: 16px;">
<div class="avatar-group flex -space-x-4 rtl:space-x-reverse">
<div class="avatar">
<div class="w-8 h-8">
<img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" class="rounded-full" />
</div>
</div>
<div class="avatar">
<div class="w-8 h-8">
<img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" class="rounded-full" />
</div>
</div>
<div class="avatar">
<div class="w-8 h-8">
<img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" class="rounded-full" />
</div>
</div>
<div class="avatar">
<div class="w-8 h-8">
<img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" class="rounded-full" />
</div>
</div>
</div>
<div class="text-right mb-4">
<a href="#" class="link link-neutral">Show all</a>
</div>

<h4 class="font-bold">Followers</h4>
<hr class="border-gray-200" style="margin-bottom: 16px;">
<div class="avatar-group flex -space-x-4 rtl:space-x-reverse">
<div class="avatar">
<div class="w-8 h-8">
<img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" class="rounded-full" />
</div>
</div>
<div class="avatar">
<div class="w-8 h-8">
<img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" class="rounded-full" />
</div>
</div>
<div class="avatar">
<div class="w-8 h-8">
<img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" class="rounded-full" />
</div>
</div>
<div class="avatar">
<div class="w-8 h-8">
<img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" class="rounded-full" />
</div>
</div>
</div>
<div class="text-right mb-16">
<a href="#" class="link link-neutral">Show all</a>
</div>
<div style="margin-top: 24px;">
<h4 class="font-bold">Groups</h4>
<hr class="border-gray-200" style="margin-bottom: 16px;">
<div class="flex flex-col space-y-4"> <!-- flex-col and space-y-4 for vertical spacing -->
<div class="flex items-center gap-3">
<div class="avatar">
<div class="mask mask-none w-12 h-12">
<img src="https://img.daisyui.com/tailwind-css-component-profile-2@56w.png" alt="Avatar Tailwind CSS Component" />
</div>
</div>
<div>
<div class="font-bold">Lorem Impsum</div>
<div class="text-sm opacity-50">x members</div>
</div>
</div>
<div class="flex items-center gap-3">
<div class="avatar">
<div class="mask mask-none w-12 h-12">
<img src="https://img.daisyui.com/tailwind-css-component-profile-2@56w.png" alt="Avatar Tailwind CSS Component" />
</div>
</div>
<div>
<div class="font-bold">Lorem Impsum</div>
<div class="text-sm opacity-50">x members</div>
</div>
</div>
<div class="flex items-center gap-3">
<div class="avatar">
<div class="mask mask-none w-12 h-12">
<img src="https://img.daisyui.com/tailwind-css-component-profile-2@56w.png" alt="Avatar Tailwind CSS Component" />
</div>
</div>
<div>
<div class="font-bold">Lorem Impsum</div>
<div class="text-sm opacity-50">x members</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% endblock %}

2 changes: 1 addition & 1 deletion users.json
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
1{
{
"0": {
"name": "David Washington",
"email": "gwashington@example.net",
Expand Down

0 comments on commit 8a80ce9

Please sign in to comment.