163 lines
5.8 KiB
HTML
163 lines
5.8 KiB
HTML
<!doctype html>
|
|
<html lang="pl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Dashboard - QL Platform</title>
|
|
<!-- Bootstrap 5 z ikonkami -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
|
|
<style>
|
|
body {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
padding-top: 20px;
|
|
}
|
|
.dashboard-card {
|
|
height: 200px;
|
|
border-radius: 15px;
|
|
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
|
|
transition: all 0.3s ease;
|
|
border: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
color: white;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.dashboard-card:hover {
|
|
transform: translateY(-10px);
|
|
box-shadow: 0 15px 30px rgba(0,0,0,0.3);
|
|
}
|
|
.dashboard-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0,0,0,0.1);
|
|
z-index: 1;
|
|
}
|
|
.dashboard-card-content {
|
|
position: relative;
|
|
z-index: 2;
|
|
padding: 20px;
|
|
}
|
|
.card-icon {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 15px;
|
|
opacity: 0.9;
|
|
}
|
|
.card-title {
|
|
font-size: 1.3rem;
|
|
font-weight: 600;
|
|
margin-bottom: 10px;
|
|
}
|
|
.card-desc {
|
|
font-size: 0.9rem;
|
|
opacity: 0.9;
|
|
margin-bottom: 15px;
|
|
}
|
|
.welcome-card {
|
|
background: linear-gradient(135deg, #2c3e50 0%, #4ca1af 100%);
|
|
color: white;
|
|
padding: 30px;
|
|
border-radius: 15px;
|
|
margin-bottom: 30px;
|
|
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
|
|
}
|
|
.user-avatar {
|
|
width: 80px;
|
|
height: 80px;
|
|
background: white;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 2rem;
|
|
color: #667eea;
|
|
margin: 0 auto 20px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<!-- Karta powitalna -->
|
|
<div class="welcome-card">
|
|
<div class="row align-items-center">
|
|
<div class="col-md-8">
|
|
<h1>Witaj, {{ username }}! 👋</h1>
|
|
<p class="lead">Twoja platforma programistyczna QL jest gotowa do działania.</p>
|
|
<p>Wybierz jedną z poniższych opcji, aby rozpocząć pracę.</p>
|
|
</div>
|
|
<div class="col-md-4 text-center">
|
|
<div class="user-avatar">
|
|
<i class="bi bi-person-circle"></i>
|
|
</div>
|
|
<h5>{{ username }}</h5>
|
|
<a href="{{ url_for('logout') }}" class="btn btn-outline-light btn-sm mt-2">
|
|
<i class="bi bi-box-arrow-right"></i> Wyloguj
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Kafelki -->
|
|
<div class="row g-4">
|
|
{% for tile in tiles %}
|
|
<div class="col-md-4 col-lg-3">
|
|
<a href="{{ tile.link }}" class="text-decoration-none">
|
|
<div class="dashboard-card" style="background: linear-gradient(135deg, {{ tile.bg_color }} 0%, {{ tile.bg_color2 }} 100%);">
|
|
<div class="dashboard-card-content">
|
|
<div class="card-icon">
|
|
<i class="bi {{ tile.icon }}"></i>
|
|
</div>
|
|
<h5 class="card-title">{{ tile.title }}</h5>
|
|
<p class="card-desc">{{ tile.desc }}</p>
|
|
<span class="btn btn-outline-light btn-sm">
|
|
Otwórz <i class="bi bi-arrow-right"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- Projekt list -->
|
|
{% if projects %}
|
|
<div class="mt-5">
|
|
<div class="card">
|
|
<div class="card-header bg-dark text-white">
|
|
<h5 class="mb-0"><i class="bi bi-folder"></i> Twoje projekty</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
{% for project in projects %}
|
|
<div class="col-md-3 mb-3">
|
|
<div class="card h-100">
|
|
<div class="card-body text-center">
|
|
<i class="bi bi-folder-fill text-warning" style="font-size: 2rem;"></i>
|
|
<h6 class="mt-2">{{ project }}</h6>
|
|
<a href="{{ url_for('ql_editor', username=username, project=project) }}"
|
|
class="btn btn-primary btn-sm mt-2">
|
|
<i class="bi bi-pencil"></i> Edytuj
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Bootstrap JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
</body>
|
|
</html> |