holepeople/levels.html at main · Causalzap/holepeople · 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="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Hole People - Level Guides</title>
  <meta name="description" content="Browse complete Hole People level guides with step-by-step walkthroughs, three-star strategies, and videos for all 600+ levels. Jump to any level and beat the puzzle."/>
  <link id="canonical-link" rel="canonical" href="https://www.holepeoplelevel.com/levels.html"/>

  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9769427406770321"
     crossorigin="anonymous"></script>

  <script>
  (function () {
    var ORIGIN = 'https://www.holepeoplelevel.com';
    var n = parseInt(new URLSearchParams(location.search).get('n'), 10);
    var target = ORIGIN + '/levels.html' + (Number.isFinite(n) ? ('?n=' + n) : '');
    // 确保唯一且存在
    var link = document.getElementById('canonical-link');
    if (!link) { link = document.createElement('link'); link.id='canonical-link'; link.rel='canonical'; document.head.appendChild(link); }
    link.setAttribute('href', target);
    // 清理任何其它 canonical
    document.querySelectorAll('link[rel="canonical"]').forEach(function (o) { if (o !== link) o.parentNode.removeChild(o); });
    // 守护：有人改 <head> 就立刻纠正
    new MutationObserver(function () {
      if (link.getAttribute('href') !== target) link.setAttribute('href', target);
      document.querySelectorAll('link[rel="canonical"]').forEach(function (o) { if (o !== link) o.parentNode.removeChild(o); });
    }).observe(document.head, { childList: true, subtree: true });
  })();
</script>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
  <link href="https://fonts.googleapis.com/css2?family=Oxanium:wght@400;600;700&family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet"/>

  <style>
    /* ===== 站点通用变量（与首页一致） ===== */
    :root {
      --primary: #6C63FF;
      --primary-light: #8580FF;
      --accent: #36D1DC;
      --light-bg: #f8f9fe;
      --card-bg: #ffffff;
      --text-dark: #2d2b4e;
      --text-light: #5a5779;
      --border-light: #e4e6f0;
      --gradient-primary: linear-gradient(135deg, var(--primary), var(--accent));
      --shadow: 0 10px 30px rgba(108, 99, 255, 0.15);
      --shadow-hover: 0 15px 35px rgba(108, 99, 255, 0.25);
    }

    #header-container {
        padding: 0 !important;
        margin: 0 !important;
    }
    #levels-tools, #levels-ad, #levels-featured {
    margin: 0;
    padding: 0;
    }

    * { box-sizing: border-box; margin:0; padding:0; }
    body{
      padding-top:72px;               /* 为空出固定头部的高度 */
      background:var(--light-bg);
      font-family:'Poppins',sans-serif;
      color: var(--text-light);
      line-height: 1.6;
      overflow-x: hidden;
    }

    /* 通用容器（与首页一致的左右留白） */
    .container{ width:90%; max-width:1200px; margin:0 auto; }

    /* 宿主容器通用边距（header/footer 不加） */
    #levels-hero,#levels-tools,#levels-grid,#levels-ad,#levels-featured{ padding:2rem 0; }

    .section-title{
      font-family:'Oxanium', cursive;
      font-weight:700;
      color:var(--text-dark);
      font-size:2.2rem;
      text-align:center;
      margin:0 auto 2rem;
      position:relative;
    }
    .section-title::after{
      content:'';
      position:absolute;
      bottom:-10px; left:50%; transform:translateX(-50%);
      width:80px; height:4px; border-radius:2px; background:var(--gradient-primary);
    }

    .inject-error{ padding:12px;border:1px dashed #f99;color:#b00;background:#fff }

    /* 添加关卡详情页样式 */
    .level-detail {
      padding: 2rem 0;
      min-height: 60vh;
    }

    .level-detail .container {
      background: var(--card-bg);
      border-radius: 12px;
      padding: 2rem;
      box-shadow: var(--shadow);
      margin-top: 1rem;
    }

    .level-detail h1 {
      font-family: 'Oxanium', cursive;
      color: var(--primary);
      margin-bottom: 1rem;
      font-size: 2.5rem;
    }

    .level-detail p {
      color: var(--text-light);
      font-size: 1.1rem;
      line-height: 1.6;
    }

    .back-button {
      display: inline-flex;
      align-items: center;
      margin-bottom: 1.5rem;
      color: var(--primary);
      text-decoration: none;
      font-weight: 500;
    }

    .back-button:hover {
      color: var(--accent);
    }
  </style>
</head>
<body>
  <!-- 头部（组件注入） -->
  <div id="header-container"></div>

  <!-- Level Guides 页面分区（由 main.js 注入具体组件） -->
  <!-- 这个区域将被服务器替换为关卡详情内容 -->
  <div id="levels-hero"></div>
  <div id="levels-tools"></div>
  <div id="levels-grid"></div>
  <div id="levels-ad"></div>
  <div id="levels-featured"></div>

  <!-- 页脚（组件注入） -->
  <div id="footer-container"></div>

  <!-- 仅加载主脚本，不再写任何内联装配/渲染逻辑，避免二次注入 -->
  <script src="scripts/main.js"  defer></script>
</body>
</html>