<!DOCTYPE html>
<html data-theme="light">
<head>
<title>98.7 Body Heat</title>
<script src="https://code.jquery.com/jquery-1.7.2.js"></script>
<script type='text/javascript' src='//files.jcink.net/html/jquery.cookie-1.3.1.js'></script>
<script type='text/javascript' src='//files.jcink.net/html/catcollapse.js'></script>
<script src="https://kit.fontawesome.com/861f1891b3.js" crossorigin="anonymous"></script>
<script src="https://files.jcink.net/html/jquery-3.7.1.min.js"></script>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<style type='text/css'>
/****************************************
重置样式
-----
*****************************************/
* {
margin: 0;
padding: 0;
border: 0;
outline: none;
font-size: 100%;
vertical-align: baseline;
box-sizing: border-box;
transition: all ease 0.25s;
-moz-transition: all ease 0.25s;
}
*:focus,
button,
textarea,
.forminput {
border: none;
outline: none !important;
}
textarea,
.forminput {
padding: 15px;
background: RGBA(var(--lighterRGB), 0.75);
border: solid 1px RGBA(var(--accentRGB), 0.5);
border-radius: 5px;
outline: none !important;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
}
/*****************************
隐藏损坏链接和图片
*****************************/
img[src="<i>No Information</i>"],
img[src=""],
a[href="<i>No Information</i>"],
a[href=""]:not([name]):not([onclick]) {
display: none !important;
}
/*******************
调整表情符号大小
*******************/
a[href*="javascript:emoticon"] img,
div.postcolor img[alt*="https"],
td[class*="post"] img[alt*="https"],
a[href*="javascript:add_smilie"] img,
#ucpcontent img[alt*="https"],
div.box img[alt*="https"] {
height: 20px;
}
/****************************************
默认设置
*****************************************/
body,
html {
margin: 0px;
padding: 0px;
scroll-behavior: smooth;
font: 500 16px/150% var(--fontBody);
background-color: var(--darker);
color: var(--dark);
}
a {
text-decoration: none;
cursor: crosshair;
}
/****************************************
强调色
*****************************************/
:root {
--darker: #101010;
--darkerRGB: 16, 16, 16;
--dark: #171717;
--darkRGB: 17, 17, 17;
--light: #c9c9c9;
--lightRGB: 201, 201, 201;
--lighter: #fdfdfd;
--lighterRGB: 253, 253, 253;
--accent: #e72d77;
--accentRGB: 231, 45, 119;
--support: #612994;
--supportRGB: 97, 41, 148;
--feature: #adadad;
--fontTitle: MFF;
--fontSubtitle: RH;
}
/****************************************
字体支持
*****************************************/
@font-face {
font-family: "Cyber_Grotesk_Regular";
src: url("https://files.jcink.net/uploads2/killingfloor/fonts/Cyber_Grotesk_Regular.otf") format("opentype");
}
@font-face {
font-family: "Cyber_Grotesk_Medium";
src: url("https://files.jcink.net/uploads2/killingfloor/fonts/Cyber_Grotesk_Medium.otf") format("opentype");
}
@font-face {
font-family: "Cyber_Grotesk_Heavy";
src: url("https://files.jcink.net/uploads2/killingfloor/fonts/Cyber_Grotesk_Heavy.otf") format("opentype");
}
@font-face {
font-family: "Cyber_Grotesk_Demibold";
src: url("https://files.jcink.net/uploads2/killingfloor/fonts/Cyber_Grotesk_Demibold.otf") format("opentype");
}
@font-face {
font-family: "Cyber_Grotesk_Bold";
src: url("https://files.jcink.net/uploads2/killingfloor/fonts/Cyber_Grotesk_Bold.otf") format("opentype");
}
@font-face {
font-family: "Cyber_Grotesk_Black";
src: url("https://files.jcink.net/uploads2/killingfloor/fonts/Cyber_Grotesk_Black.otf") format("opentype");
}
@font-face {
font-family: MFF;
src: url('https://files.jcink.net/uploads2/rainshine/fonts/MonsterFriendFore.otf');
format("opentype");
}
@font-face {
font-family: RH;
src: url('https://files.jcink.net/uploads2/rainshine/fonts/rainyhearts.ttf');
format("truetype");
}
/****************************************
叠加层
-------
*****************************************/
.underlay,
.overlay {
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
width: 100%;
height: 100%;
background: var(--overlay);
pointer-events: none;
}
.underlay {
--darker: #000;
z-index: 0;
background-image: url(https://s9.gifyu.com/images/SaILq.png),
radial-gradient(ellipse at top, transparent 0%, var(--light)),
radial-gradient(ellipse at bottom, var(--support), var(--darker));
background-size: cover;
background-position: center;
background-attachment: fixed;
background-blend-mode: overlay;
}
.overlay.light {
--lightest: #ededed;
z-index: 9998;
mix-blend-mode: darken;
}
.overlay.dark {
--overlay: #1c1a1a;
z-index: 9999;
mix-blend-mode: lighten;
}
/****************************************
顶部导航栏
*****************************************/
#topBar {
position: sticky;
top: 0px;
z-index: 999;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
font: 800 16px / 120% var(--fontSubtitle);
text-transform: uppercase;
color: RGBA(var(--lightRGB), .75);
padding: 5px 10px;
width: 100%;
background-image: linear-gradient(95deg,
var(--accent) -106%,
RGBA(var(--darkRGB), .5) 50%);
border: solid 2px var(--accent);
backdrop-filter: blur(5px);
margin-top: -2px;
margin-left: 2px;
}
#topBar:before {
content: '';
position: absolute;
left: 24px;
top: -15px;
width: 2px;
height: 69px;
background: var(--accent);
transform: rotate(54deg);
}
#navstrip {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
gap: 15px;
}
#navstrip a {
color: RGBA(var(--lightRGB), .75);
padding: 3px 5px;
background-color: RGBA(var(--supportRGB), .5);
border: solid 1px var(--support);
border-radius: 2px;
}
#navstrip>a:nth-child(1) {
color: RGBA(var(--accentRGB), .75);
}
#navstrip>a:nth-child(1):before {
content: "您正在收听";
margin-right: 5px;
color: RGBA(var(--lightRGB), .75);
}
#navstrip br {
display: none;
}
/****************************************
包装器
*****************************************/
#boardWrapper {
position: relative;
z-index: 999;
display: block;
max-width: 1210px;
width: 100%;
min-height: 100vh;
padding: 30px;
background-color: RGBA(var(--darkRGB), .5);
border-width: 2px;
border-style: solid;
border-image: linear-gradient(0deg,
var(--accent),
var(--support)) 1 stretch;
box-shadow: 0 0px 40px RGBA(var(--darkRGB), 0.5);
margin: -2px auto;
backdrop-filter: blur(10px);
}
.headerBorderAugment {
content: "";
display: block;
position: sticky;
z-index: 9999;
top: -17px;
left: 9px;
width: 113px;
height: 56px;
background: var(--dark);
border-bottom: solid 2px var(--accent);
transform: rotate(325deg);
margin-top: -69px;
margin-left: -27px;
margin-bottom: -39px;
}
#innerWrapper {
position: relative;
z-index: 999;
display: block;
width: 100%;
border-width: 2px;
border-style: solid;
border-image: linear-gradient(180deg,
var(--accent),
var(--support)) 1 stretch;
}
/****************************************
头部
*****************************************/
#boardHeader {
position: relative;
display: flex;
flex-direction: row;
justify-content: flex-start;
width: 100%;
height: 784px;
background-image: url(https://s12.gifyu.com/images/SaIxq.gif),
radial-gradient(ellipse at bottom right, var(--accent) 0%, var(--dark) 60%);
background-size: cover;
background-blend-mode: soft-light;
overflow-x: clip;
}
#boardHeader:before {
content: "";
display: block;
position: absolute;
z-index: 1;
top: 150px;
right: 50px;
width: 500px;
height: 500px;
background: var(--support);
border-radius: 50%;
filter: blur(80px);
mix-blend-mode: hard-light;
}
/********************
头部文本
********************/
#headerText {
position: relative;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
height: 500px;
text-align: left;
padding: 0px 60px;
z-index: 5;
margin-top: 115px;
transform: rotate(12deg);
}
#headerText:after {
content: '98.7';
text-transform: lowercase;
font: 800 325px / 150% var(--fontSubtitle);
color: RGBA(var(--accentRGB), 15);
text-shadow: none;
padding-left: 5px;
margin-top: -10px;
}
#boardHeader h1 {
display: flex;
flex-direction: column;
color: var(--light);
font: 500 100px/100% var(--fontTitle);
text-transform: uppercase;
text-shadow: 4px 0px 0px var(--accent),
6px 0px 0px var(--support);
}
#boardHeader h1 span {
font-size: 100px;
}
#boardHeader h1 span b {
color: var(--accent);
text-shadow: 4px 0px 0px var(--light),
6px 0px 0px var(--light);
padding-left: 5px;
}
#boardHeader h2 {
position: absolute;
z-index: 5;
top: 430px;
left: 80px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
text-transform: uppercase;
gap: 15px;
font: 800 20px/120% var(--fontSubtitle);
color: var(--dark);
transform: rotate(-1deg);
}
#boardHeader h2 b {
padding: 2px 5px;
background-color: RGBA(var(--accentRGB), .25);
border-bottom: solid 2px var(--accent);
border-radius: 2px;
}
#boardHeader h2 span {
font-weight: 800;
color: var(--accent);
}
/********************
头部图像
********************/
.headerFocal.base {
filter: drop-shadow(0 10px 60px var(--dark));
}
.headerFocalAlt {
position: absolute;
z-index: 1;
top: 415px;
right: 0px;
width: 1142px;
height: 332px;
background-image: url(https://s12.gifyu.com/images/SaldZ.png);
}
.headerFocalWall {
position: absolute;
z-index: 0;
top: 400px;
right: -1px;
width: 1143px;
height: 380px;
background: linear-gradient(9deg, var(--support) 53px, var(--dark) 275px);
clip-path: polygon(39% 27%, 100% 65%, 100% 100%, 0 100%, 0 0);
overflow: hidden;
}
.headerFocalWall:before {
content: '';
position: absolute;
z-index: 2;
top: 107px;
right: -20px;
display: block;
width: 1400px;
height: 2px;
background: linear-gradient(9deg,
var(--accent) 53px,
var(--support) 275px);
transform: rotate(11.5deg);
}
.headerFocalWall:after {
content: "";
position: absolute;
z-index: 1;
top: 115px;
right: -25px;
width: 120%;
height: 380px;
background-size: cover;
background-image: url(https://static.vecteezy.com/system/resources/previews/009/251/138/original/brick-stone-wall-seamless-pattern-gray-texture-for-wallpaper-illustration-of-a-repeating-background-for-game-graphic-design-vector.jpg);
transform: rotate(10deg);
mix-blend-mode: multiply;
}
.headerFocalAlt:after {
content: "";
position: absolute;
z-index: 0;
width: 100%;
height: 332px;
background: linear-gradient(-7deg, var(--accent), var(--support));
mix-blend-mode: darken;
-webkit-mask-image: url(https://s12.gifyu.com/images/SaldZ.png);
pointer-events: none;
filter: contrast(1.1) brightness(0.75);
}
.headerFocal {
position: absolute;
z-index: 100;
right: 20px;
top: 92px;
display: block;
width: 570px;
height: 908px;
background-image: url(https://s9.gifyu.com/images/SZFqd.png);
background-size: cover;
filter: brightness(0.9);
}
.headerFocal.mOverlay {
position: absolute;
z-index: 100;
right: 20px;
bottom: -329px;
display: block;
width: 570px;
height: 908px;
background-image: url(https://s9.gifyu.com/images/SZF6r.png);
background-size: cover;
}
.headerFocal.mask {
position: absolute;
z-index: 101;
right: 20px;
bottom: -329px;
display: block;
width: 570px;
height: 908px;
background: linear-gradient(180deg, var(--accent) 95px, var(--support) 140px);
mix-blend-mode: overlay;
-webkit-mask-image: url(https://s9.gifyu.com/images/SZF6r.png);
pointer-events: none;
}
.headerFocal.altOverlay {
position: absolute;
z-index: 100;
right: 20px;
bottom: -329px;
display: block;
width: 570px;
height: 908px;
background-image: url(https://s12.gifyu.com/images/SZF87.png);
background-size: cover;
}
.headerFocal.altMask {
position: absolute;
z-index: 101;
right: 20px;
bottom: -329px;
display: block;
width: 570px;
height: 908px;
background: var(--accent);
mix-blend-mode: overlay;
-webkit-mask-image: url(https://s12.gifyu.com/images/SZF87.png);
pointer-events: none;
}
.headerFocal.alt2Overlay {
position: absolute;
z-index: 100;
right: 20px;
bottom: -329px;
display: block;
width: 570px;
height: 908px;
background-image: url(https://s12.gifyu.com/images/SZF8c.png);
background-size: cover;
}
.headerFocal.alt2Mask {
position: absolute;
z-index: 101;
right: 20px;
bottom: -329px;
display: block;
width: 570px;
height: 908px;
background: linear-gradient(-180deg,
var(--feature) 174px,
var(--support) 200px);
mix-blend-mode: overlay;
-webkit-mask-image: url(https://s12.gifyu.com/images/SZF8c.png);
pointer-events: none;
}
/********************
头部过渡
********************/
#headerTransition {
display: block;
width: calc(100% + 1px);
height: 50px;
background-color: var(--accent);
clip-path: polygon(10% 25%, 17% 25%, 17% 0, 28% 0, 30% 27%, 86% 30%, 92% 0, 100% 0, 100% 100%, 0 100%, 0 0, 10% 0);
margin-top: -20px;
}
/****************************************
头部下方
*****************************************/
#underHeader {
position: relative;
display: flex;
flex-direction: row;
background: var(--accent);
padding: 0px 50px 50px;
height: 200px;
}
/* 新增的第二页样式 */
#secondPage {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
z-index: 1000;
color: white;
padding: 50px;
box-sizing: border-box;
overflow-y: auto;
}
#secondPage h2 {
color: var(--accent);
font-size: 2.5em;
margin-bottom: 20px;
text-transform: uppercase;
}
#secondPage p {
font-size: 1.2em;
line-height: 1.6;
margin-bottom: 20px;
}
#secondPage .close-btn {
position: absolute;
top: 20px;
right: 20px;
background: var(--accent);
color: white;
border: none;
padding: 10px 15px;
cursor: pointer;
font-size: 1em;
border-radius: 5px;
}
</style>
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap" rel="stylesheet">
<body class="act-idx code-00 group-4" style="">
<script>
const currentTheme = localStorage.getItem("theme");
if (currentTheme) {
document.documentElement.setAttribute("data-theme", currentTheme);
}
</script>
<!-- Overlays -->
<div class="underlay"></div>
<div class="overlay light"></div>
<div class="overlay dark"></div>
<!-- 新增的第二页内容 -->
<div id="secondPage">
<button class="close-btn" onclick="toggleSecondPage()">关闭</button>
<h2>关于98.7体温</h2>
<p>这是一个基于Mike Pondsmith的赛博朋克世界的原创角色RPG游戏。在这个充满霓虹灯和科技的未来世界中，玩家可以创造自己的角色，探索夜之城的各个角落，参与激动人心的冒险。</p>
<p>游戏背景设定在2077年的夜之城，一个科技高度发达但社会分裂的未来都市。在这里，大公司掌控一切，街头帮派争夺地盘，而像您这样的自由人则在夹缝中求生存。</p>
<p>加入我们，创造您的赛博朋克传奇！</p>
</div>
<wrapper id="boardWrapper">
<wrapper id="innerWrapper">
<!-- Top Bar Nav -->
<nav id="topBar">
<div id='navstrip' align='left'> <a href='javascript:void(0);' onclick='toggleSecondPage()'>98.7 Body Heat</a></div>
<br />
<br />
</nav>
<!-- Header -->
<div class="headerBorderAugment"></div>
<header id="boardHeader">
<div id="headerText">
<h1>Body <span>Heat</span></h1>
<h2><span>\\</span> A pop-up original character rpg based on <b>cyberpunk by mike pondsmith</b></h2>
</div>
<div id="headerImage">
<div class="headerFocal base"></div>
<div class="headerFocal mOverlay"></div>
<div class="headerFocal mask"></div>
<div class="headerFocal altOverlay"></div>
<div class="headerFocal altMask"></div>
<div class="headerFocal alt2Overlay"></div>
<div class="headerFocal alt2Mask"></div>
<div class="headerFocalAlt"></div>
<div class="headerFocalWall"></div>
</div>
</header>
<div id="headerTransition"></div>
<div id="underHeader">
</div>
</wrapper>
</wrapper>
<script type="text/javascript">
if (localStorage.getItem("theme") === "light") {
$('#checkbox').prop('checked', true)
}
var themeToggle = document.querySelector(
'.theme-switch input[type="checkbox"]'
);
function switchTheme(e) {
console.log(themeToggle)
if (e.target.checked) {
document.documentElement.setAttribute("data-theme", "light");
localStorage.setItem("theme", "light");
} else {
document.documentElement.setAttribute("data-theme", "dark");
localStorage.setItem("theme", "dark");
}
}
themeToggle.addEventListener("change", switchTheme, false);
// 新增的切换第二页函数
function toggleSecondPage() {
var secondPage = document.getElementById('secondPage');
if (secondPage.style.display === 'block') {
secondPage.style.display = 'none';
} else {
secondPage.style.display = 'block';
}
}
</script>
<script>
$(document).ready(function() {
var newMsg = parseInt("0") != NaN ? parseInt("0") : 0;
if (newMsg > 0) {
$(".noNewMessage").addClass("newMessage");
} else {
$(".noNewMessage").removeClass("newMessage");
}
});
$(document).ready(function() {
var newAlert = parseInt("0") != NaN ? parseInt("0") : 0;
if (newAlert > 0) {
$(".noNewNotification").addClass("newNotification");
} else {
$(".noNewNotification").removeClass("newNotification");
}
});
</script>
<script>
function usertoggle() {
var x = document.getElementById("linkmenu");
if (x.classList.contains("show")) {
x.classList.remove("show");
} else {
x.classList.add("show");
}
}
scrollingElement = document.scrollingElement || document.body;
function scrollToBottom() {
scrollingElement.scrollTop = scrollingElement.scrollHeight;
}
function scrollToTop(id) {
scrollingElement.scrollTop = 0;
}
//Require jQuery
function scrollSmoothToBottom(id) {
$(scrollingElement).animate({
scrollTop: document.body.scrollHeight
},
500
);
}
//Require jQuery
function scrollSmoothToTop(id) {
$(scrollingElement).animate({
scrollTop: 0
},
500
);
}
</script>
<script>
document.querySelectorAll('[name="sub_id"] option').forEach(e => {
e.innerHTML = e.innerHTML.replace(' »', '')
})
function navTog() {
const x = document.getElementById("userToggle");
x.classList.toggle("show");
}
function subaccountstog() {
const x = document.getElementById("avatarSubaccounts");
x.classList.toggle("show")
}
if (!(document.querySelector(".imgload-Yes"))) {
let switcher = document.querySelector("#subaccounts_menu select");
let characters = switcher.querySelectorAll("option");
let newSwitch = `<div class="switch">`;
characters.forEach((character, i) => {
if (i !== 0) {
let characterName = character.innerText.trim();
let characterId = character.value;
newSwitch += `<a title="${characterName}"><label class="switch-block">
<input type="checkbox" value="${characterId}" onchange="this.form.submit()" name="sub_id" />
<div style="width: 45px; height: 45px; border-radius: 8px; background-size: cover; background-position: center; background-image: url(https://files.jcink.net/uploads2/bodyheat/av-${characterId}.png), url(https://files.jcink.net/uploads2/bodyheat/av-${characterId}.gif), url(https://files.jcink.net/uploads2/bodyheat/av-${characterId}.jpg), url(https://files.jcink.net/uploads2/bodyheat/av-${characterId}.jpeg), url(https://cdn.discordapp.com/attachments/1201396006944772096/1202848282510889010/image.png);"></div></label></a>`;
}
});
newSwitch += `</div>`;
switcher.insertAdjacentHTML("afterend", newSwitch);
switcher.remove();
}
</script>
</body>
</html>
index.html
style.css
index.js