Skip to content

Commit

Permalink
カラムで分けた
Browse files Browse the repository at this point in the history
  • Loading branch information
@kyukyunyorituryo
kyukyunyorituryo committed Jul 23, 2020
1 parent 216a6cc commit b7953cc
Showing 1 changed file with 126 additions and 93 deletions.
219 changes: 126 additions & 93 deletions index_beta.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,35 +21,59 @@
</head>
<body>
<style>
body {
background-color: #5bc0de;
}
.container {
max-width: 960px;
}
</style>
<div class="container bg-light">
<h3 class="alert alert-success">本の形式</h3>
<div class="form-group ">
<p class="control-label"><b>本の綴じ方向</b></p>
<div class="container bg-light">
<h3 class="alert alert-success">本の形式</h3>
<div class="row">

<div class="form-group col-md-6 mb-3">
<p class="control-label "><b>本の綴じ方向</b></p>
<label class="badge badge-primary">ページ方向</label>
<label class="checkbox-inline"><input type="radio" name="radio" id="binding-rtl" value="radio1" checked="">右から左</label>
<label class="checkbox-inline"><input type="radio" name="radio" id="binding-ltr" value="radio2">左から右</label>
</div>
<div class="form-group ">
<div class="form-group col-md-6 mb-3">
<p class="control-label"><b>パネルビュー</b></p>
<label class="badge badge-primary">拡大したときの移動方向</label>
<label class="checkbox-inline"><input type="radio" name="radio2" id="panel-h" value="radio3" checked="">漫画（通常）</label>
<label class="checkbox-inline"><input type="radio" name="radio2" id="panel-v" value="radio4">四コマ</label>
</div>

<h3 class="alert alert-success">本の情報の入力</h3>
<div class="form-group ">
</div>
<h3 class="alert alert-success">本の情報の入力</h3>
<div class="form-group row">
<div class="col-md-6 mb-3">
<label class="badge badge-primary">表題</label>
<input type="text" class="form-control " id="title" placeholder="タイトル名">
</div>
<div class="col-md-6 mb-3">
<label class="badge badge-primary">表題（カタカナ）</label>
<input type="text" class="form-control " id="title_kana" placeholder="タイトル名カナ">
</div>

<div class="col-md-6 mb-3">
<label class="badge badge-primary">著者１</label>
<input type="text" class="form-control" id="author1" placeholder="著者名１">
</div>
<div class="col-md-6 mb-3">
<label class="badge badge-primary">著者１（カタカナ）</label>
<input type="text" class="form-control" id="author1_kana" placeholder="著者名１カナ">
</div>
<div class="col-md-6 mb-3">
<label class="badge badge-primary">著者２(任意)</label>
<input type="text" class="form-control" id="author2" placeholder="著者名２(任意)">
<!-- 多言語対応-->
</div>
<div class="col-md-6 mb-3">
<label class="badge badge-primary">著者２(任意)（カタカナ）</label>
<input type="text" class="form-control" id="author2_kana" placeholder="著者名２(任意)カナ">
</div>
<!-- 多言語対応-->
<div class="col-md-6 mb-3">
<label class="badge badge-primary">言語選択</label>
<select class="form-control" id="LangSelect">
<option value="zh">中国語</option>
Expand Down Expand Up @@ -85,98 +109,107 @@ <h3 class="alert alert-success">本の情報の入力</h3>
<option value="vi">ベトナム語</option>
<option selected value="ja">日本語</option>
</select>
<!-- 多言語対応-->
<label class="badge badge-primary">表紙画像</label>
<input type="file" id="coverfile" name="coverfile" accept="image/png,image/jpeg">
<output id="coverthumb"></output>
<div class="nondisplayFrame">
<label class="badge badge-primary">画像の横幅</label>
<input type="number" class="form-control" id="imgwidth" min="1" value="800" placeholder="800">
<label class="badge badge-primary">画像の高さ</label>
<input type="number" class="form-control" id="imgheight" min="1" value="1200" placeholder="1200">
</div>
</div>
<style type="text/css">
.nondisplayFrame {
display: none;
}
</style>
<style>
.thumb {
height: 75px;
border: 1px solid #000;
margin: 10px 5px 0 0;
}
</style>
<div>
<label class="badge badge-primary">本文ファイルの読み込み</label>
<input type="file" id="files" name="files[]" multiple="multiple" accept="image/png,image/jpeg">
<output id="list"></output>
<label class="badge badge-primary">画像の整列</label>

<div><button type=button id="sort">名前順に整列</button></div>
<!-- 多言語対応-->
</div>

