<?php
error_reporting(0);
/* ------------- 初期値 -------------------*/

$design_num = 4; // デザインの個数
//$fonts = array('no'=>'default', 0 => 'Ap',1 =>'Kin', 2=>'Mu',3=>'GenEiLateGo', 4=>'Mp2R',5=>'GenGoT', 6=>'GenMinL', 7=>'Ship',8=>'GenGoBl',9=>'GenMinB',10=>'Hannari',11=>'Hare',12=>'GenEiAnti',13=>'irohakakuC-L',14=>'irohamaru-R',15=>'Oradano',16=>'Koburi',17=>'ShipAnti');
//$f= array('no'=>'default',  0 => 'ApTate',1 =>'KinTate', 2=>'MuTate',3=>'GenEiLateGoTate', 4=>'Mp2RTate',5=>'GenGoTTate', 6=>'GenMinLTate', 7=>'ShipTate',8=>'GenGoBlTate',9=>'GenMinBTate',10=>'HannariTate',11=>'HareTate',12=>'GenEiAntiTate',13=>'irohakakuC-LTate',14=>'irohamaru-RTate',15=>'OradanoTate',16=>'KoburiTate',17=>'ShipAntiTate');
//$f2= array('no'=>'default', 0 => 'ApYoko',1 =>'KinYoko', 2=>'MuYoko',3=>'GenEiLateGoYoko', 4=>'Mp2RYoko',5=>'GenGoTYoko', 6=>'GenMinLYoko', 7=>'ShipYoko',8=>'GenGoBlYoko',9=>'GenMinBYoko',10=>'HannariYoko',11=>'HareYoko',12=>'GenEiAntiYoko',13=>'irohakakuC-LYoko',14=>'irohamaru-RYoko',15=>'OradanoYoko',16=>'KoburiYoko',17=>'ShipAntiYoko');
$fonts = array('no'=>'default', 0 => 'Ap',1 =>'Kin', 2=>'Mu',3=>'GenEiLateGo', 4=>'Mp2R',5=>'GenGoT', 6=>'GenMinL', 7=>'Ship',8=>'GenGoBl',9=>'GenMinB',10=>'Hannari',11=>'Hare',12=>'GenEiAnti',13=>'irohakakuC-L',14=>'irohamaru-R',15=>'Oradano',16=>'Koburi',17=>'ShipAnti',18=>'AL',19=>'AB',20=>'Wa',21=>'Zatsu',22=>'ipaexm',23=>'GenMinR',24=>'Satsuki',25=>'GenChikugo',26=>'Mig');
$f= array('no'=>'default', 0 => 'ApTate',1 =>'KinTate', 2=>'MuTate',3=>'GenEiLateGoTate', 4=>'Mp2RTate',5=>'GenGoTTate', 6=>'GenMinLTate', 7=>'ShipTate',8=>'GenGoBlTate',9=>'GenMinBTate',10=>'HannariTate',11=>'HareTate',12=>'GenEiAntiTate',13=>'irohakakuC-LTate',14=>'irohamaru-RTate',15=>'OradanoTate',16=>'KoburiTate',17=>'ShipAntiTate',18=>'ALTate',19=>'ABTate',20=>'WaTate',21=>'ZatsuTate',22=>'ipaexmTate',23=>'GenMinRTate',24=>'SatsukiTate',25=>'GenChikugoTate',26=>'MigTate');
$f2= array('no'=>'default', 0 => 'ApYoko',1 =>'KinYoko', 2=>'MuYoko',3=>'GenEiLateGoYoko', 4=>'Mp2RYoko',5=>'GenGoTYoko', 6=>'GenMinLYoko', 7=>'ShipYoko',8=>'GenGoBlYoko',9=>'GenMinBYoko',10=>'HannariYoko',11=>'HareYoko',12=>'GenEiAntiYoko',13=>'irohakakuC-LYoko',14=>'irohamaru-RYoko',15=>'OradanoYoko',16=>'KoburiYoko',17=>'ShipAntiYoko',18=>'ALYoko',19=>'ABYoko',20=>'WaYoko',21=>'ZatsuYoko',22=>'ipaexmYoko',23=>'GenMinRYoko',24=>'SatsukiYoko',25=>'GenChikugoYoko',26=>'MigYoko');

/* ------------- /初期値 -------------------*/
	
require_once 'php/menu.php';

// パラメータ初期設定
$param= array();


// ====================================================
//     画像生成
// ====================================================
	if ($_POST['imagedata']) {
		$imagedata = $_POST["imagedata"];
		$filename = $_POST["filename"];
		$imagedata  = base64_decode($imagedata);
		$image = imagecreatefromstring($imagedata);
		imagesavealpha($image, TRUE);
		imagejpeg($imageJ);


		if ($_POST['b'] == 'save') {
			header('Content-Type: image/png');
			header("Cache-control: no-cache");
			header('Content-Disposition: attachment; filename="' . $filename . '.png"');
			imagepng($image);
			imagedestroy($image);
			exit();
		} else {
			$filename = $filename . '.' . $_POST['b'];
			$fp = fopen('mkimg/'. $filename,w);
			if ($_POST['b'] == 'jpeg') {
				fwrite($fp,base64_decode($_POST["imagedataJ"]));
			} else {
				fwrite($fp,base64_decode($_POST["imagedata"]));
			}
			fclose($fp);
	
			// サイズを取得します
			list($width, $height) = getimagesize('mkimg/'. $filename);
			if ($height > $width) {
				$css = <<< CSS
	width: 40vh;
	height: auto;
	max-height:888px;
	max-widtht:630px;
CSS;
			}else {
				$css = <<< CSS
	height: 40vh;
	width: auto;
	max-height:630px;
	max-widtht:888px;
}
@media screen and (max-width:66.2vh) {
	canvas {
		width: 90vw;
		height: auto;
	}
CSS;
			}
			// ファイル削除
			date_default_timezone_set('Asia/Tokyo');
			 
			//削除期限
			$expire = strtotime("15 minute ago");
		 
			$dir = dirname(__FILE__) . '/mkimg/';
			 
			$list = scandir($dir);
			foreach($list as $value){
			    $file = $dir . $value;
			    if(!is_file($file)) continue;
			    $mod = filemtime( $file );
			    if($mod < $expire){
			        unlink($file);
			    }
			}
			// HTML;
			echo <<< HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-126701105-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-126701105-1');
</script>

<meta charset="UTF-8" />
<title>8P折り本ツール</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="meishi.css?2018">
<style>
{$menu_css}
img.meishi {
{$css}
}
</style>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
{$menu}
<h1>8P折り本ツール</h1>
{$news}
<div class="wrapper">
<div class="fm">
<p>※生成した画像はご自身の責任においてご自由にお使い下さい。印刷配布も有償・無償を問わずＯＫです。<br>
※生成できない場合は「フォントデータの軽量化」をお試し下さい。</p>
<div class="cvs">
<p style="font-size:90%">右クリック→「名前を付けて画像を保存」（PC)または画像長押し（スマートフォン）で保存できます。</p>
<img src="mkimg/{$filename}" width="{$width}" height="{$height}" class="meishi">
</div>
<div style="text-align: center">
{$ad_top}
</div>
HTML;
		}
