added new forms and cards

Gemfile

@@ -61,10 +61,12 @@ group :test do
   gem 'capybara', '>= 3.26'
   gem 'selenium-webdriver'
   # Easy installation and use of web drivers to run system tests with browsers
-  gem 'simplecov'
+  gem 'simplecov', '0.17.1', require: false # CC last supported v0.17
   gem 'webdrivers'
   gem 'rails-controller-testing'
 end
 
 # Windows does not include zoneinfo files, so bundle the tzinfo-data gem
 gem 'tzinfo-data', platforms: %i[mingw mswin x64_mingw jruby]
+
+gem "tailwindcss-rails", "~> 0.4.3"

Gemfile.lock

@@ -281,7 +281,7 @@ GEM
       childprocess (>= 0.5, < 4.0)
       rubyzip (>= 1.2.2)
     semantic_range (3.0.0)
-    simplecov (0.17.0)
+    simplecov (0.17.1)
       docile (~> 1.1)
       json (>= 1.8, < 3)
       simplecov-html (~> 0.10.0)
@@ -294,6 +294,8 @@ GEM
       actionpack (>= 4.0)
       activesupport (>= 4.0)
       sprockets (>= 3.0.0)
+    tailwindcss-rails (0.4.3)
+      rails (>= 6.0.0)
     temple (0.8.2)
     thor (1.1.0)
     tilt (2.0.10)
@@ -353,8 +355,9 @@ DEPENDENCIES
   rspec-rails (~> 5.0.2)
   sass-rails (~> 6.0.0)
   selenium-webdriver
-  simplecov
+  simplecov (= 0.17.1)
   spring
+  tailwindcss-rails (~> 0.4.3)
   turbolinks (~> 5)
   tzinfo-data
   web-console (>= 4.1.0)

app/javascript/application.css

@@ -0,0 +1,3 @@
+@import "tailwindcss/base";
+@import "tailwindcss/utilities";
+@import "tailwindcss/components";

app/presenters/result_status_presenter.rb

@@ -12,21 +12,21 @@ def status
     if @quiz.theory
       return generate_tag(@quiz.result.result) if @quiz.result
 
-      content_tag(:span, "Waiting for chellenge")
+      content_tag(:span, "Waiting for chellenge", class: "text-sm px-3 py-1 bg-indigo-200 text-indigo-800 rounded-full")
 
     else
       @in_proccess = Practice.find_by(user: user, action_name: 'domain')
       @practice = PracticeResult.find_by(user: user)
       return generate_tag(@practice.result) unless @practice.nil?
 
-      return content_tag(:span, "In Proccess", class: "answered") unless @in_proccess.nil? 
-      content_tag(:span, "Waiting for chellenge")
+      return content_tag(:span, "In Proccess", class: "text-sm px-3 py-1 bg-red-200 text-red-800 rounded-full") unless @in_proccess.nil? 
+      content_tag(:span, "Waiting for chellenge", class: "text-sm px-3 py-1 bg-indigo-200 text-indigo-800 rounded-full")
     end
   end
 
 
   def generate_tag(flag)
-    return content_tag(:span, "True", class: "green") if flag
-	  content_tag(:span, "Fails", class: "answered")
+    return content_tag(:span, "Passed", class: "text-sm px-3 py-1 bg-green-200 text-green-800 rounded-full") if flag
+	  content_tag(:span, "Failed", class: "text-sm px-3 py-1 bg-gray-200 text-gray-800 rounded-full")
   end
 end

app/views/home/index.html.erb

@@ -1,49 +1,44 @@
 <% if user_signed_in? %>
-	<div class="container">
 
-		<%= @result %>
+	<main class="w-full place-content-center flex justify-evenly content-center mt-10 pt-12 h-4/5">
 
-		<h2>Your quizzes:</h2>
 		<% if @quizzes.any? %>
 
-			<table class="table-custom">
-				<thead>
-					<th>ID</th>
-					<th>Title</th>
-					<th>Status</th>
-					<th>Type</th>
-					<th>Actions</th>
-				</thead>
-				<tbody>
-
-				<% current_user.quizzes.each do |quiz| %>
-					<tr>
-						<td><%= quiz.id %></td>
-						<td><%= quiz.title %></td>
-						<td>
-							<% quiz_presenter = ResultStatusPresenter.new(quiz: quiz, user: current_user) %>
-							<%= quiz_presenter.status %>
-						</td>
-						<td>
+		<% current_user.quizzes.each do |quiz| %>
+			<div class="rounded-lg flex-initial" style="box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;">
+					<div class="bg-gray-100 rounded-lg w-96">
+
+							<div class="px-10 py-6 text-center">
+									<div class="mb-4 text-3xl font-bold text-purple-600 uppercase"><%= quiz.title %></div>
+									<span class="text-sm">
+											Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate tempore eligendi magnam
+											distinctio molestias. Incidunt at consequuntur consequatur
+											officiis repudiandae! Culpa cum vel tenetur itaque eius provident voluptatum similique impedit?
+									</span>
+							</div>
+
+							<div class="px-10 py-1 mb-2 text-center">
+								<span class="text-lg">
+									<% quiz_presenter = ResultStatusPresenter.new(quiz: quiz, user: current_user) %>
+									Status <%= quiz_presenter.status %>
+								</span>
+							</div>
+
 							<% if quiz.theory %>
