YoGo_Web/index.html at develop · Team-Spino/YoGo_Web · 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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>YOGO Timezone planner</title>
	<meta name="author" content="Team Spino" />
	<meta name="description" content="Yogo is a App service that make plans easier. This is the page for YoGo beginners" />
	<meta name="keywords"  content="fullpage, YOGO, Timezone, planner" />
	<meta name="Resource-type" content="Document" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="stylesheet" type="text/css" href="../dist/fullpage.css" />

    <link rel="stylesheet" href="styles/default.css">

    <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" />
</head>
<body>
<div class = "block">
    <h1>화면을 확대해주세요!😅</h1>
</div>
<div id="fullpage" class="inter-font">

	<div class="section" id="section0">
        <div class="container">
            <div class="overview">
                    <div class="overview-contents">
                    <img src="./images/yogo-logo2.svg" alt="yogo logo" class="logo">
                    <h1>YOGO</h1>
                    <p>편리한 시차 계산 알람기</p>
                    <p>Make to easy set up different timezones meetings</p>
                </div>
            </div>
            <div class="phone-img">
                <img src="./images/app-phone.png" alt="phone with hand" class="phone-img">
            </div>

        </div>
    </div>
	<div class="section" id="section1">
        <div class="container">
            <div class="title gray-font">
                <h3>Problem</h3>
            </div>
            <div class="chat-bubble-area">
                <div class="left-bubble-area">
                    <div class="left-person">
                        <img src="images/left-person.svg" alt="left-person">
                        <div class="person-explanation">EPL을 좋아하는 김수현씨</div>
                    </div>
                    <div class="left-bubble ">
                        <div class="left-bubble-text main-color"> 계속 시차 계산하기 귀찮은걸</div>
                    </div>
                </div>
                <div class="right-bubble-area">
                    <div class="right-bubble">
                        <div class="right-bubble-text gray-font">여러 회의를 시차에 따라 정리해주는 서비스 없나?</div>
                    </div>
                    <div class="right-person">
                        <img src="images/right-person.svg" alt="right-person">
                        <div class="person-explanation">해외 사람들과 협업을 자주하는 최유진씨</div>
                    </div>

                </div>
            </div>
            <div class="problem-explanation gray-font">
                <p>
                    여러 나라의 사람들과 회의를 진행하거나, 영국에서 하는 축구 경기를 한국에서 보고싶을 때! <br>
                    <br>
                    우리는 일일이 그 시간대의 시간을 찾아야했습니다.
                </p>
            </div>
        </div>
	</div>

	<div class="section" id="section2">
        <div class="container">
            <div class="title gray-font">
                <h3>Solution</h3>
            </div>
            <div class="solution-area">
                <div class="as-is-area">
                    <div class="as-is">As is</div>
                    <div class="as-is-explanation-set gray-font">
                        <div class="as-is-explanation-1">시차가 다른 도시의 사람들과 협업을 위해서 일일이 계산해야 한다</div>
                        <div class="as-is-explanation">여러 날의 많은 일정이 정리가 안 되어있다</div>
                        <div class="as-is-explanation">기존의 시계 앱은 현재 시간의 다른 나라 시간만 확인할 수 있다</div>
                    </div>
                </div>
                <div class="arrow">
                    <div class="arrow-item">></div>
                </div>
                <div class="to-be-area">
                    <div class="to-be main-color">To be</div>
                    <div class="to-be-explanation-set gray-font">
                        <div class="to-be-explanation-1"><mark>도시를 지정하여</mark> 원하는 일정을 기록해둘 수 있다</div>
                        <div class="to-be-explanation"><mark>스케줄링 기능</mark>을 통해 편하게 일정 관리를 한다</div>
                        <div class="to-be-explanation">원하는 일정에 맞추어 <mark>시간을 미리 계산</mark>해볼 수 있다</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

	<div class="section" id="section3">
        <div class="container">
            <div class="fourth-title gray-font">
                <div>서비스 기능을 확인해보세요</div>
            </div>
            <div class="experience-section">
                <div class="phone">
                    <img src="images/phone1.png" alt="phone">
                </div>

                <div class="experience-explanation">

                    <div class="explanation-title gray-font">
                        <h3>서비스 소개</h3>
                    </div>

                    <div class="explanation-list">

                        <div class="explanation">

                            <div class="explanation-el-title gray-font">
                                <h3>일정 만들기</h3>
                            </div>
                            <div class="explanation-contents">
                                <button class="button-left" style="cursor: pointer;" type="button"><img src="./images/arrow-left.svg"></button>
                                <div class="explanation-content">
                                    <p>컬러 태그로 관련된 일정들을 지정해 보세요.</p>

                                    <p>시차를 알고싶은 도시와 시간을 설정해 알람을 설정해보세요.</p>

                                    <p>알람이 울릴 요일을 선택해 일정을 관리하세요.</p>
                                </div>
                                <button class="button-right" type="button" style="cursor: pointer;">
                                    <img src="./images/arrow-right.svg">
                                </button>
                            </div>

                        </div>

                    </div>

                    <div class="download-suggestion-set">
                        <div class="download-suggestion gray-font">
                            YOGO를 계속 사용해보려면?
                        </div>
                        <div class="download">
                            <button type="button" onclick="window.open('https://apps.apple.com/kr/app/yogo-time-zone-planner/id1626444795')" style="cursor: pointer;"  class="main-color">YOGO 시작하기 <img src="./images/download.svg"> </button>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<div id="fp-nav" class="fp-right">
    <ul>
        <li>
            <a href="#page1" class="">
            <span class="fp-sr-only"></span>
            <span></span>
            </a>
            <div class="fp-tooltip fp-right">Overview</div>
        </li>
        <li>
            <a href="#page2" class="">
                <span class="fp-sr-only"></span>
                <span></span>
            </a>
            <div class="fp-tooltip fp-right">Problem</div>
        </li>
        <li>
            <a href="#page3" class="">
                <span class="fp-sr-only"></span>
                <span></span>
            </a>
            <div class="fp-tooltip fp-right">Solution</div>
        </li>
        <li><a href="#page4" class="">
            <span class="fp-sr-only"></span>
            <span></span>
        </a>
        <div class="fp-tooltip fp-right">Experience</div>
        </li>
    </ul>
</div>

<script type="text/javascript" src="../dist/fullpage.js"></script>
<script type="text/javascript" src="./dist/silde.js"></script>
<script type="text/javascript" src="./dist/block.js"></script>
<script type="text/javascript">
	var myFullpage = new fullpage('#fullpage', {
		sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff']
	});
</script>
</body>
</html>