update fonts (thanks MrYash)

This commit is contained in:
才羽青空 2025-12-28 18:05:41 +08:00
parent da402a5a28
commit 11901ec67a
7 changed files with 376 additions and 84 deletions

View file

@ -39,43 +39,44 @@
<p class="serial-text">Early Access v2.6.30.4</p>
<!-- 底部文字结束 -->
<!-- Friends Bar -->
<div class="friends-bar" @click="toggleFriendsList">
<img src="icons/Friend.png" class="friends-icon" alt="Friends">
<span class="friends-text">OG:BG Friends 3 / 4</span>
</div>
<!-- Friends List Dropdown -->
<div class="friends-list-container" :class="{'show': showFriendsList}">
<div class="friends-list-header">
<span>OG:BG Friends</span>
<button class="refresh-button">Refresh</button>
<!-- Tab Content Area -->
<div v-if="activeTab === 'home'">
<!-- Friends Bar -->
<div class="friends-bar" @click="toggleFriendsList">
<img src="icons/Friend.png" class="friends-icon" alt="Friends">
<span class="friends-text">OG:BG Friends 3 / 4</span>
</div>
<div class="friends-list">
<div class="friend-item" v-for="friend in friendsList" :key="friend.name" @click="selectFriend(friend)" :class="{'selected': selectedFriend && selectedFriend.name === friend.name}">
<img :src="friend.avatar" class="friend-avatar" alt="Avatar">
<div class="friend-info">
<div class="friend-name">{{ friend.name }}</div>
<div class="friend-status" :class="friend.status">{{ friend.status }}</div>
<!-- Friends List Dropdown -->
<div class="friends-list-container" :class="{'show': showFriendsList}">
<div class="friends-list-header">
<span>OG:BG Friends</span>
<button class="refresh-button">Refresh</button>
</div>
<div class="friends-list">
<div class="friend-item" v-for="friend in friendsList" :key="friend.name" @click="selectFriend(friend)" :class="{'selected': selectedFriend && selectedFriend.name === friend.name}">
<img :src="friend.avatar" class="friend-avatar" alt="Avatar">
<div class="friend-info">
<div class="friend-name">{{ friend.name }}</div>
<div class="friend-status" :class="friend.status">{{ friend.status }}</div>
</div>
<button class="invite-button" v-if="friend.status === 'online'">INVITE</button>
</div>
<button class="invite-button" v-if="friend.status === 'online'">INVITE</button>
</div>
<!-- Friend Action Dropdown -->
<div class="friend-action-dropdown" v-if="selectedFriend" :class="{'show': showFriendActions}">
<button class="friend-action-button view-button" @click="viewFriendProfile">VIEW PROFILE</button>
<button class="friend-action-button invite-button" @click="inviteFriend" v-if="selectedFriend.status === 'online'">INVITE</button>
</div>
</div>
<!-- Friend Action Dropdown -->
<div class="friend-action-dropdown" v-if="selectedFriend" :class="{'show': showFriendActions}">
<button class="friend-action-button view-button" @click="viewFriendProfile">VIEW PROFILE</button>
<button class="friend-action-button invite-button" @click="inviteFriend" v-if="selectedFriend.status === 'online'">INVITE</button>
</div>
</div>
<!-- Receive Invite Button -->
<button class="receive-invite-button" @click="toggleTickMark">
<img v-if="tickMarkEnabled" src="icons/Tick_mark_true.png" class="tick-mark" alt="Online">
<img v-else src="icons/Tick_mark_false.png" class="tick-mark" alt="Offline">
RECEIVE INVITE
</button>
<!-- Receive Invite Button -->
<button class="receive-invite-button" @click="toggleTickMark">
<img v-if="tickMarkEnabled" src="icons/Tick_mark_true.png" class="tick-mark" alt="Online">
<img v-else src="icons/Tick_mark_false.png" class="tick-mark" alt="Offline">
RECEIVE INVITE
</button>
<!-- 选择框、开始按钮板块 -->
<div class="game-play-container-top-left">
<div class="button-container">
@ -92,8 +93,8 @@
<div class="pubg-title-on-button">
<div class="play-text">PLAY</div>
<div class="tips-text-container">
<div class="tips-text default-text">CLICK TO PLAY</div>
<div class="tips-text hover-text">CHOOSE YOUR REGION</div>
<div class="tips-text default-text">BATTLEGROUNDS</div>
<div class="tips-text hover-text">CLICK TO PLAY</div>
</div>
</div>
</div>
@ -124,6 +125,284 @@
</button>
</div>
</div>
</div>
<div v-if="activeTab === 'character'" class="tab-content">
<!-- Friends Bar -->
<div class="friends-bar" @click="toggleFriendsList">
<img src="icons/Friend.png" class="friends-icon" alt="Friends">
<span class="friends-text">OG:BG Friends 3 / 4</span>
</div>
<!-- Friends List Dropdown -->
<div class="friends-list-container" :class="{'show': showFriendsList}">
<div class="friends-list-header">
<span>OG:BG Friends</span>
<button class="refresh-button">Refresh</button>
</div>
<div class="friends-list">
<div class="friend-item" v-for="friend in friendsList" :key="friend.name" @click="selectFriend(friend)" :class="{'selected': selectedFriend && selectedFriend.name === friend.name}">
<img :src="friend.avatar" class="friend-avatar" alt="Avatar">
<div class="friend-info">
<div class="friend-name">{{ friend.name }}</div>
<div class="friend-status" :class="friend.status">{{ friend.status }}</div>
</div>
<button class="invite-button" v-if="friend.status === 'online'">INVITE</button>
</div>
</div>
<!-- Friend Action Dropdown -->
<div class="friend-action-dropdown" v-if="selectedFriend" :class="{'show': showFriendActions}">
<button class="friend-action-button view-button" @click="viewFriendProfile">VIEW PROFILE</button>
<button class="friend-action-button invite-button" @click="inviteFriend" v-if="selectedFriend.status === 'online'">INVITE</button>
</div>
</div>
<!-- Receive Invite Button -->
<button class="receive-invite-button" @click="toggleTickMark">
<img v-if="tickMarkEnabled" src="icons/Tick_mark_true.png" class="tick-mark" alt="Online">
<img v-else src="icons/Tick_mark_false.png" class="tick-mark" alt="Offline">
RECEIVE INVITE
</button>
<!-- 选择框、开始按钮板块 -->
<div class="game-play-container-top-left">
<div class="button-container">
<div class="multi-layer-button bro-loading"
id="join"
:class="{'active-hover': showServerDropdown, 'bro-loading': isLoading}"
@mouseenter="showServerDropdown = true"
@mouseleave="showServerDropdown = false"
@click="joinServer">
<img src="images/1.png" alt="Button Layer 1" class="button-layer layer-1">
<img src="images/2.png" alt="Button Layer 2" class="button-layer layer-2">
<img src="images/3.png" alt="Button Layer 3" class="button-layer layer-3">
<!-- PUBG Title on Button -->
<div class="pubg-title-on-button">
<div class="play-text">PLAY</div>
<div class="tips-text-container">
<div class="tips-text default-text">BATTLEGROUNDS</div>
<div class="tips-text hover-text">CLICK TO PLAY</div>
</div>
</div>
</div>
</div>
<div class="join-server-container" id="server-dropdown" :class="{'show': showServerDropdown}" @mouseenter="showServerDropdown = true" @mouseleave="showServerDropdown = false">
<div class="dropdown-section">
<div class="dropdown-header">REGION</div>
<button v-for="server in serverList"
v-bind:class="{'sel-server-button': true, 'active': server.name === currentServer.name}"
:id="server.name"
v-on:click="selectServer(server)">
<img class="checkmark" v-if="server.name === currentServer.name" src="icons/Tick_mark_true.png" alt="Selected">
{{ server.name }}
</button>
</div>
<div class="dropdown-section">
<div class="dropdown-header">TEAM</div>
<button v-for="team in teamList"
v-bind:class="{'sel-server-button': true, 'active': team === currentTeam}"
:id="team"
v-on:click="selectTeam(team)">
<img class="checkmark" v-if="team === currentTeam" src="icons/Tick_mark_true.png" alt="Selected">
{{ team }}
</button>
</div>
<button class="custom-match-button" @click="joinCustomMatch">
CUSTOM MATCH
</button>
</div>
</div>
<div class="character-tab">
<h2>Character Management</h2>
<p>Character settings and customization options would go here.</p>
</div>
</div>
<div v-if="activeTab === 'rewards'" class="tab-content">
<!-- Friends Bar -->
<div class="friends-bar" @click="toggleFriendsList">
<img src="icons/Friend.png" class="friends-icon" alt="Friends">
<span class="friends-text">OG:BG Friends 3 / 4</span>
</div>
<!-- Friends List Dropdown -->
<div class="friends-list-container" :class="{'show': showFriendsList}">
<div class="friends-list-header">
<span>OG:BG Friends</span>
<button class="refresh-button">Refresh</button>
</div>
<div class="friends-list">
<div class="friend-item" v-for="friend in friendsList" :key="friend.name" @click="selectFriend(friend)" :class="{'selected': selectedFriend && selectedFriend.name === friend.name}">
<img :src="friend.avatar" class="friend-avatar" alt="Avatar">
<div class="friend-info">
<div class="friend-name">{{ friend.name }}</div>
<div class="friend-status" :class="friend.status">{{ friend.status }}</div>
</div>
<button class="invite-button" v-if="friend.status === 'online'">INVITE</button>
</div>
</div>
<!-- Friend Action Dropdown -->
<div class="friend-action-dropdown" v-if="selectedFriend" :class="{'show': showFriendActions}">
<button class="friend-action-button view-button" @click="viewFriendProfile">VIEW PROFILE</button>
<button class="friend-action-button invite-button" @click="inviteFriend" v-if="selectedFriend.status === 'online'">INVITE</button>
</div>
</div>
<!-- Receive Invite Button -->
<button class="receive-invite-button" @click="toggleTickMark">
<img v-if="tickMarkEnabled" src="icons/Tick_mark_true.png" class="tick-mark" alt="Online">
<img v-else src="icons/Tick_mark_false.png" class="tick-mark" alt="Offline">
RECEIVE INVITE
</button>
<!-- 选择框、开始按钮板块 -->
<div class="game-play-container-top-left">
<div class="button-container">
<div class="multi-layer-button bro-loading"
id="join"
:class="{'active-hover': showServerDropdown, 'bro-loading': isLoading}"
@mouseenter="showServerDropdown = true"
@mouseleave="showServerDropdown = false"
@click="joinServer">
<img src="images/1.png" alt="Button Layer 1" class="button-layer layer-1">
<img src="images/2.png" alt="Button Layer 2" class="button-layer layer-2">
<img src="images/3.png" alt="Button Layer 3" class="button-layer layer-3">
<!-- PUBG Title on Button -->
<div class="pubg-title-on-button">
<div class="play-text">PLAY</div>
<div class="tips-text-container">
<div class="tips-text default-text">BATTLEGROUNDS</div>
<div class="tips-text hover-text">CLICK TO PLAY</div>
</div>
</div>
</div>
</div>
<div class="join-server-container" id="server-dropdown" :class="{'show': showServerDropdown}" @mouseenter="showServerDropdown = true" @mouseleave="showServerDropdown = false">
<div class="dropdown-section">
<div class="dropdown-header">REGION</div>
<button v-for="server in serverList"
v-bind:class="{'sel-server-button': true, 'active': server.name === currentServer.name}"
:id="server.name"
v-on:click="selectServer(server)">
<img class="checkmark" v-if="server.name === currentServer.name" src="icons/Tick_mark_true.png" alt="Selected">
{{ server.name }}
</button>
</div>
<div class="dropdown-section">
<div class="dropdown-header">TEAM</div>
<button v-for="team in teamList"
v-bind:class="{'sel-server-button': true, 'active': team === currentTeam}"
:id="team"
v-on:click="selectTeam(team)">
<img class="checkmark" v-if="team === currentTeam" src="icons/Tick_mark_true.png" alt="Selected">
{{ team }}
</button>
</div>
<button class="custom-match-button" @click="joinCustomMatch">
CUSTOM MATCH
</button>
</div>
</div>
<div class="rewards-tab">
<h2>Rewards & Achievements</h2>
<p>Your rewards and achievements would be displayed here.</p>
</div>
</div>
<div v-if="activeTab === 'statistics'" class="tab-content">
<!-- Friends Bar -->
<div class="friends-bar" @click="toggleFriendsList">
<img src="icons/Friend.png" class="friends-icon" alt="Friends">
<span class="friends-text">OG:BG Friends 3 / 4</span>
</div>
<!-- Friends List Dropdown -->
<div class="friends-list-container" :class="{'show': showFriendsList}">
<div class="friends-list-header">
<span>OG:BG Friends</span>
<button class="refresh-button">Refresh</button>
</div>
<div class="friends-list">
<div class="friend-item" v-for="friend in friendsList" :key="friend.name" @click="selectFriend(friend)" :class="{'selected': selectedFriend && selectedFriend.name === friend.name}">
<img :src="friend.avatar" class="friend-avatar" alt="Avatar">
<div class="friend-info">
<div class="friend-name">{{ friend.name }}</div>
<div class="friend-status" :class="friend.status">{{ friend.status }}</div>
</div>
<button class="invite-button" v-if="friend.status === 'online'">INVITE</button>
</div>
</div>
<!-- Friend Action Dropdown -->
<div class="friend-action-dropdown" v-if="selectedFriend" :class="{'show': showFriendActions}">
<button class="friend-action-button view-button" @click="viewFriendProfile">VIEW PROFILE</button>
<button class="friend-action-button invite-button" @click="inviteFriend" v-if="selectedFriend.status === 'online'">INVITE</button>
</div>
</div>
<!-- Receive Invite Button -->
<button class="receive-invite-button" @click="toggleTickMark">
<img v-if="tickMarkEnabled" src="icons/Tick_mark_true.png" class="tick-mark" alt="Online">
<img v-else src="icons/Tick_mark_false.png" class="tick-mark" alt="Offline">
RECEIVE INVITE
</button>
<!-- 选择框、开始按钮板块 -->
<div class="game-play-container-top-left">
<div class="button-container">
<div class="multi-layer-button bro-loading"
id="join"
:class="{'active-hover': showServerDropdown, 'bro-loading': isLoading}"
@mouseenter="showServerDropdown = true"
@mouseleave="showServerDropdown = false"
@click="joinServer">
<img src="images/1.png" alt="Button Layer 1" class="button-layer layer-1">
<img src="images/2.png" alt="Button Layer 2" class="button-layer layer-2">
<img src="images/3.png" alt="Button Layer 3" class="button-layer layer-3">
<!-- PUBG Title on Button -->
<div class="pubg-title-on-button">
<div class="play-text">PLAY</div>
<div class="tips-text-container">
<div class="tips-text default-text">BATTLEGROUNDS</div>
<div class="tips-text hover-text">CLICK TO PLAY</div>
</div>
</div>
</div>
</div>
<div class="join-server-container" id="server-dropdown" :class="{'show': showServerDropdown}" @mouseenter="showServerDropdown = true" @mouseleave="showServerDropdown = false">
<div class="dropdown-section">
<div class="dropdown-header">REGION</div>
<button v-for="server in serverList"
v-bind:class="{'sel-server-button': true, 'active': server.name === currentServer.name}"
:id="server.name"
v-on:click="selectServer(server)">
<img class="checkmark" v-if="server.name === currentServer.name" src="icons/Tick_mark_true.png" alt="Selected">
{{ server.name }}
</button>
</div>
<div class="dropdown-section">
<div class="dropdown-header">TEAM</div>
<button v-for="team in teamList"
v-bind:class="{'sel-server-button': true, 'active': team === currentTeam}"
:id="team"
v-on:click="selectTeam(team)">
<img class="checkmark" v-if="team === currentTeam" src="icons/Tick_mark_true.png" alt="Selected">
{{ team }}
</button>
</div>
<button class="custom-match-button" @click="joinCustomMatch">
CUSTOM MATCH
</button>
</div>
</div>
<div class="statistics-tab">
<h2>Statistics</h2>
<p>Your game statistics would be displayed here.</p>
</div>
</div>
<!-- 服务器玩家数量 -->
<!-- 右上角区域 -->
@ -132,10 +411,10 @@
<div class="top-right-controls">
<!-- 顶部导航栏 -->
<div class="top-navigation">
<div class="nav-item active">HOME</div>
<div class="nav-item">CHARACTER</div>
<div class="nav-item">REWARDS</div>
<div class="nav-item">STATISTICS</div>
<div class="nav-item" :class="{ 'active': activeTab === 'home' }" @click="changeTab('home')">HOME</div>
<div class="nav-item" :class="{ 'active': activeTab === 'character' }" @click="changeTab('character')">CHARACTER</div>
<div class="nav-item" :class="{ 'active': activeTab === 'rewards' }" @click="changeTab('rewards')">REWARDS</div>
<div class="nav-item" :class="{ 'active': activeTab === 'statistics' }" @click="changeTab('statistics')">STATISTICS</div>
</div>
<!-- 系统按钮占位符 -->
@ -152,13 +431,13 @@
</div>
</div>
<!-- 公告区域 -->
<!-- 公告区域
<div class="announcement-area">
<div class="announcement-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 0 1-3.46 0" stroke="#E3B62F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="12" cy="14" r="3" stroke="#E3B62F" stroke-width="2"/>
<circle cx="12" cy="12" r="10" stroke="#E3B62F" stroke-width="2"/>
<line x1="12" y1="8" x2="12" y2="14" stroke="#E3B62F" stroke-width="2" stroke-linecap="round"/>
<circle cx="12" cy="17" r="1" fill="#E3B62F"/>
</svg>
</div>
<div class="announcement-text">
@ -166,14 +445,13 @@
<div class="announcement-link" onclick="joinDiscord()">interact with the community</div>
</div>
</div>
<!-- 第二个公告区域 -->
<!-- 第二个公告区域
<div class="announcement-area">
<div class="announcement-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="3" y="4" width="18" height="18" rx="2" ry="2" stroke="#E3B62F" stroke-width="2"/>
<line x1="16" y1="2" x2="16" y2="6" stroke="#E3B62F" stroke-width="2" stroke-linecap="round"/>
<line x1="8" y1="2" x2="8" y2="6" stroke="#E3B62F" stroke-width="2" stroke-linecap="round"/>
<line x1="3" y1="10" x2="21" y2="10" stroke="#E3B62F" stroke-width="2" stroke-linecap="round"/>
<circle cx="12" cy="12" r="10" stroke="#E3B62F" stroke-width="2"/>
<line x1="12" y1="8" x2="12" y2="14" stroke="#E3B62F" stroke-width="2" stroke-linecap="round"/>
<circle cx="12" cy="17" r="1" fill="#E3B62F"/>
</svg>
</div>
<div class="announcement-text">
@ -181,7 +459,8 @@
<div class="announcement-link" onclick="joinTelegram()">interact with the community</div>
</div>
</div>
</div>
</div>-->
</div> <!-- closes id="app" -->
<script src="js/jquery-2.2.0.min.js"></script>
<script src="js/jquery-ui-1.11.4.min.js"></script>
@ -254,7 +533,8 @@
{ name: "Land", avatar: "images/avatar/land.jpg", status: "online" },
],
selectedFriend: null,
showFriendActions: false
showFriendActions: false,
activeTab: 'home'
},
methods: {
selectServer: function(server) {
@ -278,6 +558,9 @@
toggleTickMark: function() {
this.tickMarkEnabled = !this.tickMarkEnabled;
},
changeTab: function(tabName) {
this.activeTab = tabName;
},
joinCustomMatch: function() {
try {
this.isLoading = true;