113 lines
2.6 KiB
Plaintext
113 lines
2.6 KiB
Plaintext
<%# app/views/programs/_form.html.erb %>
|
|
|
|
<style>
|
|
/* 🔹 FORM CONTAINER ANIMATION */
|
|
.animated-form {
|
|
background: linear-gradient(135deg, #f0f8ff, #e8f5e9);
|
|
border-radius: 15px;
|
|
padding: 2.5rem;
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
|
max-width: 600px;
|
|
margin: 3rem auto;
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
|
|
.animated-form:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
/* 🔹 LABEL + INPUT STYLE */
|
|
.animated-form label {
|
|
font-weight: 600;
|
|
color: #333;
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.animated-form input {
|
|
width: 100%;
|
|
padding: 10px 15px;
|
|
border-radius: 8px;
|
|
border: 2px solid #ccc;
|
|
transition: all 0.3s ease;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.animated-form input:focus {
|
|
border-color: #4caf50;
|
|
box-shadow: 0 0 8px rgba(76, 175, 80, 0.4);
|
|
outline: none;
|
|
}
|
|
|
|
/* 🔹 SUBMIT BUTTON */
|
|
.animated-form .submit-btn {
|
|
background: linear-gradient(135deg, #4caf50, #2e7d32);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 8px;
|
|
padding: 12px 20px;
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
margin-top: 1.2rem;
|
|
cursor: pointer;
|
|
width: 100%;
|
|
transition: background 0.3s ease, transform 0.2s ease;
|
|
}
|
|
|
|
.animated-form .submit-btn:hover {
|
|
background: linear-gradient(135deg, #43a047, #1b5e20);
|
|
transform: scale(1.03);
|
|
}
|
|
|
|
/* 🔹 ERROR STYLING */
|
|
.animated-form .error-box {
|
|
background: rgba(255, 0, 0, 0.1);
|
|
border-left: 4px solid #e53935;
|
|
color: #b71c1c;
|
|
padding: 1rem;
|
|
border-radius: 8px;
|
|
margin-bottom: 1rem;
|
|
animation: fadeIn 0.6s ease;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(-10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
</style>
|
|
|
|
<div class="animated-form">
|
|
<%= form_with(model: program, local: true) do |form| %>
|
|
|
|
<% if program.errors.any? %>
|
|
<div class="error-box">
|
|
<h5><%= pluralize(program.errors.count, "error") %> prevented this program from being saved:</h5>
|
|
<ul>
|
|
<% program.errors.each do |error| %>
|
|
<li><%= error.full_message %></li>
|
|
<% end %>
|
|
</ul>
|
|
</div>
|
|
<% end %>
|
|
|
|
<div class="mb-3">
|
|
<%= form.label :name %>
|
|
<%= form.text_field :name, placeholder: "Enter program name" %>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<%= form.label :date %>
|
|
<%= form.date_field :date %>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<%= form.label :leadingPerson, "Leading Person" %>
|
|
<%= form.text_field :leadingPerson, placeholder: "Who leads this program?" %>
|
|
</div>
|
|
|
|
<%= form.submit "Save Program", class: "submit-btn" %>
|
|
<% end %>
|
|
</div>
|