gini1 commited on
Commit
9301efb
·
verified ·
1 Parent(s): 009e6d7

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +163 -390
index.html CHANGED
@@ -1,109 +1,232 @@
1
  <!DOCTYPE html>
2
  <html>
3
  <head>
4
- <title>Desert Combat Game</title>
5
  <meta charset="utf-8">
6
  <style>
7
  body {
8
  margin: 0;
9
  overflow: hidden;
10
  background: #000;
 
11
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
12
  #info {
13
  position: absolute;
14
  top: 10px;
15
  left: 10px;
16
- color: white;
17
- background: rgba(0,0,0,0.7);
18
  padding: 10px;
19
- font-family: Arial;
20
  font-size: 14px;
21
- z-index: 100;
 
22
  border-radius: 5px;
23
  user-select: none;
24
  }
 
25
  #timer {
26
  position: absolute;
27
  top: 10px;
28
  right: 10px;
29
- color: white;
30
- background: rgba(0,0,0,0.7);
31
  padding: 10px;
32
- font-family: Arial;
33
  font-size: 20px;
34
- z-index: 100;
 
35
  border-radius: 5px;
36
  }
 
37
  #crosshair {
38
- position: absolute;
39
  top: 50%;
40
  left: 50%;
41
  transform: translate(-50%, -50%);
42
- color: rgba(255, 0, 0, 0.8);
43
- font-size: 24px;
44
- z-index: 100;
45
- user-select: none;
 
46
  pointer-events: none;
47
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
48
  #healthBar {
49
  position: absolute;
50
  bottom: 20px;
51
  left: 20px;
52
  width: 400px;
53
  height: 30px;
54
- background: rgba(0,0,0,0.5);
55
- border: 3px solid white;
56
- z-index: 100;
57
  border-radius: 15px;
58
  overflow: hidden;
59
  }
 
60
  #health {
61
  width: 100%;
62
  height: 100%;
63
- background: linear-gradient(90deg, #ff3333, #ff0000);
64
  transition: width 0.3s;
65
  }
 
66
  #ammo {
67
  position: absolute;
68
  bottom: 20px;
69
  right: 20px;
70
- color: white;
71
- background: rgba(0,0,0,0.7);
72
  padding: 10px;
73
- font-family: Arial;
74
  font-size: 20px;
75
- z-index: 100;
 
76
  border-radius: 5px;
77
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
78
  #stage {
79
  position: absolute;
80
  top: 50%;
81
  left: 50%;
82
  transform: translate(-50%, -50%);
83
- color: white;
84
- background: rgba(0,0,0,0.8);
85
  padding: 20px;
86
- font-family: Arial;
87
  font-size: 32px;
88
- z-index: 100;
89
  border-radius: 10px;
90
  display: none;
91
  }
 
92
  #gameTimer {
93
  position: absolute;
94
  top: 60px;
95
  right: 10px;
96
- color: white;
97
- background: rgba(0,0,0,0.7);
98
  padding: 10px;
99
- font-family: Arial;
100
  font-size: 20px;
101
- z-index: 100;
 
102
  border-radius: 5px;
103
  }
104
  </style>
105
  </head>
106
  <body>
 
 
107
  <div id="info">
108
  Click to start<br>
109
  WASD - Move Helicopter<br>
@@ -113,10 +236,17 @@
113
  </div>
114
  <div id="timer">Safe Time: 10s</div>
115
  <div id="gameTimer">Time: 3:00</div>
116
- <div id="crosshair">+</div>
117
  <div id="healthBar"><div id="health"></div></div>
118
  <div id="ammo">Ammo: 30/30</div>
119
  <div id="stage">Stage 1</div>
 
 
 
 
 
 
 
120
 
121
  <script type="importmap">
