...
This commit is contained in:
parent
bb529b9973
commit
2baa5a930a
19
index.html
19
index.html
@ -1,11 +1,22 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Trunk Template</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Yew Bootstrap App - Modern Rust WebAssembly</title>
|
||||
<meta name="description" content="A modern web application built with Yew, Rust, and Bootstrap 5" />
|
||||
|
||||
<!-- Bootstrap CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
|
||||
|
||||
<!-- Bootstrap Icons -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.css">
|
||||
|
||||
<!-- Custom SCSS -->
|
||||
<link data-trunk rel="sass" href="index.scss" />
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
|
||||
<!-- Bootstrap JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
249
index.scss
249
index.scss
@ -1,49 +1,254 @@
|
||||
// CSS Custom Properties for theming
|
||||
:root {
|
||||
--bs-body-bg: #fff;
|
||||
--bs-body-bg: #ffffff;
|
||||
--bs-body-color: #212529;
|
||||
--bs-navbar-bg: #f8f9fa;
|
||||
--bs-navbar-color: rgba(0, 0, 0, 0.55);
|
||||
--bs-navbar-color: rgba(0, 0, 0, 0.65);
|
||||
--bs-navbar-active-color: rgba(0, 0, 0, 0.9);
|
||||
--bs-jumbotron-bg: #e9ecef;
|
||||
--bs-jumbotron-color: #212529;
|
||||
--bs-navbar-brand-color: #0d6efd;
|
||||
--bs-hero-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
--bs-hero-color: #ffffff;
|
||||
--bs-card-bg: #ffffff;
|
||||
--bs-card-border: rgba(0, 0, 0, 0.125);
|
||||
--bs-feature-bg: #f8f9fa;
|
||||
--bs-footer-bg: #e9ecef;
|
||||
--bs-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||
--bs-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
|
||||
}
|
||||
|
||||
// Dark theme variables
|
||||
.dark-theme {
|
||||
--bs-body-bg: #212529;
|
||||
--bs-body-color: #f8f9fa;
|
||||
--bs-navbar-bg: #343a40;
|
||||
--bs-navbar-color: rgba(255, 255, 255, 0.55);
|
||||
--bs-navbar-active-color: rgba(255, 255, 255, 0.9);
|
||||
--bs-jumbotron-bg: #343a40;
|
||||
--bs-jumbotron-color: #f8f9fa;
|
||||
--bs-body-bg: #0d1117;
|
||||
--bs-body-color: #f0f6fc;
|
||||
--bs-navbar-bg: #161b22;
|
||||
--bs-navbar-color: rgba(240, 246, 252, 0.65);
|
||||
--bs-navbar-active-color: rgba(240, 246, 252, 0.9);
|
||||
--bs-navbar-brand-color: #58a6ff;
|
||||
--bs-hero-bg: linear-gradient(135deg, #1f2937 0%, #374151 100%);
|
||||
--bs-hero-color: #f0f6fc;
|
||||
--bs-card-bg: #21262d;
|
||||
--bs-card-border: rgba(240, 246, 252, 0.125);
|
||||
--bs-feature-bg: #161b22;
|
||||
--bs-footer-bg: #0d1117;
|
||||
--bs-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
|
||||
--bs-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
// Global styles
|
||||
* {
|
||||
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--bs-body-bg);
|
||||
color: var(--bs-body-color);
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
// Navbar styling
|
||||
.navbar {
|
||||
background-color: var(--bs-navbar-bg) !important;
|
||||
backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid var(--bs-card-border);
|
||||
box-shadow: var(--bs-shadow);
|
||||
|
||||
.navbar-brand {
|
||||
color: var(--bs-navbar-brand-color) !important;
|
||||
font-weight: 700;
|
||||
font-size: 1.5rem;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link {
|
||||
color: var(--bs-navbar-color) !important;
|
||||
font-weight: 500;
|
||||
padding: 0.5rem 1rem !important;
|
||||
border-radius: 0.375rem;
|
||||
margin: 0 0.25rem;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(var(--bs-primary-rgb), 0.1);
|
||||
color: var(--bs-navbar-active-color) !important;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: rgba(var(--bs-primary-rgb), 0.15);
|
||||
color: var(--bs-navbar-active-color) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-light .navbar-nav .nav-link {
|
||||
color: var(--bs-navbar-color);
|
||||
// Hero section
|
||||
.hero-section {
|
||||
background: var(--bs-hero-bg);
|
||||
color: var(--bs-hero-color);
|
||||
min-height: 60vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.lead {
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
.btn {
|
||||
box-shadow: var(--bs-shadow-lg);
|
||||
border: none;
|
||||
font-weight: 600;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-light .navbar-nav .nav-link.active {
|
||||
color: var(--bs-navbar-active-color);
|
||||
// Card styling
|
||||
.card {
|
||||
background-color: var(--bs-card-bg);
|
||||
border: 1px solid var(--bs-card-border);
|
||||
box-shadow: var(--bs-shadow);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: var(--bs-shadow-lg);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover .feature-icon {
|
||||
transform: scale(1.1) rotate(5deg);
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-dark .navbar-nav .nav-link {
|
||||
color: var(--bs-navbar-color);
|
||||
// Theme toggle styling
|
||||
.form-check-input {
|
||||
&:checked {
|
||||
background-color: #0d6efd;
|
||||
border-color: #0d6efd;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-dark .navbar-nav .nav-link.active {
|
||||
color: var(--bs-navbar-active-color);
|
||||
// Background sections
|
||||
.bg-body-secondary {
|
||||
background-color: var(--bs-feature-bg) !important;
|
||||
}
|
||||
|
||||
.jumbotron {
|
||||
background-color: var(--bs-jumbotron-bg) !important;
|
||||
color: var(--bs-jumbotron-color);
|
||||
.bg-body-tertiary {
|
||||
background-color: var(--bs-footer-bg) !important;
|
||||
}
|
||||
|
||||
// Animations
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
animation: fadeInUp 0.6s ease forwards;
|
||||
|
||||
&:nth-child(1) { animation-delay: 0.1s; }
|
||||
&:nth-child(2) { animation-delay: 0.2s; }
|
||||
&:nth-child(3) { animation-delay: 0.3s; }
|
||||
}
|
||||
|
||||
// Responsive improvements
|
||||
@media (max-width: 768px) {
|
||||
.hero-section {
|
||||
min-height: 50vh;
|
||||
text-align: center;
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.lead {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-size: 1.25rem !important;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 3rem !important;
|
||||
height: 3rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Custom scrollbar for webkit browsers
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--bs-body-bg);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(var(--bs-primary-rgb), 0.3);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(var(--bs-primary-rgb), 0.5);
|
||||
}
|
||||
|
||||
// Focus styles for accessibility
|
||||
.btn:focus,
|
||||
.form-check-input:focus,
|
||||
.nav-link:focus {
|
||||
box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
|
||||
}
|
||||
|
||||
// Print styles
|
||||
@media print {
|
||||
.navbar,
|
||||
.form-check,
|
||||
footer {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
background: none !important;
|
||||
color: black !important;
|
||||
}
|
||||
}
|
||||
116
src/app.rs
116
src/app.rs
@ -38,58 +38,132 @@ pub fn app() -> Html {
|
||||
LocalStorage::set("theme", **theme).unwrap();
|
||||
});
|
||||
|
||||
let navbar_class = if *theme == Theme::Dark { "navbar navbar-expand-lg navbar-dark" } else { "navbar navbar-expand-lg navbar-light" };
|
||||
|
||||
html! {
|
||||
<>
|
||||
<nav class="navbar navbar-expand-lg bg-body-tertiary">
|
||||
<nav class={navbar_class}>
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">{"Yew App"}</a>
|
||||
<a class="navbar-brand fw-bold" href="#">{"🦀 Yew Bootstrap App"}</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">{"Home"}</a>
|
||||
<a class="nav-link active" aria-current="page" href="#">
|
||||
<i class="bi bi-house-fill me-1"></i>{"Home"}
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">{"Features"}</a>
|
||||
<a class="nav-link" href="#">
|
||||
<i class="bi bi-star-fill me-1"></i>{"Features"}
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">{"Pricing"}</a>
|
||||
<a class="nav-link" href="#">
|
||||
<i class="bi bi-currency-dollar me-1"></i>{"Pricing"}
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
<i class="bi bi-envelope-fill me-1"></i>{"Contact"}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" onclick={onclick_theme_toggle} checked={*theme == Theme::Dark} />
|
||||
<label class="form-check-label" for="flexSwitchCheckDefault">{"Dark Mode"}</label>
|
||||
<div class="form-check form-switch d-flex align-items-center">
|
||||
<i class="bi bi-sun-fill me-2 text-warning"></i>
|
||||
<input class="form-check-input me-2" type="checkbox" id="flexSwitchCheckDefault" onclick={onclick_theme_toggle} checked={*theme == Theme::Dark} />
|
||||
<i class="bi bi-moon-stars-fill text-info"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="p-5 mb-4 bg-body-tertiary rounded-3 jumbotron">
|
||||
<div class="container-fluid py-5 text-center">
|
||||
<h1 class="display-5 fw-bold">{"Welcome to Yew Bootstrap!"}</h1>
|
||||
<p class="col-md-8 fs-4 mx-auto">{"This is a simple Yew application demonstrating Bootstrap 5 integration with a navigation bar and a full-width hero section."}</p>
|
||||
<button class="btn btn-primary btn-lg" type="button">{"Learn More"}</button>
|
||||
<div class="hero-section jumbotron">
|
||||
<div class="container py-5 text-center">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
<h1 class="display-4 fw-bold mb-4">{"🚀 Welcome to Yew Bootstrap!"}</h1>
|
||||
<p class="lead fs-5 mb-4">{"Experience the power of Rust and WebAssembly with this modern Yew application featuring Bootstrap 5 integration, responsive design, and seamless dark mode switching."}</p>
|
||||
<div class="d-grid gap-2 d-md-flex justify-content-md-center">
|
||||
<button class="btn btn-primary btn-lg px-4 me-md-2" type="button">
|
||||
<i class="bi bi-rocket-takeoff me-2"></i>{"Get Started"}
|
||||
</button>
|
||||
<button class="btn btn-outline-secondary btn-lg px-4" type="button">
|
||||
<i class="bi bi-github me-2"></i>{"View Source"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container text-body">
|
||||
<div class="row">
|
||||
<div class="container my-5">
|
||||
<div class="row g-4">
|
||||
<div class="col-md-4">
|
||||
<h2>{"Section 1"}</h2>
|
||||
<p>{"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."}</p>
|
||||
<div class="card h-100 shadow-sm">
|
||||
<div class="card-body text-center">
|
||||
<div class="feature-icon bg-primary bg-gradient text-white rounded-3 mb-3 mx-auto" style="width: 4rem; height: 4rem; display: flex; align-items: center; justify-content: center;">
|
||||
<i class="bi bi-lightning-charge fs-2"></i>
|
||||
</div>
|
||||
<h3 class="card-title">{"⚡ Fast Performance"}</h3>
|
||||
<p class="card-text">{"Built with Rust and WebAssembly for blazing fast performance. Experience near-native speed in your web applications."}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h2>{"Section 2"}</h2>
|
||||
<p>{"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."}</p>
|
||||
<div class="card h-100 shadow-sm">
|
||||
<div class="card-body text-center">
|
||||
<div class="feature-icon bg-success bg-gradient text-white rounded-3 mb-3 mx-auto" style="width: 4rem; height: 4rem; display: flex; align-items: center; justify-content: center;">
|
||||
<i class="bi bi-shield-check fs-2"></i>
|
||||
</div>
|
||||
<h3 class="card-title">{"🛡️ Type Safety"}</h3>
|
||||
<p class="card-text">{"Rust's powerful type system ensures memory safety and prevents common programming errors at compile time."}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h2>{"Section 3"}</h2>
|
||||
<p>{"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."}</p>
|
||||
<div class="card h-100 shadow-sm">
|
||||
<div class="card-body text-center">
|
||||
<div class="feature-icon bg-info bg-gradient text-white rounded-3 mb-3 mx-auto" style="width: 4rem; height: 4rem; display: flex; align-items: center; justify-content: center;">
|
||||
<i class="bi bi-phone fs-2"></i>
|
||||
</div>
|
||||
<h3 class="card-title">{"📱 Responsive Design"}</h3>
|
||||
<p class="card-text">{"Fully responsive design that works perfectly on desktop, tablet, and mobile devices with Bootstrap 5."}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-body-secondary py-5">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-6">
|
||||
<h2 class="display-6 fw-bold mb-3">{"🎨 Modern UI Components"}</h2>
|
||||
<p class="lead">{"This application showcases modern UI patterns with smooth theme transitions, interactive components, and beautiful typography."}</p>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>{"Dark/Light theme switching"}</li>
|
||||
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>{"Responsive navigation"}</li>
|
||||
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>{"Bootstrap 5 integration"}</li>
|
||||
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>{"Custom CSS properties"}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-6 text-center">
|
||||
<div class="p-4">
|
||||
<i class="bi bi-palette2 display-1 text-primary"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="bg-body-tertiary py-4 mt-5">
|
||||
<div class="container text-center">
|
||||
<p class="mb-0">{"Built with ❤️ using Yew, Rust, and Bootstrap 5"}</p>
|
||||
</div>
|
||||
</footer>
|
||||
</>
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user