민병수 / Voicoding

Go to a project
Toggle navigation Toggle navigation pinning
민병수
ce227947 1 parent ed3a7596

Manual update and UI modify

Inline Side-by-side
Showing 5 changed files with 270 additions and 15 deletions
1 -1.
2 -2.
3 -3.
...\ No newline at end of file ...\ No newline at end of file
1 +Voicoding을 사용하시려면 몇 가지 주의사항이 있습니다.
2 +
3 +먼저, 모든 선언 혹은 사용에는 조금의 텀을 주시고 말씀해주세요.
4 +영어를 사용하게 되는 부분에는 자신이 영어 원어민이 된 것처럼 말씀해주세요.
5 +
6 +Baisc Func usage에는 Python의 내장함수인 input, split, print, len, sum, min, max 그리고 수식에 대한 사용법이 적혀 있습니다. 이 중, input과 split, 그리고 수식을 제외한 나머지 함수를 사용할 때에는 Assertion Parameters를 참고해 사용해주셔야 합니다.
7 +
8 +Assertion Variables에는 변수 선언의 사용법이 적혀있습니다. 변수 선언을 하는 방식에는 문자, 숫자, 리스트, 함수의 방법이 있습니다.
9 +
10 +Loop statements에는 반복문(for, while)의 사용법이 적혀있습니다. 타겟 변수를 말씀하실 때에는 Assertion Parameters를 참고해 사용해주세요.
11 +
12 +IF statements에는 조건문(if, elif, else)의 사용법이 적혀있습니다. 조건문의 조건식을 사용하시는 방법은 Bool logic 을 참고해 사용해주세요.
13 +
14 +User Define Func usage에는 사용자 정의 함수, def에 대한 사용법이 적혀있습니다. 함수에 사용되는 파라미터를 선언하실 때에는 Assertion Parameters를 참고해주세요.
15 +
16 +Assertion Parameters에는 함수 혹은 문장에서 변수가 호출될 때 쓰이는 Parameter의 사용법이 적혀있습니다.
17 +
18 +Bool logic에는 부울 논리식, 조건문의 조건식을 사용하는 방법이 적혀있습니다.
...\ No newline at end of file ...\ No newline at end of file
......
1 -<!DOCTYPE html>
2 -<html lang="en">
3 -<head>
4 - <meta charset="UTF-8">
5 - <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 - <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 - <title>Manual</title>
8 -</head>
9 -<body>
10 -
11 -</body>
12 -</html>
...\ No newline at end of file ...\ No newline at end of file
1 +:root{
2 + --text-color:#fffde7;
3 + --background-color:#ff94c2;
4 + --accent-color:#ba2d65;
5 + --output-color:#ff7043;
6 + --output-accent-color:#c63f17;
7 +}
8 +
9 +body{
10 + margin : 0;
11 + font-family: 'Source Sans Pro';
12 +}
13 +a{
14 + text-decoration:none;
15 + color:var(--text-color);
16 +
17 +}
18 +.voi_menu{
19 + display:flex;
20 + justify-content:space-between;
21 + align-items:center;
22 + background-color:var(--background-color);
23 + padding: 8px 12px;
24 +}
25 +.menu_bar_content li:hover{
26 + background-color:var(--accent-color);
27 + border-radius: 4px;
28 + color:var(--text-color);
29 +}
30 +.menu_bar_icons li:hover{
31 + background-color:var(--accent-color);
32 + border-radius: 4px;
33 + color:var(--text-color);
34 +}
35 +.menu_bar_logo{
36 + font-size: 20px;
37 +
38 +}
39 +.menu_bar_logo i{
40 + color:var(--accent-color);
41 +}
42 +.basic:hover{
43 + color:var(--text-color);
44 +}
45 +.menu_bar_content{
46 + display:flex;
47 + list-style: none;
48 + padding-left: 0;
49 +}
50 +.menu_bar_content li{
51 + padding: 8px 12px;
52 +}
53 +.menu_bar_icons{
54 + list-style: none;
55 + display: flex;
56 + padding-left:0;
57 +}
58 +.menu_bar_icons li{
59 + padding: 8px 12px;
60 +}
61 +.menu_toggle{
62 + color:var(--text-color);
63 + display: none;
64 + position: absolute;
65 + right:32px;
66 + font-size: 24px;
67 +}
68 +.menu_toggle:hover{
69 + color:var(--text-color);
70 +}
71 +@media screen and (max-width: 500px) {
72 + .voi_menu{
73 + flex-direction: column;
74 + align-items: flex-start;
75 + padding: 8px 24px;
76 + }
77 + .menu_bar_content{
78 + display:none;
79 + flex-direction:column;
80 + align-items:center;
81 + width: 100%;
82 + }
83 + .menu_bar_content li{
84 + width: 100%;
85 + text-align: center;
86 + }
87 + .menu_bar_icons{
88 + display:none;
89 + justify-content: center;
90 + width: 100%;
91 + }
92 + .menu_toggle{
93 + display: block;
94 + color:var(--text-color);
95 + }
96 + .menu_bar_content.active,
97 + .menu_bar_icons.active{
98 + display:flex;
99 + }
100 +}
101 +.basic{
102 + color:var(--text-color);
103 + font-size:13px;
104 + font-weight: bold;
105 + font-family: 'Noto Sans KR';
106 +}
107 +.content{
108 + margin:100px 20px 20px 20px;
109 + display:block;
110 + background-color:var(--background-color);
111 + align-items:center;
112 + text-align:center;
113 + font-family: 'Noto Sans KR';
114 +}
115 +.overall_usage{
116 + display:none;
117 + align-items:flex-start;
118 + flex-direction: row;
119 + flex-wrap: nowrap;
120 +}
121 +.basic_func{
122 + display:none;
123 +}
124 +.variables{
125 + display:none;
126 +}
127 +.for{
128 + display:none;
129 +}
130 +.if{
131 + display:none;
132 +}
133 +.def{
134 + display:none;
135 +}
136 +.parameter{
137 + display:none;
138 +}
139 +.bool{
140 + display:none;
141 +}
142 +.overall_usage.active,
143 +.basic_func.active,
144 +.variables.active,
145 +.for.active,
146 +.if.active,
147 +.def.active,
148 +.parameter.active,
149 +.bool.active{
150 + display:block;
151 +}
...\ No newline at end of file ...\ No newline at end of file
1 +<!DOCTYPE html>
2 +<html lang="en">
3 +<head>
4 + <meta charset="UTF-8">
5 + <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 + <title>Manual</title>
8 + <link href="Voico_Manual.css" rel="stylesheet" type="text/css">
9 + <script src="https://kit.fontawesome.com/a5f26fa106.js" crossorigin="anonymous"></script>
10 + <script src="menu.js" defer></script>
11 + <link rel="preconnect" href="https://fonts.gstatic.com">
12 + <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet">
13 + <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@200&display=swap" rel="stylesheet">
14 + <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR&family=Raleway:wght@200&display=swap" rel="stylesheet">
15 + <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@700&display=swap" rel="stylesheet">
16 +</head>
17 +<body>
18 + <nav class="voi_menu">
19 + <div class="menu_bar_logo">
20 + <i class="fas fa-microphone-alt"></i>
21 + </div>
22 + <ul class="menu_bar_content">
23 + <a class="basic" href="#"><li>How to use</li></a>
24 + <a class="basic" href="#"><li>Assertion Variables</li></a>
25 + <a class="basic" href="#"><li>Assertion Parameters</li></a>
26 + <a class="basic" href="#"><li>Basic Func usage</li></a>
27 + <a class="basic" href="#"><li>Loop statements</li></a>
28 + <a class="basic" href="#"><li>IF statements</li></a>
29 + <a class="basic" href="#"><li>User Define Func usage</li></a>
30 + <a class="basic" href="#"><li>Bool logic</li></a>
31 + </ul>
32 + <ul class="menu_bar_icons">
33 + <a class="basic" href="Voico_Menu.html" style ="font-size: 17px;"><li><i class="fas fa-home"></i></li></a>
34 + </ul>
35 + <a href="#" class="menu_toggle"><i class="fas fa-bars"></i></a>
36 + </nav>
37 + <div class="content">
38 + <div class="overall_usage">
39 + <h1>Voicoding을 사용하시려면 몇 가지 주의사항이 있습니다.<br></h1>
40 +
41 + <h2>먼저, 모든 선언 혹은 사용에는 조금의 텀을 주시고 말씀해주세요.<br>
42 + 영어를 사용하게 되는 부분에는 자신이 영어 원어민이 된 것처럼 말씀해주세요.<br></h2>
43 +
44 + <p>Basic Func usage에는 Python의 내장함수인 input, split, print, len, sum, min, max 그리고 수식에 대한 사용법이 적혀 있습니다.<br> 이 중, input과 split, 그리고 수식을 제외한 나머지 함수를 사용할 때에는 Assertion Parameters를 참고해 사용해주셔야 합니다.<br>
45 +
46 + Assertion Variables에는 변수 선언의 사용법이 적혀있습니다. <br>변수 선언을 하는 방식에는 문자, 숫자, 리스트, 함수의 방법이 있습니다.<br>
47 +
48 + Loop statements에는 반복문(for, while)의 사용법이 적혀있습니다. <br>타겟 변수를 말씀하실 때에는 Assertion Parameters를 참고해 사용해주세요.<br>
49 +
50 + IF statements에는 조건문(if, elif, else)의 사용법이 적혀있습니다. <br>조건문의 조건식을 사용하시는 방법은 Bool logic 을 참고해 사용해주세요.<br>
51 +
52 + User Define Func usage에는 사용자 정의 함수, def에 대한 사용법이 적혀있습니다. <br>함수에 사용되는 파라미터를 선언하실 때에는 Assertion Parameters를 참고해주세요.<br>
53 +
54 + Assertion Parameters에는 함수 혹은 문장에서 변수가 호출될 때 쓰이는 Parameter의 사용법이 적혀있습니다.<br>
55 +
56 + Bool logic에는 부울 논리식, 조건문의 조건식을 사용하는 방법이 적혀있습니다.</p>
57 + </div>
58 + <div class="variables"></div>
59 + <div class="parameter"></div>
60 + <div class="basic_func"></div>
61 + <div class="for"></div>
62 + <div class="if"></div>
63 + <div class="def"></div>
64 + <div class="bool"></div>
65 + </div>
66 +</body>
67 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 const toggleBtn = document.querySelector('.menu_toggle'); 1 const toggleBtn = document.querySelector('.menu_toggle');
2 const menu = document.querySelector('.menu_bar_content'); 2 const menu = document.querySelector('.menu_bar_content');
3 const icons = document.querySelector('.menu_bar_icons'); 3 const icons = document.querySelector('.menu_bar_icons');
4 +const content1 = document.querySelector('.overall_usage');
5 +const content2 = document.querySelector('.basic_func');
6 +const content3 = document.querySelector('.variables');
7 +const content4 = document.querySelector('.for');
8 +const content5 = document.querySelector('.if');
9 +const content6 = document.querySelector('.def');
10 +const content7 = document.querySelector('.parameter');
11 +const content8 = document.querySelector('.bool');
12 +
4 13
5 toggleBtn.addEventListener('click', () => { 14 toggleBtn.addEventListener('click', () => {
6 menu.classList.toggle('active'); 15 menu.classList.toggle('active');
7 icons.classList.toggle('active'); 16 icons.classList.toggle('active');
8 }) 17 })
18 +
19 +menu.addEventListener('click', () =>{
20 + content1.classList.toggle('active');
21 +})
22 +menu.addEventListener('click', () =>{
23 + content2.classList.toggle('active');
24 +})
25 +menu.addEventListener('click', () =>{
26 + content3.classList.toggle('active');
27 +})
28 +menu.addEventListener('click', () =>{
29 + content4.classList.toggle('active');
30 +})
31 +menu.addEventListener('click', () =>{
32 + content5.classList.toggle('active');
33 +})
34 +menu.addEventListener('click', () =>{
35 + content6.classList.toggle('active');
36 +})
37 +menu.addEventListener('click', () =>{
38 + content7.classList.toggle('active');
39 +})
40 +menu.addEventListener('click', () =>{
41 + content8.classList.toggle('active');
42 +})
......