star-chart/index.html at main · kzy77/star-chart · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原神风格3D卡片导航</title>
    <meta name="description" content="一个基于Three.js的原神风格3D卡片导航页面">
    <meta name="keywords" content="原神, 3D, 导航, Three.js, WebGL">
    <meta name="author" content="Chunk">
    <!-- 修复Permissions-Policy -->
    <meta http-equiv="Permissions-Policy" content="interest-cohort=(), accelerometer=(), autoplay=(), camera=(), encrypted-media=(), fullscreen=(), geolocation=(), gyroscope=(), magnetometer=(), microphone=(), midi=(), payment=(), picture-in-picture=(), sync-xhr=(), usb=()">
    <!-- 安全策略 - 更新图片URL格式 -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline' https://fonts.cloudflare.com https://www.cloudflare.com; font-src 'self' https://fonts.cloudflare.com https://www.cloudflare.com; img-src 'self' data: https://*.imgur.com https://*.pixiv.re https://*.pixiv.cat https://*.pixiv.net blob: https: http: http://localhost:*; connect-src 'self' https://api.mossia.top http://localhost:*; worker-src 'self' blob:;">
    <!-- 引用本地样式 -->
    <link rel="stylesheet" href="style.css">
    <!-- 使用Cloudflare CDN加载字体 -->
    <link href="https://www.cloudflare.com/cloudflare-fonts/?family=Orbitron:wght@400;700;900&display=swap" rel="stylesheet">
</head>
<body>
    <div id="info">
        <h1>原神风格3D卡片导航</h1>
        <p>将鼠标悬停在卡片上可暂停旋转，点击卡片可访问对应网站</p>
        <p>本代码均由AI生成，如有问题，请反馈给AI</p>
    </div>

    <!-- 控制面板（默认隐藏，R18模式仅在开发者工具下显示） -->
    <div id="control-panel" class="panel-hidden">
        <h3>控制面板</h3>
        <button onclick="setRandomBackground()">随机切换背景</button>
        <button onclick="refreshAllCardBackgrounds()">刷新所有卡片背景</button>
        <div id="r18-controls" style="display: none; margin-top: 10px; display: flex; align-items: center; justify-content: space-between;">
            <label for="r18-toggle" style="margin-right: 10px; color: white; font-size: 14px;">R18模式:</label>
            <input type="checkbox" id="r18-toggle" onchange="toggleR18Mode(this.checked)">
        </div>
        <div style="margin-top: 10px; display: flex; flex-direction: column;">
            <label for="rotation-speed" style="color: white; font-size: 14px; margin-bottom: 5px;">旋转速度:</label>
            <div style="display: flex; align-items: center;">
                <input type="range" id="rotation-speed" min="0.01" max="0.3" step="0.01" value="0.15" style="flex-grow: 1;" oninput="adjustRotationSpeed(this.value)">
                <span id="speed-value" style="color: white; margin-left: 10px; min-width: 40px; text-align: right;">0.15</span>
            </div>
        </div>
    </div>

    <!-- 控制面板切换按钮 -->
    <div id="toggle-panel-btn" onclick="toggleControlPanel()">
        <span id="toggle-icon">≡</span>
    </div>

    <script type="module" src="main.js"></script>

    <style>
        #info {
            position: fixed;
            top: 10px;
            width: 100%;
            text-align: center;
            color: #ffffff;
            font-family: 'Orbitron', sans-serif;
            text-shadow: 0 0 5px rgba(0, 0, 0, 0.8), 0 0 10px rgba(148, 0, 211, 0.5);
            z-index: 100;
            pointer-events: none;
            padding: 10px;
        }

        #info h1 {
            font-size: 24px;
            margin-bottom: 5px;
            color: #ffffff;
            text-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
            transition: color 0.8s ease, text-shadow 0.8s ease;
        }

        #info p {
            font-size: 16px;
            margin: 5px 0;
            transition: color 0.5s ease, text-shadow 0.5s ease;
        }

        #control-panel {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: rgba(0, 0, 0, 0.7);
            padding: 15px;
            border-radius: 10px;
            color: white;
            font-family: 'Orbitron', sans-serif;
            z-index: 1000;
            transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
        }

        #control-panel button {
            background: linear-gradient(135deg, #9370DB, #4B0082);
            border: none;
            color: white;
            padding: 8px 15px;
            margin: 5px;
            border-radius: 5px;
            cursor: pointer;
            font-family: 'Orbitron', sans-serif;
            transition: all 0.3s ease;
            display: block;
            width: 100%;
        }

        #control-panel button:hover {
            background: linear-gradient(135deg, #B19CD9, #663399);
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        }

        #toggle-panel-btn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #9370DB, #4B0082);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            cursor: pointer;
            z-index: 1001;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
        }

        #toggle-panel-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
        }

        #toggle-icon {
            font-size: 24px;
            transition: transform 0.3s ease;
        }

        .panel-hidden {
            transform: translateX(120%);
            opacity: 0;
        }

        .star-trail {
            position: absolute;
            width: 6px;
            height: 6px;
            background: radial-gradient(circle, rgba(255, 215, 0, 0.8) 0%, transparent 70%);
            border-radius: 50%;
            pointer-events: none;
            z-index: 1;
            opacity: 0.7;
            animation: fade 1s forwards;
        }

        @keyframes fade {
            0% { transform: scale(0.5); opacity: 0.7; }
            100% { transform: scale(1.5); opacity: 0; }
        }

        @media (max-width: 768px) {
            #info h1 { font-size: 20px; }
            #info p { font-size: 14px; }
        }
    </style>
</body>
</html>