diff --git a/testpage/css/main.css b/testpage/css/main.css new file mode 100644 index 0000000..2bda9e4 --- /dev/null +++ b/testpage/css/main.css @@ -0,0 +1,130 @@ +body{ + margin: 0; + padding: 0; +} +h1{ + font-size: x-large; + margin:5px; +} +h2{ + font-size:large; + margin: 5px; +} +p{ + font-size: small; + margin: 2px; +} + +#main{ + margin: 0 0 30px 0; +} + +.scroll-stop{ + overflow-y:hidden; +} + +/*フッター*/ +footer{ + background-color: #313131; + margin: 0; + padding:8px 10px; +} +footer p{ + text-align: center; + color: #f4f4f4; +} + +/* メインボックス */ + +.section{ + text-align:center; + width:44%; + min-height: 150px; + margin:2%; + display:inline-block; + background-color:darksalmon; + border-radius: 5px; + position: relative; +} + +.section_contents{ + position: absolute; + width: 100%; +} + +.section_contents p{ + margin: 2px; +} + +/* ポップアップ */ + + +.popup { + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + z-index: 9999; + opacity: 0; + visibility: hidden; + transition: .6s; + overflow-y: scroll; + overflow-x:hidden; + } + .is-show { + opacity: 1; + visibility: visible; + } + .popup-inner { + position: absolute; + left: 50%; + top: 0; + transform: translate(-50%,0); + width: 90%; + max-width: 600px; + padding: 20px; + background-color: #fff; + z-index: 2; + } + .popup-inner img { + width: 100%; + } + .close-btn { + position: absolute; + right: 0; + top: 0; + width: 50px; + height: 50px; + line-height: 50px; + text-align: center; + cursor: pointer; + } + .close-btn i { + font-size: 20px; + color: #333; + } + .black-background { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: rgba(0,0,0,.8); + z-index: 1; + cursor: pointer; + } + + #attractivepoint{ + margin: 1%; + } + + .inview{ + width:49%; + display: inline-block; + vertical-align:top; + } + + .plusinf{ + width: 100%; + } \ No newline at end of file diff --git a/testpage/css/slider.css b/testpage/css/slider.css new file mode 100644 index 0000000..0e9008f --- /dev/null +++ b/testpage/css/slider.css @@ -0,0 +1,81 @@ +/*================================================== +スライダーのためのcss +===================================*/ +.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/ + width:94%; + margin:0 auto; + } + + .slider img { + width:100%;/*スライダー内の画像を横幅100%に*/ + height:auto; + } + + /*slickのJSで書かれるタグ内、スライド左右の余白調整*/ + + .slider .slick-slide { + margin:0 10px; +} +.slick-slider{ + padding: 0 5px; +} + + /*矢印の設定*/ + + /*戻る、次へ矢印の位置*/ + .slick-prev, + .slick-next { + position: absolute;/*絶対配置にする*/ + top: 42%; + cursor: pointer;/*マウスカーソルを指マークに*/ + outline: none;/*クリックをしたら出てくる枠線を消す*/ + border-top: 2px solid #666;/*矢印の色*/ + border-right: 2px solid #666;/*矢印の色*/ + height: 15px; + width: 15px; + } + + .slick-prev {/*戻る矢印の位置と形状*/ + left: -1.5%; + transform: rotate(-135deg); + } + + .slick-next {/*次へ矢印の位置と形状*/ + right: -1.5%; + transform: rotate(45deg); + } + + /*ドットナビゲーションの設定*/ + + .slick-dots { + text-align:center; + margin:10px 0 0 0; + padding:0; + } + + .slick-dots li { + display:inline-block; + margin:0 5px; + } + + .slick-dots button { + color: transparent; + outline: none; + width:8px;/*ドットボタンのサイズ*/ + height:8px;/*ドットボタンのサイズ*/ + display:block; + border-radius:50%; + background:#ccc;/*ドットボタンの色*/ + } + + .slick-dots .slick-active button{ + background:#333;/*ドットボタンの現在地表示の色*/ + } + + + + .slider img{ + width:100%; + height:200px; + object-fit:cover; + } diff --git a/testpage/img/IMG_4765_srcnn_photo_noise0.png b/testpage/img/IMG_4765_srcnn_photo_noise0.png new file mode 100644 index 0000000..b572a0a --- /dev/null +++ b/testpage/img/IMG_4765_srcnn_photo_noise0.png Binary files differ diff --git a/testpage/img/README.md b/testpage/img/README.md new file mode 100644 index 0000000..a7af483 --- /dev/null +++ b/testpage/img/README.md @@ -0,0 +1,2 @@ +画像置き場 +================ diff --git a/testpage/img/choukaisansou.jpg b/testpage/img/choukaisansou.jpg new file mode 100644 index 0000000..f956229 --- /dev/null +++ b/testpage/img/choukaisansou.jpg Binary files differ diff --git a/testpage/img/dewa1.jpg b/testpage/img/dewa1.jpg new file mode 100644 index 0000000..05ead81 --- /dev/null +++ b/testpage/img/dewa1.jpg Binary files differ diff --git a/testpage/img/dewa1mini.jpg b/testpage/img/dewa1mini.jpg new file mode 100644 index 0000000..6c0d3e6 --- /dev/null +++ b/testpage/img/dewa1mini.jpg Binary files differ diff --git a/testpage/img/dewa2.jpg b/testpage/img/dewa2.jpg new file mode 100644 index 0000000..4480a0b --- /dev/null +++ b/testpage/img/dewa2.jpg Binary files differ diff --git a/testpage/img/dewa2mini.jpg b/testpage/img/dewa2mini.jpg new file mode 100644 index 0000000..74e08eb --- /dev/null +++ b/testpage/img/dewa2mini.jpg Binary files differ diff --git a/testpage/img/dewa3.jpg b/testpage/img/dewa3.jpg new file mode 100644 index 0000000..a7a3603 --- /dev/null +++ b/testpage/img/dewa3.jpg Binary files differ diff --git a/testpage/img/dewa3mini.jpg b/testpage/img/dewa3mini.jpg new file mode 100644 index 0000000..80dba1c --- /dev/null +++ b/testpage/img/dewa3mini.jpg Binary files differ diff --git a/testpage/img/errer.jpg b/testpage/img/errer.jpg new file mode 100644 index 0000000..bfabfe3 --- /dev/null +++ b/testpage/img/errer.jpg Binary files differ diff --git a/testpage/img/kinowa1.jpeg b/testpage/img/kinowa1.jpeg new file mode 100644 index 0000000..4f33cdd --- /dev/null +++ b/testpage/img/kinowa1.jpeg Binary files differ diff --git a/testpage/img/kinowa2.jpeg b/testpage/img/kinowa2.jpeg new file mode 100644 index 0000000..0dc6911 --- /dev/null +++ b/testpage/img/kinowa2.jpeg Binary files differ diff --git a/testpage/img/kinowa3.jpeg b/testpage/img/kinowa3.jpeg new file mode 100644 index 0000000..8f506e5 --- /dev/null +++ b/testpage/img/kinowa3.jpeg Binary files differ diff --git a/testpage/img/nansyu1.jpg b/testpage/img/nansyu1.jpg new file mode 100644 index 0000000..fde6600 --- /dev/null +++ b/testpage/img/nansyu1.jpg Binary files differ diff --git a/testpage/img/nansyu1mini.jpg b/testpage/img/nansyu1mini.jpg new file mode 100644 index 0000000..41e2dc4 --- /dev/null +++ b/testpage/img/nansyu1mini.jpg Binary files differ diff --git a/testpage/img/nansyu2.jpg b/testpage/img/nansyu2.jpg new file mode 100644 index 0000000..ef6d27e --- /dev/null +++ b/testpage/img/nansyu2.jpg Binary files differ diff --git a/testpage/img/nansyu2mini.jpg b/testpage/img/nansyu2mini.jpg new file mode 100644 index 0000000..ac42064 --- /dev/null +++ b/testpage/img/nansyu2mini.jpg Binary files differ diff --git a/testpage/img/nansyu3.jpg b/testpage/img/nansyu3.jpg new file mode 100644 index 0000000..fc5b6aa --- /dev/null +++ b/testpage/img/nansyu3.jpg Binary files differ diff --git a/testpage/img/nansyu3mini.jpg b/testpage/img/nansyu3mini.jpg new file mode 100644 index 0000000..f760848 --- /dev/null +++ b/testpage/img/nansyu3mini.jpg Binary files differ diff --git a/testpage/img/otaru_map.png b/testpage/img/otaru_map.png new file mode 100644 index 0000000..f22a81f --- /dev/null +++ b/testpage/img/otaru_map.png Binary files differ diff --git a/testpage/img/otaru_map_tenguyama.png b/testpage/img/otaru_map_tenguyama.png new file mode 100644 index 0000000..a4d7d14 --- /dev/null +++ b/testpage/img/otaru_map_tenguyama.png Binary files differ diff --git a/testpage/img/sample.jpg b/testpage/img/sample.jpg new file mode 100644 index 0000000..6ab0f47 --- /dev/null +++ b/testpage/img/sample.jpg Binary files differ diff --git a/testpage/img/sugonoike.jpg b/testpage/img/sugonoike.jpg new file mode 100644 index 0000000..9630ec7 --- /dev/null +++ b/testpage/img/sugonoike.jpg Binary files differ diff --git a/testpage/img/taki1.jpeg b/testpage/img/taki1.jpeg new file mode 100644 index 0000000..fe4eec1 --- /dev/null +++ b/testpage/img/taki1.jpeg Binary files differ diff --git a/testpage/img/taki2.jpeg b/testpage/img/taki2.jpeg new file mode 100644 index 0000000..0a78732 --- /dev/null +++ b/testpage/img/taki2.jpeg Binary files differ diff --git a/testpage/img/taki3.jpeg b/testpage/img/taki3.jpeg new file mode 100644 index 0000000..be5f7b4 --- /dev/null +++ b/testpage/img/taki3.jpeg Binary files differ diff --git a/testpage/img/taki4.jpeg b/testpage/img/taki4.jpeg new file mode 100644 index 0000000..ca56d23 --- /dev/null +++ b/testpage/img/taki4.jpeg Binary files differ diff --git a/testpage/img/tenguyama1.png b/testpage/img/tenguyama1.png new file mode 100644 index 0000000..f7dce39 --- /dev/null +++ b/testpage/img/tenguyama1.png Binary files differ diff --git a/testpage/img/tenguyama2.png b/testpage/img/tenguyama2.png new file mode 100644 index 0000000..bf8878a --- /dev/null +++ b/testpage/img/tenguyama2.png Binary files differ diff --git a/testpage/img/tenguyama3.png b/testpage/img/tenguyama3.png new file mode 100644 index 0000000..c279692 --- /dev/null +++ b/testpage/img/tenguyama3.png Binary files differ diff --git a/testpage/js/addcontents.js b/testpage/js/addcontents.js new file mode 100644 index 0000000..e9e6d2d --- /dev/null +++ b/testpage/js/addcontents.js @@ -0,0 +1,136 @@ + +var allcontents = []; + + +function addcontents(){ + var contents_json_url = "https://script.google.com/macros/s/AKfycbz1rZR-F4QZmZJGqPKr2OacV_HQ_-TqJS2R1wRtOIXjU5DI3i49Wuf3SRhj8Hxn8AazZw/exec" + + //APIを使って非同期データを取得する + fetch(contents_json_url) + .then(response => response.json()) + /*成功した処理*/ + .then(data => { + //JSONから配列に変換 + allcontents = data; + addcontent(allcontents); + imagepreload(allcontents); + console.log("データ取得" + allcontents); + }); + + +} + + +/*function putcontent(csv_text){ //key,valueを設定 + console.log("コンテンツ変更を開始"); + for(var n=0; n'); + document.getElementById(i).innerHTML = "

