merenber
/
greenlight
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

more work on frontend

This commit is contained in:
Josh 2018-05-25 16:51:16 -04:00
parent 0dce8d2bf5
commit 6c1074443f
5 changed files with 126 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
app/assets/stylesheets/application.scss
View File

@ -38,9 +38,17 @@
@import "tabler";
@import "tabler.plugins";
$background-color: #d1e2ff;
$background-color: #D1E2FF;
$rule-color: lightblue;
.header {
background-color: transparent;
}
.footer {
background-color: $background-color;
}
.video-container {
position: relative;
width: 100%;
@ -48,6 +56,16 @@ $rule-color: lightblue;
padding-bottom: 56.25%;
}
.start-block {
background-color: white;
border: 3px solid lightblue;
border-radius: 4px;
}
.main-large {
font-size: 20px;
}
iframe{
position: absolute;
top: 0;
@ -60,6 +78,7 @@ html, body {
width: 100%;
height: 100%;
background: linear-gradient(180deg, $background-color 50%, white 50%);
background-repeat: no-repeat;
}
.small-rule {

22
app/views/main/index.html.erb
View File

@ -1,5 +1,5 @@
<div class="container">
<h1 class="display-3 text-center text-primary">Teach Students Online</h1>
<h1 id="main-text" class="display-3 text-center text-primary">Teach Students Online.</h1>
<hr class="small-rule">
<%= render "shared/start_meeting" %>
@ -15,4 +15,24 @@
$(window).on('load',function(){
$('#welcomeModal').modal('show');
});
textOptions = [
"Start your own Meeting.",
"Collaborate with Friends.",
"Connect in Real-Time.",
"Teach Students Online.",
]
textOpt = 0
var changeText = function(){
$('#main-text').text(textOptions[textOpt]);
$('#main-text').fadeIn(1000)
textOpt++;
if (textOpt > textOptions.length) { textOpt = 0; }
}
setInterval(function(){
$('#main-text').fadeOut(1000, changeText)
}, 7000);
</script>

34
app/views/shared/_features.html.erb
View File

@ -1,11 +1,33 @@
<h1 class="text-center text-primary">Features</h1>
<h3 class="text-center text-primary mt-6">Features</h3>
<hr class="small-rule">
<div class="row text-center">
<div class="col-6">
<h1>Feature One</h1>
<div class="container text-center">
<div class="row mt-4">
<div class="col-4">
<i class="fas fa-video fa-6x"></i>
<h4 class="mt-5">Manage Recordings</h4>
</div>
<div class="col-4">
<i class="fas fa-users fa-6x"></i>
<h4 class="mt-5">Create Meetings</h4>
</div>
<div class="col-4">
<i class="fas fa-history fa-6x"></i>
<h4 class="mt-5">Session History</h4>
</div>
</div>
<div class="col-6">
<h1>Feature Two</h1>
<div class="row mt-8">
<div class="col-4">
<i class="fas fa-pencil-alt fa-6x"></i>
<h4 class="mt-5">Custom Designs</h4>
</div>
<div class="col-4">
<i class="fas fa-user-cog fa-6x"></i>
<h4 class="mt-5">User Mangement</h4>
</div>
<div class="col-4">
<i class="fas fa-thumbs-up fa-6x"></i>
<h4 class="mt-5">Feature Six</h4>
</div>
</div>
</div>

2
app/views/shared/_footer.html.erb
View File

@ -1,3 +1,3 @@
<div class="footer">
<div class="footer mt-6">
<h5 class="text-center">Powered by <a target="_blank" href="http://bigbluebutton.org/">BigBlueButton</a>.</h5>
</div>

70
app/views/shared/_start_meeting.html.erb
View File

@ -1,17 +1,59 @@
<div class="card text-center">
<div class="card-body">
<div class="col-8 offset-2 form-group">
<%= form_for(:meeting, url: create_meeting_path) do |f| %>
<div class="input-group">
<%= f.text_field :name, class: "form-control", placeholder: "Enter a meeting name to start!" %>
<span class="input-group-append">
<%= f.submit "Start Meeting", class: "btn btn-primary" %>
</span>
</div>
<% end %>
<div class="col-10 offset-1 form-group">
<div class="start-block">
<%= form_for(:meeting, url: create_meeting_path) do |f| %>
<div class="input-group" style="height: 70px;">
<%= f.text_field :name, id: "name-input", class: "form-control main-large", placeholder: "Enter a meeting name!", autocomplete: :off %>
<span class="input-group-append">
<%= f.submit "Start", class: "btn btn-primary px-7 main-large" %>
</span>
</div>
<% end %>
<div class="input-group align-center p-4">
<div class="col-8">
<label class="form-label">Invite Participants</label>
<input id="invite-url" type="text" class="form-control" value="greenlight.com/m/your-meeting-name" readonly="">
</div>
<div class="col-4 mt-auto align-center">
<button id="copy" class="btn btn-primary">
<i class="fas fa-copy"></i>
Copy
</button>
<button id="email" class="btn btn-primary">
<i class="fas fa-envelope"></i>
Email
</button>
</div>
</div>
</div>
<div class="card-footer">
Invite URL and stuff goes here.
</div>
</div>
<script>
var invite_url;
var copy = $('#copy');
$('#name-input').on('input', function(){
if ($('#name-input').val() == "") {
invite_url = window.location.href + "m/your-meeting-name";
} else {
invite_url = window.location.href + "m/" + encodeURIComponent($('#name-input').val());
}
$('#invite-url').val(invite_url);
});
copy.on('click', function(){
var inviteURL = $('#invite-url');
inviteURL.select();
var success = document.execCommand("copy");
if (success) {
inviteURL.blur();
copy.addClass('btn-success');
copy.html("<i class='fas fa-check'></i> Copy")
setTimeout(function(){
copy.removeClass('btn-success');
copy.html("<i class='fas fa-copy'></i> Copy")
}, 1500)
}
});
</script>