chenx221/java_ee_project
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

up

Browse Source
This commit is contained in:
Chenx221 2023-06-05 17:21:58 +08:00
parent 26ff42c99b
commit ad64dd9a33
13 changed files with 1799 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
project/.gitignore vendored
View File

@ -36,3 +36,6 @@ build/
### Mac OS ###
.DS_Store
### out ###
out/

5
project/pom.xml
View File

@ -76,5 +76,10 @@
<version>2.20.0</version>
</dependency>
<dependency>
<groupId>commons-dbcp</groupId>
<artifactId>commons-dbcp</artifactId>
<version>1.4</version>
</dependency>
</dependencies>
</project>

30
project/src/main/java/cyou/chenx221/controller/AdminController.java
View File

@ -12,33 +12,29 @@ import org.springframework.web.bind.annotation.RequestParam;
@RequestMapping("/admin")
public class AdminController {
private final AdminService adminService;
@Autowired
public AdminController(AdminService adminService) {
this.adminService = adminService;
}
@GetMapping("/login")
public String showLoginForm() {
return "admin-login-form";
}
private AdminService adminService;
@PostMapping("/login")
public String login(@RequestParam("username") String username, @RequestParam("password") String password) {
boolean isValid = adminService.validateCredentials(username, password);
if (isValid) {
// 登录成功，重定向到管理页面
public String login(@RequestParam("username") String username,
@RequestParam("password") String password) {
// 进行用户名和密码的验证逻辑
if (adminService.validateCredentials(username, password)) {
// 验证成功，进行相应的操作
// 这里可以进行重定向或返回视图等操作
return "redirect:/admin/dashboard";
} else {
// 登录失败，返回登录页面并显示错误消息
// 验证失败，返回登录页面或错误提示
return "redirect:/admin/login?error";
}
}
@GetMapping("/dashboard")
public String showDashboard() {
return "admin-dashboard";
public String dashboard() {
// 处理管理员登录后的仪表盘页面
// 返回相应的视图页面
return "admin/dashboard";
}
@GetMapping("/logout")

1
project/src/main/java/cyou/chenx221/service/impl/AdminServiceImpl.java
View File

@ -18,6 +18,7 @@ public class AdminServiceImpl implements AdminService {
this.adminDao = adminDao;
}
@Override
public void addAdmin(Admin admin) {
adminDao.addAdmin(admin);

41
project/src/main/java/cyou/chenx221/servlet/AdminServlet.java
View File

@ -1,4 +1,43 @@
package cyou.chenx221.servlet;
public class AdminServlet {
import cyou.chenx221.service.AdminService;
import cyou.chenx221.service.impl.AdminServiceImpl;
import org.springframework.beans.factory.annotation.Autowired;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet("/admin")
public class AdminServlet extends HttpServlet {
@Autowired
private AdminService adminService;
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String username = request.getParameter("username");
String password = request.getParameter("password");
// 调用 AdminService 的验证凭证方法进行验证
boolean isValidCredentials = adminService.validateCredentials(username, password);
if (isValidCredentials) {
// 登录成功，设置会话状态
request.getSession().setAttribute("isLoggedIn", true);
response.sendRedirect("dashboard.jsp"); // 重定向到仪表盘页面
} else {
// 登录失败，返回错误消息
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.println("<html><body>");
out.println("<h3>登录失败，用户名或密码不正确。</h3>");
out.println("</body></html>");
}
}
}

40
project/src/main/resources/applicationContext.xml Normal file
View File

@ -0,0 +1,40 @@
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd">
<bean id="propertyConfigurer" class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer">
<property name="locations">
<list>
<value>classpath:db.properties</value>
</list>
</property>
</bean>
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<property name="configLocation" value="classpath:mybatis-config.xml" />
<property name="dataSource" ref="dataSource" />
</bean>
<bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource" destroy-method="close">
<property name="driverClassName" value="${db.driver}" />
<property name="url" value="${db.url}" />
<property name="username" value="${db.username}" />
<property name="password" value="${db.password}" />
</bean>
<!-- 配置其他 Bean -->
<bean id="sqlSession" class="org.mybatis.spring.SqlSessionTemplate">
<constructor-arg ref="sqlSessionFactory" />
</bean>
<!-- 配置 AdminDao Bean -->
<bean id="adminDao" class="cyou.chenx221.dao.impl.AdminDaoImpl">
<constructor-arg ref="sqlSession" />
</bean>
<!-- 配置 AdminService Bean -->
<bean id="adminService" class="cyou.chenx221.service.impl.AdminServiceImpl">
<constructor-arg ref="adminDao" />
</bean>
</beans>

4
project/src/main/resources/mybatis-config.xml
View File

@ -16,6 +16,8 @@
</environment>
</environments>
<mappers>
<!-- <mapper resource="mapper/Message.xml"/>-->
<mapper resource="mapper/AdminMapper.xml"/>
<mapper resource="mapper/ScoreMapper.xml"/>
<mapper resource="mapper/StudentMapper.xml"/>
</mappers>
</configuration>

BIN
project/web/img/jason-blackeye-nyL-rzwP-Mk-unsplash.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 615 KiB

BIN
project/web/img/mdb-favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

102
project/web/login.html
View File

@ -12,10 +12,108 @@
rel="stylesheet">
<link rel="stylesheet" href="css/mdb.min.css"/>
</head>
<body>
<div class="container">
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light" style="z-index: 1;min-height: 58.59px">
<div class="container">
<button class="navbar-toggler" type="button" data-mdb-toggle="collapse"
data-mdb-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<a class="navbar-brand mt-2 mt-lg-0" href="#">
<i class="fas fa-chalkboard-user me-2"></i>
教务管理系统
</a>
</div>
<div class="dropdown">
<a class="dropdown-toggle d-flex align-items-center hidden-arrow" href="#"
id="navbarDropdownMenuAvatar"
role="button" data-mdb-toggle="dropdown" aria-expanded="false">
<i class="fas fa-circle-user fa-lg"></i>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuAvatar">
<li>
<a class="dropdown-item" href="login.html">登录</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main>
<div class="bg-image shadow-2-strong vh-100"
style="background-image: url('img/jason-blackeye-nyL-rzwP-Mk-unsplash.jpg');margin-top: -58.59px;">
<div class="mask d-flex align-items-center h-100" style="background-color: hsl(0deg 0% 100% / 13%);">
<div class="container-fluid px-0">
<div class="container d-flex align-items-center justify-content-center h-100">
<div style="background-color: rgba(255,255,255,0.7);backdrop-filter: blur(30px)"
class="rounded-5 shadow-5-strong p-5">
<form action="/admin/login" method="POST">
<h1 class="text-center mb-4" style="font-family: 'Noto Sans SC Light',serif">用户登录</h1>
<div class="form-outline mb-4">
<input type="text" id="form1Example1" class="form-control" name="username"/>
<label class="form-label" for="form1Example1">用户名</label>
</div>
<div class="form-outline mb-4">
<input type="password" id="form1Example2" class="form-control" name="password"/>
<label class="form-label" for="form1Example2">密码</label>
</div>
<div class="row">
<div class="col d-flex justify-content-center">
<div class="form-check">
<input class="form-check-input" type="checkbox" value=""
id="form1Example3"
checked/>
<label class="form-check-label" for="form1Example3">记住密码</label>
</div>
</div>
<div class="col">
<a href="#!">忘记密码?</a>
</div>
</div>
<button type="button" class="btn btn-tertiary btn-block mx-auto"
data-mdb-ripple-color="light">没有账户? 注册账户
</button>
<button type="submit" class="btn btn-primary btn-block">登录</button>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-mdb-toggle="modal" data-mdb-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">...</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</main>
<footer>
</footer>
<script type="text/javascript" src="js/mdb.min.js"></script>

16
project/web/template.html
View File

@ -13,9 +13,25 @@
<link rel="stylesheet" href="css/mdb.min.css"/>
</head>
<body>
<!--Main Navigation-->
<header>
</header>
<!--Main Navigation-->
<!--Main layout-->
<main>
<div class="container">
</div>
</main>
<!--Main layout-->
<!--Footer-->
<footer>
</footer>
<!--Footer-->
<script type="text/javascript" src="js/mdb.min.js"></script>

648
project/web/test/test1.html Normal file
View File

@ -0,0 +1,648 @@
<!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 http-equiv="x-ua-compatible" content="ie=edge"/>
<title>登录</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="../css/mdb.min.css"/>
</head>
<body>
<!--Main Navigation-->
<header>
<!--Main Navigation-->
<header class="mb-7">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light" style="z-index: 1;min-height: 58.59px">
<!-- Container wrapper -->
<div class="container">
<!-- Toggle button -->
<button class="navbar-toggler" type="button" data-mdb-toggle="collapse"
data-mdb-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<!-- Collapsible wrapper -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Navbar brand -->
<a class="navbar-brand mt-2 mt-lg-0" href="#">
<i class="fas fa-chalkboard-user"></i>
</a>
<!-- Left links -->
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
</ul>
<!-- Left links -->
</div>
<!-- Collapsible wrapper -->
<!-- Right elements -->
<div class="d-flex align-items-center">
<!-- Icon -->
<a class="text-reset me-3" href="#">
<i class="fas fa-shopping-cart"></i>
</a>
<a class="text-reset me-3" href="#">
<i class="fas fa-shopping-cart"></i>
</a>
<a class="text-reset me-3" href="#">
<i class="fas fa-shopping-cart"></i>
</a>
<!-- Notifications -->
<div class="dropdown">
<a class="text-reset me-3 dropdown-toggle hidden-arrow" href="#" id="navbarDropdownMenuLink"
role="button"
data-mdb-toggle="dropdown" aria-expanded="false">
<i class="fas fa-bell"></i>
<span class="badge rounded-pill badge-notification bg-danger">1</span>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuLink">
<li>
<a class="dropdown-item" href="#">Some news</a>
</li>
<li>
<a class="dropdown-item" href="#">Another news</a>
</li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
</ul>
</div>
<!-- Avatar -->
<div class="dropdown">
<a class="dropdown-toggle d-flex align-items-center hidden-arrow" href="#"
id="navbarDropdownMenuAvatar"
role="button" data-mdb-toggle="dropdown" aria-expanded="false">
<img src="https://mdbcdn.b-cdn.net/img/new/avatars/2.webp" class="rounded-circle"
height="25"
alt="Black and White Portrait of a Man" loading="lazy"/>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuAvatar">
<li>
<a class="dropdown-item" href="#">My profile</a>
</li>
<li>
<a class="dropdown-item" href="#">Settings</a>
</li>
<li>
<a class="dropdown-item" href="#">Logout</a>
</li>
</ul>
</div>
</div>
<!-- Right elements -->
</div>
<!-- Container wrapper -->
</nav>
<!-- Navbar -->
<!-- Add only the code below -->
<!-- Background image -->
<div class="bg-image vh-100" style="
margin-top: -58.59px;
background-image: url('https://mdbcdn.b-cdn.net/img/new/fluid/city/018.jpg');">
<!-- Mask -->
<div class="mask" style="background-color: hsla(0, 0%, 0%, 0.6)">
<!-- Call to action -->
<div class="container d-flex justify-content-center align-items-center h-100">
<div class="text-white text-center">
<h1 class="mb-3">Whoah, what a view!</h1>
<h5 class="mb-4">Learning web design is such an amazing thing</h5>
<a class="btn btn-secondary btn-rounded btn-lg m-2" data-ripple-color="primary" href="#"
role="button">Learn with me<i class="fas fa-graduation-cap ms-2"></i></a>
</div>
</div>
</div>
<!-- Add only the code above -->
</div>
</header>
</header>
<!--Main Navigation-->
<!--Main layout-->
<main>
<div class="container">
<!--Main layout-->
<main>
<div class="container">
<!-- Section: Details -->
<section class="mb-10">
<div class="row gx-xl-5">
<div class="col-lg-7 mb-5 mb-lg-0">
<!-- Carousel wrapper -->
<div id="carouselBasicExample" class="carousel slide carousel-fade"
data-mdb-ride="carousel">
<!-- Indicators -->
<div class="carousel-indicators">
<button
type="button"
data-mdb-target="#carouselBasicExample"
data-mdb-slide-to="0"
class="active"
aria-current="true"
aria-label="Slide 1"
></button>
<button
type="button"
data-mdb-target="#carouselBasicExample"
data-mdb-slide-to="1"
aria-label="Slide 2"
></button>
<button
type="button"
data-mdb-target="#carouselBasicExample"
data-mdb-slide-to="2"
aria-label="Slide 3"
></button>
</div>
<!-- Inner -->
<div class="carousel-inner rounded-6 shadow-4-strong">
<!-- Single item -->
<div class="carousel-item active">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(15).webp"
class="d-block w-100" alt="Sunset Over the City"/>
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<!-- Single item -->
<div class="carousel-item">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(22).webp"
class="d-block w-100" alt="Canyon at Nigh"/>
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<!-- Single item -->
<div class="carousel-item">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(23).webp"
class="d-block w-100" alt="Cliff Above a Stormy Sea"/>
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<!-- Inner -->
<!-- Controls -->
<button class="carousel-control-prev" type="button"
data-mdb-target="#carouselBasicExample" data-mdb-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button"
data-mdb-target="#carouselBasicExample" data-mdb-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- Carousel wrapper -->
</div>
<div class="col-lg-5 mb-5 mb-lg-0">
<h3 class="fw-bold mb-4">Details</h3>
<p>This beginner-friendly, example-based course will guide you through the essential
knowledge of MDB
ecosystem.</p>
<p class="mb-2"><strong>What will you learn:</strong></p>
<ul class="list-unstyled">
<li><i class="fas fa-check text-success me-2"></i>Bootstrap</li>
<li><i class="fas fa-check text-success me-2"></i>MDBootstrap</li>
<li><i class="fas fa-check text-success me-2"></i>UI & UX design</li>
<li><i class="fas fa-check text-success me-2"></i>Responsive web design</li>
</ul>
<a class="btn btn-link btn-rounded" href="#" role="button"
data-mdb-ripple-color="primary">Learn more</a>
</div>
</div>
</section>
<!-- Section: Details -->
<!-- Section: Pricing -->
<section class="mb-5 mb-lg-10">
<h3 class="fw-bold text-center mb-5">Pricing</h3>
<div class="row gx-xl-5">
<div class="col-lg-4 col-md-6 mb-4 mb-lg-0 order-2 order-lg-1">
<div class="card h-100">
<div class="card-header text-center pt-4">
<p class="text-uppercase">
<strong>Basic</strong>
</p>
<h3 class="mb-4">
<strong>$ 129</strong>
<small class="text-muted" style="font-size: 16px">/year</small>
</h3>
<button type="button" class="btn btn-secondary btn-rounded w-100 mb-3">
Buy
</button>
</div>
<div class="card-body">
<ol class="list-unstyled mb-0">
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i>Unlimited
updates
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i>Git repository
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i>npm
installation
</li>
</ol>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12 mb-4 mb-lg-0 order-1 order-lg-2">
<div class="card h-100">
<div class="card-header text-center pt-4">
<p class="text-uppercase">
<strong>Advanced</strong>
</p>
<h3 class="mb-4">
<strong>$ 299</strong>
<small class="text-muted" style="font-size: 16px"
>/year</small
>
</h3>
<button type="button" class="btn btn-primary btn-rounded w-100 mb-3">
Buy
</button>
</div>
<div class="card-body">
<ol class="list-unstyled mb-0">
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i>Unlimited
updates
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i>Git repository
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i>npm
installation
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i>Code examples
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i>Premium
snippets
</li>
</ol>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4 mb-lg-0 order-3 order-lg-3">
<div class="card h-100">
<div class="card-header text-center pt-4">
<p class="text-uppercase">
<strong>Enterprise</strong>
</p>
<h3 class="mb-4">
<strong>$ 499</strong>
<small class="text-muted" style="font-size: 16px"
>/year</small
>
</h3>
<button
type="button"
class="btn btn-secondary btn-rounded w-100 mb-3"
>
Buy
</button>
</div>
<div class="card-body">
<ol class="list-unstyled mb-0">
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i>Unlimited
updates
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i>Git repository
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i>npm
installation
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i>Code examples
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i>Premium
snippets
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i>Premium
support
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i>Drag&amp;Drop
builder
</li>
</ol>
</div>
</div>
</div>
</div>
</section>
<!-- Section: Pricing -->
<!-- Section: Contact -->
<section class="mb-5 mb-lg-10">
<h3 class="fw-bold text-center mb-5">Contact us</h3>
<div class="row gx-xl-5">
<div class="col-lg-5 mb-4 mb-lg-0">
<form>
<!-- Name input -->
<div class="form-outline mb-4">
<input type="text" id="form4Example1" class="form-control" />
<label class="form-label" for="form4Example1">Name</label>
</div>
<!-- Email input -->
<div class="form-outline mb-4">
<input type="email" id="form4Example2" class="form-control" />
<label class="form-label" for="form4Example2">Email address</label>
</div>
<!-- Message input -->
<div class="form-outline mb-4">
<textarea class="form-control" id="form4Example3" rows="4"></textarea>
<label class="form-label" for="form4Example3">Message</label>
</div>
<!-- Checkbox -->
<div class="form-check d-flex justify-content-center mb-4">
<input class="form-check-input me-2" type="checkbox" value="" id="form4Example4" checked />
<label class="form-check-label" for="form4Example4">
Send me a copy of this message
</label>
</div>
<!-- Submit button -->
<button type="submit" class="btn btn-primary btn-block mb-4">Send</button>
</form>
</div>
<div class="col-lg-7 mb-4 mb-lg-0">
<div class="row gx-lg-5">
<div class="col-md-6 mb-4 mb-md-5">
<div class="d-flex align-items-start">
<div class="p-3 badge-primary rounded-4">
<i class="fas fa-headset fa-lg fa-fw"></i>
</div>
<div class="ms-4">
<p class="fw-bold mb-1">Technical support</p>
<p class="text-muted mb-0">support@example.com</p>
<p class="text-muted mb-0">+1 234-567-89</p>
</div>
</div>
</div>
<div class="col-md-6 mb-4 mb-md-5">
<div class="d-flex align-items-start">
<div class="p-3 badge-primary rounded-4">
<i class="fas fa-dollar-sign fa-lg fa-fw"></i>
</div>
<div class="ms-4">
<p class="fw-bold mb-1">Sales questions</p>
<p class="text-muted mb-0">sales@example.com</p>
<p class="text-muted mb-0">+1 234-567-88</p>
</div>
</div>
</div>
<div class="col-md-6 mb-4 mb-md-5">
<div class="d-flex align-items-start">
<div class="p-3 badge-primary rounded-4">
<i class="fas fa-newspaper fa-lg fa-fw"></i>
</div>
<div class="ms-4">
<p class="fw-bold mb-1">Press</p>
<p class="text-muted mb-0">press@example.com</p>
<p class="text-muted mb-0">+1 234-567-87</p>
</div>
</div>
</div>
<div class="col-md-6 mb-4 mb-md-5">
<div class="d-flex align-items-start">
<div class="p-3 badge-primary rounded-4">
<i class="fas fa-bug fa-lg fa-fw"></i>
</div>
<div class="ms-4">
<p class="fw-bold mb-1">Bug report</p>
<p class="text-muted mb-0">bugs@example.com</p>
<p class="text-muted mb-0">+1 234-567-86</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Section: Contact -->
</div>
</main>
<!--Main layout-->
</div>
</main>
<!--Main layout-->
<!-- Footer -->
<footer class="text-center text-lg-start bg-light text-muted">
<div class="container">
<!-- Section: Social media -->
<section class="d-flex justify-content-center justify-content-lg-between p-4 pb-1">
<!-- Left -->
<div class="me-5 d-none d-lg-block">
<span>Get connected with us on social networks:</span>
</div>
<!-- Left -->
<!-- Right -->
<div>
<a href="" class="me-4 text-reset">
<i class="fab fa-facebook-f"></i>
</a>
<a href="" class="me-4 text-reset">
<i class="fab fa-twitter"></i>
</a>
<a href="" class="me-4 text-reset">
<i class="fab fa-google"></i>
</a>
<a href="" class="me-4 text-reset">
<i class="fab fa-instagram"></i>
</a>
<a href="" class="me-4 text-reset">
<i class="fab fa-linkedin"></i>
</a>
<a href="" class="me-4 text-reset">
<i class="fab fa-github"></i>
</a>
</div>
<!-- Right -->
</section>
<!-- Section: Social media -->
</div>
<hr class="hr">
<div class="container">
<!-- Section: Links -->
<section class="">
<div class="container text-center text-md-start mt-5">
<!-- Grid row -->
<div class="row mt-3">
<!-- Grid column -->
<div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">
<!-- Content -->
<h6 class="text-uppercase fw-bold mb-4">
<i class="fas fa-gem me-3"></i>Company name
</h6>
<p>
Here you can use rows and columns to organize your footer content. Lorem ipsum
dolor sit amet, consectetur adipisicing elit.
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">
Products
</h6>
<p>
<a href="#!" class="text-reset">Angular</a>
</p>
<p>
<a href="#!" class="text-reset">React</a>
</p>
<p>
<a href="#!" class="text-reset">Vue</a>
</p>
<p>
<a href="#!" class="text-reset">Laravel</a>
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">
Useful links
</h6>
<p>
<a href="#!" class="text-reset">Pricing</a>
</p>
<p>
<a href="#!" class="text-reset">Settings</a>
</p>
<p>
<a href="#!" class="text-reset">Orders</a>
</p>
<p>
<a href="#!" class="text-reset">Help</a>
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">Contact</h6>
<p><i class="fas fa-home me-3"></i> New York, NY 10012, US</p>
<p>
<i class="fas fa-envelope me-3"></i>
info@example.com
</p>
<p><i class="fas fa-phone me-3"></i> + 01 234 567 88</p>
<p><i class="fas fa-print me-3"></i> + 01 234 567 89</p>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
</section>
<!-- Section: Links -->
</div>
<!-- Copyright -->
<div class="text-center p-4" style="background-color: rgba(0, 0, 0, 0.05);">
© 2022 Copyright:
<a class="text-reset fw-bold" href="https://mdbootstrap.com/">MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
<script type="text/javascript" src="../js/mdb.min.js"></script>
</body>
</html>

926
project/web/test/test2.html Normal file
View File

@ -0,0 +1,926 @@
<!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 http-equiv="x-ua-compatible" content="ie=edge"/>
<title>登录</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="../css/mdb.min.css"/>
<!-- Custom styles -->
<style>
/* Color of the links BEFORE scroll */
.navbar-before-scroll .nav-link,
.navbar-before-scroll .navbar-toggler-icon {
color: #fff;
}
/* Color of the links AFTER scroll */
.navbar-after-scroll .nav-link,
.navbar-after-scroll .navbar-toggler-icon {
color: #4f4f4f;
}
/* Color of the navbar AFTER scroll */
.navbar-after-scroll {
background-color: #fff;
}
/* Transition after scrolling */
.navbar-after-scroll {
transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
}
/* Transition to the initial state */
.navbar-before-scroll {
transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
}
/* An optional height of the navbar AFTER scroll */
.navbar.navbar-before-scroll.navbar-after-scroll {
padding-top: 5px;
padding-bottom: 5px;
}
/* Navbar on mobile */
@media (max-width: 991.98px) {
#main-navbar {
background-color: #fff;
}
.nav-link,
.navbar-toggler-icon {
color: #4f4f4f !important;
}
}
@media (min-width: 992px) {
.rotate-lg {
transform: rotate(6deg);
}
}
</style>
</head>
<body>
<!--Main Navigation-->
<header class="mb-10">
<!-- Navbar -->
<nav class="navbar navbar-expand-md fixed-top navbar-before-scroll shadow-0" id="main-navbar">
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Toggle button -->
<button class="navbar-toggler" type="button" data-mdb-toggle="collapse"
data-mdb-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<!-- Collapsible wrapper -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link text-dark" href="#!">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#!">About me</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#!">Testimonials</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#!">Contact</a>
</li>
</ul>
<ul class="navbar-nav flex-row">
<!-- Icons -->
<li class="nav-item">
<a class="nav-link pe-2" href="#!">
<i class="fab fa-youtube"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link px-2" href="#!">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link px-2" href="#!">
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link ps-2" href="#!">
<i class="fab fa-instagram"></i>
</a>
</li>
</ul>
</div>
<!-- Collapsible wrapper -->
</div>
<!-- Container wrapper -->
</nav>
<!-- Navbar -->
<!-- Section: Split screen -->
<section class="">
<div class="container-fluid px-0">
<div class="row g-0">
<!-- First column -->
<div class="col-lg-6 vh-100 d-flex flex-column justify-content-center align-items-center">
<!-- Headings -->
<div class="h-100 d-flex justify-content-center align-items-center px-5">
<div class="">
<h2 class="display-4">John Doe</h2>
<h1 class="display-2 fw-bold text-uppercase">Web developer</h1>
</div>
</div>
<!-- CTA elements -->
<div class="d-flex align-items-center w-100 justify-content-between px-5 mb-5">
<a href="https://github.com/mdbootstrap/mdb-ui-kit" target="_blank" class="text-dark"><i
class="fab fa-github fa-xl"></i></a>
<hr class="hr d-none d-xl-flex" style="height: 2px; width: 200px;">
<a class="btn btn-primary btn-lg btn-rounded" href="#" role="button">See my projects<i
class="fas fa-angle-down ms-2"></i></a>
</div>
</div>
<!-- First column -->
<!-- Second column -->
<div class="col-lg-6 vh-100 d-none d-lg-inline-block">
</div>
<!-- Second column -->
</div>
</div>
</section>
<!-- Section: Split screen -->
</header>
<!--Main Navigation-->
<!--Main layout-->
<main>
<div class="container">
<!-- Section: My projects -->
<section class="mb-10 text-center">
<h2 class="fw-bold mb-7 text-center">My projects</h2>
<div class="row gx-lg-5">
<!-- First column -->
<div class="col-lg-4 col-md-12 mb-6 mb-lg-0">
<div class="card rounded-6 h-100">
<div class="bg-image hover-overlay ripple mx-3 shadow-4-strong rounded-6 mt-n3"
data-mdb-ripple-color="light">
<img src="https://mdbootstrap.com/img/new/textures/small/148.jpg" class="w-100"/>
<a href="#!" data-mdb-toggle="modal" data-mdb-target="#project-1">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</a>
</div>
<div class="card-body">
<h5 class="card-title">AI engine</h5>
<p class="text-muted">
<small>Finished <u>13.09.2021</u> for
<a href="" class="text-dark">Techify</a></small>
</p>
<p class="card-text">
Ut pretium ultricies dignissim. Sed sit amet mi eget urna
placerat vulputate. Ut vulputate est non quam dignissim
elementum. Donec a ullamcorper diam.
</p>
<a href="#!" class="btn btn-secondary btn-rounded" data-mdb-toggle="modal"
data-mdb-target="#project-1">Read more</a>
</div>
</div>
</div>
<!-- First column -->
<!-- Second column -->
<div class="col-lg-4 mb-6 mb-lg-0">
<div class="card rounded-6 h-100">
<div class="bg-image hover-overlay ripple mx-3 shadow-4-strong rounded-6 mt-n3"
data-mdb-ripple-color="light">
<img src="https://mdbootstrap.com/img/new/textures/small/38.jpg" class="w-100"/>
<a href="#!" data-mdb-toggle="modal" data-mdb-target="#project-2">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</a>
</div>
<div class="card-body">
<h5 class="card-title">Balanced design</h5>
<p class="text-muted">
<small>Finished <u>12.01.2022</u> for
<a href="" class="text-dark">Rubicon</a></small>
</p>
<p class="card-text">
Suspendisse in volutpat massa. Nulla facilisi. Sed aliquet
diam orci, nec ornare metus semper sed. Integer volutpat
ornare erat sit amet rutrum. Ut vulputate est non quam.
</p>
<a href="#!" class="btn btn-secondary btn-rounded" data-mdb-toggle="modal"
data-mdb-target="#project-2">Read more</a>
</div>
</div>
</div>
<!-- Second column -->
<!-- Third column -->
<div class="col-lg-4 mb-6 mb-lg-0">
<div class="card rounded-6 h-100">
<div class="bg-image hover-overlay ripple mx-3 shadow-4-strong rounded-6 mt-n3"
data-mdb-ripple-color="light">
<img src="https://mdbootstrap.com/img/new/textures/small/55.jpg" class="w-100"/>
<a href="#!" data-mdb-toggle="modal" data-mdb-target="#project-3">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</a>
</div>
<div class="card-body">
<h5 class="card-title">Metaverse 2.0</h5>
<p class="text-muted">
<small>Finished <u>10.11.2022</u> for
<a href="" class="text-dark">Venom Tech</a></small>
</p>
<p class="card-text">
Curabitur tristique, mi a mollis sagittis, metus felis mattis
arcu, non vehicula nisl dui quis diam. Mauris ut risus eget
massa volutpat feugiat. Donec.
</p>
<a href="#!" class="btn btn-secondary btn-rounded" data-mdb-toggle="modal"
data-mdb-target="#project-3">Read more</a>
</div>
</div>
</div>
<!-- Third column -->
</div>
</section>
<!-- Section: My projects -->
<!-- Section: Projects modals -->
<section class="">
<!-- Modal project 1 -->
<div class="modal fade" id="project-1" tabindex="-1" aria-labelledby="project-1Label" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="project-1Label">AI engine</h5>
<button type="button" class="btn-close" data-mdb-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- Section: Design Block -->
<section>
<div class="row gx-lg-5 align-items-center">
<div class="col-lg-5 mb-5 mb-lg-0">
<div class="bg-image ripple rounded-7 shadow-5-strong"
data-mdb-ripple-color="light">
<img src="https://mdbootstrap.com/img/new/textures/full/98.jpg"
class="w-100"/>
<a href="#!">
<div class="mask" style="background-color: rgba(0, 0, 0, 0.4)">
<div class="d-flex justify-content-center align-items-center h-100">
<div class="px-4 py-5 px-md-5 text-white text-center">
<h3 class="text-uppercase fw-bold mb-4">
The future is <u
style="color: hsl(210, 12%, 80%)">now</u>
</h3>
<p class="mb-0" style="color: hsl(210, 12%, 80%)">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Harum quia laboriosam error consequuntur fugit,
doloribus rerum, iure nesciunt amet quidem veniam
cupiditate hic fugiat dolore aperiam quisquam libero
earum quibusdam?
</p>
</div>
</div>
</div>
<div class="hover-overlay">
<div class="mask"
style="background-color: rgba(251, 251, 251, 0.2)"></div>
</div>
</a>
</div>
</div>
<div class="col-lg-7 mb-4 mb-lg-0">
<div class="d-flex align-items-start mb-5">
<div class="flex-shrink-0">
<div class="p-3 rounded-4 shadow-2-strong"
style="background-color: hsl(204, 30%, 20%)">
<i class="fas fa-headset fa-lg text-white fa-fw"></i>
</div>
</div>
<div class="flex-grow-1 ms-4">
<p class="fw-bold mb-1">Support 24/7</p>
<p class="text-muted mb-0">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Nihil quisquam quibusdam modi sapiente magni molestias
pariatur facilis reprehenderit facere aliquam ex.
</p>
</div>
</div>
<div class="d-flex align-items-start mb-5">
<div class="flex-shrink-0">
<div class="p-3 rounded-4 shadow-2-strong"
style="background-color: hsl(204, 30%, 20%)">
<i class="fas fa-shield-alt fa-lg text-white fa-fw"></i>
</div>
</div>
<div class="flex-grow-1 ms-4">
<p class="fw-bold mb-1">Safe and solid</p>
<p class="text-muted mb-0">
Eum nostrum fugit numquam, voluptates veniam neque quibusdam ullam
aspernatur odio soluta,
quisquam dolore animi mollitia a omnis praesentium, expedita nobis!
</p>
</div>
</div>
<div class="d-flex align-items-start mb-5">
<div class="flex-shrink-0">
<div class="p-3 rounded-4 shadow-2-strong"
style="background-color: hsl(204, 30%, 20%)">
<i class="fas fa-shipping-fast fa-lg text-white fa-fw"></i>
</div>
</div>
<div class="flex-grow-1 ms-4">
<p class="fw-bold mb-1">Extremely fast</p>
<p class="text-muted mb-0">
Enim cupiditate, minus nulla dolor cumque iure eveniet facere ullam
beatae hic voluptatibus
dolores exercitationem? Facilis debitis aspernatur amet nisi iure
eveniet facere?
</p>
</div>
</div>
<div class="d-flex align-items-start">
<div class="flex-shrink-0">
<div class="p-3 rounded-4 shadow-2-strong"
style="background-color: hsl(204, 30%, 20%)">
<i class="fas fa-chart-pie fa-lg text-white fa-fw"></i>
</div>
</div>
<div class="flex-grow-1 ms-4">
<p class="fw-bold mb-1">Live analytics</p>
<p class="text-muted mb-0">
Illum doloremque ea, blanditiis sed dolor laborum praesentium maxime
sint, consectetur atque
ipsum ab adipisci ullam aspernatur odio soluta, quisquam dolore
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Section: Design Block -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal project 2 -->
<div class="modal fade" id="project-2" tabindex="-1" aria-labelledby="project-2Label" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="project-2Label">Balanced design</h5>
<button type="button" class="btn-close" data-mdb-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- Section: Design Block -->
<section>
<div class="row gx-lg-5 align-items-center">
<div class="col-lg-5 mb-5 mb-lg-0">
<div class="bg-image ripple rounded-7 shadow-5-strong"
data-mdb-ripple-color="light">
<img src="https://mdbootstrap.com/img/new/textures/full/7.jpg"
class="w-100"/>
<a href="#!">
<div class="mask" style="background-color: rgba(0, 0, 0, 0.4)">
<div class="d-flex justify-content-center align-items-center h-100">
<div class="px-4 py-5 px-md-5 text-white text-center">
<h3 class="text-uppercase fw-bold mb-4">
The future is <u
style="color: hsl(210, 12%, 80%)">now</u>
</h3>
<p class="mb-0" style="color: hsl(210, 12%, 80%)">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Harum quia laboriosam error consequuntur fugit,
doloribus rerum, iure nesciunt amet quidem veniam
cupiditate hic fugiat dolore aperiam quisquam libero
earum quibusdam?
</p>
</div>
</div>
</div>
<div class="hover-overlay">
<div class="mask"
style="background-color: rgba(251, 251, 251, 0.2)"></div>
</div>
</a>
</div>
</div>
<div class="col-lg-7 mb-4 mb-lg-0">
<div class="d-flex align-items-start mb-5">
<div class="flex-shrink-0">
<div class="p-3 rounded-4 shadow-2-strong"
style="background-color: hsl(0, 63%, 44%)">
<i class="fas fa-headset fa-lg text-white fa-fw"></i>
</div>
</div>
<div class="flex-grow-1 ms-4">
<p class="fw-bold mb-1">Support 24/7</p>
<p class="text-muted mb-0">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Nihil quisquam quibusdam modi sapiente magni molestias
pariatur facilis reprehenderit facere aliquam ex.
</p>
</div>
</div>
<div class="d-flex align-items-start mb-5">
<div class="flex-shrink-0">
<div class="p-3 rounded-4 shadow-2-strong"
style="background-color: hsl(0, 63%, 44%)">
<i class="fas fa-shield-alt fa-lg text-white fa-fw"></i>
</div>
</div>
<div class="flex-grow-1 ms-4">
<p class="fw-bold mb-1">Safe and solid</p>
<p class="text-muted mb-0">
Eum nostrum fugit numquam, voluptates veniam neque quibusdam ullam
aspernatur odio soluta,
quisquam dolore animi mollitia a omnis praesentium, expedita nobis!
</p>
</div>
</div>
<div class="d-flex align-items-start mb-5">
<div class="flex-shrink-0">
<div class="p-3 rounded-4 shadow-2-strong"
style="background-color: hsl(0, 63%, 44%)">
<i class="fas fa-shipping-fast fa-lg text-white fa-fw"></i>
</div>
</div>
<div class="flex-grow-1 ms-4">
<p class="fw-bold mb-1">Extremely fast</p>
<p class="text-muted mb-0">
Enim cupiditate, minus nulla dolor cumque iure eveniet facere ullam
beatae hic voluptatibus
dolores exercitationem? Facilis debitis aspernatur amet nisi iure
eveniet facere?
</p>
</div>
</div>
<div class="d-flex align-items-start">
<div class="flex-shrink-0">
<div class="p-3 rounded-4 shadow-2-strong"
style="background-color: hsl(0, 63%, 44%)">
<i class="fas fa-chart-pie fa-lg text-white fa-fw"></i>
</div>
</div>
<div class="flex-grow-1 ms-4">
<p class="fw-bold mb-1">Live analytics</p>
<p class="text-muted mb-0">
Illum doloremque ea, blanditiis sed dolor laborum praesentium maxime
sint, consectetur atque
ipsum ab adipisci ullam aspernatur odio soluta, quisquam dolore
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Section: Design Block -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Modal project 3 -->
<div class="modal fade" id="project-3" tabindex="-1" aria-labelledby="project-3Label" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="project-3Label">Metaverse 2.0</h5>
<button type="button" class="btn-close" data-mdb-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- Section: Design Block -->
<section>
<div class="row gx-lg-5 align-items-center">
<div class="col-lg-5 mb-5 mb-lg-0">
<div class="bg-image ripple rounded-7 shadow-5-strong"
data-mdb-ripple-color="light">
<img src="https://mdbootstrap.com/img/new/textures/full/30.jpg"
class="w-100"/>
<a href="#!">
<div class="mask" style="background-color: rgba(0, 0, 0, 0.4)">
<div class="d-flex justify-content-center align-items-center h-100">
<div class="px-4 py-5 px-md-5 text-white text-center">
<h3 class="text-uppercase fw-bold mb-4">
The future is <u
style="color: hsl(210, 12%, 80%)">now</u>
</h3>
<p class="mb-0" style="color: hsl(210, 12%, 80%)">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Harum quia laboriosam error consequuntur fugit,
doloribus rerum, iure nesciunt amet quidem veniam
cupiditate hic fugiat dolore aperiam quisquam libero
earum quibusdam?
</p>
</div>
</div>
</div>
<div class="hover-overlay">
<div class="mask"
style="background-color: rgba(251, 251, 251, 0.2)"></div>
</div>
</a>
</div>
</div>
<div class="col-lg-7 mb-4 mb-lg-0">
<div class="d-flex align-items-start mb-5">
<div class="flex-shrink-0">
<div class="p-3 rounded-4 shadow-2-strong"
style="background-color: hsl(260, 84%, 43%)">
<i class="fas fa-headset fa-lg text-white fa-fw"></i>
</div>
</div>
<div class="flex-grow-1 ms-4">
<p class="fw-bold mb-1">Support 24/7</p>
<p class="text-muted mb-0">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Nihil quisquam quibusdam modi sapiente magni molestias
pariatur facilis reprehenderit facere aliquam ex.
</p>
</div>
</div>
<div class="d-flex align-items-start mb-5">
<div class="flex-shrink-0">
<div class="p-3 rounded-4 shadow-2-strong"
style="background-color: hsl(260, 84%, 43%)">
<i class="fas fa-shield-alt fa-lg text-white fa-fw"></i>
</div>
</div>
<div class="flex-grow-1 ms-4">
<p class="fw-bold mb-1">Safe and solid</p>
<p class="text-muted mb-0">
Eum nostrum fugit numquam, voluptates veniam neque quibusdam ullam
aspernatur odio soluta,
quisquam dolore animi mollitia a omnis praesentium, expedita nobis!
</p>
</div>
</div>
<div class="d-flex align-items-start mb-5">
<div class="flex-shrink-0">
<div class="p-3 rounded-4 shadow-2-strong"
style="background-color: hsl(260, 84%, 43%)">
<i class="fas fa-shipping-fast fa-lg text-white fa-fw"></i>
</div>
</div>
<div class="flex-grow-1 ms-4">
<p class="fw-bold mb-1">Extremely fast</p>
<p class="text-muted mb-0">
Enim cupiditate, minus nulla dolor cumque iure eveniet facere ullam
beatae hic voluptatibus
dolores exercitationem? Facilis debitis aspernatur amet nisi iure
eveniet facere?
</p>
</div>
</div>
<div class="d-flex align-items-start">
<div class="flex-shrink-0">
<div class="p-3 rounded-4 shadow-2-strong"
style="background-color: hsl(260, 84%, 43%)">
<i class="fas fa-chart-pie fa-lg text-white fa-fw"></i>
</div>
</div>
<div class="flex-grow-1 ms-4">
<p class="fw-bold mb-1">Live analytics</p>
<p class="text-muted mb-0">
Illum doloremque ea, blanditiis sed dolor laborum praesentium maxime
sint, consectetur atque
ipsum ab adipisci ullam aspernatur odio soluta, quisquam dolore
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Section: Design Block -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</section>
<!-- Section: Projects modals -->
<!-- Section: About me -->
<section class="mb-10">
<div class="container">
<div class="row gx-0 align-items-center">
<!-- First column -->
<div class="col-lg-6 mb-5 mb-lg-0">
<div style="background: hsla(0, 0%, 100%, 0.55);backdrop-filter: blur(30px);z-index: 1"
class="card rounded-7 me-lg-n5">
<div class="card-body p-lg-5 shadow-5">
<h2 class="fw-bold">
<span class="text-primary">John Doe</span>
</h2>
<p class="fw-bold"><em>“Design is intelligence made visible.”</em></p>
<p class="text-muted mb-4">
Nunc tincidunt vulputate elit. Mauris varius purus malesuada
neque iaculis malesuada. Aenean gravida magna orci, non
efficitur est porta id. Donec magna diam.
</p>
<p class="text-muted">
Ad, at blanditiis quaerat laborum officia incidunt
cupiditate dignissimos voluptates eius aliquid minus
praesentium! Perferendis et totam ipsum ex aut earum libero
accusamus voluptas quod numquam saepe, consequuntur nihil
quia tenetur consequatur. Quis, explicabo deserunt quasi
assumenda ea maiores nulla, et dolor saepe praesentium natus
error reiciendis voluptas iste. Esse, laudantium ipsum
animi, quos voluptatibus atque vero repellat sit eligendi
autem maiores quasi cum aperiam. Aperiam rerum culpa
accusantium, ducimus deserunt aliquid alias vitae quasi
corporis placeat vel maiores explicabo commodi!
</p>
</div>
</div>
</div>
<!-- First column -->
<!-- Second column -->
<div class="col-lg-6 mb-5 mb-lg-0">
<div class="bg-image hover-overlay rotate-lg rounded-7 shadow-4">
<img src="https://mdbootstrap.com/img/new/standard/people/272.jpg" class="w-100" alt=""/>
<div class="mask"
style="background: linear-gradient(45deg,hsla(169, 84.5%, 52%, 0.3),hsla(263, 87.7%, 44.7%, 0.3) 100%)"></div>
</div>
</div>
<!-- Second column -->
</div>
</div>
</section>
<!-- Section: About me -->
<!-- Section: Testimonials -->
<section class="mb-10 text-center">
<h2 class="fw-bold mb-7 text-center">Happy clients</h2>
<div class="row gx-lg-5">
<!-- First column -->
<div class="col-lg-4 mb-5 mb-lg-0">
<div>
<div class="rounded-7 p-4 shadow-3" style="background-color: hsl(218, 62.2%, 95%)">
<!-- Divider here -->
<hr class="hr hr-blurry">
<p class="text-muted mt-4 mb-2">Project Manager at Spotify</p>
<p class="h5 mb-4 text-primary">Garry Lindman</p>
<p class="pb-4 mb-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis molestias quidem
itaque earum tempora distinctio soluta ut, eius, impedit porro iure praesentium
ratione possimus quos suscipit, ratione nostrum cum odit.
</p>
</div>
<img src="https://mdbootstrap.com/img/new/avatars/22.jpg"
class="w-100 rounded-7 mt-n5 shadow-5-strong"
style="max-width: 100px" alt="Avatar"/>
</div>
</div>
<!-- First column -->
<!-- Second column -->
<div class="col-lg-4 mb-5 mb-lg-0">
<div>
<div class="rounded-7 p-4 shadow-3" style="background-color: hsl(218, 62.2%, 95%)">
<!-- Divider here -->
<hr class="hr hr-blurry">
<p class="text-muted mt-4 mb-2">CEO at Reddit</p>
<p class="h5 mb-4 text-primary">Lisa Montessori</p>
<p class="pb-4 mb-4">
Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum
soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime
placeat facere possimus, omnis voluptas assumenda est omnis.
</p>
</div>
<img src="https://mdbootstrap.com/img/new/avatars/11.jpg"
class="w-100 rounded-7 mt-n5 shadow-5-strong"
style="max-width: 100px" alt="Avatar"/>
</div>
</div>
<!-- Second column -->
<!-- Third column -->
<div class="col-lg-4">
<div>
<div class="rounded-7 p-4 shadow-3" style="background-color: hsl(218, 62.2%, 95%)">
<!-- Divider here -->
<hr class="hr hr-blurry">
<p class="text-muted mt-4 mb-2">Senior Product Designer at Twitter</p>
<p class="h5 mb-4 text-primary">Ozzy McRyan</p>
<p class="pb-4 mb-4">
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe
eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque
earum rerum hic tenetur a sapiente delectus ut aut reiciendis.
</p>
</div>
<img src="https://mdbootstrap.com/img/new/avatars/25.jpg"
class="w-100 rounded-7 mt-n5 shadow-5-strong"
style="max-width: 100px" alt="Avatar"/>
</div>
</div>
<!-- Third column -->
</div>
</section>
<!-- Section: Testimonials -->
<!-- Section: Contact -->
<section class="mb-10 text-center">
<div class="container">
<div class="row gx-0 align-items-center">
<!-- First column -->
<div class="col-lg-6 mb-5 mb-lg-0">
<div style="background: hsla(0, 0%, 100%, 0.55);
backdrop-filter: blur(30px);
z-index: 1;" class="card rounded-7 me-lg-n5">
<div class="card-body p-lg-5 shadow-5">
<form>
<!-- Name input -->
<div class="form-outline mb-4">
<input type="text" id="form4Example1" class="form-control" />
<label class="form-label" for="form4Example1">Name</label>
</div>
<!-- Email input -->
<div class="form-outline mb-4">
<input type="email" id="form4Example2" class="form-control" />
<label class="form-label" for="form4Example2">Email address</label>
</div>
<!-- Message input -->
<div class="form-outline mb-4">
<textarea class="form-control" id="form4Example3" rows="4"></textarea>
<label class="form-label" for="form4Example3">Message</label>
</div>
<!-- Checkbox -->
<div class="form-check d-flex justify-content-center mb-4">
<input class="form-check-input me-2" type="checkbox" value="" id="form4Example4" checked />
<label class="form-check-label" for="form4Example4">
Send me a copy of this message
</label>
</div>
<!-- Submit button -->
<button type="submit" class="btn btn-primary btn-block mb-4">Send</button>
</form>
</div>
</div>
</div>
<!-- First column -->
<!-- Second column -->
<div class="col-lg-6 mb-5 mb-lg-0">
<div class="ratio ratio-1x1">
<iframe class="shadow-3-strong rounded-7" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d96813.17497894862!2d-73.97484803586903!3d40.68692922859912!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c2588f046ee661%3A0xa0b3281fcecc08c!2sManhattan%2C%20New%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2spl!4v1671718528728!5m2!1sen!2spl" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
<!-- Second column -->
</div>
</div>
</section>
<!-- Section: Contact -->
</div>
</main>
<!--Main layout-->
<!--Footer-->
<footer class="text-center" style="background-color: hsl(218, 62.2%, 95%)">
<div class="container py-4">
<!-- Facebook -->
<a class="btn text-white btn-floating m-2" style="background-color: #3b5998;" href="#!" role="button"><i
class="fab fa-facebook-f"></i></a>
<!-- Twitter -->
<a class="btn text-white btn-floating m-2" style="background-color: #55acee;" href="#!" role="button"><i
class="fab fa-twitter"></i></a>
<!-- Google -->
<a class="btn text-white btn-floating m-2" style="background-color: #dd4b39;" href="#!" role="button"><i
class="fab fa-google"></i></a>
<!-- Instagram -->
<a class="btn text-white btn-floating m-2" style="background-color: #ac2bac;" href="#!" role="button"><i
class="fab fa-instagram"></i></a>
<!-- Linkedin -->
<a class="btn text-white btn-floating m-2" style="background-color: #0082ca;" href="#!" role="button"><i
class="fab fa-linkedin-in"></i></a>
<!-- Github -->
<a class="btn text-white btn-floating m-2" style="background-color: #333333;" href="#!" role="button"><i
class="fab fa-github"></i></a>
</div>
<!-- Copyright -->
<div class="text-center p-3" style="background-color: hsla(218, 62.2%, 35%, 0.2)">
© 2022 Copyright:
<a class="text-dark" href="https://mdbootstrap.com/">MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!--Footer-->
<script type="text/javascript" src="../js/mdb.min.js"></script>
<!-- Custom scripts -->
<script type="text/javascript">
const navbar = document.getElementById("main-navbar")
window.addEventListener('scroll', function () {
if (window.pageYOffset > 0) {
navbar.classList.add("navbar-after-scroll")
} else {
navbar.classList.remove("navbar-after-scroll")
}
})
</script>
</body>
</html>