122
  {
@@ -128,364 +258,7 @@
128
  </script>
129
 
130
  <script type="module">
131
- import * as THREE from 'three';
132
- import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
133
- import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js';
134
-
135
- // 게임 상수
136
- const GAME_DURATION = 180;
137
- const MAP_SIZE = 2000;
138
- const HELICOPTER_HEIGHT = 50;
139
- const ENEMY_SCALE = 3;
140
- const MAX_HEALTH = 1000;
141
- const ENEMY_MODELS = ['1.GLB', '2.GLB', '3.GLB', '4.GLB'];
142
-
143
- // 게임 변수
144
- let scene, camera, renderer, controls;
145
- let enemies = [];
146
- let bullets = [];
147
- let enemyBullets = [];
148
- let playerHealth = MAX_HEALTH;
149
- let ammo = 30;
150
- let currentStage = 1;
151
- let isGameOver = false;
152
-
153
- // 사운드
154
- const sounds = {
155
- bgm: new Audio('Music.wav'),
156
- gunshot: new Audio('gun.wav')
157
- };
158
- sounds.bgm.loop = true;
159
-
160
- function init() {
161
- // Scene 생성
162
- scene = new THREE.Scene();
163
- scene.background = new THREE.Color(0x87ceeb); // 하늘색
164
- scene.fog = new THREE.Fog(0x87ceeb, 0, 1500);
165
-
166
- // Camera 설정
167
- camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 3000);
168
- camera.position.set(0, HELICOPTER_HEIGHT, 0);
169
-
170
- // Renderer 설정
171
- renderer = new THREE.WebGLRenderer({ antialias: true });
172
- renderer.setSize(window.innerWidth, window.innerHeight);
173
- renderer.shadowMap.enabled = true;
174
- document.body.appendChild(renderer.domElement);
175
-
176
- // 조명 설정
177
- const ambientLight = new THREE.AmbientLight(0xffffff, 1.0);
178
- scene.add(ambientLight);
179
-
180
- const dirLight = new THREE.DirectionalLight(0xffffff, 1.0);
181
- dirLight.position.set(100, 100, 50);
182
- dirLight.castShadow = true;
183
- scene.add(dirLight);
184
-
185
- // 지형 생성
186
- createTerrain();
187
-
188
- // Controls 설정
189
- controls = new PointerLockControls(camera, document.body);
190
-
191
- // 이벤트 리스너
192
- document.addEventListener('click', onClick);
193
- document.addEventListener('keydown', onKeyDown);
194
- document.addEventListener('keyup', onKeyUp);
195
-
196
- // 적 로드
197
- loadEnemies();
198
-
199
- // 애니메이션 ��작
200
- animate();
201
- }
202
-
203
- function createTerrain() {
204
- // 지형 생성
205
- const geometry = new THREE.PlaneGeometry(MAP_SIZE, MAP_SIZE, 200, 200);
206
- const material = new THREE.MeshStandardMaterial({
207
- color: 0xD2B48C, // 사막색
208
- roughness: 0.8,
209
- metalness: 0.2
210
- });
211
-
212
- // 지형 높낮이 설정
213
- const vertices = geometry.attributes.position.array;
214
- for (let i = 0; i < vertices.length; i += 3) {
215
- vertices[i + 2] = Math.sin(vertices[i] * 0.01) * Math.cos(vertices[i + 1] * 0.01) * 20;
216
- }
217
-
218
- geometry.attributes.position.needsUpdate = true;
219
- geometry.computeVertexNormals();
220
-
221
- const terrain = new THREE.Mesh(geometry, material);
222
- terrain.rotation.x = -Math.PI / 2;
223
- terrain.receiveShadow = true;
224
- scene.add(terrain);
225
-
226
- // 장애물 추가
227
- addObstacles();
228
- }
229
-
230
- function addObstacles() {
231
- // 바위 생성
232
- const rockGeometry = new THREE.DodecahedronGeometry(10);
233
- const rockMaterial = new THREE.MeshStandardMaterial({
234
- color: 0x8B4513,
235
- roughness: 0.9
236
- });
237
-
238
- for (let i = 0; i < 100; i++) {
239
- const rock = new THREE.Mesh(rockGeometry, rockMaterial);
240
- rock.position.set(
241
- (Math.random() - 0.5) * MAP_SIZE * 0.9,
242
- Math.random() * 10,
243
- (Math.random() - 0.5) * MAP_SIZE * 0.9
244
- );
245
- rock.rotation.set(
246
- Math.random() * Math.PI,
247
- Math.random() * Math.PI,
248
- Math.random() * Math.PI
249
- );
250
- rock.castShadow = true;
251
- rock.receiveShadow = true;
252
- scene.add(rock);
253
- }
254
- }
255
-
256
- function loadEnemies() {
257
- const loader = new GLTFLoader();
258
- const enemyCount = 3 + currentStage;
259
-
260
- for (let i = 0; i < enemyCount; i++) {
261
- const modelPath = ENEMY_MODELS[i % ENEMY_MODELS.length];
262
-
263
- loader.load(modelPath, (gltf) => {
264
- const enemy = gltf.scene;
265
- enemy.scale.set(ENEMY_SCALE, ENEMY_SCALE, ENEMY_SCALE);
266
-
267
- // 랜덤 위치에 배치
268
- const angle = (i / enemyCount) * Math.PI * 2;
269
- const radius = 200;
270
- enemy.position.set(
271
- Math.cos(angle) * radius,
272
- 10,
273
- Math.sin(angle) * radius
274
- );
275
-
276
- enemy.traverse((node) => {
277
- if (node.isMesh) {
278
- node.castShadow = true;
279
- node.receiveShadow = true;
280
- node.material.metalness = 0.2;
281
- node.material.roughness = 0.8;
282
- }
283
- });
284
-
285
- scene.add(enemy);
286
- enemies.push({
287
- model: enemy,
288
- health: 100,
289
- speed: 0.3 + (currentStage * 0.1)
290
- });
291
- });
292
- }
293
- }
294
-
295
- function onClick() {
296
- if (!controls.isLocked) {
297
- controls.lock();
298
- sounds.bgm.play();
299
- } else if (ammo > 0) {
300
- shoot();
301
- }
302
- }
303
-
304
- function onKeyDown(event) {
305
- switch (event.code) {
306
- case 'KeyR':
307
- reload();
308
- break;
309
- }
310
- }
311
-
312
- function onKeyUp(event) {
313
- // 키 해제 처리
314
- }
315
-
316
- function shoot() {
317
- if (ammo <= 0) return;
318
-
319
- ammo--;
320
- updateAmmoDisplay();
321
-
322
- const bullet = createBullet();
323
- bullets.push(bullet);
324
-
325
- sounds.gunshot.currentTime = 0;
326
- sounds.gunshot.play();
327
- }
328
-
329
- function createBullet() {
330
- const bulletGeometry = new THREE.SphereGeometry(0.5);
331
- const bulletMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
332
- const bullet = new THREE.Mesh(bulletGeometry, bulletMaterial);
333
-
334
- bullet.position.copy(camera.position);
335
- const direction = new THREE.Vector3();
336
- camera.getWorldDirection(direction);
337
- bullet.velocity = direction.multiplyScalar(3);
338
-
339
- scene.add(bullet);
340
- return bullet;
341
- }
342
-
343
- function reload() {
344
- ammo = 30;
345
- updateAmmoDisplay();
346
- }
347
-
348
- function updateAmmoDisplay() {
349
- document.getElementById('ammo').textContent = `Ammo: ${ammo}/30`;
350
- }
351
-
352
- function animate() {
353
- requestAnimationFrame(animate);
354
-
355
- if (controls.isLocked && !isGameOver) {
356
- updateBullets();
357
- updateEnemies();
358
- checkGameStatus();
359
- }
360
-
361
- renderer.render(scene, camera);
362
- }
363
-
364
- function updateBullets() {
365
- // 총알 업데이트 로직
366
- for (let i = bullets.length - 1; i >= 0; i--) {
367
- bullets[i].position.add(bullets[i].velocity);
368
-
369
- // 적과의 충돌 체크
370
- enemies.forEach(enemy => {
371
- if (bullets[i].position.distanceTo(enemy.model.position) < 5) {
372
- scene.remove(bullets[i]);
373
- bullets.splice(i, 1);
374
- enemy.health -= 25;
375
-
376
- if (enemy.health <= 0) {
377
- scene.remove(enemy.model);
378
- enemies = enemies.filter(e => e !== enemy);
379
- }
380
- }
381
- });
382
-
383
- // 범위 벗어난 총알 제거
384
- if (bullets[i] && bullets[i].position.distanceTo(camera.position) > 1000) {
385
- scene.remove(bullets[i]);
386
- bullets.splice(i, 1);
387
- }
388
- }
389
- }
390
-
391
- function updateEnemies() {
392
- enemies.forEach(enemy => {
393
- const direction = new THREE.Vector3();
394
- direction.subVectors(camera.position, enemy.model.position);
395
- direction.normalize();
396
-
397
- enemy.model.position.add(direction.multiplyScalar(enemy.speed));
398
- enemy.model.lookAt(camera.position);
399
-
400
- // 플레이어와의 충돌 체크
401
- if (enemy.model.position.distanceTo(camera.position) < 10) {
402
- gameOver(false);
403
- }
404
- });
405
- }
406
-
407
- function checkGameStatus() {
408
- if (enemies.length === 0 && currentStage < 5) {
409
- currentStage++;
410
- loadEnemies();
411
- }
412
- }
413
-
414
- function gameOver(won) {
415
- isGameOver = true;
416
- controls.unlock();
417
- sounds.bgm.pause();
418
- alert(won ? 'Mission Complete!' : 'Game Over!');
419
- location.reload();
420
- }
421
-
422
- // 화면 크기 조절 처리
423
- window.addEventListener('resize', () => {
424
- camera.aspect = window.innerWidth / window.innerHeight;
425
- camera.updateProjectionMatrix();
426
- renderer.setSize(window.innerWidth, window.innerHeight);
427
- });
428
-
429
- // 게임 시작
430
- init();
431
-
432
- // 마우스 이동 속도 제어
433
- const moveState = {
434
- forward: false,
435
- backward: false,
436
- left: false,
437
- right: false
438
- };
439
-
440
- // 키보드 이벤트
441
- document.addEventListener('keydown', (event) => {
442
- switch(event.code) {
443
- case 'KeyW': moveState.forward = true; break;
444
- case 'KeyS': moveState.backward = true; break;
445
- case 'KeyA': moveState.left = true; break;
446
- case 'KeyD': moveState.right = true; break;
447
- }
448
- });
449
-
450
- document.addEventListener('keyup', (event) => {
451
- switch(event.code) {
452
- case 'KeyW': moveState.forward = false; break;
453
- case 'KeyS': moveState.backward = false; break;
454
- case 'KeyA': moveState.left = false; break;
455
- case 'KeyD': moveState.right = false; break;
456
- }
457
- });
458
-
459
- // 이동 업데이트
460
- function updateMovement() {
461
- if (controls.isLocked) {
462
- const speed = 2.0;
463
- if (moveState.forward) controls.moveForward(speed);
464
- if (moveState.backward) controls.moveForward(-speed);
465
- if (moveState.left) controls.moveRight(-speed);
466
- if (moveState.right) controls.moveRight(speed);
467
- }
468
- }
469
-
470
- // 메인 게임 루프에 이동 업데이트 추가
471
- let lastTime = performance.now();
472
- function gameLoop() {
473
- const time = performance.now();
474
- const delta = (time - lastTime) / 1000;
475
- lastTime = time;
476
-
477
- if (controls.isLocked && !isGameOver) {
478
- updateMovement();
479
- updateBullets();
480
- updateEnemies();
481
- checkGameStatus();
482
- }
483
-
484
- renderer.render(scene, camera);
485
- requestAnimationFrame(gameLoop);
486
- }
487
-
488
- gameLoop();
489
  </script>
