Scribd
Încărcați
22 vizualizări10 pagini

Lic

lucrare de licenta

Încărcat de

Cristina Cristina
Drepturi de autor
© All Rights Reserved
Respectăm cu strictețe drepturile privind conținutul. Dacă suspectați că acesta este conținutul dumneavoastră, reclamați-l aici.
Formate disponibile
Descărcați ca TXT, PDF, TXT sau citiți online pe Scribd
22 vizualizări10 pagini

Lic

lucrare de licenta

Încărcat de

Cristina Cristina
Drepturi de autor
© All Rights Reserved
Respectăm cu strictețe drepturile privind conținutul. Dacă suspectați că acesta este conținutul dumneavoastră, reclamați-l aici.
Formate disponibile
Descărcați ca TXT, PDF, TXT sau citiți online pe Scribd

<!

DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demonstrație Bootstrap - Lucrare Licență</title>
<link
href="[Link]
rel="stylesheet">
<style>
/* Stiluri personalizate */
.hero-section {
background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),
url('[Link]
background-size: cover;
color: white;
padding: 150px 0;
margin-bottom: 40px;
text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}

.dark-mode {
background-color: #121212;
color: #ffffff;
}

.dark-mode .card,
.dark-mode .accordion-item,
.dark-mode .accordion-button:not(.collapsed),
.dark-mode .table {
background-color: #1e1e1e;
color: #ffffff;
}

.dark-mode .navbar-dark,
.dark-mode .table-dark {
background-color: #000000 !important;
}

.custom-btn {
background-color: #bb86fc;
color: white;
border: none;
}

.custom-btn:hover {
background-color: #9a67ea;
color: white;
}

.fade-box {
transition: opacity 0.5s ease-in-out;
cursor: pointer;
}

.fade-box:hover {
opacity: 0.7;
}
section {
padding: 60px 0;
}

.section-title {
margin-bottom: 40px;
position: relative;
padding-bottom: 15px;
}

.section-title:after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: #0d6efd;
}

