29 Commits

Author SHA1 Message Date
gosselingdevries
637788b8fd Merge 60e6fbf8a1 into 468aa4a64d 2024-12-04 12:58:51 +00:00
Clayton Wilson
60e6fbf8a1 Update README.md 2022-03-02 18:52:43 -05:00
Clayton Wilson
5ac377b8ad Added screenshots 2022-03-02 17:42:51 -06:00
Ubuntu
64dbe40470 Fix upload styles 2019-04-23 16:47:44 -04:00
02f98647a8 Disable description resizing 2019-04-23 01:34:12 -04:00
Clayton Wilson
35f92e1e5d Merge pull request #9 from ClaytonWWilson/Clayton-homelink-languages
Added English tags and a link to the index page on the logo.
2019-04-23 01:23:32 -04:00
bc2c648409 Added English tags and a link to the index page on the logo. 2019-04-23 01:22:54 -04:00
Clayton Wilson
2fba4b63d0 Merge pull request #8 from ClaytonWWilson/Clayton-style-upload.php
Styles upload.php
2019-04-23 01:09:23 -04:00
b6936f1a31 Styles upload.php 2019-04-23 01:08:41 -04:00
55dfdf84e9 Changing the url of the submit.php redirect 2019-04-22 21:29:03 -04:00
7c7b854314 Removed the hardcoded videos 2019-04-22 20:41:57 -04:00
dbb814f272 Removed test files 2019-04-22 19:38:23 -04:00
c3eb21b6c2 Merge branch 'gosse' 2019-04-22 19:36:41 -04:00
21addd4591 Fixed merge 2019-04-22 19:36:16 -04:00
ab58e096a4 Delete text.txt 2019-04-22 19:28:26 -04:00
b5f8ca322a Updated variable name 2019-04-22 19:27:35 -04:00
Clayton Wilson
175aca119a Merge pull request #5 from ClaytonWWilson/Tristan_submit.php
Tristan submit.php
2019-04-22 19:22:23 -04:00
root
468aa4a64d removed all debugging echo calls, character and player names now display separately 2019-04-22 19:21:52 -04:00
root
c4c6992e7c working styles for index.php and search.php. Index.php still prints all data from a row 2019-04-22 15:47:06 -04:00
root
2fdf8b8409 added styling to search.php, not working yet 2019-04-22 03:14:14 -04:00
67ef4f0915 Added bracket 2019-04-22 01:02:53 -04:00
20aed419cb Add styles and layout html code for video item list 2019-04-22 00:21:47 -04:00
root
815a876d2f index.php now gets 10 rows from video table and prints them sorted by date 2019-04-21 22:11:55 -04:00
c70626cebe Fix Merge 2019-04-20 18:00:00 -04:00
609af1c391 Fixed Merge 2019-04-20 17:57:14 -04:00
dbe0ba85fb Updated update.php and add JS to it for textbox error checking 2019-04-20 17:50:37 -04:00
root
5e5043f6b2 Merge branch 'master' into gosse 2019-04-20 16:47:51 -04:00
root
20dc303cc9 test 2 2019-04-17 00:40:05 -04:00
root
d42f45fff0 test 2019-04-17 00:28:41 -04:00
13 changed files with 696 additions and 110 deletions

BIN
.index.php.swp Normal file

Binary file not shown.

View File

@@ -1,2 +1,9 @@
# FightHub
A website that allows you to share videos of matches in fighting games. You can also search for videos added by other users.
### Images
<p>
<img alt="0.png" src="./Screenshots/0.png" width="1000">
<img alt="1.png" src="./Screenshots/1.png" width="1000">
<img alt="2.png" src="./Screenshots/2.png" width="1000">
</p>

BIN
Screenshots/0.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 443 KiB

BIN
Screenshots/1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

BIN
Screenshots/2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 486 KiB

0
images/upload.png Normal file → Executable file
View File

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

130
index.php
View File

@@ -1,4 +1,4 @@
<html>
<html lang="en">
<head>
<title>FightHub - Home</title>
<link rel="stylesheet" href="main.css">
@@ -6,16 +6,138 @@
<body>
<!-- Titlebar -->
<form class="search" action="search.php">
<h1 class="title-text">FightHub</h1>
<a href="/"><h1 class="title-text">FightHub</h1></a>
<input type="text" name="query" class="search" placeholder="Search..">
<input type="submit" name="submit" class="submit" value="Search">
<a href="upload.php"><img src="images/upload.png" class="upload" alt="upload"></a>
</form>
</form>
<!-- code for connecting to mysql -->
<?php
function writeEntryforIndex() {
$servername = "localhost";
$username = "fighthubuser";
$password = "cC33dC8W";
$database = "fighthubdata";
// Create MySQL connection
$conn = mysqli_connect($servername, $username, $password, "fighthubdata");
// Check connection - if it fails, output will include the error message
if (!$conn) {
echo 'death';
die('<p>Connection failed: <p>' . mysql_error());
}
//echo '<font color="#FF3D5"><p>Connect1ed successfully</p></font>';
// $sql = 'SELECT video_id, video_url, video_name, username, date_upload, date_video, video_length, description, characters, players, game, stage, approved FROM video';
//$sql = 'select * from video';
// mysqli_select_db('fighthubdata');
//echo 'hello';
$retval = mysqli_query( $conn, "select * from video order by date_video DESC ");
//echo 'test';
if(!$retval ) {
//echo '<p>death</p>'
die('Could not get data: ' . mysqli_error());
}
//echo '<font color="blue">not death</font>';
//$search = $_GET['query'];
$i = 0;
echo "<div class=\"video-list-container\"> ";
while($row = mysqli_fetch_array($retval, MYSQLI_ASSOC)) {
if($i > 9){
break;
}
//Format for video_url
//Get substring from url after '='
$splitUrl = explode("=", $row['video_url']);
$splitChar = explode(",", $row['characters']);
$splitPlay = explode(",", $row['players']);
echo "<!-- Entry 1 -->" .
"<div id=\"video-item\">" .
"<iframe width=\"640\" height=\"360\" src=\"https://www.youtube.com/embed/$splitUrl[1]\" frameborder=\"0\"" .
"allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"" .
"allowfullscreen>" .
"</iframe>" .
"<a href=\"{$row['video_url']}\">{$row['video_name']}</a>" .
"<div id=\"players-characters\">" .
"<table>" .
"<tr>" .
"<td class=\"header\">Players</td>" .
"<td class=\"header\">Characters</td>" .
"</tr>" .
<!-- This is where php code for loading preview videos below the titlebar will go -->
"<tr>" .
"<td class=\"data\" id=\"table-border\">$splitPlay[0]</td>" .
"<td class=\"data\" id=\"table-border\">$splitChar[0]</td>" .
"</tr>" .
"<tr>" .
"<td class=\"data\" id=\"table-border\">$splitPlay[1]</td>" .
"<td class=\"data\" id=\"table-border\">$splitChar[1]</td>" .
"</tr>" .
"</table>" .
"</div>" .
"<div id=\"game-stage\">" .
"<p>{$row['game']}</p>" .
"<p>{$row['stage']}</p>" .
"</div>" .
"<div id=\"description\">" .
"<p>{$row['description']}</p>".
"</div>" .
"</div> ";
/*
echo "<font color='#FF3D53'> VIDEO ID :{$row['video_id']} <br> ".
"VIDEO URL : {$row['video_url']} <br> ".
"VIDEO NAME : {$row['video_name']} <br> ".
"USERNAME : {$row['username']} <br> ".
"DATE UPLOAD : {$row['date_upload']} <br> ".
"DATE VIDEO : {$row['date_video']} <br> ".
"VIDEO LENGTH : {$row['video_length']} <br> ".
"DESCRIPTION : {$row['description']} <br> ".
"CHARACTERS : {$row['characters']} <br> ".
"PLAYERS : {$row['players']} <br> ".
"GAME : {$row['game']} <br> ".
"STAGE : {$row['stage']} <br> ".
"APPROVED : {$row['approved']} <br> ".
"--------------------------------<br></font>";
echo "<font color='#FF3D53'>Fetched data successfully\n</font>";
*/
mysqli_close($conn);
$i++;
}
echo "</div>";
}
writeEntryforIndex();
?>
</body>
</html>

258
main.css Executable file → Normal file
View File

