finished the styling

QISUN000 · Feb 27, 2025 · af91fbc · af91fbc
1 parent ba0ba89
commit af91fbc
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 29 deletions.
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
diff --git a/app/assets/stylesheets/application.scss 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;
+}
diff --git 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
@@ -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