WebSandbox_1/index.html at main · kh-woo/WebSandbox_1 · 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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="index_style.css">
  <link rel="icon" type="파비콘/png" href="image/파비콘.png">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <title>광운대학교 컴퓨터정보공학부</title>
  <script>
    const content = [
      { title: "공지사항 ", url: "events.html" },
      { title: "자료집", url: "resources.html" },
      { title: "FAQ 페이지", url: "FAQ_Board.html" },
      { title: "홈페이지", url: "index.html" },
      { title: "소모임 소개", url: "club.html" },
      { title: "Plan_manager", url: "Plan_manager.html" },
    ];

    function searchContent() {
      const query = document.getElementById('search-bar').value.toLowerCase();
      const resultsContainer = document.getElementById('search-results');
      resultsContainer.innerHTML = '';

      if (query.trim() === '') {
        resultsContainer.style.display = 'none';
        return;
      }

      const results = content.filter(item => item.title.toLowerCase().includes(query));

      if (results.length > 0) {
        resultsContainer.style.display = 'block';
        resultsContainer.innerHTML = results.map(item =>
          `<p><a href="${item.url}" style="text-decoration: none; color: black;">${item.title}</a></p>`
        ).join('');
      } else {
        resultsContainer.style.display = 'block';
        resultsContainer.innerHTML = '<p>검색 결과가 없습니다.</p>';
      }

      // 3초 후 검색 결과 숨기기
      setTimeout(() => {
        resultsContainer.style.display = 'none';
      }, 3000); // 3초
    }
    //엔터로 검색 기능
    document.addEventListener('DOMContentLoaded', () => {
      const searchBar = document.getElementById('search-bar');
      searchBar.addEventListener('keydown', (event) => {
        if (event.key === 'Enter') {
          event.preventDefault(); // 기본 동작 방지
          searchContent();
        }
      });
    });
  </script>
</head>
<body>

  <!-- 헤더 -->
  <header>
    <div class="logo">
      <a href="index.html"> <!-- 이미지를 링크로 감싸기 -->
        <img src="image/광운대학교.png" alt="Kwangwoon University Logo">
      </a>
      <h1>컴퓨터정보공학부 학생회</h1>
    </div>
    <div class="search-container">
      <input type="text" id="search-bar" placeholder="검색..." />
      <span class="search-icon" onclick="searchContent()">⌕</span>
      <div id="search-results" style="display: none;"></div>
      <nav class="menu-links">
        <a href="index.html">홈페이지</a>
        <a href="resources.html">자료집</a>
        <a href="events.html">공지사항</a>
        <a href="FAQ_Board.html">FAQ</a>
      </nav>
      <div id="search-results"></div>
    </div>
  </header>

  <!-- 사이드바 -->
  <div class="side-bar">
    <div class="links">
      <ul>
        <li><a href="login.html" style="color:white; text-decoration:none;">로그아웃</a></li>
        <li><a href="index.html" style="color:white; text-decoration:none;">홈페이지</a></li>
        <li><a href="resources.html" style="color:white; text-decoration:none;">자료집</a></li>
        <li><a href="events.html" style="color:white; text-decoration:none;">공지사항</a></li>
        <li><a href="club.html" style="color:white; text-decoration:none;">소모임 소개</a></li>
        <li><a href="introduce_2.html" style="color:white; text-decoration:none;">학과 소개</a></li>
        <li><a href="FAQ_Board.html" style="color:white; text-decoration:none;">FAQ</a></li>
        <li><a href="Plan_manager.html" style="color:white; text-decoration:none;">Plan Manager</a></li>
      </ul>
    </div>
    <div class="footer-links">
      <a href="https://www.kw.ac.kr" target="_blank">광운대학교 홈페이지</a>
      <a href="https://sw.kw.ac.kr" target="_blank">인융대 홈페이지</a>
    </div>
  </div>

  <!-- 메인 콘텐츠 -->
  <main>
    <h1 style="font-size: 48px; font-weight: bold; margin-bottom: 30px;">
      컴퓨터정보공학부 학생회 공식 웹사이트에 오신 것을 환영합니다.◡̈
    </h1>

    <div id="organization">
        <div class="title">
          <p>조직도</p>
        </div>
        <div class="tree">
          <!-- 대표이사 -->
          <li class="org-li li-center">
            <p class="org">김재용(회장)</p>
            <p class="org">최우진(부회장)</p>
            <ul class="org-ul">
              <li class="org-li">
                <p onclick="location.href='team_1.html'">김현우(운영국)</p>
                <ul class="work">
                    <li>• 행사 인원관리</li>
                    <li>• 행사 진행</li>
                    <li>• 과방 관리</li>
                    <li>• 학생회 일 직접 실행</li>
                </ul>
              </li>
              <li class="org-li">
                <p onclick="location.href='team_2.html'">양서은(홍보국)</p>
                <ul class="work">
                  <li>• 행사 홍보</li>
                  <li>• 행사 설계</li>
                  <li>• 인스타그램 관리</li>
                </ul>
              </li>
              <!-- 기획국 -->
              <li class="org-li">
                <p onclick="location.href='team_3.html'">장서현(기획국)</p>
                <ul class="work">
                  <li>• 행사 기획</li>
                  <li>• 과방 구조 기획</li>
                  <li>• 웹사이트 기획</li>
                </ul>
              </li>
            </ul>
          </li>
        </div>
      </div>
  </div>
  </main>

  <!-- 푸터 -->
  <footer>
    <div class="footer-left"></div>
    <div class="footer-right">
      <!-- 첫 번째 아이콘: 카카오톡 -->
      <div class="icon-wrapper">
        <a href="https://open.kakao.com/o/gDFOk91g" target="_blank">
          <img src="image/메세지.png" alt="카카오톡 아이콘" class="footer-icon" style="width: 60px; height: 50px; transition: transform 0.2s ease;">

        </a>
        <div class="tooltip">카카오톡 채팅방으로 이동합니다.</div>
      </div>

      <!-- 두 번째 아이콘: 인스타그램 -->
      <div class="icon-wrapper">
        <a href="https://www.instagram.com/kw_cie/" target="_blank">
          <img src="image/인스타그램.png" alt="인스타그램 아이콘" class="footer-icon" style="width: 60px; height: 50px; transition: transform 0.2s ease;">
        </a>
        <div class="tooltip">인스타그램 페이지로 이동합니다.</div>
      </div>

      <!-- 텍스트 영역 -->
      <div class="text">
        <p>김재용(회장): 010-5651-4415</p>
        <p>최우진(부회장): 010-4907-7802</p>
      </div>
    </div>
  </footer>

</body>
</html>