Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* how to page how to page * how to how to
- Loading branch information
Showing
9 changed files
with
228 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,150 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="utf-8"> | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<link rel="shortcut icon" href="/images/favicon.ico"> | ||
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png"> | ||
<link rel="icon" type="image/png" href="https://paintschainer-cdn.preferred.tech/images/paintschainer-64x64.png" sizes="64x64"> | ||
<link rel="manifest" href="/manifest.json"> | ||
<link rel="mask-icon" href="/images/safari-pinned-tab.svg" color="#c90000"> | ||
<meta name="apple-mobile-web-app-title" content="PaintsChainer"> | ||
<meta name="application-name" content="PaintsChainer"> | ||
<meta name="theme-color" content="#ffffff"> | ||
<title>PaintsChainer -線画自動着色サービス-</title> | ||
<!-- jQuery --> | ||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> | ||
<!-- jQuery Cookie --> | ||
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> | ||
<!-- jQuery UI --> | ||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> | ||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> | ||
<!-- bootstrap --> | ||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> | ||
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> | ||
<!-- font-awesome --> | ||
<link rel="stylesheet" href="css/font-awesome.css"> | ||
<link rel="stylesheet" href="main.css"> | ||
<!-- main --> | ||
<script src="paints_chainer.js?ver0.6"></script> | ||
<style> | ||
body { | ||
margin-bottom: 36px; | ||
} | ||
.footer { | ||
position: fixed; | ||
bottom: 0; | ||
width: 100%; | ||
/* Set the fixed height of the footer here */ | ||
height: 36px; | ||
background-color: #f5f5f5; | ||
font-size: 85%; | ||
} | ||
.container .text-muted { | ||
margin: 8px 0; | ||
} | ||
.footer > .container { | ||
padding-right: 15px; | ||
padding-left: 15px; | ||
} | ||
.footer a { | ||
color: #727272; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<nav class="navbar navbar-default navbar-static-top"> | ||
<div class="container"> | ||
<div class="navbar-header"> | ||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> | ||
<span class="sr-only">Toggle navigation</span> | ||
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> | ||
</button> | ||
<span class="navbar-brand"><img src="https://paintschainer-cdn.preferred.tech/images/paintschainer-64x64.png" width="24" style="display:inline" /> PaintsChainer</span> | ||
</div> | ||
<div id="navbar" class="navbar-collapse collapse"> | ||
<ul class="nav navbar-nav"> | ||
<li><a href="//paintschainer.preferred.tech/index_ja.html" target="_blank">Home</a></li> | ||
<li class="active"><a>How to</a></li> | ||
<li><a href="//paintschainer.preferred.tech/downloads/" target="_blank">Downloads</a></li> | ||
<li><a href="//github.com/pfnet/PaintsChainer" target="_blank">GitHub</a></li> | ||
</ul> | ||
<ul class="nav navbar-nav navbar-right"> | ||
<li> | ||
<a href="https://twitter.com/paintschainer" target="_blank" style="padding: 6px 4px;"> | ||
<span class="fa-stack fa-lg" style="color:#55acee;"> | ||
<i class="fa fa-square-o fa-stack-2x"></i> | ||
<i class="fa fa-twitter fa-stack-1x"></i> | ||
</span> | ||
</a> | ||
</li> | ||
<li> | ||
<a href="https://facebook.com/PaintsChainer" target="_blank" style="padding: 6px 4px;"> | ||
<span class="fa-stack fa-lg" style="color:#3b5998;"> | ||
<i class="fa fa-square-o fa-stack-2x"></i> | ||
<i class="fa fa-facebook fa-stack-1x"></i> | ||
</span> | ||
</a> | ||
</li> | ||
</ul> | ||
</div> | ||
</div> | ||
</nav> | ||
|
||
<div class="container"> | ||
<h1>使い方</h1> | ||
<div class="box"> | ||
<div class="stepcontainer"> | ||
<div class="inline"><div class="btn"><font color=#FFF>1</font></div></div> | ||
<div class="inline"><div class="step"> | ||
<p class="instruction">線画を選択する</p> | ||
<a href="example_img/1.jpg"> | ||
<img alt="Select line drawing image" src="images/1.jpg" /> | ||
</a> | ||
</div></div> | ||
</div> | ||
|
||
<div class="stepcontainer"> | ||
<div class="inline"><div class="btn"><font color=#FFF>2</font></div></div> | ||
<div class="inline"><div class="step"> | ||
<p class="instruction">選択すると自動で着色開始</p> | ||
<a href="example_img/2.jpg"> | ||
<img alt="Colorization will start automaticly after select an image" src="images/2.jpg" /> | ||
</a> | ||
</div></div> | ||
</div> | ||
|
||
<div class="stepcontainer"> | ||
<div class="inline"><div class="btn"><font color=#FFF>3</font></div></div> | ||
<div class="inline"><div class="step"> | ||
<p class="instruction">パレットから色を選択して線画上にヒントを入力</p> | ||
<a href="example_img/3.jpg"> | ||
<img alt="Add hint information using color pen in left image" src="images/3.jpg" /> | ||
</a> | ||
</div></div> | ||
</div> | ||
|
||
<div class="stepcontainer"> | ||
<div class="inline"><div class="btn"><font color=#FFF>4</font></div></div> | ||
<div class="inline"><div class="step"> | ||
<p class="instruction">「着色」ボタンを押して塗り直す</p> | ||
<a href="example_img/4.jpg"> | ||
<img alt="Click the 'colorize' button" src="images/4.jpg" /> | ||
</a> | ||
</div></div> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<div class="return"><button type="button" onclick="history.back()">return</button></div> | ||
|
||
<footer class="footer"> | ||
<div class="container"> | ||
<div class="col-md-offset-9 col-md-1 col-xs-4"><p class="text-muted"><a href="//paintschainer-cdn.preferred.tech/terms_ja.html" target="_blank">利用規約</a></p></div> | ||
<div class="col-md-2 col-xs-6"><p class="text-muted"><a href="//paintschainer-cdn.preferred.tech/privacy_ja.html" target="_blank">プライバシーポリシー</a></p></div> | ||
</div> | ||
</footer> | ||
|
||
</body> | ||
</html> |
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,75 @@ | ||
.btn { | ||
text-decoration: none; | ||
font-weight: bold; | ||
text-align: center; | ||
font-size: 20px; | ||
display: block; | ||
width: 40px; | ||
height: 40px; | ||
background: #87CEFA; | ||
border-radius: 50%; | ||
color: #111; | ||
padding: px 0px 15px 0px; | ||
margin: 10px; | ||
} | ||
|
||
div.step { | ||
margin: 10px; | ||
background:#fff; | ||
padding: 10px 0px 15px 15px; | ||
border:1px solid #DDDDDD; | ||
border-radius:10px; | ||
} | ||
|
||
div.inline { | ||
display: table-cell; | ||
} | ||
|
||
div.stepcontainer { | ||
overflow: hidden; | ||
|
||
} | ||
|
||
h1 { | ||
border-left: solid; | ||
border-left-color: #87CEFA; | ||
border-left-width: 8px; | ||
padding-left: 35px; | ||
margin-left: 27px; | ||
margin-bottom: 20px; | ||
font-weight: 500; | ||
color: #87CEFA; | ||
} | ||
|
||
p.instruction { | ||
font-size: 16px; | ||
font-weight: 400; | ||
|
||
} | ||
|
||
img { | ||
animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1; | ||
background: transparent; | ||
border: none; | ||
border-radius: 4px; | ||
display: block; | ||
margin: none; | ||
max-width: 95%; | ||
} | ||
|
||
.return { | ||
text-align: center; | ||
margin-top: 15px; | ||
margin-bottom: 15px; | ||
} | ||
|
||
@keyframes colorize { | ||
0% { | ||
-webkit-filter: grayscale(100%); | ||
filter: grayscale(100%); | ||
} | ||
100% { | ||
-webkit-filter: grayscale(0%); | ||
filter: grayscale(0%); | ||
} | ||
} |