Mini Shell
<html lang="en">
<head>
<title>ข่าวเด่น English Program|โรงเรียนเทศบาลวัดชัยชุมพล | CCP</title>
<meta name="description" content="ข่าวเด่น | English Program | โรงเรียนเทศบาลวัดชัยชุมพล | Watchaichumpol municipality school">
<?php include 'head.php'; ?>
<style>
/* ลดความสูงแถบม่วงให้เล็กลง */
.hero-section{
position: relative;
padding: 16px 0 22px; /* <-- ปรับตรงนี้ให้เตี้ยลงได้อีก */
overflow: hidden;
color: #fff;
/* พื้นหลังม่วงแบบ gradient (นุ่มขึ้น) */
background: radial-gradient(1200px 400px at 20% 20%, rgba(255,255,255,.18), transparent 55%),
linear-gradient(135deg, #6a5af9 0%, #7b6cff 50%, #8f85ff 100%);
box-shadow: 0 10px 26px rgba(106, 90, 249, 0.22);
}
/* ตัวอักษรให้ดูบาลานซ์กับแถบที่เตี้ยลง */
.hero-section h1{
margin: 0;
font-size: 24px; /* ปรับได้ */
font-weight: 500;
letter-spacing: .3px;
}
/* ------------------------------
Abstract line pattern (พื้นหลังลายเส้น/abstract)
------------------------------ */
.hero-section::before{
content:"";
position:absolute;
inset:-40px;
pointer-events:none;
/* ลายเส้นบางๆ + วงกลมไฮไลท์ */
background:
radial-gradient(600px 260px at 75% 35%, rgba(255,255,255,.16), transparent 60%),
radial-gradient(420px 220px at 20% 75%, rgba(255,255,255,.10), transparent 62%),
/* เส้นเฉียงแบบเบา ๆ */
repeating-linear-gradient(
135deg,
rgba(255,255,255,.08) 0px,
rgba(255,255,255,.08) 1px,
transparent 1px,
transparent 14px
);
opacity: .75;
transform: rotate(-2deg);
}
/* ------------------------------
Wave SVG (โค้งสวยกว่า + เนียนกับ body)
------------------------------ */
.hero-wave{
position:absolute;
left:0;
right:0;
bottom:-1px;
height:32px; /* <-- ความสูง wave */
line-height:0;
}
.hero-wave svg{
width:100%;
height:100%;
display:block;
}
.hero-wave path{
fill:#ffffff; /* สีเดียวกับ body */
}
/* เผื่อมี section ถัดไปติดกัน ให้ไม่ชิดจนเกินไป */
.probootstrap-section + .probootstrap-section{
margin-top: 0;
}
/* Responsive */
@media (max-width: 768px){
.hero-section{ padding: 44px 0 62px; }
.hero-section h1{ font-size: 30px; }
.hero-wave{ height: 64px; }
}
/* ให้การ์ดสูงเท่ากัน + กันข้อความล้น */
.probootstrap-featured-news-box .probootstrap-text{
min-height: 130px; /* ปรับได้ตามดีไซน์ */
}
/* หัวข้อ: ตัดเหลือ 2 บรรทัด */
.probootstrap-featured-news-box .probootstrap-text h3{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
line-height: 1.35;
max-height: calc(1.35em * 2);
word-break: break-word;
margin: 0 0 8px;
}
/* รายละเอียด (ที่คุณใช้เป็น location): ตัดเหลือ 2 บรรทัด */
.probootstrap-featured-news-box .probootstrap-location{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
line-height: 1.35;
max-height: calc(1.35em * 2);
word-break: break-word;
/* กันไอคอนโดนตัดแปลก ๆ */
position: relative;
padding-left: 22px;
}
.probootstrap-featured-news-box .probootstrap-location i{
position: absolute;
left: 0;
top: 2px;
}
/* กันจุด bullet โผล่ และจัดปุ่มให้อยู่บรรทัดเดียว */
.site-pageination{
list-style: none;
padding: 0;
margin: 20px 0 0;
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.site-pageination li{
list-style: none;
margin: 0;
}
.site-pageination li a,
.site-pageination li span{
display: inline-block;
padding: 8px 12px;
border: 1px solid #e5e7eb;
border-radius: 8px;
text-decoration: none;
}
.site-pageination li a.active{
border-color: #6a5af9;
font-weight: 600;
}
.site-pageination li a.disabled{
pointer-events: none;
opacity: .45;
}
/* ใช้ Prompt ทั้งเว็บ */
html, body{
font-family: 'Prompt', sans-serif !important;
}
/* เผื่อบาง element ถูกธีมทับ ให้บังคับจุดสำคัญ */
.hero-section h1,
.probootstrap-featured-news-box .probootstrap-text,
.probootstrap-featured-news-box .probootstrap-text h3,
.site-pageination,
.site-pageination a,
.site-pageination span{
font-family: 'Prompt', sans-serif !important;
}
</style>
</head>
<body>
<?php
include 'admin/function_date.php';
?>
<?php
//***แบ่งหน้า***//
$rows = 9;
$sqlnum = "SELECT COUNT(*) AS cnt FROM news WHERE newstype_id = '001'";
$result = mysqli_query($link, $sqlnum);
$row = mysqli_fetch_assoc($result);
$total_rows = (int)$row['cnt'];
$total_page = max(1, (int)ceil($total_rows / $rows));
$page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
$page = max(1, min($page, $total_page));
$start = ($page - 1) * $rows;
//***แบ่งหน้า***//
$newstype_id = '001';
$sql_type = "SELECT * FROM news
INNER JOIN newstype ON news.newstype_id = newstype.newstype_id
WHERE news.newstype_id = '$newstype_id'
ORDER BY news_id DESC
LIMIT $start, $rows";
$result_type = mysqli_query($link, $sql_type);
//***แบ่งหน้า***//
if($page > 1)
{
$i = ($rows * ($page-1)) + 1;
}
//***แบ่งหน้า***//
?>
<div class="probootstrap-page-wrapper">
<!-- Fixed navbar -->
<?php include 'header.php'; ?>
<!-- เมนูด้านบน -->
<section class="probootstrap-section probootstrap-section-colored hero-section">
<div class="container">
<div class="row">
<div class="col-md-12 text-left section-heading probootstrap-animate">
<h1>ข่าวเด่นทั้งหมด</h1>
</div>
</div>
</div>
<!-- Wave SVG -->
<div class="hero-wave" aria-hidden="true">
<svg viewBox="0 0 1440 160" preserveAspectRatio="none">
<path d="M0,96 C240,160 480,32 720,96 C960,160 1200,32 1440,96 L1440,160 L0,160 Z"></path>
</svg>
</div>
</section>
<section class="probootstrap-section">
<div class="container">
<div class="row">
<?php
while ($row_type = mysqli_fetch_array($result_type)) {
?>
<?php
$date = $row_type['new_date'];
$show_date = displaydate($date);
?>
<div class="col-md-4 col-sm-6 col-xs-6 col-xxs-12 probootstrap-animate">
<a href="#" class="probootstrap-featured-news-box">
<figure class="probootstrap-media"><img src="admin/images/<?php echo $row_type['news_images']; ?>" alt="Free Bootstrap Template by ProBootstrap.com" class="img-responsive"></figure>
<div class="probootstrap-text">
<h3><?php echo $row_type['news_topic']; ?></h3>
<span class="probootstrap-location"><i class="icon-location2"></i><?php echo $row_type['topic_detail']; ?>......</span>
<span class="probootstrap-date"><i class="icon-calendar"></i><?php echo $show_date; ?></span>
</div>
</a>
</div>
<?php } ?>
</div>
<div class="text-center">
<!-- แบ่งหน้า -->
<ul class="site-pageination">
<li>
<a class="<?php echo ($page <= 1) ? 'disabled' : ''; ?>"
href="headline_news.php?page=<?php echo max(1, $page - 1); ?>">
<i class="fa fa-angle-left"></i> ก่อนหน้า
</a>
</li>
<?php
$startPage = max(1, $page - 2);
$endPage = min($total_page, $page + 2);
// แสดงหน้า 1 เสมอ + ellipsis ถ้าจำเป็น
if ($startPage > 1) {
echo '<li><a href="headline_news.php?page=1">1</a></li>';
if ($startPage > 2) echo '<li><span>...</span></li>';
}
// แสดงช่วงกลาง
for ($i = $startPage; $i <= $endPage; $i++) {
$active = ($page == $i) ? 'active' : '';
echo '<li><a class="'.$active.'" href="headline_news.php?page='.$i.'">'.$i.'</a></li>';
}
// แสดงหน้าสุดท้าย + ellipsis ถ้าจำเป็น
if ($endPage < $total_page) {
if ($endPage < $total_page - 1) echo '<li><span>...</span></li>';
echo '<li><a href="headline_news.php?page='.$total_page.'">'.$total_page.'</a></li>';
}
?>
<li>
<a class="<?php echo ($page >= $total_page) ? 'disabled' : ''; ?>"
href="headline_news.php?page=<?php echo min($total_page, $page + 1); ?>">
ถัดไป <i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
<!-- แบ่งหน้า -->
</div>
</div>
</section>
<?php include 'footer.php'; ?>
<!-- footer ด้านล่าง-->
</div>
<script src="js/scripts.min.js"></script>
<script src="js/main.min.js"></script>
<script src="js/custom.js"></script>
</body>
</html>
Zerion Mini Shell 1.0