// ====================================================
//     プレビュー
// ====================================================
	} else if ($_POST['t1']) {
		require_once 'resize.php';


		// テキスト処理
		$text1 = $_POST['t1'];
		$text1 = preg_replace("/\x{202a}/u", '', $text1 );
		$text1 = preg_replace("/\x{202c}/u", '', $text1 );
		$text1 = rtrim($text1,"\r\n,\r,\n");
		if (! in_array("zen", $_POST['opt'])) {
			$text1 = mb_convert_kana($text1, 'AKS');
			$text1 = preg_replace('/\'/', "’", $text1 );
			$text1 = preg_replace('/"(.*?)"/', "〝$1〟", $text1 );
			$text1 = preg_replace('/"/', "”", $text1 );
		}
		$text1 = preg_replace("/\x{2014}/u", '―', $text1 );
		$text1 = preg_replace("/\x{301c}/u", '～', $text1 );
		$text1 = preg_replace("/─/", '―', $text1 );
		$text1 = preg_replace('/</', "＜", $text1 );
		$text1 = preg_replace('/>/', "＞", $text1 );

		$writer = $_POST['writer'];
		$writer = rtrim($writer,"\r\n,\r,\n");
		$writer = preg_replace('/\'/', "’", $writer );
		$writer = preg_replace('/"/', "”", $writer );
		$writer = preg_replace("/\x{2014}/u", '―', $writer );
		$writer = preg_replace("/\x{301c}/u", '～', $writer );
		$writer = preg_replace("/─/", '―', $writer );
		$writer = preg_replace('/</', "＜", $writer );
		$writer = preg_replace('/>/', "＞", $writer );
		$writer =  htmlspecialchars($writer, ENT_QUOTES, 'UTF-8');
		$writer = preg_replace('/\r\n|\r|\n/', "∀", $writer );

		if ($_POST['wrimode'] == 'Yoko') {
			$text1 = preg_replace('/"(.*?)"/', "“$1”", $text1 );
		} else {
			$text1 = preg_replace('/“(.*?)”/', "〝$1〟", $text1 );
		}
		if (in_array("sage", $_POST['opt'])) {
			$text1 = '　'. $text1;
			$text1 = preg_replace('/\r\n|\r|\n/', "\n　", $text1 );
			$text1 = preg_replace('/(　)(「|『|（|＜|≪|【|\()/', "$2", $text1 );
			$text1 = str_replace('　　', '　', $text1);	
		}
		if (in_array("kan", $_POST['opt'])) {
			$text1 = mb_convert_kana($text1, 'N');
			$text1 = str_replace('１', '一', $text1);
			$text1 = str_replace('２', '二', $text1);
			$text1 = str_replace('３', '三', $text1);
			$text1 = str_replace('４', '四', $text1);
			$text1 = str_replace('５', '五', $text1);
			$text1 = str_replace('６', '六', $text1);
			$text1 = str_replace('７', '七', $text1);
			$text1 = str_replace('８', '八', $text1);
			$text1 = str_replace('９', '九', $text1);
			$text1 = str_replace('０', '〇', $text1);
		}

		$text1 =  htmlspecialchars($text1, ENT_QUOTES, 'UTF-8');
		$text1 = preg_replace('/\r\n|\r|\n/', "∀", $text1 );
		
		$_POST['sig'] = preg_replace('/</', "＜", $_POST['sig']);
		$_POST['sig'] = preg_replace('/>/', "＞", $_POST['sig'] );
		$_POST['sig'] = preg_replace('/\'/', "’", $_POST['sig'] );
		$_POST['sig'] = preg_replace('/"(.*?)"/', "“$1”", $_POST['sig'] );
		$_POST['sig'] =  htmlspecialchars($_POST['sig'], ENT_QUOTES, 'UTF-8'); 

		$check = file_get_contents('check.txt');
		$texts = preg_split("//u", $text1, -1, PREG_SPLIT_NO_EMPTY);
		$fuki = preg_split("//u", $_POST['sig'] . $_POST['site'] . $_POST['author'], -1, PREG_SPLIT_NO_EMPTY);
		foreach ($texts as $c) {
			if (mb_strpos($check, $c)) {
				$jo[0]++;
			}
		}
		foreach ($fuki as $c) {
			if (mb_strpos($check, $c)) {
				$jo[1]++;
			}
		}
		
		$param['w'] = $_POST['w'];
		$param['f'] = $fonts[$_POST['f']].'Tate';
		$param['f2'] = $f2[$_POST['f']];
		$param['nb'] = $_POST['nb'];
		$param['pagination'] = $_POST['pagination'];
		$param['startnum'] = $_POST['startnum'];
		if ($_POST['joyo']) {
			$param['f'] = $param['f'].'J';
			$param['f2'] = $param['f2'].'J';
		} else {
			if (!$jo[0]) {
				$param['f'] = $param['f'].'J';
			}
			if (!$jo[1]) {
				$param['f2'] = $param['f2'].'J';
			}
		}
		$param['fontsize2'] = 12;
		if ($_POST['c'] == 'picker') {
			$param['c'] = $_POST['picker-c'];
		} else {
			$param['c'] = $_POST['c'];
		}
		if ($_POST['paper'] == 'picker') {
			$param['paper'] = $_POST['picker-p'];
		} else {
			$param['paper'] = $_POST['paper'];
		}
		 
//		// 保存画像
		$saveid = md5(uniqid(rand(), true));
		$savename = 'up_' . md5(uniqid(rand(), true));

		if ($_FILES["mybg"]["name"]) {
			if ($_POST['agree'] ==1) {
				//アップロードされたファイルを取得
				$upfile=$_FILES["mybg"]["name"];
				//アップされた画像の拡張子を抜き出す
				$ext = substr($upfile, strrpos($upfile, '.') + 1);
						
				//拡張子を調べる
				if($ext!="jpg" && $ext!="jpeg" && $ext!="gif" && $ext!="png" && $ext!="JPG" && $ext!="JPEG" && $ext!="PNG" && $ext!="GIF"){
				    $er["image"]="拡張子が「" .$ext ."」のファイルです。jpg、gif、png形式の画像のみアップできます";
				}
				$file_new_name = md5(uniqid(rand(), true));
				$newname = resizeImage($_FILES["mybg"], 910, 'upimg', $file_new_name);
	
				$param['bg'] = 'background-image: url(upimg/' . $newname . ');background-size:auto 100%;';
				$imgurl = 'upimg/' . $newname;
			} else {
				$er["image"] = '画像の権利に関する質問に同意してからアップロードしてください。';
			}
		}

		// 読み込み
		$d = $_POST['d'];
		require_once 'bunko_orihon_script.php';
		require_once 'meishi_fontload.php';
		require_once 'font.php';
		$param['sizeH2'] = $design[$d]['sizeH'] + 40;
		
		$canvasW = 630 * $design[$d]['coe'] * ($_POST['ql']);
		$canvasH = 888 * $design[$d]['coe'] * ($_POST['ql']);
		$allW = 630 * 4* $design[$d]['coe'] * ($_POST['ql']);
		$allH = 888 * 2 * $design[$d]['coe'] * ($_POST['ql']);

		session_start();
		// HTML;
		echo <<< HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-126701105-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-126701105-1');
</script>

<meta charset="UTF-8" />
<title>8P折り本ツール</title>
<meta name="description" content="短文を画像と組み合わせて名刺型にレイアウトする無料のWebツールです。">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="meishi.css?2018">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style>
{$menu_css}
{$font_css}
.font-loading{
    opacity: 0;
}
canvas {
	display:block;
	margin: auto;
	text-align: center;
	{$design[$d]['css']}
}
.credit {
	font-size: 90%;
	word-wrap: break-word;
}
#loading, #error {
	position: absolute;
	top:200px;
	left: 0;
	display: table-cell;
	margin: 0;
	z-index:2;
	vertical-align: middle;
	width: 100%;
	height: 40vh;
}
#loading div {
	vertical-align: middle;
	text-align: center;
}
#error {
	display: none;
	color: red;
	font-weight: bold;
}
 </style>
