-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
27 lines (27 loc) · 1.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wampa Stompa</title>
<link rel="stylesheet" href="styles.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html2canvas.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<header>
<h1>Wampa Stompa</h1>
<p>Wampa Stompa is inspired by the 2015 YouTube video <em>Darth Punk - The Funk Awakens</em>, which creatively combines Star Wars and Daft Punk. I captured a screenshot from the video to create my own Wampa Stompa mixes, leading to the creation of this site. Initially simple, the site has evolved over the years, and now you can download your own Wampa Stompa Mix! Enjoy!</p> <input type="text" id="mixName" placeholder="Enter your mix name" />
</header>
<main>
<section class="img">
<canvas id="textCanvas" width="1000" height="420"></canvas>
<div class="hand"></div>
</section>
<button class="download-btn" id="downloadBtn">Download Your Wampa Stompa Mix</button>
<iframe width="560" height="315" src="https://www.youtube.com/embed/1qhbKGc5rVM?si=uLBWaYi6d9rVrUk_" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</main>
<img src="img/wampastompamix-bg.png" style="display:none;" crossorigin="anonymous">
<img src="img/wampastompamix-hand.png" style="display:none;" crossorigin="anonymous">
</body>
</html>