" + list[i]["title"] + "

" + list[i]["introduction1"] + "

"; + + console.log("紹介BOX追加"); + } + } + + popupImage(); + +} + +function popupImage() { + console.log("スタート"); + + var popup = document.getElementById('main'); + let js_popup = document.getElementById('js-popup'); + var body = document.body; + if(!popup) return; + + let blackBg = popup.querySelector('.js-black-bg'); + let closeBtn = popup.querySelector('.js-close-btn'); + //let showBtn = popup.querySelector('.js-show-popup'); + + closePopUp(blackBg); + closePopUp(closeBtn); + //closePopUp(showBtn); + + var section = popup.querySelectorAll('.js-show-popup'); + for(sec of section){ + closePopUp(sec); + chenge(sec); + } + + function closePopUp(elem) {//上の要素のどれかをクリックしたら表示もしくは非表示 + if(!elem) return; + elem.addEventListener('click', function() { + body.classList.toggle('scroll-stop'); + js_popup.classList.toggle('is-show'); + }); + } +} + + +function chenge(e){ + e.addEventListener('click', function(){ + + var contentslist = allcontents[e.id]; + console.log(contentslist); + var contentskeys = Object.keys(contentslist); + + for(var i=0; i',//矢印部分PreviewのHTMLを変更 + nextArrow: '
',//矢印部分NextのHTMLを変更 + dots: true,//下部ドットナビゲーションの表示 + responsive: [ + /*{ + breakpoint: 849,//モニターの横幅が849px以下の見せ方 + settings: { + slidesToShow: 1,//スライドを画面に1枚見せる + slidesToScroll: 1,//1回のスクロールで1枚の写真を移動して見せる + } + }*/ + ] + }); +} +slider(); \ No newline at end of file diff --git a/testpage/js/topcontents.js b/testpage/js/topcontents.js new file mode 100644 index 0000000..a660b09 --- /dev/null +++ b/testpage/js/topcontents.js @@ -0,0 +1,51 @@ + +var topcontent = []; + + +function topcontents(){ + var contents_json_url = "https://script.google.com/macros/s/AKfycbx77xP4__a6eEGf4COKo6tQOEKVrtFeEJEQoQ1alFoAZmELAuZJbiB_xABgXCir85lG_g/exec" + + //APIを使って非同期データを取得する + fetch(contents_json_url) + .then(response => response.json()) + /*成功した処理*/ + .then(data => { + //JSONから配列に変換 + topcontent = data; + topchenge(topcontent); + console.log("データ取得" + topcontent); + }); + + +} + + +function topchenge(contents){ + + var contentslist = contents[0]; + var contentskeys = Object.keys(contentslist); + + for(var i=0; i + + + + + + +all + + + + + + + + + +
+
+ +

サンプルテキスト

+ +
+

魅力

+

サンプルテキスト

+
+ +
+

歴史

+

サンプルテキスト

+
+ +
+

所在地

+

サンプルテキスト

+
+ +
+

アクセス

+

サンプルテキスト

+
+ +
+

営業時間

+

サンプルテキスト

+
+ +
+

休館日

+

サンプルテキスト

+
+ +
+
+ + + +
+ + + + + +
+ + + + + + +
+

Copyright (C) ?????? All Rights Reserved.

+
+ + + + + + + + + + + + + \ No newline at end of file