@@ -1,67 +1,251 @@
body {
background-color: #1E1E1E;
background-color: #1E1E1E;
}
/* Styles for titlebar */
form.search {
/* border: white solid 1px; */
height: 150px;
margin-top: -10px !important;
width: 99% !important;
border-bottom: #727272 solid 2px;
/* border: white solid 1px; */
height: 150px;
margin-top: -10px !important;
width: 99% !important;
border-bottom: #727272 solid 2px;
}
.title-text {
float: left;
margin-top: 26px;
padding-right: 20px;
color: #FF3D53;
font-family: "Calibri";
font-size: 50pt;
float: left;
margin-top: 26px;
padding-right: 20px;
color: #FF3D53;
font-family: "Calibri";
font-size: 50pt;
}
.search {
width: 50%;
padding: 10px;
font-size: 20px;
margin-top: 45px;
width: 50%;
padding: 10px;
font-size: 20px;
margin-top: 45px;
}
.submit {
width: 150px;
padding: 10px;
font-size: 20px;
width: 150px;
padding: 10px;
font-size: 20px;
}
img.upload {
width: 150px;
/* margin-bottom: -17px; */
margin-top: 45px;
float: right;
width: 150px;
/* margin-bottom: -17px; */
margin-top: 45px;
float: right;
}
/* Styles for upload.php */
form.upload-form {
/* border: white solid 1px; */
border-left: #727272 solid 2px;
border-right: #727272 solid 2px;
margin: 0 25% 0 25%;
/* border: white solid 1px; */
border-left: #727272 solid 2px;
border-right: #727272 solid 2px;
margin: 0 25% 0 25%;
margin-top: 60px;
margin-bottom: 60px;
}
.upload-form input, .upload-form textarea, .upload-form select {
display: block;
margin-left: 20px;
/* margin-bottom: 30px; */
/* border: white solid 1px; */
display: block;
margin-left: 20px;
/* margin-bottom: 30px; */
/* border: white solid 1px; */
}
.upload-form h3 {
color: #FF3D53;
/* border: white solid 1px; */
margin-bottom: 0px;
margin-left: 20px;
}
color: #FF3D53;
/* border: white solid 1px; */
margin-bottom: 0px;
margin-left: 2%;
}
h3.url {
/* padding-top: 40px; */
/* border: white solid 1px; */
}
.url {
/* margin: auto !important; */
width: 93%;
}
h3.title {
padding-top: 40px;
}
.title {
/* margin: auto !important; */
width: 93%;
}
.user-date {
width: 93%;
margin-left: 3%;
/* margin: auto; */
}
.username {
/* margin-left: 20px; */
padding-top: 20px;
margin-left: -20px;
}
.video-date {
float: right;
margin-top: -62px;
}
.description {
width: 93%;
/* margin: auto !important; */
resize: none;
}
h3.description {
padding-top: 40px;
}
.characters {
width: 93%;
/* margin: auto !important; */
}
h3.characters {
padding-top: 40px;
}
.players {
width: 93%;
/* margin: auto !important; */
}
h3.players {
padding-top: 40px;
}
.game-info {
width: 93%;
margin-left: 3%;
/* margin: auto; */
}
.game-name {
padding-top: 20px;
margin-left: -20px;
}
.stage-name {
float: right;
margin-top: -61px;
}
.length-button {
margin: 3%;
width: 93%;
/* border: white solid 1px; */
}
.length {
padding-top: 10px;
margin-left: -20px;
}
.button {
float: right;
margin-top: -21px;
}
h3 {
padding-left: 15px;
}
/* Styles for Video element displays */
div.video-list-container {
/* border: white solid 1px; */
margin-left: 15%;
margin-right: 15%;
}
#video-item {
/* border: white solid 1px; */
width: 100%;
height: 178.75px;
padding-top: 10px;
border-bottom: #727272 solid 2px;
}
iframe {
width: 300px;
height: 168.75px;
/* margin-top: 5px; */
margin-bottom: 10px;
float: left;
}
.video-list-container a {
color: #FF3D53;
/* border: white solid 1px; */
padding-left: 10px;
/* margin-top: 1000px !important; */
font-family: "Calibri";
/* position: relative; */
}
#players-characters {
/* border: white solid 1px; */
/* display: inline; */
}
#players-characters table {
color: #FF3D53;
font-size: 10pt;
font-family: "Calibri";
padding-left: 10px;
width: 20%;
margin-top: 10px;
/* border-right: #727272 solid 2px; */
}
table .data {
font-weight: lighter;
}
table .header {
font-weight: bolder !important;
padding-bottom: 10px;
}
#table-border {
border-bottom: #727272 solid 1px;
}
#game-stage {
color: #FF3D53;
float: right;
font-family: "Calibri";
/* border: white solid 1px; */
/* border-right: #727272 solid 2px; */
margin-top: -83px;
width: 20%;
text-align: left;
}
#description p {
/* border: white solid 1px; */
color: #FF3D53;
font-family: "Calibri";
margin-left: 310px;
}

