-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
313 lines (283 loc) · 15.6 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
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
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
<!DOCTYPE html>
<html lang="ja">
<!--Pescadolinux絶賛作成中！あと2年くらい待ってね！-->
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home | PescadoGames</title>
<meta name="description" content="Pescadolinuxのホームページです">
<meta name="keywords" content="">
<meta property="og:title" content="Pescadolinux | Home" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.pescadogames.com/index.html" />
<meta property="og:image" content="/assets/image/PescadolinuxLogo.png" />
<meta property="og:image" content="/assets/image/PescadolinuxLogo.png">
<meta property="og:locale" content="ja_JP">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.4.4/vegas.min.css">
<link rel="stylesheet" type="text/css" href="assets/styles/reset.css">
<link rel="stylesheet" href="assets/styles/footercss.css">
<link rel="stylesheet" href="assets/styles/header.css">
<link rel="stylesheet" href="assets/styles/indexcss.css">
<link href="https://fonts.googleapis.com/css?family=Alex+Brush%7CNoto+Serif+JP&display=swap" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="https://www.pescadogames.com/favicon.ico">
<link rel="icon" type="image/vnd.microsoft.icon" href="https://www.pescadogames.com/favicon.ico">
<script async src="https://www.googletagmanager.com/gtag/js?id=G-TMK183GM24" type="e99681242d084a2fbe090e20-text/javascript"></script>
<script type="e99681242d084a2fbe090e20-text/javascript">
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-TMK183GM24');
</script>
</head>
<body>
<div id="splash">
<img src="https://www.pescadogames.com/assets/icons/PGBlueLogo-toumei.png" class="LoadingLogo">
<div id="splash_text"></div>
<div class="loader_cover"></div><!--上に上がるエリア-->
<!--/splash--></div>
<div class="topimage">
<h1 class="topimageh1">あなたが主役、<br>UbuntuベースのLinux</h1>
<div class="scrolldown1"><span>>></span></div>
</div>
<!--Header-->
<header class="header" id="header">
<div class="header_inner">
<button class="header_title">
<img src="assets/image/PescadolinuxLogo.png">
</button>
<nav class="header_nav nav" id="js-nav">
<ul class="nav_items nav-items">
<li class="nav-items_item"><a href="">ホーム</a></li>
<li class="nav-items_item"><a href="about.html">概要</a></li>
<li class="nav-items_item"><a href="news.html">お知らせ</a></li>
</ul>
</nav>
<button class="header_hamburger hamburger" id="js-hamburger">
<span></span>
<span></span>
<span></span>
</button>
</div>
</header>
<div id="container">
<section id="SaikounoDesign">
<h2 class="fadeLeftTrigger">あなたのために、<br>最高のデザインを<br>ご用意いたしました</h2>
<div class="SaikounoDesign">
<div class="left fadeRightTrigger Logo-img"></div>
<h4 class="subtextright fadeLeftTrigger">Ubuntu(KDE Plasma)をベースにすることによって、<br>最高のデザインをご提供いたします。</h4>
</div>
</section>
<section id="LinuxNoKakutyousei">
<h2 class="fadeLeftTrigger">Linuxの拡張性を、<br>あなたに</h2>
<div class="LinuxNoKakutyousei">
<div class="left fadeRightTrigger PlLogo-img"></div>
<h4 class="subtextright fadeLeftTrigger">Linuxの特徴である、オープンソースの力によって、<br>数多くのアプリや拡張機能が利用できます。</h4>
</div>
</section>
<section id="JapaneseForYou">
<h2 class="fadeLeftTrigger">日本語を、あなたに</h2>
<div class="JapaneseForYou">
<div class="left fadeRightTrigger Lang-img"></div>
<h4 class="JapaneseForYousubtextright fadeLeftTrigger">デフォルトで日本語Remixを使用していますので、<br>最初から日本語の環境で使うことができます。</h4>
</div>
</section>
<section id="LinuxNoKakutyousei">
<h2 class="fadeLeftTrigger">KDE Connectで<br>あなたのスマホと接続して<br>データを転送</h2>
<div class="LinuxNoKakutyousei">
<div class="left fadeRightTrigger KDEConnectLogo-img"></div>
<h4 class="subtextright fadeLeftTrigger">KDE Connectを使えば、あなたのスマホから<br>大事な写真やデータなどを転送できます。<br>公式サイトは<a href="https://kdeconnect.kde.org/">こちら</a>(英語)</h4>
</div>
</section>
<section id="SpecSeet">
<h2 class="fadeLeftTrigger maintext">あなたのパソコンにピッタリか確認しましょう</h2>
<div class="SpecSeet">
<table>
<tr><!-- 行1（見出し）-->
<th></th><th>おすすめ</th> <th>最低</th>
</tr>
<tr><!-- 行2 -->
<th>CPU</th> <td>3GHzデュアルコアプロセッサ</td> <td>2GHzデュアルコアプロセッサ</td>
</tr>
<tr><!-- 行3 -->
<th>GPU</th> <td>ノートパソコンの比率以上</td> <td>1024×768解像度を持つVGA(GPU自体は制限なし)</td>
</tr>
<tr><!-- 行4 -->
<th>MEM</th> <td>8GB</td> <td>4GB（システム）</td>
</tr>
<tr>
<th>HDD|SSD</th> <td>30GB以上の空き容量</td> <td>25GB以上の空き容量</td>
</tr>
<tr>
<th>Internet</th> <td>あった方が幸せになれる</td> <td>ないと辛いよ</td>
</tr>
</table>
<h2 class="dousakakuninzumi">動作確認済みのパソコンについては<br>Canonical公式サイトに<br>認定ハードウェア(動作検証済み)のリストがございます<br>そちらをご確認ください<br><a href="https://ubuntu.com/certified?q=&limit=20&category=Desktop&category=Laptop">アクセスはこちらから(英語)</a></h2>
</div>
</section>
<section id="Download">
<h2 class="fadeLeftTrigger maintext">さぁ！美しいデザインを手に入れましょう！</h2>
<div class="Download">
<button onclick="location.href='https://www.pescadogames.com/download/thankyou.html?Pescadolinux'">現在準備中！もうしばらくお待ちください！</button>
</div>
</section>
<!--/container-->
</div>
<!--コンテンツ本体終わり-->
<div id="footer">
<footer id="copyright">
<small>© PescadoGames All right reserved.<br>Ubuntu,Kubuntu is a trademark of Canonical Ltd.<br>KDE® and <a href="https://kde.org/media/images/trademark_kde_gear_black_logo.png">the K Desktop Environment® logo</a> are registered trademarks of <a href="https://ev.kde.org/">KDE e.V.</a></small>
</footer>
<footer id="URL">
<ul class="footer-link">
<li><a href="#">ホーム</a></li>
<li><a href="about">概要</a></li>
<li><a href="news">お知らせ</a></li>
</ul>
<ul class="footer-link">
<li><a href="https://twitter.com/PescadoGames">Twitter(PG)</a></li>
<li><a href="https://twitter.com/PescadoGamesBOT">Twitter(PGBOT)</a></li>
<li><a href="https://discord.gg/9HC3wWQSTV"><span>Discord(PG)</span></a></li>
<li><a href="https://discord.gg/Q6nzpQbQRa"><span>Discord(PGBOT)</span></a></li>
</ul>
</footer>
</div>
<!--▽▽jQuery▽▽-->
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/master/dist/progressbar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.4.4/vegas.min.js"></script>
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<!-- Start of HubSpot Embed Code -->
<script type="text/javascript" id="hs-script-loader" async defer src="//js-na1.hs-scripts.com/22826523.js"></script>
<!-- End of HubSpot Embed Code -->
<script src="assets/js/allpage.js"></script>
<script src="assets/js/indexjs.js"></script>
<script>
const ham = $('#js-hamburger');
const nav = $('#js-nav');
ham.on('click', function () { //ハンバーガーメニューをクリックしたら
ham.toggleClass('active'); // ハンバーガーメニューにactiveクラスを付け外し
nav.toggleClass('active'); // ナビゲーションメニューにactiveクラスを付け外し
});
</script>
<script>
// 動きのきっかけとなるアニメーションの名前を定義
function ScrollAnime() {
$('#container').each(function () {
var elemPos = $(this).offset().top - 50;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll >= elemPos - windowHeight) {
$('#header').addClass('headerShadow');
} else {
$('#header').removeClass('headerShadow');
}
});
}
// 画面をスクロールをしたら動かしたい場合の記述
$(window).on('scroll', function(){
ScrollAnime();// スクロールした時にヘッダーに影をつける
});
// ページが読み込まれたらすぐに動かしたい場合の記述
$(window).on('load', function(){
ScrollAnime();// スクロールした時にヘッダーに影をつける
});
</script>
<script>
//線が伸びるための設定を関数でまとめる
function ScrollTimelineAnime(){
$('.timeline li').each(function(){// それぞれのli要素の
var elemPos = $(this).offset().top;// 上からの高さ取得
var scroll = $(window).scrollTop();// スクロール値取得
var windowHeight = $(window).height();// windowの高さ取得
var startPoint = 700; //線をスタートさせる位置を指定※レイアウトによって調整してください
if (scroll >= elemPos - windowHeight-startPoint){
var H = $(this).outerHeight(true)//liの余白と高さを含めた数値を取得
//スクロール値から要素までの高さを引いた値を、liの高さの半分のパーセントで出す
var percent = (scroll+startPoint - elemPos) / (H/2) *100;//liの余白と高さの半分で線を100％に伸ばす
// 100% を超えたらずっと100%を入れ続ける
if(percent > 100){
percent = 100;
}
// ボーダーの長さをセット
$(this).children('.border-line').css({
height: percent + "%", //CSSでパーセント指定
});
}
});
}
//線が伸びるための設定を関数でまとめる
function SPScrollTimelineAnime(){
$('.timeline-sp li').each(function(){// それぞれのli要素の
var elemPos = $(this).offset().top;// 上からの高さ取得
var scroll = $(window).scrollTop();// スクロール値取得
var windowHeight = $(window).height();// windowの高さ取得
var startPoint = 600; //線をスタートさせる位置を指定※レイアウトによって調整してください
if (scroll >= elemPos - windowHeight-startPoint){
var H = $(this).outerHeight(true)//liの余白と高さを含めた数値を取得
//スクロール値から要素までの高さを引いた値を、liの高さの半分のパーセントで出す
var percent = (scroll+startPoint - elemPos) / (H/2) *100;//liの余白と高さの半分で線を100％に伸ばす
// 100% を超えたらずっと100%を入れ続ける
if(percent > 100){
percent = 100;
}
// ボーダーの長さをセット
$(this).children('.border-line').css({
height: percent + "%", //CSSでパーセント指定
});
}
});
}
// 画面をスクロールをしたら動かしたい場合の記述
$(window).on('scroll', function(){
SPScrollTimelineAnime();// 線が伸びる関数を呼ぶ
ScrollTimelineAnime();// 線が伸びる関数を呼ぶ
});
// ページが読み込まれたらすぐに動かしたい場合の記述
$(window).on('load', function(){
SPScrollTimelineAnime();// 線が伸びる関数を呼ぶ
ScrollTimelineAnime();// 線が伸びる関数を呼ぶ
});
</script>
<script>
$('#contact').on('click', function() {
if ($('.contact').hasClass('contactdeactive')) {
$('.contact').removeClass("contactdeactive");
} else {
$('.contact').addClass("contactdeactive");
}
});
//任意のタブにURLからリンクするための設定
function GethashID (hashIDName){
if(hashIDName){
//タブ設定
$('.tab li').find('a').each(function() { //タブ内のaタグ全てを取得
var idName = $(this).attr('href'); //タブ内のaタグのリンク名（例）#lunchの値を取得
if(idName == hashIDName){ //リンク元の指定されたURLのハッシュタグ（例）http://example.com/#lunch←この#の値とタブ内のリンク名（例）#lunchが同じかをチェック
var parentElm = $(this).parent(); //タブ内のaタグの親要素（li）を取得
$('.tab li').removeClass("active"); //タブ内のliについているactiveクラスを取り除き
$(parentElm).addClass("active"); //リンク元の指定されたURLのハッシュタグとタブ内のリンク名が同じであれば、liにactiveクラスを追加
//表示させるエリア設定
$(".area").removeClass("is-active"); //もともとついているis-activeクラスを取り除き
$(hashIDName).addClass("is-active"); //表示させたいエリアのタブリンク名をクリックしたら、表示エリアにis-activeクラスを追加
}
});
}
}
//タブをクリックしたら
$('.tab a').on('click', function() {
var idName = $(this).attr('href'); //タブ内のリンク名を取得
GethashID (idName);//設定したタブの読み込みと
return false;//aタグを無効にする
});
// 上記の動きをページが読み込まれたらすぐに動かす
$(window).on('load', function () {
$('.tab li:first-of-type').addClass("active"); //最初のliにactiveクラスを追加
$('.area:first-of-type').addClass("is-active"); //最初の.areaにis-activeクラスを追加
var hashName = location.hash; //リンク元の指定されたURLのハッシュタグを取得
GethashID (hashName);//設定したタブの読み込み
});
</script>
<!--△△jQuery△△-->
<script data-cfasync="false" src="https://www.pescadogames.com/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
</body>
</html>