BeFit/index.html at dev · BeFit-crew/BeFit · 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
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>BeFit</title>
    <link rel="icon" href="assets/img/be-fit-favicon.png"/>
    <link rel="stylesheet" href="assets/css/common.css">
    <link rel="stylesheet" href="assets/css/main.css">
    <link rel="stylesheet" href="src/infermedica/infermedica.css">

</head>
<body>
    <!-- 헤더 기능과 설명  -->
    <header class="mega-header">
        <nav class="nav">
            <ul class="nav-list">

                <li class="nav-item">
                    BeFit
                    <div class="mega-menu">
                        <div class="menu-left">
                            <ul>
                                <li data-target="planner-1">맞춤 설정</li>
                                <li data-target="planner-2">AI 분석 및 요약</li>
<!--                                <li data-target="planner-3"></li>-->
                            </ul>
                        </div>
                        <div class="menu-right">
                            <div class="desc active" id="planner-1">
                                사용자의 체성분 및 활동 정보 목표(체지방률, 골격근량 등)을 기간과 건강관련 특이사항등
                                세부사항을 입력할 수 있습니다.
                            </div>
                            <div class="desc" id="planner-2">
                                저장된 데이터로 세부사항을 분석하여 필요한 정보들을 정리해주고
                                사용자에게 딱 맞는 식단과 운동을 일마다 알려드립니다.

                            </div>
                            <div class="desc" id="planner-3">
                            </div>
                        </div>
                    </div>
                </li>

                <li class="nav-item">
                    BeFit+
                    <div class="mega-menu">
                        <div class="menu-left">
                            <ul>
                                <li data-target="fitness-1">운동 영상 추천</li>
                                <li data-target="fitness-2">상품 검색</li>
                                <li data-target="fitness-3">AI 건강 상담</li>
                            </ul>
                        </div>
                        <div class="menu-right">
                            <div class="desc active" id="fitness-1">
                                맞춤 분석에 따라 관련된 운동을 추천하고 키워드를 누르거나 키워드를 입력해 사용자에 맞는 운동 영상을 추천해드립니다.
                            </div>
                            <div class="desc" id="fitness-2">
                                맞춤 분석에 따라 필요한 상품을 추천하고 운동복, 신발, 단백질 보충제 등 사용자에 필요한 물건을 검색하여 바로 구매할 수 있습니다.
                            </div>
                            <div class="desc" id="fitness-3">
                                의료 전문 AI로 사용자에 정보에 맞춰 답변하여 실시간으로 언제 어디서나 증상을 말하고 답할 수 있습니다.
                            </div>
                        </div>
                    </div>
                </li>

                <li class="nav-item">
                    More
                    <div class="mega-menu">
                        <div class="menu-left">
                            <ul>
                                <li data-target="more-1">사용자 경험 강화</li>
                                <li data-target="more-2">동기부여 시스템</li>
                                <li data-target="more-3">프리미엄 구독</li>
                            </ul>
                        </div>
                        <div class="menu-right">
                            <div class="desc active" id="more-1">
                                사용자 인증 및 DB 연동 회원가입/로그인 기능을 추가하고 DB(Firebase 등)에 사용자 정보를 저장 예정
                            </div>
                            <div class="desc" id="more-2">
                                진행 상황 트래킹 및 데이터 시각화, AI 추천 계획을 연동하는 캘린더 기능 추가 사용자가 직접 수정하고 달성 여부를 체크하는 To-Do List 기능 구현 예정
                            </div>
                            <div class="desc" id="more-3">
                                더 정교한 AI 모델을 활용 건강 상품 제휴 및 커머스 기능 강화 예정
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </nav>
    </header>

    <!-- 로고 + 하트 아이콘 -->
    <div class="logo-hover-area-main">
        <div class="logo-container-main">
            <!-- 심장 위치의 하트 -->
            <button class="start-btn-main" data-tooltip="START" ><i class="fas fa-heartbeat"></i></button>

            <div class="logo-image-main"></div>
            <div class="logo-overlay-main"></div>
        </div>
    </div>


    <!-- 어사이드 버튼 ( 여기서부터 밑에 있는 스크립트 까지 복사) -->
    <div class="aside-wrapper-main">
        <div class="aside-toggle-btn-main">
            <i class="fas fa-cog"></i>
        </div>
        <div class="aside-buttons-main">
            <button class="login-btn-main aside-btn-main" data-tooltip="건강 플래너">
                <!-- 건강 체크 -->
                <a href="src/befit-ai/befit-ai.html">
                    <i class="fas fa-user-check"></i>
                </a>
            </button>
            <button class="playlist-btn-main aside-btn-main" data-tooltip="운동 영상 추천">
                <!-- 다영님 -->
                <a href="src/playlist/playlist.html">
                    <i class="fab fa-youtube"></i>
                </a>
            </button>
            <button class="shopping-btn-main aside-btn-main" data-tooltip="상품 검색">
                <!-- 동준님 -->
                <a href="src/shopping/shopping.html">
                    <i class="fas fa-shopping-basket"></i>
                </a>
            </button>
            <button class="checkHealth-btn-main aside-btn-main" data-tooltip="AI 건강 상담">
                <i class="fas fa-comment-medical"></i>
            </button>
        </div>
    </div>

    <div class="disclaimer-modal">
        <div class="disclaimer-box">
            <h2>면책 조항 및 개인정보 보호 안내</h2>
            <div class="disclaimer-text">
                <p>
                    이 앱은 일반적인 건강 정보를 제공하며, 의료 전문가의 진단이나 치료를 대체하지 않습니다.<br />
                    본 앱에서 제공되는 모든 정보는 참고용이며, 건강 상태에 대한 정확한 판단을 보장하지 않습니다.<br />
                    건강 관련 증상이나 응급 상황 발생 시 반드시 의료기관을 방문하시기 바랍니다.<br />
                    앱 사용 중 발생하는 문제에 대해 개발자는 법적 책임을 지지 않습니다.
                </p>
                <hr />
                <p>
                    [개인정보 보호 안내]<br />
                    이 앱은 건강 상태 분석 및 상담 기능을 위해 사용자의 키, 나이, 알레르기 등 건강 관련 정보를 수집할 수 있습니다.<br />
                    수집된 정보는 오직 앱 기능 제공을 위해 사용되며, 제3자에게 제공되지 않습니다.<br />
                    사용자는 언제든지 정보 제공을 거부할 수 있으며, 이 경우 일부 기능이 제한될 수 있습니다.
                </p>
            </div>
            <div class="disclaimer-actions">
                <input type="checkbox" id="agree-checkbox" />
                <label for="agree-checkbox">위 내용을 모두 읽었으며 동의합니다.</label>
                <button id="continue-btn" disabled>계속</button>
            </div>
        </div>
    </div>

    <!-- 메인 js 토글 클릭기능   -->
    <script src="assets/js/main.js" defer></script>
    <!-- 건강 상담 챗폿 js -->
    <script src="src/infermedica/infermedica.js" type="module"></script>


    <script>
        // 로고 클릭
        const $startBtnMain = document.querySelector('.start-btn-main');
        const $logoImage = document.querySelector('.logo-image-main');

        $startBtnMain.addEventListener('click', () => {
        window.location.href = 'src/befit-ai/befit-ai.html';
        });

        $startBtnMain.addEventListener('mouseenter', () => {
            $logoImage.classList.add('heartbeat-active');
        });

        $startBtnMain.addEventListener('mouseleave', () => {
            $logoImage.classList.remove('heartbeat-active');
        });

        document.addEventListener("DOMContentLoaded", function () {
            const menuItems = document.querySelectorAll('.menu-left li');
            const descriptions = document.querySelectorAll('.menu-right .desc');

            menuItems.forEach(item => {
                item.addEventListener('mouseenter', () => {
                    const target = item.getAttribute('data-target');

                    descriptions.forEach(desc => {
                        desc.classList.remove('active');
                    });

                    const targetDesc = document.getElementById(target);
                    if (targetDesc) {
                        targetDesc.classList.add('active');
                    }
                });
            });
        });
    </script>

</body>
</html>