Super Fantasy 1
正在加载HTML……
若长时间无反应，请刷新页面，或访问无障碍模式页面
[[embed]]
<iframe src="https://scp-wiki-cn.wikidot.com/fragment:super-fantasy-1/code/1"></iframe>
[[/embed]]
show code
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>卡牌展示</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- 配置Tailwind自定义颜色 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
accent: '#CFB179',
cardBack: '#000000',
cardFront: '#FFFFFF',
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.card-flip {
transform-style: preserve-3d;
transition: transform 0.6s;
}
.card-flipped {
transform: rotateY(180deg);
}
.card-face {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 16px;
border: 2px solid theme('colors.accent');
}
.card-back {
transform: rotateY(0deg);
background-color: theme('colors.cardBack');
background-size: cover;
background-position: center;
}
.card-front {
transform: rotateY(180deg);
background-color: theme('colors.cardFront');
background-size: cover;
background-position: center;
}
.card-container {
perspective: 1200px;
}
.info-tooltip {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
z-index: 10;
}
.card-wrapper:hover .info-tooltip {
opacity: 1;
visibility: visible;
}
/* 卡牌比例 9.3:15.68 实现 */
.card-aspect {
padding-top: calc(15.68 / 9.3 * 100%);
position: relative;
height: 0;
}
/* 加载提示样式 */
.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.8);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 1000;
transition: opacity 0.5s ease-out;
}
.loading-spinner {
width: 50px;
height: 50px;
border: 5px solid #f3f3f3;
border-top: 5px solid theme('colors.accent');
border-radius: 50%;
animation: spin 1s linear infinite;
margin-bottom: 1rem;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
quote {
padding: 0.5rem 0.6rem;
display: block;
font-style: italic;
box-shadow: inset 0.2rem 0rem #CFB179;
margin: 0.8rem 0rem;
font-size: 85%;
}
span.work-title {
display: block;
font-weight: bold;
}
.info-tooltip {
width: min(16rem, 65vw);
}
@media (max-width: 876px) {
.info-tooltip {
transform: unset;
}
}
.card-wrapper[data-card-id="30"] .card-face {
border: none;
background-color: transparent;
background-size: contain;
background-repeat: no-repeat;
scale: 1.3;
}
.card-wrapper[data-card-id="20"] .card-face {
border: none;
background-color: transparent;
background-size: contain;
background-repeat: no-repeat;
scale: 1.08;
top: 11px;
}
/* 控制按钮样式 */
.control-buttons {
margin-bottom: 1.5rem;
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.control-button {
background-color: theme('colors.accent');
color: white;
border: none;
padding: 0.5rem 1.25rem;
border-radius: 4px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: background-color 0.2s;
}
.control-button:hover {
background-color: #b89a66;
}
header {
margin: -2rem -1.5rem 2rem -1.5rem;
}
section {
margin-bottom: 2rem;
}
}
</style>
</head>
<body class="bg-gray-100 min-h-screen p-4 md:p-6 lg:p-8">
<!-- 加载提示 -->
<div id="loading提示" class="loading-overlay">
<div class="loading-spinner"></div>
<p class="text-gray-700 text-lg font-medium">正在加载卡牌…</p>
</div>
<!-- 网页头部 -->
<header class="font-serif bg-[#CFB179] text-black p-8 text-center">
<h1 class="text-6xl font-bold mb-2">鎏金幻梦</h1>
<p class="text-2xl">幻想月卡面重绘计划</p>
</header>
<section>
<div class="mt-4 text-left text-black" id="other-header-text">
<p>这是一个非官方的艺作页面，展示了2025幻想月所有卡牌的“重制版”。</p>
</div>
</section
<!-- 控制按钮 -->
<div class="control-buttons">
<button id="flip-all-front" class="control-button">
<i class="fa fa-arrow-circle-up"></i> 全部翻到正面
</button>
<button id="flip-all-back" class="control-button">
<i class="fa fa-arrow-circle-down"></i> 全部翻到背面
</button>
</div>
<!-- 卡牌容器 -->
<div id="card-grid" class="grid gap-4 md:gap-6 lg:gap-8 justify-items-center">
<!-- 卡牌将通过JavaScript动态生成 -->
</div>
<div style="display:block; width:100%; margin-bottom: 40rem;">
<br>
</div>
<script>
const cardsData = [
{
id: 1,
name: "骑士",
description: "<span class='work-title'>深水黎明 - The Obsidian Shard</span><span class='work-keywords'>末日之后/晨昏/宇宙的心室</span><quote>“去找黎明吧。他或许能把你带回人间。”</quote>",
link: "https://scp-wiki-cn.wikidot.com/wanderers:dawnwell",
backImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/back-library-fixed.svg",
frontImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/day1-fixed.svg"
},
{
id: 2,
name: "四叶草",
description: "<span class='work-title'>SCP-3236 - Kcorena/Odeo/Re_spectators</span><span class='work-keywords'>流星/剑/别让火熄了</span><quote>火在燃烧，火在凝视，火在以火书写名字。</quote>",
link: "https://scp-wiki-cn.wikidot.com/scp-cn-3236",
backImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/back-scp-fixed.svg",
frontImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/day2-fixed.svg"
},
{
id: 3,
name: "船",
description: "<span class='work-title'>行至星海边缘 - Sylvia_Blank/DustStore</span><span class='work-keywords'>远游/旅札/沧海一粟</span><quote>“我的一等星，仓渊。我在想你。”</quote>",
link: "https://scp-wiki-cn.wikidot.com/gaertn-ship",
backImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/back-story-fixed.svg",
frontImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/day3-fixed.svg"
},
{
id: 4,
name: "房子",
description: "<span class='work-title'>个人梦盒站点：「无隙困室」事件（23.1.17留档） - TRhine</span><span class='work-keywords'>密室/清醒梦/不完全本格</span><quote>“以上，就是于整起1.14事件中，凶手所使用的机关手法的全部详细始末。”</quote>",
link: "https://scp-wiki-cn.wikidot.com/locked-room-mystery",
backImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/back-goi-fixed.svg",
frontImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/day4-fixed.svg"
},
{
id: 5,
name: "树",
description: "<span class='work-title'>毕业季 - two cat/Elena Coli</span><span class='work-keywords'>学校/基金会/孩子们</span><quote>哪怕那个所谓的解实际上并不存在，哪怕必须要为此付出代价，也仍然要去试着接近它……</quote>",
link: "https://scp-wiki-cn.wikidot.com/miaomiaowu",
backImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/back-story-fixed.svg",
frontImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/day5-fixed.svg"
},
{
id: 6,
name: "云",
description: "<span class='work-title'>行动记录：云游四海 - ColorlessL</span><span class='work-keywords'>实事市/降雨云/数据层</span><quote>……一人类与一球体自高空坠落中大喊“我日”，视听觉效果十分震撼，令人印象深刻。</quote>",
link: "https://scp-wiki-cn.wikidot.com/cloud-traveller",
backImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/back-story-fixed.svg",
frontImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/day6-fixed.svg"
},
{
id: 7,
name: "蛇",
description: "<span class='work-title'>花之影 - Mercuresphere</span><span class='work-keywords'>视线/家纹/闲言碎语</span><quote>在这个世界上，每个人所做出的行动，都只是在无意识中，复演更为古老的故事当中的角色吗？</quote>",
link: "https://scp-wiki-cn.wikidot.com/wanderers:hana-no-kage",
backImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/back-library-fixed.svg",
frontImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/day7-fixed.svg"
},
{
id: 8,
name: "棺材",
description: "<span class='work-title'>制棺部门员工手册——序言 - H-Storm Z</span><span class='work-keywords'>死亡定格/预知/英雄主义</span><quote>……但沉默过后，我的人生并没有按照那样的预言般结束。因此，我们更应该坦荡地活在世界上，正义和胜利永远倾向我们。</quote>",
link: "https://scp-wiki-cn.wikidot.com/coffinmakers",
backImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/back-story-fixed.svg",
frontImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/day8-fixed.svg"
},
{
id: 9,
name: "花束",
description: "<span class='work-title'>迷花梦 - ChroIridium</span><span class='work-keywords'>黄金雨/长梦/迷途</span><quote>你又搞砸了，你们最终还是失散了。像两颗流星，一颗燃烧殆尽，一颗仍然在孤独地坠落。</quote>",
link: "https://scp-wiki-cn.wikidot.com/maiihananoyume",
backImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/back-story-fixed.svg",
frontImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/day9-fixed.svg"
},
{
id: 10,
name: "镰刀",
description: "<span class='work-title'>農夫與他的小鐮刀的平凡一生 - MScarlet</span><span class='work-keywords'>位面穿越/人的故事/镰的一生</span><quote>或許他一生中最為不凡的地方，便是有一柄曾在諸天萬界之間留名的小鐮刀，把漫長鐮生中的最後一小段時間留給了他。</quote>",
link: "https://scp-wiki-cn.wikidot.com/wanderers:darkly-hand-scythe",
backImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/back-library-fixed.svg",
frontImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/day10-fixed.svg"
},
{
id: 11,
name: "鞭子",
description: "<span class='work-title'>SCP-CN-3460 - Rye Travis</span><span class='work-keywords'>鞭子/绳子/小孩子</span><quote>线的洪流跨越奔流不息的两江，跨越终日弥漫的市井烟火，汇聚于此。我是手握阿里阿德涅之线的忒修斯。我已寻到那头怪物藏身的洞穴。</quote>",
link: "https://scp-wiki-cn.wikidot.com/scp-cn-3460",
backImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/back-scp-fixed.svg",
frontImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/day11-fixed.svg"
},
{
id: 12,
name: "鸟",
description: "<span class='work-title'>SCP-CN-3334 - MannYen/Mori Sama</span><span class='work-keywords'>人/金枝/苍穹</span><quote>我常常以为，这是独属于我的幻想。但是它却和你们所有人都息息相关。所以不如分享给你们，因为所有身影，无论是友是敌，早都已消散无踪。</quote>",
link: "https://scp-wiki-cn.wikidot.com/scp-cn-3334",
backImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/back-scp-fixed.svg",
frontImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/day12-fixed.svg"
},
{
id: 13,
name: "孩子",
description: "<span class='work-title'>冬末，冬 - Ghost hat</span><span class='work-keywords'>未来/生命/冬</span><quote>你是鲜活的生命，是宇宙中一切爱意凝结成的硕果，你将创造天地间的一切可能。</quote>",
link: "https://scp-wiki-cn.wikidot.com/wanderers:late-winter-winter",
backImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/back-library-fixed.svg",
frontImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/day13-fixed.svg"
},
{
id: 14,
name: "狐",
description: "<span class='work-title'>沉沦夜国与红标旷野 - HuaNianQWQ</span><span class='work-keywords'>舞/舞/舞</span><quote>泪水的赠礼，胡芦的筹码。接受自己的证明。我与你同在。</quote>",
link: "https://scp-wiki-cn.wikidot.com/dancedancedance",
backImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/back-story-fixed.svg",
frontImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/day14-fixed.svg"
},
{
id: 15,
name: "熊",
description: "<span class='work-title'>既是机遇，亦为灾厄——待登录异常#10530「蜜人」观察报告简述 - CaroyalKKaia/Meauzeek Zampona</span><span class='work-keywords'>蜜/秘/谧</span><quote>在展台的正中央，摆着一个保存完整，品质优良的样品。我看清了他那独特的日耳曼民族样貌，那大大张开的嘴巴，以及永远凝固在那对已彻底钙化的瞳孔中的惊恐。</quote>",
link: "https://scp-wiki-cn.wikidot.com/auv-mijiha",
backImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/back-story-fixed.svg",
frontImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/day15-fixed.svg"
},
{
id: 16,
name: "星",
description: "<span class='work-title'>SCP-CN-3193 - DouglasLiu/wlft</span><span class='work-keywords'>稀金/北极星/漫长冬夜</span><quote>无人答复。北极星已彻底凝结，光芒被盗，宛如一座亘古的冰雕。世界陷入永恒寂静。</quote>",
link: "https://scp-wiki-cn.wikidot.com/scp-cn-3193",
backImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/back-scp-fixed.svg",
frontImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/day16-fixed.svg"
},
{
id: 17,
name: "鹳",
description: "<span class='work-title'>SCP-CN-2377 - TomJens</span><span class='work-keywords'>儿生/母难/拥抱</span><quote>这不是因为她不爱孩子或者是个坏妈妈。……你要学会和她并肩作战。她会好起来的。</quote>",
link: "https://scp-wiki-cn.wikidot.com/scp-cn-2377",
backImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/back-scp-fixed.svg",
frontImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/day17-fixed.svg"
},
{
id: 18,
name: "狗",
description: "<span class='work-title'>《须知六函》 - Angoulmuck</span><span class='work-keywords'>信/友人/命运</span><quote>愿月与猎之神阿尔忒弥斯的银矢护佑你的梦境，远离林中诡谲的回响。</quote>",
link: "https://scp-wiki-cn.wikidot.com/wanderers:sixlettersonnecessity",
backImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/back-library-fixed.svg",
frontImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/day18-fixed.svg"
},
{
id: 19,
name: "塔",
description: "<span class='work-title'>SCP-CN-3108 - LPCaCO3</span><span class='work-keywords'>挣扎/向上/虚妄</span><quote>然后，我突然意识到，我真的在上升，那个曾经遥不可及的天井，此刻正逐渐变得触手可及。</quote>",
link: "https://scp-wiki-cn.wikidot.com/scp-cn-3108",
backImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/back-scp-fixed.svg",
frontImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/day19-fixed.svg"
},
{
id: 20,
name: "花园",
description: "<span class='work-title'>吾等即战争：魔法少女们的1944 - MrPasserby/OxygenNine</span><span class='work-keywords'>魔法少女/二战/遥远的桥</span><quote>“我们已用金属和丝带支付了你的痛苦，从此两清。”</quote>",
link: "https://scp-wiki-cn.wikidot.com/mrpasserby-oxygennine-proposal",
backImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/back-001-fixed.svg",
frontImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/day20-fixed.svg"
},
{
id: 21,
name: "山",
description: "<span class='work-title'>SCP-CN-3932 - Agent Phage/haplocalyx</span><span class='work-keywords'>侏罗纪/白垩纪/第四纪</span><quote>SCP-CN-3932内部存在封闭、独立且独特的生态系统，整体涵盖从三叠纪中期到白垩纪晚期的绝大多数物种。</quote>",
link: "https://scp-wiki-cn.wikidot.com/scp-cn-3932",
backImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/back-scp-fixed.svg",
frontImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/day21-fixed.svg"
},
{
id: 22,
name: "十字路口",
description: "<span class='work-title'>奇丹记 - Gali Z R</span><span class='work-keywords'>因果/选择/后悔药</span><quote>……惟轻叹一声，归佣舍，束行囊，翌日辰，雪霁，只身去沈家，不复归，亦不知往何，委心而行。</quote>",
link: "https://scp-wiki-cn.wikidot.com/wanderers:qidanji",
backImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/back-library-fixed.svg",
frontImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/day22-fixed.svg"
},
{
id: 23,
name: "鼠",
description: "<span class='work-title'>鼠王 - Odeo/Elena Coli</span><span class='work-keywords'>Ratten/Retter/Reliquie</span><quote>它们在粘稠的黑暗里横冲直撞，漫无目的地游荡着，而我毫不怀疑，一旦它们的王——所谓的鼠王——诞生于世，它们便将破墙而出，冲到破碎的天空下，将这锅正在熬煮的、混合了雨水和血的大乱炖吞吃殆尽。</quote>",
link: "https://scp-wiki-cn.wikidot.com/rattenkoenig",
backImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/back-story-fixed.svg",
frontImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/day23-fixed.svg"
},
{
id: 24,
name: "心",
description: "<span class='work-title'>不适用信息已编辑 - Re_spectators</span><span class='work-keywords'>蛾/心/门</span><quote>他们在告诉我——我还没有完成这部作品，我要让它诞生于世。</quote>",
link: "https://scp-wiki-cn.wikidot.com/non-applicable-item-number-redacted",
backImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/back-scp-fixed.svg",
frontImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/day24-fixed.svg"
},
{
id: 25,
name: "戒指",
description: "<span class='work-title'>赡部洲之主 - Meowait</span><span class='work-keywords'>狄/敌/谛</span><quote>朱温见梦中赤神，命人在黄河泛舟以献童尸。梁唐之间，强者杀妻，弱者食子。人性尽失，诸侯皆成行尸走肉。</quote>",
link: "https://scp-wiki-cn.wikidot.com/the-lord-of-jambudvipa",
backImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/back-story-fixed.svg",
frontImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/day25-fixed.svg"
},
{
id: 26,
name: "书",
description: "<span class='work-title'>SCP · CN · MMMDCCCLXVIII - Dr Hormress</span><span class='work-keywords'>Oblivio/Timor/Amor</span><quote>耶蒙德松陷入了思考。他记得他每天看着山间的日出，记得父亲在世时告诫他不要越过那几座山，记得每天晚上回到家中，熊熊炉火噼啪作响，但他的家乡叫什么名字？——他忘记了。</quote>",
link: "https://scp-wiki-cn.wikidot.com/scp-cn-3868",
backImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/back-scp-fixed.svg",
frontImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/day26-fixed.svg"
},
{
id: 27,
name: "信",
description: "<span class='work-title'>如是点燃千早爱音 - highlightingman</span><span class='work-keywords'>火浪 · 工厂 · 深红之王</span><quote>……于是我对红鸟说，接下来要做的不是进食，而是吐出。吐出那些鲜红的火浪，让他自己回馈以能量与故事。我们是贪婪的，无休止吞食万物的生灵，但不止是贪婪的，无休止吞食万物的生灵。</quote>",
link: "https://scp-wiki-cn.wikidot.com/gharfa-ruh",
backImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/back-story-fixed.svg",
frontImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/day27-fixed.svg"
},
{
id: 28,
name: "男人",
description: "<span class='work-title'>我们在父背受敌的影子里 - Kanie Ja/Nightingale_FZ</span><span class='work-keywords'>缺口/反哺/往事不醒</span><quote>于是男人的姓名不再重要，男人的身份无人关切。</quote>",
link: "https://scp-wiki-cn.wikidot.com/scp-cn-3884",
backImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/back-scp-fixed.svg",
frontImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/day28-fixed.svg"
},
{
id: 29,
name: "女人",
description: "<span class='work-title'>苍之预言书，第四卷，162页：“星神之树” - Sharia Vanilla</span><span class='work-keywords'>处女宫/Αστρα/实现的愿望</span><quote>感谢星女神（Αστρα）的眷顾，您可以随时使用右侧的进度回溯回到每一株你曾到过的枞树下，重新决定前进的方向……</quote>",
link: "https://scp-wiki-cn.wikidot.com/chronicle-4-162",
backImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/back-goi-fixed.svg",
frontImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/day29-fixed.svg"
},
{
id: 30,
name: "百合",
description: "<span class='work-title'>百合 二篇 - wlft</span><span class='work-keywords'>魔王/骑士/未完结的故事</span><quote>“别的人都不能理解她的软弱，但我能懂。”魔王轻声开口。“最容易被击破的，显然是那位精灵的法师——简·爱莲。”</quote>",
link: "https://scp-wiki-cn.wikidot.com/lily2pian",
backImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/back-double-fixed.svg",
frontImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/day30-fixed.svg"
},
{
id: 31,
name: "太阳",
description: "<span class='work-title'>SCP-CN-3823 - woodenwolf</span><span class='work-keywords'>构史/并非狄瓦/不中奇语</span><quote>我从未经历过光季，但我在学习历史时也会思考：如果太阳这般危险，那么过去的主母们为何没有将祂消灭？</quote>",
link: "https://scp-wiki-cn.wikidot.com/scp-cn-3823",
backImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/back-scp-fixed.svg",
frontImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/day31-fixed.svg"
},
{
id: 32,
name: "月亮",
description: "<span class='work-title'>银月高悬 - Lyrics Linn</span><span class='work-keywords'>兽径/林窗/独角兽</span><quote>我想象着把这张脸和乱蓬蓬的头发、灰扑扑的衣物组合起来的样子，可能已经很接近初见时宛若逃犯的里斯·兰伯特了，不由自娱自乐地呵呵笑了起来。</quote>",
link: "https://scp-wiki-cn.wikidot.com/wanderers:travellersbook-silver-moonrise",
backImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/back-library-fixed.svg",
frontImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/day32-fixed.svg"
},
{
id: 33,
name: "钥匙",
description: "<span class='work-title'>震灾与蟠祭 - Sirius Dawn</span><span class='work-keywords'>毁灭/毁灭/毁灭</span><quote>当然是以痛苦。不必特意去做什么，我们只需要见证这场角争就好。有在梦中落成的功业，有在梦中犯下的罪愆，而我们终会知晓，二者同根同源。</quote>",
link: "https://scp-wiki-cn.wikidot.com/wolfdivided",
backImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/back-story-fixed.svg",
frontImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/day33-fixed.svg"
},
{
id: 34,
name: "鱼",
description: "<span class='work-title'>SCP-CN-2178 - Baby Bat</span><span class='work-keywords'>雨 · 鲸 · 死</span><quote>……他的队友，他的世界，还有他的使命。/没有去往何处的错愕，没有抽离生死的恐慌，/只有一名老兵在思考自己是否为队友做得还不够多。……</quote>",
link: "https://scp-wiki-cn.wikidot.com/scp-cn-2178",
backImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/back-scp-fixed.svg",
frontImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/day34-fixed.svg"
},
{
id: 35,
name: "锚",
description: "<span class='work-title'>千神殿的一日 - Sharethesilence/EMON-X</span><span class='work-keywords'>畸零人/寻找/残缺的神</span><quote>他们害怕与失信者接触，更怕自己有朝一日成为失信者。在千神殿的历史上曾经发生过，失去信仰的人带着大量的神像和物品沉入海底，导致三分之一个岛屿的居民失去代表自己信仰的神像。</quote>",
link: "https://scp-wiki-cn.wikidot.com/wanderers:one-day-in-patheon",
backImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/back-library-fixed.svg",
frontImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/day35-fixed.svg"
},
{
id: 36,
name: "十字架",
description: "<span class='work-title'>SCP-CN-3066 - Universe647</span><span class='work-keywords'>生命/安卡十字/永恒</span><quote>目前认为SCP-138是真正的永续性存在，因此对其的逆向研究很可能获得真正的永续方法，已将研究重心放在该提案。该提案的可行性期望为高。</quote>",
link: "https://scp-wiki-cn.wikidot.com/scp-cn-3066",
backImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/back-scp-fixed.svg",
frontImageURL: "https://scpsandboxcn.wikidot.com/local--files/super-fantasy/day36-fixed.svg"
},
//补位
]
// 获取卡牌容器和加载提示
const cardGrid = document.getElementById('card-grid');
const loading提示 = document.getElementById('loading提示');
const flipAllFrontBtn = document.getElementById('flip-all-front');
const flipAllBackBtn = document.getElementById('flip-all-back');
// 根据屏幕宽度设置网格列数
function setGridColumns() {
const width = window.innerWidth;
let columns = 1; // 默认1列（手机）
if (width >= 1200) {
columns = 4; // 桌面端4*9布局
} else if (width >= 992) {
columns = 4; // 大屏幕平板4*9布局
} else if (width >= 768) {
columns = 3; // 平板3*12布局
}
cardGrid.style.gridTemplateColumns = `repeat(${columns}, minmax(0, 1fr))`;
return columns;
}
// 初始化网格列数
let currentColumns = setGridColumns();
// 监听窗口大小变化，调整网格布局
window.addEventListener('resize', () => {
currentColumns = setGridColumns();
// 重新计算所有提示框位置
updateTooltipPositions();
});
// 更新所有提示框位置
function updateTooltipPositions() {
const cardWrappers = document.querySelectorAll('.card-wrapper');
cardWrappers.forEach((wrapper, index) => {
const column = index % currentColumns;
const tooltip = wrapper.querySelector('.info-tooltip');
if (tooltip) {
// 移除所有位置相关类
tooltip.classList.remove('left-full', 'right-full', 'top-full', 'ml-2', 'mr-2', 'mt-2', '-translate-y-1/2', 'translate-x-[-50%]');
// 根据列数和总列数设置位置
if (currentColumns === 1) {
// 单列布局 - 提示框显示在卡牌正下方
tooltip.classList.add('top-full', 'mt-2', 'translate-x-[-50%]');
} else if (column === 0) {
// 多列布局第一列 - 提示框显示在右侧
tooltip.classList.add('left-full', 'ml-2', '-translate-y-1/2');
} else {
// 多列布局其他列 - 提示框显示在左侧
tooltip.classList.add('right-full', 'mr-2', '-translate-y-1/2');
}
}
});
}
// 全部翻到正面
function flipAllToFront() {
const allCards = document.querySelectorAll('.card-flip');
allCards.forEach(card => {
if (!card.classList.contains('card-flipped')) {
card.classList.add('card-flipped');
}
});
}
// 全部翻到背面
function flipAllToBack() {
const allCards = document.querySelectorAll('.card-flip');
allCards.forEach(card => {
if (card.classList.contains('card-flipped')) {
card.classList.remove('card-flipped');
}
});
}
// 添加按钮事件监听
flipAllFrontBtn.addEventListener('click', flipAllToFront);
flipAllBackBtn.addEventListener('click', flipAllToBack);
// 创建卡牌元素并添加到容器
function createCards() {
cardsData.forEach((card, index) => {
// 计算当前卡牌所在列
const column = index % currentColumns;
// 创建卡牌包装器
const cardWrapper = document.createElement('div');
cardWrapper.className = `card-wrapper relative w-full max-w-[230px]`;
cardWrapper.dataset.cardId = card.id;
// 创建卡牌信息提示框
const infoTooltip = document.createElement('div');
// 基础类
let tooltipClass = 'info-tooltip absolute bg-white p-4 rounded-lg shadow-lg border border-gray-200 w-56';
// 根据列数和总列数设置位置
if (currentColumns === 1) {
// 单列布局 - 提示框显示在卡牌正下方
tooltipClass += ' top-full mt-2 translate-x-[-50%]';
} else if (column === 0) {
// 多列布局第一列 - 提示框显示在右侧
tooltipClass += ' left-full ml-2 top-1/2 -translate-y-1/2';
} else {
// 多列布局其他列 - 提示框显示在左侧
tooltipClass += ' right-full mr-2 top-1/2 -translate-y-1/2';
}
infoTooltip.className = tooltipClass;
infoTooltip.innerHTML = `
<h3 class="font-semibold text-gray-800 mb-1">${card.name}</h3>
<p class="text-sm text-gray-600 mb-3">${card.description}</p>
<a href="${card.link}" class="inline-flex items-center text-accent hover:text-accent/80 text-sm font-medium" target="_parent">
点此阅读 <i class="fa fa-arrow-right ml-1"></i>
</a>
`;
// 创建卡牌容器
const cardContainer = document.createElement('div');
cardContainer.className = 'card-container w-full cursor-pointer';
// 创建卡牌比例容器（用于实现9.3:15.68比例）
const cardAspect = document.createElement('div');
cardAspect.className = 'card-aspect';
// 创建卡牌翻转容器
const cardFlip = document.createElement('div');
cardFlip.className = 'card-flip absolute top-0 left-0 w-full h-full';
// 创建卡牌背面
const cardBack = document.createElement('div');
cardBack.className = `card-face card-back`;
// 设置背面背景图
cardBack.style.backgroundImage = `url(${card.backImageURL})`;
// 创建卡牌正面
const cardFront = document.createElement('div');
cardFront.className = `card-face card-front`;
// 设置正面背景图
cardFront.style.backgroundImage = `url(${card.frontImageURL})`;
// 组装卡牌元素
cardFlip.appendChild(cardBack);
cardFlip.appendChild(cardFront);
cardAspect.appendChild(cardFlip);
cardContainer.appendChild(cardAspect);
cardWrapper.appendChild(infoTooltip);
cardWrapper.appendChild(cardContainer);
cardGrid.appendChild(cardWrapper);
// 添加点击翻转事件
cardContainer.addEventListener('click', () => {
cardFlip.classList.toggle('card-flipped');
});
});
// 所有卡牌创建完成后隐藏加载提示
setTimeout(() => {
loading提示.style.opacity = "0";
// 等待淡出动画完成后移除元素
setTimeout(() => {
loading提示.style.display = "none";
}, 500);
}, 300); // 短暂延迟以确保视觉效果
}
// 初始化创建卡牌
createCards();
</script>
</body>
</html>
页面版本：0, 最后编辑于: 2025/8/14 02:57:07 (400 日前), 现时评分: 1