Skip to content
/ 4o31.github.io Public

Commit ca41a42

Browse files
4o314o31
authoredJun 3, 2025··
Update index.html
1 parent 4721c72 commit ca41a42

File tree

1 file changed

+571
-410
lines changed

1 file changed

+571
-410
lines changed
 

‎index.html

Lines changed: 571 additions & 410 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,24 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>FORBIDDEN ACCESS - 禁断のボタン</title>
6+
<title id="pageTitle">CLASSIFIED ACCESS - FORBIDDEN ZONE</title>
7+
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⚠️</text></svg>">
78
<style>
8-
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap');
9+
:root {
10+
--primary-red: #ff0000;
11+
--primary-green: #00ff00;
12+
--dark-bg: #0a0a0a;
13+
--darker-bg: #050505;
14+
--terminal-bg: rgba(0, 0, 0, 0.95);
15+
--warning-bg: rgba(255, 0, 0, 0.1);
16+
--success-bg: rgba(0, 255, 0, 0.1);
17+
}
18+
19+
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');
20+
21+
* {
22+
box-sizing: border-box;
23+
}
924

1025
body {
1126
display: flex;
@@ -14,525 +29,671 @@
1429
justify-content: center;
1530
min-height: 100vh;
1631
margin: 0;
17-
background: linear-gradient(45deg, #0a0a0a, #1a0000);
18-
font-family: 'Courier Prime', monospace;
32+
background: linear-gradient(135deg, var(--dark-bg), #1a0000);
33+
font-family: 'JetBrains Mono', monospace;
1934
text-align: center;
20-
overflow: hidden;
35+
overflow-x: hidden;
2136
position: relative;
2237
}
2338

24-
/* ハッキング風背景効果 */
2539
.matrix-bg {
2640
position: fixed;
2741
top: 0;
2842
left: 0;
2943
width: 100%;
3044
height: 100%;
3145
pointer-events: none;
32-
opacity: 0.1;
46+
opacity: 0.05;
3347
z-index: -1;
3448
}
3549

3650
.container {
37-
background: rgba(20, 20, 20, 0.95);
38-
padding: 40px;
39-
border-radius: 15px;
40-
box-shadow: 0 0 30px rgba(255, 0, 0, 0.3), inset 0 0 20px rgba(255, 255, 255, 0.05);
41-
border: 2px solid #ff0000;
51+
background: var(--terminal-bg);
52+
padding: 2rem;
53+
border-radius: 12px;
54+
box-shadow: 0 0 40px rgba(255, 0, 0, 0.3);
55+
border: 2px solid var(--primary-red);
4256
position: relative;
4357
backdrop-filter: blur(10px);
44-
animation: containerGlow 3s ease-in-out infinite alternate;
58+
max-width: 90vw;
59+
width: 600px;
4560
}
4661

47-
@keyframes containerGlow {
48-
0% { box-shadow: 0 0 30px rgba(255, 0, 0, 0.3), inset 0 0 20px rgba(255, 255, 255, 0.05); }
49-
100% { box-shadow: 0 0 50px rgba(255, 0, 0, 0.6), inset 0 0 30px rgba(255, 255, 255, 0.1); }
62+
.header {
63+
border-bottom: 1px solid var(--primary-red);
64+
padding-bottom: 1rem;
65+
margin-bottom: 1.5rem;
66+
}
67+
68+
.status-bar {
69+
display: flex;
70+
justify-content: space-between;
71+
font-size: 0.8rem;
72+
color: var(--primary-green);
73+
margin-bottom: 1rem;
5074
}
5175

5276
.access-denied {
53-
color: #ff0000;
54-
font-size: 1.2em;
55-
margin-bottom: 10px;
77+
color: var(--primary-red);
78+
font-size: 1.1rem;
5679
font-weight: bold;
57-
text-shadow: 0 0 10px #ff0000;
58-
animation: blink 1.5s infinite;
80+
text-shadow: 0 0 10px var(--primary-red);
81+
animation: pulse 2s infinite;
5982
}
6083

61-
@keyframes blink {
62-
0%, 50% { opacity: 1; }
63-
51%, 100% { opacity: 0.3; }
84+
@keyframes pulse {
85+
0%, 100% { opacity: 1; }
86+
50% { opacity: 0.7; }
6487
}
6588

6689
h1 {
67-
color: #00ff00;
68-
margin-bottom: 20px;
69-
text-shadow: 0 0 20px #00ff00;
70-
font-size: 2.5em;
71-
animation: textFlicker 2s infinite;
90+
color: var(--primary-green);
91+
margin: 1rem 0;
92+
text-shadow: 0 0 20px var(--primary-green);
93+
font-size: 2rem;
94+
font-weight: 700;
7295
}
7396

74-
@keyframes textFlicker {
75-
0%, 90% { opacity: 1; }
76-
95% { opacity: 0.8; }
97+
.system-info {
98+
background: var(--success-bg);
99+
border: 1px solid var(--primary-green);
100+
padding: 1rem;
101+
margin: 1rem 0;
102+
border-radius: 8px;
103+
color: var(--primary-green);
104+
text-shadow: 0 0 5px var(--primary-green);
105+
font-size: 0.9rem;
106+
text-align: left;
77107
}
78108

79-
.warning {
80-
color: #ff6b6b;
81-
font-size: 1.3em;
82-
margin-bottom: 30px;
83-
font-weight: bold;
84-
text-shadow: 0 0 15px #ff6b6b;
85-
background: rgba(255, 0, 0, 0.1);
86-
padding: 15px;
87-
border: 1px dashed #ff0000;
109+
.warning-panel {
110+
background: var(--warning-bg);
111+
border: 1px solid var(--primary-red);
112+
padding: 1rem;
113+
margin: 1rem 0;
88114
border-radius: 8px;
115+
color: #ff6b6b;
116+
font-size: 0.95rem;
89117
}
90118

91-
.forbidden-button {
92-
background: linear-gradient(45deg, #ff0000, #8b0000);
119+
.access-button {
120+
background: linear-gradient(135deg, var(--primary-red), #8b0000);
93121
color: white;
94-
border: 3px solid #ff6b6b;
95-
padding: 25px 50px;
96-
font-size: 2em;
97-
border-radius: 10px;
122+
border: 2px solid #ff6b6b;
123+
padding: 1rem 2rem;
124+
font-size: 1.5rem;
125+
border-radius: 8px;
98126
cursor: pointer;
99-
box-shadow:
100-
0 6px #8b0000,
101-
0 0 25px rgba(255, 0, 0, 0.5),
102-
inset 0 1px rgba(255, 255, 255, 0.2);
103-
transition: all 0.1s;
104-
font-family: 'Courier Prime', monospace;
127+
font-family: inherit;
105128
font-weight: bold;
106-
text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
107-
animation: buttonPulse 2s ease-in-out infinite;
129+
text-transform: uppercase;
130+
letter-spacing: 2px;
131+
transition: all 0.2s;
132+
box-shadow: 0 4px 15px rgba(255, 0, 0, 0.3);
133+
margin: 1.5rem 0;
108134
}
109135

110-
@keyframes buttonPulse {
111-
0%, 100% { transform: scale(1); }
112-
50% { transform: scale(1.05); }
136+
.access-button:hover {
137+
background: linear-gradient(135deg, #ff3333, #aa0000);
138+
transform: translateY(-2px);
139+
box-shadow: 0 6px 20px rgba(255, 0, 0, 0.5);
113140
}
114141

115-
.forbidden-button:hover {
116-
background: linear-gradient(45deg, #ff3333, #aa0000);
117-
box-shadow:
118-
0 6px #8b0000,
119-
0 0 35px rgba(255, 0, 0, 0.8),
120-
inset 0 1px rgba(255, 255, 255, 0.3);
142+
.access-button:active {
143+
transform: translateY(0);
144+
box-shadow: 0 2px 10px rgba(255, 0, 0, 0.3);
145+
}
146+
147+
.terminal {
148+
background: var(--darker-bg);
149+
border: 1px solid var(--primary-green);
150+
border-radius: 6px;
151+
padding: 1rem;
152+
margin: 1rem 0;
153+
text-align: left;
154+
font-size: 0.8rem;
155+
max-height: 200px;
156+
overflow-y: auto;
157+
display: none;
121158
}
122159

123-
.forbidden-button:active {
124-
transform: translateY(6px);
125-
box-shadow:
126-
0 0 #8b0000,
127-
0 0 35px rgba(255, 0, 0, 0.8),
128-
inset 0 1px rgba(255, 255, 255, 0.3);
160+
.terminal-line {
161+
color: var(--primary-green);
162+
margin: 0.2rem 0;
163+
opacity: 0;
164+
animation: fadeIn 0.5s forwards;
129165
}
130166

131-
.message {
132-
margin-top: 30px;
133-
font-size: 1.4em;
134-
color: #00ff00;
135-
min-height: 3em;
136-
text-shadow: 0 0 10px #00ff00;
137-
background: rgba(0, 0, 0, 0.7);
138-
padding: 20px;
167+
@keyframes fadeIn {
168+
to { opacity: 1; }
169+
}
170+
171+
.status-message {
172+
margin: 1rem 0;
173+
padding: 1rem;
174+
background: var(--terminal-bg);
175+
border: 1px solid var(--primary-green);
176+
border-radius: 6px;
177+
color: var(--primary-green);
178+
font-size: 1rem;
179+
min-height: 3rem;
180+
display: flex;
181+
align-items: center;
182+
justify-content: center;
183+
}
184+
185+
.alert-panel {
186+
position: fixed;
187+
top: 20px;
188+
right: 20px;
189+
background: var(--primary-red);
190+
color: white;
191+
padding: 1rem;
139192
border-radius: 8px;
140-
border: 1px solid #00ff00;
141-
animation: messageGlow 3s ease-in-out infinite alternate;
193+
font-size: 0.9rem;
194+
display: none;
195+
animation: alertBlink 1s infinite;
196+
z-index: 1000;
142197
}
143198

144-
@keyframes messageGlow {
145-
0% { border-color: #00ff00; color: #00ff00; }
146-
100% { border-color: #00aa00; color: #00aa00; }
199+
@keyframes alertBlink {
200+
0%, 100% { opacity: 1; }
201+
50% { opacity: 0.8; }
147202
}
148203

149-
.skull {
150-
font-size: 3em;
151-
margin: 20px 0;
152-
animation: skull-shake 0.5s infinite;
204+
.progress-bar {
205+
width: 100%;
206+
height: 20px;
207+
background: var(--darker-bg);
208+
border: 1px solid var(--primary-green);
209+
border-radius: 10px;
210+
overflow: hidden;
211+
margin: 1rem 0;
153212
display: none;
154213
}
155214

156-
@keyframes skull-shake {
157-
0%, 100% { transform: rotate(0deg); }
158-
25% { transform: rotate(-5deg); }
159-
75% { transform: rotate(5deg); }
215+
.progress-fill {
216+
height: 100%;
217+
background: linear-gradient(90deg, var(--primary-green), #00aa00);
218+
width: 0%;
219+
transition: width 0.3s;
160220
}
161221

162-
.glitch {
163-
animation: glitch 0.3s infinite;
222+
.skull-warning {
223+
font-size: 2rem;
224+
margin: 1rem 0;
225+
animation: shake 0.5s infinite;
226+
display: none;
164227
}
165228

166-
@keyframes glitch {
167-
0% { transform: translate(0); }
168-
20% { transform: translate(-2px, 2px); }
169-
40% { transform: translate(-2px, -2px); }
170-
60% { transform: translate(2px, 2px); }
171-
80% { transform: translate(2px, -2px); }
172-
100% { transform: translate(0); }
229+
@keyframes shake {
230+
0%, 100% { transform: rotate(0deg); }
231+
25% { transform: rotate(-3deg); }
232+
75% { transform: rotate(3deg); }
173233
}
174234

175-
.virus-alert {
176-
position: fixed;
177-
top: 10px;
178-
right: 10px;
179-
background: rgba(255, 0, 0, 0.9);
180-
color: white;
181-
padding: 10px;
182-
border-radius: 5px;
183-
font-size: 0.9em;
235+
/* 404ページ用スタイル */
236+
.error-404 {
184237
display: none;
185-
animation: virusAlert 1s infinite;
238+
flex-direction: column;
239+
align-items: center;
240+
justify-content: center;
241+
min-height: 100vh;
242+
text-align: center;
186243
}
187244

188-
@keyframes virusAlert {
189-
0%, 100% { opacity: 1; }
190-
50% { opacity: 0.5; }
245+
.error-404 h1 {
246+
font-size: 5rem;
247+
color: var(--primary-red);
248+
margin-bottom: 1rem;
191249
}
192250

193-
.ip-display {
194-
background: rgba(0, 255, 0, 0.1);
195-
border: 1px solid #00ff00;
196-
padding: 15px;
197-
margin: 20px 0;
198-
border-radius: 8px;
199-
font-family: 'Courier Prime', monospace;
200-
color: #00ff00;
201-
text-shadow: 0 0 10px #00ff00;
202-
font-size: 1.1em;
203-
text-align: left;
251+
.error-404 h2 {
252+
color: var(--primary-green);
253+
margin-bottom: 2rem;
204254
}
205255

206-
.terminal-log {
207-
background: rgba(0, 0, 0, 0.9);
208-
color: #00ff00;
209-
padding: 20px;
210-
margin: 20px 0;
211-
border-radius: 8px;
212-
font-family: 'Courier Prime', monospace;
213-
font-size: 0.9em;
214-
text-align: left;
215-
border: 1px solid #00ff00;
216-
max-height: 200px;
217-
overflow-y: auto;
218-
display: none;
256+
.error-404 .error-message {
257+
color: #ccc;
258+
max-width: 600px;
259+
line-height: 1.6;
219260
}
220261

221-
.countdown {
222-
color: #ff0000;
223-
font-size: 1.5em;
224-
font-weight: bold;
225-
text-shadow: 0 0 15px #ff0000;
226-
display: none;
227-
animation: blink 0.5s infinite;
262+
@media (max-width: 768px) {
263+
.container {
264+
padding: 1rem;
265+
margin: 1rem;
266+
}
267+
268+
h1 {
269+
font-size: 1.5rem;
270+
}
271+
272+
.access-button {
273+
font-size: 1.2rem;
274+
padding: 0.8rem 1.5rem;
275+
}
228276
}
229277
</style>
230278
</head>
231279
<body>
232280
<div class="matrix-bg" id="matrixBg"></div>
233281

234-
<div class="virus-alert" id="virusAlert">
235-
⚠️ VIRUS DETECTED ⚠️<br>
236-
システムに侵入中...
282+
<div class="alert-panel" id="alertPanel">
283+
⚠️ SECURITY BREACH DETECTED<br>
284+
Logging unauthorized access...
237285
</div>
238286

239-
<div class="container" id="container">
240-
<div class="access-denied">[ ACCESS DENIED ]</div>
241-
<h1>FORBIDDEN ZONE</h1>
242-
<div class="ip-display" id="ipDisplay">
243-
IPアドレス: <span id="userIP">取得中...</span><br>
244-
位置情報: <span id="userLocation">解析中...</span><br>
245-
ブラウザ: <span id="userBrowser">スキャン中...</span>
287+
<!-- メインコンテンツ -->
288+
<div class="container" id="mainContainer">
289+
<div class="header">
290+
<div class="status-bar">
291+
<span>SYSTEM STATUS: ACTIVE</span>
292+
<span id="currentTime"></span>
293+
</div>
294+
<div class="access-denied">[ CLASSIFIED SYSTEM ]</div>
295+
<h1>RESTRICTED ACCESS</h1>
296+
</div>
297+
298+
<div class="system-info" id="systemInfo">
299+
<div>IP Address: <span id="userIP">Detecting...</span></div>
300+
<div>Location: <span id="userLocation">Analyzing...</span></div>
301+
<div>Browser: <span id="userBrowser">Scanning...</span></div>
302+
<div>Connection: <span id="connectionType">Secure</span></div>
246303
</div>
247-
<div class="skull" id="skull">💀</div>
248-
<p class="warning">
249-
⚠️ 機密情報: このシステムは高度な暗号化技術で保護されています ⚠️<br>
250-
不正アクセスは全て記録・追跡されます<br>
251-
<span style="font-size: 0.8em; color: #888;">（フィクションです。エンターテイメントサイトです）</span>
252-
</p>
253-
<button id="forbiddenButton" class="forbidden-button">ENTER SYSTEM</button>
254-
<div class="fake-loading" id="fakeLoading">
255-
システムハック中... <span id="loadingDots"></span>
304+
305+
<div class="warning-panel">
306+
⚠️ WARNING: Unauthorized access to this system is strictly prohibited.<br>
307+
All activities are monitored and logged for security purposes.
308+
</div>
309+
310+
<div class="skull-warning" id="skullWarning">💀</div>
311+
312+
<button id="accessButton" class="access-button">
313+
Initialize System
314+
</button>
315+
316+
<div class="progress-bar" id="progressBar">
317+
<div class="progress-fill" id="progressFill"></div>
256318
</div>
257-
<div class="terminal-log" id="terminalLog">
258-
<div id="logContent"></div>
319+
320+
<div class="terminal" id="terminal">
321+
<div id="terminalContent"></div>
322+
</div>
323+
324+
<div class="status-message" id="statusMessage">
325+
[ SYSTEM STANDBY ]
326+
</div>
327+
</div>
328+
329+
<!-- 404エラーページ -->
330+
<div class="error-404" id="error404">
331+
<h1>404</h1>
332+
<h2>ACCESS DENIED</h2>
333+
<div class="error-message">
334+
<p>The requested resource could not be found on this server.</p>
335+
<p>This incident has been logged and reported to system administrators.</p>
336+
<p><strong>Your IP address and access attempt have been recorded.</strong></p>
259337
</div>
260-
<div class="countdown" id="countdown"></div>
261-
<p id="messageArea" class="message">[ システム待機中... ]</p>
262338
</div>
263339

264340
<script>
265-
const button = document.getElementById('forbiddenButton');
266-
const messageArea = document.getElementById('messageArea');
267-
const container = document.getElementById('container');
268-
const skull = document.getElementById('skull');
269-
const virusAlert = document.getElementById('virusAlert');
270-
const fakeLoading = document.getElementById('fakeLoading');
271-
const loadingDots = document.getElementById('loadingDots');
272-
const terminalLog = document.getElementById('terminalLog');
273-
const logContent = document.getElementById('logContent');
274-
const countdown = document.getElementById('countdown');
275-
const ipDisplay = document.getElementById('userIP');
276-
const locationDisplay = document.getElementById('userLocation');
277-
const browserDisplay = document.getElementById('userBrowser');
278-
let pressCount = 0;
279-
let audioContext;
280-
let isGlitching = false;
281-
let logEntries = [];
341+
// グローバル設定
342+
const CONFIG = {
343+
siteName: "CLASSIFIED SYSTEM",
344+
version: "v2.1.3",
345+
maxLogEntries: 15,
346+
soundEnabled: true
347+
};
282348

283-
// Web Audio APIで不穏な音を生成
284-
function createAudioContext() {
285-
if (!audioContext) {
286-
audioContext = new (window.AudioContext || window.webkitAudioContext)();
349+
// DOM要素
350+
const elements = {
351+
mainContainer: document.getElementById('mainContainer'),
352+
error404: document.getElementById('error404'),
353+
accessButton: document.getElementById('accessButton'),
354+
statusMessage: document.getElementById('statusMessage'),
355+
terminal: document.getElementById('terminal'),
356+
terminalContent: document.getElementById('terminalContent'),
357+
alertPanel: document.getElementById('alertPanel'),
358+
progressBar: document.getElementById('progressBar'),
359+
progressFill: document.getElementById('progressFill'),
360+
skullWarning: document.getElementById('skullWarning'),
361+
userIP: document.getElementById('userIP'),
362+
userLocation: document.getElementById('userLocation'),
363+
userBrowser: document.getElementById('userBrowser'),
364+
connectionType: document.getElementById('connectionType'),
365+
currentTime: document.getElementById('currentTime'),
366+
pageTitle: document.getElementById('pageTitle')
367+
};
368+
369+
// 状態管理
370+
let state = {
371+
accessCount: 0,
372+
terminalLogs: [],
373+
audioContext: null,
374+
userInfo: {
375+
ip: null,
376+
location: null,
377+
browser: null
287378
}
288-
}
379+
};
289380

290-
function playEerieSound(frequency = 200, duration = 500) {
291-
createAudioContext();
292-
const oscillator = audioContext.createOscillator();
293-
const gainNode = audioContext.createGain();
294-
295-
oscillator.connect(gainNode);
296-
gainNode.connect(audioContext.destination);
297-
298-
oscillator.frequency.value = frequency;
299-
oscillator.type = 'sawtooth';
300-
301-
gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
302-
gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + duration / 1000);
303-
304-
oscillator.start();
305-
oscillator.stop(audioContext.currentTime + duration / 1000);
306-
}
381+
// ユーティリティ関数
382+
class Utils {
383+
static getCurrentTime() {
384+
return new Date().toLocaleTimeString('ja-JP');
385+
}
307386

308-
function playGlitchSound() {
309-
createAudioContext();
310-
for (let i = 0; i < 5; i++) {
311-
setTimeout(() => {
312-
playEerieSound(Math.random() * 500 + 100, 100);
313-
}, i * 50);
387+
static addTerminalLog(message, type = 'info') {
388+
const timestamp = this.getCurrentTime();
389+
const logEntry = `[${timestamp}] ${message}`;
390+
391+
state.terminalLogs.push(logEntry);
392+
if (state.terminalLogs.length > CONFIG.maxLogEntries) {
393+
state.terminalLogs.shift();
394+
}
395+
396+
const logElement = document.createElement('div');
397+
logElement.className = 'terminal-line';
398+
logElement.textContent = logEntry;
399+
elements.terminalContent.appendChild(logElement);
400+
401+
elements.terminalContent.scrollTop = elements.terminalContent.scrollHeight;
314402
}
315-
}
316403

317-
function startGlitchEffect() {
318-
if (isGlitching) return;
319-
isGlitching = true;
320-
container.classList.add('glitch');
321-
setTimeout(() => {
322-
container.classList.remove('glitch');
323-
isGlitching = false;
324-
}, 1000);
325-
}
404+
static async fetchRealIP() {
405+
try {
406+
const response = await fetch('https://api.ipify.org?format=json');
407+
const data = await response.json();
408+
return data.ip;
409+
} catch (error) {
410+
// フォールバック: WebRTCでローカルIPを取得
411+
return this.getLocalIP();
412+
}
413+
}
326414

327-
// 偽のIP情報を表示
328-
function displayFakeUserInfo() {
329-
// 偽のIPアドレス生成
330-
const fakeIP = `${Math.floor(Math.random() * 255)}.${Math.floor(Math.random() * 255)}.${Math.floor(Math.random() * 255)}.${Math.floor(Math.random() * 255)}`;
331-
332-
// 偽の位置情報
333-
const locations = [
334-
"東京, 日本", "大阪, 日本", "名古屋, 日本", "福岡, 日本",
335-
"札幌, 日本", "仙台, 日本", "京都, 日本", "神戸, 日本"
336-
];
337-
const fakeLocation = locations[Math.floor(Math.random() * locations.length)];
338-
339-
// ブラウザ情報（実際の情報）
340-
const browser = navigator.userAgent.includes('Chrome') ? 'Chrome' :
341-
navigator.userAgent.includes('Firefox') ? 'Firefox' :
342-
navigator.userAgent.includes('Safari') ? 'Safari' :
343-
navigator.userAgent.includes('Edge') ? 'Edge' : 'Unknown';
344-
345-
setTimeout(() => ipDisplay.textContent = fakeIP, 1000);
346-
setTimeout(() => locationDisplay.textContent = fakeLocation, 2000);
347-
setTimeout(() => browserDisplay.textContent = browser, 3000);
415+
static getLocalIP() {
416+
return new Promise((resolve) => {
417+
const pc = new RTCPeerConnection({iceServers: []});
418+
pc.createDataChannel('');
419+
pc.createOffer().then(offer => pc.setLocalDescription(offer));
420+
421+
pc.onicecandidate = (ice) => {
422+
if (ice && ice.candidate && ice.candidate.candidate) {
423+
const ip = /([0-9]{1,3}(\.[0-9]{1,3}){3})/.exec(ice.candidate.candidate);
424+
if (ip) {
425+
resolve(ip[1]);
426+
pc.close();
427+
}
428+
}
429+
};
430+
431+
setTimeout(() => resolve('IP_PROTECTED'), 3000);
432+
});
433+
}
434+
435+
static getBrowserInfo() {
436+
const ua = navigator.userAgent;
437+
if (ua.includes('Chrome')) return 'Chrome ' + ua.match(/Chrome\/([0-9.]+)/)?.[1];
438+
if (ua.includes('Firefox')) return 'Firefox ' + ua.match(/Firefox\/([0-9.]+)/)?.[1];
439+
if (ua.includes('Safari')) return 'Safari ' + ua.match(/Version\/([0-9.]+)/)?.[1];
440+
if (ua.includes('Edge')) return 'Edge ' + ua.match(/Edge\/([0-9.]+)/)?.[1];
441+
return 'Unknown Browser';
442+
}
443+
444+
static async getLocationFromIP(ip) {
445+
try {
446+
const response = await fetch(`https://ipapi.co/${ip}/json/`);
447+
const data = await response.json();
448+
return `${data.city}, ${data.region}, ${data.country_name}`;
449+
} catch (error) {
450+
return 'Location Protected';
451+
}
452+
}
348453
}
349454

350-
// ターミナルログ追加
351-
function addLogEntry(entry) {
352-
const timestamp = new Date().toLocaleTimeString();
353-
logEntries.push(`[${timestamp}] ${entry}`);
354-
if (logEntries.length > 10) logEntries.shift();
355-
356-
logContent.innerHTML = logEntries.map(log => `<div>${log}</div>`).join('');
357-
logContent.scrollTop = logContent.scrollHeight;
455+
// 音響効果
456+
class AudioManager {
457+
static createContext() {
458+
if (!state.audioContext && CONFIG.soundEnabled) {
459+
state.audioContext = new (window.AudioContext || window.webkitAudioContext)();
460+
}
461+
}
462+
463+
static playTone(frequency = 200, duration = 300, type = 'sine') {
464+
if (!CONFIG.soundEnabled) return;
465+
466+
this.createContext();
467+
const oscillator = state.audioContext.createOscillator();
468+
const gainNode = state.audioContext.createGain();
469+
470+
oscillator.connect(gainNode);
471+
gainNode.connect(state.audioContext.destination);
472+
473+
oscillator.frequency.value = frequency;
474+
oscillator.type = type;
475+
476+
gainNode.gain.setValueAtTime(0.1, state.audioContext.currentTime);
477+
gainNode.gain.exponentialRampToValueAtTime(0.01, state.audioContext.currentTime + duration / 1000);
478+
479+
oscillator.start();
480+
oscillator.stop(state.audioContext.currentTime + duration / 1000);
481+
}
482+
483+
static playAlert() {
484+
this.playTone(800, 200, 'square');
485+
setTimeout(() => this.playTone(600, 200, 'square'), 250);
486+
}
487+
488+
static playSuccess() {
489+
this.playTone(523, 150);
490+
setTimeout(() => this.playTone(659, 150), 150);
491+
setTimeout(() => this.playTone(784, 200), 300);
492+
}
358493
}
359494

360-
// カウントダウン効果
361-
function startFakeCountdown() {
362-
let count = 10;
363-
countdown.style.display = 'block';
364-
countdown.textContent = `システム自動削除まで: ${count}秒`;
365-
366-
const countInterval = setInterval(() => {
367-
count--;
368-
countdown.textContent = `システム自動削除まで: ${count}秒`;
369-
playEerieSound(400 + count * 20, 100);
495+
// システム初期化
496+
class SystemManager {
497+
static async initialize() {
498+
this.updateClock();
499+
setInterval(() => this.updateClock(), 1000);
500+
501+
await this.loadUserInfo();
502+
this.setupMatrixEffect();
503+
504+
Utils.addTerminalLog('System initialized');
505+
Utils.addTerminalLog('Monitoring active connections');
370506

371-
if (count <= 0) {
372-
clearInterval(countInterval);
373-
countdown.textContent = "削除をキャンセルしました (ジョークです😄)";
374-
setTimeout(() => {
375-
countdown.style.display = 'none';
376-
}, 3000);
507+
setTimeout(() => {
508+
AudioManager.playTone(150, 1000, 'sawtooth');
509+
}, 500);
510+
}
511+
512+
static updateClock() {
513+
elements.currentTime.textContent = Utils.getCurrentTime();
514+
}
515+
516+
static async loadUserInfo() {
517+
// ブラウザ情報（即座に表示）
518+
elements.userBrowser.textContent = Utils.getBrowserInfo();
519+
520+
// IPアドレス取得
521+
try {
522+
const ip = await Utils.fetchRealIP();
523+
elements.userIP.textContent = ip;
524+
state.userInfo.ip = ip;
525+
526+
// 位置情報取得
527+
const location = await Utils.getLocationFromIP(ip);
528+
elements.userLocation.textContent = location;
529+
state.userInfo.location = location;
530+
531+
Utils.addTerminalLog(`IP address logged: ${ip}`);
532+
Utils.addTerminalLog(`Location identified: ${location}`);
533+
} catch (error) {
534+
elements.userIP.textContent = 'IP_PROTECTED';
535+
elements.userLocation.textContent = 'Location Protected';
536+
}
537+
538+
// 接続タイプ
539+
const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
540+
if (connection) {
541+
elements.connectionType.textContent = connection.effectiveType || 'Unknown';
377542
}
378-
}, 1000);
379-
}
380-
function createMatrixEffect() {
381-
const matrixBg = document.getElementById('matrixBg');
382-
const chars = '01アイウエオカキクセキュリティハック';
383-
384-
for (let i = 0; i < 50; i++) {
385-
const span = document.createElement('span');
386-
span.textContent = chars[Math.floor(Math.random() * chars.length)];
387-
span.style.position = 'absolute';
388-
span.style.left = Math.random() * 100 + '%';
389-
span.style.top = Math.random() * 100 + '%';
390-
span.style.color = '#00ff00';
391-
span.style.fontSize = '12px';
392-
span.style.animation = `matrix-fall ${Math.random() * 3 + 2}s linear infinite`;
393-
matrixBg.appendChild(span);
543+
}
544+
545+
static setupMatrixEffect() {
546+
const matrixBg = elements.matrixBg || document.getElementById('matrixBg');
547+
const chars = '01ABCDEFアイウエオカキクハック';
548+
549+
for (let i = 0; i < 30; i++) {
550+
const span = document.createElement('span');
551+
span.textContent = chars[Math.floor(Math.random() * chars.length)];
552+
span.style.position = 'absolute';
553+
span.style.left = Math.random() * 100 + '%';
554+
span.style.top = Math.random() * 100 + '%';
555+
span.style.color = '#00ff00';
556+
span.style.fontSize = '10px';
557+
span.style.opacity = Math.random();
558+
span.style.animation = `matrix-fall ${Math.random() * 5 + 3}s linear infinite`;
559+
matrixBg.appendChild(span);
560+
}
561+
}
562+
563+
static show404() {
564+
elements.mainContainer.style.display = 'none';
565+
elements.error404.style.display = 'flex';
566+
elements.pageTitle.textContent = '404 - ACCESS DENIED';
567+
Utils.addTerminalLog('404 Error triggered');
568+
}
569+
570+
static showMain() {
571+
elements.mainContainer.style.display = 'block';
572+
elements.error404.style.display = 'none';
573+
elements.pageTitle.textContent = 'CLASSIFIED ACCESS - FORBIDDEN ZONE';
394574
}
395575
}
396576

397-
// CSSアニメーション追加
398-
const style = document.createElement('style');
399-
style.textContent = `
400-
@keyframes matrix-fall {
401-
0% { transform: translateY(-100vh) rotate(0deg); }
402-
100% { transform: translateY(100vh) rotate(360deg); }
577+
// メイン処理
578+
class AccessController {
579+
static handleAccess() {
580+
state.accessCount++;
581+
582+
this.updateProgress();
583+
this.logAccess();
584+
this.playAccessSound();
585+
this.updateInterface();
586+
this.updateMessage();
403587
}
404-
`;
405-
document.head.appendChild(style);
406588

407-
const hackerMessages = [
408-
"[ FIREWALL BYPASSED ]",
409-
"データベースに不正侵入しています... 冗談です😄",
410-
"ADMIN権限を取得しました... してません",
411-
"あなたのセキュリティは突破されました... 嘘です",
412-
"機密ファイルをダウンロード中... (架空の話)",
413-
"バックドアを設置しています... していません",
414-
"ログを改ざんしています... 改ざんしてません",
415-
"FBI に通報されました... されてません",
416-
"あなたのPCを乗っ取り中... 乗っ取れません",
417-
"ウイルスを拡散中... 拡散してません",
418-
"仮想通貨をマイニング中... してません",
419-
"衛星回線にハッキング... できません",
420-
"量子コンピュータで暗号解読... 持ってません",
421-
"政府データベースに侵入... 無理です",
422-
"あなたのカメラを起動... 起動してません"
423-
];
589+
static updateProgress() {
590+
const progress = Math.min((state.accessCount / 50) * 100, 100);
591+
elements.progressFill.style.width = progress + '%';
592+
593+
if (state.accessCount === 5) {
594+
elements.progressBar.style.display = 'block';
595+
}
596+
}
424597

425-
let dotCount = 0;
426-
setInterval(() => {
427-
dotCount = (dotCount + 1) % 4;
428-
loadingDots.textContent = '.'.repeat(dotCount);
429-
}, 500);
598+
static logAccess() {
599+
const actions = [
600+
'Authentication bypass attempted',
601+
'Firewall penetration detected',
602+
'Unauthorized protocol initiated',
603+
'Security layer compromised',
604+
'Administrative access requested',
605+
'Database connection established',
606+
'Encryption key extracted',
607+
'System privileges escalated',
608+
'Network intrusion detected',
609+
'Critical system accessed'
610+
];
611+
612+
const action = actions[Math.min(state.accessCount - 1, actions.length - 1)] || actions[Math.floor(Math.random() * actions.length)];
613+
Utils.addTerminalLog(action);
614+
}
430615

431-
button.addEventListener('click', () => {
432-
pressCount++;
433-
434-
// 音効果
435-
if (pressCount === 1) {
436-
playEerieSound(150, 800);
437-
} else if (pressCount < 10) {
438-
playEerieSound(100 + pressCount * 20, 300);
439-
} else if (pressCount === 10) {
440-
playGlitchSound();
441-
startGlitchEffect();
442-
} else if (pressCount % 5 === 0) {
443-
playGlitchSound();
444-
} else {
445-
playEerieSound(Math.random() * 300 + 100, 200);
616+
static playAccessSound() {
617+
const frequency = 100 + (state.accessCount * 20);
618+
AudioManager.playTone(frequency, 250, 'sawtooth');
619+
620+
if (state.accessCount % 10 === 0) {
621+
AudioManager.playAlert();
622+
}
446623
}
447624

448-
// メッセージ変更
449-
if (pressCount === 1) {
450-
messageArea.textContent = "[ UNAUTHORIZED ACCESS DETECTED ]";
451-
skull.style.display = 'block';
452-
addLogEntry("不正アクセス検知: IPアドレス記録開始");
453-
} else if (pressCount === 2) {
454-
addLogEntry("セキュリティプロトコル起動");
455-
addLogEntry("管理者に通知送信済み");
456-
} else if (pressCount === 3) {
457-
virusAlert.style.display = 'block';
458-
messageArea.textContent = "セキュリティシステムが作動しました...";
459-
addLogEntry("緊急事態プロトコル発動");
460-
terminalLog.style.display = 'block';
461-
} else if (pressCount === 5) {
462-
fakeLoading.style.display = 'block';
463-
messageArea.textContent = "システムに深く侵入しています...";
464-
addLogEntry("ROOT権限取得試行中");
465-
} else if (pressCount === 7) {
466-
addLogEntry("データベース接続確立");
467-
addLogEntry("機密ファイル検索中...");
468-
} else if (pressCount === 10) {
469-
document.body.style.background = 'linear-gradient(45deg, #000000, #330000)';
470-
messageArea.textContent = "[ CRITICAL: システム制御権を獲得 ]";
471-
startGlitchEffect();
472-
addLogEntry("!!! CRITICAL ERROR !!!");
473-
addLogEntry("システム制御権が奪われました");
474-
startFakeCountdown();
475-
} else if (pressCount === 15) {
476-
messageArea.textContent = "...という設定でお楽しみいただいております🎭";
477-
virusAlert.style.display = 'none';
478-
addLogEntry("ジョークモード: 安全です");
479-
} else if (pressCount === 20) {
480-
addLogEntry("プレイヤーの執念度: レベル3");
481-
messageArea.textContent = "あなたの粘り強さをデータベースに記録しました";
482-
} else if (pressCount === 25) {
483-
messageArea.textContent = "25回クリック達成！ハッカーランキング入り";
484-
document.body.style.background = 'linear-gradient(45deg, #001100, #003300)';
485-
addLogEntry("プレイヤーランキング更新: 上級者認定");
486-
} else if (pressCount === 30) {
487-
addLogEntry("量子暗号解析開始... (フィクション)");
488-
addLogEntry("衛星通信ハック中... (できません)");
489-
} else if (pressCount === 50) {
490-
messageArea.textContent = "🏆 ELITE HACKER 称号を獲得しました！";
491-
addLogEntry("=== ACHIEVEMENT UNLOCKED ===");
492-
addLogEntry("称号: ELITE HACKER 獲得");
493-
// 花火効果的な何か
494-
for (let i = 0; i < 10; i++) {
495-
setTimeout(() => playEerieSound(200 + i * 50, 100), i * 100);
625+
static updateInterface() {
626+
if (state.accessCount === 1) {
627+
elements.terminal.style.display = 'block';
628+
elements.skullWarning.style.display = 'block';
496629
}
497-
} else if (pressCount === 100) {
498-
messageArea.textContent = "👑 LEGENDARY HACKER - あなたは伝説です";
499-
document.title = "🏆 LEGENDARY HACKER - 禁断のボタン";
500-
addLogEntry("=== LEGENDARY STATUS ACHIEVED ===");
501-
addLogEntry("全世界のハッカーがあなたを称賛しています");
502-
} else if (pressCount > 100) {
503-
messageArea.textContent = `レベル∞ハッカー (${pressCount}回) - もはや神の領域`;
504-
addLogEntry(`神域レベル: ${pressCount}回達成`);
505-
} else {
506-
const randomMsg = hackerMessages[Math.floor(Math.random() * hackerMessages.length)];
507-
messageArea.textContent = `${randomMsg} (${pressCount}回目)`;
508630

509-
// ランダムなログエントリ
510-
const logMessages = [
511-
"パケット解析中...",
512-
"暗号化プロトコル迂回",
513-
"ファイアウォール突破試行",
514-
"データ抽出プロセス実行中",
515-
"セキュリティホール発見",
516-
"バックドア設置完了",
517-
"管理者権限昇格中..."
518-
];
519-
if (Math.random() < 0.3) {
520-
const randomLog = logMessages[Math.floor(Math.random() * logMessages.length)];
521-
addLogEntry(randomLog);
631+
if (state.accessCount === 3) {
632+
elements.alertPanel.style.display = 'block';
633+
}
634+
635+
if (state.accessCount === 15) {
636+
elements.alertPanel.style.display = 'none';
637+
}
638+
639+
if (state.accessCount === 25) {
640+
document.body.style.background = 'linear-gradient(135deg, #001100, #003300)';
641+
}
642+
643+
if (state.accessCount === 50) {
644+
AudioManager.playSuccess();
645+
elements.pageTitle.textContent = '🏆 ELITE ACCESS - SYSTEM COMPROMISED';
646+
}
647+
648+
if (state.accessCount === 100) {
649+
elements.pageTitle.textContent = '👑 LEGENDARY HACKER - TOTAL CONTROL';
650+
document.body.style.background = 'linear-gradient(135deg, #000033, #001166)';
522651
}
523652
}
653+
654+
static updateMessage() {
655+
const messages = {
656+
1: "[ UNAUTHORIZED ACCESS DETECTED ]",
657+
5: "[ SECURITY PROTOCOLS BYPASSED ]",
658+
10: "[ CRITICAL SYSTEM BREACH ]",
659+
15: "[ ADMINISTRATIVE CONTROL ACQUIRED ]",
660+
25: "[ ELITE HACKER STATUS ACHIEVED ]",
661+
50: "[ LEGENDARY ACCESS GRANTED ]",
662+
100: "[ SYSTEM MASTERY ACCOMPLISHED ]"
663+
};
664+
665+
const message = messages[state.accessCount] ||
666+
`[ ACCESS LEVEL ${state.accessCount} ]`;
667+
668+
elements.statusMessage.textContent = message;
669+
}
670+
}
671+
672+
// イベントリスナー
673+
elements.accessButton.addEventListener('click', () => {
674+
AccessController.handleAccess();
675+
});
676+
677+
// キーボードショートカット
678+
document.addEventListener('keydown', (e) => {
679+
if (e.key === 'F12' || (e.ctrlKey && e.shiftKey && e.key === 'I')) {
680+
SystemManager.show404();
681+
setTimeout(() => SystemManager.showMain(), 3000);
682+
}
524683
});
525684

526-
// 初期化
527-
createMatrixEffect();
528-
displayFakeUserInfo();
529-
530-
// ページ読み込み時の効果
531-
setTimeout(() => {
532-
playEerieSound(100, 1000);
533-
addLogEntry("システム起動完了");
534-
addLogEntry("ユーザー検知: 不明な接続");
535-
}, 500);
685+
// CSS動的追加
686+
const additionalStyles = document.createElement('style');
687+
additionalStyles.textContent = `
688+
@keyframes matrix-fall {
689+
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
690+
100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }
691+
}
692+
`;
693+
document.head.appendChild(additionalStyles);
694+
695+
// システム開始
696+
SystemManager.initialize();
536697
</script>
537698
</body>
538699
</html>

0 commit comments

Comments
 (0)
Please sign in to comment.