NASA-Punk_Observatory_Optimized/neptune.html at main · ZZY-STACK/NASA-Punk_Observatory_Optimized · 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
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NASA-Punk : SOL-VIII (海王星)</title>
    <link rel="stylesheet" href="./styles/main.css">
<link rel="stylesheet" href="./styles/transition.css">
<!-- <link rel="stylesheet" href="./styles/cursor.css"> -->
    <style>
        .neptune-intro-overlay {
            position: fixed;
            top: 1.5rem;
            left: 1.5rem;
            z-index: 1200;
            width: min(360px, 28vw);
            padding: 1rem 1.1rem;
            border-radius: 16px;
            background: rgba(4, 12, 24, 0.82);
            border: 1px solid rgba(255, 255, 255, 0.12);
            box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
            color: #f6fbff;
            font-family: "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
            font-size: 0.95rem;
            line-height: 1.7;
            letter-spacing: 0.02em;
            text-align: left;
            overflow-wrap: break-word;
        }

        .neptune-intro-text {
            margin: 0;
            white-space: pre-wrap;
        }

        .neptune-intro-overlay.fade-out {
            opacity: 0;
            transition: opacity 0.8s ease;
            pointer-events: none;
        }

        /* 海王星专用：深邃的电蓝色光晕 */
        .p-neptune-theme {
            box-shadow: 0 0 12px rgba(66, 135, 245, 0.8);
            background-color: #4287f5;
        }

        /* 数据面板 - 增加宽度 */
        .dashboard {
            position: fixed;
            bottom: 20px;
            right: 150px;
            z-index: 100;
            width: 450px; /* 从380px增加到450px */
            padding: 20px;
            background: #0d1430;
            border: 2px solid #4287f5;
            border-radius: 12px;
            text-align: center;
        }
        .data-row {
            display: flex;
            justify-content: space-between;
        }
        .data-col {
            width: 31%; /* 调整宽度，为长标签留出更多空间 */
            margin: 0 1%; /* 添加边距 */
        }
        .col-label {
            font-size: 13px; /* 稍微减小字体大小以适应长标签 */
            color: #a0c0ff;
            margin-bottom: 10px;
            word-wrap: break-word; /* 允许长文本换行 */
            white-space: normal; /* 允许正常换行 */
        }
        .num-box {
            font-size: 22px;
            font-weight: bold;
            color: #4287f5;
            min-height: 30px;
        }
    </style>
</head>

<body data-planet="neptune">
<div class="transition-curtain start-covered" id="global-curtain">
    <div class="curtain-col c1"></div>
    <div class="curtain-col c2"></div>
    <div class="curtain-col c3"></div>
    <div class="curtain-col c4"></div>
</div>

<div id="neptune-intro-overlay" class="neptune-intro-overlay">
    <p class="neptune-intro-text">以生成海王星粒子做模拟，对应我国航天全产业链规模数据，海王星为太阳系外侧边界，与产业拓展延伸场景高度契合<br>数据来源：赛迪顾问2026商业航天发展研究</p>
</div>

<div class="brand-stripe">
    <div class="stripe-seg s-1"></div>
    <div class="stripe-seg s-2"></div>
    <div class="stripe-seg s-3"></div>
    <div class="stripe-seg s-4"></div>
</div>

<canvas id="topo-canvas"></canvas>
<div id="canvas-container"></div>

<div id="ui-layer">
    <div id="planet-ui-root"></div>
</div>

    <div class="dashboard">
        <div class="data-row">
            <div class="data-col">
                <div class="col-label">当前年份</div>
                <div class="num-box" id="neptune-time">2015</div>
            </div>
            <div class="data-col">
                <div class="col-label">全产业链规模(万亿)</div>
                <div class="num-box" id="neptune-scale">0.60</div>
            </div>
            <div class="data-col">
                <div class="col-label">海王星粒子数</div>
                <div class="num-box" id="neptune-particle">0</div>
            </div>
        </div>
    </div>

<script src="./scripts/vendor/three.min.js"></script>
<script src="./scripts/vendor/simplex-noise.min.js"></script>
<script src="./scripts/components/topoRenderer.js"></script>
<script src="./scripts/components/observatoryUi.js"></script>
<script src="./scripts/core/telemetry.js"></script>
<script src="./scripts/core/interaction.js"></script>
<script src="./scripts/core/transition.js"></script>
<script src="./scripts/core/iframeNavigation.js"></script>
<script src="./scripts/core/audioManager.js"></script>
<script src="./scripts/core/cursor.js"></script>
<script src="./scripts/planets/config.js"></script>
<script src="./scripts/components/planetUi.js"></script>
<script src="./scripts/pages/planet.page.js"></script>
<script src="./scripts/planets/neptune.js"></script>
<script>
    // 初始化光标系统
    document.addEventListener('DOMContentLoaded', function() {
        if (typeof CursorSystem !== 'undefined') {
            CursorSystem.init();
        }
    });
</script>
</body>

</html>