Nishinoya/nishinoya.html
2023-06-15 21:44:45 +09:00

243 lines
6.2 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>二四家(にしのや)</title>
<style>
body {
font-family: "Helvetica Neue", Arial, sans-serif;
background-color: #f2f2f2;
margin: 0;
padding: 0;
}
header {
background-color: orange;
padding: 10px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
#logo-container {
display: flex;
align-items: center;
}
#logo {
margin-bottom: 5px;
}
h2 {
margin: 0;
font-size: 36px;
color: #333;
}
/* トグルボタンのスタイル */
.menu-toggle {
display: none;
}
.menu-toggle-label {
display: block;
cursor: pointer;
padding: 10px;
color: #fff;
font-size: 24px;
}
/* メニューのスタイル */
.menu {
display: none;
position: absolute;
top: 100%;
right: 0;
background-color: #f26522;
padding: 0;
list-style-type: none;
text-align: right;
}
.menu li {
margin-top: 10px;
}
.menu li a {
display: block;
padding: 10px;
color: #fff;
text-decoration: none;
transition: background-color 0.3s ease;
}
.menu li a:hover {
background-color: #e1561c;
}
#content {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
h2 {
margin: 0 0 20px;
font-size: 24px;
color: #333;
}
p {
margin-bottom: 20px;
font-size: 16px;
line-height: 1.5;
color: #555;
}
.product {
display: grid;
grid-template-columns: 1fr 2fr;
grid-gap: 20px;
margin-bottom: 20px;
}
.product img {
width: 100%;
max-width: 400px;
border-radius: 5px;
}
.product h3 {
margin: 0;
font-size: 24px;
color: #333;
}
footer {
background-color: #333;
padding: 20px;
text-align: center;
color: #fff;
}
</style>
</head>
<body>
<header>
<div id="logo-container">
<img id="logo" src="1686296908880.jpg" alt="二四家ロゴ" width="200px">
<h2> </h2>
</div>
<input type="checkbox" id="menu-toggle" class="menu-toggle">
<label for="menu-toggle" class="menu-toggle-label">&#9776;</label>
<nav>
<ul id="menu" class="menu">
<li><a href="menu_details.html">メニューの詳細</a></li>
<li><a href="specialty.html">御来店の際のご注意</a></li>
<li><a href="class.html">2年4組について</a></li>
<li><a href="photo_booth.html">フォトブース</a></li>
</ul>
</nav>
</header>
<img id="top-image" src="1686401596506.jpg" alt="トップページ画像" width="100%" style="display: block; margin: 20px auto;">
<div id="content">
<h2>販売商品</h2>
<div class="product">
<img src="168648729145000000.jpg" alt="極限豚丼">
<div>
<h3>極限豚丼 300円</h3>
<p>濃厚な味わいが特徴の極限豚丼です。</p>
</div>
</div>
<div class="product">
<img src="168648729942700000.jpg" alt="みたらし団子">
<div>
<h3>みたらし団子 100円</h3>
<p>優しい甘さが魅力のみたらし団子です。</p>
</div>
</div>
<h2>キャッチコピー - 邦を開く味わい</h2>
<p>「開邦雄飛」 開邦高校の校訓であるこの言葉のよう、邦を開き世界へ羽ばたく私たちの志を表現しています。</p>
</div>
<p>アクセスカウンター: <span id="counter">0</span></p>
<p>累計アクセス数: <span id="total-counter">0</span></p>
<script>
 document.addEventListener('DOMContentLoaded', function() {
const menuToggle = document.getElementById('menu-toggle');
const menu = document.getElementById('menu');
menuToggle.addEventListener('change', function() {
if (menuToggle.checked) {
menu.style.display = 'block';
} else {
menu.style.display = 'none';
}
});
});
// ロゴマークをクリックしたときにホームに戻るイベントを追加
const logoElement = document.getElementById("logo");
logoElement.addEventListener("click", function() {
window.location.href = "nishinoya.html";
});
// アクセスカウンターのプログラム
let counter = 0;
const counterElement = document.getElementById("counter");
const totalCounterElement = document.getElementById("total-counter");
function incrementCounter() {
counter++;
counterElement.textContent = counter;
// ブラウザのローカルストレージにカウンターの値を保存
localStorage.setItem("accessCounter", counter);
}
// ページが読み込まれた時にカウンターを初期化
window.addEventListener("load", function() {
// ローカルストレージからカウンターの値を取得
const storedCounter = localStorage.getItem("accessCounter");
if (storedCounter) {
counter = parseInt(storedCounter);
counterElement.textContent = counter;
}
});
// ウィンドウが閉じられる時に累計アクセス数を更新
window.addEventListener("beforeunload", function() {
// ブラウザのローカルストレージから累計アクセス数を取得
const storedTotalCounter = localStorage.getItem("totalAccessCounter");
let totalCounter = 0;
if (storedTotalCounter) {
totalCounter = parseInt(storedTotalCounter);
}
totalCounter += counter;
totalCounterElement.textContent = totalCounter;
// 更新した累計アクセス数をブラウザのローカルストレージに保存
localStorage.setItem("totalAccessCounter", totalCounter);
});
</script>
<footer>
&copy; 2023 二四家 All rights reserved.
</footer>
</body>
</html>