107 lines
4.2 KiB
HTML
107 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<link rel="stylesheet" href="style/styles.css">
|
|
<link rel="stylesheet" href="style/about.css">
|
|
<link rel="stylesheet" href="style/gallery.css">
|
|
<link rel="stylesheet" href="style/ahmet.css">
|
|
<link rel="stylesheet" href="style/comments.css">
|
|
<link rel="icon" href="/favicon.ico" type="image/x-icon">
|
|
<title>Esef</title>
|
|
</head>
|
|
<body>
|
|
<video autoplay muted loop id="background-video">
|
|
<source src="textures/Yuuka_body.mp4" type="video/mp4">
|
|
</video>
|
|
<div id="top-line">
|
|
<a href="index.html" id="home-btn"></a>
|
|
<button id="about-btn">About This Website</button>
|
|
<button id="gallery-btn">Gallery</button>
|
|
<button id="ahmet-btn">Ahmet Museum</button>
|
|
</div>
|
|
|
|
<section id="about" class="tab-content">
|
|
|
|
<!-- Top half: welcome -->
|
|
<div id="about-hero">
|
|
<h1>Hello!!!!</h1>
|
|
<p>Welcome to my first website, I don't actually use here at all but maybe I'll consider putting more in the future.</p>
|
|
</div>
|
|
|
|
<!-- Bottom half: Steam-style comments -->
|
|
<div id="comments-section">
|
|
|
|
<!-- Steam panel header -->
|
|
<div class="steam-header">
|
|
<span class="steam-header-title">COMMENTS</span>
|
|
<span id="comments-title"></span>
|
|
</div>
|
|
|
|
<div id="firebase-setup-warning">
|
|
⚠️ <strong>Setup needed:</strong> Open <code>js/comments.js</code> and follow the setup instructions at the top of the file.
|
|
</div>
|
|
|
|
<!-- Comments feed -->
|
|
<div id="comments-list"></div>
|
|
|
|
<!-- Post form — at the bottom like Steam -->
|
|
<div class="steam-form-area">
|
|
<p class="steam-form-label">Leave a comment:</p>
|
|
|
|
<!-- Avatar colour picker -->
|
|
<div id="avatar-picker">
|
|
<span class="picker-label">Colour</span>
|
|
<div class="picker-row">
|
|
<button type="button" class="av-opt selected" data-color="#5b6fde" style="background:#5b6fde"></button>
|
|
<button type="button" class="av-opt" data-color="#3b82f6" style="background:#3b82f6"></button>
|
|
<button type="button" class="av-opt" data-color="#10b981" style="background:#10b981"></button>
|
|
<button type="button" class="av-opt" data-color="#f59e0b" style="background:#f59e0b"></button>
|
|
<button type="button" class="av-opt" data-color="#ef4444" style="background:#ef4444"></button>
|
|
<button type="button" class="av-opt" data-color="#8b5cf6" style="background:#8b5cf6"></button>
|
|
<button type="button" class="av-opt" data-color="#ec4899" style="background:#ec4899"></button>
|
|
<button type="button" class="av-opt" data-color="#64748b" style="background:#64748b"></button>
|
|
</div>
|
|
</div>
|
|
|
|
<form id="comment-form" autocomplete="off">
|
|
<input type="hidden" id="comment-avatar-color" value="#5b6fde">
|
|
<input type="text" id="comment-name" placeholder="Name (optional)" maxlength="32">
|
|
<textarea id="comment-message" placeholder="Write something..." maxlength="300" required></textarea>
|
|
<div class="steam-submit-row">
|
|
<span id="char-count">300</span>
|
|
<button type="submit" id="comment-submit">Post Comment</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<section id="gallery" class="tab-content">
|
|
<div class="gallery-grid">
|
|
</div>
|
|
<div id="gallery-container" class="gallery-grid"></div>
|
|
</section>
|
|
|
|
<section id="ahmet" class="tab-content">
|
|
<div id="ahmet-container">
|
|
</div>
|
|
</section>
|
|
|
|
<script src="js/gallery.js" defer></script>
|
|
<script src="js/hideBroken.js" defer></script>
|
|
<script src="js/tabs.js" defer></script>
|
|
|
|
<!-- Firebase SDK (loaded before comments.js) -->
|
|
<script src="https://www.gstatic.com/firebasejs/10.12.0/firebase-app-compat.js"></script>
|
|
<script src="https://www.gstatic.com/firebasejs/10.12.0/firebase-firestore-compat.js"></script>
|
|
<script src="js/comments.js"></script>
|
|
|
|
<!-- Lightbox -->
|
|
<div id="lightbox" class="lightbox">
|
|
<span class="lightbox-close">×</span>
|
|
<img class="lightbox-content" id="lightbox-img">
|
|
</div>
|
|
</body>
|
|
</html>
|