mirror of
https://github.com/Coldsmiles/infstarweb.git
synced 2026-04-23 02:30:41 +08:00
feat: Redesign player details modal with improved layout and accordion for detailed stats
This commit is contained in:
zhangyuheng
237
stats.html
237
stats.html
@@ -267,6 +267,167 @@
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Modal Redesign */
|
||||
.modal-content.expanded-modal {
|
||||
max-width: 800px;
|
||||
width: 90%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 90vh; /* Scrollable if too tall */
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modal-top-section {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.modal-identity {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.modal-identity img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#modal-name {
|
||||
margin: 5px 0;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
#modal-uuid {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
font-family: monospace;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.stats-list-container.compact-stats {
|
||||
flex: 1;
|
||||
min-width: 250px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
background: #f9f9f9;
|
||||
padding: 15px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.modal-divider {
|
||||
border: 0;
|
||||
border-top: 1px solid #eee;
|
||||
margin: 10px 0 20px;
|
||||
}
|
||||
|
||||
/* Accordion Styles */
|
||||
.accordion {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.accordion-item {
|
||||
border: 1px solid #eee;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.accordion-header {
|
||||
background: #fdfdfd;
|
||||
padding: 12px 15px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.accordion-header:hover {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
.accordion-header .icon {
|
||||
margin-right: 8px;
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.accordion-header .arrow {
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.accordion-header.active .arrow {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.accordion-header.active {
|
||||
background: #f0f0f0;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.accordion-content {
|
||||
display: none; /* Hidden by default */
|
||||
padding: 15px;
|
||||
background: white;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.accordion-content.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Grid for stats inside accordion */
|
||||
.detail-stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.detail-stat-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 13px;
|
||||
padding: 4px 0;
|
||||
border-bottom: 1px dashed #f5f5f5;
|
||||
}
|
||||
|
||||
.detail-stat-label {
|
||||
color: #666;
|
||||
margin-right: 10px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.detail-stat-value {
|
||||
font-weight: 600;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
/* Mobile Adjustments */
|
||||
@media (max-width: 600px) {
|
||||
.modal-top-section {
|
||||
flex-direction: column;
|
||||
}
|
||||
.modal-identity, .stats-list-container.compact-stats {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -411,39 +572,57 @@
|
||||
|
||||
<!-- Player Details Modal -->
|
||||
<div id="player-modal" class="modal">
|
||||
<div class="modal-content" style="max-width: 400px;">
|
||||
<div class="modal-content expanded-modal">
|
||||
<span class="close-modal">×</span>
|
||||
<div style="text-align: center; margin-bottom: 20px;">
|
||||
<img id="modal-avatar" src="" alt="Avatar" style="width: 100px; height: 100px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1);">
|
||||
<h2 id="modal-name" style="margin-top: 10px;">Player Name</h2>
|
||||
<p id="modal-uuid" style="font-size: 12px; color: #999; font-family: monospace;">UUID</p>
|
||||
|
||||
<!-- Top Section: Header Info + Summary Stats -->
|
||||
<div class="modal-top-section">
|
||||
<!-- Left: Identity -->
|
||||
<div class="modal-identity">
|
||||
<img id="modal-avatar" src="" alt="Avatar">
|
||||
<h2 id="modal-name">Player Name</h2>
|
||||
<p id="modal-uuid">UUID</p>
|
||||
</div>
|
||||
|
||||
<!-- Right: Summary Stats -->
|
||||
<div class="stats-list-container compact-stats">
|
||||
<div class="stat-row">
|
||||
<span class="stat-label"><i class="fas fa-walking"></i> 行走距离</span>
|
||||
<span class="stat-value" id="modal-walk">0 m</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span class="stat-label"><i class="fas fa-cube"></i> 放置方块</span>
|
||||
<span class="stat-value" id="modal-placed">0</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span class="stat-label"><i class="fas fa-hammer"></i> 挖掘方块</span>
|
||||
<span class="stat-value" id="modal-mined">0</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span class="stat-label"><i class="fas fa-skull"></i> 死亡次数</span>
|
||||
<span class="stat-value" id="modal-deaths">0</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span class="stat-label"><i class="fas fa-crosshairs"></i> 击杀数量</span>
|
||||
<span class="stat-value" id="modal-kills">0</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span class="stat-label"><i class="fas fa-crown"></i> 游玩时间</span>
|
||||
<span class="stat-value" id="modal-playtime">0 秒</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="stats-list-container">
|
||||
<div class="stat-row">
|
||||
<span class="stat-label"><i class="fas fa-walking"></i> 行走距离</span>
|
||||
<span class="stat-value" id="modal-walk">0 m</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span class="stat-label"><i class="fas fa-cube"></i> 放置方块</span>
|
||||
<span class="stat-value" id="modal-placed">0</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span class="stat-label"><i class="fas fa-hammer"></i> 挖掘方块</span>
|
||||
<span class="stat-value" id="modal-mined">0</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span class="stat-label"><i class="fas fa-skull"></i> 死亡次数</span>
|
||||
<span class="stat-value" id="modal-deaths">0</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span class="stat-label"><i class="fas fa-crosshairs"></i> 击杀数量</span>
|
||||
<span class="stat-value" id="modal-kills">0</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span class="stat-label"><i class="fas fa-crown"></i> 游玩时间</span>
|
||||
<span class="stat-value" id="modal-playtime">0 秒</span>
|
||||
|
||||
<!-- Bottom Section: Detailed Stats Accordion -->
|
||||
<div class="modal-details-section">
|
||||
<hr class="modal-divider">
|
||||
<div id="loading-details" style="text-align:center; padding:20px; color:#888;">正在加载详细数据...</div>
|
||||
<div id="stats-accordion" class="accordion">
|
||||
<!-- Dynamic Content -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user