more work on frontend

app/assets/stylesheets/application.scss

@@ -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 {

app/views/main/index.html.erb

@@ -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>

app/views/shared/_features.html.erb

@@ -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="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 class="col-6">
-    <h1>Feature Two</h1>
   </div>
 </div>

app/views/shared/_footer.html.erb

@@ -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>

app/views/shared/_start_meeting.html.erb

@@ -1,17 +1,59 @@
-<div class="card text-center">
-  <div class="card-body">
-    <div class="col-8 offset-2 form-group">
+<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">
-          <%= f.text_field :name, class: "form-control", placeholder: "Enter a meeting name to start!" %>
+      <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 Meeting", class: "btn btn-primary" %>
+          <%= 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 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>