HTMLify
Describing You
Views: 187 | Author: abh
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Describing You</title>
<link rel="stylesheet" href="style.css" />
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400;1,600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://unpkg.com/@sakun/system.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<main>
<div id="input-div">
<div class="title-bar">
<h1 class="title">Describing You</h1>
</div>
<br>
<label for="image-upload-input" id="image-upload-label" class="btn" style="display:block;width:80%;">Pick your Pics</label>
<input type="file" id="image-upload-input" style="display:none;" accept="image/*" multiple>
<br><br>
<button class="btn" onclick="process_images()">Process Images</button>
<p id="input-div-pera">Upload Images (can also upload GIFs)</p>
<hr>
<br><br>
<button class="btn" onclick="goto_credit()">Credits</button>
</div>
<div id="loading-div">
<div class="title-bar">
<h1 class="title">Loading Assets</h1>
</div>
<p id="loading-div-pera"></p>
<hr>
<br><br>
</div>
<div id="play-div">
<canvas id="text-layer" draggable="false"></canvas>
<img id="her-image" draggable="false">
<img id="background-image" draggable="false">
</div>
<div id="credit-div">
<div class="title-bar">
<h1 class="title">Credits</h1>
</div>
<div>
<h2 class="title">Aman Babu Hemant</h2>
<p><a href="http://GitHub.com/AmanBabuHemant">The Developer</a></p>
</div>
<hr>
<br>
<div>
<h2 class="title">Background Images</h2>
<p>Images are sourced from <a href="https://pixabay.com">Pixabay</a>.<br>
Users:
<a href="https://pixabay.com/users/qimono-1962238/">Arek Socha</a>,<br>
<a href="https://pixabay.com/users/mzmatuszewski0-825220/">Mariusz Matuszewski</a>,<br>
<a href="https://pixabay.com/users/jarmoluk-143740/">Michal Jarmoluk</a>,<br>
<a href="https://pixabay.com/users/ghinzo-10938903/">Ghinzo</a>,<br>
<a href="https://pixabay.com/users/dehncka-5934301/">Denis Velikanov</a>,<br>
<a href="https://pixabay.com/users/bogitw-851103/">Gerhard Bögner</a>,<br>
<a href="https://pixabay.com/users/ralf1403-21380246/">Ralf Ruppert</a>,<br>
<a href="https://pixabay.com/users/ylanite-2218222/">Ylanite Koppens</a>,<br>
<a href="https://pixabay.com/users/stocksnap-894430/">StockSnap</a>,<br>
<a href="https://pixabay.com/users/moshehar-7046690/">Moshe Harosh</a>,<br>
<a href="https://pixabay.com/users/thelightnist-11132485/">Johann Lavandier</a> and<br>
<a href="https://pixabay.com/users/atlantios-4957810/">Antonios Ntoumas</a>.
</p>
</div>
<hr>
<br>
<div>
<h2 class="title">You</h2>
<p>Yup, you, because you uploaded images. You were the subject.</p>
</div>
<hr>
<br>
<div>
<h2 class="title">Background Audio</h2>
<p>A clip of <a href="https://www.youtube.com/watch?v=AWAsI3U2EaE">Golden Brown</a> by <a href="https://www.youtube.com/@MousikesPeriigiseis">Mousikes Periigiseis</a>.</p>
</div>
<hr>
<br>
<div>
<h2 class="title">Describing Audio</h2>
<p><a href="https://www.instagram.com/reels/audio/1034670394854910">This Instagram Audio</a></p>
</div>
<hr>
<br>
<div>
<h2 class="title">Inspiration</h2>
<p>Inspiration comes from this <a href="https://www.instagram.com/reel/DQW5qctCJYL">Instagram Reel</a></p>
</div>
<hr>
<br>
<button class="btn" onclick="goto_input()">Back to Home</button>
</div>
</main>
</body>
<script src="script.js"></script>
</html>
<!-- 128 -->