김유현 / How much are you earning now

Go to a project
Toggle navigation Toggle navigation pinning
김유현
3ad6cd8c 1 parent 61998964

add .gitignore & sort folder & connect server

Inline Side-by-side
Showing 8 changed files with 483 additions and 8 deletions
1 +node_modules/
2 +*.json
1 +var express = require('express');
2 +var app = express();
3 +
4 +app.use(express.static(__dirname + '/public')); // 1
5 +
6 +app.listen(3000, function(){
7 + console.log('Server On!');
8 +});
No preview for this file type
1 +@import url(https://fonts.googleapis.com/css?family=Exo);
2 +
3 +$white: #fff;
4 +$black: #000;
5 +$main-black: #333;
6 +$green: #3ac28c;
7 +$lucifer: #666;
8 +
9 +html,body {
10 + font-family: 'Exo', sans-serif;
11 + background-color: $main-black;
12 + height: 100%;
13 + width: 100%;
14 + position: relative;
15 +}
16 +
17 +a.button {
18 + text-decoration: none;
19 + padding: 20px;
20 + display: inline-block;
21 + border: 1px solid $white;
22 + position: absolute;
23 + top: 50%;
24 + left: 50%;
25 + color: $white;
26 + transform: translate(-50%,-50%);
27 + transition: all .4s;
28 +
29 + &:hover {
30 + border-color: $green;
31 + color: $green;
32 + }
33 +}
34 +
35 +.modal-overlay {
36 + background: $main-black;
37 + bottom: 0;
38 + left: 0;
39 + position: fixed;
40 + right: 0;
41 + text-align: center;
42 + text-shadow: none;
43 + top: 0;
44 + opacity: 0;
45 + transform: scale(.5);
46 + transition: all .75s cubic-bezier(.68, -.55, .265, 1.55);
47 + z-index: -100;
48 +}
49 +
50 +.modal-wrapper {
51 + padding: 1em 0;
52 + position: relative;
53 + margin: 0 auto;
54 + max-width: 500px;
55 + width: 90%;
56 +
57 + .close {
58 + padding: 14px;
59 + position: absolute;
60 + right: .5em;
61 + top: 2.5em;
62 + width: 1.5em;
63 + cursor: pointer;
64 +
65 + &:before,
66 + &:after {
67 + content: '';
68 + position: absolute;
69 + display: block;
70 + width: 2px;
71 + height: 36px;
72 + background-color: $green;
73 + top:-5px;
74 + }
75 +
76 + &:before {
77 + transform: rotate(45deg);
78 + }
79 +
80 + &:after {
81 + transform: rotate(-45deg);
82 + }
83 + }
84 +
85 + h2 {
86 + color: $white;
87 + margin-bottom: 1em;
88 + text-transform: uppercase;
89 + }
90 +}
91 +
92 +@media (min-width: 50em) {
93 + .modal-wrapper {
94 + padding: 1.75em;
95 + }
96 +}
97 +@media (min-height: 37.5em) {
98 + .modal-wrapper {
99 + left: 50%;
100 + position: absolute;
101 + top: 50%;
102 + transform: translate(-50%, -50%);
103 + }
104 +}
105 +
106 +.active + .modal-overlay {
107 + opacity: 1;
108 + transform: scale(1);
109 + z-index: 800;
110 +}
111 +
112 +.message-form {
113 + clear: both;
114 + height: 350px;
115 +
116 + .input-button {
117 + text-align: center;
118 + padding: 20px;
119 +
120 + .button {
121 + border: 1px solid $white;
122 + background-color: transparent;
123 + padding: 10px 20px;
124 + transition: all .4s;
125 + color: $white;
126 + font-family: 'Exo', sans-serif;
127 + cursor: pointer;
128 +
129 + &:hover {
130 + color: $green;
131 + border-color: $green;
132 + }
133 + }
134 + }
135 +
136 + .input-box {
137 + font-size: 16px;
138 + line-height: 24px;
139 + width: 100%;
140 + height: 72px;
141 + display: block;
142 + position: relative;
143 +
144 + &.focus {
145 + .input-label {
146 + color: $green;
147 + transform: perspective(1px) scale(.75) translate3d(0, -18px, 0);
148 + }
149 +
150 + .underline-focus {
151 + transform: scaleX(1);
152 + }
153 +
154 + &.textarea {
155 + overflow-y: hidden;
156 + height: 200px; /* approximate max height */
157 + padding: 0 0 60px;
158 +
159 + .input-text {
160 + max-height: 200px;
161 + margin-top: 45px;
162 + padding-top: 0;
163 + }
164 + }
165 + }
166 +
167 + &.textarea {
168 + transition-property: all;
169 + transition-duration: .5s;
170 + transition-timing-function: cubic-bezier(0, 1, .5, 1);
171 +
172 + .input-text {
173 + resize: none;
174 + overflow: hidden;
175 + }
176 + }
177 +
178 + .input-label {
179 + position: absolute;
180 + line-height: 48px;
181 + opacity: 1;
182 + color: $lucifer;
183 + transition: all 450ms cubic-bezier(.23, 1, .32, 1) 0ms;
184 + top: 24px;
185 + transform: scale(1) translate3d(0, 0, 0);
186 + transform-origin: left top 0;
187 + }
188 +
189 + .input-text {
190 + -webkit-tap-highlight-color: rgba(0,0,0,0);
191 + position: relative;
192 + width: 100%;
193 + height: 100%;
194 + border: 0;
195 + outline: none;
196 + background-color: transparent;
197 + color: $white;
198 + box-sizing: border-box;
199 + padding-top: 36px;
200 + box-shadow: none;
201 + padding-left: 0;
202 + font-size: 18px;
203 + }
204 +
205 + .underline {
206 + border: 0;
207 + border-bottom: solid 1px #e0e0e0;
208 + position: absolute;
209 + width: 100%;
210 + bottom: 8px;
211 + margin: 0;
212 + // false: content-box;
213 + box-sizing: content-box;
214 + height: 0;
215 + }
216 +
217 + .underline-focus {
218 + border-style: none none solid;
219 + border-bottom-width: 2px;
220 + position: absolute;
221 + width: 100%;
222 + bottom: 8px;
223 + margin: 0;
224 + box-sizing: content-box;
225 + height: 0;
226 + border-color: $green;
227 + transform: scaleX(0);
228 + transition: all 450ms cubic-bezier(.23, 1, .32, 1) 0ms;
229 + }
230 + }
231 +}
...\ No newline at end of file ...\ No newline at end of file
1 +<html>
2 + <style type="text/css">
3 + body {
4 + background: #18222F;
5 +}
6 +
7 +.wrapper {
8 + position: absolute;
9 + width: 400px;
10 + height: 400px;
11 + margin: auto;
12 + top: 0;
13 + bottom: 0;
14 + left: 0;
15 + right: 0;
16 + display: flex;
17 + flex-direction: row;
18 +}
19 +
20 +.container {
21 + flex: 1;
22 + padding: 0 20px;
23 +}
24 + </style>
25 + <body>
26 + <div class="wrapper">
27 + <div class="container chart" data-size="400" data-value="88" data-arrow="up">
28 + </div>
29 + </div>
30 + </body>
31 + <script type="text/javascript">
32 + //
33 +// Library
34 +//
35 +
36 +var Dial = function(container) {
37 + this.container = container;
38 + this.size = this.container.dataset.size;
39 + this.strokeWidth = this.size / 8;
40 + this.radius = (this.size / 2) - (this.strokeWidth / 2);
41 + this.value = this.container.dataset.value;
42 + this.direction = this.container.dataset.arrow;
43 + this.svg;
44 + this.defs;
45 + this.slice;
46 + this.overlay;
47 + this.text;
48 + this.arrow;
49 + this.create();
50 +}
51 +
52 +Dial.prototype.create = function() {
53 + this.createSvg();
54 + this.createDefs();
55 + this.createSlice();
56 + this.createOverlay();
57 + this.createText();
58 + this.createArrow();
59 + this.container.appendChild(this.svg);
60 +};
61 +
62 +Dial.prototype.createSvg = function() {
63 + var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
64 + svg.setAttribute('width', this.size + 'px');
65 + svg.setAttribute('height', this.size + 'px');
66 + this.svg = svg;
67 +};
68 +
69 +Dial.prototype.createDefs = function() {
70 + var defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
71 + var linearGradient = document.createElementNS("http://www.w3.org/2000/svg", "linearGradient");
72 + linearGradient.setAttribute('id', 'gradient');
73 + var stop1 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
74 + stop1.setAttribute('stop-color', '#6E4AE2');
75 + stop1.setAttribute('offset', '0%');
76 + linearGradient.appendChild(stop1);
77 + var stop2 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
78 + stop2.setAttribute('stop-color', '#78F8EC');
79 + stop2.setAttribute('offset', '100%');
80 + linearGradient.appendChild(stop2);
81 + var linearGradientBackground = document.createElementNS("http://www.w3.org/2000/svg", "linearGradient");
82 + linearGradientBackground.setAttribute('id', 'gradient-background');
83 + var stop1 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
84 + stop1.setAttribute('stop-color', 'rgba(0, 0, 0, 0.2)');
85 + stop1.setAttribute('offset', '0%');
86 + linearGradientBackground.appendChild(stop1);
87 + var stop2 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
88 + stop2.setAttribute('stop-color', 'rgba(0, 0, 0, 0.05)');
89 + stop2.setAttribute('offset', '100%');
90 + linearGradientBackground.appendChild(stop2);
91 + defs.appendChild(linearGradient);
92 + defs.appendChild(linearGradientBackground);
93 + this.svg.appendChild(defs);
94 + this.defs = defs;
95 +};
96 +
97 +Dial.prototype.createSlice = function() {
98 + var slice = document.createElementNS("http://www.w3.org/2000/svg", "path");
99 + slice.setAttribute('fill', 'none');
100 + slice.setAttribute('stroke', 'url(#gradient)');
101 + slice.setAttribute('stroke-width', this.strokeWidth);
102 + slice.setAttribute('transform', 'translate(' + this.strokeWidth / 2 + ',' + this.strokeWidth / 2 + ')');
103 + slice.setAttribute('class', 'animate-draw');
104 + this.svg.appendChild(slice);
105 + this.slice = slice;
106 +};
107 +
108 +Dial.prototype.createOverlay = function() {
109 + var r = this.size - (this.size / 2) - this.strokeWidth / 2;
110 + var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
111 + circle.setAttribute('cx', this.size / 2);
112 + circle.setAttribute('cy', this.size / 2);
113 + circle.setAttribute('r', r);
114 + circle.setAttribute('fill', 'url(#gradient-background)');
115 + this.svg.appendChild(circle);
116 + this.overlay = circle;
117 +};
118 +
119 +Dial.prototype.createText = function() {
120 + var fontSize = this.size / 3.5;
121 + var text = document.createElementNS("http://www.w3.org/2000/svg", "text");
122 + text.setAttribute('x', (this.size / 2) + fontSize / 7.5);
123 + text.setAttribute('y', (this.size / 2) + fontSize / 4);
124 + text.setAttribute('font-family', 'Century Gothic, Lato');
125 + text.setAttribute('font-size', fontSize);
126 + text.setAttribute('fill', '#78F8EC');
127 + text.setAttribute('text-anchor', 'middle');
128 + var tspanSize = fontSize / 3;
129 + text.innerHTML = 0 + '<tspan font-size="' + tspanSize + '" dy="' + -tspanSize * 1.2 + '">%</tspan>';
130 + this.svg.appendChild(text);
131 + this.text = text;
132 +};
133 +
134 +Dial.prototype.createArrow = function() {
135 + var arrowSize = this.size / 10;
136 + var arrowYOffset, m;
137 + if(this.direction === 'up') {
138 + arrowYOffset = arrowSize / 2;
139 + m = -1;
140 + }
141 + else if(this.direction === 'down') {
142 + arrowYOffset = 0;
143 + m = 1;
144 + }
145 + var arrowPosX = ((this.size / 2) - arrowSize / 2);
146 + var arrowPosY = (this.size - this.size / 3) + arrowYOffset;
147 + var arrowDOffset = m * (arrowSize / 1.5);
148 + var arrow = document.createElementNS("http://www.w3.org/2000/svg", "path");
149 + arrow.setAttribute('d', 'M 0 0 ' + arrowSize + ' 0 ' + arrowSize / 2 + ' ' + arrowDOffset + ' 0 0 Z');
150 + arrow.setAttribute('fill', '#97F8F0');
151 + arrow.setAttribute('opacity', '0.6');
152 + arrow.setAttribute('transform', 'translate(' + arrowPosX + ',' + arrowPosY + ')');
153 + this.svg.appendChild(arrow);
154 + this.arrow = arrow;
155 +};
156 +
157 +Dial.prototype.animateStart = function() {
158 + var v = 0;
159 + var self = this;
160 + var intervalOne = setInterval(function() {
161 + var p = +(v / self.value).toFixed(2);
162 + var a = (p < 0.95) ? 2 - (2 * p) : 0.05;
163 + v += a;
164 + // Stop
165 + if(v >= +self.value) {
166 + v = self.value;
167 + clearInterval(intervalOne);
168 + }
169 + self.setValue(v);
170 + }, 10);
171 +};
172 +
173 +Dial.prototype.animateReset = function() {
174 + this.setValue(0);
175 +};
176 +
177 +Dial.prototype.polarToCartesian = function(centerX, centerY, radius, angleInDegrees) {
178 + var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;
179 + return {
180 + x: centerX + (radius * Math.cos(angleInRadians)),
181 + y: centerY + (radius * Math.sin(angleInRadians))
182 + };
183 +}
184 +
185 +Dial.prototype.describeArc = function(x, y, radius, startAngle, endAngle){
186 + var start = this.polarToCartesian(x, y, radius, endAngle);
187 + var end = this.polarToCartesian(x, y, radius, startAngle);
188 + var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
189 + var d = [
190 + "M", start.x, start.y,
191 + "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
192 + ].join(" ");
193 + return d;
194 +}
195 +
196 +Dial.prototype.setValue = function(value) {
197 + var c = (value / 100) * 360;
198 + if(c === 360)
199 + c = 359.99;
200 + var xy = this.size / 2 - this.strokeWidth / 2;
201 + var d = this.describeArc(xy, xy, xy, 180, 180 + c);
202 + this.slice.setAttribute('d', d);
203 + var tspanSize = (this.size / 3.5) / 3;
204 + this.text.innerHTML = Math.floor(value) + '<tspan font-size="' + tspanSize + '" dy="' + -tspanSize * 1.2 + '">%</tspan>';
205 +};
206 +
207 +//
208 +// Usage
209 +//
210 +
211 +var containers = document.getElementsByClassName("chart");
212 +var dial = new Dial(containers[0]);
213 +dial.animateStart();
214 + </script>
215 +</html>
1 <html> 1 <html>
2 <head> 2 <head>
3 - <link rel="stylesheet" href="css/style.css"> 3 + <link rel="stylesheet" href="css/index_style.css">
4 <script src="https://code.jquery.com/jquery-2.2.1.min.js"></script> 4 <script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
5 </head> 5 </head>
6 <body> 6 <body>
...@@ -8,28 +8,47 @@ ...@@ -8,28 +8,47 @@
8 <div class="modal-overlay"> 8 <div class="modal-overlay">
9 <div class="modal-wrapper"> 9 <div class="modal-wrapper">
10 <label class="close" for=""></label> 10 <label class="close" for=""></label>
11 - <h2 id="modal-title">Envoyez-nous un message</h2> 11 + <h2 id="modal-title">Please fill in the blanks.</h2>
12 - <form class="message-form" action=""> 12 + <form class="message-form" action="/graph" method="POST">
13 <div class="input-box"> 13 <div class="input-box">
14 - <label for="" class="input-label">Nom</label> 14 + <label for="" class="input-label">Payment days (ex. 31)</label>
15 <input type="text" class="input-text"> 15 <input type="text" class="input-text">
16 <hr class="underline"> 16 <hr class="underline">
17 <hr class="underline-focus"> 17 <hr class="underline-focus">
18 </div> 18 </div>
19 <div class="input-box"> 19 <div class="input-box">
20 - <label for="" class="input-label">E-mail</label> 20 + <label for="" class="input-label">Salary (ex. 1000000)</label>
21 <input type="text" class="input-text"> 21 <input type="text" class="input-text">
22 <hr class="underline"> 22 <hr class="underline">
23 <hr class="underline-focus"> 23 <hr class="underline-focus">
24 </div> 24 </div>
25 - <div class="input-box textarea"> 25 +
26 + <div class="input-box">
27 + <label for="" class="input-label">Working days (ex. 월화수목금)</label>
28 + <input type="text" class="input-text">
29 + <hr class="underline">
30 + <hr class="underline-focus">
31 + </div>
32 + <div class="input-box">
33 + <label for="" class="input-label">Working time (ex. 9)</label>
34 + <input type="text" class="input-text">
35 + <hr class="underline">
36 + <hr class="underline-focus">
37 + </div>
38 + <div class="input-box">
39 + <label for="" class="input-label">Time off work (ex. 18)</label>
40 + <input type="text" class="input-text">
41 + <hr class="underline">
42 + <hr class="underline-focus">
43 + </div>
44 +<!-- <div class="input-box textarea">
26 <label for="" class="input-label">Message</label> 45 <label for="" class="input-label">Message</label>
27 <textarea class="input-text"></textarea> 46 <textarea class="input-text"></textarea>
28 <hr class="underline"> 47 <hr class="underline">
29 <hr class="underline-focus"> 48 <hr class="underline-focus">
30 - </div> 49 + </div>-->
31 <div class="input-button"> 50 <div class="input-button">
32 - <button class="button">Envoyer</button> 51 + <button class="button">Enter</button>
33 </div> 52 </div>
34 </form> 53 </form>
35 </div> 54 </div>
......