TDvorak/PPve
1
0
Fork 0
mirror of https://github.com/Dvorinka/PPve.git synced 2026-06-03 20:12:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

test

Browse Source
This commit is contained in:
Dvorinka
2025-06-20 09:17:45 +02:00
parent 48f73a5a94
commit ef05a9f28f
2 changed files with 23 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+23 -124
View File
@@ -17,31 +17,22 @@
/* Achievements styles */
#achievementsDisplay {
width: 100%;
max-width: 1200px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.95);
padding: 2rem;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
position: fixed;
top: 10px;
right: 10px;
background: white;
padding: 1rem;
border-radius: 0.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
display: none;
margin-bottom: 2rem;
z-index: 1000;
}
.achievement-item {
display: flex;
align-items: center;
padding: 1.5rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
cursor: pointer;
}
.achievement-item:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateX(10px);
padding: 0.5rem;
border-bottom: 1px solid #eee;
}
.achievement-item:last-child {
@@ -49,85 +40,8 @@
}
.achievement-icon {
font-size: 2rem;
margin-right: 1.5rem;
animation: float 3s ease-in-out infinite;
}
.achievement-content {
flex: 1;
}
.achievement-title {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 0.5rem;
}
.achievement-description {
color: #666;
font-size: 0.9rem;
}
.achievement-progress {
width: 100%;
height: 4px;
background: #eee;
border-radius: 2px;
margin-top: 1rem;
overflow: hidden;
}
.achievement-progress-bar {
height: 100%;
background: linear-gradient(90deg, #4a6cf7, #6355f7);
width: 0;
transition: width 0.5s ease;
}
@keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0px);
}
}
/* Particle effects */
.particle-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.particle {
position: absolute;
width: 4px;
height: 4px;
background: rgba(255, 255, 255, 0.8);
border-radius: 50%;
animation: particle 2s infinite;
}
@keyframes particle {
0% {
transform: translateY(0) translateX(0) scale(1);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: translateY(100vh) translateX(100vw) scale(0);
opacity: 0;
}
margin-right: 0.75rem;
}
</style>
<script>
@@ -703,49 +617,34 @@
});
});
</script>
<!-- Particle effects container -->
<div class="particle-container" id="particleContainer"></div>
<!-- Achievements display -->
<div id="achievementsDisplay">
<div class="achievement-item">
<i class="fas fa-star achievement-icon text-yellow-500"></i>
<div class="achievement-content">
<h4 class="achievement-title">Nováček</h4>
<p class="achievement-description">První návštěva na portálu</p>
<div class="achievement-progress">
<div class="achievement-progress-bar" id="achievement1Progress"></div>
</div>
<div>
<h4 class="font-bold">Nováček</h4>
<p class="text-sm text-gray-600">První návštěva na portálu</p>
</div>
</div>
<div class="achievement-item">
<i class="fas fa-clock-rotate-left achievement-icon text-blue-500"></i>
<div class="achievement-content">
<h4 class="achievement-title">Pravidelný návštěvník</h4>
<p class="achievement-description">10 návštěv za měsíc</p>
<div class="achievement-progress">
<div class="achievement-progress-bar" id="achievement2Progress"></div>
</div>
<div>
<h4 class="font-bold">Pravidelný návštěvník</h4>
<p class="text-sm text-gray-600">10 návštěv za měsíc</p>
</div>
</div>
<div class="achievement-item">
<i class="fas fa-rocket achievement-icon text-purple-500"></i>
<div class="achievement-content">
<h4 class="achievement-title">Power User</h4>
<p class="achievement-description">50 návštěv za měsíc</p>
<div class="achievement-progress">
<div class="achievement-progress-bar" id="achievement3Progress"></div>
</div>
<div>
<h4 class="font-bold">Power User</h4>
<p class="text-sm text-gray-600">50 návštěv za měsíc</p>
</div>
</div>
<div class="achievement-item">
<i class="fas fa-award achievement-icon text-gold"></i>
<div class="achievement-content">
<h4 class="achievement-title">Super Fan</h4>
<p class="achievement-description">100 návštěv za měsíc</p>
<div class="achievement-progress">
<div class="achievement-progress-bar" id="achievement4Progress"></div>
</div>
<div>
<h4 class="font-bold">Super Fan</h4>
<p class="text-sm text-gray-600">100 návštěv za měsíc</p>
</div>
</div>
</div>