<!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: #fff;
padding: 10px 20px;
text-align: center;
}
nav {
background-color: #555;
color: #fff;
display: flex;
justify-content: space-around;
padding: 10px 0;
}
nav a {
color: #fff;
text-decoration: none;
padding: 10px 20px;
}
main {
display: flex;
margin: 20px;
}
aside {
width: 25%;
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
section {
width: 75%;
padding: 20px;
}
.video-player {
background-color: #000;
height: 400px;
margin-bottom: 20px;
position: relative;
}
.video-player video {
width: 100%;
height: 100%;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
}
.comments {
list-style: none;
padding: 0;
}
.comments li {
background-color: #fff;
margin-bottom: 10px;
padding: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.comment-form {
display: flex;
margin-top: 20px;
}
.comment-form input {
flex: 1;
padding: 10px;
margin-right: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
.comment-form button {
padding: 10px 20px;
border: none;
background-color: #333;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
.thumbnail {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.thumbnail img {
width: 120px;
height: 90px;
margin-right: 10px;
}
.login-form, .register-form, .upload-form, .profile {
background-color: #fff;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.login-form h2, .register-form h2, .upload-form h2, .profile h2 {
margin-top: 0;
}
.login-form input, .register-form input, .upload-form input {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
.login-form button, .register-form button, .upload-form button {
width: 100%;
padding: 10px;
border: none;
background-color: #333;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
.search-form {
display: flex;
justify-content: center;
margin: 20px 0;
}
.search-form input {
width: 70%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
.search-form button {
padding: 10px 20px;
border: none;
background-color: #333;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
.rating {
display: flex;
align-items: center;
margin-top: 10px;
}
.rating button {
border: none;
background: none;
cursor: pointer;
font-size: 1.2em;
margin-right: 10px;
}
.rating span {
margin-right: 20px;
}
</style>
</head>
<body>
<header>
<h1>ニコニコ動画風サイト</h1>
</header>
<nav>
<a href="index.html">ホーム</a>
<a href="ranking.html">ランキング</a>
<a href="categories.html">カテゴリー</a>
<a href="mypage.html">マイページ</a>
</nav>
<div class="search-form">
<input type="text" id="searchInput" placeholder="検索...">
<button onclick="search()">検索</button>
</div>
<main>
<aside>
<h2>おすすめ動画</h2>
<div class="thumbnail">
<a href="video.html"><img src="thumbnail1.jpg" alt="動画1"></a>
<a href="video.html">動画1のタイトル</a>
</div>
<div class="thumbnail">
<a href="video.html"><img src="thumbnail2.jpg" alt="動画2"></a>
<a href="video.html">動画2のタイトル</a>
</div>
<div class="thumbnail">
<a href="video.html"><img src="thumbnail3.jpg" alt="動画3"></a>
<a href="video.html">動画3のタイトル</a>
</div>
<div class="thumbnail">
<a href="video.html"><img src="thumbnail4.jpg" alt="動画4"></a>
<a href="video.html">動画4のタイトル</a>
</div>
</aside>
<section>
<div class="video-player">
<video controls>
<source src="sample.mp4" type="video/mp4">
あなたのブラウザは動画タグに対応していません。
</video>
</div>
<h2>動画タイトル</h2>
<p>動画の説明文がここに入ります。</p>
<div class="rating">
<button onclick="like()">👍</button><span id="likeCount">0</span>
<button onclick="dislike()">👎</button><span id="dislikeCount">0</span>
</div>
<h3>コメント</h3>
<ul class="comments" id="comments">
<li><span class="timestamp">12:34</span> コメント1</li>
<li><span class="timestamp">12:35</span> コメント2</li>
<li><span class="timestamp">12:36</span> コメント3</li>
<li><span class="timestamp">12:37</span> コメント4</li>
</ul>
<div class="comment-form">
<input type="text" id="commentInput" placeholder="コメントを入力してください">
<button onclick="addComment()">コメントを投稿</button>
</div>
</section>
</main>
<footer>
</footer>
<!-- Register Form -->
<div class="register-form">
<h2>ユーザー登録</h2>
<input type="text" id="registerUsername" placeholder="ユーザー名">
<input type="password" id="registerPassword" placeholder="パスワード">
<button onclick="register()">登録</button>
</div>
<!-- Login Form -->
<div class="login-form">
<h2>ログイン</h2>
<input type="text" id="loginUsername" placeholder="ユーザー名">
<input type="password" id="loginPassword" placeholder="パスワード">
<button onclick="login()">ログイン</button>
</div>
<!-- Upload Form -->
<div class="upload-form">
<h2>動画アップロード</h2>
<input type="file" id="uploadVideo">
<input type="text" id="uploadTitle" placeholder="タイトル">
<button onclick="upload()">アップロード</button>
</div>
<!-- Profile Page -->
<div class="profile">
<h2>プロフィール</h2>
<p>ユーザー名: <span id="profileUsername"></span></p>
<p>登録日: <span id="profileDate"></span></p>
</div>
<script>
let likeCount = 0;
let dislikeCount = 0;
function addComment() {
var commentInput = document.getElementById('commentInput');
var commentText = commentInput.value.trim();
if (commentText !== "") {
var commentsList = document.getElementById('comments');
var newComment = document.createElement('li');
var timestamp = new Date().toLocaleTimeString();
newComment.innerHTML = '<span class="timestamp">' + timestamp + '</span> ' + commentText;
commentsList.appendChild(newComment);
commentInput.value = "";
}
}
function like() {
likeCount++;
document.getElementById('likeCount').innerText = likeCount;
}
function dislike() {
dislikeCount++;
document.getElementById('dislikeCount').innerText = dislikeCount;
}
function search() {
var searchInput = document.getElementById('searchInput').value.trim();
if (searchInput !== "") {
alert('検索結果: ' + searchInput);
}
}
function register() {
var username = document.getElementById('registerUsername').value.trim();
var password = document.getElementById('registerPassword').value.trim();
if (username !== "" && password !== "") {
alert('ユーザー登録が完了しました: ' + username);
localStorage.setItem('username', username);
localStorage.setItem('password', password);
document.getElementById('registerUsername').value = "";
document.getElementById('registerPassword').value = "";
}
}
function login() {
var username = document.getElementById('loginUsername').value.trim();
var password = document.getElementById('loginPassword').value.trim();
var storedUsername = localStorage.getItem('username');
var storedPassword = localStorage.getItem('password');
if (username === storedUsername && password === storedPassword) {
alert('ログイン成功');
document.getElementById('profileUsername').innerText = username;
document.getElementById('profileDate').innerText = new Date().toLocaleDateString();
document.getElementById('loginUsername').value = "";
document.getElementById('loginPassword').value = "";
} else {
alert('ユーザー名またはパスワードが間違っています');
}
}
function upload() {
var video = document.getElementById('uploadVideo').files[0];
var title = document.getElementById('uploadTitle').value.trim();
if (video && title !== "") {
alert('動画アップロードが完了しました: ' + title);
document.getElementById('uploadVideo').value = "";
document.getElementById('uploadTitle').value = "";
}
}
</script>
</body>
</html>
