Browse Source

Change design in Web Application

vitaliylag 9 years ago
parent
commit
c64aaff499
4 changed files with 196 additions and 163 deletions
  1. 57 52
      assets/index.html
  2. 57 52
      assets/index.ja.html
  3. 58 53
      assets/index.ru.html
  4. 24 6
      assets/style.css

+ 57 - 52
assets/index.html

@@ -11,61 +11,66 @@
 		<script type="text/javascript" src="ui.js"></script>
 	</head>
 	<body>
-		<div class="mainTitle"><!--
-			--><div class="mainTitle-text">waifu2x</div><!--
-			--><a href="index.html" class="flagLink first"><img src="img/flags/US.png" class="chooseLang"></a><!--
-			--><a href="index.ja.html" class="flagLink"><img src="img/flags/JP.png" class="chooseLang"></a><!--
-			--><a href="index.ru.html" class="flagLink"><img src="img/flags/RU.png" class="chooseLang"></a><!--
-		--></div>
-		<p>Single-Image Super-Resolution for Anime-Style Art using Deep Convolutional Neural Networks. And it supports photo.</p>
-		<p class="margin1 linksBox"><a href="https://raw.githubusercontent.com/nagadomi/waifu2x/master/images/slide.png" class="blueLink" target="_blank">Show full demonstration</a> | <a href="https://github.com/nagadomi/waifu2x" class="blueLink" target="_blank">Go to GitHub</a></p>
-		<img src="img/example2-zip.png" class="example">
-		
-		<div class="secondTitle">Convert image:</div>
-		
-		<form action="/api" method="POST" enctype="multipart/form-data" target="_blank">
-			<div class="optionBox first">
-				<div class="option-left">Image choosing:</div>
-				<div class="option-right">
-					<input type="text" id="url" name="url" placeholder="Type URL">
-					<div class="option-right-small">Or choose a file: <input type="file" id="file" name="file"></div>
-				</div>
-				<div class="option-hint">Limits: Size: 3MB, Noise Reduction: 2560x2560px, Upscaling: 1280x1280px.</div>
-			</div>
+		<div class="allPage">
+			<div class="mainTitle"><!--
+				--><div class="mainTitle-text">waifu2x</div><!--
+				--><a href="index.html" class="flagLink first"><img src="img/flags/US.png" class="chooseLang"></a><!--
+				--><a href="index.ja.html" class="flagLink"><img src="img/flags/JP.png" class="chooseLang"></a><!--
+				--><a href="index.ru.html" class="flagLink"><img src="img/flags/RU.png" class="chooseLang"></a><!--
+			--></div>
+			<p>Single-Image Super-Resolution for Anime-Style Art using Deep Convolutional Neural Networks. And it supports photo.</p>
+			<p class="margin1 linksBox"><a href="https://raw.githubusercontent.com/nagadomi/waifu2x/master/images/slide.png" class="blueLink" target="_blank">Show full demonstration</a> | <a href="https://github.com/nagadomi/waifu2x" class="blueLink" target="_blank">Go to GitHub</a></p>
+			<img src="img/example2-zip.png" class="example">
 			
-			<div class="optionBox">
-				<div class="option-left">Style:</div>
-				<div class="option-right">
-					<label><input type="radio" name="style" class="radio fisrt" value="art" checked><span class="r-text">Artwork</span></label>
-					<label><input type="radio" name="style" class="radio" value="photo"><span class="r-text">Photo</span></label>
-				</div>
-			</div>
+			<div class="secondTitle">Convert image:</div>
 			
-			<div class="optionBox">
-				<div class="option-left">Noise Reduction:<div class="option-left-small">(expect JPEG artifact)</div></div>
-				<div class="option-right">
-					<label><input type="radio" name="noise" class="radio fisrt" value="0"><span class="r-text">None</span></label>
-					<label><input type="radio" name="noise" class="radio" value="1" checked><span class="r-text">Medium</span></label>
-					<label><input type="radio" name="noise" class="radio" value="2"><span class="r-text">High</span></label>
-					<label><input type="radio" name="noise" class="radio" value="3"><span class="r-text">Super (tmp)</span></label>
+			<form action="/api" method="POST" enctype="multipart/form-data" target="_blank">
+				<div class="optionBox first">
+					<div class="option-left">Image choosing:</div>
+					<div class="option-right">
+						<input type="text" id="url" name="url" placeholder="Type URL">
+						<div class="option-right-small">Or choose a file: <input type="file" id="file" name="file"></div>
+					</div>
+					<div class="option-hint">Limits: Size: 3MB, Noise Reduction: 2560x2560px, Upscaling: 1280x1280px.</div>
 				</div>
