CSU_Bus-Map/live-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
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>실시간 버스 위치</title>
  <link rel="stylesheet" type="text/css" href="live-shuttle.css">
</head>

<body>
  <div style="width: 100%; height: 100%; position: relative; background: white">
    <div
      style="width: 370px; height: 70px; left: 10px; top: 678px; position: absolute; background: linear-gradient(0deg, #0032A0 0%, #0032A0 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%); box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 10px">
    </div>
    <div
      style="width: 370px; height: 70px; left: 10px; top: 678px; position: absolute; background: rgba(217, 217, 217, 0.20); box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 10px">
    </div>
    <div style="left: 42px; top: 693px; position: absolute; text-align: center">
      <span class="text-white-22-400">버스의</span>
      <span class="text-white-22-700-underline">현재 위치를 확인</span>
      <span class="text-white-6-700"></span>
      <span class="text-white-22-400">해보세요!</span>
    </div>
    <div style="width: 92px; height: 43px; left: 288px; top: 152px; position: absolute">
      <div
        style="width: 86.13px; height: 30px; left: 0px; top: 8px; position: absolute; background: #626877; border-radius: 10px">
      </div>
      <div class="text-white-13-400" style="width: 83.19px; height: 43px; left: 8.81px; top: -0px; position: absolute;">
        운행정보</div>
      <img style="width: 21.53px; height: 22px; left: 58.72px; top: 12px; position: absolute"
        src="https://s3-alpha-sig.figma.com/img/3405/ff22/4840aadc990a47a0f781e022ca39f588?Expires=1701648000&Signature=BjVBFkpEDeguvzZIOKeJ6-nSn5XvchFkWHNHGvt0LHSx~xBcmht9Cbep8~0dkMoS~apk~PAdKP4fD4MdCuYbqjJbXbvt4LZ4Li1doAfvHTwoME17OoJiS~Wgd0KwuFRDSfI30u3Psj4i1MZQgRkxakMVozygEyPp3F3eFMBEDIXlnA6P-I78r0DtyP53EMkZk0euqhZwzETuG0iATOowg0bXmW3DAc9CvZoC7iYXlkZD7LK5Bt2JBsf8ubclcBUUtu-WlLWKKWntou3~x8Ai7d7sHUmzF9GIqxr~BigYso16Xf9fOpxSEKYy0dDcGtmuF7VDJ6UrFHHHdcW~OwQT7w__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4" />
    </div>
    <img style="width: 17px; height: 39.10px; left: 126px; top: 615px; position: absolute"
      src="https://s3-alpha-sig.figma.com/img/ce0c/367a/78ee2c526542895dd9d43ad38c6163e1?Expires=1701648000&Signature=bI-sy-aPc9hzT2JB3DPoB53-Bbxu0aKpSyfljaFn7TbVlEZVOkuwWJtGvl0965Zcv8iQQpKxohj5iBgcox531rrthNt6FmdPqJrgPzwj3wOd3jvoMLyYy7KOlWfmBWmtZ5AKNTyxav3tIvdaltZey8noZCRlyFe3dM-GwO4SqZOVT1K9p86PkJVt5LITi8~ijl8W1I5fBJVJnYCZnvRQRsLWc3zo5Gzme~-chUi69YHJdm825l5Ia~35OXhyz1AjMxAnmzYBJWVRlKNBBp-uCoWj89XVIAzwvV9RutdPM9lN2BmCrFq1geK0dVJyhCgwKl8JH8f5lBoZVzfv8JfwvA__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4" />

    <!-- 맵 -->
    <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>

    <div style="width: 374px; height: 53px; left: 8px; top: 65px; position: absolute">
      <div
        style="width: 374px; height: 53px; left: 0px; top: 0px; position: absolute; background: #0032A0; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 10px">
      </div>
      <div
        style="width: 20px; height: 2px; left: 16px; top: 20px; position: absolute; background: rgba(217, 217, 217, 0); box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 1px; border: 1px white solid">
      </div>
      <div
        style="width: 15px; height: 2px; left: 16px; top: 31px; position: absolute; background: rgba(217, 217, 217, 0); box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 1px; border: 1px white solid">
      </div>
      <div class="text-white-19-400" style="left: 50px; top: 6px; position: absolute; text-align: center;">실시간 버스 위치
      </div>
    </div>
    <div style="width: 133px; height: 39px; left: 136px; top: 610px; position: absolute; text-align: center">
      <span class="text-black-17-400"></span>
      <span class="text-black-23-400">-</span>
      <span class="text-black-17-400">현재 버스 위치</span>
    </div>
  </div>

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

</html>