CSU_Bus-Map/CSU_shuttle.html at main · Clt689/CSU_Bus-Map · 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
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>조선대학교 셔틀버스</title>

    <head>
        <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap"
            rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="main.css">

    </head>

<body>
    <div style="background-color: #FFFFFF;">
        <div id="container" style="display: flex; flex-direction: column; justify-content: center;
    align-items: center; width: 99%; height: 160px; margin-top : 3%; margin-right: 2%;
    background-color: #F3F7FA; border-radius: 5px; border: 2px solid gray;">
            <div id="title" style="color: #0032a0; font-size: xx-large; text-align: center;">
                <h1>CSU Shuttle-bus</h1>
            </div>
        </div>
        <br>

        <div style="display: flex; justify-content: center; width: 100%; margin-top: 2%; margin-bottom: 2%;">
            <div id="text" style="width:80%; font-size: xxx-large; text-align: center;">
                <p>버스의 <u>현재 위치를 확인</u>해보세요!</p>
            </div>
        </div>

        <div style="display: flex; justify-content: center;">
            <div id="map" style="width: 96%; height:850px; margin-top:3%; border-radius: 40px; border: 2px solid gray;">
            </div>
        </div>

        <br>
        <br>
        <div style="display: flex; justify-content: center; align-items: center; width: 100%;">
            <div id="bus-icon explain" style="display: flex; align-items: center;">
                <img id="bus-icon" src="/0_capstone/bus_image.jpg.svg" style="margin-right: 0%; width:35px; height:80px;">
                <div style="width:300px; margin-left: 5%;">
                    <h1> : 셔틀버스 현재 위치</h1>
                </div>
            </div>
        </div>

        <script type="text/javascript"
            src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=86fbd037bca50f650e642b85b96583d8"></script>
        <script src="/0_capstone/kakaomap.js"></script>
    </div>
</body>

</html>