CSU_Bus-Map/board.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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../css/default.css">
  <link rel="stylesheet" href="../css/style.css?ver=18">
  <title>분실물 게시판</title>

  <style>
    .row {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .column {
      flex: 0 0 30%;
      margin-bottom: 10px;
    }

    img {
      width: 50px;
      height: 50px;
    }

    .container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .container .item {
      width: 30%;
      margin-bottom: 20px;
      padding: 10px;
      box-sizing: border-box;
    }

    .container .item img {
      width: 50px;
      height: 50px;
    }

    .container .item .title {
      text-align: left;
    }

    .container .item .date {
      text-align: right;
    }

    .reviewContent {
      display: flex;
      justify-content: space-between;
      margin-top: 10px; // 이미지와의 간격 조절
    }

    .reviewContent>* {
      margin: 0 10px; // 제목과 날짜 사이의 간격 조절
    }
  </style>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function () {
      $.get("http://15.164.210.143/board2.php", function (data, status) {
        // 'data' contains the output of board.php
        $("#result").html(data);
      })
        .fail(function (jqXHR, textStatus, errorThrown) {
          console.error('AJAX request failed: ' + textStatus + ', ' + errorThrown);
        });
    });
  </script>
</head>

<body>
  <header>
    <nav id="navBar">
      <div class="navBarCon">
        <div class="navBarleft">
          분실물 게시판
        </div>
      </div>
    </nav>
  </header>
  <div>
    <div class="mainCon">

      <div style="width: 374px; height: 900px; left: 8px; top: 10px; position: absolute">

        <div style="width: 374px; height: 53px; left: 0px; top: 0px; position: absolute">
          <div
            style="width: 390px; 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="left: 51px; top: 6px; position: absolute; text-align: center; color: white; font-size: 19px; font-family: Noto Sans KR; font-weight: 400; line-height: 40px; word-wrap: break-word">
            분실물 게시판</div>

          <br><br><br>
          <div
            style="display: flex; align-items: center; width: 61%; color: black; font-size: 15px; font-family: Noto Sans KR; font-weight: 400; line-height: 40px; word-wrap: break-word">
            <div style="flex-grow: 1;">분실물이 주인을 기다리고 있어요</div>
            <img style="width:20px; height:20px;"
              src="https://s3-alpha-sig.figma.com/img/cb85/aad8/367df0d6f7d5c26dab7661c2b5520698?Expires=1702252800&Signature=fYUU5UEfDIrUa8~xL6Ew1sjTdSWFPXlm9mriVFXYAQuhCp4sPu66djxVRequDTeNxCkld7bXn--zRYmkjrfYw1Xv7sTkYaugTuy0YQERNfxsUOs~EvBxzp2f-e5dKM2e5-lBZFDtG4eQYmriv8ZJ820DH7MfI0fSkzhIgnr6LsAfae1DHGdxRYF0JPLc6WAxcsG~pdbttyDinZdpwNvxyQ2DddrJcIa8w9FHE0H-2WS9nvC2W~Z2p36OQcSQfA5kqPzroVes5G9cF~gAsz4~KDshKk5-2eayeGjmjM~zKtqaRNd33v-o7g4QK6jz7nmniPRP1~87eTnYaDenUPmx2Q__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4">
          </div>

          <div
            style="display: flex; align-items: center; width: 95%; color: black; font-size: 20px; font-family: Noto Sans KR; font-weight: 700; line-height: 25px; word-wrap: break-word">
            <div style="flex-grow: 1;">게시글을 등록하여 주인을 찾아주세요!</div>
            <img style="width:30px; height:30px; margin-left: 5px;"
              src="https://s3-alpha-sig.figma.com/img/0329/0ab4/df45e7c7da88fe60ffd327cbb7edd02b?Expires=1702252800&Signature=iIf2M1TS9~sWbi02PcgNqZjdgMlOu777JtSAmdMygNu3SrOCf7T0guTQSF0md0olAtxVQbaQgiMKna74VCAASCkm3sO1PGqf1Xc08rDF5pnskSajcWBuRP5Qx5doGdSX6qv2iDFBRUxvqaKKSQLoToZp92w9o14sE0GCniCQVt-daGyo~~6OkawdUIO85F2FK1VN5xe8bwMNspkq6dHPsLjz-a49f4tOAfK~pDNNH8~gVqDU55FI2LclZlOSJF10AajQdn70zUrr67FTtww7~rWdsLlekJYzfmB6tChBmVdVl5-8jN-SFM7FhJ9FDbIMTzBI5QwwxQFWJOnM~G4ZDA__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4">
          </div>
          <br>

          <div
            style="color: black; font-size: 15px; font-family: Noto Sans KR; font-weight: 400; line-height: 30px; word-wrap: break-word">
            <b>분실물/습득물</b>
          </div>

          <table class="reviewTable" style=" width: 300px; border-top: 2px;">
            <thead>
              <tr>

                <td class="reviewTd2"></td>
                <td class="reviewTd3"></td>
                <td class="reviewTd4"></td>
              </tr>
            </thead>
            <tbody id="result"></tbody>
          </table>

          <div
            style="margin-left:30%; width: 152px; height: 46px; background: linear-gradient(0deg, #0032A0 0%, #0032A0 0%), linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%); border-radius: 15px; display: flex; align-items: center; justify-content: center;">
            <img style="width: 16px; height: 16px; margin-right: 5px;"
              src="https://s3-alpha-sig.figma.com/img/fa8a/9d17/95235f0a627dea3a9ca8b6b21a964f72?Expires=1702252800&Signature=G9Xf03p7QWHQ0JNP1KBnAIeynNHDN8nPaG2AkcwwyW7SWu~ilOGLaZ2pmagLANjUWwmcW6vKRBsHYFawcWIPD-WZSk~uJHLyPeoiCwqYHXYC9HExWy0atm71wZw7z2kj8m0Vj7ue5RjmyjdH7AlzLx-6eBeeXbMOJhspkjZIzBPc7HOg7eIm3HnSzMvf0CvYPvhDn5ZpEV65Rtdcpggu01neUR-wNf4N1uk9lKQeicFfjUuXKUyY4nm0ZaFlvEZULE2EQmfOKHo4h6W2VvhpZR0FBetM21FM9S2yOl1Kb-Ffp6g8zkRkBp8olP63W6-JE3eL6ZjM51DiteqOsLeXhA__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4" />
            <a href="http://15.164.210.143/give.php"
              style="text-decoration-line: none; color:white; font-size: 16px; font-family: Noto Sans KR; font-weight: 700; word-wrap: break-word">분실물
              등록하기</a>
          </div>
        </div>
      </div>
      </section>
      <footer></footer>
</body>

</html>