From b46963b01ff03b5b7ba46690caf63f4f844b9ba2 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Mon, 16 Feb 2026 09:34:49 +0000 Subject: [PATCH] feat: add Toyotomi Hideyoshi self-introduction landing page - Added `public/index.html` with responsive layout - Added `public/css/style.css` with Japanese modern theme - Added `public/js/script.js` for scroll animations Co-authored-by: muumuu8181 <87556753+muumuu8181@users.noreply.github.com> --- public/css/style.css | 343 +++++++++++++++++++++++++++++++++++++++++++ public/index.html | 119 +++++++++++++++ public/js/script.js | 49 +++++++ 3 files changed, 511 insertions(+) create mode 100644 public/css/style.css create mode 100644 public/index.html create mode 100644 public/js/script.js diff --git a/public/css/style.css b/public/css/style.css new file mode 100644 index 0000000..0ce6939 --- /dev/null +++ b/public/css/style.css @@ -0,0 +1,343 @@ +:root { + --gold: #d4af37; + --dark-gold: #b8860b; + --black: #111; + --dark-gray: #222; + --white: #f5f5f5; + --red: #8b0000; +} + +body { + margin: 0; + padding: 0; + font-family: 'Shippori Mincho', 'Noto Serif JP', serif; + background-color: var(--black); + color: var(--white); + line-height: 1.8; +} + +a { + text-decoration: none; + color: inherit; +} + +h1, h2, h3 { + font-family: 'Noto Serif JP', serif; + letter-spacing: 0.1em; +} + +/* Hero Section */ +.hero { + height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + position: relative; + overflow: hidden; + background: radial-gradient(circle, #333 0%, #000 100%); +} + +.hero-bg { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCIgdmlld0JveD0iMCAwIDYwIDYwIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiM0NDQiIGZpbGwtb3BhY2l0eT0iMC4xIj48cGF0aCBkPSJNMzYgMzR2LTRoLTJ2NGgtMnY0aDJ2NGgydi00aDJ2LTRoLTJ6TTM2IDM0VjMwaDR2NGgtNHpNNiAzNHYtNGgtMnY0SDJ2NGgydjRoMnYtNGgydi00SDZ6Ii8+PC9nPjwvZz48L3N2Zz4='); /* 和柄パターン（例：青海波などではないがシンプルなもの） */ + z-index: 0; +} + +.hero-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.8)); + z-index: 1; +} + +.hero-content { + position: relative; + z-index: 2; + margin-bottom: 2rem; +} + +.hero h1 { + font-size: 4rem; + color: var(--gold); + text-shadow: 2px 2px 4px rgba(0,0,0,0.5); + margin: 0; + writing-mode: vertical-rl; + text-orientation: upright; + margin-right: 1rem; + display: inline-block; +} + +.subtitle { + font-size: 1.5rem; + color: var(--white); + letter-spacing: 0.2em; + writing-mode: vertical-rl; + text-orientation: upright; + display: inline-block; +} + +.kamon { + position: relative; + z-index: 2; + margin-top: 2rem; + animation: rotate 20s linear infinite; +} +.kamon img { + filter: drop-shadow(0 0 10px var(--gold)); +} + +@keyframes rotate { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +/* Navigation */ +nav { + position: sticky; + top: 0; + background-color: rgba(0,0,0,0.9); + z-index: 100; + padding: 1rem 0; + border-bottom: 1px solid var(--dark-gold); +} + +nav ul { + display: flex; + justify-content: center; + list-style: none; + padding: 0; + margin: 0; +} + +nav ul li { + margin: 0 1.5rem; +} + +nav ul li a { + font-size: 1.1rem; + color: var(--gold); + transition: color 0.3s; +} + +nav ul li a:hover { + color: var(--white); +} + +/* Section Common */ +.section { + padding: 6rem 1rem; + position: relative; +} + +.alt-bg { + background-color: var(--dark-gray); +} + +.container { + max-width: 1000px; + margin: 0 auto; +} + +.section-title { + text-align: center; + font-size: 2.5rem; + margin-bottom: 4rem; + color: var(--gold); + border-bottom: 2px solid var(--gold); + display: inline-block; + padding-bottom: 0.5rem; + position: relative; + left: 50%; + transform: translateX(-50%); +} + +/* About */ +.content-wrapper { + display: flex; + justify-content: center; +} + +.text-content p { + font-size: 1.2rem; + margin-bottom: 2rem; + text-align: justify; +} + +/* Achievements */ +.achievements-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; +} + +.card { + background-color: var(--black); + border: 1px solid var(--dark-gold); + padding: 2rem; + transition: transform 0.3s, box-shadow 0.3s; +} + +.card:hover { + transform: translateY(-5px); + box-shadow: 0 5px 15px rgba(212, 175, 55, 0.2); +} + +.card h3 { + color: var(--gold); + margin-top: 0; + border-bottom: 1px solid #444; + padding-bottom: 0.5rem; +} + +/* Gallery */ +.gallery-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; +} + +.gallery-item { + aspect-ratio: 16/9; + overflow: hidden; + border: 2px solid var(--dark-gold); +} + +.placeholder-img { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + font-size: 1.5rem; + font-weight: bold; + color: white; + text-shadow: 1px 1px 2px black; + transition: transform 0.5s; +} + +.gallery-item:hover .placeholder-img { + transform: scale(1.1); +} + +/* Contact */ +.center-text { + text-align: center; + margin-bottom: 3rem; +} + +.contact-form { + max-width: 600px; + margin: 0 auto; + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +.form-group { + display: flex; + flex-direction: column; +} + +.form-group label { + color: var(--gold); + margin-bottom: 0.5rem; +} + +.form-group input, +.form-group textarea { + padding: 0.8rem; + background-color: #333; + border: 1px solid #555; + color: white; + font-family: inherit; + font-size: 1rem; +} + +.form-group input:focus, +.form-group textarea:focus { + outline: none; + border-color: var(--gold); +} + +.btn-gold { + background-color: var(--gold); + color: var(--black); + padding: 1rem; + border: none; + font-size: 1.2rem; + cursor: pointer; + font-weight: bold; + transition: background-color 0.3s; + font-family: 'Shippori Mincho', serif; +} + +.btn-gold:hover { + background-color: #fff; +} + +/* Footer */ +footer { + text-align: center; + padding: 2rem; + background-color: #000; + color: #666; + border-top: 1px solid #333; +} + +/* Animations */ +.fade-in { + opacity: 0; + animation: fadeIn 1.5s ease-out forwards; +} + +.fade-in-delay { + opacity: 0; + animation: fadeIn 1.5s ease-out 0.5s forwards; +} + +@keyframes fadeIn { + to { opacity: 1; } +} + +.fade-up { + opacity: 0; + transform: translateY(30px); + transition: opacity 0.8s ease-out, transform 0.8s ease-out; +} + +.fade-up.visible { + opacity: 1; + transform: translateY(0); +} + +/* Mobile Responsive */ +@media (max-width: 768px) { + .hero h1 { + font-size: 3rem; + } + + .subtitle { + font-size: 1.2rem; + } + + nav ul { + flex-wrap: wrap; + } + + nav ul li { + margin: 0.5rem 1rem; + } + + .section-title { + font-size: 2rem; + } +} diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..2d611c8 --- /dev/null +++ b/public/index.html @@ -0,0 +1,119 @@ + + + + + + 豊臣秀吉 | 天下人への道 + + + + + + +
+
+
+
+

豊臣 秀吉

+

草履取りから天下人へ

+
+
+ + 五七の桐 +
+
+ + + +
+
+
+

人となり

+
+
+

尾張国愛知郡中村郷の下層民の家に生まれる。
幼名は日吉丸。

+

織田信長公に仕え、草履取りから異例の出世を果たす。
「人たらし」と称される人心掌握術と、類稀なる機転で数々の難局を乗り越えてきた。

+

本能寺の変の後、山崎の戦いで明智光秀を討ち、信長公の後継者としての地位を確立。
関白、太閤となり、遂に天下統一を成し遂げる。

+
+
+
+
+ +
+
+

主な功績

+
+
+

墨俣一夜城

+

敵地での築城をわずかな期間で完遂し、織田軍の美濃攻略の足掛かりを作った。

+
+
+

金ヶ崎の退き口

+

浅井長政の裏切りによる撤退戦で殿（しんがり）を務め、信長公を無事に逃がした。

+
+
+

中国大返し

+

本能寺の変を知り、備中高松城から京都へ驚異的な速度で軍を返し、明智光秀を討った。

+
+
+

太閤検地

+

全国の土地を調査し、石高制を確立。近世封建社会の基礎を築いた。

+
+
+
+
+ + + +
+
+

文通

+

茶会への招待状をお送りします。

+
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+
+ + + + + + diff --git a/public/js/script.js b/public/js/script.js new file mode 100644 index 0000000..20ef9a1 --- /dev/null +++ b/public/js/script.js @@ -0,0 +1,49 @@ +document.addEventListener('DOMContentLoaded', () => { + // Intersection Observer for fade-up animation + const observerOptions = { + root: null, + rootMargin: '0px', + threshold: 0.1 + }; + + const observer = new IntersectionObserver((entries, observer) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('visible'); + observer.unobserve(entry.target); + } + }); + }, observerOptions); + + const fadeUpElements = document.querySelectorAll('.fade-up'); + fadeUpElements.forEach(el => { + observer.observe(el); + }); + + // Smooth scrolling for anchor links + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + + const targetId = this.getAttribute('href'); + const targetElement = document.querySelector(targetId); + + if (targetElement) { + window.scrollTo({ + top: targetElement.offsetTop - 60, // Adjust for sticky nav + behavior: 'smooth' + }); + } + }); + }); + + // Form submission (Mock) + const form = document.querySelector('.contact-form'); + if (form) { + form.addEventListener('submit', (e) => { + e.preventDefault(); + alert('文（メッセージ）を受け取りました。茶会への招待をお待ちください。'); + form.reset(); + }); + } +});