lunastella/lilachat-frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Added twitch embed

Browse source
This commit is contained in:
Luna 2021-07-25 13:10:09 -07:00
parent be23c86a35
commit b3c2da348c
4 changed files with 59 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
chat.css
View file

@ -36,7 +36,7 @@ button {
} }
#outerchatbox { #outerchatbox {
background-color: white; background-color: rgb(255, 199, 207);
padding: 1rem; padding: 1rem;
box-shadow: 10px 10px 10px black; box-shadow: 10px 10px 10px black;
width: 30rem; width: 30rem;

13
index.css
View file

@ -14,16 +14,11 @@ a {
height: 100%; height: 100%;
max-width: 960px; max-width: 960px;
margin: 0 auto; margin: 0 auto;
margin-top: -1%;
} }
#stream { #twitch-embed {
background-color: white;
padding: 5%;
box-shadow: 10px 10px 10px black;
border-radius: 5px;
width: 854px;
height: 480px;
margin-right: 0.3em; margin-right: 0.3em;
margin-left: -40%; margin-left: -40%;
margin-top: auto; margin-top: auto;
@ -60,6 +55,6 @@ a {
padding: 15px; padding: 15px;
border-bottom: solid; border-bottom: solid;
border-left: solid; border-left: solid;
border-color: white; border-color: lightblue;
border-width: 1px; border-width: 2px;
} }

81
index.html
View file

@ -1,46 +1,71 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Maya's Stream</title> <title>Maya's Stream</title>
<meta name="author" content="Luna"> <meta name="author" content="Luna">
<meta name="description" content="Maya's Stream"> <meta name="description" content="Maya's Stream">
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="index.css">
<link rel="icon" href="/favicon.svg"> <link rel="icon" href="/favicon.svg">
</head> </head>
<body> <body>
<nav> <nav>
<ul class="navigation-list"> <ul class="navigation-list">
<li><a href="index.html"><div class="buttons">Stream</div></a></li> <li><a href="index.html">
<li><a href="chat.html"><div class="buttons">Just Chat</div></a></li> <div class="buttons">Stream</div>
<li><a href="register.html"><div class="buttons">Register</div></a></li> </a></li>
<li><a href="login.html"><div class="buttons">Login</div></a></li> <li><a href="chat.html">
<li><a href="updateinfo.html"><div class="buttons">Update Info</div></a></li> <div class="buttons">Just Chat</div>
</ul> </a></li>
<li><a href="register.html">
<div class="buttons">Register</div>
</a></li>
<li><a href="login.html">
<div class="buttons">Login</div>
</a></li>
<li><a href="updateinfo.html">
<div class="buttons">Update Info</div>
</a></li>
</ul>
</nav> </nav>
<main> <main>
<section> <section>
<div id="streamchat"> <div id="streamchat">
<div id="stream"> <div id="twitch-embed"></div>
<h1>This is where the stream will go.</h1>
</div>
<iframe id="chatbox" src="chat.html" title="chat box" scrolling="no"></iframe> <!-- Load the Twitch embed JavaScript file -->
<script src="https://embed.twitch.tv/embed/v1.js"></script>
</div>
<!-- Create a Twitch.Embed object that will render within the "twitch-embed" element -->
<script type="text/javascript">
new Twitch.Embed("twitch-embed", {
width: 960,
height: 540,
channel: "mayamayagirl",
layout: "video",
autoplay: false,
muted: true,
// Only needed if this page is going to be embedded on other websites
parent: ["embed.example.com", "othersite.example.com"]
});
</script>
<iframe id="chatbox" src="chat.html" title="chat box" scrolling="no"></iframe>
</div>
</section> </section>
</main> </main>
</body> </body>
</html> </html>

2
style.css
View file

@ -13,7 +13,7 @@ form {
} }
#box { #box {
background-color: white; background-color: rgb(255, 199, 207);
padding: 5%; padding: 5%;
box-shadow: 10px 10px 10px black; box-shadow: 10px 10px 10px black;
border-radius: 5px; border-radius: 5px;