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 {
background-color: white;
background-color: rgb(255, 199, 207);
padding: 1rem;
box-shadow: 10px 10px 10px black;
width: 30rem;

13
index.css
View file

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

81
index.html
View file

@ -1,46 +1,71 @@
<!DOCTYPE html>
<html>
<head>
<title>Maya's Stream</title>
<meta name="author" content="Luna">
<meta name="description" content="Maya's Stream">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css">
<link rel="icon" href="/favicon.svg">
</head>
<head>
<title>Maya's Stream</title>
<meta name="author" content="Luna">
<meta name="description" content="Maya's Stream">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css">
<link rel="icon" href="/favicon.svg">
</head>
<body>
<nav>
<body>
<nav>
<ul class="navigation-list">
<li><a href="index.html"><div class="buttons">Stream</div></a></li>
<li><a href="chat.html"><div class="buttons">Just Chat</div></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>
<ul class="navigation-list">
<li><a href="index.html">
<div class="buttons">Stream</div>
</a></li>
<li><a href="chat.html">
<div class="buttons">Just Chat</div>
</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>
<section>
<div id="streamchat">
<div id="stream">
<h1>This is where the stream will go.</h1>
</div>
<div id="streamchat">
<div id="twitch-embed"></div>
<iframe id="chatbox" src="chat.html" title="chat box" scrolling="no"></iframe>
</div>
<!-- Load the Twitch embed JavaScript file -->
<script src="https://embed.twitch.tv/embed/v1.js"></script>
<!-- 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>
</main>
</body>
</body>
</html>
</html>

2
style.css
View file

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