-				<div class="option-hint">You need use noise reduction if image actually has noise or it may cause opposite effect.</div>
-			</div>
-			
-			<div class="optionBox">
-				<div class="option-left">Upscaling:<div class="option-left-small"></div></div>
-				<div class="option-right">
-					<label><input type="radio" name="scale" class="radio fisrt" value="0" checked><span class="r-text">None</span></label>
-					<label><input type="radio" name="scale" class="radio" value="1"><span class="r-text">1.6x</span></label>
-					<label><input type="radio" name="scale" class="radio" value="2"><span class="r-text">2x</span></label>
+				
+				<div class="optionBox">
+					<div class="option-left">Style:</div>
+					<div class="option-right">
+						<label><input type="radio" name="style" class="radio fisrt" value="art" checked><span class="r-text">Artwork</span></label>
+						<label><input type="radio" name="style" class="radio" value="photo"><span class="r-text">Photo</span></label>
+					</div>
 				</div>
-			</div>
-			
-			<input type="submit" class="button" value="Convert">
-			<input type="submit" name="download" value="Download" class="button">
-			
-			<div class="bottomHint">If you are using Firefox, Please press the CTRL+S key to save image. "Save Image" option doesn't work.</div>
-			<!--<div class="bottomHint">This website uses Google Analytics to help us improve the website content.</div>-->
-		</form>
+				
+				<div class="optionBox">
+					<div class="option-left">Noise Reduction:<div class="option-left-small">(expect JPEG artifact)</div></div>
+					<div class="option-right">
+						<label><input type="radio" name="noise" class="radio fisrt" value="0"><span class="r-text">None</span></label>
+						<label><input type="radio" name="noise" class="radio" value="1" checked><span class="r-text">Medium</span></label>
+						<label><input type="radio" name="noise" class="radio" value="2"><span class="r-text">High</span></label>
+						<label><input type="radio" name="noise" class="radio" value="3"><span class="r-text">Super (tmp)</span></label>
+					</div>
+					<div class="option-hint">You need use noise reduction if image actually has noise or it may cause opposite effect.</div>
+				</div>
+				
+				<div class="optionBox">
+					<div class="option-left">Upscaling:<div class="option-left-small"></div></div>
+					<div class="option-right">
+						<label><input type="radio" name="scale" class="radio fisrt" value="0" checked><span class="r-text">None</span></label>
+						<label><input type="radio" name="scale" class="radio" value="1"><span class="r-text">1.6x</span></label>
+						<label><input type="radio" name="scale" class="radio" value="2"><span class="r-text">2x</span></label>
+					</div>
+				</div>
+				
+				<input type="submit" class="button" value="Convert">
+				<input type="submit" name="download" value="Download" class="button">
+				
+				<div class="bottomHint">If you are using Firefox, Please press the CTRL+S key to save image. "Save Image" option doesn't work.</div>
+				<!--<div class="bottomHint">This website uses Google Analytics to help us improve the website content.</div>-->
+			</form>
+		</div>
+		<div class="bottomInfo">
+			<a href="https://github.com/nagadomi/waifu2x" class="grayLink" target="_blank">waifu2x</a>
+		</div>
 	</body>
 </html>

+ 57 - 52
assets/index.ja.html

@@ -11,61 +11,66 @@
 		<script type="text/javascript" src="ui.js"></script>
 	</head>
 	<body>
-		<div class="mainTitle"><!--
-			--><div class="mainTitle-text">waifu2x</div><!--
-			--><a href="index.html" class="flagLink first"><img src="img/flags/US.png" class="chooseLang"></a><!--
-			--><a href="index.ja.html" class="flagLink"><img src="img/flags/JP.png" class="chooseLang"></a><!--
-			--><a href="index.ru.html" class="flagLink"><img src="img/flags/RU.png" class="chooseLang"></a><!--
-		--></div>
-		<p>深層畳み込みニューラルネットワークによる二次元画像のための超解像システム。 写真にも対応。</p>
-		<p class="margin1 linksBox"><a href="https://raw.githubusercontent.com/nagadomi/waifu2x/master/images/slide.png" class="blueLink" target="_blank">デモンストレーションを見ます</a> | <a href="https://github.com/nagadomi/waifu2x" class="blueLink" target="_blank">GitHubに行きます</a></p>
-		<img src="img/example2-zip.png" class="example">
-		
-		<div class="secondTitle">画像を変換します:</div>
-		
-		<form action="/api" method="POST" enctype="multipart/form-data" target="_blank">
-			<div class="optionBox first">
-				<div class="option-left">画像:</div>
-				<div class="option-right">
-					<input type="text" id="url" name="url" placeholder="URLを書いてか">
-					<div class="option-right-small">ファイルを選んでください: <input type="file" id="file" name="file"></div>
-				</div>
-				<div class="option-hint">制限: サイズ: 3MB, ノイズ除去: 2560x2560px, 拡大後: 2560x2560px</div>
-			</div>
+		<div class="allPage">
+			<div class="mainTitle"><!--
+				--><div class="mainTitle-text">waifu2x</div><!--
+				--><a href="index.html" class="flagLink first"><img src="img/flags/US.png" class="chooseLang"></a><!--
+				--><a href="index.ja.html" class="flagLink"><img src="img/flags/JP.png" class="chooseLang"></a><!--
+				--><a href="index.ru.html" class="flagLink"><img src="img/flags/RU.png" class="chooseLang"></a><!--
+			--></div>
+			<p>深層畳み込みニューラルネットワークによる二次元画像のための超解像システム。 写真にも対応。</p>
+			<p class="margin1 linksBox"><a href="https://raw.githubusercontent.com/nagadomi/waifu2x/master/images/slide.png" class="blueLink" target="_blank">デモンストレーションを見ます</a> | <a href="https://github.com/nagadomi/waifu2x" class="blueLink" target="_blank">GitHubに行きます</a></p>
+			<img src="img/example2-zip.png" class="example">
 			
-			<div class="optionBox">
-				<div class="option-left">スタイル:</div>
-				<div class="option-right">
-					<label><input type="radio" name="style" class="radio fisrt" value="art" checked><span class="r-text">イラスト</span></label>
-					<label><input type="radio" name="style" class="radio" value="photo"><span class="r-text">写真</span></label>
-				</div>
-			</div>
+			<div class="secondTitle">画像を変換します:</div>
 			
-			<div class="optionBox">
-				<div class="option-left">ノイズ除去:<div class="option-left-small">(JPEGノイズを想定)</div></div>
-				<div class="option-right">
-					<label><input type="radio" name="noise" class="radio fisrt" value="0"><span class="r-text">なし</span></label>
-					<label><input type="radio" name="noise" class="radio" value="1" checked><span class="r-text">弱</span></label>
-					<label><input type="radio" name="noise" class="radio" value="2"><span class="r-text">強</span></label>
-					<label><input type="radio" name="noise" class="radio" value="3"><span class="r-text">スーパー</span></label>
+			<form action="/api" method="POST" enctype="multipart/form-data" target="_blank">
+				<div class="optionBox first">
+					<div class="option-left">画像:</div>
+					<div class="option-right">
+						<input type="text" id="url" name="url" placeholder="URLを書いてか">
+						<div class="option-right-small">ファイルを選んでください: <input type="file" id="file" name="file"></div>
+					</div>
+					<div class="option-hint">制限: サイズ: 3MB, ノイズ除去: 2560x2560px, 拡大後: 2560x2560px</div>
 				</div>
-				<div class="option-hint">画像はノイズがなければノイズ除去すると逆効果を引き起こす可能性があります。</div>
-			</div>
-			
-			<div class="optionBox">
-				<div class="option-left">拡大:<div class="option-left-small"></div></div>
-				<div class="option-right">
-					<label><input type="radio" name="scale" class="radio fisrt" value="0" checked><span class="r-text">なし</span></label>
-					<label><input type="radio" name="scale" class="radio" value="1"><span class="r-text">1.6x</span></label>
-					<label><input type="radio" name="scale" class="radio" value="2"><span class="r-text">2x</span></label>
+				
+				<div class="optionBox">
+					<div class="option-left">スタイル:</div>
+					<div class="option-right">
+						<label><input type="radio" name="style" class="radio fisrt" value="art" checked><span class="r-text">イラスト</span></label>
+						<label><input type="radio" name="style" class="radio" value="photo"><span class="r-text">写真</span></label>
+					</div>
 				</div>
