/
chatting-board.html
138 lines (132 loc) · 7.65 KB
/
chatting-board.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!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>Chating Board Group04 Project</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" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
<!-- Heart Icon -->
<link rel="stylesheet" href="assets/vendors/themify-icons/css/themify-icons.css">
<link rel="stylesheet" href="assets/vendors/font-awesome/css/all.css">
<link href="css/hover.css" rel="stylesheet" media="all">
<style>
.leave-message {
display: flex;
justify-content: space-between;
}
.leave-message div {
cursor: pointer;
color: blue;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="assets/jquery-3.7.1.min.js"></script>
<script src="js/common.js"></script>
<script src="js/chatting.js"></script>
</head>
<body class="d-flex flex-column">
<main class="flex-shrink-0">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container px-5">
<a href="index.html" class="navbar-brand">Group04 GCP Project</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li id="message" class="nav-item"><a class="nav-link" href="leave-chatting.html">Message</a></li>
<li class="nav-item"><a class="nav-link active" href="chatting-board.html">Board</a></li>
<li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
<li id="login" class="nav-item"><a class="nav-link" href="login.html">Login</a></li>
<li id="logout" class="nav-item"><a class="nav-link" href="">Logout</a></li>
</ul>
</div>
</div>
</nav>
<!-- Blog preview section-->
<section class="py-5">
<div class="container px-5">
<div class="leave-message">
<h2 class="fw-bolder fs-5 mb-4">Messages</h2>
<div class="hvr-wobble-horizontal"><a href="leave-chatting.html">開始留言 gogo >></a></div>
</div>
<div id="board" class="row gx-5">
<!-- BackUp -->
<div class="post col-lg-4 mb-5">
<div data-number="" class="hvr-grow card h-100 shadow border-0">
<img class="card-img-top" src="" alt="..." />
<div class="card-body p-4">
<div style="display: flex; justify-content: space-between;">
<div id="news" class="badge bg-primary bg-gradient rounded-pill mb-2" style="margin-top: 3px;">News</div>
<!-- 愛心按讚圖標 -->
<div>
<button class="btn like-button" style="margin-right: 5px; padding: 0px;">
<i class="fa-regular fa-heart" style="color: cadetblue;"></i>
<!-- <i class="display-block icon icon-white square-16 icon-heartdisplay-block icon icon-white square-16 icon-heart" style="color: cadetblue;"></i> -->
</button>
<span class="like-count" style="color: cadetblue;">0</span> <!-- 按讚計數 -->
</div>
</div>
<div class="h5 card-title mb-3"></div>
<p class="card-text mb-0"></p>
</div>
<div class="card-footer p-4 pt-0 bg-transparent border-top-0">
<div class="d-flex align-items-end justify-content-between">
<div class="d-flex align-items-center">
<img class="rounded-circle me-3" src="" style="width: 40px;" />
<div class="small">
<div class="card-owner fw-bold"></div>
<div class="card-time text-muted">April 2, 2023 · 10 min read</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="text-end mb-5 mb-xl-0">
<a class="text-decoration-none" href="#!">
More stories
<i class="bi bi-arrow-right"></i>
</a>
</div> -->
</div>
</section>
</main>
<!-- Footer-->
<footer class="bg-dark py-4 mt-auto">
<div class="container px-5">
<!-- <div class="row align-items-center justify-content-between flex-column flex-sm-row"> -->
<div class="col-auto" style="text-align:center"><div class="small m-0 text-white">Copyright © 企業電腦網路2023 第四組 施君華 郭亭琳 蔡容平 高奕筠 吳湘柔 何妍霖</div></div>
<!-- </div> -->
</div>
</footer>
</body>
</html>
<!-- 01 -->
<!-- <div class="post col-lg-4 mb-5">
<div class="card h-100 shadow border-0">
<div class="card-body p-4">
<div class="badge bg-primary bg-gradient rounded-pill mb-2">New</div>
<a class="text-decoration-none link-dark stretched-link" href="#!"><div class="h5 card-title mb-3">Blog post title</div></a>
<p class="card-text mb-0">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<div class="card-footer p-4 pt-0 bg-transparent border-top-0">
<div class="d-flex align-items-end justify-content-between">
<div class="d-flex align-items-center">
<img class="rounded-circle me-3" src="img/Board/person-icon.png" alt="..." />
<div class="small">
<div class="fw-bold">User01</div>
</div>
</div>
</div>
</div>
</div>
</div> -->