-								Theory
+										<%= button_to "Let's Start", quiz_prepare_path(quiz), method: :get, class: "w-full h-16 text-lg font-extrabold text-gray-100 transition duration-300 bg-purple-600 rounded-b-lg hover:bg-purple-700 cursor-pointer" %>
 							<% else %>
-								Practice
+
+										<%= button_to "Let's Start", practice_index_path, method: :get, class: "w-full h-16 text-lg font-extrabold text-gray-100 transition duration-300 bg-purple-600 rounded-b-lg hover:bg-purple-700 cursor-pointer" %>
 							<% end %>
-						</td>
-						<% if quiz.theory %>
-							<td><%= link_to "Start", quiz_prepare_path(quiz), class: 'actions' %></td>
-						<% else %>
-							<td><%= link_to "Start", practice_index_path, class: 'actions' %></td>
-						<% end %>
-					</tr>
-				<% end %>
-				</tbody>
-			</table>
-		<% else %>
-			<p>No any quizzes</p>
+
+					</div>
+			</div>
 		<% end %>
-	</div>
+			<% else %>
+				No Any Quizzes
+			<% end %>
+	</main>
+
 
 <% else %>
 

app/views/layouts/application.html.erb

@@ -7,6 +7,8 @@
   <%= csrf_meta_tags %>
   <%= csp_meta_tag %>
 
+    <%= stylesheet_link_tag "inter-font", "data-turbo-track": "reload" %>
+    <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
   <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
   <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
 
@@ -15,15 +17,13 @@
   <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet"> 
 </head>
 
-<body>
+<body class="h-screen">
   <%= render 'shared/navbar' %>
-  <div class="banner">
-	  <h1 class="h1-header">QUUUUIZZZ</h1>
-    <% if user_signed_in? %>
-        <h1 class="h1-header"><%= current_user.username %></h1>
-    <% end %>
+
+  <div class="container px-5 py-48" style="background:url('assets/hero-orange.jpg')">
   </div>
 
+
   <%= yield %>
   <%= toastr_flash %>
 </body>

app/views/quiz/prepare.html.erb

@@ -1,20 +1,32 @@
-<div class="flex-centrilize">
-	<div class="category-description">
-		<h2 class="box-title">Sertifitseerimise test</h2>
-		<ul>
-			<li>Testi läbimiseks on sul 45 minutit</li>
-			<li>Küsimusi on 5</li>
-			<li>Küsimustel võib olla mitu õiget vastust</li>
-			<li>Küsimuste vahel saab liikuda vasakul asuvas menüüs</li>
-			<li>Küsimustele võib vastata ükskõik millises järjekorras</li>
-			<li>Kui oled Kõikidele küsimustele vastanud, vajuta vasakul nuppu "Lõpeta test"</li>
-			<li>Peale lõpetamist saad kohe kokkuvõtte oma testist, kus saad näha oma tulemust ja küsimuste õigeid vastuseid</li>
-			<li>Kui oled valmis vajuta nuppu "alusta test"</li>
-		</ul>
+<div class="min-h-screen bg-gray-100 py-6 flex flex-col justify-center sm:py-12">
+	<div class="relative py-3 sm:max-w-xl sm:mx-auto">
+		<div
+			class="absolute inset-0 bg-gradient-to-r from-blue-300 to-blue-600 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl">
+		</div>
+		<div class="relative px-4 py-10 bg-white shadow-lg sm:rounded-3xl sm:p-20">
+			<div class="max-w-md mx-auto">
+				<div>
+					<h1 class="text-2xl font-semibold">Sertifitseerimise test</h1>
+						<ul class="list-disc p-4">
+							<li>Testi läbimiseks on sul 45 minutit</li>
+							<li>Küsimusi on 5</li>
+							<li>Küsimustel võib olla mitu õiget vastust</li>
+							<li>Küsimuste vahel saab liikuda vasakul asuvas menüüs</li>
+							<li>Küsimustele võib vastata ükskõik millises järjekorras</li>
+							<li>Kui oled Kõikidele küsimustele vastanud, vajuta vasakul nuppu "Lõpeta test"</li>
+							<li>Peale lõpetamist saad kohe kokkuvõtte oma testist, kus saad näha oma tulemust ja küsimuste õigeid vastuseid</li>
+							<li>Kui oled valmis vajuta nuppu "alusta test"</li>
+						</ul>
+				</div>
 
