From af91fbc75884bc33b534d3ec77e818813c7c80b3 Mon Sep 17 00:00:00 2001
From: QI SUN <lukesun2023@gmail.com>
Date: Wed, 26 Feb 2025 22:11:25 -0600
Subject: [PATCH] finished the styling

---
 app/assets/stylesheets/application.css  | 20 -----
 app/assets/stylesheets/application.scss | 98 +++++++++++++++++++++++++
 app/views/layouts/application.html.erb  |  2 +-
 config/routes.rb                        | 13 ++--
 4 files changed, 104 insertions(+), 29 deletions(-)
 delete mode 100644 app/assets/stylesheets/application.css
 create mode 100644 app/assets/stylesheets/application.scss

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
deleted file mode 100644
index ef8844e..0000000
--- a/app/assets/stylesheets/application.css
+++ /dev/null
@@ -1,20 +0,0 @@
-/*
- * This is a manifest file that'll be compiled into application.css.
- *
- * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
- * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
- * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
- * depending on specificity.
- *
- * Consider organizing styles into separate files for maintainability.
- */
- @import "bulma";
-
- /* Custom styles */
- .card {
-   height: 100%;
- }
- 
- .image.is-96x96 {
-   margin: 0 auto;
- }
\ No newline at end of file
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
new file mode 100644
index 0000000..e29789b
--- /dev/null
+++ b/app/assets/stylesheets/application.scss
@@ -0,0 +1,98 @@
+/*
+ * This is a manifest file that'll be compiled into application.css.
+ *
+ * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
+ * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
+ * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
+ * depending on specificity.
+ *
+ * Consider organizing styles into separate files for maintainability.
+ */
+ @import "bulma";
+
+ body {
+  background: #222;
+  color: #fff;
+  font-family: 'Courier New', monospace;
+}
+
+.container {
+  padding: 20px;
+}
+
+.title {
+  color: #0f0;
+  text-align: center;
+  text-shadow: 0 0 10px #0f0;
+  font-family: 'Courier New', monospace;
+  letter-spacing: 2px;
+}
+
+/* Retro terminal-style cards */
+.card {
+  background: #000;
+  border: 2px solid #0f0;
+  border-radius: 0;
+  box-shadow: 0 0 15px rgba(0, 255, 0, 0.5);
+  color: #0f0;
+  margin-bottom: 20px;
+}
+
+/* Blinking cursor effect on hover */
+.card:hover::after {
+  content: "_";
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  color: #0f0;
+  animation: blink 1s infinite;
+}
+
+@keyframes blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
+
+/* Customer image as "pixel art" */
+.image.is-96x96 {
+  border: 2px solid #0f0;
+  border-radius: 0;
+  overflow: hidden;
+  filter: brightness(1.2) contrast(1.2) grayscale(0.5) sepia(0.2);
+}
+
+.image.is-96x96 img {
+  mix-blend-mode: screen;
+}
+
+/* Customer info */
+.title.is-4 {
+  color: #0f0;
+  font-family: 'Courier New', monospace;
+}
+
+.subtitle.is-6 {
+  color: #0f0;
+  font-style: italic;
+}
+
+.has-text-danger {
+  color: #f00 !important;
+  text-decoration: blink;
+  background: none;
+}
+
+/* Button styling */
+.button {
+  background: #000;
+  color: #0f0;
+  border: 2px solid #0f0;
+  border-radius: 0;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+.button:hover {
+  background: #0f0;
+  color: #000;
+}
\ No newline at end of file
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index cb206f8..538f543 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -18,7 +18,7 @@
     <link rel="apple-touch-icon" href="/icon.png">
 
     <%# Includes all stylesheet files in app/assets/stylesheets %>
-    <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
+    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
   </head>
 
   <body>
diff --git a/config/routes.rb b/config/routes.rb
index 4d34964..14adf73 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -1,19 +1,16 @@
 Rails.application.routes.draw do
+  root "customers#index"
   get "customers/index"
-   get 'customers/alphabetized', to: 'customers#alphabetized'
+  get 'customers/alphabetized', to: 'customers#alphabetized'
   get 'customers/missing_email', to: 'customers#missing_email'
   devise_for :admin_users, ActiveAdmin::Devise.config
   ActiveAdmin.routes(self)
+  
   # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html
 
   # Reveal health status on /up that returns 200 if the app boots with no exceptions, otherwise 500.
   # Can be used by load balancers and uptime monitors to verify that the app is live.
   get "up" => "rails/health#show", as: :rails_health_check
 
-  # Render dynamic PWA files from app/views/pwa/* (remember to link manifest in application.html.erb)
-  # get "manifest" => "rails/pwa#manifest", as: :pwa_manifest
-  # get "service-worker" => "rails/pwa#service_worker", as: :pwa_service_worker
-
-  # Defines the root path route ("/")
-  # root "posts#index"
-end
+  # The rest of your routes...
+end
\ No newline at end of file