bootstrap
This commit is contained in:
leo890808
commit
4ae0523c96
38
Bootstrap/一頁式/main.py
Normal file
38
Bootstrap/一頁式/main.py
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
from flask import Flask
|
||||||
|
from flask import render_template
|
||||||
|
from flask import Flask, request, jsonify
|
||||||
|
import threading
|
||||||
|
import requests, socket
|
||||||
|
import pymysql
|
||||||
|
|
||||||
|
# from flask_cors import CORS
|
||||||
|
|
||||||
|
class Website(threading.Thread):
|
||||||
|
def __init__(self):
|
||||||
|
threading.Thread.__init__(self)
|
||||||
|
self.app = Flask(__name__)
|
||||||
|
# CORS(self.app)
|
||||||
|
|
||||||
|
#前端顯示
|
||||||
|
self.app.add_url_rule('/', 'Index', self.Index)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
def run(self):
|
||||||
|
#self.app.run()
|
||||||
|
self.app.run(host="0.0.0.0", port="5500")
|
||||||
|
|
||||||
|
# 前端
|
||||||
|
def Index(self):
|
||||||
|
return render_template('Index.html')
|
||||||
|
|
||||||
|
def Bootstrap(self):
|
||||||
|
return render_template('Index_1.html')
|
||||||
|
|
||||||
|
|
||||||
|
if __name__ == '__main__':
|
||||||
|
website = Website()
|
||||||
|
website.run()
|
||||||
BIN
Bootstrap/一頁式/static/assets/favicon.ico
Normal file
BIN
Bootstrap/一頁式/static/assets/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
Bootstrap/一頁式/static/assets/img/bg-masthead.jpg
Normal file
BIN
Bootstrap/一頁式/static/assets/img/bg-masthead.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 506 KiB |
BIN
Bootstrap/一頁式/static/assets/img/portfolio/fullsize/1.jpg
Normal file
BIN
Bootstrap/一頁式/static/assets/img/portfolio/fullsize/1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
BIN
Bootstrap/一頁式/static/assets/img/portfolio/fullsize/2.jpg
Normal file
BIN
Bootstrap/一頁式/static/assets/img/portfolio/fullsize/2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
BIN
Bootstrap/一頁式/static/assets/img/portfolio/fullsize/3.jpg
Normal file
BIN
Bootstrap/一頁式/static/assets/img/portfolio/fullsize/3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
BIN
Bootstrap/一頁式/static/assets/img/portfolio/fullsize/4.jpg
Normal file
BIN
Bootstrap/一頁式/static/assets/img/portfolio/fullsize/4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
BIN
Bootstrap/一頁式/static/assets/img/portfolio/fullsize/5.jpg
Normal file
BIN
Bootstrap/一頁式/static/assets/img/portfolio/fullsize/5.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
BIN
Bootstrap/一頁式/static/assets/img/portfolio/fullsize/6.jpg
Normal file
BIN
Bootstrap/一頁式/static/assets/img/portfolio/fullsize/6.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
BIN
Bootstrap/一頁式/static/assets/img/portfolio/thumbnails/1.jpg
Normal file
BIN
Bootstrap/一頁式/static/assets/img/portfolio/thumbnails/1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
BIN
Bootstrap/一頁式/static/assets/img/portfolio/thumbnails/2.jpg
Normal file
BIN
Bootstrap/一頁式/static/assets/img/portfolio/thumbnails/2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
BIN
Bootstrap/一頁式/static/assets/img/portfolio/thumbnails/3.jpg
Normal file
BIN
Bootstrap/一頁式/static/assets/img/portfolio/thumbnails/3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
BIN
Bootstrap/一頁式/static/assets/img/portfolio/thumbnails/4.jpg
Normal file
BIN
Bootstrap/一頁式/static/assets/img/portfolio/thumbnails/4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
BIN
Bootstrap/一頁式/static/assets/img/portfolio/thumbnails/5.jpg
Normal file
BIN
Bootstrap/一頁式/static/assets/img/portfolio/thumbnails/5.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
BIN
Bootstrap/一頁式/static/assets/img/portfolio/thumbnails/6.jpg
Normal file
BIN
Bootstrap/一頁式/static/assets/img/portfolio/thumbnails/6.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
BIN
Bootstrap/一頁式/static/assets/img/test.jpg
Normal file
BIN
Bootstrap/一頁式/static/assets/img/test.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
10995
Bootstrap/一頁式/static/css/styles.css
Normal file
10995
Bootstrap/一頁式/static/css/styles.css
Normal file
File diff suppressed because it is too large
Load Diff
59
Bootstrap/一頁式/static/js/scripts.js
Normal file
59
Bootstrap/一頁式/static/js/scripts.js
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
/*!
|
||||||
|
* Start Bootstrap - Creative v7.0.7 (https://startbootstrap.com/theme/creative)
|
||||||
|
* Copyright 2013-2023 Start Bootstrap
|
||||||
|
* Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-creative/blob/master/LICENSE)
|
||||||
|
*/
|
||||||
|
//
|
||||||
|
// Scripts
|
||||||
|
//
|
||||||
|
|
||||||
|
window.addEventListener('DOMContentLoaded', event => {
|
||||||
|
|
||||||
|
// Navbar shrink function
|
||||||
|
var navbarShrink = function () {
|
||||||
|
const navbarCollapsible = document.body.querySelector('#mainNav');
|
||||||
|
if (!navbarCollapsible) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (window.scrollY === 0) {
|
||||||
|
navbarCollapsible.classList.remove('navbar-shrink')
|
||||||
|
} else {
|
||||||
|
navbarCollapsible.classList.add('navbar-shrink')
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
// Shrink the navbar
|
||||||
|
navbarShrink();
|
||||||
|
|
||||||
|
// Shrink the navbar when page is scrolled
|
||||||
|
document.addEventListener('scroll', navbarShrink);
|
||||||
|
|
||||||
|
// Activate Bootstrap scrollspy on the main nav element
|
||||||
|
const mainNav = document.body.querySelector('#mainNav');
|
||||||
|
if (mainNav) {
|
||||||
|
new bootstrap.ScrollSpy(document.body, {
|
||||||
|
target: '#mainNav',
|
||||||
|
rootMargin: '0px 0px -40%',
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// Collapse responsive navbar when toggler is visible
|
||||||
|
const navbarToggler = document.body.querySelector('.navbar-toggler');
|
||||||
|
const responsiveNavItems = [].slice.call(
|
||||||
|
document.querySelectorAll('#navbarResponsive .nav-link')
|
||||||
|
);
|
||||||
|
responsiveNavItems.map(function (responsiveNavItem) {
|
||||||
|
responsiveNavItem.addEventListener('click', () => {
|
||||||
|
if (window.getComputedStyle(navbarToggler).display !== 'none') {
|
||||||
|
navbarToggler.click();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Activate SimpleLightbox plugin for portfolio items
|
||||||
|
new SimpleLightbox({
|
||||||
|
elements: '#portfolio a.portfolio-box'
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
269
Bootstrap/一頁式/templates/index.html
Normal file
269
Bootstrap/一頁式/templates/index.html
Normal file
@ -0,0 +1,269 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
||||||
|
<meta name="description" content="" />
|
||||||
|
<meta name="author" content="" />
|
||||||
|
<title>一頁式 DEMO</title>
|
||||||
|
<!-- Favicon-->
|
||||||
|
|
||||||
|
<link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='assets/favicon.ico') }}">
|
||||||
|
<!-- Bootstrap Icons-->
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
|
||||||
|
<!-- Google fonts-->
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700" rel="stylesheet" />
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic" rel="stylesheet" type="text/css" />
|
||||||
|
<!-- SimpleLightbox plugin CSS-->
|
||||||
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/SimpleLightbox/2.1.0/simpleLightbox.min.css" rel="stylesheet" />
|
||||||
|
<!-- Core theme CSS (includes Bootstrap)-->
|
||||||
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
|
||||||
|
<body id="page-top">
|
||||||
|
<!-- Navigation-->
|
||||||
|
<nav class="navbar navbar-expand-lg navbar-light fixed-top py-3" id="mainNav">
|
||||||
|
<div class="container px-4 px-lg-5">
|
||||||
|
<a class="navbar-brand" href="#page-top">套版 一頁式</a>
|
||||||
|
<button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
|
||||||
|
<div class="collapse navbar-collapse" id="navbarResponsive">
|
||||||
|
<ul class="navbar-nav ms-auto my-2 my-lg-0">
|
||||||
|
<li class="nav-item"><a class="nav-link" href="#about">關於</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="#services">服務</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="#portfolio">資料</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="#contact">連絡</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<!-- Masthead-->
|
||||||
|
<header class="masthead">
|
||||||
|
<div class="container px-4 px-lg-5 h-100">
|
||||||
|
<div class="row gx-4 gx-lg-5 h-100 align-items-center justify-content-center text-center">
|
||||||
|
<div class="col-lg-8 align-self-end">
|
||||||
|
<h1 class="text-white font-weight-bold">各種免費套版<a href="https://startbootstrap.com/"> 前往</a></h1>
|
||||||
|
<hr class="divider" />
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-8 align-self-baseline">
|
||||||
|
<p class="text-white-75 mb-5">Start Bootstrap can help you build better websites using the Bootstrap framework! Just download a theme and start customizing, no strings attached!</p>
|
||||||
|
<a class="btn btn-primary btn-xl" href="#about">跳轉至關於</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- 關於-->
|
||||||
|
<section class="page-section bg-primary" id="about">
|
||||||
|
<div class="container px-4 px-lg-5">
|
||||||
|
<div class="row gx-4 gx-lg-5 justify-content-center">
|
||||||
|
<div class="col-lg-8 text-center">
|
||||||
|
<h2 class="text-white mt-0">關於頁面</h2>
|
||||||
|
<hr class="divider divider-light" />
|
||||||
|
<p class="text-white-75 mb-4">關於頁面</p>
|
||||||
|
<a class="btn btn-light btn-xl" href="#services">Get Started!</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- 服務-->
|
||||||
|
<section class="page-section" id="services">
|
||||||
|
<div class="container px-4 px-lg-5">
|
||||||
|
<h2 class="text-center mt-0">At Your Service</h2>
|
||||||
|
<hr class="divider" />
|
||||||
|
<div class="row gx-4 gx-lg-5">
|
||||||
|
<div class="col-lg-3 col-md-6 text-center">
|
||||||
|
<div class="mt-5">
|
||||||
|
<div class="mb-2"><i class="bi-gem fs-1 text-primary"></i></div>
|
||||||
|
<h3 class="h4 mb-2">Sturdy Themes</h3>
|
||||||
|
<p class="text-muted mb-0">Our themes are updated regularly to keep them bug free!</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-3 col-md-6 text-center">
|
||||||
|
<div class="mt-5">
|
||||||
|
<div class="mb-2"><i class="bi-laptop fs-1 text-primary"></i></div>
|
||||||
|
<h3 class="h4 mb-2">Up to Date</h3>
|
||||||
|
<p class="text-muted mb-0">All dependencies are kept current to keep things fresh.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-3 col-md-6 text-center">
|
||||||
|
<div class="mt-5">
|
||||||
|
<div class="mb-2"><i class="bi-globe fs-1 text-primary"></i></div>
|
||||||
|
<h3 class="h4 mb-2">Ready to Publish</h3>
|
||||||
|
<p class="text-muted mb-0">You can use this design as is, or you can make changes!</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-3 col-md-6 text-center">
|
||||||
|
<div class="mt-5">
|
||||||
|
<div class="mb-2"><i class="bi-heart fs-1 text-primary"></i></div>
|
||||||
|
<h3 class="h4 mb-2">Made with Love</h3>
|
||||||
|
<p class="text-muted mb-0">Is it really open source if it's not made with love?</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- 資料-->
|
||||||
|
<div id="portfolio">
|
||||||
|
<div class="container-fluid p-0">
|
||||||
|
<div class="row g-0">
|
||||||
|
<div class="col-lg-4 col-sm-6">
|
||||||
|
<a class="portfolio-box" href="{{url_for('static',filename='assets/img/portfolio/fullsize/1.jpg')}}" title="Project Name">
|
||||||
|
<img class="img-fluid" src="{{url_for('static',filename='assets/img/portfolio/thumbnails/1.jpg')}}" alt="..." />
|
||||||
|
<div class="portfolio-box-caption">
|
||||||
|
<div class="project-category text-white-50">Category</div>
|
||||||
|
<div class="project-name">Project Name</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4 col-sm-6">
|
||||||
|
<a class="portfolio-box" href="{{url_for('static',filename='assets/img/portfolio/fullsize/2.jpg')}}" title="Project Name">
|
||||||
|
<img class="img-fluid" src="{{url_for('static',filename='assets/img/portfolio/thumbnails/2.jpg')}}" alt="..." />
|
||||||
|
<div class="portfolio-box-caption">
|
||||||
|
<div class="project-category text-white-50">Category</div>
|
||||||
|
<div class="project-name">Project Name</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4 col-sm-6">
|
||||||
|
<a class="portfolio-box" href="{{url_for('static',filename='assets/img/portfolio/fullsize/3.jpg')}}" title="Project Name">
|
||||||
|
<img class="img-fluid" src="{{url_for('static',filename='assets/img/portfolio/thumbnails/3.jpg')}}" alt="..." />
|
||||||
|
<div class="portfolio-box-caption">
|
||||||
|
<div class="project-category text-white-50">Category</div>
|
||||||
|
<div class="project-name">Project Name</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4 col-sm-6">
|
||||||
|
<a class="portfolio-box" href="{{url_for('static',filename='assets/img/portfolio/fullsize/4.jpg')}}" title="Project Name">
|
||||||
|
<img class="img-fluid" src="{{url_for('static',filename='assets/img/portfolio/thumbnails/4.jpg')}}" alt="..." />
|
||||||
|
<div class="portfolio-box-caption">
|
||||||
|
<div class="project-category text-white-50">Category</div>
|
||||||
|
<div class="project-name">Project Name</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4 col-sm-6">
|
||||||
|
<a class="portfolio-box" href="{{url_for('static',filename='assets/img/portfolio/fullsize/5.jpg')}}" title="Project Name">
|
||||||
|
<img class="img-fluid" src="{{url_for('static',filename='assets/img/portfolio/thumbnails/5.jpg')}}" alt="..." />
|
||||||
|
<div class="portfolio-box-caption">
|
||||||
|
<div class="project-category text-white-50">Category</div>
|
||||||
|
<div class="project-name">Project Name</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4 col-sm-6">
|
||||||
|
<a class="portfolio-box" href="{{url_for('static',filename='assets/img/portfolio/fullsize/6.jpg')}}" title="Project Name">
|
||||||
|
<img class="img-fluid" src="{{url_for('static',filename='assets/img/portfolio/thumbnails/6.jpg')}}" alt="..." />
|
||||||
|
<div class="portfolio-box-caption p-3">
|
||||||
|
<div class="project-category text-white-50">Category</div>
|
||||||
|
<div class="project-name">Project Name</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Call to action-->
|
||||||
|
<section class="page-section bg-dark text-white">
|
||||||
|
<div class="container px-4 px-lg-5 text-center">
|
||||||
|
<h2 class="mb-4">Free Download at Start Bootstrap!</h2>
|
||||||
|
<a class="btn btn-light btn-xl" href="https://startbootstrap.com/theme/creative/">Download Now!</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- 連絡-->
|
||||||
|
<section class="page-section" id="contact">
|
||||||
|
<div class="container px-4 px-lg-5">
|
||||||
|
<div class="row gx-4 gx-lg-5 justify-content-center">
|
||||||
|
<div class="col-lg-8 col-xl-6 text-center">
|
||||||
|
<h2 class="mt-0">Let's Get In Touch!</h2>
|
||||||
|
<hr class="divider" />
|
||||||
|
<p class="text-muted mb-5">Ready to start your next project with us? Send us a messages and we will get back to you as soon as possible!</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row gx-4 gx-lg-5 justify-content-center mb-5">
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<!-- * * * * * * * * * * * * * * *-->
|
||||||
|
<!-- * * SB Forms Contact Form * *-->
|
||||||
|
<!-- * * * * * * * * * * * * * * *-->
|
||||||
|
<!-- This form is pre-integrated with SB Forms.-->
|
||||||
|
<!-- To make this form functional, sign up at-->
|
||||||
|
<!-- https://startbootstrap.com/solution/contact-forms-->
|
||||||
|
<!-- to get an API token!-->
|
||||||
|
<form id="contactForm" data-sb-form-api-token="API_TOKEN">
|
||||||
|
<!-- Name input-->
|
||||||
|
<div class="form-floating mb-3">
|
||||||
|
<input class="form-control" id="name" type="text" placeholder="Enter your name..." data-sb-validations="required" />
|
||||||
|
<label for="name">Full name</label>
|
||||||
|
<div class="invalid-feedback" data-sb-feedback="name:required">A name is required.</div>
|
||||||
|
</div>
|
||||||
|
<!-- Email address input-->
|
||||||
|
<div class="form-floating mb-3">
|
||||||
|
<input class="form-control" id="email" type="email" placeholder="name@example.com" data-sb-validations="required,email" />
|
||||||
|
<label for="email">Email address</label>
|
||||||
|
<div class="invalid-feedback" data-sb-feedback="email:required">An email is required.</div>
|
||||||
|
<div class="invalid-feedback" data-sb-feedback="email:email">Email is not valid.</div>
|
||||||
|
</div>
|
||||||
|
<!-- Phone number input-->
|
||||||
|
<div class="form-floating mb-3">
|
||||||
|
<input class="form-control" id="phone" type="tel" placeholder="(123) 456-7890" data-sb-validations="required" />
|
||||||
|
<label for="phone">Phone number</label>
|
||||||
|
<div class="invalid-feedback" data-sb-feedback="phone:required">A phone number is required.</div>
|
||||||
|
</div>
|
||||||
|
<!-- Message input-->
|
||||||
|
<div class="form-floating mb-3">
|
||||||
|
<textarea class="form-control" id="message" type="text" placeholder="Enter your message here..." style="height: 10rem" data-sb-validations="required"></textarea>
|
||||||
|
<label for="message">Message</label>
|
||||||
|
<div class="invalid-feedback" data-sb-feedback="message:required">A message is required.</div>
|
||||||
|
</div>
|
||||||
|
<!-- Submit success message-->
|
||||||
|
<!---->
|
||||||
|
<!-- This is what your users will see when the form-->
|
||||||
|
<!-- has successfully submitted-->
|
||||||
|
<div class="d-none" id="submitSuccessMessage">
|
||||||
|
<div class="text-center mb-3">
|
||||||
|
<div class="fw-bolder">Form submission successful!</div>
|
||||||
|
To activate this form, sign up at
|
||||||
|
<br />
|
||||||
|
<a href="https://startbootstrap.com/solution/contact-forms">https://startbootstrap.com/solution/contact-forms</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Submit error message-->
|
||||||
|
<!---->
|
||||||
|
<!-- This is what your users will see when there is-->
|
||||||
|
<!-- an error submitting the form-->
|
||||||
|
<div class="d-none" id="submitErrorMessage"><div class="text-center text-danger mb-3">Error sending message!</div></div>
|
||||||
|
<!-- Submit Button-->
|
||||||
|
<div class="d-grid"><button class="btn btn-primary btn-xl disabled" id="submitButton" type="submit">Submit</button></div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row gx-4 gx-lg-5 justify-content-center">
|
||||||
|
<div class="col-lg-4 text-center mb-5 mb-lg-0">
|
||||||
|
<i class="bi-phone fs-2 mb-3 text-muted"></i>
|
||||||
|
<div>+1 (555) 123-4567</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- 頁尾-->
|
||||||
|
<footer class="bg-light py-5">
|
||||||
|
<div class="container px-4 px-lg-5"><div class="small text-center text-muted">Copyright © 2023 - Company Name</div></div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Bootstrap core JS-->
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
<!-- SimpleLightbox plugin JS-->
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/SimpleLightbox/2.1.0/simpleLightbox.min.js"></script>
|
||||||
|
<!-- Core theme JS-->
|
||||||
|
<script src="{{ url_for('static', filename='js/scripts.js') }}"></script>
|
||||||
|
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
|
||||||
|
<!-- * * SB Forms JS * *-->
|
||||||
|
<!-- * * Activate your form at https://startbootstrap.com/solution/contact-forms * *-->
|
||||||
|
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
|
||||||
|
<script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
|
||||||
261
Bootstrap/一頁式/templates/index_1.html
Normal file
261
Bootstrap/一頁式/templates/index_1.html
Normal file
@ -0,0 +1,261 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
||||||
|
<meta name="description" content="" />
|
||||||
|
<meta name="author" content="" />
|
||||||
|
<title>Creative - Start Bootstrap Theme</title>
|
||||||
|
<!-- Favicon-->
|
||||||
|
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
|
||||||
|
<!-- Bootstrap Icons-->
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
|
||||||
|
<!-- Google fonts-->
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700" rel="stylesheet" />
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic" rel="stylesheet" type="text/css" />
|
||||||
|
<!-- SimpleLightbox plugin CSS-->
|
||||||
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/SimpleLightbox/2.1.0/simpleLightbox.min.css" rel="stylesheet" />
|
||||||
|
<!-- Core theme CSS (includes Bootstrap)-->
|
||||||
|
<link href="css/styles.css" rel="stylesheet" />
|
||||||
|
</head>
|
||||||
|
<body id="page-top">
|
||||||
|
<!-- Navigation-->
|
||||||
|
<nav class="navbar navbar-expand-lg navbar-light fixed-top py-3" id="mainNav">
|
||||||
|
<div class="container px-4 px-lg-5">
|
||||||
|
<a class="navbar-brand" href="#page-top">Start Bootstrap</a>
|
||||||
|
<button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
|
||||||
|
<div class="collapse navbar-collapse" id="navbarResponsive">
|
||||||
|
<ul class="navbar-nav ms-auto my-2 my-lg-0">
|
||||||
|
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="#services">Services</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="#portfolio">Portfolio</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<!-- Masthead-->
|
||||||
|
<header class="masthead">
|
||||||
|
<div class="container px-4 px-lg-5 h-100">
|
||||||
|
<div class="row gx-4 gx-lg-5 h-100 align-items-center justify-content-center text-center">
|
||||||
|
<div class="col-lg-8 align-self-end">
|
||||||
|
<h1 class="text-white font-weight-bold">Your Favorite Place for Free Bootstrap Themes</h1>
|
||||||
|
<hr class="divider" />
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-8 align-self-baseline">
|
||||||
|
<p class="text-white-75 mb-5">Start Bootstrap can help you build better websites using the Bootstrap framework! Just download a theme and start customizing, no strings attached!</p>
|
||||||
|
<a class="btn btn-primary btn-xl" href="#about">Find Out More</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- About-->
|
||||||
|
<section class="page-section bg-primary" id="about">
|
||||||
|
<div class="container px-4 px-lg-5">
|
||||||
|
<div class="row gx-4 gx-lg-5 justify-content-center">
|
||||||
|
<div class="col-lg-8 text-center">
|
||||||
|
<h2 class="text-white mt-0">We've got what you need!</h2>
|
||||||
|
<hr class="divider divider-light" />
|
||||||
|
<p class="text-white-75 mb-4">Start Bootstrap has everything you need to get your new website up and running in no time! Choose one of our open source, free to download, and easy to use themes! No strings attached!</p>
|
||||||
|
<a class="btn btn-light btn-xl" href="#services">Get Started!</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Services-->
|
||||||
|
<section class="page-section" id="services">
|
||||||
|
<div class="container px-4 px-lg-5">
|
||||||
|
<h2 class="text-center mt-0">At Your Service</h2>
|
||||||
|
<hr class="divider" />
|
||||||
|
<div class="row gx-4 gx-lg-5">
|
||||||
|
<div class="col-lg-3 col-md-6 text-center">
|
||||||
|
<div class="mt-5">
|
||||||
|
<div class="mb-2"><i class="bi-gem fs-1 text-primary"></i></div>
|
||||||
|
<h3 class="h4 mb-2">Sturdy Themes</h3>
|
||||||
|
<p class="text-muted mb-0">Our themes are updated regularly to keep them bug free!</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-3 col-md-6 text-center">
|
||||||
|
<div class="mt-5">
|
||||||
|
<div class="mb-2"><i class="bi-laptop fs-1 text-primary"></i></div>
|
||||||
|
<h3 class="h4 mb-2">Up to Date</h3>
|
||||||
|
<p class="text-muted mb-0">All dependencies are kept current to keep things fresh.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-3 col-md-6 text-center">
|
||||||
|
<div class="mt-5">
|
||||||
|
<div class="mb-2"><i class="bi-globe fs-1 text-primary"></i></div>
|
||||||
|
<h3 class="h4 mb-2">Ready to Publish</h3>
|
||||||
|
<p class="text-muted mb-0">You can use this design as is, or you can make changes!</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-3 col-md-6 text-center">
|
||||||
|
<div class="mt-5">
|
||||||
|
<div class="mb-2"><i class="bi-heart fs-1 text-primary"></i></div>
|
||||||
|
<h3 class="h4 mb-2">Made with Love</h3>
|
||||||
|
<p class="text-muted mb-0">Is it really open source if it's not made with love?</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Portfolio-->
|
||||||
|
<div id="portfolio">
|
||||||
|
<div class="container-fluid p-0">
|
||||||
|
<div class="row g-0">
|
||||||
|
<div class="col-lg-4 col-sm-6">
|
||||||
|
<a class="portfolio-box" href="assets/img/portfolio/fullsize/1.jpg" title="Project Name">
|
||||||
|
<img class="img-fluid" src="assets/img/portfolio/thumbnails/1.jpg" alt="..." />
|
||||||
|
<div class="portfolio-box-caption">
|
||||||
|
<div class="project-category text-white-50">Category</div>
|
||||||
|
<div class="project-name">Project Name</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4 col-sm-6">
|
||||||
|
<a class="portfolio-box" href="assets/img/portfolio/fullsize/2.jpg" title="Project Name">
|
||||||
|
<img class="img-fluid" src="assets/img/portfolio/thumbnails/2.jpg" alt="..." />
|
||||||
|
<div class="portfolio-box-caption">
|
||||||
|
<div class="project-category text-white-50">Category</div>
|
||||||
|
<div class="project-name">Project Name</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4 col-sm-6">
|
||||||
|
<a class="portfolio-box" href="assets/img/portfolio/fullsize/3.jpg" title="Project Name">
|
||||||
|
<img class="img-fluid" src="assets/img/portfolio/thumbnails/3.jpg" alt="..." />
|
||||||
|
<div class="portfolio-box-caption">
|
||||||
|
<div class="project-category text-white-50">Category</div>
|
||||||
|
<div class="project-name">Project Name</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4 col-sm-6">
|
||||||
|
<a class="portfolio-box" href="assets/img/portfolio/fullsize/4.jpg" title="Project Name">
|
||||||
|
<img class="img-fluid" src="assets/img/portfolio/thumbnails/4.jpg" alt="..." />
|
||||||
|
<div class="portfolio-box-caption">
|
||||||
|
<div class="project-category text-white-50">Category</div>
|
||||||
|
<div class="project-name">Project Name</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4 col-sm-6">
|
||||||
|
<a class="portfolio-box" href="assets/img/portfolio/fullsize/5.jpg" title="Project Name">
|
||||||
|
<img class="img-fluid" src="assets/img/portfolio/thumbnails/5.jpg" alt="..." />
|
||||||
|
<div class="portfolio-box-caption">
|
||||||
|
<div class="project-category text-white-50">Category</div>
|
||||||
|
<div class="project-name">Project Name</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4 col-sm-6">
|
||||||
|
<a class="portfolio-box" href="assets/img/portfolio/fullsize/6.jpg" title="Project Name">
|
||||||
|
<img class="img-fluid" src="assets/img/portfolio/thumbnails/6.jpg" alt="..." />
|
||||||
|
<div class="portfolio-box-caption p-3">
|
||||||
|
<div class="project-category text-white-50">Category</div>
|
||||||
|
<div class="project-name">Project Name</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Call to action-->
|
||||||
|
<section class="page-section bg-dark text-white">
|
||||||
|
<div class="container px-4 px-lg-5 text-center">
|
||||||
|
<h2 class="mb-4">Free Download at Start Bootstrap!</h2>
|
||||||
|
<a class="btn btn-light btn-xl" href="https://startbootstrap.com/theme/creative/">Download Now!</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Contact-->
|
||||||
|
<section class="page-section" id="contact">
|
||||||
|
<div class="container px-4 px-lg-5">
|
||||||
|
<div class="row gx-4 gx-lg-5 justify-content-center">
|
||||||
|
<div class="col-lg-8 col-xl-6 text-center">
|
||||||
|
<h2 class="mt-0">Let's Get In Touch!</h2>
|
||||||
|
<hr class="divider" />
|
||||||
|
<p class="text-muted mb-5">Ready to start your next project with us? Send us a messages and we will get back to you as soon as possible!</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row gx-4 gx-lg-5 justify-content-center mb-5">
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<!-- * * * * * * * * * * * * * * *-->
|
||||||
|
<!-- * * SB Forms Contact Form * *-->
|
||||||
|
<!-- * * * * * * * * * * * * * * *-->
|
||||||
|
<!-- This form is pre-integrated with SB Forms.-->
|
||||||
|
<!-- To make this form functional, sign up at-->
|
||||||
|
<!-- https://startbootstrap.com/solution/contact-forms-->
|
||||||
|
<!-- to get an API token!-->
|
||||||
|
<form id="contactForm" data-sb-form-api-token="API_TOKEN">
|
||||||
|
<!-- Name input-->
|
||||||
|
<div class="form-floating mb-3">
|
||||||
|
<input class="form-control" id="name" type="text" placeholder="Enter your name..." data-sb-validations="required" />
|
||||||
|
<label for="name">Full name</label>
|
||||||
|
<div class="invalid-feedback" data-sb-feedback="name:required">A name is required.</div>
|
||||||
|
</div>
|
||||||
|
<!-- Email address input-->
|
||||||
|
<div class="form-floating mb-3">
|
||||||
|
<input class="form-control" id="email" type="email" placeholder="name@example.com" data-sb-validations="required,email" />
|
||||||
|
<label for="email">Email address</label>
|
||||||
|
<div class="invalid-feedback" data-sb-feedback="email:required">An email is required.</div>
|
||||||
|
<div class="invalid-feedback" data-sb-feedback="email:email">Email is not valid.</div>
|
||||||
|
</div>
|
||||||
|
<!-- Phone number input-->
|
||||||
|
<div class="form-floating mb-3">
|
||||||
|
<input class="form-control" id="phone" type="tel" placeholder="(123) 456-7890" data-sb-validations="required" />
|
||||||
|
<label for="phone">Phone number</label>
|
||||||
|
<div class="invalid-feedback" data-sb-feedback="phone:required">A phone number is required.</div>
|
||||||
|
</div>
|
||||||
|
<!-- Message input-->
|
||||||
|
<div class="form-floating mb-3">
|
||||||
|
<textarea class="form-control" id="message" type="text" placeholder="Enter your message here..." style="height: 10rem" data-sb-validations="required"></textarea>
|
||||||
|
<label for="message">Message</label>
|
||||||
|
<div class="invalid-feedback" data-sb-feedback="message:required">A message is required.</div>
|
||||||
|
</div>
|
||||||
|
<!-- Submit success message-->
|
||||||
|
<!---->
|
||||||
|
<!-- This is what your users will see when the form-->
|
||||||
|
<!-- has successfully submitted-->
|
||||||
|
<div class="d-none" id="submitSuccessMessage">
|
||||||
|
<div class="text-center mb-3">
|
||||||
|
<div class="fw-bolder">Form submission successful!</div>
|
||||||
|
To activate this form, sign up at
|
||||||
|
<br />
|
||||||
|
<a href="https://startbootstrap.com/solution/contact-forms">https://startbootstrap.com/solution/contact-forms</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Submit error message-->
|
||||||
|
<!---->
|
||||||
|
<!-- This is what your users will see when there is-->
|
||||||
|
<!-- an error submitting the form-->
|
||||||
|
<div class="d-none" id="submitErrorMessage"><div class="text-center text-danger mb-3">Error sending message!</div></div>
|
||||||
|
<!-- Submit Button-->
|
||||||
|
<div class="d-grid"><button class="btn btn-primary btn-xl disabled" id="submitButton" type="submit">Submit</button></div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row gx-4 gx-lg-5 justify-content-center">
|
||||||
|
<div class="col-lg-4 text-center mb-5 mb-lg-0">
|
||||||
|
<i class="bi-phone fs-2 mb-3 text-muted"></i>
|
||||||
|
<div>+1 (555) 123-4567</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Footer-->
|
||||||
|
<footer class="bg-light py-5">
|
||||||
|
<div class="container px-4 px-lg-5"><div class="small text-center text-muted">Copyright © 2023 - Company Name</div></div>
|
||||||
|
</footer>
|
||||||
|
<!-- Bootstrap core JS-->
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
<!-- SimpleLightbox plugin JS-->
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/SimpleLightbox/2.1.0/simpleLightbox.min.js"></script>
|
||||||
|
<!-- Core theme JS-->
|
||||||
|
<script src="js/scripts.js"></script>
|
||||||
|
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
|
||||||
|
<!-- * * SB Forms JS * *-->
|
||||||
|
<!-- * * Activate your form at https://startbootstrap.com/solution/contact-forms * *-->
|
||||||
|
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
|
||||||
|
<script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
37
Bootstrap/專業/main.py
Normal file
37
Bootstrap/專業/main.py
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
from flask import Flask
|
||||||
|
from flask import render_template
|
||||||
|
from flask import Flask, request, jsonify
|
||||||
|
import threading
|
||||||
|
import requests, socket
|
||||||
|
import pymysql
|
||||||
|
|
||||||
|
# from flask_cors import CORS
|
||||||
|
|
||||||
|
class Website(threading.Thread):
|
||||||
|
def __init__(self):
|
||||||
|
threading.Thread.__init__(self)
|
||||||
|
self.app = Flask(__name__)
|
||||||
|
# CORS(self.app)
|
||||||
|
|
||||||
|
#前端顯示
|
||||||
|
self.app.add_url_rule('/', 'Index', self.Index)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
def run(self):
|
||||||
|
#self.app.run()
|
||||||
|
self.app.run(host="0.0.0.0", port="5510")
|
||||||
|
|
||||||
|
# 前端
|
||||||
|
def Index(self):
|
||||||
|
return render_template('Index.html')
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
if __name__ == '__main__':
|
||||||
|
website = Website()
|
||||||
|
website.run()
|
||||||
54
Bootstrap/專業/static/assets/demo/chart-area-demo.js
Normal file
54
Bootstrap/專業/static/assets/demo/chart-area-demo.js
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
// Set new default font family and font color to mimic Bootstrap's default styling
|
||||||
|
Chart.defaults.global.defaultFontFamily = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
|
||||||
|
Chart.defaults.global.defaultFontColor = '#292b2c';
|
||||||
|
|
||||||
|
// Area Chart Example
|
||||||
|
var ctx = document.getElementById("myAreaChart");
|
||||||
|
var myLineChart = new Chart(ctx, {
|
||||||
|
type: 'line',
|
||||||
|
data: {
|
||||||
|
labels: ["Mar 1", "Mar 2", "Mar 3", "Mar 4", "Mar 5", "Mar 6", "Mar 7", "Mar 8", "Mar 9", "Mar 10", "Mar 11", "Mar 12", "Mar 13"],
|
||||||
|
datasets: [{
|
||||||
|
label: "Sessions",
|
||||||
|
lineTension: 0.3,
|
||||||
|
backgroundColor: "rgba(2,117,216,0.2)",
|
||||||
|
borderColor: "rgba(2,117,216,1)",
|
||||||
|
pointRadius: 5,
|
||||||
|
pointBackgroundColor: "rgba(2,117,216,1)",
|
||||||
|
pointBorderColor: "rgba(255,255,255,0.8)",
|
||||||
|
pointHoverRadius: 5,
|
||||||
|
pointHoverBackgroundColor: "rgba(2,117,216,1)",
|
||||||
|
pointHitRadius: 50,
|
||||||
|
pointBorderWidth: 2,
|
||||||
|
data: [10000, 30162, 26263, 18394, 18287, 28682, 31274, 33259, 25849, 24159, 32651, 31984, 38451],
|
||||||
|
}],
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
scales: {
|
||||||
|
xAxes: [{
|
||||||
|
time: {
|
||||||
|
unit: 'date'
|
||||||
|
},
|
||||||
|
gridLines: {
|
||||||
|
display: false
|
||||||
|
},
|
||||||
|
ticks: {
|
||||||
|
maxTicksLimit: 7
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
yAxes: [{
|
||||||
|
ticks: {
|
||||||
|
min: 0,
|
||||||
|
max: 40000,
|
||||||
|
maxTicksLimit: 5
|
||||||
|
},
|
||||||
|
gridLines: {
|
||||||
|
color: "rgba(0, 0, 0, .125)",
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
display: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
46
Bootstrap/專業/static/assets/demo/chart-bar-demo.js
Normal file
46
Bootstrap/專業/static/assets/demo/chart-bar-demo.js
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
// Set new default font family and font color to mimic Bootstrap's default styling
|
||||||
|
Chart.defaults.global.defaultFontFamily = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
|
||||||
|
Chart.defaults.global.defaultFontColor = '#292b2c';
|
||||||
|
|
||||||
|
// Bar Chart Example
|
||||||
|
var ctx = document.getElementById("myBarChart");
|
||||||
|
var myLineChart = new Chart(ctx, {
|
||||||
|
type: 'bar',
|
||||||
|
data: {
|
||||||
|
labels: ["January", "February", "March", "April", "May", "June"],
|
||||||
|
datasets: [{
|
||||||
|
label: "Revenue",
|
||||||
|
backgroundColor: "rgba(2,117,216,1)",
|
||||||
|
borderColor: "rgba(2,117,216,1)",
|
||||||
|
data: [4215, 5312, 6251, 7841, 9821, 14984],
|
||||||
|
}],
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
scales: {
|
||||||
|
xAxes: [{
|
||||||
|
time: {
|
||||||
|
unit: 'month'
|
||||||
|
},
|
||||||
|
gridLines: {
|
||||||
|
display: false
|
||||||
|
},
|
||||||
|
ticks: {
|
||||||
|
maxTicksLimit: 6
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
yAxes: [{
|
||||||
|
ticks: {
|
||||||
|
min: 0,
|
||||||
|
max: 15000,
|
||||||
|
maxTicksLimit: 5
|
||||||
|
},
|
||||||
|
gridLines: {
|
||||||
|
display: true
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
display: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
16
Bootstrap/專業/static/assets/demo/chart-pie-demo.js
Normal file
16
Bootstrap/專業/static/assets/demo/chart-pie-demo.js
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
// Set new default font family and font color to mimic Bootstrap's default styling
|
||||||
|
Chart.defaults.global.defaultFontFamily = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
|
||||||
|
Chart.defaults.global.defaultFontColor = '#292b2c';
|
||||||
|
|
||||||
|
// Pie Chart Example
|
||||||
|
var ctx = document.getElementById("myPieChart");
|
||||||
|
var myPieChart = new Chart(ctx, {
|
||||||
|
type: 'pie',
|
||||||
|
data: {
|
||||||
|
labels: ["Blue", "Red", "Yellow", "Green"],
|
||||||
|
datasets: [{
|
||||||
|
data: [12.21, 15.58, 11.25, 8.32],
|
||||||
|
backgroundColor: ['#007bff', '#dc3545', '#ffc107', '#28a745'],
|
||||||
|
}],
|
||||||
|
},
|
||||||
|
});
|
||||||
4
Bootstrap/專業/static/assets/demo/datatables-demo.js
Normal file
4
Bootstrap/專業/static/assets/demo/datatables-demo.js
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
// Call the dataTables jQuery plugin
|
||||||
|
$(document).ready(function() {
|
||||||
|
$('#dataTable').DataTable();
|
||||||
|
});
|
||||||
1
Bootstrap/專業/static/assets/img/error-404-monochrome.svg
Normal file
1
Bootstrap/專業/static/assets/img/error-404-monochrome.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.0 KiB |
11701
Bootstrap/專業/static/css/styles.css
Normal file
11701
Bootstrap/專業/static/css/styles.css
Normal file
File diff suppressed because it is too large
Load Diff
9
Bootstrap/專業/static/js/datatables-simple-demo.js
Normal file
9
Bootstrap/專業/static/js/datatables-simple-demo.js
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
window.addEventListener('DOMContentLoaded', event => {
|
||||||
|
// Simple-DataTables
|
||||||
|
// https://github.com/fiduswriter/Simple-DataTables/wiki
|
||||||
|
|
||||||
|
const datatablesSimple = document.getElementById('datatablesSimple');
|
||||||
|
if (datatablesSimple) {
|
||||||
|
new simpleDatatables.DataTable(datatablesSimple);
|
||||||
|
}
|
||||||
|
});
|
||||||
26
Bootstrap/專業/static/js/scripts.js
Normal file
26
Bootstrap/專業/static/js/scripts.js
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
/*!
|
||||||
|
* Start Bootstrap - SB Admin v7.0.5 (https://startbootstrap.com/template/sb-admin)
|
||||||
|
* Copyright 2013-2022 Start Bootstrap
|
||||||
|
* Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-sb-admin/blob/master/LICENSE)
|
||||||
|
*/
|
||||||
|
//
|
||||||
|
// Scripts
|
||||||
|
//
|
||||||
|
|
||||||
|
window.addEventListener('DOMContentLoaded', event => {
|
||||||
|
|
||||||
|
// Toggle the side navigation
|
||||||
|
const sidebarToggle = document.body.querySelector('#sidebarToggle');
|
||||||
|
if (sidebarToggle) {
|
||||||
|
// Uncomment Below to persist sidebar toggle between refreshes
|
||||||
|
// if (localStorage.getItem('sb|sidebar-toggle') === 'true') {
|
||||||
|
// document.body.classList.toggle('sb-sidenav-toggled');
|
||||||
|
// }
|
||||||
|
sidebarToggle.addEventListener('click', event => {
|
||||||
|
event.preventDefault();
|
||||||
|
document.body.classList.toggle('sb-sidenav-toggled');
|
||||||
|
localStorage.setItem('sb|sidebar-toggle', document.body.classList.contains('sb-sidenav-toggled'));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
692
Bootstrap/專業/templates/index.html
Normal file
692
Bootstrap/專業/templates/index.html
Normal file
@ -0,0 +1,692 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
||||||
|
<meta name="description" content="" />
|
||||||
|
<meta name="author" content="" />
|
||||||
|
<title>專業式 套版</title>
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/style.css" rel="stylesheet" />
|
||||||
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
|
||||||
|
<script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>
|
||||||
|
</head>
|
||||||
|
<body class="sb-nav-fixed">
|
||||||
|
<nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark">
|
||||||
|
<!-- Navbar Brand-->
|
||||||
|
<a class="navbar-brand ps-3" href="/">專業式 套版</a>
|
||||||
|
<!-- Sidebar Toggle-->
|
||||||
|
<button class="btn btn-link btn-sm order-1 order-lg-0 me-4 me-lg-0" id="sidebarToggle" href="#!"><i class="fas fa-bars"></i></button>
|
||||||
|
<!-- Navbar Search-->
|
||||||
|
<form class="d-none d-md-inline-block form-inline ms-auto me-0 me-md-3 my-2 my-md-0">
|
||||||
|
<div class="input-group">
|
||||||
|
<input class="form-control" type="text" placeholder="Search for..." aria-label="Search for..." aria-describedby="btnNavbarSearch" />
|
||||||
|
<button class="btn btn-primary" id="btnNavbarSearch" type="button"><i class="fas fa-search"></i></button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<!-- Navbar-->
|
||||||
|
<ul class="navbar-nav ms-auto ms-md-0 me-3 me-lg-4">
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" id="navbarDropdown" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="fas fa-user fa-fw"></i></a>
|
||||||
|
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
|
||||||
|
<li><a class="dropdown-item" href="#!">Settings</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#!">Activity Log</a></li>
|
||||||
|
<li><hr class="dropdown-divider" /></li>
|
||||||
|
<li><a class="dropdown-item" href="#!">Logout</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<div id="layoutSidenav">
|
||||||
|
<div id="layoutSidenav_nav">
|
||||||
|
<nav class="sb-sidenav accordion sb-sidenav-dark" id="sidenavAccordion">
|
||||||
|
<div class="sb-sidenav-menu">
|
||||||
|
<div class="nav">
|
||||||
|
<div class="sb-sidenav-menu-heading">Core</div>
|
||||||
|
<a class="nav-link" href="/">
|
||||||
|
<div class="sb-nav-link-icon"><i class="fas fa-tachometer-alt"></i></div>
|
||||||
|
首頁
|
||||||
|
</a>
|
||||||
|
<div class="sb-sidenav-menu-heading">Interface</div>
|
||||||
|
<a class="nav-link collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#collapseLayouts" aria-expanded="false" aria-controls="collapseLayouts">
|
||||||
|
<div class="sb-nav-link-icon"><i class="fas fa-columns"></i></div>
|
||||||
|
Layouts
|
||||||
|
<div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
|
||||||
|
</a>
|
||||||
|
<div class="collapse" id="collapseLayouts" aria-labelledby="headingOne" data-bs-parent="#sidenavAccordion">
|
||||||
|
<nav class="sb-sidenav-menu-nested nav">
|
||||||
|
<a class="nav-link" href="layout-static.html">Static Navigation</a>
|
||||||
|
<a class="nav-link" href="layout-sidenav-light.html">Light Sidenav</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<a class="nav-link collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#collapsePages" aria-expanded="false" aria-controls="collapsePages">
|
||||||
|
<div class="sb-nav-link-icon"><i class="fas fa-book-open"></i></div>
|
||||||
|
Pages
|
||||||
|
<div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
|
||||||
|
</a>
|
||||||
|
<div class="collapse" id="collapsePages" aria-labelledby="headingTwo" data-bs-parent="#sidenavAccordion">
|
||||||
|
<nav class="sb-sidenav-menu-nested nav accordion" id="sidenavAccordionPages">
|
||||||
|
<a class="nav-link collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#pagesCollapseAuth" aria-expanded="false" aria-controls="pagesCollapseAuth">
|
||||||
|
Authentication
|
||||||
|
<div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
|
||||||
|
</a>
|
||||||
|
<div class="collapse" id="pagesCollapseAuth" aria-labelledby="headingOne" data-bs-parent="#sidenavAccordionPages">
|
||||||
|
<nav class="sb-sidenav-menu-nested nav">
|
||||||
|
<a class="nav-link" href="login.html">Login</a>
|
||||||
|
<a class="nav-link" href="register.html">Register</a>
|
||||||
|
<a class="nav-link" href="password.html">Forgot Password</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<a class="nav-link collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#pagesCollapseError" aria-expanded="false" aria-controls="pagesCollapseError">
|
||||||
|
Error
|
||||||
|
<div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
|
||||||
|
</a>
|
||||||
|
<div class="collapse" id="pagesCollapseError" aria-labelledby="headingOne" data-bs-parent="#sidenavAccordionPages">
|
||||||
|
<nav class="sb-sidenav-menu-nested nav">
|
||||||
|
<a class="nav-link" href="401.html">401 Page</a>
|
||||||
|
<a class="nav-link" href="404.html">404 Page</a>
|
||||||
|
<a class="nav-link" href="500.html">500 Page</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div class="sb-sidenav-menu-heading">Addons</div>
|
||||||
|
<a class="nav-link" href="charts.html">
|
||||||
|
<div class="sb-nav-link-icon"><i class="fas fa-chart-area"></i></div>
|
||||||
|
Charts
|
||||||
|
</a>
|
||||||
|
<a class="nav-link" href="tables.html">
|
||||||
|
<div class="sb-nav-link-icon"><i class="fas fa-table"></i></div>
|
||||||
|
Tables
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sb-sidenav-footer">
|
||||||
|
<div class="small">Logged in as:</div>
|
||||||
|
Start Bootstrap
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div id="layoutSidenav_content">
|
||||||
|
<main>
|
||||||
|
<div class="container-fluid px-4">
|
||||||
|
<h1 class="mt-4">首頁</h1>
|
||||||
|
<ol class="breadcrumb mb-4">
|
||||||
|
<li class="breadcrumb-item active">首頁</li>
|
||||||
|
</ol>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xl-3 col-md-6">
|
||||||
|
<div class="card bg-primary text-white mb-4">
|
||||||
|
<div class="card-body">Primary Card</div>
|
||||||
|
<div class="card-footer d-flex align-items-center justify-content-between">
|
||||||
|
<a class="small text-white stretched-link" href="#">View Details</a>
|
||||||
|
<div class="small text-white"><i class="fas fa-angle-right"></i></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xl-3 col-md-6">
|
||||||
|
<div class="card bg-warning text-white mb-4">
|
||||||
|
<div class="card-body">Warning Card</div>
|
||||||
|
<div class="card-footer d-flex align-items-center justify-content-between">
|
||||||
|
<a class="small text-white stretched-link" href="#">View Details</a>
|
||||||
|
<div class="small text-white"><i class="fas fa-angle-right"></i></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xl-3 col-md-6">
|
||||||
|
<div class="card bg-success text-white mb-4">
|
||||||
|
<div class="card-body">Success Card</div>
|
||||||
|
<div class="card-footer d-flex align-items-center justify-content-between">
|
||||||
|
<a class="small text-white stretched-link" href="#">View Details</a>
|
||||||
|
<div class="small text-white"><i class="fas fa-angle-right"></i></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xl-3 col-md-6">
|
||||||
|
<div class="card bg-danger text-white mb-4">
|
||||||
|
<div class="card-body">Danger Card</div>
|
||||||
|
<div class="card-footer d-flex align-items-center justify-content-between">
|
||||||
|
<a class="small text-white stretched-link" href="#">View Details</a>
|
||||||
|
<div class="small text-white"><i class="fas fa-angle-right"></i></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xl-6">
|
||||||
|
<div class="card mb-4">
|
||||||
|
<div class="card-header">
|
||||||
|
<i class="fas fa-chart-area me-1"></i>
|
||||||
|
Area Chart Example
|
||||||
|
</div>
|
||||||
|
<div class="card-body"><canvas id="myAreaChart" width="100%" height="40"></canvas></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xl-6">
|
||||||
|
<div class="card mb-4">
|
||||||
|
<div class="card-header">
|
||||||
|
<i class="fas fa-chart-bar me-1"></i>
|
||||||
|
Bar Chart Example
|
||||||
|
</div>
|
||||||
|
<div class="card-body"><canvas id="myBarChart" width="100%" height="40"></canvas></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card mb-4">
|
||||||
|
<div class="card-header">
|
||||||
|
<i class="fas fa-table me-1"></i>
|
||||||
|
DataTable Example
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<table id="datatablesSimple">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Position</th>
|
||||||
|
<th>Office</th>
|
||||||
|
<th>Age</th>
|
||||||
|
<th>Start date</th>
|
||||||
|
<th>Salary</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tfoot>
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Position</th>
|
||||||
|
<th>Office</th>
|
||||||
|
<th>Age</th>
|
||||||
|
<th>Start date</th>
|
||||||
|
<th>Salary</th>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>Tiger Nixon</td>
|
||||||
|
<td>System Architect</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2011/04/25</td>
|
||||||
|
<td>$320,800</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Garrett Winters</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2011/07/25</td>
|
||||||
|
<td>$170,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Ashton Cox</td>
|
||||||
|
<td>Junior Technical Author</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2009/01/12</td>
|
||||||
|
<td>$86,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cedric Kelly</td>
|
||||||
|
<td>Senior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2012/03/29</td>
|
||||||
|
<td>$433,060</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Airi Satou</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>33</td>
|
||||||
|
<td>2008/11/28</td>
|
||||||
|
<td>$162,700</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brielle Williamson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2012/12/02</td>
|
||||||
|
<td>$372,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Herrod Chandler</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2012/08/06</td>
|
||||||
|
<td>$137,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Rhona Davidson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>55</td>
|
||||||
|
<td>2010/10/14</td>
|
||||||
|
<td>$327,900</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Colleen Hurst</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>39</td>
|
||||||
|
<td>2009/09/15</td>
|
||||||
|
<td>$205,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sonya Frost</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2008/12/13</td>
|
||||||
|
<td>$103,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jena Gaines</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2008/12/19</td>
|
||||||
|
<td>$90,560</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Quinn Flynn</td>
|
||||||
|
<td>Support Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2013/03/03</td>
|
||||||
|
<td>$342,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Charde Marshall</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>36</td>
|
||||||
|
<td>2008/10/16</td>
|
||||||
|
<td>$470,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Haley Kennedy</td>
|
||||||
|
<td>Senior Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2012/12/18</td>
|
||||||
|
<td>$313,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Tatyana Fitzpatrick</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>19</td>
|
||||||
|
<td>2010/03/17</td>
|
||||||
|
<td>$385,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Silva</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2012/11/27</td>
|
||||||
|
<td>$198,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Paul Byrd</td>
|
||||||
|
<td>Chief Financial Officer (CFO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2010/06/09</td>
|
||||||
|
<td>$725,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gloria Little</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2009/04/10</td>
|
||||||
|
<td>$237,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bradley Greer</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2012/10/13</td>
|
||||||
|
<td>$132,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Dai Rios</td>
|
||||||
|
<td>Personnel Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>35</td>
|
||||||
|
<td>2012/09/26</td>
|
||||||
|
<td>$217,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jenette Caldwell</td>
|
||||||
|
<td>Development Lead</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2011/09/03</td>
|
||||||
|
<td>$345,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Yuri Berry</td>
|
||||||
|
<td>Chief Marketing Officer (CMO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>40</td>
|
||||||
|
<td>2009/06/25</td>
|
||||||
|
<td>$675,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Caesar Vance</td>
|
||||||
|
<td>Pre-Sales Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2011/12/12</td>
|
||||||
|
<td>$106,450</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Doris Wilder</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2010/09/20</td>
|
||||||
|
<td>$85,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Angelica Ramos</td>
|
||||||
|
<td>Chief Executive Officer (CEO)</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/10/09</td>
|
||||||
|
<td>$1,200,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Joyce</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>42</td>
|
||||||
|
<td>2010/12/22</td>
|
||||||
|
<td>$92,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Chang</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2010/11/14</td>
|
||||||
|
<td>$357,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brenden Wagner</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2011/06/07</td>
|
||||||
|
<td>$206,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Fiona Green</td>
|
||||||
|
<td>Chief Operating Officer (COO)</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>48</td>
|
||||||
|
<td>2010/03/11</td>
|
||||||
|
<td>$850,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shou Itou</td>
|
||||||
|
<td>Regional Marketing</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>20</td>
|
||||||
|
<td>2011/08/14</td>
|
||||||
|
<td>$163,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michelle House</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2011/06/02</td>
|
||||||
|
<td>$95,400</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Suki Burks</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>53</td>
|
||||||
|
<td>2009/10/22</td>
|
||||||
|
<td>$114,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Prescott Bartlett</td>
|
||||||
|
<td>Technical Author</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/05/07</td>
|
||||||
|
<td>$145,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Cortez</td>
|
||||||
|
<td>Team Leader</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2008/10/26</td>
|
||||||
|
<td>$235,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Martena Mccray</td>
|
||||||
|
<td>Post-Sales support</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/03/09</td>
|
||||||
|
<td>$324,050</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Unity Butler</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/12/09</td>
|
||||||
|
<td>$85,675</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Howard Hatfield</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/12/16</td>
|
||||||
|
<td>$164,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hope Fuentes</td>
|
||||||
|
<td>Secretary</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2010/02/12</td>
|
||||||
|
<td>$109,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Vivian Harrell</td>
|
||||||
|
<td>Financial Controller</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>62</td>
|
||||||
|
<td>2009/02/14</td>
|
||||||
|
<td>$452,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Timothy Mooney</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2008/12/11</td>
|
||||||
|
<td>$136,200</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jackson Bradshaw</td>
|
||||||
|
<td>Director</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>65</td>
|
||||||
|
<td>2008/09/26</td>
|
||||||
|
<td>$645,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Olivia Liang</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2011/02/03</td>
|
||||||
|
<td>$234,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bruno Nash</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>38</td>
|
||||||
|
<td>2011/05/03</td>
|
||||||
|
<td>$163,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sakura Yamamoto</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2009/08/19</td>
|
||||||
|
<td>$139,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Thor Walton</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2013/08/11</td>
|
||||||
|
<td>$98,540</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Finn Camacho</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/07/07</td>
|
||||||
|
<td>$87,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Serge Baldwin</td>
|
||||||
|
<td>Data Coordinator</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2012/04/09</td>
|
||||||
|
<td>$138,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zenaida Frank</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2010/01/04</td>
|
||||||
|
<td>$125,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zorita Serrano</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>56</td>
|
||||||
|
<td>2012/06/01</td>
|
||||||
|
<td>$115,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Acosta</td>
|
||||||
|
<td>Junior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2013/02/01</td>
|
||||||
|
<td>$75,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cara Stevens</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/12/06</td>
|
||||||
|
<td>$145,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hermione Butler</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2011/03/21</td>
|
||||||
|
<td>$356,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Lael Greer</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2009/02/27</td>
|
||||||
|
<td>$103,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jonas Alexander</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2010/07/14</td>
|
||||||
|
<td>$86,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shad Decker</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/11/13</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Bruce</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>29</td>
|
||||||
|
<td>2011/06/27</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Donna Snider</td>
|
||||||
|
<td>Customer Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/01/25</td>
|
||||||
|
<td>$112,000</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<footer class="py-4 bg-light mt-auto">
|
||||||
|
<div class="container-fluid px-4">
|
||||||
|
<div class="d-flex align-items-center justify-content-between small">
|
||||||
|
<div class="text-muted">Copyright © Your Website 2022</div>
|
||||||
|
<div>
|
||||||
|
<a href="#">Privacy Policy</a>
|
||||||
|
·
|
||||||
|
<a href="#">Terms & Conditions</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
|
||||||
|
<script src="{{ url_for('static', filename='js/scripts.js') }}"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" crossorigin="anonymous"></script>
|
||||||
|
|
||||||
|
<script src="{{ url_for('static', filename='assets/demo/chart-area-demo.js') }}"></script>
|
||||||
|
<script src="{{ url_for('static', filename='assets/demo/chart-bar-demo.js') }}"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" crossorigin="anonymous"></script>
|
||||||
|
<script src="{{ url_for('static', filename='js/datatables-simple-demo.js') }}"></script>
|
||||||
687
Bootstrap/專業/templates/index_1.html
Normal file
687
Bootstrap/專業/templates/index_1.html
Normal file
@ -0,0 +1,687 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
||||||
|
<meta name="description" content="" />
|
||||||
|
<meta name="author" content="" />
|
||||||
|
<title>Dashboard - SB Admin</title>
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/style.css" rel="stylesheet" />
|
||||||
|
<link href="css/styles.css" rel="stylesheet" />
|
||||||
|
<script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>
|
||||||
|
</head>
|
||||||
|
<body class="sb-nav-fixed">
|
||||||
|
<nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark">
|
||||||
|
<!-- Navbar Brand-->
|
||||||
|
<a class="navbar-brand ps-3" href="index.html">Start Bootstrap</a>
|
||||||
|
<!-- Sidebar Toggle-->
|
||||||
|
<button class="btn btn-link btn-sm order-1 order-lg-0 me-4 me-lg-0" id="sidebarToggle" href="#!"><i class="fas fa-bars"></i></button>
|
||||||
|
<!-- Navbar Search-->
|
||||||
|
<form class="d-none d-md-inline-block form-inline ms-auto me-0 me-md-3 my-2 my-md-0">
|
||||||
|
<div class="input-group">
|
||||||
|
<input class="form-control" type="text" placeholder="Search for..." aria-label="Search for..." aria-describedby="btnNavbarSearch" />
|
||||||
|
<button class="btn btn-primary" id="btnNavbarSearch" type="button"><i class="fas fa-search"></i></button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<!-- Navbar-->
|
||||||
|
<ul class="navbar-nav ms-auto ms-md-0 me-3 me-lg-4">
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" id="navbarDropdown" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="fas fa-user fa-fw"></i></a>
|
||||||
|
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
|
||||||
|
<li><a class="dropdown-item" href="#!">Settings</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#!">Activity Log</a></li>
|
||||||
|
<li><hr class="dropdown-divider" /></li>
|
||||||
|
<li><a class="dropdown-item" href="#!">Logout</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<div id="layoutSidenav">
|
||||||
|
<div id="layoutSidenav_nav">
|
||||||
|
<nav class="sb-sidenav accordion sb-sidenav-dark" id="sidenavAccordion">
|
||||||
|
<div class="sb-sidenav-menu">
|
||||||
|
<div class="nav">
|
||||||
|
<div class="sb-sidenav-menu-heading">Core</div>
|
||||||
|
<a class="nav-link" href="index.html">
|
||||||
|
<div class="sb-nav-link-icon"><i class="fas fa-tachometer-alt"></i></div>
|
||||||
|
Dashboard
|
||||||
|
</a>
|
||||||
|
<div class="sb-sidenav-menu-heading">Interface</div>
|
||||||
|
<a class="nav-link collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#collapseLayouts" aria-expanded="false" aria-controls="collapseLayouts">
|
||||||
|
<div class="sb-nav-link-icon"><i class="fas fa-columns"></i></div>
|
||||||
|
Layouts
|
||||||
|
<div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
|
||||||
|
</a>
|
||||||
|
<div class="collapse" id="collapseLayouts" aria-labelledby="headingOne" data-bs-parent="#sidenavAccordion">
|
||||||
|
<nav class="sb-sidenav-menu-nested nav">
|
||||||
|
<a class="nav-link" href="layout-static.html">Static Navigation</a>
|
||||||
|
<a class="nav-link" href="layout-sidenav-light.html">Light Sidenav</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<a class="nav-link collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#collapsePages" aria-expanded="false" aria-controls="collapsePages">
|
||||||
|
<div class="sb-nav-link-icon"><i class="fas fa-book-open"></i></div>
|
||||||
|
Pages
|
||||||
|
<div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
|
||||||
|
</a>
|
||||||
|
<div class="collapse" id="collapsePages" aria-labelledby="headingTwo" data-bs-parent="#sidenavAccordion">
|
||||||
|
<nav class="sb-sidenav-menu-nested nav accordion" id="sidenavAccordionPages">
|
||||||
|
<a class="nav-link collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#pagesCollapseAuth" aria-expanded="false" aria-controls="pagesCollapseAuth">
|
||||||
|
Authentication
|
||||||
|
<div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
|
||||||
|
</a>
|
||||||
|
<div class="collapse" id="pagesCollapseAuth" aria-labelledby="headingOne" data-bs-parent="#sidenavAccordionPages">
|
||||||
|
<nav class="sb-sidenav-menu-nested nav">
|
||||||
|
<a class="nav-link" href="login.html">Login</a>
|
||||||
|
<a class="nav-link" href="register.html">Register</a>
|
||||||
|
<a class="nav-link" href="password.html">Forgot Password</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<a class="nav-link collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#pagesCollapseError" aria-expanded="false" aria-controls="pagesCollapseError">
|
||||||
|
Error
|
||||||
|
<div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
|
||||||
|
</a>
|
||||||
|
<div class="collapse" id="pagesCollapseError" aria-labelledby="headingOne" data-bs-parent="#sidenavAccordionPages">
|
||||||
|
<nav class="sb-sidenav-menu-nested nav">
|
||||||
|
<a class="nav-link" href="401.html">401 Page</a>
|
||||||
|
<a class="nav-link" href="404.html">404 Page</a>
|
||||||
|
<a class="nav-link" href="500.html">500 Page</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div class="sb-sidenav-menu-heading">Addons</div>
|
||||||
|
<a class="nav-link" href="charts.html">
|
||||||
|
<div class="sb-nav-link-icon"><i class="fas fa-chart-area"></i></div>
|
||||||
|
Charts
|
||||||
|
</a>
|
||||||
|
<a class="nav-link" href="tables.html">
|
||||||
|
<div class="sb-nav-link-icon"><i class="fas fa-table"></i></div>
|
||||||
|
Tables
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sb-sidenav-footer">
|
||||||
|
<div class="small">Logged in as:</div>
|
||||||
|
Start Bootstrap
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div id="layoutSidenav_content">
|
||||||
|
<main>
|
||||||
|
<div class="container-fluid px-4">
|
||||||
|
<h1 class="mt-4">Dashboard</h1>
|
||||||
|
<ol class="breadcrumb mb-4">
|
||||||
|
<li class="breadcrumb-item active">Dashboard</li>
|
||||||
|
</ol>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xl-3 col-md-6">
|
||||||
|
<div class="card bg-primary text-white mb-4">
|
||||||
|
<div class="card-body">Primary Card</div>
|
||||||
|
<div class="card-footer d-flex align-items-center justify-content-between">
|
||||||
|
<a class="small text-white stretched-link" href="#">View Details</a>
|
||||||
|
<div class="small text-white"><i class="fas fa-angle-right"></i></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xl-3 col-md-6">
|
||||||
|
<div class="card bg-warning text-white mb-4">
|
||||||
|
<div class="card-body">Warning Card</div>
|
||||||
|
<div class="card-footer d-flex align-items-center justify-content-between">
|
||||||
|
<a class="small text-white stretched-link" href="#">View Details</a>
|
||||||
|
<div class="small text-white"><i class="fas fa-angle-right"></i></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xl-3 col-md-6">
|
||||||
|
<div class="card bg-success text-white mb-4">
|
||||||
|
<div class="card-body">Success Card</div>
|
||||||
|
<div class="card-footer d-flex align-items-center justify-content-between">
|
||||||
|
<a class="small text-white stretched-link" href="#">View Details</a>
|
||||||
|
<div class="small text-white"><i class="fas fa-angle-right"></i></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xl-3 col-md-6">
|
||||||
|
<div class="card bg-danger text-white mb-4">
|
||||||
|
<div class="card-body">Danger Card</div>
|
||||||
|
<div class="card-footer d-flex align-items-center justify-content-between">
|
||||||
|
<a class="small text-white stretched-link" href="#">View Details</a>
|
||||||
|
<div class="small text-white"><i class="fas fa-angle-right"></i></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xl-6">
|
||||||
|
<div class="card mb-4">
|
||||||
|
<div class="card-header">
|
||||||
|
<i class="fas fa-chart-area me-1"></i>
|
||||||
|
Area Chart Example
|
||||||
|
</div>
|
||||||
|
<div class="card-body"><canvas id="myAreaChart" width="100%" height="40"></canvas></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xl-6">
|
||||||
|
<div class="card mb-4">
|
||||||
|
<div class="card-header">
|
||||||
|
<i class="fas fa-chart-bar me-1"></i>
|
||||||
|
Bar Chart Example
|
||||||
|
</div>
|
||||||
|
<div class="card-body"><canvas id="myBarChart" width="100%" height="40"></canvas></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card mb-4">
|
||||||
|
<div class="card-header">
|
||||||
|
<i class="fas fa-table me-1"></i>
|
||||||
|
DataTable Example
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<table id="datatablesSimple">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Position</th>
|
||||||
|
<th>Office</th>
|
||||||
|
<th>Age</th>
|
||||||
|
<th>Start date</th>
|
||||||
|
<th>Salary</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tfoot>
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Position</th>
|
||||||
|
<th>Office</th>
|
||||||
|
<th>Age</th>
|
||||||
|
<th>Start date</th>
|
||||||
|
<th>Salary</th>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>Tiger Nixon</td>
|
||||||
|
<td>System Architect</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2011/04/25</td>
|
||||||
|
<td>$320,800</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Garrett Winters</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2011/07/25</td>
|
||||||
|
<td>$170,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Ashton Cox</td>
|
||||||
|
<td>Junior Technical Author</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2009/01/12</td>
|
||||||
|
<td>$86,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cedric Kelly</td>
|
||||||
|
<td>Senior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2012/03/29</td>
|
||||||
|
<td>$433,060</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Airi Satou</td>
|
||||||
|
<td>Accountant</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>33</td>
|
||||||
|
<td>2008/11/28</td>
|
||||||
|
<td>$162,700</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brielle Williamson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2012/12/02</td>
|
||||||
|
<td>$372,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Herrod Chandler</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2012/08/06</td>
|
||||||
|
<td>$137,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Rhona Davidson</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>55</td>
|
||||||
|
<td>2010/10/14</td>
|
||||||
|
<td>$327,900</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Colleen Hurst</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>39</td>
|
||||||
|
<td>2009/09/15</td>
|
||||||
|
<td>$205,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sonya Frost</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2008/12/13</td>
|
||||||
|
<td>$103,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jena Gaines</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2008/12/19</td>
|
||||||
|
<td>$90,560</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Quinn Flynn</td>
|
||||||
|
<td>Support Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2013/03/03</td>
|
||||||
|
<td>$342,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Charde Marshall</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>36</td>
|
||||||
|
<td>2008/10/16</td>
|
||||||
|
<td>$470,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Haley Kennedy</td>
|
||||||
|
<td>Senior Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2012/12/18</td>
|
||||||
|
<td>$313,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Tatyana Fitzpatrick</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>19</td>
|
||||||
|
<td>2010/03/17</td>
|
||||||
|
<td>$385,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Silva</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>66</td>
|
||||||
|
<td>2012/11/27</td>
|
||||||
|
<td>$198,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Paul Byrd</td>
|
||||||
|
<td>Chief Financial Officer (CFO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2010/06/09</td>
|
||||||
|
<td>$725,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gloria Little</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>59</td>
|
||||||
|
<td>2009/04/10</td>
|
||||||
|
<td>$237,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bradley Greer</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2012/10/13</td>
|
||||||
|
<td>$132,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Dai Rios</td>
|
||||||
|
<td>Personnel Lead</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>35</td>
|
||||||
|
<td>2012/09/26</td>
|
||||||
|
<td>$217,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jenette Caldwell</td>
|
||||||
|
<td>Development Lead</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2011/09/03</td>
|
||||||
|
<td>$345,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Yuri Berry</td>
|
||||||
|
<td>Chief Marketing Officer (CMO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>40</td>
|
||||||
|
<td>2009/06/25</td>
|
||||||
|
<td>$675,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Caesar Vance</td>
|
||||||
|
<td>Pre-Sales Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2011/12/12</td>
|
||||||
|
<td>$106,450</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Doris Wilder</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2010/09/20</td>
|
||||||
|
<td>$85,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Angelica Ramos</td>
|
||||||
|
<td>Chief Executive Officer (CEO)</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/10/09</td>
|
||||||
|
<td>$1,200,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Joyce</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>42</td>
|
||||||
|
<td>2010/12/22</td>
|
||||||
|
<td>$92,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Chang</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2010/11/14</td>
|
||||||
|
<td>$357,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brenden Wagner</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2011/06/07</td>
|
||||||
|
<td>$206,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Fiona Green</td>
|
||||||
|
<td>Chief Operating Officer (COO)</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>48</td>
|
||||||
|
<td>2010/03/11</td>
|
||||||
|
<td>$850,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shou Itou</td>
|
||||||
|
<td>Regional Marketing</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>20</td>
|
||||||
|
<td>2011/08/14</td>
|
||||||
|
<td>$163,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michelle House</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2011/06/02</td>
|
||||||
|
<td>$95,400</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Suki Burks</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>53</td>
|
||||||
|
<td>2009/10/22</td>
|
||||||
|
<td>$114,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Prescott Bartlett</td>
|
||||||
|
<td>Technical Author</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/05/07</td>
|
||||||
|
<td>$145,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Cortez</td>
|
||||||
|
<td>Team Leader</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2008/10/26</td>
|
||||||
|
<td>$235,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Martena Mccray</td>
|
||||||
|
<td>Post-Sales support</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/03/09</td>
|
||||||
|
<td>$324,050</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Unity Butler</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/12/09</td>
|
||||||
|
<td>$85,675</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Howard Hatfield</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/12/16</td>
|
||||||
|
<td>$164,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hope Fuentes</td>
|
||||||
|
<td>Secretary</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2010/02/12</td>
|
||||||
|
<td>$109,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Vivian Harrell</td>
|
||||||
|
<td>Financial Controller</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>62</td>
|
||||||
|
<td>2009/02/14</td>
|
||||||
|
<td>$452,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Timothy Mooney</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2008/12/11</td>
|
||||||
|
<td>$136,200</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jackson Bradshaw</td>
|
||||||
|
<td>Director</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>65</td>
|
||||||
|
<td>2008/09/26</td>
|
||||||
|
<td>$645,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Olivia Liang</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2011/02/03</td>
|
||||||
|
<td>$234,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bruno Nash</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>38</td>
|
||||||
|
<td>2011/05/03</td>
|
||||||
|
<td>$163,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sakura Yamamoto</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2009/08/19</td>
|
||||||
|
<td>$139,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Thor Walton</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2013/08/11</td>
|
||||||
|
<td>$98,540</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Finn Camacho</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/07/07</td>
|
||||||
|
<td>$87,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Serge Baldwin</td>
|
||||||
|
<td>Data Coordinator</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2012/04/09</td>
|
||||||
|
<td>$138,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zenaida Frank</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2010/01/04</td>
|
||||||
|
<td>$125,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zorita Serrano</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>56</td>
|
||||||
|
<td>2012/06/01</td>
|
||||||
|
<td>$115,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Acosta</td>
|
||||||
|
<td>Junior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2013/02/01</td>
|
||||||
|
<td>$75,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cara Stevens</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/12/06</td>
|
||||||
|
<td>$145,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hermione Butler</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2011/03/21</td>
|
||||||
|
<td>$356,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Lael Greer</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2009/02/27</td>
|
||||||
|
<td>$103,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jonas Alexander</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2010/07/14</td>
|
||||||
|
<td>$86,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shad Decker</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/11/13</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Bruce</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>29</td>
|
||||||
|
<td>2011/06/27</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Donna Snider</td>
|
||||||
|
<td>Customer Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/01/25</td>
|
||||||
|
<td>$112,000</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<footer class="py-4 bg-light mt-auto">
|
||||||
|
<div class="container-fluid px-4">
|
||||||
|
<div class="d-flex align-items-center justify-content-between small">
|
||||||
|
<div class="text-muted">Copyright © Your Website 2022</div>
|
||||||
|
<div>
|
||||||
|
<a href="#">Privacy Policy</a>
|
||||||
|
·
|
||||||
|
<a href="#">Terms & Conditions</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
|
||||||
|
<script src="js/scripts.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" crossorigin="anonymous"></script>
|
||||||
|
<script src="assets/demo/chart-area-demo.js"></script>
|
||||||
|
<script src="assets/demo/chart-bar-demo.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" crossorigin="anonymous"></script>
|
||||||
|
<script src="js/datatables-simple-demo.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
147
Bootstrap/專業/templates/layout-sidenav-light.html
Normal file
147
Bootstrap/專業/templates/layout-sidenav-light.html
Normal file
@ -0,0 +1,147 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
||||||
|
<meta name="description" content="" />
|
||||||
|
<meta name="author" content="" />
|
||||||
|
<title>Sidenav Light - SB Admin</title>
|
||||||
|
<link href="css/styles.css" rel="stylesheet" />
|
||||||
|
<script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>
|
||||||
|
</head>
|
||||||
|
<body class="sb-nav-fixed">
|
||||||
|
<nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark">
|
||||||
|
<!-- Navbar Brand-->
|
||||||
|
<a class="navbar-brand ps-3" href="index.html">Start Bootstrap</a>
|
||||||
|
<!-- Sidebar Toggle-->
|
||||||
|
<button class="btn btn-link btn-sm order-1 order-lg-0 me-4 me-lg-0" id="sidebarToggle" href="#!"><i class="fas fa-bars"></i></button>
|
||||||
|
<!-- Navbar Search-->
|
||||||
|
<form class="d-none d-md-inline-block form-inline ms-auto me-0 me-md-3 my-2 my-md-0">
|
||||||
|
<div class="input-group">
|
||||||
|
<input class="form-control" type="text" placeholder="Search for..." aria-label="Search for..." aria-describedby="btnNavbarSearch" />
|
||||||
|
<button class="btn btn-primary" id="btnNavbarSearch" type="button"><i class="fas fa-search"></i></button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<!-- Navbar-->
|
||||||
|
<ul class="navbar-nav ms-auto ms-md-0 me-3 me-lg-4">
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" id="navbarDropdown" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="fas fa-user fa-fw"></i></a>
|
||||||
|
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
|
||||||
|
<li><a class="dropdown-item" href="#!">Settings</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#!">Activity Log</a></li>
|
||||||
|
<li><hr class="dropdown-divider" /></li>
|
||||||
|
<li><a class="dropdown-item" href="#!">Logout</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<div id="layoutSidenav">
|
||||||
|
<div id="layoutSidenav_nav">
|
||||||
|
<nav class="sb-sidenav accordion sb-sidenav-light" id="sidenavAccordion">
|
||||||
|
<div class="sb-sidenav-menu">
|
||||||
|
<div class="nav">
|
||||||
|
<div class="sb-sidenav-menu-heading">Core</div>
|
||||||
|
<a class="nav-link" href="index.html">
|
||||||
|
<div class="sb-nav-link-icon"><i class="fas fa-tachometer-alt"></i></div>
|
||||||
|
Dashboard
|
||||||
|
</a>
|
||||||
|
<div class="sb-sidenav-menu-heading">Interface</div>
|
||||||
|
<a class="nav-link collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#collapseLayouts" aria-expanded="false" aria-controls="collapseLayouts">
|
||||||
|
<div class="sb-nav-link-icon"><i class="fas fa-columns"></i></div>
|
||||||
|
Layouts
|
||||||
|
<div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
|
||||||
|
</a>
|
||||||
|
<div class="collapse" id="collapseLayouts" aria-labelledby="headingOne" data-bs-parent="#sidenavAccordion">
|
||||||
|
<nav class="sb-sidenav-menu-nested nav">
|
||||||
|
<a class="nav-link" href="layout-static.html">Static Navigation</a>
|
||||||
|
<a class="nav-link" href="layout-sidenav-light.html">Light Sidenav</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<a class="nav-link collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#collapsePages" aria-expanded="false" aria-controls="collapsePages">
|
||||||
|
<div class="sb-nav-link-icon"><i class="fas fa-book-open"></i></div>
|
||||||
|
Pages
|
||||||
|
<div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
|
||||||
|
</a>
|
||||||
|
<div class="collapse" id="collapsePages" aria-labelledby="headingTwo" data-bs-parent="#sidenavAccordion">
|
||||||
|
<nav class="sb-sidenav-menu-nested nav accordion" id="sidenavAccordionPages">
|
||||||
|
<a class="nav-link collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#pagesCollapseAuth" aria-expanded="false" aria-controls="pagesCollapseAuth">
|
||||||
|
Authentication
|
||||||
|
<div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
|
||||||
|
</a>
|
||||||
|
<div class="collapse" id="pagesCollapseAuth" aria-labelledby="headingOne" data-bs-parent="#sidenavAccordionPages">
|
||||||
|
<nav class="sb-sidenav-menu-nested nav">
|
||||||
|
<a class="nav-link" href="login.html">Login</a>
|
||||||
|
<a class="nav-link" href="register.html">Register</a>
|
||||||
|
<a class="nav-link" href="password.html">Forgot Password</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<a class="nav-link collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#pagesCollapseError" aria-expanded="false" aria-controls="pagesCollapseError">
|
||||||
|
Error
|
||||||
|
<div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
|
||||||
|
</a>
|
||||||
|
<div class="collapse" id="pagesCollapseError" aria-labelledby="headingOne" data-bs-parent="#sidenavAccordionPages">
|
||||||
|
<nav class="sb-sidenav-menu-nested nav">
|
||||||
|
<a class="nav-link" href="401.html">401 Page</a>
|
||||||
|
<a class="nav-link" href="404.html">404 Page</a>
|
||||||
|
<a class="nav-link" href="500.html">500 Page</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div class="sb-sidenav-menu-heading">Addons</div>
|
||||||
|
<a class="nav-link" href="charts.html">
|
||||||
|
<div class="sb-nav-link-icon"><i class="fas fa-chart-area"></i></div>
|
||||||
|
Charts
|
||||||
|
</a>
|
||||||
|
<a class="nav-link" href="tables.html">
|
||||||
|
<div class="sb-nav-link-icon"><i class="fas fa-table"></i></div>
|
||||||
|
Tables
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sb-sidenav-footer">
|
||||||
|
<div class="small">Logged in as:</div>
|
||||||
|
Start Bootstrap
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div id="layoutSidenav_content">
|
||||||
|
<main>
|
||||||
|
<div class="container-fluid px-4">
|
||||||
|
<h1 class="mt-4">Sidenav Light</h1>
|
||||||
|
<ol class="breadcrumb mb-4">
|
||||||
|
<li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
|
||||||
|
<li class="breadcrumb-item active">Sidenav Light</li>
|
||||||
|
</ol>
|
||||||
|
<div class="card mb-4">
|
||||||
|
<div class="card-body">
|
||||||
|
This page is an example of using the light side navigation option. By appending the
|
||||||
|
<code>.sb-sidenav-light</code>
|
||||||
|
class to the
|
||||||
|
<code>.sb-sidenav</code>
|
||||||
|
class, the side navigation will take on a light color scheme. The
|
||||||
|
<code>.sb-sidenav-dark</code>
|
||||||
|
is also available for a darker option.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<footer class="py-4 bg-light mt-auto">
|
||||||
|
<div class="container-fluid px-4">
|
||||||
|
<div class="d-flex align-items-center justify-content-between small">
|
||||||
|
<div class="text-muted">Copyright © Your Website 2022</div>
|
||||||
|
<div>
|
||||||
|
<a href="#">Privacy Policy</a>
|
||||||
|
·
|
||||||
|
<a href="#">Terms & Conditions</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
|
||||||
|
<script src="js/scripts.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
149
Bootstrap/專業/templates/layout-static.html
Normal file
149
Bootstrap/專業/templates/layout-static.html
Normal file
@ -0,0 +1,149 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
||||||
|
<meta name="description" content="" />
|
||||||
|
<meta name="author" content="" />
|
||||||
|
<title>Static Navigation - SB Admin</title>
|
||||||
|
<link href="css/styles.css" rel="stylesheet" />
|
||||||
|
<script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark">
|
||||||
|
<!-- Navbar Brand-->
|
||||||
|
<a class="navbar-brand ps-3" href="index.html">Start Bootstrap</a>
|
||||||
|
<!-- Sidebar Toggle-->
|
||||||
|
<button class="btn btn-link btn-sm order-1 order-lg-0 me-4 me-lg-0" id="sidebarToggle" href="#!"><i class="fas fa-bars"></i></button>
|
||||||
|
<!-- Navbar Search-->
|
||||||
|
<form class="d-none d-md-inline-block form-inline ms-auto me-0 me-md-3 my-2 my-md-0">
|
||||||
|
<div class="input-group">
|
||||||
|
<input class="form-control" type="text" placeholder="Search for..." aria-label="Search for..." aria-describedby="btnNavbarSearch" />
|
||||||
|
<button class="btn btn-primary" id="btnNavbarSearch" type="button"><i class="fas fa-search"></i></button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<!-- Navbar-->
|
||||||
|
<ul class="navbar-nav ms-auto ms-md-0 me-3 me-lg-4">
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" id="navbarDropdown" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="fas fa-user fa-fw"></i></a>
|
||||||
|
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
|
||||||
|
<li><a class="dropdown-item" href="#!">Settings</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#!">Activity Log</a></li>
|
||||||
|
<li><hr class="dropdown-divider" /></li>
|
||||||
|
<li><a class="dropdown-item" href="#!">Logout</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<div id="layoutSidenav">
|
||||||
|
<div id="layoutSidenav_nav">
|
||||||
|
<nav class="sb-sidenav accordion sb-sidenav-dark" id="sidenavAccordion">
|
||||||
|
<div class="sb-sidenav-menu">
|
||||||
|
<div class="nav">
|
||||||
|
<div class="sb-sidenav-menu-heading">Core</div>
|
||||||
|
<a class="nav-link" href="index.html">
|
||||||
|
<div class="sb-nav-link-icon"><i class="fas fa-tachometer-alt"></i></div>
|
||||||
|
Dashboard
|
||||||
|
</a>
|
||||||
|
<div class="sb-sidenav-menu-heading">Interface</div>
|
||||||
|
<a class="nav-link collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#collapseLayouts" aria-expanded="false" aria-controls="collapseLayouts">
|
||||||
|
<div class="sb-nav-link-icon"><i class="fas fa-columns"></i></div>
|
||||||
|
Layouts
|
||||||
|
<div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
|
||||||
|
</a>
|
||||||
|
<div class="collapse" id="collapseLayouts" aria-labelledby="headingOne" data-bs-parent="#sidenavAccordion">
|
||||||
|
<nav class="sb-sidenav-menu-nested nav">
|
||||||
|
<a class="nav-link" href="layout-static.html">Static Navigation</a>
|
||||||
|
<a class="nav-link" href="layout-sidenav-light.html">Light Sidenav</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<a class="nav-link collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#collapsePages" aria-expanded="false" aria-controls="collapsePages">
|
||||||
|
<div class="sb-nav-link-icon"><i class="fas fa-book-open"></i></div>
|
||||||
|
Pages
|
||||||
|
<div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
|
||||||
|
</a>
|
||||||
|
<div class="collapse" id="collapsePages" aria-labelledby="headingTwo" data-bs-parent="#sidenavAccordion">
|
||||||
|
<nav class="sb-sidenav-menu-nested nav accordion" id="sidenavAccordionPages">
|
||||||
|
<a class="nav-link collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#pagesCollapseAuth" aria-expanded="false" aria-controls="pagesCollapseAuth">
|
||||||
|
Authentication
|
||||||
|
<div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
|
||||||
|
</a>
|
||||||
|
<div class="collapse" id="pagesCollapseAuth" aria-labelledby="headingOne" data-bs-parent="#sidenavAccordionPages">
|
||||||
|
<nav class="sb-sidenav-menu-nested nav">
|
||||||
|
<a class="nav-link" href="login.html">Login</a>
|
||||||
|
<a class="nav-link" href="register.html">Register</a>
|
||||||
|
<a class="nav-link" href="password.html">Forgot Password</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<a class="nav-link collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#pagesCollapseError" aria-expanded="false" aria-controls="pagesCollapseError">
|
||||||
|
Error
|
||||||
|
<div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
|
||||||
|
</a>
|
||||||
|
<div class="collapse" id="pagesCollapseError" aria-labelledby="headingOne" data-bs-parent="#sidenavAccordionPages">
|
||||||
|
<nav class="sb-sidenav-menu-nested nav">
|
||||||
|
<a class="nav-link" href="401.html">401 Page</a>
|
||||||
|
<a class="nav-link" href="404.html">404 Page</a>
|
||||||
|
<a class="nav-link" href="500.html">500 Page</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div class="sb-sidenav-menu-heading">Addons</div>
|
||||||
|
<a class="nav-link" href="charts.html">
|
||||||
|
<div class="sb-nav-link-icon"><i class="fas fa-chart-area"></i></div>
|
||||||
|
Charts
|
||||||
|
</a>
|
||||||
|
<a class="nav-link" href="tables.html">
|
||||||
|
<div class="sb-nav-link-icon"><i class="fas fa-table"></i></div>
|
||||||
|
Tables
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sb-sidenav-footer">
|
||||||
|
<div class="small">Logged in as:</div>
|
||||||
|
Start Bootstrap
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div id="layoutSidenav_content">
|
||||||
|
<main>
|
||||||
|
<div class="container-fluid px-4">
|
||||||
|
<h1 class="mt-4">Static Navigation</h1>
|
||||||
|
<ol class="breadcrumb mb-4">
|
||||||
|
<li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
|
||||||
|
<li class="breadcrumb-item active">Static Navigation</li>
|
||||||
|
</ol>
|
||||||
|
<div class="card mb-4">
|
||||||
|
<div class="card-body">
|
||||||
|
<p class="mb-0">
|
||||||
|
This page is an example of using static navigation. By removing the
|
||||||
|
<code>.sb-nav-fixed</code>
|
||||||
|
class from the
|
||||||
|
<code>body</code>
|
||||||
|
, the top navigation and side navigation will become static on scroll. Scroll down this page to see an example.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="height: 100vh"></div>
|
||||||
|
<div class="card mb-4"><div class="card-body">When scrolling, the navigation stays at the top of the page. This is the end of the static navigation demo.</div></div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<footer class="py-4 bg-light mt-auto">
|
||||||
|
<div class="container-fluid px-4">
|
||||||
|
<div class="d-flex align-items-center justify-content-between small">
|
||||||
|
<div class="text-muted">Copyright © Your Website 2022</div>
|
||||||
|
<div>
|
||||||
|
<a href="#">Privacy Policy</a>
|
||||||
|
·
|
||||||
|
<a href="#">Terms & Conditions</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
|
||||||
|
<script src="js/scripts.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user