490
  </body>
491
- </html>
 
1
  <!DOCTYPE html>
2
  <html>
3
  <head>
4
+ <title>Combat Helicopter Simulator</title>
5
  <meta charset="utf-8">
6
  <style>
7
  body {
8
  margin: 0;
9
  overflow: hidden;
10
  background: #000;
11
+ font-family: 'Courier New', monospace;
12
  }
13
+
14
+ #cockpit-frame {
15
+ position: fixed;
16
+ top: 0;
17
+ left: 0;
18
+ width: 100%;
19
+ height: 100%;
20
+ border: 20px solid #2a2a2a;
21
+ box-sizing: border-box;
22
+ pointer-events: none;
23
+ z-index: 1000;
24
+ }
25
+
26
+ #cockpit-overlay {
27
+ position: fixed;
28
+ top: 0;
29
+ left: 0;
30
+ width: 100%;
31
+ height: 100%;
32
+ background: linear-gradient(135deg, rgba(0,0,0,0.3) 0%, transparent 50%, rgba(0,0,0,0.3) 100%);
33
+ pointer-events: none;
34
+ z-index: 999;
35
+ }
36
+
37
  #info {
38
  position: absolute;
39
  top: 10px;
40
  left: 10px;
41
+ color: #0f0;
42
+ background: rgba(0,20,0,0.7);
43
  padding: 10px;
 