<script>
   var img = new Image();    //画像オブジェクト作成
  img.src = "{$imgurl}";  //写真のパスを指定する
	function ImgSave(bunki) {
		var canvas = document.getElementById("display") ;
		var image_data = canvas.toDataURL("image/png");
		image_data = image_data.replace(/^.*,/, '');
		var image_dataJ = canvas.toDataURL("image/jpeg");
		image_dataJ = image_dataJ.replace(/^.*,/, '');
		var form = document.form;
		form.imagedata.value = image_data;
		form.imagedataJ.value = image_dataJ;
		if (bunki == "d") {
			form.b.value = "save";
		} else if(bunki == "j") {
			form.b.value = "jpeg";
		} else if(bunki == "p") {
			form.b.value = "png";
		}
		form.submit();
	}
</script>
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
{$menu}<h1>8P折り本ツール</h1>
{$news}
<div class="wrapper">
<div class="fm">
<p>※生成した画像はご自身の責任においてご自由にお使い下さい。</p>
<strong style="color:red;">{$er["image"]}</strong>
<div class="cvs">
<div id="loading"><div><img src="img/icon_loader_f_ww_03_s1.gif" width="20" height="20"></div></div>
<div id="error">フォントをロードできませんでした。</div>
<canvas id="layer1" width="{$canvasW}" height="{$canvasH}"  style="position: absolute; z-index: 1; display:none;"></canvas>
<canvas id="layer2" width="{$canvasW}" height="{$canvasH}"  style="position: absolute; z-index: 2; display:none;"></canvas>
<canvas id="layer3" width="{$canvasW}" height="{$canvasH}"  style="position: absolute; z-index: 3; display:none;"></canvas>
<canvas id="layer4" width="{$canvasW}" height="{$canvasH}"  style="position: absolute; z-index: 4; display:none;"></canvas>
<canvas id="layer5" width="{$canvasW}" height="{$canvasH}"  style="position: absolute; z-index: 5; display:none;"></canvas>
<canvas id="layer6" width="{$canvasW}" height="{$canvasH}"  style="position: absolute; z-index: 6; display:none;"></canvas>
<canvas id="layer7" width="{$canvasW}" height="{$canvasH}"  style="position: absolute; z-index: 7; display:none;"></canvas>
<canvas id="layer8" width="{$canvasW}" height="{$canvasH}"  style="position: absolute; z-index: 8; display:none;"></canvas>
<canvas id="display" width="{$allW}" height="{$allH}">
</canvas>
</div>
<div style="text-align: center">
<span id="nextbtn"></span>
{$imagesource}
<div style="margin: 50px 0;">{$ad_top}</div>
<p style="font-size:90%">PCの場合は、この画像を右クリック→「名前を付けて画像を保存」で保存できます。<br>スマートフォン等、保存できない場合は下の変換ボタンからどうぞ。</p>
<form method="post" action="{$basename}" name="form" class="saveform" target="_blank">
　<input type="button" value="PNG画像に変換" onclick="ImgSave('p');" class="change"> <input type="button" value="JPEG画像に変換" onclick="ImgSave('j');" class="change"><br><br>
　<input type="button" value="PNG画像をダウンロード" onclick="ImgSave('d');" class="change"><br>
　↑初期バージョンの動きはこちら
  <input type="hidden" name="imagedata" value="">
  <input type="hidden" name="imagedataJ" value="">
  <input type="hidden" name="filename" value="{$savename}" id="filename">
  <input type="hidden" name="b" value="server"></div>