-			</div>
-			
-			<input type="submit" class="button" value="実行">
-			<input type="submit" name="download" value="結果を保存" class="button">
-			
-			<div class="bottomHint">Firefoxの方は、右クリから画像が保存できないようなので、CTRL+SキーかALTキー後 ファイル - ページを保存 で画像を保存してください。</div>
-			<!--<div class="bottomHint">本サイトは、コンテンツ改善のために Google Analytics を使用しています。 </div>-->
-		</form>
+				
+				<div class="optionBox">
+					<div class="option-left">ノイズ除去:<div class="option-left-small">(JPEGノイズを想定)</div></div>
+					<div class="option-right">
+						<label><input type="radio" name="noise" class="radio fisrt" value="0"><span class="r-text">なし</span></label>
+						<label><input type="radio" name="noise" class="radio" value="1" checked><span class="r-text">弱</span></label>
+						<label><input type="radio" name="noise" class="radio" value="2"><span class="r-text">強</span></label>
+						<label><input type="radio" name="noise" class="radio" value="3"><span class="r-text">スーパー</span></label>
+					</div>
+					<div class="option-hint">画像はノイズがなければノイズ除去すると逆効果を引き起こす可能性があります。</div>
+				</div>
+				
+				<div class="optionBox">
+					<div class="option-left">拡大:<div class="option-left-small"></div></div>
+					<div class="option-right">
+						<label><input type="radio" name="scale" class="radio fisrt" value="0" checked><span class="r-text">なし</span></label>
+						<label><input type="radio" name="scale" class="radio" value="1"><span class="r-text">1.6x</span></label>
+						<label><input type="radio" name="scale" class="radio" value="2"><span class="r-text">2x</span></label>
+					</div>
+				</div>
+				
+				<input type="submit" class="button" value="実行">
+				<input type="submit" name="download" value="結果を保存" class="button">
+				
+				<div class="bottomHint">Firefoxの方は、右クリから画像が保存できないようなので、CTRL+SキーかALTキー後 ファイル - ページを保存 で画像を保存してください。</div>
+				<!--<div class="bottomHint">本サイトは、コンテンツ改善のために Google Analytics を使用しています。 </div>-->
+			</form>
+		</div>
+		<div class="bottomInfo">
+			<a href="https://github.com/nagadomi/waifu2x" class="grayLink" target="_blank">waifu2x</a>
+		</div>
 	</body>
 </html>

+ 58 - 53
assets/index.ru.html

@@ -11,62 +11,67 @@
 		<script type="text/javascript" src="ui.js"></script>
 	</head>
 	<body>
