Skip to content

warehouse-dev-009-UI-fix #197

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

warehouse-dev-009-UI-fix #197

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 75 additions & 0 deletions springWarehouse/src/main/resources/static/css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--dark-color: #34495e;
--light-color: #ecf0f1;
--danger-color: #e74c3c;
--success-color: #2ecc71;
}

body {
font-family: 'Inter', 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f8f9fa;
min-height: 100vh;
display: flex;
flex-direction: column;
}

main {
flex: 1;
}

/* Modern card styling */
.custom-card {
border-radius: 12px;
overflow: hidden;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.custom-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
}

/* Modern button styling */
.btn-custom {
padding: 10px 20px;
border-radius: 8px;
font-weight: 500;
transition: all 0.3s ease;
border: none;
}

.btn-custom-primary {
background-color: var(--primary-color);
color: white;
}

.btn-custom-primary:hover {
background-color: #2980b9;
}

/* Form styling */
.modern-form .form-control {
border-radius: 8px;
padding: 12px 15px;
border: 1px solid #ddd;
}

.modern-form .form-control:focus {
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.25);
border-color: var(--primary-color);
}

/* Custom animations */
.fade-in {
animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
62 changes: 62 additions & 0 deletions springWarehouse/src/main/resources/static/js/scripts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
// Add smooth scrolling
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});

// Add fade-in animation to elements as they scroll into view
document.addEventListener('DOMContentLoaded', function() {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('fade-in');
}
});
});

document.querySelectorAll('.custom-card, .container').forEach(el => {
observer.observe(el);
});
});

// Form validation enhancement
document.addEventListener('DOMContentLoaded', function() {
const forms = document.querySelectorAll('.modern-form');

forms.forEach(form => {
form.addEventListener('submit', function(event) {
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
} else {
// Show a nice success message instead of submitting
event.preventDefault();
showSuccessMessage(form);
}

form.classList.add('was-validated');
});
});

function showSuccessMessage(form) {
const formContent = form.innerHTML;
form.innerHTML = `
<div class="text-center py-4">
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" class="bi bi-check-circle-fill text-success mb-4" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
</svg>
<h3>Thank You!</h3>
<p>Your message has been sent successfully.</p>
<button class="btn btn-outline-primary mt-3" id="resetForm">Send Another Message</button>
</div>
`;

document.getElementById('resetForm').addEventListener('click', function() {
form.innerHTML = formContent;
});
}
});
19 changes: 19 additions & 0 deletions springWarehouse/src/main/resources/templates/fragments/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="common-header">
<!-- Meta tags for better mobile experience -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Or Tailwind CSS -->
<!-- <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet"> -->

<!-- Custom CSS -->
<link th:href="@{/css/styles.css}" rel="stylesheet">

<title th:text="${title}">App Title</title>
</head>
</html>
77 changes: 77 additions & 0 deletions springWarehouse/src/main/resources/templates/home.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
th:replace="layout/default :: html(~{::section})">
<body>
<section th:fragment="content">
<!-- Hero Section -->
<div class="px-4 py-5 my-5 text-center">
<h1 class="display-4 fw-bold">Welcome to Our Application</h1>
<div class="col-lg-6 mx-auto">
<p class="lead mb-4">Quickly design and customize responsive mobile-first sites with our modern Spring Boot application.</p>
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
<button type="button" class="btn btn-primary btn-lg px-4 gap-3">Get Started</button>
<button type="button" class="btn btn-outline-secondary btn-lg px-4">Learn More</button>
</div>
</div>
</div>

<!-- Feature Cards -->
<div class="container px-4 py-5">
<h2 class="pb-2 border-bottom">Features</h2>
<div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
<div class="col d-flex align-items-start">
<div class="custom-card w-100 p-4">
<h3 class="fw-bold mb-0">Feature One</h3>
<p>Paragraph of text explaining the first feature of your application and why it's valuable to users.</p>
<a href="#" class="btn btn-custom btn-custom-primary">Learn more</a>
</div>
</div>
<div class="col d-flex align-items-start">
<div class="custom-card w-100 p-4">
<h3 class="fw-bold mb-0">Feature Two</h3>
<p>Paragraph of text explaining the second feature of your application and why it's valuable to users.</p>
<a href="#" class="btn btn-custom btn-custom-primary">Learn more</a>
</div>
</div>
<div class="col d-flex align-items-start">
<div class="custom-card w-100 p-4">
<h3 class="fw-bold mb-0">Feature Three</h3>
<p>Paragraph of text explaining the third feature of your application and why it's valuable to users.</p>
<a href="#" class="btn btn-custom btn-custom-primary">Learn more</a>
</div>
</div>
</div>
</div>

<!-- Modern Form Example -->
<div class="container mb-5">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card shadow">
<div class="card-body p-4">
<h2 class="text-center mb-4">Contact Us</h2>
<form class="modern-form">
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input type="text" class="form-control" id="name" required>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" required>
</div>
<div class="mb-3">
<label for="message" class="form-label">Message</label>
<textarea class="form-control" id="message" rows="4" required></textarea>
</div>
<div class="d-grid">
<button type="submit" class="btn btn-custom btn-custom-primary">Send Message</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
49 changes: 49 additions & 0 deletions springWarehouse/src/main/resources/templates/layout/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/header :: common-header">
</head>
<body>
<!-- Modern Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow-sm">
<div class="container">
<a class="navbar-brand" href="/">Your App</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/features">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About</a>
</li>
</ul>
</div>
</div>
</nav>

<!-- Main Content -->
<main class="container my-4">
<div th:replace="${content}">
<!-- Content goes here -->
</div>
</main>

<!-- Footer -->
<footer class="bg-light py-4 mt-auto">
<div class="container text-center">
<p class="mb-0">© 2023 Your Company</p>
</div>
</footer>

<!-- Bootstrap JS Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<!-- Custom JS -->
<script th:src="@{/js/scripts.js}"></script>
</body>
</html>