44
  font-size: 14px;
45
+ z-index: 1001;
46
+ border: 1px solid #0f0;
47
  border-radius: 5px;
48
  user-select: none;
49
  }
50
+
51
  #timer {
52
  position: absolute;
53
  top: 10px;
54
  right: 10px;
55
+ color: #0f0;
56
+ background: rgba(0,20,0,0.7);
57
  padding: 10px;
 
58
  font-size: 20px;
59
+ z-index: 1001;
60
+ border: 1px solid #0f0;
61
  border-radius: 5px;
62
  }
63
+
64
  #crosshair {
65
+ position: fixed;
66
  top: 50%;
67
  left: 50%;
68
  transform: translate(-50%, -50%);
69
+ width: 40px;
70
+ height: 40px;
71
+ border: 2px solid rgba(0,255,0,0.7);
72
+ border-radius: 50%;
73
+ z-index: 1001;
74
  pointer-events: none;
75
  }
76
+
77
+ #crosshair::before,
78
+ #crosshair::after {
79
+ content: '';
80
+ position: absolute;
81
+ background: rgba(0,255,0,0.7);
82
+ }
83
+
84
+ #crosshair::before {
85
+ top: 50%;
86
+ left: -10px;
87
+ right: -10px;
88
+ height: 2px;
89
+ transform: translateY(-50%);
90
+ }
91
+
92
+ #crosshair::after {
93
+ left: 50%;
94
+ top: -10px;
95
+ bottom: -10px;
96
+ width: 2px;
97
+ transform: translateX(-50%);
98
+ }
99
+
100
  #healthBar {
