<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Amazon風ECサイト</title>
<style>
/* === 全体のリセットと基本スタイル === */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f8f9fa;
color: #333;
}
img {
max-width: 100%;
height: auto;
}
button {
cursor: pointer;
border: none;
padding: 10px 15px;
border-radius: 5px;
}
a {
text-decoration: none;
color: inherit;
}
/* === ヘッダー部分 === */
header {
background-color: #232f3e;
color: white;
padding: 10px 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
header .logo {
font-size: 24px;
font-weight: bold;
}
header .search-bar {
flex: 1;
margin: 0 20px;
display: flex;
}
header .search-bar input {
width: 100%;
padding: 8px;
font-size: 16px;
border-radius: 4px 0 0 4px;
border: none;
}
header .search-bar button {
background-color: #ff9900;
color: white;
font-size: 16px;
border-radius: 0 4px 4px 0;
}
header .user-actions {
display: flex;
align-items: center;
gap: 15px;
}
header .user-actions a {
color: white;
font-size: 16px;
}
header .cart-icon {
position: relative;
}
header .cart-count {
position: absolute;
top: -5px;
right: -10px;
background-color: red;
color: white;
font-size: 12px;
border-radius: 50%;
padding: 4px 7px;
}
/* === ナビゲーションバー === */
nav {
background-color: #37475a;
padding: 10px 20px;
display: flex;
justify-content: space-around;
}
nav a {
color: white;
font-size: 16px;
}
/* === バナーセクション === */
.banner {
background-image: url('https://via.placeholder.com/1200x400');
background-size: cover;
background-position: center;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: white;
}
.banner h1 {
font-size: 36px;
margin-bottom: 10px;
}
.banner button {
background-color: #ff9900;
border: none;
color: white;
font-size: 16px;
padding: 10px 20px;
}
/* === 商品セクション === */
.products {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
padding: 20px;
}
.product {
width: 23%;
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 15px;
text-align: center;
}
.product img {
height: 150px;
object-fit: cover;
border-radius: 8px;
}
.product h3 {
font-size: 18px;
margin: 10px 0;
}
.product .price {
font-size: 16px;
color: #ff9900;
margin-bottom: 10px;
}
.product button {
background-color: #ff9900;
color: white;
font-size: 14px;
}
.product .favorite {
background-color: #e0e0e0;
color: #333;
font-size: 14px;
margin-top: 10px;
}
/* === カートポップアップ === */
.cart-popup {
position: fixed;
top: 70px;
right: 20px;
background-color: white;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
border-radius: 8px;
width: 300px;
padding: 20px;
display: none;
z-index: 1000;
}
.cart-popup h3 {
margin-bottom: 10px;
font-size: 18px;
}
.cart-popup .cart-item {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.cart-popup .cart-item span {
font-size: 14px;
}
.cart-popup button {
width: 100%;
background-color: #ff9900;
border: none;
color: white;
padding: 10px;
font-size: 16px;
}
/* === レスポンシブ対応 === */
@media (max-width: 768px) {
.product {
width: 48%;
}
header .search-bar {
flex-direction: column;
gap: 10px;
}
}
@media (max-width: 480px) {
.product {
width: 100%;
}
}
</style>
</head>
<body>
<header>
<div class="logo">Amazon風ECサイト</div>
<div class="search-bar">
<input type="text" placeholder="商品を検索">
<button>検索</button>
</div>
<div class="user-actions">
<a href="#">ログイン</a>
<div class="cart-icon" onclick="toggleCartPopup()">
<img src="https://via.placeholder.com/32" alt="カート">
<div class="cart-count">0</div>
</div>
</div>
</header>
<nav>
<a href="#">ホーム</a>
<a href="#">カテゴリ</a>
<a href="#">セール</a>
<a href="#">おすすめ</a>
</nav>
<div class="banner">
<div>
<h1>ビッグセール開催中！</h1>
<button>セールを見る</button>
</div>
</div>
<div class="products">
<div class="product">
<img src="https://via.placeholder.com/200" alt="商品1">
<h3>商品1</h3>
<div class="price">¥3,000</div>
<button onclick="addToCart('商品1', '¥3,000')">カートに追加</button>
<button class="favorite" onclick="addToFavorite('商品1')">お気に入り</button>
</div>
<div class="product">
<img src="https://via.placeholder.com/200" alt="商品2">
<h3>商品2</h3>
<div class="price">¥5,000</div>
<button onclick="addToCart('商品2', '¥5,000')">カートに追加</button>
<button class="favorite" onclick="addToFavorite('商品2')">お気に入り</button>
</div>
</div>
<div class="cart-popup" id="cart-popup">
<h3>カートの中身</h3>
<div id="cart-items"></div>
<button onclick="checkout()">購入手続きへ</button>
</div>
<script>
let cart = [];
let favorites = [];
function addToCart(name, price) {
cart.push({ name, price });
updateCart();
alert(`${name} をカートに追加しました！`);
}
function addToFavorite(name) {
if (!favorites.includes(name)) {
favorites.push(name);
alert(`${name} をお気に入りに追加しました！`);
} else {
alert(`${name} はすでにお気に入りに追加されています！`);
}
}
function updateCart() {
const cartCount = document.querySelector('.cart-count');
const cartItems = document.getElementById('cart-items');
cartCount.textContent = cart.length;
cartItems.innerHTML = '';
cart.forEach(item => {
const div = document.createElement('div');
div.className = 'cart-item';
div.innerHTML = `<span>${item.name}</span><span>${item.price}</span>`;
cartItems.appendChild(div);
});
}
function toggleCartPopup() {
const cartPopup = document.getElementById('cart-popup');
cartPopup.style.display = cartPopup.style.display === 'block' ? 'none' : 'block';
}
function checkout() {
alert('購入手続きを開始します！');
cart = [];
updateCart();
toggleCartPopup();
}
</script>
</body>
</html>
カテゴリー: HTML
高度なAI風文章生成ツール
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>高度なAI風文章生成ツール</title>
<style>
/* 全体スタイル */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f9;
}
.container {
max-width: 800px;
margin: 50px auto;
padding: 20px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
textarea {
width: 100%;
height: 120px;
margin: 10px 0;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
resize: none;
}
button {
display: block;
width: 100%;
padding: 10px;
font-size: 16px;
color: white;
background-color: #007bff;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
.output {
margin-top: 20px;
padding: 15px;
background: #f1f1f1;
border: 1px solid #ddd;
border-radius: 4px;
}
.loading {
text-align: center;
margin-top: 20px;
font-size: 16px;
color: #555;
}
.spinner {
width: 50px;
height: 50px;
margin: 10px auto;
border: 5px solid rgba(0, 0, 0, 0.1);
border-top-color: #007bff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="container">
<h1>高度なAI風文章生成ツール</h1>
<form id="textForm">
<label for="topic">テーマを入力してください:</label>
<textarea id="topic" placeholder="例: テクノロジーの未来"></textarea>
<button type="submit">文章を生成する</button>
</form>
<div id="loading" class="loading" style="display: none;">
<div class="spinner"></div>
文章を生成中です…お待ちください。
</div>
<div id="output" class="output" style="display: none;">
<h3>生成された文章:</h3>
<p id="generatedText"></p>
</div>
</div>
<script>
const form = document.getElementById("textForm");
const topicInput = document.getElementById("topic");
const loadingDiv = document.getElementById("loading");
const outputDiv = document.getElementById("output");
const generatedText = document.getElementById("generatedText");
// サンプルデータ（キーワードごとに分類）
const textDatabase = {
テクノロジー: [
"テクノロジーは人々の生活を大きく変える可能性があります。",
"未来の社会ではAIとロボットが主要な役割を果たすでしょう。",
"技術革新は医療、教育、環境保護の分野で重要な変化をもたらします。",
],
環境: [
"環境保護は持続可能な未来の鍵です。",
"再生可能エネルギーは地球を守る大きな手段です。",
"気候変動への対策は国際的な協力を必要とします。",
],
教育: [
"教育の未来はデジタル化により変わります。",
"オンライン学習は世界中の人々に平等な教育機会を提供します。",
"AIは個別化された学習体験を可能にします。",
],
};
// ランダムな文章を取得する関数
const getRandomText = (texts) => {
return texts[Math.floor(Math.random() * texts.length)];
};
// フォーム送信イベント
form.addEventListener("submit", (event) => {
event.preventDefault();
const topic = topicInput.value.trim();
if (!topic) {
alert("テーマを入力してください！");
return;
}
// ローディング表示
loadingDiv.style.display = "block";
outputDiv.style.display = "none";
setTimeout(() => {
// テーマから関連する文章を探す
let generated = "申し訳ありませんが、該当するデータが見つかりませんでした。";
Object.keys(textDatabase).forEach((key) => {
if (topic.includes(key)) {
generated = getRandomText(textDatabase[key]);
}
});
// 結果を表示
generatedText.textContent = `テーマ「${topic}」に基づいて生成された文章:\n\n${generated}`;
outputDiv.style.display = "block";
loadingDiv.style.display = "none";
}, 1500); // 擬似的な遅延を追加
});
</script>
</body>
</html>
株価予想AI.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>株価予測AI</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 0;
}
header {
background-color: #007bff;
color: #fff;
text-align: center;
padding: 20px 10px;
}
header h1 {
margin: 0;
font-size: 24px;
}
main {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
input[type="text"], button {
font-size: 16px;
padding: 10px;
margin: 10px 0;
width: 100%;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
button {
background-color: #007bff;
color: #fff;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
.result, .history {
margin-top: 20px;
}
.result p {
font-size: 18px;
margin: 8px 0;
}
canvas {
margin-top: 20px;
max-width: 100%;
}
</style>
</head>
<body>
<header>
<h1>株価予測AI</h1>
</header>
<main>
<p>株価を予測するために企業名またはティッカーシンボルを入力してください:</p>
<input type="text" id="stockInput" placeholder="例: AAPL, 7203.T">
<button onclick="predictStock()">予測する</button>
<div class="result" id="result"></div>
<canvas id="stockChart"></canvas>
<div class="history">
<h2>予測履歴</h2>
<ul id="history"></ul>
</div>
</main>
<script>
const historyList = document.getElementById('history');
const stockChartCanvas = document.getElementById('stockChart');
let stockChart;
function generateDummyData() {
// 過去1週間分のダミーデータを生成
const data = [];
for (let i = 6; i >= 0; i--) {
data.push({
date: new Date(Date.now() - i * 24 * 60 * 60 * 1000).toLocaleDateString(),
price: (Math.random() * 200 + 100).toFixed(2) // ¥100〜¥300
});
}
return data;
}
function predictStock() {
const stockSymbol = document.getElementById('stockInput').value.trim();
const resultDiv = document.getElementById('result');
// 入力チェック
if (!stockSymbol) {
resultDiv.innerHTML = "<p style='color: red;'>企業名またはティッカーシンボルを入力してください。</p>";
return;
}
// 過去の株価データを生成
const pastData = generateDummyData();
// 株価予測（ダミーデータ）
const predictedPrice = (Math.random() * 1000 + 100).toFixed(2); // ¥100〜¥1100
const change = (Math.random() * 10 - 5).toFixed(2); // -5%〜+5%の変動率
const predictionDate = new Date().toLocaleString();
// 結果を表示
resultDiv.innerHTML = `
<p><strong>${stockSymbol}</strong> の予測結果:</p>
<p>予測株価: <strong>¥${predictedPrice}</strong></p>
<p>予測変動率: <strong>${change}%</strong></p>
<p>予測日時: ${predictionDate}</p>
`;
// 履歴に追加
const historyItem = document.createElement('li');
historyItem.innerHTML = `
<strong>${stockSymbol}</strong>: ¥${predictedPrice} (${change}%) - ${predictionDate}
`;
historyList.prepend(historyItem);
// グラフを更新
updateChart(stockSymbol, pastData, predictedPrice);
// 入力欄をクリア
document.getElementById('stockInput').value = '';
}
function updateChart(symbol, pastData, predictedPrice) {
const labels = pastData.map(d => d.date);
const prices = pastData.map(d => parseFloat(d.price));
prices.push(parseFloat(predictedPrice)); // 予測値を追加
if (stockChart) {
stockChart.destroy(); // 既存のチャートを削除
}
stockChart = new Chart(stockChartCanvas, {
type: 'line',
data: {
labels: [...labels, '予測'],
datasets: [{
label: `${symbol} 株価推移`,
data: prices,
borderColor: '#007bff',
backgroundColor: 'rgba(0, 123, 255, 0.2)',
fill: true,
}]
},
options: {
responsive: true,
scales: {
x: {
title: {
display: true,
text: '日付'
}
},
y: {
title: {
display: true,
text: '株価 (¥)'
}
}
}
}
});
}
</script>
</body>
</html>
Youtube風サイト
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyTube - 動画共有プラットフォーム</title>
<style>
/* 共通スタイル */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f9f9f9;
}
header {
background-color: #ff0000;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
}
header .logo {
font-size: 24px;
cursor: pointer;
}
header .search-bar input {
width: 300px;
padding: 8px;
border: none;
border-radius: 4px;
}
header .search-bar button {
padding: 8px 12px;
margin-left: 5px;
background-color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
header .user-menu img {
border-radius: 50%;
}
nav {
background-color: #333;
color: white;
padding: 10px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
nav ul li {
margin: 0 15px;
}
nav ul li a {
text-decoration: none;
color: white;
}
main {
padding: 20px;
}
.video-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.video-card {
background-color: white;
border: 1px solid #ddd;
border-radius: 5px;
margin: 15px;
overflow: hidden;
width: 320px;
}
.video-card img {
width: 100%;
}
.video-card h3, .video-card p {
margin: 10px;
}
.video-player-page {
display: none;
}
.video-player {
max-width: 800px;
margin: 0 auto;
}
.video-player video {
width: 100%;
margin-bottom: 10px;
}
.recommendations ul {
list-style: none;
padding: 0;
}
.recommendations ul li {
display: flex;
margin-bottom: 10px;
}
.recommendations ul li img {
margin-right: 10px;
border-radius: 4px;
}
.comments textarea {
width: 100%;
height: 100px;
margin-bottom: 10px;
padding: 10px;
}
.comments button {
padding: 10px 15px;
background-color: #ff0000;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 20px 0;
margin-top: 20px;
}
</style>
</head>
<body>
<!-- ヘッダー -->
<header>
<div class="logo" onclick="showPage('home')">MyTube</div>
<div class="search-bar">
<input type="text" placeholder="動画を検索">
<button>検索</button>
</div>
<div class="user-menu">
<img src="https://via.placeholder.com/40" alt="ユーザーアイコン">
</div>
</header>
<nav>
<ul>
<li><a href="#" onclick="showPage('home')">ホーム</a></li>
<li><a href="#">トレンド</a></li>
<li><a href="#">音楽</a></li>
<li><a href="#">ゲーム</a></li>
<li><a href="#">ニュース</a></li>
</ul>
</nav>
<!-- ホームページ -->
<main class="video-grid" id="home-page">
<article class="video-card" onclick="showPage('video-player')">
<img src="https://via.placeholder.com/320x180" alt="Video Thumbnail">
<h3>動画タイトル1</h3>
<p>チャンネル名: ユーザーA</p>
<p>再生回数: 10,000回</p>
</article>
<article class="video-card" onclick="showPage('video-player')">
<img src="https://via.placeholder.com/320x180" alt="Video Thumbnail">
<h3>動画タイトル2</h3>
<p>チャンネル名: ユーザーB</p>
<p>再生回数: 8,500回</p>
</article>
</main>
<!-- 動画再生ページ -->
<main class="video-player-page" id="video-player-page">
<section class="video-player">
<video controls>
<source src="sample-video.mp4" type="video/mp4">
お使いのブラウザでは動画を再生できません。
</video>
<h1>動画タイトル1</h1>
<p>再生回数: 10,000回 | 投稿日: 2024年11月19日</p>
<p>チャンネル名: ユーザーA</p>
<p>動画の説明文: これは動画の説明文です。概要やリンク、関連情報をここに記載します。</p>
</section>
<aside class="recommendations">
<h2>おすすめ動画</h2>
<ul>
<li>
<a href="#" onclick="showPage('video-player')">
<img src="https://via.placeholder.com/150x100" alt="Video Thumbnail">
<p>動画タイトル2</p>
</a>
</li>
</ul>
</aside>
<section class="comments">
<h2>コメント</h2>
<form>
<textarea placeholder="コメントを追加"></textarea>
<button>送信</button>
</form>
<ul>
<li>ユーザーA: 素晴らしい動画です！</li>
<li>ユーザーB: もっと見たい！</li>
</ul>
</section>
</main>
<footer>
<p>© 2024 MyTube - 動画共有プラットフォーム</p>
</footer>
<script>
function showPage(page) {
document.getElementById('home-page').style.display = page === 'home' ? 'block' : 'none';
document.getElementById('video-player-page').style.display = page === 'video-player' ? 'block' : 'none';
}
</script>
</body>
</html>
創作アイディア生成サイト
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>創作アイディア生成サイト</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
background-color: var(--background-color, #f4f6f9);
}
.container {
max-width: 800px;
width: 90%;
padding: 20px;
text-align: center;
background-color: var(--chat-bg-color, #ffffff);
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
margin-top: 20px;
}
.title {
font-size: 24px;
margin-bottom: 15px;
}
.theme-toggle-btn {
position: absolute;
right: 15px;
top: 15px;
padding: 5px 10px;
cursor: pointer;
border: none;
background-color: #0078d7;
color: #ffffff;
border-radius: 5px;
}
.dropdown, .input, .button {
width: 80%;
margin: 5px;
padding: 10px;
font-size: 16px;
}
.idea-display {
margin-top: 20px;
font-size: 18px;
padding: 15px;
color: #333;
background-color: #f4f4f4;
border-radius: 10px;
text-align: left;
}
.related-ideas {
font-size: 14px;
color: #555;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1 class="title">創作アイディア生成サイト</h1>
<button class="theme-toggle-btn" onclick="toggleTheme()">🌙 ダークモード</button>
<label for="categorySelect">カテゴリを選択</label>
<select id="categorySelect" class="dropdown">
<option value="fantasy">ファンタジー</option>
<option value="sci-fi">SF</option>
<option value="mystery">ミステリー</option>
<option value="horror">ホラー</option>
</select>
<BR>
<label for="elementSelect">詳細要素を選択</label>
<select id="elementSelect" class="dropdown">
<option value="character">キャラクター</option>
<option value="plot">プロット</option>
<option value="setting">舞台設定</option>
<option value="theme">テーマ</option>
</select>
<button class="button" onclick="generateIdea()">アイディア生成</button>
<div class="idea-display" id="ideaDisplay">ここに生成されたアイディアが表示されます。</div>
<div class="related-ideas" id="relatedIdeas"></div>
</div>
<script>
const ideas = {
"fantasy": {
"character": ["勇敢な騎士", "神秘的な魔法使い", "不思議な生物"],
"plot": ["王国を救うための冒険", "魔法の秘宝を巡る争い", "禁断の魔法を探求する旅"],
"setting": ["ドラゴンが住む山", "不思議な森", "海底の王国"],
"theme": ["友情と勇気", "運命と戦い", "魔法と現実の対立"]
},
"sci-fi": {
"character": ["宇宙飛行士", "AIロボット", "サイボーグ"],
"plot": ["異星人との接触", "未来都市の陰謀", "宇宙戦争"],
"setting": ["宇宙ステーション", "荒廃した地球", "人工惑星"],
"theme": ["人間と機械の共存", "進化の危機", "文明の崩壊と再生"]
}
};
const relatedIdeas = {
"友情と勇気": ["戦場での友情", "共に戦う友人の絆"],
"運命と戦い": ["運命に抗うヒーロー", "過去を背負う主人公の決意"]
};
let isDarkMode = false;
function toggleTheme() {
isDarkMode = !isDarkMode;
document.body.style.setProperty("--background-color", isDarkMode ? "#333" : "#f4f6f9");
document.body.style.setProperty("--chat-bg-color", isDarkMode ? "#444" : "#ffffff");
document.querySelector(".theme-toggle-btn").textContent = isDarkMode ? "🌞 ライトモード" : "🌙 ダークモード";
}
function generateIdea() {
const category = document.getElementById("categorySelect").value;
const element = document.getElementById("elementSelect").value;
const ideaArray = ideas[category][element];
const randomIdea = ideaArray[Math.floor(Math.random() * ideaArray.length)];
document.getElementById("ideaDisplay").textContent = randomIdea;
displayRelatedIdeas(randomIdea);
}
function displayRelatedIdeas(idea) {
const relatedDiv = document.getElementById("relatedIdeas");
relatedDiv.innerHTML = "<h4>関連するアイディア:</h4>";
const relatedItems = relatedIdeas[idea] || ["関連アイディアが見つかりません"];
relatedItems.forEach(item => {
const relatedItemDiv = document.createElement("div");
relatedItemDiv.textContent = `- ${item}`;
relatedDiv.appendChild(relatedItemDiv);
});
}
</script>
</body>
</html>
ChatGPT風サイト.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>高度なChatGPT風チャット</title>
<style>
/* 全体のスタイル */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: var(--background-color, #f4f6f9);
transition: background-color 0.3s ease;
}
.chat-container {
width: 90%;
max-width: 600px;
background-color: var(--chat-bg-color, #ffffff);
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
overflow: hidden;
display: flex;
flex-direction: column;
transition: background-color 0.3s ease;
}
.chat-header {
padding: 15px;
text-align: center;
background-color: var(--header-bg-color, #3f51b5);
color: var(--header-text-color, #ffffff);
font-weight: bold;
position: relative;
}
.theme-toggle-btn {
position: absolute;
right: 15px;
top: 15px;
padding: 5px 10px;
cursor: pointer;
border: none;
background-color: var(--header-text-color, #ffffff);
color: var(--header-bg-color, #3f51b5);
border-radius: 5px;
transition: background-color 0.3s ease;
}
.chat-messages {
padding: 20px;
overflow-y: auto;
flex-grow: 1;
border-bottom: 1px solid #ddd;
max-height: 70vh;
}
.message {
margin-bottom: 15px;
line-height: 1.5;
display: inline-block;
max-width: 70%;
padding: 10px;
border-radius: 10px;
animation: fadeIn 0.3s ease;
}
.user-message {
text-align: right;
color: #333;
background-color: var(--user-msg-bg-color, #e0f7fa);
align-self: flex-end;
}
.bot-message {
text-align: left;
color: var(--bot-msg-color, #3f51b5);
background-color: var(--bot-msg-bg-color, #e8eaf6);
align-self: flex-start;
}
.typing-indicator {
font-style: italic;
color: #999;
display: none;
}
.chat-input {
display: flex;
padding: 10px;
background-color: #f4f6f9;
border-top: 1px solid #ddd;
}
.chat-input input {
flex: 1;
padding: 12px;
border: 1px solid #ddd;
border-radius: 4px;
outline: none;
}
.chat-input button {
margin-left: 10px;
padding: 12px 20px;
background-color: var(--button-bg-color, #3f51b5);
color: var(--button-text-color, #ffffff);
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
/* アニメーション効果 */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
</head>
<body>
<div class="chat-container">
<div class="chat-header">
高度なChatGPT風 チャット
<button class="theme-toggle-btn" onclick="toggleTheme()">🌞 ダークモード</button>
</div>
<div class="chat-messages" id="chatMessages">
<div class="message bot-message">こんにちは！質問があればどうぞ。</div>
</div>
<div class="typing-indicator" id="typingIndicator">Botが入力中...</div>
<div class="chat-input">
<input type="text" id="userInput" placeholder="メッセージを入力..." />
<button onclick="sendMessage()">送信</button>
</div>
</div>
<script>
let currentTopic = null; // 現在のトピックを保持
let isDarkMode = false;
// テーマ切り替え
function toggleTheme() {
isDarkMode = !isDarkMode;
document.body.style.setProperty("--background-color", isDarkMode ? "#333" : "#f4f6f9");
document.body.style.setProperty("--chat-bg-color", isDarkMode ? "#444" : "#ffffff");
document.body.style.setProperty("--header-bg-color", isDarkMode ? "#555" : "#3f51b5");
document.body.style.setProperty("--header-text-color", isDarkMode ? "#fff" : "#ffffff");
document.body.style.setProperty("--user-msg-bg-color", isDarkMode ? "#666" : "#e0f7fa");
document.body.style.setProperty("--bot-msg-bg-color", isDarkMode ? "#777" : "#e8eaf6");
document.body.style.setProperty("--bot-msg-color", isDarkMode ? "#aaa" : "#3f51b5");
document.body.style.setProperty("--button-bg-color", isDarkMode ? "#888" : "#3f51b5");
document.body.style.setProperty("--button-text-color", isDarkMode ? "#fff" : "#ffffff");
document.querySelector(".theme-toggle-btn").textContent = isDarkMode ? "🌜 ライトモード" : "🌞 ダークモード";
}
function saveChatHistory(text, sender) {
const chatMessages = document.getElementById("chatMessages");
const messageElement = document.createElement("div");
messageElement.className = `message ${sender}-message`;
messageElement.textContent = text;
chatMessages.appendChild(messageElement);
chatMessages.scrollTop = chatMessages.scrollHeight;
}
function getBotResponse(userMessage) {
if (userMessage.includes("ありがとう")) {
currentTopic = "ありがとう";
return "どういたしまして！お役に立てて嬉しいです！";
} else if (userMessage.includes("助けて")) {
currentTopic = "助けて";
return "どのようなことでお困りですか？";
} else if (userMessage.includes("質問")) {
currentTopic = "質問";
return "どのような質問でしょうか？詳しく教えてください！";
} else if (currentTopic === "ありがとう") {
return "他に質問があればいつでもどうぞ。";
} else {
currentTopic = null;
return "ご質問ありがとうございます。どのような内容でしょうか？";
}
}
function showTypingIndicator() {
document.getElementById("typingIndicator").style.display = "block";
}
function hideTypingIndicator() {
document.getElementById("typingIndicator").style.display = "none";
}
function sendMessage() {
const userInput = document.getElementById("userInput");
if (userInput.value.trim() !== "") {
saveChatHistory(userInput.value, "user");
showTypingIndicator();
setTimeout(() => {
hideTypingIndicator();
const botResponse = getBotResponse(userInput.value);
saveChatHistory(botResponse, "bot");
}, 1500);
userInput.value = "";
}
}
// Enterキーでメッセージ送信
document.getElementById("userInput").addEventListener("keypress", function(event) {
if (event.key === "Enter") {
sendMessage();
event.preventDefault();
}
});
</script>
</body>
</html>
神と対話するAI
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>神と対話するAI</title>
<style>
/* 神秘的な背景とエフェクト */
body {
font-family: 'Georgia', serif;
background-color: #1a1a2e;
color: #d1d1e9;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
overflow: hidden;
}
.chat-container {
width: 100%;
max-width: 600px;
background-color: rgba(43, 43, 63, 0.9);
border-radius: 10px;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.6);
padding: 20px;
position: relative;
overflow: hidden;
}
.messages {
height: 300px;
overflow-y: auto;
margin-bottom: 10px;
padding-right: 10px;
}
.message {
margin: 10px 0;
line-height: 1.5;
}
.user-message {
text-align: right;
color: #00aaff;
}
.ai-message {
text-align: left;
color: #e6e6fa;
font-style: italic;
}
.typing-indicator {
font-size: 1.5em;
color: #e6e6fa;
}
.input-container {
display: flex;
}
input[type="text"] {
flex: 1;
padding: 10px;
border-radius: 5px;
border: 1px solid #555;
background-color: #444;
color: #e6e6fa;
margin-right: 10px;
}
button {
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #5a5adb;
color: white;
cursor: pointer;
}
/* 背景アニメーション */
.background-animation {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle, rgba(255,255,255,0.1), rgba(0,0,0,0) 70%);
animation: glow 5s infinite alternate;
pointer-events: none;
}
@keyframes glow {
from {
opacity: 0.4;
}
to {
opacity: 0.7;
}
}
</style>
</head>
<body>
<div class="chat-container">
<h2>神と対話するAI</h2>
<div class="messages" id="messages"></div>
<div class="input-container">
<input type="text" id="userInput" placeholder="質問を入力してください...">
<button onclick="sendMessage()">送信</button>
</div>
<div class="background-animation"></div>
</div>
<script>
const messagesContainer = document.getElementById("messages");
function addMessage(content, className) {
const message = document.createElement("div");
message.className = "message " + className;
message.innerHTML = content;
messagesContainer.appendChild(message);
messagesContainer.scrollTop = messagesContainer.scrollHeight;
}
function getAIResponse(userMessage) {
const responses = {
"目的": [
"あなたの目的はあなたの選択の中にあります。心を澄まし、その小さな声に耳を傾けなさい。",
"目的は定まっているものではなく、あなたが形作るものです。勇気を持って探し続けなさい。"
],
"未来": [
"未来は揺れ動く霧のようなもの…手の中にありながら捉えられぬもの。だが、あなたの意思がその霧を晴らすだろう。",
"未来は、あなたの内にある希望が灯し出すもの。信じる道を歩みなさい。"
],
"愛": [
"愛とは、無限に与えること。光のようにあなたを包み、他者を受け入れるものです。",
"愛とは、心の中の静けさと繋がり、他者の存在をただあるがままに受け入れること。"
],
"default": [
"その問いの答えは、あなた自身が見つけ出すもの。内なる声を信じなさい。",
"すべての答えは既にあなたの心の中にあります。耳を澄まし、その声に従いなさい。"
]
};
const keywords = Object.keys(responses);
for (let keyword of keywords) {
if (userMessage.includes(keyword)) {
const possibleResponses = responses[keyword];
return possibleResponses[Math.floor(Math.random() * possibleResponses.length)];
}
}
const defaultResponses = responses["default"];
return defaultResponses[Math.floor(Math.random() * defaultResponses.length)];
}
function sendMessage() {
const userInput = document.getElementById("userInput").value.trim();
if (userInput === "") return;
addMessage(userInput, "user-message");
document.getElementById("userInput").value = "";
const aiResponse = getAIResponse(userInput);
// タイピングエフェクトを表示
setTimeout(() => {
addMessage(`<span class="typing-indicator">...</span>`, "ai-message");
setTimeout(() => {
messagesContainer.lastChild.remove();
addMessage(aiResponse, "ai-message");
}, 2000); // タイピングエフェクト表示後の応答
}, 800); // 遅延で自然な応答
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>神と対話するAI</title>
<style>
/* 神秘的な背景とエフェクト */
body {
font-family: 'Georgia', serif;
background-color: #1a1a2e;
color: #d1d1e9;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
overflow: hidden;
}
.chat-container {
width: 100%;
max-width: 600px;
background-color: rgba(43, 43, 63, 0.9);
border-radius: 10px;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.6);
padding: 20px;
position: relative;
overflow: hidden;
}
.messages {
height: 300px;
overflow-y: auto;
margin-bottom: 10px;
padding-right: 10px;
}
.message {
margin: 10px 0;
line-height: 1.5;
}
.user-message {
text-align: right;
color: #00aaff;
}
.ai-message {
text-align: left;
color: #e6e6fa;
font-style: italic;
}
.typing-indicator {
font-size: 1.5em;
color: #e6e6fa;
}
.input-container {
display: flex;
}
input[type="text"] {
flex: 1;
padding: 10px;
border-radius: 5px;
border: 1px solid #555;
background-color: #444;
color: #e6e6fa;
margin-right: 10px;
}
button {
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #5a5adb;
color: white;
cursor: pointer;
}
/* 背景アニメーション */
.background-animation {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle, rgba(255,255,255,0.1), rgba(0,0,0,0) 70%);
animation: glow 5s infinite alternate;
pointer-events: none;
}
@keyframes glow {
from {
opacity: 0.4;
}
to {
opacity: 0.7;
}
}
</style>
</head>
<body>
<div class="chat-container">
<h2>神と対話するAI</h2>
<div class="messages" id="messages"></div>
<div class="input-container">
<input type="text" id="userInput" placeholder="質問を入力してください...">
<button onclick="sendMessage()">送信</button>
</div>
<div class="background-animation"></div>
</div>
<script>
const messagesContainer = document.getElementById("messages");
function addMessage(content, className) {
const message = document.createElement("div");
message.className = "message " + className;
message.innerHTML = content;
messagesContainer.appendChild(message);
messagesContainer.scrollTop = messagesContainer.scrollHeight;
}
function getAIResponse(userMessage) {
const responses = {
"目的": [
"あなたの目的はあなたの選択の中にあります。心を澄まし、その小さな声に耳を傾けなさい。",
"目的は定まっているものではなく、あなたが形作るものです。勇気を持って探し続けなさい。"
],
"未来": [
"未来は揺れ動く霧のようなもの…手の中にありながら捉えられぬもの。だが、あなたの意思がその霧を晴らすだろう。",
"未来は、あなたの内にある希望が灯し出すもの。信じる道を歩みなさい。"
],
"愛": [
"愛とは、無限に与えること。光のようにあなたを包み、他者を受け入れるものです。",
"愛とは、心の中の静けさと繋がり、他者の存在をただあるがままに受け入れること。"
],
"default": [
"その問いの答えは、あなた自身が見つけ出すもの。内なる声を信じなさい。",
"すべての答えは既にあなたの心の中にあります。耳を澄まし、その声に従いなさい。"
]
};
const keywords = Object.keys(responses);
for (let keyword of keywords) {
if (userMessage.includes(keyword)) {
const possibleResponses = responses[keyword];
return possibleResponses[Math.floor(Math.random() * possibleResponses.length)];
}
}
const defaultResponses = responses["default"];
return defaultResponses[Math.floor(Math.random() * defaultResponses.length)];
}
function sendMessage() {
const userInput = document.getElementById("userInput").value.trim();
if (userInput === "") return;
addMessage(userInput, "user-message");
document.getElementById("userInput").value = "";
const aiResponse = getAIResponse(userInput);
// タイピングエフェクトを表示
setTimeout(() => {
addMessage(`<span class="typing-indicator">...</span>`, "ai-message");
setTimeout(() => {
messagesContainer.lastChild.remove();
addMessage(aiResponse, "ai-message");
}, 2000); // タイピングエフェクト表示後の応答
}, 800); // 遅延で自然な応答
}
</script>
</body>
</html>
勇者の聖典.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>勇者の聖典 - クエスト＆バトル</title>
<style>
body {
font-family: 'Verdana', sans-serif;
background-color: #121212;
color: white;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
}
header {
text-align: center;
padding: 20px;
background-color: rgba(0, 0, 0, 0.9);
width: 100%;
position: fixed;
top: 0;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
}
h1 {
font-size: 50px;
margin: 0;
text-shadow: 2px 2px 10px #ffcc00;
}
.container {
background-color: rgba(0, 0, 0, 0.9);
padding: 30px;
border-radius: 15px;
text-align: center;
width: 90%;
max-width: 600px;
margin-top: 100px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
}
.button {
padding: 15px 30px;
font-size: 18px;
margin: 10px;
cursor: pointer;
background-color: #ffcc00;
border: none;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #ffaa00;
}
.hidden {
display: none;
}
footer {
background-color: rgba(0, 0, 0, 0.9);
padding: 20px;
width: 100%;
text-align: center;
position: absolute;
bottom: 0;
}
select {
font-size: 18px;
padding: 10px;
margin: 10px;
background-color: #444;
color: white;
border: none;
border-radius: 5px;
}
</style>
</head>
<body>
<header>
<h1>勇者の聖典 - クエスト＆バトル</h1>
</header>
<!-- メニュー画面 -->
<div class="container" id="menu-container">
<h2>メニュー</h2>
<button class="button" onclick="showTraining()">訓練場</button>
<button class="button" onclick="showQuests()">クエストへ</button>
<button class="button" onclick="showEquipment()">装備</button>
<button class="button" onclick="showEnhancement()">装備の強化</button>
</div>
<!-- 訓練場画面 -->
<div class="container hidden" id="training-container">
<h2>訓練を行ってレベルアップしましょう！</h2>
<div class="training-actions">
<button class="button" onclick="train('軽い訓練', 50)">軽い訓練 (50 XP)</button>
<button class="button" onclick="train('中程度の訓練', 100)">中程度の訓練 (100 XP)</button>
<button class="button" onclick="train('厳しい訓練', 200)">厳しい訓練 (200 XP)</button>
</div>
<button class="button" onclick="returnToMenu()">メニューに戻る</button>
</div>
<!-- クエスト選択画面 -->
<div class="container hidden" id="quest-container">
<h2>クエストを選んでください</h2>
<div class="quests">
<button class="button" onclick="startQuest('王国への召喚', 'なし', 0, 0, 50, 'なし')">
王国への召喚 (50 XP)
</button>
<button class="button" onclick="startQuest('初めての試練', 'ゴブリン', 500, 50, 70, '光の剣')">
初めての試練 (70 XP)
</button>
<button class="button" onclick="startQuest('燃え盛る山の危機', '火山の魔物', 1800, 250, 200, '炎の剣')">
燃え盛る山の危機 (200 XP)
</button>
<button class="button" onclick="startQuest('氷の洞窟の秘宝', '氷の魔物', 2000, 220, 250, 'アイススピア')">
氷の洞窟の秘宝 (250 XP)
</button>
</div>
<button class="button" onclick="returnToMenu()">メニューに戻る</button>
</div>
<!-- 装備画面 -->
<div class="container hidden" id="equipment-container">
<h2>装備を選んでください</h2>
<select id="equipment-select">
<option value="光の剣">光の剣 (攻撃力 +20)</option>
<option value="ドラゴンの鱗の盾">ドラゴンの鱗の盾 (防御力 +30)</option>
<option value="精霊の指輪">精霊の指輪 (防御力 +10, 攻撃力 +10)</option>
<option value="炎の剣">炎の剣 (攻撃力 +40)</option>
<option value="アイススピア">アイススピア (攻撃力 +25, 防御力 +10)</option>
<option value="暗黒の大剣">暗黒の大剣 (攻撃力 +50, 防御力 -10)</option>
</select>
<button class="button" onclick="equipItem()">装備する</button>
<button class="button" onclick="returnToMenu()">メニューに戻る</button>
</div>
<!-- 装備の強化画面 -->
<div class="container hidden" id="enhancement-container">
<h2>装備の強化</h2>
<select id="enhance-select">
<option value="光の剣">光の剣 (攻撃力 +20)</option>
<option value="ドラゴンの鱗の盾">ドラゴンの鱗の盾 (防御力 +30)</option>
<option value="精霊の指輪">精霊の指輪 (防御力 +10, 攻撃力 +10)</option>
<option value="炎の剣">炎の剣 (攻撃力 +40)</option>
<option value="アイススピア">アイススピア (攻撃力 +25, 防御力 +10)</option>
<option value="暗黒の大剣">暗黒の大剣 (攻撃力 +50, 防御力 -10)</option>
</select>
<button class="button" onclick="enhanceItem()">強化する</button>
<button class="button" onclick="returnToMenu()">メニューに戻る</button>
</div>
<!-- 戦闘画面 -->
<div class="container hidden" id="battle-container">
<h2 id="battle-title">敵と戦っています...</h2>
<div class="status">
<div id="player-status">
<h3>勇者のステータス</h3>
<p>HP: <span id="player-hp">1000</span></p>
<p>攻撃力: <span id="player-attack">100</span></p>
<p>防御力: <span id="player-defense">50</span></p>
<p>レベル: <span id="player-level">1</span></p>
<p>経験値: <span id="player-xp">0</span> / <span id="xp-to-next-level">100</span></p>
</div>
<div id="enemy-status">
<h3>敵のステータス</h3>
<p>名前: <span id="enemy-name">ドラゴン</span></p>
<p>HP: <span id="enemy-hp">1000</span></p>
<p>攻撃力: <span id="enemy-attack">150</span></p>
</div>
</div>
<div class="actions">
<button class="button" onclick="attack()">攻撃</button>
<button class="button" onclick="useSkill()">スキル使用</button>
<button class="button" onclick="useItem()">アイテム使用</button>
</div>
</div>
<!-- 報酬画面 -->
<div class="container hidden" id="reward-container">
<h2>クエスト完了！</h2>
<p id="reward-message">報酬を受け取って次のクエストへ進みましょう。</p>
<p id="item-reward">獲得したアイテム: <span id="reward-item"></span></p>
<button class="button" onclick="startNextQuest()">次のクエストへ</button>
<button class="button" onclick="returnToMenu()">メニューに戻る</button>
</div>
<script>
let player = {
class: '',
hp: 1000,
maxHp: 1000,
attack: 100,
defense: 50,
level: 1,
xp: 0,
xpToNextLevel: 100,
skills: [],
inventory: {
healingPotion: 2,
items: []
},
equipped: {
weapon: '',
shield: ''
}
};
let enemy = {
name: '',
hp: 0,
attack: 0
};
let currentQuestReward = '';
function train(trainingType, xpEarned) {
alert(`${trainingType}を行い、${xpEarned} XPを獲得しました！`);
player.xp += xpEarned;
checkLevelUp();
}
function checkLevelUp() {
while (player.xp >= player.xpToNextLevel) {
player.level++;
player.xp -= player.xpToNextLevel;
player.xpToNextLevel += 50; // 次のレベルアップに必要なXPを増加
player.maxHp += 100; // レベルアップでHPが上昇
player.attack += 10; // レベルアップで攻撃力が上昇
player.defense += 5; // レベルアップで防御力が上昇
alert(`レベルアップ！現在のレベルは ${player.level} です！`);
}
updateStatus();
}
function updateStatus() {
document.getElementById('player-hp').textContent = player.hp;
document.getElementById('player-attack').textContent = player.attack;
document.getElementById('player-defense').textContent = player.defense;
document.getElementById('player-level').textContent = player.level;
document.getElementById('player-xp').textContent = player.xp;
document.getElementById('xp-to-next-level').textContent = player.xpToNextLevel;
}
function showTraining() {
document.getElementById('menu-container').classList.add('hidden');
document.getElementById('training-container').classList.remove('hidden');
}
function returnToMenu() {
document.getElementById('training-container').classList.add('hidden');
document.getElementById('quest-container').classList.add('hidden');
document.getElementById('battle-container').classList.add('hidden');
document.getElementById('reward-container').classList.add('hidden');
document.getElementById('equipment-container').classList.add('hidden');
document.getElementById('enhancement-container').classList.add('hidden');
document.getElementById('menu-container').classList.remove('hidden');
}
function showQuests() {
document.getElementById('menu-container').classList.add('hidden');
document.getElementById('quest-container').classList.remove('hidden');
}
function showEquipment() {
document.getElementById('menu-container').classList.add('hidden');
document.getElementById('equipment-container').classList.remove('hidden');
}
function showEnhancement() {
document.getElementById('menu-container').classList.add('hidden');
document.getElementById('enhancement-container').classList.remove('hidden');
}
function startQuest(questName, enemyName, enemyHp, enemyAttack, xpReward, rewardItem) {
enemy.name = enemyName;
enemy.hp = enemyHp;
enemy.attack = enemyAttack;
currentQuestReward = rewardItem; // クエスト報酬アイテム
player.xp += xpReward; // クエスト完了時にXPを加算
document.getElementById('battle-title').textContent = `${enemyName}との戦い`;
document.getElementById('enemy-name').textContent = enemy.name;
document.getElementById('enemy-hp').textContent = enemy.hp;
document.getElementById('enemy-attack').textContent = enemy.attack;
document.getElementById('quest-container').classList.add('hidden');
document.getElementById('battle-container').classList.remove('hidden');
updateStatus();
}
function equipItem() {
const selectedItem = document.getElementById('equipment-select').value;
if (selectedItem === '光の剣') {
player.attack += 20;
player.equipped.weapon = '光の剣';
} else if (selectedItem === 'ドラゴンの鱗の盾') {
player.defense += 30;
player.equipped.shield = 'ドラゴンの鱗の盾';
} else if (selectedItem === '精霊の指輪') {
player.attack += 10;
player.defense += 10;
player.equipped.weapon = '精霊の指輪';
} else if (selectedItem === '炎の剣') {
player.attack += 40;
player.equipped.weapon = '炎の剣';
} else if (selectedItem === 'アイススピア') {
player.attack += 25;
player.defense += 10;
player.equipped.weapon = 'アイススピア';
} else if (selectedItem === '暗黒の大剣') {
player.attack += 50;
player.defense -= 10;
player.equipped.weapon = '暗黒の大剣';
}
alert(`${selectedItem}を装備しました！`);
updateStatus();
}
function enhanceItem() {
const selectedItem = document.getElementById('enhance-select').value;
if (selectedItem === '光の剣') {
player.attack += 10; // 強化による攻撃力アップ
alert('光の剣を強化して攻撃力 +10！');
} else if (selectedItem === 'ドラゴンの鱗の盾') {
player.defense += 10; // 強化による防御力アップ
alert('ドラゴンの鱗の盾を強化して防御力 +10！');
} else if (selectedItem === '精霊の指輪') {
player.attack += 5;
player.defense += 5;
alert('精霊の指輪を強化して攻撃力 +5、防御力 +5！');
} else if (selectedItem === '炎の剣') {
player.attack += 15;
alert('炎の剣を強化して攻撃力 +15！');
} else if (selectedItem === 'アイススピア') {
player.attack += 10;
player.defense += 5;
alert('アイススピアを強化して攻撃力 +10、防御力 +5！');
} else if (selectedItem === '暗黒の大剣') {
player.attack += 20;
player.defense += 5; // 強化による防御力の補正
alert('暗黒の大剣を強化して攻撃力 +20、防御力 +5！');
}
updateStatus();
}
function attack() {
const damage = Math.max(0, player.attack - enemy.attack / 4);
enemy.hp -= damage;
document.getElementById('enemy-hp').textContent = Math.max(0, enemy.hp);
if (enemy.hp <= 0) {
victory();
} else {
enemyAttack();
}
}
function enemyAttack() {
const damage = Math.max(0, enemy.attack - player.defense / 4);
player.hp -= damage;
document.getElementById('player-hp').textContent = Math.max(0, player.hp);
if (player.hp <= 0) {
defeat();
}
}
function useSkill() {
if (player.skills.length > 0) {
const skillDamage = 150; // スキルのダメージ
enemy.hp -= skillDamage;
alert(`スキルを使用して${skillDamage}ダメージを与えました！`);
document.getElementById('enemy-hp').textContent = Math.max(0, enemy.hp);
if (enemy.hp <= 0) {
victory();
} else {
enemyAttack();
}
} else {
alert("スキルをまだ習得していません！");
}
}
function useItem() {
if (player.inventory.healingPotion > 0) {
player.hp = Math.min(player.maxHp, player.hp + 200);
player.inventory.healingPotion--;
alert("回復薬を使用してHPを200回復しました！");
updateStatus();
} else {
alert("回復薬がありません！");
}
}
function victory() {
alert("勝利しました！");
document.getElementById('battle-container').classList.add('hidden');
document.getElementById('reward-container').classList.remove('hidden');
document.getElementById('reward-item').textContent = currentQuestReward;
player.inventory.items.push(currentQuestReward); // Add reward to player's items
checkLevelUp();
}
function defeat() {
alert("敗北しました！");
document.getElementById('battle-container').classList.add('hidden');
document.getElementById('quest-container').classList.remove('hidden');
}
function startNextQuest() {
document.getElementById('reward-container').classList.add('hidden');
document.getElementById('quest-container').classList.remove('hidden');
}
window.onload = function() {
document.getElementById('training-container').classList.add('hidden');
document.getElementById('quest-container').classList.add('hidden');
document.getElementById('battle-container').classList.add('hidden');
document.getElementById('reward-container').classList.add('hidden');
document.getElementById('equipment-container').classList.add('hidden');
document.getElementById('enhancement-container').classList.add('hidden');
document.getElementById('menu-container').classList.remove('hidden');
updateStatus();
};
</script>
</body>
</html>
NekoNekodouga.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ねこねこ動画 - 動画共有サイト</title>
<style>
/* ベーススタイル */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
position: fixed;
width: 100%;
top: 0;
z-index: 100;
}
header h1 {
margin: 0;
font-size: 24px;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 10px 0 0 0;
text-align: center;
}
nav ul li {
display: inline-block;
margin-right: 15px;
}
nav ul li a {
color: white;
text-decoration: none;
font-size: 16px;
}
#searchBar {
margin-top: 10px;
padding: 5px;
width: 300px;
max-width: 80%;
border: none;
border-radius: 4px;
}
.container {
margin-top: 100px;
padding: 20px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.upload-container, .video-info, .description, .comments, .related-videos, .gallery {
background-color: white;
padding: 20px;
margin-top: 20px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.upload-container h2, .video-info h2, .description h2, .comments h2, .related-videos h2, .gallery h2 {
margin-top: 0;
}
.upload-container form input[type="file"],
.upload-container form input[type="text"],
.upload-container form textarea,
.upload-container form select {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border-radius: 4px;
border: 1px solid #ccc;
}
.upload-container form button {
padding: 10px 20px;
background-color: #333;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.upload-container form button:hover {
background-color: #555;
}
.video-container {
position: relative;
text-align: center;
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.video-container video {
width: 100%;
height: auto;
border-radius: 10px;
}
.comment-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10;
}
.comment {
position: absolute;
white-space: nowrap;
font-size: 20px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
animation: moveComment linear forwards;
}
@keyframes moveComment {
from {
left: 100%;
}
to {
left: -100%;
}
}
.description p, .comments p, .gallery p {
margin: 10px 0;
}
.comments form textarea {
width: 100%;
padding: 10px;
border-radius: 4px;
border: 1px solid #ccc;
resize: vertical;
margin-bottom: 10px;
}
.comments form select {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border-radius: 4px;
}
.comments form button {
padding: 10px 20px;
background-color: #333;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.comments form button:hover {
background-color: #555;
}
.comment-list .comment {
background-color: #f9f9f9;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
}
.like-button, .dislike-button {
background-color: #333;
color: white;
border: none;
padding: 5px 10px;
margin: 5px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.like-button:hover, .dislike-button:hover {
background-color: #555;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 20px;
margin-top: 40px;
}
footer p {
margin: 0;
}
@media (max-width: 768px) {
nav ul li {
display: block;
margin: 10px 0;
}
#searchBar {
width: 80%;
}
.video-container {
max-width: 100%;
}
}
</style>
</head>
<body>
<!-- ヘッダー開始 -->
<header>
<h1>ねこねこ動画</h1>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">人気動画</a></li>
<li><a href="#">カテゴリ</a></li>
<li><a href="#">ログイン</a></li>
</ul>
</nav>
<input type="text" id="searchBar" placeholder="動画を検索..." />
</header>
<!-- ヘッダー終了 -->
<div class="container">
<!-- 動画アップロードエリア -->
<div class="upload-container">
<h2>動画をアップロード</h2>
<form id="uploadForm" enctype="multipart/form-data">
<input type="file" id="videoFile" name="video" accept="video/*" required><br>
<input type="text" id="videoTitle" name="title" placeholder="動画タイトル" required><br>
<textarea id="videoDescription" name="description" rows="4" placeholder="動画の説明" required></textarea><br>
<button type="submit">アップロード</button>
</form>
<div id="uploadStatus"></div>
</div>
<!-- プレビューエリア -->
<div class="video-container" id="previewContainer" style="display: none;">
<h2 id="previewTitle">プレビュー: 動画タイトル</h2>
<video controls id="videoPreview"></video>
<div class="comment-overlay" id="commentOverlay"></div>
<p id="previewDescription">プレビュー: 動画の説明</p>
</div>
<!-- コメント投稿エリア -->
<div class="comments">
<h2>コメントを投稿</h2>
<form id="commentForm">
<textarea id="commentText" rows="4" cols="50" placeholder="コメントを追加..." required></textarea><br>
<label for="commentTime">表示タイミング (秒):</label>
<input type="number" id="commentTime" placeholder="0" min="0" required><br>
<label for="commentColor">コメントの色:</label>
<select id="commentColor">
<option value="white">白</option>
<option value="red">赤</option>
<option value="blue">青</option>
<option value="green">緑</option>
<option value="yellow">黄色</option>
</select><br>
<label for="commentFontSize">フォントサイズ:</label>
<select id="commentFontSize">
<option value="20px">小</option>
<option value="24px">中</option>
<option value="28px">大</option>
</select><br>
<label for="commentSpeed">表示速度 (秒):</label>
<input type="number" id="commentSpeed" placeholder="10" min="5" max="20" required><br>
<button type="submit">投稿</button>
</form>
<div id="commentList" class="comment-list"></div>
</div>
<!-- 評価機能 -->
<div class="rating">
<button class="like-button" id="likeButton">👍 いいね</button>
<span id="likeCount">0</span>
<button class="dislike-button" id="dislikeButton">👎 バッド</button>
<span id="dislikeCount">0</span>
</div>
</div>
<!-- フッター開始 -->
<footer>
<p>© 2023 ねこねこ動画. All Rights Reserved.</p>
</footer>
<!-- フッター終了 -->
<script>
let comments = [];
// 動画のアップロードとプレビュー処理
document.getElementById("uploadForm").addEventListener("submit", function(event) {
event.preventDefault();
const fileInput = document.getElementById("videoFile");
const file = fileInput.files[0];
const title = document.getElementById("videoTitle").value;
const description = document.getElementById("videoDescription").value;
if (!file) {
alert("動画ファイルを選択してください。");
return;
}
const reader = new FileReader();
reader.onload = function(e) {
const videoData = e.target.result;
document.getElementById("previewContainer").style.display = "block";
document.getElementById("videoPreview").src = videoData;
document.getElementById("previewTitle").textContent = "プレビュー: " + title;
document.getElementById("previewDescription").textContent = "プレビュー: " + description;
};
reader.readAsDataURL(file);
});
// コメント投稿処理
document.getElementById("commentForm").addEventListener("submit", function(event) {
event.preventDefault();
const commentText = document.getElementById("commentText").value;
const commentTime = parseInt(document.getElementById("commentTime").value);
const commentColor = document.getElementById("commentColor").value;
const commentFontSize = document.getElementById("commentFontSize").value;
const commentSpeed = parseInt(document.getElementById("commentSpeed").value);
if (commentText && commentTime >= 0) {
const comment = {
text: commentText,
time: commentTime,
color: commentColor,
fontSize: commentFontSize,
speed: commentSpeed
};
comments.push(comment);
displayCommentInList(comment);
document.getElementById("commentForm").reset();
}
});
// コメントリストに表示
function displayCommentInList(comment) {
const commentList = document.getElementById("commentList");
const commentDiv = document.createElement("div");
commentDiv.classList.add("comment");
commentDiv.textContent = `タイミング: ${comment.time}秒 - ${comment.text}`;
commentList.appendChild(commentDiv);
}
// 動画の再生に合わせてコメントを表示
const videoElement = document.getElementById("videoPreview");
videoElement.addEventListener("timeupdate", function() {
const currentTime = Math.floor(videoElement.currentTime);
comments.forEach(comment => {
if (comment.time === currentTime) {
displayCommentOnVideo(comment);
}
});
});
// 動画上にコメントを流す
function displayCommentOnVideo(comment) {
const overlay = document.getElementById("commentOverlay");
const commentElement = document.createElement("div");
commentElement.classList.add("comment");
commentElement.textContent = comment.text;
commentElement.style.color = comment.color;
commentElement.style.fontSize = comment.fontSize;
commentElement.style.animationDuration = `${comment.speed}s`;
commentElement.style.top = Math.random() * 80 + "%"; // ランダムな位置
overlay.appendChild(commentElement);
// 一定時間後にコメントを削除
setTimeout(() => {
commentElement.remove();
}, comment.speed * 1000);
}
// いいね・バッド機能
document.getElementById("likeButton").addEventListener("click", function() {
let likeCount = parseInt(document.getElementById("likeCount").textContent);
likeCount++;
document.getElementById("likeCount").textContent = likeCount;
});
document.getElementById("dislikeButton").addEventListener("click", function() {
let dislikeCount = parseInt(document.getElementById("dislikeCount").textContent);
dislikeCount++;
document.getElementById("dislikeCount").textContent = dislikeCount;
});
</script>
</body>
</html>
ELDER.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ELDER - ソーシャルネットワーキングサービス</title>
<!-- CSSファイルの読み込み -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
<!-- RiTa.jsライブラリの読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/rita/1.3.63/rita-full.min.js"></script>
<style>
/* 既存のスタイルシート */
body {
padding-top: 20px;
background: linear-gradient(to right, #f8f9fa, #e9ecef);
font-family: 'Arial', sans-serif;
color: #343a40;
}
.navbar {
background-color: #007bff;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.navbar-brand,
.nav-link {
color: #fff !important;
font-weight: bold;
}
.navbar-toggler {
border: none;
}
.card {
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.card-body {
padding: 30px;
}
.form-control {
border-radius: 20px;
border: 1px solid #ced4da;
padding: 15px;
transition: border-color 0.3s;
}
.form-control:focus {
border-color: #007bff;
box-shadow: none;
}
.btn-primary {
background-color: #007bff;
border: none;
border-radius: 20px;
padding: 10px 20px;
font-weight: bold;
transition: background-color 0.3s, transform 0.3s;
}
.btn-primary:hover {
background-color: #0056b3;
transform: translateY(-3px);
}
.btn-secondary {
border-radius: 20px;
padding: 10px 20px;
font-weight: bold;
transition: background-color 0.3s, transform 0.3s;
}
.btn-secondary:hover {
background-color: #6c757d;
transform: translateY(-3px);
}
.profile-img {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 50%;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.text-center h1 {
font-weight: 700;
font-size: 2.5em;
margin-bottom: 20px;
color: #007bff;
}
.comment-section {
margin-top: 20px;
padding: 20px;
background-color: #f1f3f5;
border-radius: 8px;
}
.comment-section .card {
border: none;
background: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.modal-content {
border-radius: 15px;
overflow: hidden;
}
.modal-header {
background-color: #007bff;
color: white;
border-bottom: none;
}
.modal-footer {
border-top: none;
}
.form-error {
color: red;
font-size: 0.9em;
}
/* タイムラインのデザイン */
#timeline {
margin-top: 20px;
}
#timeline .card {
border-radius: 15px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
overflow: hidden;
background-color: #fff;
}
#timeline .card-body {
padding: 20px;
}
#timeline .btn {
border-radius: 20px;
}
/* 投稿のシェアボタン */
.btn-share {
background-color: #ff9800;
border: none;
border-radius: 20px;
padding: 5px 10px;
color: #fff;
font-weight: bold;
transition: background-color 0.3s;
}
.btn-share:hover {
background-color: #e68900;
}
/* X（旧Twitter）シェアボタン */
.btn-share-twitter {
background-color: #1da1f2;
border: none;
border-radius: 20px;
padding: 5px 10px;
color: #fff;
font-weight: bold;
transition: background-color 0.3s;
}
.btn-share-twitter:hover {
background-color: #1480bf;
}
/* 通知エリア */
#notificationArea {
position: fixed;
top: 80px;
right: 20px;
z-index: 1000;
max-width: 300px;
}
/* FEEDアイコンをRSSの文字に変更 */
.nav-item .rss-icon {
font-weight: bold;
color: #fff;
}
</style>
</head>
<body>
<!-- ナビゲーションバー -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">ELDER</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーションの切り替え">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#" onclick="showLoginForm()">ログイン</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" onclick="showRegisterForm()">登録</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" onclick="showProfile()" style="display: none;" id="navProfile">プロフィール</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" onclick="logout()" style="display: none;" id="navLogout">ログアウト</a>
</li>
<!-- FEEDアイコンをRSSの文字に変更 -->
<li class="nav-item" id="navFeed" style="display: none;">
<a class="nav-link rss-icon" href="#" onclick="showFeedForm()">RSS</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<!-- ログインフォーム -->
<div id="loginForm" class="card w-50 mx-auto">
<div class="card-body">
<h2 class="card-title text-center mb-4">ログイン</h2>
<div class="form-group">
<input type="text" id="loginUsername" class="form-control" placeholder="ユーザー名">
<span id="loginUsernameError" class="form-error" style="display: none;">ユーザー名を入力してください</span>
</div>
<div class="form-group">
<input type="password" id="loginPassword" class="form-control" placeholder="パスワード">
<span id="loginPasswordError" class="form-error" style="display: none;">パスワードを入力してください</span>
</div>
<button onclick="login()" class="btn btn-primary btn-block">ログイン</button>
<button onclick="showRegisterForm()" class="btn btn-secondary btn-block">登録</button>
</div>
</div>
<!-- 登録フォーム -->
<div id="registerForm" class="card w-50 mx-auto" style="display: none;">
<div class="card-body">
<h2 class="card-title text-center mb-4">登録</h2>
<div class="form-group">
<input type="text" id="registerName" class="form-control" placeholder="氏名">
<span id="registerNameError" class="form-error" style="display: none;">氏名を入力してください</span>
</div>
<div class="form-group">
<input type="text" id="registerUsername" class="form-control" placeholder="ユーザー名">
<span id="registerUsernameError" class="form-error" style="display: none;">ユーザー名を入力してください</span>
</div>
<div class="form-group">
<input type="password" id="registerPassword" class="form-control" placeholder="パスワード">
<span id="registerPasswordError" class="form-error" style="display: none;">パスワードを入力してください</span>
</div>
<div class="form-group">
<input type="password" id="registerConfirmPassword" class="form-control" placeholder="パスワードを確認">
<span id="registerConfirmPasswordError" class="form-error" style="display: none;">パスワードが一致しません</span>
</div>
<button onclick="register()" class="btn btn-primary btn-block">登録</button>
<button onclick="showLoginForm()" class="btn btn-secondary btn-block">ログインに戻る</button>
</div>
</div>
<!-- プロフィール -->
<div id="profile" class="card w-50 mx-auto" style="display: none;">
<div class="card-body">
<h2 class="card-title text-center mb-4">プロフィール</h2>
<div class="text-center mb-3">
<img id="profileImg" class="profile-img" src="default_profile_img.jpg" alt="プロフィール画像">
</div>
<p class="text-center mb-2"><strong>氏名:</strong> <span id="profileName"></span></p>
<p class="text-center mb-4"><strong>ユーザー名:</strong> <span id="profileUsername"></span></p>
<div class="form-group">
<input type="file" id="profileImageInput" accept="image/*" class="form-control-file">
</div>
<button onclick="uploadProfileImage()" class="btn btn-primary btn-block"><i class="fas fa-upload"></i> プロフィール画像をアップロード</button>
<button onclick="logout()" class="btn btn-danger btn-block"><i class="fas fa-sign-out-alt"></i> ログアウト</button>
</div>
</div>
<!-- 投稿フォーム -->
<div id="postForm" class="card w-75 mx-auto" style="display: none;">
<div class="card-body">
<h2 class="card-title text-center mb-4">投稿を作成</h2>
<div class="form-group">
<textarea id="postContent" class="form-control" rows="3" placeholder="今何を考えていますか？"></textarea>
</div>
<button onclick="createPost()" class="btn btn-primary btn-block">投稿</button>
</div>
</div>
<!-- FEED登録フォーム -->
<div id="feedForm" class="card w-75 mx-auto" style="display: none;">
<div class="card-body">
<h2 class="card-title text-center mb-4">FEEDを登録</h2>
<div class="form-group">
<input type="text" id="feedUrl" class="form-control" placeholder="RSSフィードのURL">
<span id="feedUrlError" class="form-error" style="display: none;">RSSフィードのURLを入力してください</span>
</div>
<button onclick="registerFeed()" class="btn btn-primary btn-block">登録</button>
<div class="form-group mt-4">
<label for="feedInterval">自動投稿の間隔（秒）:</label>
<input type="number" id="feedInterval" class="form-control" placeholder="例：60" min="1">
</div>
<button onclick="setFeedInterval()" class="btn btn-secondary btn-block">間隔を設定</button>
</div>
</div>
<!-- AIBOT投稿登録フォーム -->
<div id="aiBotForm" class="card w-75 mx-auto" style="display: none;">
<div class="card-body">
<h2 class="card-title text-center mb-4">BOT投稿を登録</h2>
<div class="form-group">
<textarea id="aiBotContent" class="form-control" rows="3" placeholder="BOTに投稿させたい内容を入力してください"></textarea>
</div>
<button onclick="registerAiBotPost()" class="btn btn-primary btn-block">BOT投稿を登録</button>
</div>
</div>
<!-- タイムライン -->
<div id="timeline" class="w-75 mx-auto mt-4"></div>
<!-- 通知エリア -->
<div id="notificationArea" class="alert alert-info" style="display: none;"></div>
</div>
<!-- リプライモーダル -->
<div class="modal fade" id="replyModal" tabindex="-1" role="dialog" aria-labelledby="replyModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<!-- モーダルの内容は後ほどJavaScriptで制御します -->
<div class="modal-header">
<h5 class="modal-title" id="replyModalLabel">投稿に返信</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="閉じる">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<textarea id="replyContent" class="form-control" rows="3" placeholder="返信をここに書いてください..."></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
<button type="button" onclick="postReply()" class="btn btn-primary">返信</button>
</div>
</div>
</div>
</div>
<!-- スクリプトの読み込み -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<!-- BootstrapのJavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- RiTa.jsライブラリの読み込み（既にhead内で読み込み済み） -->
<script>
// ユーザー、投稿、フィード、チャット関連のデータ
let currentUser = null;
let users = [];
let posts = [];
let feeds = [];
let notifications = [];
let aiBotPosts = [];
let feedFetchInterval = 60000; // デフォルトは60,000ミリ秒（60秒）
let feedFetchTimer;
let markovBotInterval = 60000; // マルコフ連鎖BOTの投稿間隔
// ローカルストレージの読み込み・保存関連の関数
function saveUsersToLocalStorage() {
localStorage.setItem('users', JSON.stringify(users));
}
function savePostsToLocalStorage() {
localStorage.setItem('posts', JSON.stringify(posts));
}
function saveFeedsToLocalStorage() {
localStorage.setItem('feeds', JSON.stringify(feeds));
}
function saveAiBotPostsToLocalStorage() {
localStorage.setItem('aiBotPosts', JSON.stringify(aiBotPosts));
}
function saveCurrentUserToLocalStorage() {
if (currentUser) {
localStorage.setItem('currentUser', JSON.stringify(currentUser));
} else {
localStorage.removeItem('currentUser');
}
}
function loadUsersFromLocalStorage() {
const storedUsers = localStorage.getItem('users');
if (storedUsers) {
users = JSON.parse(storedUsers);
}
}
function loadPostsFromLocalStorage() {
const storedPosts = localStorage.getItem('posts');
if (storedPosts) {
posts = JSON.parse(storedPosts);
}
}
function loadFeedsFromLocalStorage() {
const storedFeeds = localStorage.getItem('feeds');
if (storedFeeds) {
feeds = JSON.parse(storedFeeds);
}
}
function loadAiBotPostsFromLocalStorage() {
const storedAiBotPosts = localStorage.getItem('aiBotPosts');
if (storedAiBotPosts) {
aiBotPosts = JSON.parse(storedAiBotPosts);
}
}
function loadCurrentUserFromLocalStorage() {
const storedCurrentUser = localStorage.getItem('currentUser');
if (storedCurrentUser) {
currentUser = JSON.parse(storedCurrentUser);
}
}
// フォームの表示・非表示
function hideAll() {
document.getElementById('loginForm').style.display = 'none';
document.getElementById('registerForm').style.display = 'none';
document.getElementById('profile').style.display = 'none';
document.getElementById('postForm').style.display = 'none';
document.getElementById('feedForm').style.display = 'none';
document.getElementById('aiBotForm').style.display = 'none';
}
function showLoginForm() {
hideAll();
document.getElementById('loginForm').style.display = 'block';
document.getElementById('navProfile').style.display = 'none';
document.getElementById('navLogout').style.display = 'none';
document.getElementById('navFeed').style.display = 'none';
}
function showRegisterForm() {
hideAll();
document.getElementById('registerForm').style.display = 'block';
}
function showProfile() {
hideAll();
document.getElementById('profile').style.display = 'block';
document.getElementById('profileName').textContent = currentUser.name;
document.getElementById('profileUsername').textContent = currentUser.username;
document.getElementById('postForm').style.display = 'block';
document.getElementById('feedForm').style.display = 'block';
document.getElementById('aiBotForm').style.display = 'block';
loadProfileImage(); // プロフィール画像をロード
displayTimeline(); // タイムラインを表示
document.getElementById('navProfile').style.display = 'block';
document.getElementById('navLogout').style.display = 'block';
document.getElementById('navFeed').style.display = 'block'; // RSSナビゲーションを表示
}
function showFeedForm() {
hideAll();
document.getElementById('feedForm').style.display = 'block';
}
// ユーザー認証関連の関数
function validateLoginForm() {
let valid = true;
const username = document.getElementById('loginUsername').value;
const password = document.getElementById('loginPassword').value;
if (!username) {
document.getElementById('loginUsernameError').style.display = 'block';
valid = false;
} else {
document.getElementById('loginUsernameError').style.display = 'none';
}
if (!password) {
document.getElementById('loginPasswordError').style.display = 'block';
valid = false;
} else {
document.getElementById('loginPasswordError').style.display = 'none';
}
return valid;
}
function login() {
if (!validateLoginForm()) {
return;
}
const username = document.getElementById('loginUsername').value;
const password = document.getElementById('loginPassword').value;
const user = users.find(u => u.username === username && u.password === password);
if (user) {
currentUser = user;
saveCurrentUserToLocalStorage(); // currentUserを保存
showProfile();
} else {
alert('ユーザー名またはパスワードが間違っています。');
}
}
function logout() {
currentUser = null;
saveCurrentUserToLocalStorage(); // currentUserを削除
hideAll();
showLoginForm();
}
function validateRegisterForm() {
let valid = true;
const name = document.getElementById('registerName').value;
const username = document.getElementById('registerUsername').value;
const password = document.getElementById('registerPassword').value;
const confirmPassword = document.getElementById('registerConfirmPassword').value;
if (!name) {
document.getElementById('registerNameError').style.display = 'block';
valid = false;
} else {
document.getElementById('registerNameError').style.display = 'none';
}
if (!username) {
document.getElementById('registerUsernameError').style.display = 'block';
valid = false;
} else {
document.getElementById('registerUsernameError').style.display = 'none';
}
// ユーザー名の重複チェック
if (users.find(u => u.username === username)) {
document.getElementById('registerUsernameError').textContent = 'このユーザー名は既に使用されています';
document.getElementById('registerUsernameError').style.display = 'block';
valid = false;
} else {
document.getElementById('registerUsernameError').style.display = 'none';
}
if (!password) {
document.getElementById('registerPasswordError').style.display = 'block';
valid = false;
} else {
document.getElementById('registerPasswordError').style.display = 'none';
}
if (password !== confirmPassword) {
document.getElementById('registerConfirmPasswordError').style.display = 'block';
valid = false;
} else {
document.getElementById('registerConfirmPasswordError').style.display = 'none';
}
return valid;
}
function register() {
if (!validateRegisterForm()) {
return;
}
const name = document.getElementById('registerName').value;
const username = document.getElementById('registerUsername').value;
const password = document.getElementById('registerPassword').value;
users.push({ name, username, password, profileImage: null });
saveUsersToLocalStorage(); // ユーザー情報を保存
alert('登録が完了しました！ログインしてください。');
showLoginForm();
}
// プロフィール画像の処理
function loadProfileImage() {
const profileImg = document.getElementById('profileImg');
// プロフィール画像が設定されている場合はその画像を表示
if (currentUser.profileImage) {
profileImg.src = currentUser.profileImage;
} else {
// デフォルトのプロフィール画像を表示
profileImg.src = 'default_profile_img.jpg';
}
}
function uploadProfileImage() {
const input = document.getElementById('profileImageInput');
const file = input.files[0];
if (file) {
// FileReaderを使用して画像を読み込む
const reader = new FileReader();
reader.onload = function(e) {
// 読み込んだ画像をプロフィール画像として設定
currentUser.profileImage = e.target.result;
// プロフィール画像を更新して表示
loadProfileImage();
saveUsersToLocalStorage(); // プロフィール画像を保存
saveCurrentUserToLocalStorage(); // currentUserを更新
}
reader.readAsDataURL(file);
}
}
// AIBOT投稿を登録
function registerAiBotPost() {
const content = document.getElementById('aiBotContent').value;
if (content.trim() !== '') {
aiBotPosts.push(content);
saveAiBotPostsToLocalStorage();
alert("BOTの投稿が登録されました！");
document.getElementById('aiBotContent').value = ''; // 入力欄を空にする
}
}
// AIBOTが定期的に投稿
function postAiBotContent() {
if (aiBotPosts.length > 0) {
const content = aiBotPosts[Math.floor(Math.random() * aiBotPosts.length)];
const aiUser = {
name: 'BOT',
username: 'bot',
profileImage: 'default_ai_profile_img.jpg'
};
const post = {
id: Date.now(),
content: content,
author: aiUser.name,
authorUsername: aiUser.username,
authorProfileImage: aiUser.profileImage,
likes: 0,
comments: []
};
posts.unshift(post);
savePostsToLocalStorage();
displayTimeline();
}
}
setInterval(postAiBotContent, 500000); // 50,000ミリ秒 = 50秒
// マルコフ連鎖を使用した自動投稿BOT
function generateMarkovChainText(order = 2) {
const allTexts = posts.map(post => post.content).join(' ');
if (allTexts.length < 100) return null; // テキストが短すぎる場合は生成しない
const markov = new RiTa.Markov(order);
markov.addText(allTexts);
const sentences = markov.generate(1);
return sentences[0];
}
function postMarkovBotContent() {
const generatedText = generateMarkovChainText(3); // 階数を3に設定
if (generatedText) {
const botUser = {
name: 'MarkovBot',
username: 'markovbot',
profileImage: 'markov_bot_profile_img.jpg'
};
const post = {
id: Date.now(),
content: generatedText,
author: botUser.name,
authorUsername: botUser.username,
authorProfileImage: botUser.profileImage,
likes: 0,
comments: []
};
posts.unshift(post);
savePostsToLocalStorage();
displayTimeline();
}
}
setInterval(postMarkovBotContent, markovBotInterval); // マルコフ連鎖BOTの投稿間隔
// 投稿関連の関数
function createPost() {
const postContent = document.getElementById('postContent').value;
if (postContent.trim() !== '') {
const post = {
id: Date.now(),
content: postContent,
author: currentUser.name,
authorUsername: currentUser.username,
authorProfileImage: currentUser.profileImage,
likes: 0,
comments: [],
shares: 0
};
posts.unshift(post); // 最新の投稿を先頭に追加
savePostsToLocalStorage(); // 投稿を保存
displayTimeline();
document.getElementById('postContent').value = ''; // 投稿後、入力欄を空にする
}
}
function displayTimeline() {
const timeline = document.getElementById('timeline');
timeline.innerHTML = '';
posts.forEach(post => {
const postElement = document.createElement('div');
postElement.classList.add('card', 'mb-3');
postElement.innerHTML = `
<div class="card-body">
<div class="d-flex align-items-center mb-3">
<img src="${post.authorProfileImage || 'default_profile_img.jpg'}" class="profile-img mr-2" alt="プロフィール画像">
<div>
<strong>${post.author}</strong> (@${post.authorUsername})
${post.shared ? '<span class="badge badge-info ml-2">シェア</span>' : ''}
</div>
</div>
<p class="card-text">${post.content}</p>
${post.link ? `<a href="${post.link}" target="_blank" class="btn btn-link">続きを読む</a>` : ''}
<div class="d-flex justify-content-between">
<div>
<button onclick="likePost(${post.id})" class="btn btn-primary btn-sm"><i class="fas fa-thumbs-up"></i> いいね (${post.likes})</button>
<button onclick="toggleComments(${post.id})" class="btn btn-secondary btn-sm"><i class="fas fa-comments"></i> コメント (${post.comments.length})</button>
<button onclick="replyToPost(${post.id})" class="btn btn-info btn-sm"><i class="fas fa-reply"></i> 返信</button>
<button onclick="sharePost(${post.id})" class="btn btn-share btn-sm"><i class="fas fa-share"></i> シェア (${post.shares || 0})</button>
<button onclick="shareToTwitter(${post.id})" class="btn btn-share-twitter btn-sm"><i class="fab fa-twitter"></i> Xでシェア</button>
</div>
<small class="text-muted">${new Date(post.id).toLocaleString()}</small>
</div>
<div id="comments-${post.id}" class="comment-section mt-3" style="display: none;">
${post.comments.map(comment => `
<div class="card mb-2">
<div class="card-body">
<p><strong>${comment.author}</strong>: ${comment.content}</p>
</div>
</div>
`).join('')}
</div>
</div>
`;
timeline.appendChild(postElement);
});
}
// いいね機能
function likePost(postId) {
const post = posts.find(p => p.id === postId);
post.likes++;
savePostsToLocalStorage();
displayTimeline();
}
// コメント表示切替
function toggleComments(postId) {
const commentSection = document.getElementById(`comments-${postId}`);
commentSection.style.display = commentSection.style.display === 'none' ? 'block' : 'none';
}
// リプライ機能
function replyToPost(postId) {
const modal = document.getElementById('replyModal');
modal.dataset.postId = postId;
$('#replyModal').modal('show');
}
function postReply() {
const postId = parseInt(document.getElementById('replyModal').dataset.postId);
const post = posts.find(p => p.id === postId);
const replyContent = document.getElementById('replyContent').value;
if (replyContent.trim() !== '') {
post.comments.push({ author: currentUser.name, content: replyContent });
$('#replyModal').modal('hide');
savePostsToLocalStorage();
displayTimeline();
} else {
alert('返信を入力してください。');
}
}
// 投稿のシェア機能
function sharePost(postId) {
const post = posts.find(p => p.id === postId);
if (post) {
const sharedPost = {
...post,
id: Date.now(),
author: currentUser.name,
authorUsername: currentUser.username,
authorProfileImage: currentUser.profileImage,
shared: true,
likes: 0,
comments: [],
shares: post.shares ? post.shares + 1 : 1
};
posts.unshift(sharedPost);
savePostsToLocalStorage();
displayTimeline();
alert('投稿をシェアしました。');
}
}
// X（旧Twitter）にシェアする機能
function shareToTwitter(postId) {
const post = posts.find(p => p.id === postId);
if (post) {
let shareText = post.content;
if (post.link) {
shareText += ' ' + post.link;
}
const shareUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(shareText)}&url=${encodeURIComponent(window.location.href)}`;
window.open(shareUrl, '_blank');
}
}
// FEEDの登録と自動投稿機能
function registerFeed() {
const feedUrl = document.getElementById('feedUrl').value;
if (feedUrl.trim() !== '') {
feeds.push(feedUrl);
saveFeedsToLocalStorage(); // フィード情報を保存
alert('RSSフィードが登録されました！');
document.getElementById('feedUrl').value = ''; // 登録後、入力欄を空にする
} else {
document.getElementById('feedUrlError').style.display = 'block';
}
}
function fetchFeeds() {
feeds.forEach(feedUrl => {
fetch(`https://api.rss2json.com/v1/api.json?rss_url=${encodeURIComponent(feedUrl)}`)
.then(response => response.json())
.then(data => {
data.items.forEach(item => {
// 同じ投稿が既に存在するかチェック
if (!posts.some(p => p.link === item.link)) {
const post = {
id: Date.now() + Math.random(), // 重複しないIDを生成
content: item.title,
link: item.link, // リンクを追加
author: 'FEEDBOT',
authorUsername: 'feedbot',
authorProfileImage: 'feedbot_profile_img.jpg', // FEEDBOTのプロフィール画像を設定
likes: 0,
comments: []
};
posts.unshift(post); // 最新の投稿を先頭に追加
savePostsToLocalStorage(); // 投稿を保存
}
});
displayTimeline(); // タイムラインを表示
})
.catch(error => console.error('RSSフィードの取得エラー:', error));
});
}
function setFeedInterval() {
const intervalInput = document.getElementById('feedInterval').value;
if (intervalInput && parseInt(intervalInput) > 0) {
feedFetchInterval = parseInt(intervalInput) * 1000; // ミリ秒に変換
clearInterval(feedFetchTimer);
feedFetchTimer = setInterval(fetchFeeds, feedFetchInterval);
alert(`自動投稿の間隔が${intervalInput}秒に設定されました。`);
} else {
alert('有効な間隔を入力してください（1以上の数字）。');
}
}
// ページロード時にフィードの自動取得を開始
function startFeedFetch() {
feedFetchTimer = setInterval(fetchFeeds, feedFetchInterval);
}
// 初期化
function init() {
loadUsersFromLocalStorage();
loadPostsFromLocalStorage();
loadFeedsFromLocalStorage();
loadAiBotPostsFromLocalStorage();
loadCurrentUserFromLocalStorage();
if (currentUser) {
showProfile();
} else {
hideAll();
document.getElementById('loginForm').style.display = 'block';
}
displayTimeline();
startFeedFetch(); // フィードの自動取得を開始
}
// ページロード時に初期化
window.onload = init;
</script>
</body>
</html>