-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathindex.html
154 lines (137 loc) · 4.98 KB
/
index.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
153
154
<!DOCTYPE html>
<html lang=ja>
<head>
<meta charset=UTF-8>
<title>おはなしジェネレーター for アイドルマスターミリオンライブ！</title>
<meta name="viewport" content="width=device-width, maximum-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<link rel=stylesheet href=ohanashi.css>
<link rel=icon href=./favicon.ico type=image/x-icon>
</head>
<body>
<header class="jumbotron">
<h1>おはなしジェネレーター</h1>
<p>アイドルマスターミリオンライブ！ のおはなしを作ろう！</p>
<p class=small>
別の方が作った <a href="http://oahiroaki.github.io/ohanashi-gen-dere/">for アイドルマスターシンデレラガールズ</a>もあります。
</p>
</header>
<main class="container">
<p class=nowloading><progress>ナウローディングプリーズウェイト</progress></p>
</main>
<footer>
<p>
お問い合わせは
<a href="https://twitter.com/furugomu">@furugomu</a>
へ。
</p>
<p>
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja">Tweet</a>
<a href="https://github.com/furugomu/ohanashi">Fork me on GitHub!!!!!!!!!!!!</a>
</p>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</footer>
<template id=app-template>
<div>
<og-idols v-ref:idols></og-idols>
<og-faces v-ref:faces></og-faces>
<og-form v-ref:form></og-form>
<og-result v-ref:result></og-result>
</div>
</template>
<template id=idols-template>
<section>
<h2>アイドルを選ぶ</h2>
<div class="form-inline">
<span>
<label><input name=type type=radio v-model="search.type" value="">All</label>
<label><input name=type type=radio v-model="search.type" value="vo">Vo</label>
<label><input name=type type=radio v-model="search.type" value="da">Da</label>
<label><input name=type type=radio v-model="search.type" value="vi">Vi</label>
<label><input name=type type=radio v-model="search.type" value="ex">Ex</label>
</span>
<label>
<input type=search size=20 v-model="searchText" placeholder="にかいどう" class="form-control">
</label>
</div>
<ul class="nav nav-pills">
<li v-for="idol in idols | search"
@click="select(idol)"
:class="{active: selectedIdol === idol}">
<a>
<img class="face icon select" :src="idol.images[0]">
</a>
</li>
</ul>
</section>
</template>
<template id=faces-template>
<div><section v-if="idol">
<h2>表情を選ぶ</h2>
<div class="tab-content">
<div class="tab-pane active">
<span v-for="url in idol.images">
<img :src="url" alt="" @click="select(url)" class="face select">
</span>
</div>
</div>
</section></div>
</template>
<template id=form-template>
<div><section v-if="isReady">
<h2>せりふを考える</h2>
<form @submit="addParagraph">
<div class="scenario">
<og-item :idol="idol" :image="image" :text="text"></og-item>
</div>
<p><textarea v-model="text" rows=2 cols=60></textarea></p>
<p><button class="btn btn-default">↓追加↓</button></p>
</form>
</section></div>
</template>
<template id=result-template>
<section>
<h2>できあがり</h2>
<p><label><input type=checkbox v-model="editting">編集モード</label></p>
<section v-show="editting"><og-list v-show="editting"></og-list></section>
<section v-show="!editting">
<og-canvas v-ref:canvas></og-canvas>
<p>
長押しや右クリックで画像を保存してお楽しみください。
</p>
<p>
<button @click="open" class="btn btn-default">
保存できないので画像だけを表示してみる
</button>
</p>
</section>
</section>
</template>
<template id=list-template>
<div class="scenario">
<div v-for="p in paragraphs">
<og-item :idol="p.idol" :image="p.image" :text="p.text"></og-item>
<div>
<button class=btn type=button :disabled="$index === 0"
@click="moveup($index)">↑</button>
<button class=btn type=button :disalbed="$index + 1 === paragraphs.length"
@click="movedown($index)">↓</button>
<button class="btn btn-danger" type=button
@click="remove($index)">削除</button>
</div>
</div>
</div>
</template>
<template id=item-template>
<div class="paragraph">
<img :src="image" class=face>
<div class="fukidashi">
<p class="name" v-if="idol">{{idol.name}}</p>
<pre class="serifu">{{text}}</pre>
</div>
</div>
</template>
<script src=build.js></script>
</body>
</html>