From 4dad6bbdc84b27fded6efc59181bf832a466bc59 Mon Sep 17 00:00:00 2001 From: Ken Johnson Date: Sun, 7 Dec 2025 02:41:28 -0500 Subject: [PATCH] Modernize benefit forms page with stunning card-based design MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Complete redesign of the benefit forms download and upload page: **Download Section**: - Beautiful hover cards for Health and Dental insurance - Large colorful icons (heart pulse and smile) - Card elevation on hover (lift animation) - Primary colored Health button, success colored Dental button - Centered layout with descriptions - Side-by-side responsive layout **Upload Section**: - Modern drag-drop style upload area - Dashed border with cloud upload icon - Custom file input with "Choose File" button - Real-time file selection feedback - Upload area changes color when file selected (green border) - Animated progress bar during upload - Cancel button to reset form - Clean action buttons with icons **Additional Features**: - Info box with important upload guidelines - File format and size restrictions - Bootstrap Icons throughout - Smooth transitions and animations - Turbolinks compatibility - Form validation (file required) - Simulated upload progress visualization **Removed**: - Old Bootstrap 2 classes (span4, span12) - Outdated icon fonts - Complex file upload plugin dependencies - Cluttered table-heavy layout The page now looks like a modern web application with: - Card-based design - Hover effects - Large touch-friendly buttons - Clear visual hierarchy - Professional polish 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- app/views/benefit_forms/index.html.erb | 324 ++++++++++++++++--------- 1 file changed, 214 insertions(+), 110 deletions(-) diff --git a/app/views/benefit_forms/index.html.erb b/app/views/benefit_forms/index.html.erb index 818ab08..14920ad 100644 --- a/app/views/benefit_forms/index.html.erb +++ b/app/views/benefit_forms/index.html.erb @@ -1,108 +1,137 @@ -
-
- -
- -
-
-
-
- Health Insurance -
-
- -
- Click on PDF to download

- <%= link_to download_path(:type => "File", :name => "public/docs/Health_n_Stuff.pdf") do %> -
-
- - - PDF - -
- -
- <% end %> -
- -
-
- -
-
-
-
- Dental Insurance -
-
- -
- Click on PDF to download

- <%= link_to download_path(:type => "File", :name => "public/docs/Dental_n_Stuff.pdf") do %> -
-
- - - PDF - -
- -
- <% end %> -
- -
-
+
+
+
+

+ Benefit Forms +

+

Download benefit documents and upload completed forms

-
-
-
-
-
- Health Insurance -
-
- -
-
-

Upload file

- <%= form_for @benefits, :url => upload_path, :html => { :action => "upload", :multipart => true, :id => "fi" } do |f| %> - -
-
- <%= hidden_field "benefits", "backup", :value => false %> - - - - Add file - <%= f.file_field :upload %> - - -

Nothing selected -
-
- -
-
+
+ + +
+ +
+
+
+
+ +
+

Health Insurance

+

Download your health insurance benefit forms and information

+ <%= link_to download_path(type: "File", name: "public/docs/Health_n_Stuff.pdf"), class: "btn btn-primary btn-lg" do %> + Download PDF + <% end %> +
+
+
+ + +
+
+
+
+ +
+

Dental Insurance

+

Download your dental insurance benefit forms and information

+ <%= link_to download_path(type: "File", name: "public/docs/Dental_n_Stuff.pdf"), class: "btn btn-success btn-lg" do %> + Download PDF + <% end %> +
+
+
+
+ + +
+
+
+
+

+ Upload Completed Forms +

+
+
+ <%= form_for @benefits, url: upload_path, html: { multipart: true, id: "fi", class: "needs-validation" } do |f| %> + <%= hidden_field "benefits", "backup", value: false %> + +
+
+
+ +
Select File to Upload
+

Choose a file from your computer

+ +
+ + <%= f.file_field :upload, class: "d-none", id: "benefits_upload" %> +
+ +
+ + No file selected +
- -
-
- - -
- <% end %> -
-
-
-
+
+
+ + +
+
+ +
+ + +
+ +
+ + + + + + + + + + +
File NameSizeStatus
+
+
+ <% end %> +
+
+
+
+ + +
+
+ @@ -111,16 +140,91 @@
\ No newline at end of file + // Show progress bar + $("#upload-progress").show(); + + // Simulate upload progress (in real implementation, this would be handled by the server) + var progress = 0; + var interval = setInterval(function() { + progress += 10; + $("#progress-bar").css('width', progress + '%'); + $("#progress-text").text(progress + '%'); + + if (progress >= 100) { + clearInterval(interval); + } + }, 200); + }); +}); + +// Handle Turbolinks page loads +$(document).on('turbolinks:load', function() { + makeActive(); +}); + + +