<p>※文字が正しく表示されない→一度戻って再読み込みしてみてください。広告ブロック機能（コンテンツブロッカー）は解除してください。<br>画像変換ができない→ブラウザを変更してみてください。</p>
</form>
</div>
<script> 
{$fontload}
{$script}
{$next}
</script>
HTML;

// ====================================================
//     フォーム画面
// ====================================================

	} else {
		$basename = basename($_SERVER['PHP_SELF']);
		require_once 'bunko_orihon_script.php';
		
		// デザイン
		$j = 1;
		// 幅
		while ($j <= $design_num){
			$Ji .= ','.$j.':'. $design[$j]['ji'];
			$Gyo .= ','.$j.':'. $design[$j]['gyo'];
			$j++;
		}
		
		// HTML描画
		echo <<< HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-126701105-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-126701105-1');
</script>

<meta charset="UTF-8" />
<meta name="description" content="文庫本文ふうにレイアウトする無料のWebツールです。">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@140sscard" />
<meta name="twitter:title" content="8P折り本ツール" />
<meta name="twitter:description" content="テキストを8Pの折り本用に面付け" />
<meta property="twitter:image" content="https://sscard.monokakitools.net/ogp/twicard_orihon2.png" />


<meta property="og:url" content="https://sscard.monokakitools.net/bunko.html" />
<meta property="og:title" content="8P折り本本文ツール" />
<meta property="og:description" content="テキストを8Pの折り本用に面付け" />
<meta property="og:image" content="https://sscard.monokakitools.net/ogp/twicard_orihon2.png" />
<title>8P折り本ツール</title>
<link rel="stylesheet" type="text/css" href="spectrum.css">
<link rel="stylesheet" type="text/css" href="meishi.css?2018">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style>
{$menu_css}
</style>
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="spectrum.js"></script>
<script src='FavSearchCondition.js'></script>

<script type="text/javascript">
$(function(){
	var Ji = {0:0{$Ji}};
	var Gyo = {0:0{$Gyo}};

	// 保存したデータを表示
	$('#docs').ready(function(){
		$('#docs').val(localStorage.getItem("bunko"));
		$("#count").text(CountField($('#docs').val(),Ji[$('#TiG input[name="d"]:radio:checked').val()],Gyo[$('#TiG input[name="d"]:radio:checked').val()]));
		$("#ji").text(Ji[$('#TiG input[name="d"]:radio:checked').val()]);
		$("#gyo").text(Gyo[$('#TiG input[name="d"]:radio:checked').val()]);
		$("#max").text(Ji[$('#TiG input[name="d"]:radio:checked').val()]*Gyo[$('#TiG input[name="d"]:radio:checked').val()]);
	});

	// フォーム変更時
	$("#TiG").change(function() {
		// 文字数
		$("#count").text(CountField($('#docs').val(),Ji[$('#TiG input[name="d"]:radio:checked').val()],Gyo[$('#TiG input[name="d"]:radio:checked').val()]));
		$("#ji").text(Ji[$('#TiG input[name="d"]:radio:checked').val()]);
		$("#gyo").text(Gyo[$('#TiG input[name="d"]:radio:checked').val()]);
		$("#max").text(Ji[$('#TiG input[name="d"]:radio:checked').val()]*Gyo[$('#TiG input[name="d"]:radio:checked').val()]);
	});

	
	// 本文変更時
	$("#docs").bind("keydown keyup keypress change", function() {
		$("#count").text(CountField($('#docs').val(),Ji[$('#TiG input[name="d"]:radio:checked').val()],Gyo[$('#TiG input[name="d"]:radio:checked').val()]));
	    localStorage.setItem("bunko", $("#docs").val());
	});

	// 文字数
	function CountField(Text,Theight,GyoMax) {
		Theight = Theight -1;
		var t_max = Theight + 3;
		var val = Text;
	 	counter = val.length;
		val = val.replace(/\\n/g, '∀');
		var c;
		var v;
		c = 0;
		v = 1;
		p = 1;
	    for(var i=0;i<val.length;i++){
	        chr = val.charAt(i);
			if (c > Theight) { // 最大字数オーバー
				if ((chr.match(/、|。|」|）|』|】/)) &&(c < (Theight + 3))){ // 禁則処理
				} else {
				   c = 1; // 縦位置カウント
				   v++; // 行カウント
			        if (v > GyoMax) {
			        	p++;
			        	v = 1;
			        }
				}
			} else if (chr == '∀') { // 改行マーク
				c= 0;
				v++;
		        if (v > GyoMax) {
		        	p++;
		        	v = 1;
		        }
	        } else {
	        	c++;
	        }
		}
		return '現在'+counter+'字（'+p+'ページ'+v+'行'+c+'字）';
	}
	

});


 // カラーピッカー
jQuery(function($){
    $("#picker-c").spectrum({
        color: "#fff", // 初期値
        flat: false, // trueの場合、クリックしなくてもピッカーが表示されるようにする
        showInput: true, // コードの入力欄を表示する
        disabled: false, // trueの場合、ピッカーを無効にする
        showPalette: true, // パレットを表示する
        showPaletteOnly: false, // true の場合、パレットのみの表示にする
        togglePaletteOnly: false, // true の場合、パレット以外の部分はボタンで表示切替する
        togglePaletteMoreText: "詳細", // togglePaletteOnlyがtrueの場合のボタン名(開く)
        togglePaletteLessText: "閉じる", // togglePaletteOnlyがtrueの場合のボタン名(閉じる)
        showSelectionPalette: true, // ユーザーが前に選択した色をパレットに表示する
        maxSelectionSize: 10, // 選択した色を記憶する数の上限
        hideAfterPaletteSelect: false, // true の場合、パレットを選んだ時点でピッカーを閉じる
        clickoutFiresChange: true, // ピッカーの外側をクリックしてピッカーを閉じた際にchangeイベントを発生させる
        showInitial: true, // 初期の色と選択した色を見比べるエリアを表示する
        allowEmpty: true, // 「指定なし」を許可する
        chooseText: "OK", // 選択ボタンのテキスト
        cancelText: "キャンセル", // キャンセルボタンのテキスト
        showButtons: true, // ボタンを表示する
        containerClassName: "full-spectrum", // ピッカーの部品を囲うタグ(要素)のクラス名
        replacerClassName: "", // ピッカーを表示させるボタンのクラス名
        preferredFormat: "hex", // カラーコードの形式を指定したものに変更する (可能な限り。hex, hex3等)
        localStorageKey: "spectrum.demo", // localStorageに選択色を記憶する際のキー
        palette: [ // パレット
            ["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", 
            "rgb(204, 204, 204)", "rgb(217, 217, 217)", "rgb(255, 255, 255)"],
            ["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)",
            "rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"],
            ["rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)",
            "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)",
            "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)", "rgb(182, 215, 168)",
            "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)",
            "rgb(204, 65, 37)", "rgb(224, 102, 102)", "rgb(246, 178, 107)", "rgb(255, 217, 102)", "rgb(147, 196, 125)",
            "rgb(118, 165, 175)", "rgb(109, 158, 235)", "rgb(111, 168, 220)", "rgb(142, 124, 195)", "rgb(194, 123, 160)",
            "rgb(166, 28, 0)", "rgb(204, 0, 0)", "rgb(230, 145, 56)", "rgb(241, 194, 50)", "rgb(106, 168, 79)",
            "rgb(69, 129, 142)", "rgb(60, 120, 216)", "rgb(61, 133, 198)", "rgb(103, 78, 167)", "rgb(166, 77, 121)",
            "rgb(91, 15, 0)", "rgb(102, 0, 0)", "rgb(120, 63, 4)", "rgb(127, 96, 0)", "rgb(39, 78, 19)",
            "rgb(12, 52, 61)", "rgb(28, 69, 135)", "rgb(7, 55, 99)", "rgb(32, 18, 77)", "rgb(76, 17, 48)"]
        ],
        selectionPalette: [], // 選択色のパレットの初期値

        // 値の変更(確定)時イベント
        change: function(color){
			$('[name="c"]').val(['picker']);
        },
        // 値の変更(未確定)時イベント
        move: function(color){
        },
        // ピッカーが閉じた時のイベント
        hide: function(color){
        },
        // ピッカーの表示イベント
        show: function(color){
        },
        // ピッカーの表示直前のイベント。return falseでピッカーの表示を阻害できる
        beforeShow: function(color){
        },
    });

    $("#picker-s").spectrum({
        color: "#fff", // 初期値
        flat: false, // trueの場合、クリックしなくてもピッカーが表示されるようにする
        showInput: true, // コードの入力欄を表示する
        disabled: false, // trueの場合、ピッカーを無効にする
        showPalette: true, // パレットを表示する
        showPaletteOnly: false, // true の場合、パレットのみの表示にする
        togglePaletteOnly: false, // true の場合、パレット以外の部分はボタンで表示切替する
        togglePaletteMoreText: "詳細", // togglePaletteOnlyがtrueの場合のボタン名(開く)
        togglePaletteLessText: "閉じる", // togglePaletteOnlyがtrueの場合のボタン名(閉じる)
        showSelectionPalette: true, // ユーザーが前に選択した色をパレットに表示する
        maxSelectionSize: 10, // 選択した色を記憶する数の上限
        hideAfterPaletteSelect: false, // true の場合、パレットを選んだ時点でピッカーを閉じる
        clickoutFiresChange: true, // ピッカーの外側をクリックしてピッカーを閉じた際にchangeイベントを発生させる
        showInitial: true, // 初期の色と選択した色を見比べるエリアを表示する
        allowEmpty: true, // 「指定なし」を許可する
        chooseText: "OK", // 選択ボタンのテキスト
        cancelText: "キャンセル", // キャンセルボタンのテキスト
        showButtons: true, // ボタンを表示する
        containerClassName: "full-spectrum", // ピッカーの部品を囲うタグ(要素)のクラス名
        replacerClassName: "", // ピッカーを表示させるボタンのクラス名
        preferredFormat: "hex", // カラーコードの形式を指定したものに変更する (可能な限り。hex, hex3等)
        localStorageKey: "spectrum.demo", // localStorageに選択色を記憶する際のキー
        palette: [ // パレット
            ["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", 
            "rgb(204, 204, 204)", "rgb(217, 217, 217)", "rgb(255, 255, 255)"],
            ["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)",
            "rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"],
            ["rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)",
            "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)",
            "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)", "rgb(182, 215, 168)",
            "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)",
            "rgb(204, 65, 37)", "rgb(224, 102, 102)", "rgb(246, 178, 107)", "rgb(255, 217, 102)", "rgb(147, 196, 125)",
            "rgb(118, 165, 175)", "rgb(109, 158, 235)", "rgb(111, 168, 220)", "rgb(142, 124, 195)", "rgb(194, 123, 160)",
            "rgb(166, 28, 0)", "rgb(204, 0, 0)", "rgb(230, 145, 56)", "rgb(241, 194, 50)", "rgb(106, 168, 79)",
            "rgb(69, 129, 142)", "rgb(60, 120, 216)", "rgb(61, 133, 198)", "rgb(103, 78, 167)", "rgb(166, 77, 121)",
            "rgb(91, 15, 0)", "rgb(102, 0, 0)", "rgb(120, 63, 4)", "rgb(127, 96, 0)", "rgb(39, 78, 19)",
            "rgb(12, 52, 61)", "rgb(28, 69, 135)", "rgb(7, 55, 99)", "rgb(32, 18, 77)", "rgb(76, 17, 48)"]
        ],
        selectionPalette: [], // 選択色のパレットの初期値

        // 値の変更(確定)時イベント
        change: function(color){
			$('[name="s"]').val(['picker']);
        },
        // 値の変更(未確定)時イベント
        move: function(color){
        },
        // ピッカーが閉じた時のイベント
        hide: function(color){
        },
        // ピッカーの表示イベント
        show: function(color){
        },
        // ピッカーの表示直前のイベント。return falseでピッカーの表示を阻害できる
        beforeShow: function(color){
        },
    });

    $("#picker-p").spectrum({
        color: "#fff", // 初期値
        flat: false, // trueの場合、クリックしなくてもピッカーが表示されるようにする
        showInput: true, // コードの入力欄を表示する
        disabled: false, // trueの場合、ピッカーを無効にする
        showPalette: true, // パレットを表示する
        showPaletteOnly: false, // true の場合、パレットのみの表示にする
        togglePaletteOnly: false, // true の場合、パレット以外の部分はボタンで表示切替する
        togglePaletteMoreText: "詳細", // togglePaletteOnlyがtrueの場合のボタン名(開く)
        togglePaletteLessText: "閉じる", // togglePaletteOnlyがtrueの場合のボタン名(閉じる)
        showSelectionPalette: true, // ユーザーが前に選択した色をパレットに表示する
        maxSelectionSize: 10, // 選択した色を記憶する数の上限
        hideAfterPaletteSelect: false, // true の場合、パレットを選んだ時点でピッカーを閉じる
        clickoutFiresChange: true, // ピッカーの外側をクリックしてピッカーを閉じた際にchangeイベントを発生させる
        showInitial: true, // 初期の色と選択した色を見比べるエリアを表示する
        allowEmpty: true, // 「指定なし」を許可する
        chooseText: "OK", // 選択ボタンのテキスト
        cancelText: "キャンセル", // キャンセルボタンのテキスト
        showButtons: true, // ボタンを表示する
        containerClassName: "full-spectrum", // ピッカーの部品を囲うタグ(要素)のクラス名
        replacerClassName: "", // ピッカーを表示させるボタンのクラス名
        preferredFormat: "hex", // カラーコードの形式を指定したものに変更する (可能な限り。hex, hex3等)
        localStorageKey: "spectrum.demo", // localStorageに選択色を記憶する際のキー
        palette: [ // パレット
            ["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", 
            "rgb(204, 204, 204)", "rgb(217, 217, 217)", "rgb(255, 255, 255)"],
            ["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)",
            "rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"],
            ["rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)",
            "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)",
            "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)", "rgb(182, 215, 168)",
            "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)",
            "rgb(204, 65, 37)", "rgb(224, 102, 102)", "rgb(246, 178, 107)", "rgb(255, 217, 102)", "rgb(147, 196, 125)",
            "rgb(118, 165, 175)", "rgb(109, 158, 235)", "rgb(111, 168, 220)", "rgb(142, 124, 195)", "rgb(194, 123, 160)",
            "rgb(166, 28, 0)", "rgb(204, 0, 0)", "rgb(230, 145, 56)", "rgb(241, 194, 50)", "rgb(106, 168, 79)",
            "rgb(69, 129, 142)", "rgb(60, 120, 216)", "rgb(61, 133, 198)", "rgb(103, 78, 167)", "rgb(166, 77, 121)",
            "rgb(91, 15, 0)", "rgb(102, 0, 0)", "rgb(120, 63, 4)", "rgb(127, 96, 0)", "rgb(39, 78, 19)",
            "rgb(12, 52, 61)", "rgb(28, 69, 135)", "rgb(7, 55, 99)", "rgb(32, 18, 77)", "rgb(76, 17, 48)"]
        ],
        selectionPalette: [], // 選択色のパレットの初期値

        // 値の変更(確定)時イベント
        change: function(color){
			$('[name="paper"]').val(['picker']);
        },
        // 値の変更(未確定)時イベント
        move: function(color){
        },
        // ピッカーが閉じた時のイベント
        hide: function(color){
        },
        // ピッカーの表示イベント
        show: function(color){
        },
        // ピッカーの表示直前のイベント。return falseでピッカーの表示を阻害できる
        beforeShow: function(color){
        },
    });

    //スルスルっとスクロールでトップへもどる
    var topBtn = $('#page-top');
    topBtn.hide();
    $('#TR').hide();
    //スクロールが500に達したらボタン表示
    $(window).scroll(function () {
        if ($(this).scrollTop() > 500) {
            topBtn.fadeIn();
        } else {
            topBtn.fadeOut();
        }
    });
    topBtn.click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 500);
        return false;
    });
    //スクロールが100に達したらボタン表示
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            $('#TR').fadeIn();
        } else {
            $('#TR').fadeOut();
        }
    });


    $("#TiG").on('submit',function(){
    	if ($('#docs').val() == '') {
    		alert ('本文が入力されていません。');
    		return false;
    	}
    	if($("#trgt").prop('checked')) {
			$("#TiG").attr("target","_blank");
		} else {
			$("#TiG").attr("target","_self");
		}
    });
    
    // 「.modal-open」をクリック
    $('.modal-open').click(function(){
        // オーバーレイ用の要素を追加
        $('body').append('<div class="modal-overlay"></div>');
        // オーバーレイをフェードイン
        $('.modal-overlay').fadeIn('slow');

        // モーダルコンテンツのIDを取得
        var modal = '#' + $(this).attr('data-target');
        // モーダルコンテンツの表示位置を設定
        modalResize();
         // モーダルコンテンツフェードイン
        $(modal).fadeIn('slow');

        // 「.modal-overlay」あるいは「.modal-close」をクリック
        $('.modal-overlay, .modal-close').off().click(function(){
            // モーダルコンテンツとオーバーレイをフェードアウト
            $(modal).fadeOut('slow');
            $('.modal-overlay').fadeOut('slow',function(){
                // オーバーレイを削除
                $('.modal-overlay').remove();
            });
        });

        // リサイズしたら表示位置を再取得
        $(window).on('resize', function(){
            modalResize();
        });

        // モーダルコンテンツの表示位置を設定する関数
        function modalResize(){
            // ウィンドウの横幅、高さを取得
            var w = $(window).width();
            var h = $(window).height();

            // モーダルコンテンツの表示位置を取得
            var x = (w - $(modal).outerWidth(true)) / 2;
            var y = (h - $(modal).outerHeight(true)) / 2;

            // モーダルコンテンツの表示位置を設定
            $(modal).css({'left': x + 'px','top': y + 'px'});
        }
    });
	  $('#rst').click(function(){
//	  	if(confirm('ブラウザに保存された下書きも削除しますか？')){
	    	localStorage.removeItem("bunko");
//	    }
	  });
	  $('#docdel').click(function(){
	  	if ($('#docdel').val() == '本文クリア') {
	  		if (confirm('本文消してＯＫ？')) {
		  		$('#docs').val(['']);
		  		$('#docdel').val(['本文復活']);
		  	}
	  	} else {
	  		$('#docs').val(localStorage.getItem("bunko"));
	  		$('#docdel').val(['本文クリア']);
	  	}
	  });

	if(('sessionStorage' in window) && (window.sessionStorage !== null)) {
	} else {
		$('#info').text('お使いのブラウザは複数ページ非対応です。');
	}
	// 警告
	$('#mybg').on("change", function() {
    	var file = this.files[0];
        if(file != null) {
		    $("#caution").css("display", "block");
        }
    });
	  
});
</script>
</head>
<body>
{$menu}
<h1>8P折り本ツール</h1>
{$news}
<div class="wrapper">
<form method="post" action="{$basename}" id="TiG" enctype="multipart/form-data">
{$ad_top}
<div class="fm">
<p>※生成した画像はご自身の責任においてご自由にお使い下さい。</p>
<fieldset>
<legend id="toptext">テキスト</legend>
<span class="note">※半角文字は全角に変換されます</span>
<h2>本文<span style="font-weight:normal;color:#333;font-size:1rem;">（<span id="gyo" style="font-weight:normal;color:#333;font-size:1rem;">16</span>行×<span id="ji" style="font-weight:normal;color:#333;font-size:1rem;">39</span>字／ページ）<span id="count">現在0字</span></h2>
<textarea name="t1" style="width:90%;min-height:10em;max-height:75vh;" id="docs"></textarea><br>
<span class="note" style="color:blue;"><span id="info"></span>　</span>
<input type="button" value="本文クリア" class="del" id="docdel" style="font-size:80%;">
<h2>付記（任意）</h2>
<input type="text" name="sig">
<h2>ページ番号</h2>
<label><input type="radio" name="pagination" value="1" checked>全ページにつける</label>
<label><input type="radio" name="pagination" value="2">２枚目からつける</label><br>
（開始番号：<input type="number" name="startnum" style="width:3em;" value="1" min="1">）<br>
<label><input type="radio" name="pagination" value="0">つけない</label>
</fieldset>
<fieldset>
<legend id="Lay">レイアウト</legend>
<h2>本文字組</h2>
<label class="wrap"><input type="radio" name="d" value="1" checked>Ａ３出力→Ａ６折り本（16行×39字×8P＝4,992字）</label><br>
<label class="wrap"><input type="radio" name="d" value="2">Ａ４出力→Ａ７折り本（12行×31字×8P＝2,976字）</label><br>
<span class="note">※A3で生成できない場合は画質を「低画質」にしてお試しください</span>
<h2>付記とノンブル</h2>
<label class="wrap"><input type="radio" name="nb" value="1" checked>付記：ヘッダー　ノンブル：フッター</label><br>
<label class="wrap"><input type="radio" name="nb" value="2">付記：フッター　ノンブル：ヘッダー</label><br>
<label><input type="radio" name="nb" value="3">どちらもヘッダー</label><br>
<label><input type="radio" name="nb" value="4">どちらもフッター</label>
<h2>画質</h2>
<label><input type="radio" name="ql" value="2">高画質</label>
<label><input type="radio" name="ql" value="1" checked>標準画質</label>
<label><input type="radio" name="ql" value="0.5">低画質</label><br>
<span class="note">※画像変換でエラーになる場合は、画質を下げてお試し下さい。</span>
</fieldset>
<fieldset>
<legend id="Cover">表紙・裏表紙</legend>
<h2 style="clear:both;">表紙画像（任意）</h2>
※画像をアップロードすると１枚目の表紙になります<br>
<div id="caution"><strong>アップロードする画像は、あなた自身が撮影・作成した画像か、使用の許可を得ている画像ですか？<br>
<label style="color:red;weight:bold;" class="wrap"><input type="checkbox" name="agree" value="1">はい、この画像は私が使っていい画像です。</label></strong><br>
<span class="note" style="color:#000;">※画像の権利にご注意ください。許可なく保存した画像、他人の姿や商標など、あなたが自由に使っていいものでない画像を権利者の許諾なく使用しないでください。</span></div>
<input type="file" name="mybg" id="mybg" accept="image/*" style="width:80%;">
<div id="thumb"></div>
<span class="note">推奨サイズ<br>
Ａ３→Ａ６／高画質：3,392×2,360以上 標準画質：1,656×1,180以上 低画質：848×590以上<br>
Ａ４→Ａ７／高画質：1,656×1,180以上 標準画質：848×590以上 低画質：424×295以上</span>
<script>

