128 lines
5.0 KiB
HTML
128 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Val Friendbook :: Friendbook</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Chakra+Petch:wght@400;500;600;700&family=Rajdhani:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
|
|
<div class="scanlines" aria-hidden="true"></div>
|
|
|
|
<header class="hero">
|
|
<div class="hero__glitchbox">
|
|
<h1 class="glitch" data-text="NICK'S VALO FRIENDBOOK">NICK'S VALO FRIENDBOOK</h1>
|
|
</div>
|
|
<p class="hero__tagline">a friendbook for the wonderful peeps I've played with (◡‿◡)</p>
|
|
|
|
<nav class="tabs" role="tablist" aria-label="Page sections">
|
|
<button class="tab-btn is-active" id="tab-form" role="tab" aria-selected="true" aria-controls="panel-form">
|
|
<span class="tab-btn__index">01</span> THE FRIEND BOOK
|
|
</button>
|
|
<button class="tab-btn" id="tab-gallery" role="tab" aria-selected="false" aria-controls="panel-gallery">
|
|
<span class="tab-btn__index">02</span> EVERYONE'S PAGES
|
|
</button>
|
|
</nav>
|
|
</header>
|
|
|
|
<main>
|
|
|
|
<!-- ===================== FORM PANEL ===================== -->
|
|
<section id="panel-form" class="panel window" role="tabpanel" aria-labelledby="tab-form">
|
|
<div class="window__bar">
|
|
<span class="dot dot--blue"></span>
|
|
<span class="dot dot--pink"></span>
|
|
<span class="dot dot--white"></span>
|
|
<span class="window__title">the friend book</span>
|
|
</div>
|
|
|
|
<form id="entry-form" class="window__body form" novalidate>
|
|
|
|
<div class="field">
|
|
<label for="name">Your Name <span class="req">*</span></label>
|
|
<input type="text" id="name" name="name" maxlength="60" required placeholder="who is this beautiful person?" />
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="funFact">Tell me sth interesting about you!</label>
|
|
<textarea id="funFact" name="funFact" maxlength="500" rows="3" placeholder="My hyperfixation is..., I really hate..."></textarea>
|
|
</div>
|
|
|
|
<div class="field-row">
|
|
<div class="field">
|
|
<label for="favColor">Favourite Colour</label>
|
|
<input type="text" id="favColor" name="favColor" maxlength="40" placeholder="lilablassblau" />
|
|
</div>
|
|
<div class="field">
|
|
<label for="favGenre">Favourite Music Genre <span class="hint">(I need inspo hihi)</span></label>
|
|
<input type="text" id="favGenre" name="favGenre" maxlength="100" placeholder="metalcore / hardstyle / idk" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="petPeeves">Favourite Agent</label>
|
|
<textarea id="petPeeves" name="petPeeves" maxlength="300" rows="2" placeholder="Jett, Sova, Omen, Chamber...whoever's meta rn"></textarea>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="merzHate">What do you enjoy most about Valo?</label>
|
|
<textarea id="merzHate" name="merzHate" maxlength="400" rows="2" placeholder="clutching 1v5s, one-tapping with Vandal, screaming at teammates..."></textarea>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="socialLink">IGN <span class="hint">(Riot ID)</span></label>
|
|
<input type="text" id="socialLink" name="socialLink" maxlength="300" placeholder="YourName#TAG" />
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label id="mood-label">Current Mood</label>
|
|
<div class="mood-picker" role="radiogroup" aria-labelledby="mood-label">
|
|
<!-- populated by app.js -->
|
|
</div>
|
|
<input type="hidden" id="mood" name="mood" value="🖤" />
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="badges">Badges / Awards <span class="hint">(up to 5 images)</span></label>
|
|
<input type="file" id="badges" name="badges" accept="image/png, image/jpeg, image/gif, image/webp" multiple />
|
|
<div id="badge-preview" class="badge-preview" aria-live="polite"></div>
|
|
</div>
|
|
|
|
<p id="form-error" class="form-error" role="alert" hidden></p>
|
|
<p id="form-success" class="form-success" role="status" hidden></p>
|
|
|
|
<button type="submit" class="btn-submit" id="submit-btn">
|
|
<span>ADD MY PAGE</span>
|
|
</button>
|
|
</form>
|
|
</section>
|
|
|
|
<!-- ===================== GALLERY PANEL ===================== -->
|
|
<section id="panel-gallery" class="panel window is-hidden" role="tabpanel" aria-labelledby="tab-gallery">
|
|
<div class="window__bar">
|
|
<span class="dot dot--blue"></span>
|
|
<span class="dot dot--pink"></span>
|
|
<span class="dot dot--white"></span>
|
|
<span class="window__title">everyone's pages (●'◡'●)</span>
|
|
</div>
|
|
|
|
<div class="window__body">
|
|
<p id="gallery-status" class="gallery-status">loading pages_</p>
|
|
<div id="gallery-grid" class="gallery-grid"></div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<footer class="site-footer">
|
|
<p>our little friend book q(≧▽≦q)</p>
|
|
</footer>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|