103
scripts/main.js Normal file → Executable file
View File

@@ -1,6 +1,103 @@
// Validates the data inputs on the upload form
function validateUpload() {
console.log("Validated!");
document.getElementById("upload-form").submit();
}
var url_bar = document.getElementById('url');
var video_title = document.getElementById('title');
var username = document.getElementById('username');
// var description = document.getElementById('description'); // optional
var video_date = document.getElementById('video-date');
// var length = document.getElementById('length'); // optional
var characters = document.getElementById('characters');
var players = document.getElementById('players');
var game = document.getElementById('game');
var stage = document.getElementById('stage');
// console.log('url_bar: ' + url_bar);
// console.log('video_title: ' + video_title);
// console.log('username: ' + username);
// console.log('description: ' + description);
// console.log('video_date: ' + video_date);
// console.log('length: ' + length);
// console.log('characters: ' + characters);
// console.log('players: ' + players);
// console.log('game: ' + game);
// console.log('stage: ' + stage);
// Checking that the required text boxes are filled in, and highlighting them red
// if they are not
var form_complete = true;
// URL
if (url_bar.value == "") {
form_complete = false;
url_bar.style = "border-color:red;"
} else {
url_bar.style = "border-color:green;"
}
// Video Title
if (video_title.value == "") {
form_complete = false;
video_title.style = "border-color:red;"
} else {
video_title.style = "border-color:green;"
}
// Username
if (username.value == "") {
form_complete = false;
username.style = "border-color:red;"
} else {
username.style = "border-color:green;"
}
// Video Date
if (video_date.value == "") {
form_complete = false;
video_date.style = "border-color:red;"
} else {
video_date.style = "border-color:green;"
}
// Characters
if (characters.value == "") {
form_complete = false;
characters.style = "border-color:red;"
} else {
characters.style = "border-color:green;"
}
// Players
if (players.value == "") {
form_complete = false;
players.style = "border-color:red;"
} else {
players.style = "border-color:green;"
}
// Game
if (game.value == "") {
form_complete = false;
game.style = "border-color:red;"
} else {
game.style = "border-color:green;"
}
// Stage
if (stage.value == "") {
form_complete = false;
stage.style = "border-color:red;"
} else {
stage.style = "border-color:green;"
}
// If the form is completely filled out, call the submit function for the form
// and redirect them to submit.php, otherwise alert them that they've forgotten to
// fill in some of the form
if (form_complete) {
document.getElementById("upload-form").submit();
} else {
alert('Please fill out the rest of the upload form.');
}
}

156
search.php Executable file
View File