-		<div class="mainTitle"><!--
-			--><div class="mainTitle-text">waifu2x</div><!--
-			--><a href="index.html" class="flagLink first"><img src="img/flags/US.png" class="chooseLang"></a><!--
-			--><a href="index.ja.html" class="flagLink"><img src="img/flags/JP.png" class="chooseLang"></a><!--
-			--><a href="index.ru.html" class="flagLink"><img src="img/flags/RU.png" class="chooseLang"></a><!--
-		--></div>
-		<p>Waifu2x позволяет увеличивать в 4 раза рисованные изображения, например аниме или арт, а также устранять шум на изображении (преимущественно артефакты сжатия JPEG).</p>
-		<p>Теперь также поддерживаются фотографии.</p>
-		<p class="margin1 linksBox"><a href="https://raw.githubusercontent.com/nagadomi/waifu2x/master/images/slide.png" class="blueLink" target="_blank">Посмотреть полную демонстрацию</a> | <a href="https://github.com/nagadomi/waifu2x" class="blueLink" target="_blank">Перейти на GitHub</a></p>
-		<img src="img/example2-zip.png" class="example">
-		
-		<div class="secondTitle">Преобразовать изображение:</div>
-		
-		<form action="/api" method="POST" enctype="multipart/form-data" target="_blank">
-			<div class="optionBox first">
-				<div class="option-left">Выбор изображения:</div>
-				<div class="option-right">
-					<input type="text" id="url" name="url" placeholder="Укажите URL">
-					<div class="option-right-small">Либо выберите файл: <input type="file" id="file" name="file"></div>
-				</div>
-				<div class="option-hint">Макс. размер файла — 2MB, устранение шума — макс. 2560x2560px, апскейл — 1280x1280px.</div>
-			</div>
+		<div class="allPage">
+			<div class="mainTitle"><!--
+				--><div class="mainTitle-text">waifu2x</div><!--
+				--><a href="index.html" class="flagLink first"><img src="img/flags/US.png" class="chooseLang"></a><!--
+				--><a href="index.ja.html" class="flagLink"><img src="img/flags/JP.png" class="chooseLang"></a><!--
+				--><a href="index.ru.html" class="flagLink"><img src="img/flags/RU.png" class="chooseLang"></a><!--
+			--></div>
+			<p>Waifu2x позволяет увеличивать в 4 раза рисованные изображения, например аниме или арт, а также устранять шум на изображении (преимущественно артефакты сжатия JPEG).</p>
+			<p>Теперь также поддерживаются фотографии.</p>
+			<p class="margin1 linksBox"><a href="https://raw.githubusercontent.com/nagadomi/waifu2x/master/images/slide.png" class="blueLink" target="_blank">Посмотреть полную демонстрацию</a> | <a href="https://github.com/nagadomi/waifu2x" class="blueLink" target="_blank">Перейти на GitHub</a></p>
+			<img src="img/example2-zip.png" class="example">
 			
-			<div class="optionBox">
-				<div class="option-left">Тип изображения:</div>
-				<div class="option-right">
-					<label><input type="radio" name="style" class="radio fisrt" value="art" checked><span class="r-text">Арт</span></label>
-					<label><input type="radio" name="style" class="radio" value="photo"><span class="r-text">Фотография</span></label>
-				</div>
-			</div>
+			<div class="secondTitle">Преобразовать изображение:</div>
 			
-			<div class="optionBox">
-				<div class="option-left">Устранение шума:<div class="option-left-small">(артефактов JPEG)</div></div>
-				<div class="option-right">
-					<label><input type="radio" name="noise" class="radio fisrt" value="0"><span class="r-text">Нет</span></label>
-					<label><input type="radio" name="noise" class="radio" value="1" checked><span class="r-text">Средне</span></label>
-					<label><input type="radio" name="noise" class="radio" value="2"><span class="r-text">Сильно</span></label>
-					<label><input type="radio" name="noise" class="radio" value="3"><span class="r-text">Очень сильно (эксперим.)</span></label>
+			<form action="/api" method="POST" enctype="multipart/form-data" target="_blank">
+				<div class="optionBox first">
+					<div class="option-left">Выбор изображения:</div>
+					<div class="option-right">
+						<input type="text" id="url" name="url" placeholder="Укажите URL">
+						<div class="option-right-small">Либо выберите файл: <input type="file" id="file" name="file"></div>
+					</div>
+					<div class="option-hint">Макс. размер файла — 2MB, устранение шума — макс. 2560x2560px, апскейл — 1280x1280px.</div>
 				</div>
-				<div class="option-hint">Устранение шума нужно использовать, если на картинке действительно есть шум, иначе это даст противоположный эффект.</div>
-			</div>
-			
-			<div class="optionBox">
-				<div class="option-left">Апскейл:<div class="option-left-small">(увеличение размера)</div></div>
-				<div class="option-right">
-					<label><input type="radio" name="scale" class="radio fisrt" value="0" checked><span class="r-text">Нет</span></label>
-					<label><input type="radio" name="scale" class="radio" value="1"><span class="r-text">1.6x</span></label>
-					<label><input type="radio" name="scale" class="radio" value="2"><span class="r-text">2x</span></label>
+				
+				<div class="optionBox">
+					<div class="option-left">Тип изображения:</div>
+					<div class="option-right">
+						<label><input type="radio" name="style" class="radio fisrt" value="art" checked><span class="r-text">Арт</span></label>
+						<label><input type="radio" name="style" class="radio" value="photo"><span class="r-text">Фотография</span></label>
+					</div>
 				</div>