101
  position: absolute;
102
  bottom: 20px;
103
  left: 20px;
104
  width: 400px;
105
  height: 30px;
106
+ background: rgba(0,20,0,0.7);
107
+ border: 2px solid #0f0;
108
+ z-index: 1001;
109
  border-radius: 15px;
110
  overflow: hidden;
111
  }
112
+
113
  #health {
114
  width: 100%;
115
  height: 100%;
116
+ background: linear-gradient(90deg, #0f0, #00ff00);
117
  transition: width 0.3s;
118
  }
119
+
120
  #ammo {
121
  position: absolute;
122
  bottom: 20px;
123
  right: 20px;
124
+ color: #0f0;
125
+ background: rgba(0,20,0,0.7);
126
  padding: 10px;
 
127
  font-size: 20px;
128
+ z-index: 1001;
129
+ border: 1px solid #0f0;
130
  border-radius: 5px;
131
  }
132
+
133
+ #altitude-indicator,
134
+ #speed-indicator,
135
+ #compass {
136
+ position: fixed;
137
+ color: #0f0;
138
+ background: rgba(0,20,0,0.7);
139
+ padding: 10px;
140
+ border: 1px solid #0f0;
141
+ border-radius: 5px;
142
+ z-index: 1001;
143
+ }
144
+
145
+ #altitude-indicator {
146
+ left: 20px;
147
+ top: 50%;
148
+ }
149
+
150
+ #speed-indicator {
151
+ right: 20px;
152
+ top: 50%;
153
+ }
154
+
155
+ #compass {
156
+ top: 20px;
157
+ left: 50%;
158
+ transform: translateX(-50%);
159
+ }
160
+
161
+ #radar {
162
+ position: fixed;
163
+ bottom: 20px;
164
+ right: 20px;
165
+ width: 200px;
166
+ height: 200px;
167
+ background: rgba(0,20,0,0.7);
168
+ border: 2px solid #0f0;
169
+ border-radius: 50%;
170
+ z-index: 1001;
171
+ overflow: hidden;
172
+ }
173
+
174
+ .radar-sweep {
175
+ position: absolute;
176
+ top: 50%;
177
+ left: 50%;
178
+ width: 50%;
179
+ height: 2px;
180
+ background: linear-gradient(90deg, #0f0, transparent);
181
+ transform-origin: left center;
182
+ animation: radar-sweep 4s infinite linear;
183
+ }
184
+
185
+ .radar-dot {
186
+ position: absolute;
187
+ width: 4px;
188
+ height: 4px;
189
+ background: #f00;
190
+ border-radius: 50%;
191
+ transform: translate(-50%, -50%);
192
+ }
193
+
194
+ @keyframes radar-sweep {
195
+ from { transform: rotate(0deg); }
196
+ to { transform: rotate(360deg); }
197
+ }
198
+
199
  #stage {
200
  position: absolute;
201
  top: 50%;
202
  left: 50%;
203
  transform: translate(-50%, -50%);
204
+ color: #0f0;
205
+ background: rgba(0,20,0,0.8);
206
  padding: 20px;
 
207
  font-size: 32px;
208
+ z-index: 1001;
209
  border-radius: 10px;
210
  display: none;
211
  }