@@ -0,0 +1,156 @@
<html lang="en">
<head>
<title>FightHub - Search</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<!-- Titlebar -->
<form class="search" action="search.php">
<a href="/"><h1 class="title-text">FightHub</h1></a>
<input type="text" name="query" class="search" placeholder="Search..">
<input type="submit" name="submit" class="submit" value="Search">
<a href="upload.php"><img src="images/upload.png" class="upload" alt="upload"></a>
</form>
<!-- code for connecting to mysql -->
<?php
function writeEntryforIndex() {
$servername = "localhost";
$username = "fighthubuser";
$password = "cC33dC8W";
$database = "fighthubdata";
// Create MySQL connection
$conn = mysqli_connect($servername, $username, $password, "fighthubdata");
// Check connection - if it fails, output will include the error message
if (!$conn) {
echo 'death';
die('<p>Connection failed: <p>' . mysql_error());
}
//echo '<font color="#FF3D5"><p>Connect1ed successfully</p></font>';
// $sql = 'SELECT video_id, video_url, video_name, username, date_upload, date_video, video_length, description, characters, players, game, stage, approved FROM video';
//$sql = 'select * from video';
// mysqli_select_db('fighthubdata');
//echo 'hello';
$search = $_GET['query'];
//echo $search;
$retval = mysqli_query( $conn, "select * from video where characters like '%$search%' OR players like '%$search%' OR description like '%$search%' OR game like '%$search%' OR stage like '%$search%' OR video_name like '%$search%'");
//echo 'test';
if(!$retval ) {
//echo '<p>death</p>'
die('Could not get data: ' . mysqli_error());
}
//echo '<font color="blue">not death</font>';
// $i = 9;
echo "<div class=\"video-list-container\"> ";
while($row = mysqli_fetch_array($retval, MYSQLI_ASSOC)) {
// if($i > 9){
// break;
// }
//Format for video_url
//Get substring from url after '='
$split = explode("=", $row['video_url']);
$splitChar = explode(",", $row['characters']);
$splitPlay = explode(",", $row['players']);
echo "<!-- Entry 1 -->" .
"<div id=\"video-item\">" .
"<iframe width=\"640\" height=\"360\" src=\"https://www.youtube.com/embed/$split[1]\" frameborder=\"0\"" .
"allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"" .
"allowfullscreen>" .
"</iframe>" .
"<a href=\"{$row['video_url']}\">{$row['video_name']}</a>" .
"<div id=\"players-characters\">" .
"<table>" .
"<tr>" .
"<td class=\"header\">Players</td>" .
"<td class=\"header\">Characters</td>" .
"</tr>" .
"<tr>" .
"<td class=\"data\" id=\"table-border\">$splitPlay[0]</td>" .
"<td class=\"data\" id=\"table-border\">$splitChar[0]</td>" .
"</tr>" .
"<tr>" .
"<td class=\"data\" id=\"table-border\">$splitPlay[1]</td>" .
"<td class=\"data\" id=\"table-border\">$splitChar[1]</td>" .
"</tr>" .
"</table>" .
"</div>" .
"<div id=\"game-stage\">" .
"<p>{$row['game']}</p>" .
"<p>{$row['stage']}</p>" .
"</div>" .
"<div id=\"description\">" .
"<p>{$row['description']}</p>".
"</div>" .
"</div> ";
/*
echo "<font color='#FF3D53'> VIDEO ID :{$row['video_id']} <br> ".
"VIDEO URL : {$row['video_url']} <br> ".
"VIDEO NAME : {$row['video_name']} <br> ".
"USERNAME : {$row['username']} <br> ".
"DATE UPLOAD : {$row['date_upload']} <br> ".
"DATE VIDEO : {$row['date_video']} <br> ".
"VIDEO LENGTH : {$row['video_length']} <br> ".
"DESCRIPTION : {$row['description']} <br> ".
"CHARACTERS : {$row['characters']} <br> ".
"PLAYERS : {$row['players']} <br> ".
"GAME : {$row['game']} <br> ".
"STAGE : {$row['stage']} <br> ".
"APPROVED : {$row['approved']} <br> ".
"--------------------------------<br></font>";
echo "<font color='#FF3D53'>Fetched data successfully\n</font>";
*/
mysqli_close($conn);
$i++;
}
echo "</div>";
}
writeEntryforIndex();
//<!-- This is where php code for loading preview videos below the titlebar will go -->
?>
</body>
</html>

View File

@@ -12,7 +12,7 @@ if($conn->connect_error) {
}
$url = $_GET['url'];
$title = $_GET['name'];
$title = $_GET['title'];
$username = $_GET['username'];
$description = $_GET['description'];
$event_date = $_GET['video-date'];
@@ -61,6 +61,6 @@ $conn->close()
?>
<script>
location.replace("http://ec2-18-217-5-198.us-east-2.compute.amazonaws.com/index.php");
location.replace("http://ec2-13-58-8-152.us-east-2.compute.amazonaws.com/index.php");
</script>

View File

@@ -1 +0,0 @@
yo

147
upload.php Normal file → Executable file
View File

