Skip to content
Snippets Groups Projects
Commit 9401d6d1 authored by mohamedtimestwo's avatar mohamedtimestwo
Browse files

Added the updated generated page 

Contains the source files of the CSS styling, main HTML code, logo, and wallpaper.
parent bcaf8af8
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
main/website/generate/CaptureX.PNG 0 → 100644
+ 0
− 0
View file @ 9401d6d1
main/website/generate/CaptureX.PNG

200 KiB

main/website/generate/hpwallpaper.jpg 0 → 100644
+ 0
− 0
View file @ 9401d6d1
main/website/generate/hpwallpaper.jpg

97.6 KiB

main/website/generate/musicgenerate.html 0 → 100644
+ 107
− 0
View file @ 9401d6d1
<html>
<head>
<title>Fantasmix | Generate</title>
<link rel="icon" href="CaptureX.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="musicgeneratestyle.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
</head>
<body>
<ul>
<li><img src = "CaptureX.png" class = "logo"></li>
<li><a href="#home">Home</a></li>
<li><a href="#About">About Project</a></li>
<li><a href="#Generate">Generate Music</a></li>
<li><a href="#Login">Login</a></li>
</ul>
<br>
<div class = "container-fluid">
<h1 class="animated fadeInUp">Generate Music</h1>
<hr>
<div class = "container">
<div class="col-lg-6">
<h2 class="animated fadeInUp">Length <i class="material-icons" style ="font-size: 30px;" href="#" data-toggle="popover" title="What is length?" data-content="Length in this context refers to how long you would like the song you produce to be. Click the respective radio button below to your preferred length!">help</i></h2>
<label class="selector" style = "font-weight: normal;">Short
<input type="radio" checked="checked" name="radio">
<span class="checkmark"></span>
</label>
<label class="selector" style = "font-weight: normal;">Mid
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>
<label class="selector" style = "font-weight: normal;">Long
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>
</div>
<div class="col-lg-6">
<h2 class="animated fadeInUp">Tempo <i class="material-icons" style ="font-size: 30px;" href="#" data-toggle="popover" title="What is tempo?" data-content="Tempo is the speed at which your music will be played. Click the respective radio button to your preferred tempo!">help</i></h2>
<label class="selector" style = "font-weight: normal;">Slow
<input type="radio" checked="checked" name="radio-alt">
<span class="checkmark"></span>
</label>
<label class="selector" style = "font-weight: normal;">Mid
<input type="radio" name="radio-alt">
<span class="checkmark"></span>
</label>
<label class="selector" style = "font-weight: normal;">Fast
<input type="radio" name="radio-alt">
<span class="checkmark"></span>
</label>
<label class="selector" style = "font-weight: normal;">Faster
<input type="radio" name="radio-alt">
<span class="checkmark"></span>
</label>
</div>
</div>
<div class = "container">
<div class="col-lg-6">
<h2 class="animated fadeInUp">Instruments <i class="material-icons" style ="font-size: 30px;" href="#" data-toggle="popover" title="How does choosing an instrument work?" data-content="Instruments will define what kind of music you are hearing. The main melody will be played by the primary instrument selected below. The secondary instrument will supply supporting sounds. Below you can select a primary and secondary instrument using the dropdown menus.">help</i></h2>
<label for="primaryInstrument" style = "font-weight: normal;">Primary Instrument:</label>
<select class="form-control" id="primaryInstrument">
<option value="empty">Pick an instrument</option>
<option value="piano">Piano</option>
<option value="guitar">Guitar</option>
<option value="synth">Synth</option>
<option value="violin">Violin</option>
<option value="banjo">Banjo</option>
</select>
<br>
<label for="secondaryInstrument" style = "font-weight: normal;">Secondary Instrument:</label>
<select class="form-control"id="secondaryInstrument">
<option value="empty">Pick an instrument</option>
<option value="none">None</option>
<option value="piano">Piano</option>
<option value="guitar">Guitar</option>
<option value="synth">Synth</option>
<option value="violin">Violin</option>
<option value="banjo">Banjo</option>
</select>
</div>
<div class="col-lg-6">
<h2 class="animated fadeInUp">Scale <i class="material-icons" style ="font-size: 30px;" href="#" data-toggle="popover" title="What is scale?" data-content="Music scale is an organized sequence of notes. Depending what scale you choose, the pitch of your music will change!">help</i></h2>
<label for="scalechoice" style = "font-weight: normal;">Scale:</label>
<select class="form-control"id="scalechoice">
<option value="empty">Pick an scale</option>
<option value="major">Major</option>
<option value="minor">Minor</option>
</select>
</div>
</div>
<button class="btn btn-outline-success btn-block" id ="generbutt">Generate!</button>
</div>
</body>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
</html>
main/website/generate/musicgeneratestyle.css 0 → 100644
+ 159
− 0
View file @ 9401d6d1
*{
font-family: Roboto;
}
body {
background-image: url("hpwallpaper.jpg");
background-repeat: no-repeat;
background-size: 5000px;
animation: breath 30s linear infinite
}
@keyframes breath {
0% { background-size: 120% auto; }
50% { background-size: 140% auto; }
100% { background-size: 120% auto; }
}
.container-fluid {
background-color: white;
}
.logo {
width: 120px;
height: 100px;
margin-left: 250px;
text-decoration: none;
border-radius: 10px;
}
ul {
list-style-type: none;
margin: auto;
padding: 0;
padding-bottom: 10px;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 20px;
padding-left: 80px;
font-family: 'Roboto', sans-serif;
font-weight: bold;
color: black;
font-size: 20px;
text-decoration: none;
transition: 0.3s;
}
li a:hover{
color: black;
text-decoration: underline #00FFFF;
}
h1 {
text-align: center;
}
i {
cursor: pointer;
transition: 0.3s;
}
i:hover {
color: #00FFFF;
}
#generbutt {
margin-top: 20px;
margin-bottom: 15px;
transition: 0.3s;
background-color: black;
color: #00FFFF;
font-size: 20px;
}
#generbutt:hover {
background-color: #00FFFF;
color: black;
}
.form-control {
transition: 0.3s;
}
.form-control:hover {
border-color: #00FFFF;
}
/* Code derived from W3Schools* (All other code is original written by Mohamed Mohamed)/
/* The container */
.selector {
display: block;
position: relative;
padding-left: 35px;
cursor: pointer;
font-size: 18px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default radio button */
.selector input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create a custom radio button */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.selector:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
.selector input:checked ~ .checkmark {
background-color: #00FFFF;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the indicator (dot/circle) when checked */
.selector input:checked ~ .checkmark:after {
display: block;
}
/* Style the indicator (dot/circle) */
.selector .checkmark:after {
top: 9px;
left: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: black;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment