add CSS

Kaligo · Nov 29, 2023 · 7134bfe · 7134bfe
1 parent 71723aa
commit 7134bfe
Show file tree

Hide file tree

Showing 9 changed files with 160 additions and 12 deletions.
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
@@ -13,3 +13,129 @@
  *= require_tree .
  *= require_self
  */
+
+ nav {
+  background-color: #fab3ad;
+}
+
+nav ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  font-weight: bold;
+}
+
+nav li {
+  float: left;
+  font-weight: bold;
+}
+
+nav li a {
+  display: block;
+  color: #2c2827;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+}
+
+nav li a:hover {
+  background-color: 	#8da99b;
+}
+
+nav::after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+li.right {
+  float: right;
+}
+
+.form-container {
+  width: 300px;
+  padding: 16px;
+  background-color: white;
+  margin: 0 auto;
+  margin-top: 100px;
+  border: 1px solid black;
+  border-radius: 4px;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+}
+
+label {
+  font-weight: bold;
+  margin-top: 10px;
+}
+
+input[type="text"], input[type="password"], input[type="email"] {
+  padding: 10px;
+  margin-top: 5px;
+  border-radius: 4px;
+  border: 1px solid grey;
+}
+
+input[type="submit"] {
+  margin-top: 10px;
+  padding: 10px;
+  border-radius: 4px;
+  background-color: #4CAF50;
+  color: white;
+  border: none;
+  cursor: pointer;
+}
+
+input[type="submit"]:hover {
+  background-color: #45a049;
+}
+
+.styled-image {
+  width: 50%;
+  height: auto;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  padding: 5px;
+ }
+
+ .styled-image:hover {
+  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
+ }
+
+ .styled-paragraph {
+  color: #333; 
+  font-size: 18px; 
+  line-height: 1.6; 
+  text-align: justify; 
+  padding: 10px; 
+  background-color: #f8f8f8; 
+  border: 1px solid #ddd; 
+  border-radius: 4px; 
+ }
+
+ .alert {
+  padding: 20px;
+  margin-bottom: 20px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+ }
+
+ .alert-notice {
+  color: #3c763d;
+  background-color: #dff0d8;
+  border-color: #d6e9c6;
+ }
+
+ .alert-alert {
+  color: #a94442;
+  background-color: #f2dede;
+  border-color: #ebccd1;
+ }
+
+ * {
+  font-family: Arial, sans-serif; 
+ }
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
@@ -1,2 +1,9 @@
 module ApplicationHelper
+  def flash_class(level)
+    case level
+    when :notice then "alert-notice"
+    when :alert then "alert-alert"
+    else "alert"
+    end
+  end
 end
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
@@ -0,0 +1,13 @@
+<nav>
+  <ul>
+    <li><a href="/">Home</a></li>
+    <li><a href="/pages/anya">Secret Page</a></li>
+    <% if current_user %>
+      <li class='right'><%= link_to 'Log out', user_session_path(current_user), data: {turbo_method: :delete} %></li>
+    <% else %>
+      <li class='right'><%= link_to 'Login', new_user_session_path %></li>
+      <li class='right'><%= link_to 'Register', new_user_path %></li>
+    <% end %>
+  </ul>
+</nav>
+<br>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -12,11 +12,12 @@
 
   <body>
     <% flash.each do |type, msg| %>
-      <div>
+      <div class="alert-<%= flash_class(type) %>">
         <%= msg %>
       </div>
     <% end %>
 
+    <%= render "layouts/header" %>
     <%= yield %>
   </body>
 </html>
diff --git a/app/views/pages/anya.html.erb b/app/views/pages/anya.html.erb
@@ -1 +1 @@
-<h1>This is the secret page</h1>
+<h1>Secret: Anya like Peanuts</h1>
diff --git a/app/views/pages/index.html.erb b/app/views/pages/index.html.erb
@@ -1,13 +1,14 @@
-<%= image_tag "data:image/png;base64,#{@img}", style: "width:30%; height:30%" %>
+
 <% if current_user %>
   <h1>Ohayaimasu, <%= current_user.name %></h1>
+  <%= image_tag "data:image/png;base64,#{@img}", class: "styled-image" %>
+  <p class="styled-paragraph">
   <% @anyas.each do |anya| %>
-    <p><%= anya %></p><br>
+    <%= anya %>
+    <br>
   <% end %>
-  <%= link_to 'Log out', user_session_path(current_user), data: {turbo_method: :delete} %><br>
+  </p><br>
 <% else %>
   <h1>Yororosu onegaisurumasu - Anya</h1>
-  <%= link_to 'Login', new_user_session_path %><br>
-  <%= link_to 'Register', new_user_path %><br>
-<% end %>
-<%= link_to 'Secret page', '/pages/anya' %>
+  <%= image_tag "data:image/png;base64,#{@img}", class: "styled-image" %>
+<% end %>
diff --git a/app/views/user_sessions/new.html.erb b/app/views/user_sessions/new.html.erb
@@ -1,4 +1,4 @@
-<h1>Login page</h1>
+<h1>Login</h1>
 <%= form_with model: @user, url: user_sessions_path do |f| %>
   <div>
     <%= f.label :name %><br>

diff --git a/app/views/users/index.html.erb b/app/views/users/index.html.erb
@@ -1,4 +1,4 @@
-<h1>Users#index</h1>
+<h1>Users</h1>
 
 <%= link_to 'New User', new_user_path %>
 

diff --git a/app/views/users/new.html.erb b/app/views/users/new.html.erb
@@ -1,4 +1,4 @@
-<h1>Users#new</h1>
+<h1>Registration</h1>
 <%= form_with model: @user do |f| %>
   <% if @user.errors.any? %>
     <div>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<h1>This is the secret page</h1>
		<h1>Secret: Anya like Peanuts</h1>