@@ -1,63 +1,84 @@
<html>
<head>
<title>FightHub - Upload</title>
<link rel="stylesheet" href="main.css">
<script src="scripts/main.js"></script>
</head>
<body>
<!-- Titlebar -->
<form class="search" action="search.php">
<h1 class="title-text">FightHub</h1>
<input type="text" name="query" class="search" placeholder="Search..">
<input type="submit" name="submit" class="submit" value="Search">
<a href="upload.php"><img src="images/upload.png" class="upload" alt="upload"></a>
</form>
<!-- submit.php will read the variables from the url and add it to the database -->
<form class="upload-form" id="upload-form" action="submit.php">
<h3>Youtube URL *</h3>
<input type="text" name="url" id="url">
<h3>Name *</h3>
<input type="text" name="name" id="name">
<h3>Username *</h3>
<input type="text" name="username">
<h3>Description</h3>
<textarea name="description" cols="30" rows="10"></textarea>
<h3>Event Date</h3>
<input type="date" name="video-date">
<h3>Video Length</h3>
<input type="text" name="length">
<h3>Characters (Seperated by commas) *</h3>
<input type="text" name="characters">
<h3>Players (Seperated by commas) *</h3>
<input type="text" name="players">
<h3>Select Game *</h3>
<select name="game">
<option disabled selected value>-- Game --</option>
<option value="Street Fighter V">Street Fighter V</option>
<option value="Mortal Kombat 11">Mortal Kombat 11</option>
<option value="Super Smash Bros Melee">Super Smash Bros Melee</option>
<option value="Super Smash Bros Ultimate">Super Smash Ultimate</option>
<option value="Killer Instinct">Killer Instinct</option>
<option value="Injustice">Injustice</option>
</select>
<h3>Stage Name *</h3>
<input type="text" name="stage">
<input type="button" name="submit_button" value="Submit" onclick="validateUpload()">
</form>
</body>
</html>
<html lang="en">
<head>
<title>FightHub - Upload</title>
<link rel="stylesheet" href="main.css">
<script src="scripts/main.js"></script>
</head>
<body>
<!-- Titlebar -->
<form class="search" action="search.php">
<a href="/"><h1 class="title-text">FightHub</h1></a>
<input type="text" name="query" class="search" placeholder="Search..">
<input type="submit" name="submit" class="submit" value="Search">
<a href="upload.php"><img src="images/upload.png" class="upload" alt="upload"></a>
</form>
<!-- submit.php will read the variables from the url and add it to the database -->
<form class="upload-form" id="upload-form" action="submit.php">
<h3 class="url">Youtube URL *</h3>
<input type="text" name="url" id="url" class="url">
<h3 class="title">Video Title *</h3>
<input type="text" name="title" id="title" class="title">
<div class="user-date">
<div class="username">
<h3>Username *</h3>
<input type="text" name="username" id="username">
</div>
<div class="video-date">
<h3>Event Date *</h3>
<input type="date" name="video-date" id="video-date">
</div>
</div>
<h3 class="description">Description</h3>
<textarea name="description" cols="30" rows="10" id="description" class="description"></textarea>
<h3 class="characters">Characters (Seperated by commas) *</h3>
<input type="text" name="characters" id="characters" class="characters">
<h3 class="players">Players (Seperated by commas) *</h3>
<input type="text" name="players" id="players" class="players">
<div class="game-info">
<div class="game-name">
<h3>Select Game *</h3>
<select name="game" id="game">
<option disabled selected value>-- Game --</option>
<option value="Street Fighter V">Street Fighter V</option>
<option value="Mortal Kombat 11">Mortal Kombat 11</option>
<option value="Super Smash Bros Melee">Super Smash Bros Melee</option>
<option value="Super Smash Bros Ultimate">Super Smash Ultimate</option>
<option value="Killer Instinct">Killer Instinct</option>
<option value="Injustice">Injustice</option>
</select>
</div>
<div class="stage-name">
<h3 class="stage">Stage Name *</h3>
<input type="text" name="stage" id="stage" class="stage">
</div>
</div>
<div class="length-button">
<div class="length">
<h3>Video Length</h3>
<input type="text" name="length" id="length">
</div>
<div class="button">
<input type="button" name="submit_button" value="Submit" onclick="validateUpload()">
</div>
</div>
</form>
</body>
</html>