.feature-icon {
font-size: 2.5rem;
margin-bottom: 20px;
color: #0d6efd;
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">
<i class="bi bi-bootstrap-fill me-2"></i> Bootstrap Demo
</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">
<li class="nav-item"><a class="nav-link"
href="#features">Funcționalități</a></li>
<li class="nav-item"><a class="nav-link"
href="#components">Componente</a></li>
<li class="nav-item"><a class="nav-link"
href="#responsive">Responsive</a></li>
<li class="nav-item"><a class="nav-link"
href="#contact">Contact</a></li>
</ul>
<div class="ms-auto d-flex">
<button class="btn custom-btn me-2" id="darkModeToggle">
<i class="bi bi-moon-fill"></i> Mod Întunecat
</button>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="hero-section text-center">
<div class="container">
<h1 class="display-3 fw-bold mb-4">Demonstrație Bootstrap</h1>
<p class="lead fs-4 mb-5">Aplicație completă pentru lucrarea de
licență</p>
<div class="d-flex justify-content-center gap-3">
<a href="#features" class="btn btn-primary btn-lg px-
4">Explorează</a>
<a href="#contact" class="btn btn-outline-light btn-lg px-
4">Contact</a>
</div>
</div>
</section>

<!-- Features Section -->


<section id="features" class="bg-light">
<div class="container">
<h2 class="text-center section-title">Principalele Funcționalități</h2>

<div class="row g-4">


<div class="col-md-4">
<div class="card h-100 shadow-sm">
<div class="card-body text-center">
<div class="feature-icon">
<i class="bi bi-layout-wtf"></i>
</div>
<h3 class="h4">Design Responsive</h3>
<p class="text-muted">Adaptare perfectă la toate
dimensiunile de ecran, de la mobil la desktop.</p>
</div>
</div>
</div>

<div class="col-md-4">
<div class="card h-100 shadow-sm">
<div class="card-body text-center">
<div class="feature-icon">
<i class="bi bi-collection"></i>
</div>
<h3 class="h4">Componente Gata</h3>
<p class="text-muted">Peste 20 de componente
predefinite pentru dezvoltare rapidă.</p>
</div>
</div>
</div>

<div class="col-md-4">
<div class="card h-100 shadow-sm">
<div class="card-body text-center">
<div class="feature-icon">
<i class="bi bi-palette"></i>
</div>
<h3 class="h4">Personalizare Ușoară</h3>
<p class="text-muted">Teme personalizate cu CSS și mod
întunecat integrat.</p>
</div>
</div>
</div>
</div>
</div>
</section>

<!-- Components Section -->


<section id="components">
<div class="container">
<h2 class="text-center section-title">Componente Bootstrap</h2>

<!-- Gallery Card with Modal -->


<div class="row mb-5">
<div class="col-lg-6">
<h3 class="mb-4">1. Galerie cu Modal</h3>
<p>Componentă pentru afișarea imaginilor cu posibilitate de
vizualizare extinsă.</p>
<div class="card shadow-sm" style="width: 100%;">
<img src="[Link]
flower" class="card-img-top" alt="Imagine floare">
<div class="card-body">
<h5 class="card-title">Imagine Natură</h5>
<p class="card-text">Apasă butonul pentru a deschide
imaginea în modal.</p>
<button class="btn btn-primary" data-bs-toggle="modal"
data-bs-target="#imageModal">
<i class="bi bi-zoom-in"></i> Vezi mare
</button>
</div>
</div>
</div>

<!-- FAQ Accordion -->


<div class="col-lg-6">
<h3 class="mb-4">2. FAQ cu Accordion</h3>
<p>Componentă pentru afișarea întrebărilor frecvente în format
compact.</p>
<div class="accordion shadow-sm" id="faqAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="q1">
<button class="accordion-button" type="button"
data-bs-toggle="collapse" data-bs-target="#a1">
Ce este Bootstrap?
</button>
</h2>
<div id="a1" class="accordion-collapse collapse show"
data-bs-parent="#faqAccordion">
<div class="accordion-body">
Bootstrap este un framework CSS open-source
pentru dezvoltarea de site-uri web responsive și mobile-first. Conține modele de
design bazate pe HTML și CSS pentru tipografie, formulare, butoane, navigare și
alte componente de interfață.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="q2">
<button class="accordion-button collapsed"
type="button" data-bs-toggle="collapse" data-bs-target="#a2">
De ce să folosesc Bootstrap?
</button>
</h2>
<div id="a2" class="accordion-collapse collapse" data-
bs-parent="#faqAccordion">
<div class="accordion-body">
Bootstrap simplifică procesul de dezvoltare web
prin oferirea unui set consistent de componente și unui sistem de grid puternic.
Permite crearea rapidă a interfețelor moderne care funcționează perfect pe toate
dispozitivele.
</div>
</div>
</div>
</div>
</div>
</div>

<!-- Progress Bar and Animations -->


<div class="row mb-5">
<div class="col-lg-6">
<h3 class="mb-4">3. Bară de Progres</h3>
<p>Indicator vizual pentru progresul unei acțiuni.</p>
<div class="card shadow-sm">
<div class="card-body">
<h5>Progres completare formular</h5>
<div class="progress mb-3">
<div class="progress-bar progress-bar-striped bg-
success" role="progressbar" style="width: 70%;">70%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped
progress-bar-animated bg-info" role="progressbar" style="width: 45%;">45%</div>
</div>
</div>
</div>
</div>

<div class="col-lg-6">
<h3 class="mb-4">4. Animații CSS</h3>
<p>Efecte vizuale la interacțiunea cu utilizatorul.</p>
<div class="card shadow-sm">
<div class="card-body text-center">
<div class="p-4 bg-primary text-white rounded fade-
box">
<h5 class="mb-0">Trece cu mouse-ul peste mine!</h5>
</div>
</div>
</div>
</div>
</div>

<!-- Login Form -->


<div class="row mb-5">
<div class="col-lg-6">
<h3 class="mb-4">5. Formular de Autentificare</h3>
<p>Componentă esențială pentru orice aplicație cu
utilizatori.</p>
<div class="card shadow-sm">
<div class="card-body">
<h2 class="text-center mb-4">Autentificare</h2>
<form>
<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="password" class="form-
label">Parolă</label>
<input type="password" class="form-control"
id="password" required>
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input"
id="remember">
<label class="form-check-label"
for="remember">Ține-mă minte</label>
</div>
<button type="submit" class="btn btn-primary w-
100">Conectează-te</button>
</form>
</div>
</div>
</div>

<!-- Admin Table -->


<div class="col-lg-6">
<h3 class="mb-4">6. Tabel Administrativ</h3>
<p>Afisare și gestionare a datelor în format tabelar.</p>
<div class="card shadow-sm">
<div class="card-body">
<h4 class="mb-3">Lista utilizatori</h4>
<input type="text" class="form-control mb-3"
placeholder="Caută utilizator...">
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead class="table-dark">
<tr>
<th>#</th>
<th>Nume</th>
<th>Email</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr><td>1</td><td>Maria
Popescu</td><td>maria@[Link]</td><td><span class="badge
bg-success">Activ</span></td></tr>
<tr><td>2</td><td>Ion
Ionescu</td><td>ion@[Link]</td><td><span class="badge bg-warning text-
dark">Inactiv</span></td></tr>
<tr><td>3</td><td>Ana
Dumitrescu</td><td>ana@[Link]</td><td><span class="badge
bg-success">Activ</span></td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

<!-- Responsive Testing Section -->


<section id="responsive" class="bg-light">
<div class="container">
<h2 class="text-center section-title">Testare Responsive</h2>

<div class="row">
<div class="col-md-6 mb-4">
<div class="card shadow-sm h-100">
<div class="card-body">
<h3 class="mb-4">Vizibilitate pe Dispozitive</h3>
<div class="text-center p-4">
<h4 class="d-none d-md-block text-success">Vizibil
doar pe ecrane mari</h4>
<h4 class="d-block d-md-none text-danger">Vizibil
doar pe mobil</h4>
<p class="lead mt-3">Aceasta este o demonstrație de
responsive Bootstrap cu clase d-*</p>
</div>
</div>
</div>
</div>

<div class="col-md-6 mb-4">


<div class="card shadow-sm h-100">
<div class="card-body">
<h3 class="mb-4">Testare Finală</h3>
<div class="text-center p-4">
<h4 class="text-success">Testare completă</h4>
<p>Aplicația este testată cu succes pe ecrane mici
și mari.</p>
<div class="d-none d-lg-block text-primary">Această
secțiune este vizibilă doar pe desktop.</div>
<div class="d-lg-none text-danger">Această secțiune
este vizibilă doar pe mobil.</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

<!-- Contact Section with Google Maps -->


<section id="contact">
<div class="container">
<h2 class="text-center section-title">Contact</h2>

<div class="row g-4">


<div class="col-lg-6">
<div class="card shadow-sm">
<div class="card-body">
<h3 class="mb-4">Date de contact</h3>
<ul class="list-unstyled">
<li class="mb-3"><i class="bi bi-geo-alt-fill me-
2"></i> Strada Universității 1, Craiova</li>
<li class="mb-3"><i class="bi bi-telephone-fill me-
2"></i> +40 251 123 456</li>
<li class="mb-3"><i class="bi bi-envelope-fill me-
2"></i> contact@[Link]</li>
</ul>

<h4 class="mt-4 mb-3">Program</h4>


<ul class="list-unstyled">
<li class="mb-2"><strong>Luni-Vineri:</strong>
08:00 - 20:00</li>
<li class="mb-2"><strong>Sâmbătă:</strong> 09:00 -
14:00</li>
<li><strong>Duminică:</strong> Închis</li>
</ul>
</div>
</div>
</div>

<div class="col-lg-6">
<div class="card shadow-sm">
<div class="card-body p-0">
<h3 class="mb-4 px-4 pt-4">Ne găsești aici</h3>
<div class="ratio ratio-16x9">
<iframe src="[Link]
1m18!1m12!1m3!1d2849.437279230676!2d23.79426541552093!3d44.319193712554875!2m3!1f0!
2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4752066f264b9b4b%3A0x3c0d80a98bc58ec3!
2sUniversitatea%20din%20Craiova!5e0!3m2!1sro!2sro!4v1700000000000!5m2!1sro!2sro"
allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

<!-- Dark Mode Demo -->


<section class="py-5">
<div class="container text-center">
<h2 class="section-title">Mod Întunecat Personalizat</h2>
<p class="lead mb-5">Demonstrație de temă personalizată folosind
CSS</p>

<div class="row justify-content-center">


<div class="col-md-8">
<div class="card shadow-sm">
<div class="card-body">
<h1 class="display-6">Bootstrap Dark Mode</h1>
<p class="lead">Acesta este un exemplu de temă
personalizată folosind CSS.</p>
<button class="btn custom-btn btn-lg px-4">
<i class="bi bi-stars"></i> Buton personalizat
</button>
</div>
</div>
</div>
</div>
</div>
</section>

<!-- Modale -->


<div class="modal fade" id="imageModal" tabindex="-1">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Imagine Natură</h5>
<button type="button" class="btn-close" data-bs-
dismiss="modal"></button>
</div>
<div class="modal-body p-0">
<img src="[Link]
class="w-100" alt="Imagine mare">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-
dismiss="modal">Închide</button>
</div>
</div>
</div>
</div>

<!-- Footer -->


<footer class="bg-dark text-white py-5">
<div class="container">
<div class="row">
<div class="col-lg-4 mb-4 mb-lg-0">
<h5 class="mb-4">Bootstrap Demo</h5>
<p>Aplicație demonstrativă pentru lucrarea de licență despre
dezvoltarea aplicațiilor web cu Bootstrap.</p>
</div>

<div class="col-lg-4 mb-4 mb-lg-0">


<h5 class="mb-4">Link-uri utile</h5>
<ul class="list-unstyled">
<li class="mb-2"><a href="#" class="text-white-50 text-
decoration-none">Documentație Bootstrap</a></li>
<li class="mb-2"><a href="#" class="text-white-50 text-
decoration-none">Exemple oficiale</a></li>
<li><a href="#" class="text-white-50 text-decoration-
none">Forum comunitate</a></li>
</ul>
</div>

<div class="col-lg-4">
<h5 class="mb-4">Social Media</h5>
<div class="d-flex gap-3">
<a href="#" class="text-white"><i class="bi bi-facebook fs-
4"></i></a>
<a href="#" class="text-white"><i class="bi bi-twitter fs-
4"></i></a>
<a href="#" class="text-white"><i class="bi bi-instagram
fs-4"></i></a>
<a href="#" class="text-white"><i class="bi bi-github fs-
4"></i></a>
</div>
</div>
</div>
<hr class="my-4">

<div class="text-center">
<p class="mb-0">© 2023 Demonstrație Bootstrap - Lucrare de Licență.
Toate drepturile rezervate.</p>
</div>
</div>
</footer>

<!-- Bootstrap JS + Popper -->


<script
src="[Link]
</script>

<!-- Bootstrap Icons -->


<link rel="stylesheet" href="[Link]
icons@1.10.0/font/[Link]">

<script>
// Toggle dark mode
[Link]('darkModeToggle').addEventListener('click',
function() {
[Link]('dark-mode');

// Schimbă iconița
const icon = [Link]('i');
if ([Link]('dark-mode')) {
[Link]('bi-moon-fill');
[Link]('bi-sun-fill');
[Link] = ' Mod Luminos';
[Link](icon);
} else {
[Link]('bi-sun-fill');
[Link]('bi-moon-fill');
[Link] = ' Mod Întunecat';
[Link](icon);
}
});

// Schimbă stilul navbar-ului la scroll


[Link]('scroll', function() {
const navbar = [Link]('.navbar');
if ([Link] > 50) {
[Link]('navbar-scrolled');
} else {
[Link]('navbar-scrolled');
}
});
</script>
</body>
</html>

S-ar putea să vă placă și