-			</div>
-			
-			<input type="submit" class="button" value="Преобразовать">
-			<input type="submit" name="download" value="Скачать" class="button">
-			
-			<div class="bottomHint">Если Вы используете Firefox, для сохранения изображения нажмите Ctrl+S (перетаскивание изображения и опция "Сохранить изображение" работать не будут).</div>
-			<!--<div class="bottomHint">Этот сайт использует Google Analytics, чтобы помочь нам повысить качество содержания сайта.</div>-->
-		</form>
+				
+				<div class="optionBox">
+					<div class="option-left">Устранение шума:<div class="option-left-small">(артефактов JPEG)</div></div>
+					<div class="option-right">
+						<label><input type="radio" name="noise" class="radio fisrt" value="0"><span class="r-text">Нет</span></label>
+						<label><input type="radio" name="noise" class="radio" value="1" checked><span class="r-text">Средне</span></label>
+						<label><input type="radio" name="noise" class="radio" value="2"><span class="r-text">Сильно</span></label>
+						<label><input type="radio" name="noise" class="radio" value="3"><span class="r-text">Очень сильно (эксперим.)</span></label>
+					</div>
+					<div class="option-hint">Устранение шума нужно использовать, если на картинке действительно есть шум, иначе это даст противоположный эффект.</div>
+				</div>
+				
+				<div class="optionBox">
+					<div class="option-left">Апскейл:<div class="option-left-small">(увеличение размера)</div></div>
+					<div class="option-right">
+						<label><input type="radio" name="scale" class="radio fisrt" value="0" checked><span class="r-text">Нет</span></label>
+						<label><input type="radio" name="scale" class="radio" value="1"><span class="r-text">1.6x</span></label>
+						<label><input type="radio" name="scale" class="radio" value="2"><span class="r-text">2x</span></label>
+					</div>
+				</div>
+				
+				<input type="submit" class="button" value="Преобразовать">
+				<input type="submit" name="download" value="Скачать" class="button">
+				
+				<div class="bottomHint">Если Вы используете Firefox, для сохранения изображения нажмите Ctrl+S (перетаскивание изображения и опция "Сохранить изображение" работать не будут).</div>
+				<!--<div class="bottomHint">Этот сайт использует Google Analytics, чтобы помочь нам повысить качество содержания сайта.</div>-->
+			</form>
+		</div>
+		<div class="bottomInfo">
+			<a href="https://github.com/nagadomi/waifu2x" class="grayLink" target="_blank">waifu2x</a>
+		</div>
 	</body>
 </html>

+ 24 - 6
assets/style.css

@@ -4,15 +4,25 @@ a { text-decoration: none; cursor: pointer; color: inherit; } a:hover { text-dec
 div, span, a, input	 { background-repeat: no-repeat; }
 
 
-
 body {
-    margin: 2em 0.5em 2em 2em;
-	padding: 0;
-    background: #fff;
+	width: 780px;
+	margin: 0 auto;
+	background: #f5f5f5;
 	color: #000;
 	font-size: 14px;
 	font-family: Tahoma, Arial, Verdana, sans-serif, Lucida Sans;
 	line-height: 1.5em;
+	text-align: center;
+}
+
+.allPage {
+	display: inline-block;
+	width: 700px;
+	margin: 15px auto;
+	padding: 5px 25px 10px 25px;
+	background: #fff;
+	border: 1px solid #000;
+	text-align: left;
 }
 
 .mainTitle {
@@ -40,7 +50,7 @@ body {
 }
 
 p {
-	max-width: 710px;
+	max-width: 700px;
 	margin: 0.4em 0;
 }
 p.margin1 { margin: 0.9em 0; }
@@ -58,6 +68,10 @@ p.margin1 { margin: 0.9em 0; }
 	color: #36b;
 }
 
+.grayLink {
+	color: #999;
+}
+
 
 
 .secondTitle {
@@ -120,9 +134,13 @@ p.margin1 { margin: 0.9em 0; }
 }
 
 .bottomHint {
-	max-width: 710px;
+	max-width: 700px;
 	margin: 0.85em 0;
 	color: #999;
 	font-size: 0.85em;
 	line-height: 1.5em;
 }
+
+.bottomInfo {
+	text-align: center;
+}