-		<div class="box-button-wrapper">
-			<%= link_to "Get started", quiz_path(id: params[:id]), class: 'actions' %>
-			<%= link_to "Cancel", root_path, class: 'actions-red' %>
+						<div class="relative mt-4">
+								<%= link_to "Get started", quiz_path(id: params[:id]), class: 'actions' %>
+								<%= link_to "Cancel", root_path, class: 'actions-red' %>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
 		</div>
 	</div>
 </div>

app/views/shared/_navbar.html.erb

@@ -1,7 +1,77 @@
-<nav class="navbar-custom">
-	<% if user_signed_in? %>
-		<%= link_to "Logout", destroy_user_session_path, method: :delete, class: 'nav-link'  %>
-	<% else %>
-			<%= link_to "Login", new_user_session_path, class: 'nav-link'  %>
-	<% end %>
-</nav>
+<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
+<div class="">
+  <div class="antialiased bg-gray-100 dark-mode:bg-gray-900">
+  <div class="w-full text-gray-700 bg-white dark-mode:text-gray-200 dark-mode:bg-gray-800">
+    <div x-data="{ open: true }" class="flex flex-col max-w-screen-xl px-4 mx-auto md:items-center md:justify-between md:flex-row md:px-6 lg:px-8">
+      <div class="flex flex-row items-center justify-between p-4">
+        <a href="#" class="text-lg font-semibold tracking-widest text-gray-900 uppercase rounded-lg dark-mode:text-white focus:outline-none focus:shadow-outline">
+					<%= image_tag "logo-m.png", class: "object-cover h-8 w-full" %>
+				</a>
+        <button class="rounded-lg md:hidden focus:outline-none focus:shadow-outline" @click="open = !open">
+          <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
+            <path x-show="!open" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
+            <path x-show="open" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+          </svg>
+        </button>
+      </div>
+      <nav :class="{'flex': open, 'hidden': !open}" class="flex-col flex-grow hidden pb-4 md:pb-0 md:flex md:justify-end md:flex-row">
+        <a class="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="#">Dashboard</a>
+        <a class="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="#">Theory</a>
+        <a class="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="#">Practice</a>
+
+        <div @click.away="open = false" class="relative" x-data="{ open: false }">
+          <button @click="open = !open" class="flex flex-row text-gray-900 bg-gray-200 items-center w-full px-4 py-2 mt-2 text-sm font-semibold text-left bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:focus:bg-gray-600 dark-mode:hover:bg-gray-600 md:w-auto md:inline md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline">
+            <span>More</span>
+            <svg fill="currentColor" viewBox="0 0 20 20" :class="{'rotate-180': open, 'rotate-0': !open}" class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+          </button>
+          <div x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="absolute right-0 w-full md:max-w-screen-sm md:w-screen mt-2 origin-top-right">
+            <div class="px-2 pt-2 pb-4 bg-white rounded-md shadow-lg dark-mode:bg-gray-700">
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+
+							<% if user_signed_in? %>
+								<%= link_to destroy_user_session_path, class: "flex flex row items-start rounded-lg bg-transparent p-2 dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" do %>
+                  <div class="bg-yellow-700 text-white rounded-lg p-3">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
+										</svg>
+                  </div>
+                  <div class="ml-3">
+                    <p class="font-semibold">Sign out</p>
+                  </div>
+                <% end %>
+
+                <a class="flex flex row items-start rounded-lg bg-transparent p-2 dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="#">
+                  <div class="bg-yellow-700 text-white rounded-lg p-3">
+										<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+											<path d="M12 14l9-5-9-5-9 5 9 5z" />
+											<path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
+											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
+										</svg>
+                  </div>
+                  <div class="ml-3">
+                    <p class="font-semibold">Profile</p>
+                    <p class="text-sm">Check your data and analytics</p>
+                  </div>
+                </a>
+							<% else %>
+								<%= link_to new_user_session_path, class: "flex flex row items-start rounded-lg bg-transparent p-2 dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" do %>
+                  <div class="bg-yellow-700 text-white rounded-lg p-3">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
+										</svg>
+                  </div>
+                  <div class="ml-3">
+                    <p class="font-semibold">Sign in</p>
+                  </div>
+							  <% end %>
+							<% end %>
+
+              </div>
+            </div>
+          </div>
+        </div>    
+      </nav>
+    </div>
+  </div>
+</div>
+  </div>

config/environments/production.rb

@@ -26,7 +26,7 @@
   config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present?
 
   # Compress CSS using a preprocessor.
-  # config.assets.css_compressor = :sass
+  config.assets.css_compressor = :purger
 
   # Do not fallback to assets pipeline if a precompiled asset is missed.
   config.assets.compile = true