学校別・専用販売ページ入口 – 唐津月星販売公式サイト

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>学校指定用品購入サイト</title>
<link href=”https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap” rel=”stylesheet”>
<style>
:root {
–primary-blue: #2563eb;
–yahoo-orange: #ff6600;
–error-red: #dc2626;
–bg-gray: #f1f5f9;
–text-main: #1e293b;
–text-sub: #475569;
–white: #ffffff;
}

* {
box-sizing: border-box;
margin: 0;
padding: 0;
-webkit-tap-highlight-color: transparent;
}

body {
font-family: ‘Noto Sans JP’, sans-serif;
background-color: var(–bg-gray);
color: var(–text-main);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 10px;
}

.main-card {
background: var(–white);
width: 100%;
max-width: 420px;
border-radius: 20px;
box-shadow: 0 10px 25px rgba(0,0,0,0.05);
padding: 20px;
display: flex;
flex-direction: column;
gap: 15px;
}

header {
text-align: center;
border-bottom: 2px solid var(–bg-gray);
padding-bottom: 12px;
}

header h1 {
font-size: 1.2rem;
font-weight: 700;
color: var(–primary-blue);
}

/* アクションエリア */
.action-container {
min-height: 120px;
display: flex;
flex-direction: column;
justify-content: center;
}

.pass-instruction {
font-size: 0.85rem;
color: var(–text-sub);
text-align: center;
margin-bottom: 8px;
font-weight: 500;
}

input[type=”password”] {
width: 100%;
padding: 14px;
font-size: 16px;
border: 2px solid #e2e8f0;
border-radius: 10px;
outline: none;
text-align: center;
}

input[type=”password”]:focus {
border-color: var(–primary-blue);
}

.btn {
display: block;
width: 100%;
padding: 16px;
font-size: 1rem;
font-weight: 700;
text-align: center;
text-decoration: none;
border-radius: 10px;
border: none;
cursor: pointer;
margin-top: 10px;
}

.btn-blue { background-color: var(–primary-blue); color: white; }
.btn-orange {
background-color: var(–yahoo-orange);
color: white;
box-shadow: 0 4px 12px rgba(255, 102, 0, 0.3);
}

#error-msg {
color: var(–error-red);
font-size: 0.8rem;
text-align: center;
margin-top: 6px;
font-weight: 500;
height: 1.2em;
}

.back-link {
display: block;
text-align: center;
font-size: 0.8rem;
color: var(–text-sub);
margin-top: 12px;
text-decoration: underline;
cursor: pointer;
}

/* 注意点 */
.notes-area {
background-color: #f8fafc;
padding: 12px;
border-radius: 10px;
font-size: 0.75rem;
color: var(–text-sub);
}

.notes-area li {
list-style: none;
position: relative;
padding-left: 12px;
margin-bottom: 4px;
line-height: 1.4;
}

.notes-area li::before {
content: “・”;
position: absolute;
left: 0;
}

/* お問い合わせ */
footer {
border-top: 1px solid #f1f5f9;
padding-top: 12px;
font-size: 0.75rem;
}

.footer-title { font-weight: 700; margin-bottom: 4px; }
.contact-details { color: var(–text-sub); line-height: 1.5; }

.external-contact {
margin-top: 10px;
background: #fff9f5;
border: 1px solid #ffe8d9;
padding: 8px;
border-radius: 6px;
text-align: center;
}

.external-link {
color: var(–yahoo-orange);
text-decoration: none;
font-weight: 700;
display: inline-block;
}

.external-link::after {
content: ” ＞”;
font-size: 0.7rem;
}

.hidden { display: none !important; }
.fade-in { animation: fadeIn 0.4s ease forwards; }

@keyframes fadeIn {
from { opacity: 0; transform: translateY(5px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body>

<div class=”main-card”>
<header>
<h1>学校指定用品購入サイト</h1>
</header>

<div class=”action-container”>
<div id=”auth-area”>
<!– 追加：パスワード入力の案内 –>
<div class=”pass-instruction”>パスワードは学校配布のパスワードをご入力ください</div>

<input type=”password” id=”passInput” placeholder=”パスワードを入力”>
<div id=”error-msg”></div>
<button class=”btn btn-blue” onclick=”validate()”>認証して購入ページを表示</button>
</div>

<div id=”success-area” class=”hidden”>
<!– JSでhref属性を動的に書き換えます –>
<a href=”#” id=”purchase-link” target=”_blank” class=”btn btn-orange”>
Yahoo!ショッピングで購入する
</a>
<span class=”back-link” onclick=”resetView()”>パスワード入力に戻る</span>
</div>
</div>

<section class=”notes-area”>
<ul>
<li>パスワードは学校配布の案内をご確認ください。</li>
<li>購入にはYahoo! JAPAN IDが必要な場合があります。</li>
<li>ショップへの連絡は下記リンクをご利用ください。</li>
<li>操作不明点は唐津月星販売までご連絡ください。</li>
</ul>
</section>

<footer>
<div class=”footer-title”>唐津月星販売株式会社</div>
<div class=”contact-details”>
佐賀県唐津市十人町88-2<br>
TEL：0955-72-6265 (8:00～17:00)
</div>

<div class=”external-contact”>
<a href=”https://login.yahoo.co.jp/config/login?.src=shp&.done=https%3A%2F%2Ftalk.shopping.yahoo.co.jp%2Fcontact%2Fkyuta-shop” target=”_blank” class=”external-link”>
Yahoo!店へのお問い合わせはこちら
</a>
</div>
</footer>
</div>

const passInput = document.getElementById(‘passInput’);
const authArea = document.getElementById(‘auth-area’);
const successArea = document.getElementById(‘success-area’);
const errorMsg = document.getElementById(‘error-msg’);
const purchaseLink = document.getElementById(‘purchase-link’); // 移動先リンクの要素

function validate() {
const enteredPass = passInput.value;

// 入力されたパスワードが設定リストに存在するか判定
if (schoolLinks[enteredPass]) {
// 存在する場合：エラーを消し、リンクを書き換えてボタンを表示
errorMsg.textContent = “”;
purchaseLink.href = schoolLinks[enteredPass]; // 入力されたパスワードに応じたURLをセット

authArea.classList.add(‘hidden’);
successArea.classList.remove(‘hidden’);
successArea.classList.add(‘fade-in’);
} else {
// 存在しない場合：エラー表示
errorMsg.textContent = “パスワードが正しくありません”;
passInput.style.borderColor = “var(–error-red)”;
}
}

function resetView() {
successArea.classList.add(‘hidden’);
authArea.classList.remove(‘hidden’);
authArea.classList.add(‘fade-in’);
passInput.value = “”;
passInput.style.borderColor = “#e2e8f0”;
purchaseLink.href = “#”; // リンクをリセット
}

passInput.addEventListener(‘keypress’, (e) => {
if (e.key === ‘Enter’) validate();
});
</script>

</body>
</html>