Skip to content

enhancement/changed the UI for the basic.html. #2529

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: develop
Choose a base branch
from
Open

enhancement/changed the UI for the basic.html. #2529

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
279 changes: 266 additions & 13 deletions obp-api/src/main/webapp/basic.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,274 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" data-bs-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Liftweb Portal | Modern Interface</title>

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

<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">

<!-- Custom Styles -->
<style>
:root {
--primary-gradient: linear-gradient(135deg, #28a745 0%, #20c997 100%);
--card-shadow: 0 12px 20px -10px rgba(0, 0, 0, 0.15);
}

body {
background: #f8f9fa;
min-height: 100vh;
display: flex;
flex-direction: column;
}

.navbar-brand {
font-weight: 700;
letter-spacing: 0.5px;
}

.hero-section {
background: var(--primary-gradient);
color: white;
padding: 5rem 0;
margin-bottom: 3rem;
position: relative;
overflow: hidden;
}

.hero-section::before {
content: "";
position: absolute;
top: -50px;
right: -50px;
width: 200px;
height: 200px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
}

.hero-section::after {
content: "";
position: absolute;
bottom: -80px;
left: -30px;
width: 300px;
height: 300px;
background: rgba(255, 255, 255, 0.05);
border-radius: 50%;
}

.feature-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: none;
border-radius: 12px;
overflow: hidden;
height: 100%;
}

.feature-card:hover {
transform: translateY(-5px);
box-shadow: var(--card-shadow);
}

.card-icon {
font-size: 2.5rem;
margin-bottom: 1rem;
color: #28a745;
}

footer {
background: #343a40;
color: white;
margin-top: auto;
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">
<i class="bi bi-box-seam me-2"></i>
Liftweb Portal
</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 active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Documentation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>

<!-- Hero Section -->
<section class="hero-section">
<div class="container text-center position-relative">
<h1 class="display-3 fw-bold mb-4">Liftweb Framework</h1>
<p class="lead mb-5">Powerful Scala web framework with modern interface</p>
<div class="d-flex justify-content-center gap-3">
<a href="#main-content" class="btn btn-light btn-lg px-4">
<i class="bi bi-arrow-down-circle me-2"></i>Explore
</a>
<a href="http://www.example.com" class="btn btn-outline-light btn-lg px-4">
<i class="bi bi-box-arrow-up-right me-2"></i>Documentation
</a>
</div>
</div>
</section>

<!-- Main Content (Liftweb Section) -->
<div class="container mb-5" id="main-content">
<div class="row justify-content-center">
<div class="col-lg-10">
<div id="main" data-lift="surround?with=default;at=content" class="bg-white p-4 p-md-5 rounded-4 shadow-sm">
<h2 class="fw-bold mb-4 text-center">
<i class="bi bi-code-slash me-2"></i>Liftweb Integration
</h2>

<div class="row g-4 mt-4">
<!-- Original Content Card -->
<div class="col-md-6">
<div class="feature-card card h-100 p-4">
<div class="card-body text-center">
<i class="bi bi-link-45deg card-icon"></i>
<h3 class="h4 mb-3">Code Surround</h3>
<p class="mb-4">Your original Liftweb content with modern styling</p>
<div class="text-start">
<h4 class="h5"><i class="bi bi-check-circle-fill text-success me-2"></i>Original Content</h4>
<p class="small">with a <a href="http://www.example.com" class="text-decoration-none">link</a></p>
</div>
</div>
</div>
</div>

<!-- Resources Card -->
<div class="col-md-6">
<div class="feature-card card h-100 p-4">
<div class="card-body text-center">
<i class="bi bi-folder card-icon"></i>
<h3 class="h4 mb-3">Resources</h3>
<div class="d-grid gap-2">
<a href="/static" class="btn btn-outline-primary btn-lg">
<i class="bi bi-image me-2"></i>Static Assets
</a>
<a href="/sdks" class="btn btn-outline-success btn-lg">
<i class="bi bi-download me-2"></i>SDK Downloads
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<!-- Features Section -->
<section class="py-5 bg-light">
<div class="container">
<h2 class="text-center mb-5 fw-bold">Framework Features</h2>
<div class="row g-4">
<div class="col-md-4">
<div class="feature-card card h-100">
<div class="card-body p-4 text-center">
<i class="bi bi-lightning-fill card-icon"></i>
<h3 class="h4">High Performance</h3>
<p>Optimized for speed and scalability with Scala's powerful runtime</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="feature-card card h-100">
<div class="card-body p-4 text-center">
<i class="bi bi-shield-lock card-icon"></i>
<h3 class="h4">Secure</h3>
<p>Built-in security features to protect your application</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="feature-card card h-100">
<div class="card-body p-4 text-center">
<i class="bi bi-arrows-angle-expand card-icon"></i>
<h3 class="h4">Scalable</h3>
<p>Easily scale your application to meet growing demands</p>
</div>
</div>
</div>
</div>
</div>
</section>

<head><title>Basic Liftweb Suround with default</title></head>
<body bgcolor="green">

<div id="main" data-lift="surround?with=default;at=content" tabindex="-1">

<h1>I call LiftWeb code surround</h1>
with a <a href="http://www.example.com">link</a>
<h1>Link to static</h1><a href="/static">static image</a>
<h1>Link to SDKs</h1><a href="/sdks">SDKs</a>

</div>

<!-- Footer -->
<footer class="py-5">
<div class="container">
<div class="row">
<div class="col-md-6">
<h3 class="h5 mb-3">Liftweb Framework</h3>
<p class="small text-muted">A powerful web framework for building scalable applications in Scala.</p>
</div>
<div class="col-md-3">
<h3 class="h5 mb-3">Links</h3>
<ul class="list-unstyled">
<li class="mb-2"><a href="#" class="text-decoration-none text-muted small">Documentation</a></li>
<li class="mb-2"><a href="#" class="text-decoration-none text-muted small">GitHub</a></li>
<li class="mb-2"><a href="#" class="text-decoration-none text-muted small">Community</a></li>
</ul>
</div>
<div class="col-md-3">
<h3 class="h5 mb-3">Resources</h3>
<ul class="list-unstyled">
<li class="mb-2"><a href="/static" class="text-decoration-none text-muted small">Static Files</a></li>
<li class="mb-2"><a href="/sdks" class="text-decoration-none text-muted small">SDKs</a></li>
<li class="mb-2"><a href="#" class="text-decoration-none text-muted small">Examples</a></li>
</ul>
</div>
</div>
<hr class="my-4 bg-secondary">
<div class="text-center small text-muted">
&copy; 2023 Liftweb Framework. All rights reserved.
</div>
</div>
</footer>

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

<!-- Theme Toggle Script -->
<script>
document.addEventListener('DOMContentLoaded', function() {
const themeToggle = document.createElement('button');
themeToggle.className = 'btn btn-sm btn-outline-secondary position-fixed bottom-0 end-0 m-3';
themeToggle.innerHTML = '<i class="bi bi-moon-stars"></i>';
themeToggle.onclick = function() {
const html = document.documentElement;
const currentTheme = html.getAttribute('data-bs-theme');
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
html.setAttribute('data-bs-theme', newTheme);
themeToggle.innerHTML = newTheme === 'dark'
? '<i class="bi bi-sun"></i>'
: '<i class="bi bi-moon-stars"></i>';
};
document.body.appendChild(themeToggle);
});
</script>
</body>
</html>