</div>
<div class="col-md-6 mb-3">
<label class="badge badge-primary">表紙画像</label>
<input type="file" id="coverfile" name="coverfile" accept="image/png,image/jpeg">
<output id="coverthumb"></output>
</div>
<div class="nondisplayFrame">
<label class="badge badge-primary">画像の横幅</label>
<input type="number" class="form-control" id="imgwidth" min="1" value="800" placeholder="800">
<label class="badge badge-primary">画像の高さ</label>
<input type="number" class="form-control" id="imgheight" min="1" value="1200" placeholder="1200">
</div>

<h3 class="alert alert-success">目次の編集</h3>
<div id="menu-group">
<label class="badge badge-primary">目次の選択</label>
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="InputSelect">選択</label>
<select class="form-control" id="InputSelect">
<option>Cover</option>
</select>
</div>
<div class="form-group">
<label class="sr-only">目次の書換</label>
<input type="text" class="form-control" id="covertext" value="表紙" placeholder="目次タイトル">
</div>
</form>
<style type="text/css">
.nondisplayFrame {
display: none;
}
</style>
<style>
.thumb {
height: 75px;
border: 1px solid #000;
margin: 10px 5px 0 0;
}
</style>
<div class="mb-3">
<label class="badge badge-primary">本文ファイルの読み込み</label>
<input type="file" id="files" name="files[]" multiple="multiple" accept="image/png,image/jpeg">

<output id="list"></output>
</div>

<div class="col-md-6 mb-3">
<label class="badge badge-primary">画像の整列</label>

<form class="form-inline" name="formNav">
<button type=button id="sort">名前順に整列</button>
</div>

<div class="form-group">
<label class="sr-only" for="InputSelect">選択</label>
<select class="form-control" id="InputSelect2" name="selectNav">
<option>本文の選択</option>
</select>

<h3 class="alert alert-success">目次の編集</h3>
<div id="menu-group">
<label class="badge badge-primary">目次の選択</label>
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="InputSelect">選択</label>
<select class="form-control" id="InputSelect">
<option>Cover</option>
</select>
</div>
<div class="form-group">
<label class="sr-only">目次の書換</label>
<input type="text" class="form-control" id="covertext" value="表紙" placeholder="目次タイトル">
</div>
</form>

<form class="form-inline" name="formNav">

<div class="form-group">
<label class="sr-only" for="InputSelect">選択</label>
<select class="form-control" id="InputSelect2" name="selectNav">
<option>本文の選択</option>
</select>
</div>
<div class="form-group">
<label class="sr-only">目次の書換</label>
<input type="text" class="form-control" id="navtext1" name="editNav" value="目次" placeholder="目次タイトル">
</div>
</form>
</div>
<!--目次の追加や削除-->
<button type="submit" class="btn btn-warning" id="addmenu">追加</button>
<button type="submit" class="btn btn-warning" id="removeselect">削除</button>

<h3 class="alert alert-success">ファイルの出力</h3>

<button id="demo" class="btn btn-primary">保存</button>
<h3 class="alert alert-success">EPUBビュワー</h3>
<label class="badge badge-primary">クリックしドラッグアンドドロップでEPUBを確認する</label><br>
<a class="btn btn-info" href="bib/i/index.html" target="_blank">EPUBビュワーBiB/i（ビビ）</a>
<span id="status"></span>
<!-- モーダルの設定です -->
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">プレビュー</h4>
</div>
<div class="form-group">
<label class="sr-only">目次の書換</label>
<input type="text" class="form-control" id="navtext1" name="editNav" value="目次" placeholder="目次タイトル">

<div class="modal-body">
<img src="" id="imagepreview" class="img-responsive">
</div>
</form>
</div>
<!--目次の追加や削除-->
<button type="submit" class="btn btn-default" id="addmenu">追加</button>
<button type="submit" class="btn btn-default" id="removeselect">削除</button>

<h3 class="alert alert-success">ファイルの出力</h3>

<button id="demo" class="btn btn-primary">保存</button>
<h3 class="alert alert-success">EPUBビュワー</h3>
<label class="badge badge-primary">クリックしドラッグアンドドロップでEPUBを確認する</label><br>
<a class="btn btn-info" href="bib/i/index.html" target="_blank">EPUBビュワーBiB/i（ビビ）</a>
<span id="status"></span>
<!-- モーダルの設定です -->
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">プレビュー</h4>
</div>

<div class="modal-body">
<img src="" id="imagepreview" class="img-responsive">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div><!-- /modal -->
</div>
</div>
</div><!-- /modal -->
</div>
</body>
</html>

0 comments on commit b7953cc

Please sign in to comment.