// File APIに対応しているか確認
if(window.File) {
    var thumb = document.getElementById('thumb');
    var select = document.getElementById('mybg');
 
    // ファイルが選択されたとき
    select.addEventListener('change', function(e) {
        // 選択されたファイルの情報を取得
        var fileData = e.target.files[0];
        var imgType = fileData.type;
 
        // 選択されたファイルが画像かどうか確認
        if(!imgType.match(/^image/)) {
            alert('画像を選択してください');
            select.value = '';
            thumb.innerHTML = 'ここにサムネイルを表示します。';
            return;
        }
 
        var reader = new FileReader();
        // ファイル読み取りに失敗したとき
        reader.onerror = function() {
            alert('ファイル読み取りに失敗しました')
            thumb.innerHTML = '';
        }
        // ファイル読み取りに成功したとき
        reader.onload = function() {
            var insert = '<img src="' + reader.result + '" width="300">';
            thumb.innerHTML = insert;
        }
        // ファイル読み取りを実行
        reader.readAsDataURL(fileData);
    }, false);
}
</script>
<h2 style="clear:both;">奥付テキスト（任意）</h2>
※本文が７ページまでの場合に表示可能です。<br>
<textarea name="writer" style="width:90%;min-height:7em;"></textarea><br>
</fieldset>
<fieldset>
<legend id="Conf">テキストの設定</legend>
<h2>書体<span> [<a data-target="modal1" class="modal-open">書体サンプル</a>]</span></h2>
<h3>書籍本文系明朝体</h3>
<label><input type="radio" name="f" value='16' checked>源暎こぶり明朝</label> 
<label><input type="radio" name="f" value='7'>しっぽり明朝</label> 
<label><input type="radio" name="f" value='25'>源暎ちくご明朝</label> 
<label><input type="radio" name="f" value='1'>錦源明朝</label> 
<label><input type="radio" name="f" value='22'>IPAex明朝</label> 
<label><input type="radio" name="f" value='23'>源ノ明朝Regular</label> 
<label><input type="radio" name="f" value='0'>アプリ明朝</label> 
<h3>その他の書体</h3>
<label><input type="radio" name="f" value='9'>源ノ明朝Bold</label> 
<label><input type="radio" name="f" value='11'>はれのそら明朝</label> 
<label><input type="radio" name="f" value='24'>さつき源代明朝</label> 
<label><input type="radio" name="f" value='2'>むつき現代明朝</label> 
<label><input type="radio" name="f" value='15'>Oradano明朝</label> 
<label><input type="radio" name="f" value='10'>はんなり明朝</label> 
<label><input type="radio" name="f" value='5'>源ノ角ゴシックThin</label> 
<label><input type="radio" name="f" value='8'>源ノ角ゴシックBlack</label> 
<label><input type="radio" name="f" value='4'>M+2p Regular</label> 
<label><input type="radio" name="f" value='3'>源暎ラテゴ</label> 
<label><input type="radio" name="f" value='17'>しっぽりアンチック</label> 
<label><input type="radio" name="f" value='13'>いろは角クラシックLight</label> 
<label><input type="radio" name="f" value='14'>いろはマルRegular</label>
<label><input type="radio" name="f" value='21'>851手書き雑</label>
<h2>文字色</h2>
<label><input type="radio" name="c" value="#000" checked><span style="color:#000">■黒</span></label> 
<label><input type="radio" name="c" value="#D7C4BB"><span style="color:#D7C4BB;">■灰桜</span></label>
<label><input type="radio" name="c" value="#64363C"><span style="color:#64363C">■桑染</span></label>
<label><input type="radio" name="c" value="#8E354A"><span style="color:#8E354A">■蘇芳</span></label>
<label><input type="radio" name="c" value="#AB3B3A"><span style="color:#AB3B3A">■真朱</span></label>
<label><input type="radio" name="c" value="#C73E3A"><span style="color:#C73E3A">■銀朱</span></label>
<label><input type="radio" name="c" value="#D0104C"><span style="color:#D0104C">■韓花紅</span></label>
<label><input type="radio" name="c" value="#FFB11B"><span style="color:#FFB11B">■山吹</span></label>
<label><input type="radio" name="c" value="#838A2D"><span style="color:#838A2D">■苔</span></label>
<label><input type="radio" name="c" value="#1B813E"><span style="color:#1B813E">■常磐</span></label>
<label><input type="radio" name="c" value="#62592C"><span style="color:#62592C">■海松茶</span></label>
<label><input type="radio" name="c" value="#36563C"><span style="color:#36563C">■千歳緑</span></label>
<label><input type="radio" name="c" value="#2B5F75"><span style="color:#2B5F75">■熨斗目花</span></label>
<label><input type="radio" name="c" value="#113285"><span style="color:#113285">■紺青</span></label>
<label><input type="radio" name="c" value="#0F2540"><span style="color:#0F2540">■紺</span></label>
<label><input type="radio" name="c" value="#4A225D"><span style="color:#4A225D">■深紫</span></label>
<br>
<label><input type="radio" name="c" value="picker">カラーピッカーで指定：<span class="picker"><br /></span><input type="text" id="picker-c" name="picker-c"></label>
<h2>オプション</h2>
<label><input type="checkbox" name="opt[]" value="zen">半角を全角に自動変換しない</label>
<label><input type="checkbox" name="opt[]" value="kan">数字を漢数字にする</label>
<label><input type="checkbox" name="opt[]" value="sage">段落を字下げする</label>
</fieldset>
<fieldset>
<legend>その他の設定</legend>
<label><input type="checkbox" id="trgt" name="trgt">別画面に生成する</label>
<label style="white-space: normal"><input type="checkbox" name="joyo" value="1">フォントデータを軽量化<span class="note">（常用外漢字にフォントが適用されません）</span></label><br>
</fieldset>
<div style="margin-top:20px"><input type="submit" value="　このデザインで作る　"><input type="reset" id="rst" value="リセット" class="del" style="cursor:pointer;"><br>
</div>
<div style="margin-top:20px">
<h2>8P折り本の作り方</h2>
<p><img src="img/orihon.png" border="0" alt="orihon.png(79087 byte)" width="600" height="423"></p>
<p>生成した画像を余白なしで印刷し、赤い点線部分を切って畳んでください。（オレンジ：山折り／青：谷折り）
</div>
<div id="TR"><input type="submit" value="生成"></div>
</form>
<script src='autosize.min.js'></script>
	<script>
		autosize(document.querySelectorAll('textarea'));
	</script>
<!--Modal contents-->
<div id="modal1" class="modal-content">
 <img src="img/fonts1218.png">
 <a class="modal-close">×</a>
</div>
HTML;
	}

?>
<div style="margin:20px 0;">
<div id="adview"><span style="font-size:90%;color:#999;">【スポンサーリンク】</span><br>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 336_280_レクタングル大 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client="ca-pub-1080129079031897"
     data-ad-slot="1491300538"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<span class="ad"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 336_280_レクタングル大 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client="ca-pub-1080129079031897"
     data-ad-slot="1491300538"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></span></div>
</div>
</div>
</div>
<footer>
	<address>
		- <a href="index.html">SS名刺メーカー</a> -
	</address>
</footer>
</body>
</html>