-
Notifications
You must be signed in to change notification settings - Fork 0
/
project_08.html
152 lines (144 loc) · 6.22 KB
/
project_08.html
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
<!doctype html>
<head>
<title>JIHYE LEEE</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link href="index.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<link rel="shortcut icon" href="asset/favicon.ico"/>
<script src="jquery-2.1.3.js"></script>
<script src="jquery-2.1.3.min.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-86397112-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<html>
<body>
<div class="j-side-menu">
<div class="j-flex">
<div>
<div class="j-menues text-uppercase">
<a href="http://jihyeleee.com/blog" target="_blank"><div class="j-menu-project">project</div></a>
<a href="blog.html"><div class="j-menu-blog">blog</div></a>
<a href="about.html"><div class="j-menu-about">about</div></a>
</div>
<div class="j-menu-snss text-uppercase">
<a href="https://www.behance.net/designerleee" target="_blank">
<div class="j-menu-sns">behance</div>
</a>
<a href="https://www.facebook.com/iamleejihye" target="_blank">
<div class="j-menu-sns">facebook</div>
</a>
<a href="http://instagram.com/my.daily.routine" target="_blank">
<div class="j-menu-sns">instagram</div>
</a>
</div>
<span class="j-body">© JIHYE LEE. 2017</span>
</div>
</div>
</div>
<div class="container">
<header>
<div class="j-menu icon"></div>
<a href="index.html"><div class="j-logo icon"></div></a>
</header>
<section>
<div class="j-project-text">
<a href="project_10.html" class="icon j-icon-arrow-left"></a>
<a href="project_07.html" class="icon j-icon-arrow-right"></a>
<p class="j-title-korean">이미지로 형광펜 공유하기</p>
<p class="j-body">
Share the sentences from an ebook as an emotional image.
</p>
<p class="j-body-korean">
전자책 서비스 <a href="https://goo.gl/Xpdme1" target="_blank">리디북스</a>
<a href="https://goo.gl/uHQXIM" target="_blank"/>Android</a>,
<a href="https://goo.gl/9SDSqt" target="_blank"/>iOS</a> 앱에
형광펜을 이미지로 공유할 수 있는 기능을 추가하였습니다.
전자책에서는 책을 읽으며 원하는 구절에 형광펜을 남길 수 있습니다.
기존에는 이렇게 남긴 형광펜을 텍스트로만 공유할 수 있었습니다.
최근 들어 텍스트로만 공유하기를 넘어서 책의 구절을 인스타그램 같은 이미지 기반 SNS에 멋지게
공유하고자 하는 니즈를 포착하였습니다. 이를 기반으로 해당 기능을 기획하였습니다.
감성적인 배경 이미지들을 구성하여 선택할 수 있습니다.
또 책의 구절을 깔끔하게 구성해줄 글꼴들, 배경 이미지 컬러에 맞춰 바꿀 수 있는 글자 색들을 선택할 수 있습니다.
공유 이미지를 편집해서 저장하거나 바로 인스타그램이나 다른 SNS에 공유할 수 있습니다.
<p class="j-annotation">*모든 기획과 UI, GUI 디자인, 배경 이미지 구성, 공유 이미지 편집 웹뷰 HTML,
CSS 코딩을 진행하였습니다.</p>
</p>
</div>
<ul class="j-project" id="j-project-04">
<li class="j-thumbnail">
<img src="img/j-project_08.png">
</li>
<li class="j-thumbnail">
<img src="img/j-project_08_01.png">
</li>
</ul>
</section>
<footer>
<div class="j-contact-title j-body">
contact
</div>
<div class="j-contact">
<div class="j-mail j-title">
<a href="mailto:[email protected]">
</a>
</div>
<div class="j-title">
010.2053.0301
</div>
</div>
<div class="j-sns">
<span class="j-body">
<a href="https://www.dribbble.com/iamleejihye" target="_blank">Dribbble</a>
</span>
<span class="j-body">
<a href="https://www.behance.net/designerleee" target="_blank">Behance</a>
</span>
<span class="j-body">
<a href="https://www.facebook.com/iamleejihye" target="_blank">Facebook</a>
</span>
<!-- <span class="j-body">
<a href="http://instagram.com/writeveryday" target="_blank">Instagram</a>
</span> -->
</div>
<address>
<div class="j-body">
© JIHYE LEE. 2017
</div>
</address>
</footer>
</div>
</body>
</html>
<script>
$('.j-menu').on('click', function() {
$('.j-side-menu').fadeToggle('fast');
$(this).toggleClass('x');
$('html,body').toggleClass('hidesScrollBar');
});
$(document).ready(function(){
$('.j-menu-about').click(function(){
$('.j-about').fadeTo('fast');
});
});
$(function() {
$(document).keyup(function(e) {
switch(e.keyCode) {
case 37 :
window.location="project_10.html";
break;
case 39 :
window.location="project_07.html";
break;
}
});
});
</script>