212
+
213
  #gameTimer {
214
  position: absolute;
215
  top: 60px;
216
  right: 10px;
217
+ color: #0f0;
218
+ background: rgba(0,20,0,0.7);
219
  padding: 10px;
 
220
  font-size: 20px;
221
+ z-index: 1001;
222
+ border: 1px solid #0f0;
223
  border-radius: 5px;
224
  }
225
  </style>
226
  </head>
227
  <body>
228
+ <div id="cockpit-frame"></div>
229
+ <div id="cockpit-overlay"></div>
230
  <div id="info">
231
  Click to start<br>
232
  WASD - Move Helicopter<br>
 
236
  </div>
237
  <div id="timer">Safe Time: 10s</div>
238
  <div id="gameTimer">Time: 3:00</div>
239
+ <div id="crosshair"></div>
240
  <div id="healthBar"><div id="health"></div></div>
241
  <div id="ammo">Ammo: 30/30</div>
242
  <div id="stage">Stage 1</div>
243
+ <div id="altitude-indicator">ALT: <span>50</span>m</div>
244
+ <div id="speed-indicator">SPD: <span>0</span>km/h</div>
245
+ <div id="compass">HDG: <span>0</span>°</div>
246
+ <div id="radar">
247
+ <div class="radar-sweep"></div>
248
+ <div class="radar-targets"></div>
249
+ </div>
250
 
251
  <script type="importmap">
252
  {
 
258
  </script>
259
 
260
  <script type="module">
261
+ // [이전에 제공된 JavaScript 코드를 여기에 삽입]
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
262
  </script>
263
  </body>
264
+ </html>