-
Notifications
You must be signed in to change notification settings - Fork 0
/
popup_2.html
181 lines (170 loc) · 13.6 KB
/
popup_2.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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!doctype html>
<!--
Material Design Lite
Copyright 2015 Google Inc. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
https://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License
-->
<html lang="en">
<head>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-KXV4BR4');</script>
<!-- End Google Tag Manager -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<title>Material Design Lite</title>
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Material Design Lite">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#3372DF">
<link rel="shortcut icon" href="images/favicon.png">
<!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
<!--
<link rel="canonical" href="http://www.example.com/">
-->
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.grey-orange.min.css">
<link rel="stylesheet" href="styles.css">
<style>
#view-source {
position: fixed;
display: block;
right: 0;
bottom: 0;
margin-right: 40px;
margin-bottom: 40px;
z-index: 900;
}
</style>
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KXV4BR4"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<div class="demo-blog demo-blog--blogpost mdl-layout mdl-js-layout has-drawer is-upgraded">
<main class="mdl-layout__content">
<div class="demo-back">
<a class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" href="index.html" title="go back" role="button">
<i class="material-icons" role="presentation">arrow_back</i>
</a>
</div>
<div class="demo-blog__posts mdl-grid">
<div class="mdl-card mdl-shadow--4dp mdl-cell mdl-cell--12-col">
<div class="mdl-card__media mdl-color-text--grey-50">
<h3>ポップアップアンケート</h3>
</div>
<div class="mdl-color-text--grey-700 mdl-card__supporting-text meta">
<div class="minilogo"></div>
<div>
<strong>更新日</strong>
<span>2 days ago</span>
</div>
<div class="section-spacer"></div>
<div class="meta__favorites">
425 <i class="material-icons" role="presentation">favorite</i>
<span class="visuallyhidden">favorites</span>
</div>
<div>
<i class="material-icons" role="presentation">bookmark</i>
<span class="visuallyhidden">bookmark</span>
</div>
<div>
<i class="material-icons" role="presentation">share</i>
<span class="visuallyhidden">share</span>
</div>
</div>
<div class="mdl-color-text--grey-700 mdl-card__supporting-text">
<p>ある男がロバを飼っていました。このロバは何年も疲れ知らずに麦の袋を風車小屋まで運びましたが、力がなくなってきて、だんだん仕事に適さなくなってきました。それで主人はえさをやらないのが一番いいと考え始めました。しかし、ロバは風向きが悪いとわかって逃げ、ブレーメンへ行く道を出発しました。そこできっと町の音楽家になれるぞ、とロバは考えました。</p>
<p>しばらく歩くと、猟犬が道に寝て、疲れるまで走ったようにハアハアあえいでいるのに気がつきました。「犬くん、どうしてそんなにあえいでいるんだね？」とロバは尋ねました。「ああ」と猟犬は答えました。「僕は年寄りで、毎日弱くなってきて、もう猟ができないんだよ。主人は僕を殺そうとしたんだ。だから逃げて来たのさ。だけど、どうやって食っていったらいいんだろう？」「いいこと教えようか」とロバは言いました。「僕はブレーメンへ行って、そこで町の音楽家になるんだ。僕と一緒に行って君も音楽家の仕事をしないか。僕はリュートを弾く、きみはティンパニをたたくんだ。」</p>
<p>猟犬は賛成しました。それで二匹で進んで行きました。まもなく、猫に出会いました。猫は三日続きの雨のような顔をして道に座っていました。「これこれ、ひげそりくん、浮かない顔してるね、どうしたんだい？」とロバは尋ねました。<br>
「首が危ないというのに楽しい人がいるかい？」と猫は答えました。「寄る年並みで、歯はすりへって平たくなってるし、暖炉のそばに座って糸を紡いでいる方が好きなの、ネズミを追い回すよりもね。うちのおかみさんは私を溺れさそうとしたのよ。だから逃げてきたわ。だけど、今はいい考えが浮かばなくてね。どこへ行ったらいいのかしら？」<br>
「一緒にブレーメンへ行こう。君は夜想曲がわかるじゃないか。町の音楽家になれるよ。」</p>
<p>猫はそれがいいと思い、一緒に行きました。この後、三匹の逃亡者たちは農家の庭に来ました。そこでは雄鶏が門の上にとまって、声をかぎりに鳴いていました。<br>
「君の鳴き声はどこまでもどこまでもしみ通るね。どうしたの？」とロバは言いました。<br>
「天気がよくなるって予報しているんだよ。マリア様が幼子キリストの小さなシャツを洗ってかわかそうとなさる日だからね。」と雄鶏は言いました。「だけど、日曜にはお客がくることになっているもんだから、うちの奥さんは無慈悲にも、明日スープに入れて僕を食べるつもりだとコックに言ったんだよ。それで今晩僕は頭を切られるんだ。だから、まだできる間に、肺を最大限に使って鳴いているのさ。」<br>
「ああ、だけどトサカくん、」とロバは言いました。「僕たちと一緒に来た方がいいよ。僕たちはブレーメンへ行くんだ。どこへ行ったって死ぬよりましなことを見つけられるよ。君は良い声をしてる。僕たちが一緒に音楽をやれば、きっと素晴らしくなるよ。」</p>
<p>雄鶏はこの計画に賛成しました。こうして４匹は一緒に進んで行きました。ところが一日でブレーメンの町に行きつくことができませんでした。夕方に森に着いたので、そこで夜を明かすことにしました。ロバと猟犬は大きな木の下にねて、猫と雄鶏は枝に上りましたが、雄鶏は一番安全なてっぺんまで飛び上がりました。雄鶏が眠る前に四方を見まわすと、遠くに小さな火花が燃えているのが見えたように思いました。それで、「遠くないところに家があるに違いないよ、だって明かりが見えたんだ」と仲間に呼びかけました。</p>
<p>「それなら、起きて行った方がいいな。ここの宿はひどいからね。」とロバは言いました。猟犬も、肉がついた骨２，３本にありつけたらいいな、と思いました。</p>
<p>それで明かりがある場所を目指して進み、まもなくその明かりがだんだん明るく輝き、大きくなって、こうこうと明かりのついた強盗の家に着きました。ロバが、一番大きいので、窓に行って中をのぞきました。<br>
「何が見える？芦毛の馬さん」と雄鶏が尋ねました。<br>
「何が見えるか？」とロバは答えました。「おいしそうな食べ物と飲み物が載ってるテーブル、それと、そこに座って楽しくやってる強盗たち。」<br>
「それはうってつけね。」と雄鶏は言いました。<br>
それから動物たちは、強盗たちを追い払う方法を相談し、とうとうある計画を思いつきました。ロバが前足を窓枠にかけ、猟犬がロバの背に飛び乗り、猫が犬の上によじ登り、最後に雄鶏が飛び上がって猫の頭にとまることにしました。<br>
これが終わると、合図に従って、四匹が一緒に音楽を演奏し始めました。ロバがいななき、猟犬は吠え、猫はニャーオといい、雄鶏は時をつくりました。それからガラスをこなごなに割って、窓から部屋にどっとなだれ込みました。このおそろしい騒ぎに、強盗たちはてっきり幽霊がはいってきたと思い、跳びあがり、びっくり仰天して、森へ逃げていきました。</p>
</div>
<div class="mdl-color-text--primary-contrast mdl-card__supporting-text comments">
<form>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<textarea rows=1 class="mdl-textfield__input" id="comment"></textarea>
<label for="comment" class="mdl-textfield__label">Join the discussion</label>
</div>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
<i class="material-icons" role="presentation">check</i><span class="visuallyhidden">add comment</span>
</button>
</form>
</div>
</div>
<nav class="demo-nav mdl-color-text--grey-50 mdl-cell mdl-cell--12-col">
<a href="index.html" class="demo-nav__button">
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-color--white mdl-color-text--grey-900" role="presentation">
<i class="material-icons">arrow_back</i>
</button>
Newer
</a>
<div class="section-spacer"></div>
<a href="index.html" class="demo-nav__button">
Older
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-color--white mdl-color-text--grey-900" role="presentation">
<i class="material-icons">arrow_forward</i>
</button>
</a>
</nav>
</div>
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer--left-section">
<button class="mdl-mini-footer--social-btn social-btn social-btn__twitter">
<span class="visuallyhidden">Twitter</span>
</button>
<button class="mdl-mini-footer--social-btn social-btn social-btn__blogger">
<span class="visuallyhidden">Facebook</span>
</button>
<button class="mdl-mini-footer--social-btn social-btn social-btn__gplus">
<span class="visuallyhidden">Google Plus</span>
</button>
</div>
<div class="mdl-mini-footer--right-section">
<button class="mdl-mini-footer--social-btn social-btn__share">
<i class="material-icons" role="presentation">share</i>
<span class="visuallyhidden">share</span>
</button>
</div>
</footer>
</main>
<div class="mdl-layout__obfuscator"></div>
</div>
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</body>
</html>