Skip to content

Commit 458a982

Browse files
ujouaujoua
authored
Add files via upload
1 parent 2c2901a commit 458a982

File tree

5 files changed

+170
-0
lines changed

5 files changed

+170
-0
lines changed

‎iua/building.svg

+1
Loading

‎iua/campas.svg

+1
Loading

‎iua/index.html

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Into the Unknown Ajou</title>
8+
<link rel="stylesheet" href="style.css" />
9+
</head>
10+
<body>
11+
<canvas class="myCanvas"> </canvas>
12+
<img id="campas" src="campas.svg" />
13+
<img class="building" id="bw" src="building.svg" />
14+
<img class="building" id="bp" src="building.svg" />
15+
<img class="building" id="bi" src="building.svg" />
16+
<img class="building" id="bs" src="building.svg" />
17+
<dialog class="information">
18+
<p>
19+
1973년 3월 준공된 건물로, 개교 초기 아주대학교의 본관이었다. 건물명은
20+
아주대학교가 위치한 원천동에서 유래했다. 현재는 전자공학과, 물리학과,
21+
생명과학과, 화학과가 사용하고 있다.
22+
</p>
23+
<button class="close">Close</button>
24+
</dialog>
25+
<dialog class="information">
26+
<p>
27+
1993년 12월 준공된 건물로, 이름은 아주대학교가 소재하고 있던 수원시
28+
팔달구에서 유래했다. 지상 10층의 건물로, 아주대학교와 수원시를 조망할 수
29+
있다. 공학교육혁신센터, 현장실습지원센터, CSMC 등이 위치해 있다.
30+
</p>
31+
<button class="close">Close</button>
32+
</dialog>
33+
<dialog class="information">
34+
<p>
35+
지상 1층 지상 8층의 규모의 건물로 창업 지원을 위한 센터와 대학원
36+
연구실이 위치해 있다.
37+
</p>
38+
<button class="close">Close</button>
39+
</dialog>
40+
<dialog class="information">
41+
<p>
42+
성호 이익의 호에서 이름을 따온 건물로, 1982년 8월 준공했다. 학교에서
43+
가장 중앙부에 위치한 건물로, 교양과목 강의실로 주로 사용되고 있다.
44+
</p>
45+
<button class="close">Close</button>
46+
<script src="script.js"></script>
47+
</body>
48+
</html>

‎iua/script.js

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
const canvas = document.querySelector(".myCanvas");
2+
const width = (canvas.width = window.innerWidth);
3+
const height = (canvas.height = window.innerHeight);
4+
const ctx = canvas.getContext("2d");
5+
6+
// ctx.fillStyle = "navy";
7+
// ctx.fillRect(0, 0, width, height);
8+
9+
// const imgCampas = new Image();
10+
// imgCampas.src = "campas.svg";
11+
// imgCampas.addEventListener("load", () => {
12+
// ctx.drawImage(
13+
// imgCampas,
14+
// (width -
15+
// (imgCampas.naturalWidth / imgCampas.naturalHeight) * height * 0.8) /
16+
// 2.2,
17+
// height * 0.08,
18+
// (imgCampas.naturalWidth / imgCampas.naturalHeight) * height * 0.8,
19+
// height * 0.8
20+
// );
21+
// });
22+
23+
// const bdPaldal = document.querySelector("#bw");
24+
// bdPaldal.addEventListener("load", () => {
25+
// ctx.drawImage(bdPaldal, 50, 50);
26+
// console.log("tq");
27+
// });
28+
29+
// const image = document.querySelector("img");
30+
// image.addEventListener("click", () => {
31+
// modal.showModal();
32+
// });
33+
34+
const buildings = document.querySelectorAll(".building");
35+
const dialogs = document.querySelectorAll(".information");
36+
const closeButtons = document.querySelectorAll(".close");
37+
38+
buildings[0].addEventListener("click", () => {
39+
dialogs[0].showModal();
40+
});
41+
closeButtons[0].addEventListener("click", () => {
42+
dialogs[0].close();
43+
});
44+
45+
buildings[1].addEventListener("click", () => {
46+
dialogs[1].showModal();
47+
});
48+
closeButtons[1].addEventListener("click", () => {
49+
dialogs[1].close();
50+
});
51+
52+
buildings[2].addEventListener("click", () => {
53+
dialogs[2].showModal();
54+
});
55+
closeButtons[2].addEventListener("click", () => {
56+
dialogs[2].close();
57+
});
58+
59+
buildings[3].addEventListener("click", () => {
60+
dialogs[3].showModal();
61+
});
62+
closeButtons[3].addEventListener("click", () => {
63+
dialogs[3].close();
64+
});
65+
66+
function zoom(event) {
67+
event.preventDefault();
68+
69+
scale += event.deltaY * -0.01;
70+
71+
scale = Math.min(Math.max(0.125, scale), 4);
72+
73+
canvas.style.transform = `scale(${scale})`;
74+
}
75+
76+
let scale = 1;
77+
canvas.onwheel = zoom;

‎iua/style.css

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
body {
2+
margin: 0;
3+
overflow: hidden;
4+
width: 100%;
5+
height: 100%;
6+
background-color: navy;
7+
}
8+
9+
canvas {
10+
position: absolute;
11+
}
12+
13+
#campas {
14+
position: absolute;
15+
height: 90%;
16+
left: 35%;
17+
top: 5%;
18+
}
19+
20+
.building {
21+
position: absolute;
22+
height: 10%;
23+
}
24+
25+
#bw {
26+
left: 30%;
27+
top: 35%;
28+
}
29+
30+
#bp {
31+
left: 40%;
32+
top: 15%;
33+
}
34+
35+
#bi {
36+
left: 60%;
37+
top: 1%;
38+
}
39+
40+
#bs {
41+
left: 50%;
42+
top: 37%;
43+
}

0 commit comments

Comments
 (0)