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

@ -1,3 +1,25 @@
@font-face {
font-family:"bombard";
src: url("../fonts/BOMBARD_.ttf") format("truetype"),
url("../fonts/BOMBARD_.otf") format("opentype");
font-weight:normal;
font-style:normal;
}
@font-face {
font-family:"moonshiner";
src: url("../fonts/moonshiner-round.ttf") format("truetype");
font-weight:normal;
font-style:normal;
}
@font-face {
font-family:"overpass";
src: url("../fonts/Overpass-VariableFont_wght.ttf") format("truetype");
font-weight: 100 900;
font-style: normal;
}
@font-face {
font-family:"Pubg Sans Regular";
src:url("../fonts/PUBG_SANS.eot?") format("eot"),
@ -8,24 +30,6 @@
font-style:normal;
}
@font-face {
font-family:"Bombard";
src:url("../fonts/bombard.woff") format("woff"),
url("../fonts/bombard.woff") format("woff2");
font-weight:normal;
font-style:normal;
font-display: swap;
}
@font-face {
font-family:"Moonshiner";
src:url("../fonts/Moonshiner.woff") format("woff"),
url("../fonts/Moonshiner.woff") format("woff2");
font-weight:normal;
font-style:normal;
font-display: swap;
}
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s
}
@ -57,7 +61,7 @@
transform: translate(-50%);
bottom: 3vh;
font-size: 3vh;
font-family: 'Overpass-Reg'
font-family: 'overpass'
}
.loading-text > img {
@ -347,7 +351,7 @@ body {
}
.sel-server-button {
font-family: 'Agency';
font-family: 'overpass', 'Agency';
margin-bottom: 0.8vh;
font-size: 2vh;
text-align: left;
@ -384,7 +388,7 @@ body {
/* Custom Match Button */
.custom-match-button {
font-family: 'Agency', sans-serif;
font-family: 'overpass', 'Agency', sans-serif;
font-size: 2.2vh;
font-weight: bold;
text-transform: uppercase;
@ -451,7 +455,7 @@ body {
.friends-text {
color: #fff;
font-family: 'Agency';
font-family: 'overpass', 'Agency';
font-size: 2vh;
margin-right: 1.5vh;
}
@ -684,7 +688,7 @@ body {
.receive-invite-button {
background-color: #E3B62F;
color: #000;
font-family: 'Agency';
font-family: 'overpass';
font-weight: bold;
font-size: 1.8vh;
padding: 0.1vh 2vh;
@ -695,7 +699,7 @@ body {
align-items: center;
position: fixed;
bottom: 0.8vh;
left: 13vw;
left: 16vw;
z-index: 101;
}
@ -724,6 +728,7 @@ body {
.nav-item {
font-family: 'overpass', 'Agency';
color: rgba(255, 255, 255, 0.8);
cursor: pointer;
transition: color 0.2s ease;
@ -804,6 +809,7 @@ body {
}
.player-name {
font-family: 'overpass', 'Agency';
font-size: 2.5vh;
font-weight: normal;
color: #fff;
@ -853,30 +859,33 @@ body {
}
.play-text {
font-family: 'Bombard', 'Agency', 'PUBG Sans Regular', sans-serif;
font-family: 'bombard', 'PUBG Sans Regular';
color: #fff;
font-size: 6vh;
font-size: 7vh;
text-transform: uppercase;
text-shadow: 0.2em 0.2em 0.4em rgba(0, 0, 0, 0.9);
margin-bottom: 0.8vh;
text-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.9);
margin-bottom: 0;
font-weight: bold;
letter-spacing: 5px;
letter-spacing: -0.03em;
line-height: 1;
text-align: left;
opacity: 1;
position: relative;
top: -0.5vh;
animation: pulse-opacity 5s infinite ease-in-out;
}
.tips-text {
font-family: 'Moonshiner', 'Agency', 'PUBG Sans Regular', sans-serif;
font-size: 3.2vh;
font-family: 'moonshiner', 'PUBG Sans Regular';
font-size: 4vh;
text-transform: uppercase;
color: rgba(227, 182, 47, 1);
text-shadow: 0.15em 0.15em 0.3em rgba(0, 0, 0, 0.9);
letter-spacing: 0.08em;
text-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.9);
letter-spacing: 0.05em;
position: relative;
opacity: 1;
opacity: 0.9;
line-height: 1;
text-align: left;
margin-top: -0.5vh;
}
/* Tips text container */

BIN
fonts/BOMBARD_.otf Normal file

Binary file not shown.

BIN
fonts/BOMBARD_.ttf Normal file

Binary file not shown.

BIN
fonts/Moonshiner-Round.ttf Normal file

Binary file not shown.

Binary file not shown.

BIN
icons/twitch lookin.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

View file

@ -39,6 +39,95 @@
<p class="serial-text">Early Access v2.6.30.4</p>
<!-- 底部文字结束 -->
<!-- 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>
<!-- 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>
<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">
@ -92,8 +181,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 +213,196 @@
</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;