Mini Shell
<html lang="en">
<head>
<?php include 'head.php'; ?>
<?php
include 'admin/function_date.php';
$news_id = $_GET['news_id'];
$sql = "SELECT * FROM news INNER JOIN newstype ON news.newstype_id = newstype.newstype_id WHERE news_id = '$news_id' ";
$result = mysqli_query($link, $sql);
$row = mysqli_fetch_assoc($result);
//*** นับจำนวนผู้อ่านบทความ ***//
$sql_counter = "UPDATE news SET counter = counter+1 WHERE news_id = '$news_id'";
$result_counter = mysqli_query($link, $sql_counter);
//*** นับจำนวนผู้อ่านบทความ ***//
?>
<meta name="google-site-verification" content="Dbh47cW2wGAwjoCZVegEdRzmZI7pynQTeHiWTbt2P6Y" />
<title><?php echo $row['news_topic']; ?></title>
<meta name="description" content="<?php echo $row['topic_detail']; ?>">
<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-content h2,
#probootstrap-content p{
overflow-wrap: anywhere; /* ตัดได้แม้ไม่มีช่องว่าง */
word-break: break-word; /* สำรอง */
}
/* ถ้าต้องรองรับเบราว์เซอร์เก่ามาก ๆ เพิ่มอันนี้ได้ */
.force-break{
word-break: break-all;
}
/* ===== FIX: sidebar news topic overflow ===== */
#probootstrap-sidebar .probootstrap-side-menu a{
display: flex;
align-items: flex-start;
gap: 12px; /* เว้นระยะรูปกับข้อความ */
}
#probootstrap-sidebar .probootstrap-side-menu a > div{
min-width: 0; /* สำคัญมาก! ให้ flex ยอมย่อ */
flex: 1 1 auto; /* ขยาย/ย่อได้ */
}
#probootstrap-sidebar .probootstrap-side-menu h5{
margin: 0 0 5px 0;
font-size: 14px;
line-height: 1.4;
overflow-wrap: anywhere; /* ตัดได้แม้ไม่มีช่องว่าง */
word-break: break-word; /* สำรอง */
}
</style>
</head>
<body>
<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><?php echo $row['newstype_detail']; ?></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 probootstrap-section-sm">
<div class="container">
<div class="row">
<div class="col-md-8 col-sm-8 probootstrap-animate">
<nav aria-label="breadcrumb">
<ol class="breadcrumb" style="background: none; padding-left: 0; font-size: 14px;">
<li><a href="index.php"><i class="icon-home"></i> หน้าหลัก</a></li>
<li class="active"><?php echo $row['newstype_detail']; ?></li>
</ol>
</nav>
<?php
$date1 = $row['new_date'];
$show_date1 = displaydate($date1);
?>
<div id="probootstrap-content">
<div class="post-meta" style="margin-bottom: 20px; color: #999; font-size: 13px;">
<span style="margin-right: 15px;"><i class="icon-calendar"></i> <?php echo $show_date1; ?></span>
<span><i class="icon-user"></i> <?php echo $row['user_author']; ?></span>
</div>
<h2 style="margin-top:0; font-weight:bold;" class="force-break">
<?php echo $row['news_topic']; ?>
</h2>
<div class="force-break">
<?php echo $row['news_detail']; ?>
</div>
<div class="main-image">
<img src="admin/images/<?php echo $row['news_images']; ?>" alt="Activity Image" class="img-responsive" style="border-radius: 4px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
</div>
</div>
</div>
<div class="col-md-4 col-sm-4" id="probootstrap-sidebar">
<?php
$newstype_id = $row['newstype_id'];
$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 4";
$result_type = mysqli_query($link, $sql_type);
?>
<div class="probootstrap-sidebar-inner probootstrap-animate" style="margin-bottom: 30px; padding: 0;">
<form action="#" class="probootstrap-search-form">
<div class="form-group" style="position: relative;">
<input type="text" class="form-control" placeholder="ค้นหา..." style="padding-right: 40px; border-radius: 4px;">
<button type="submit" style="position: absolute; right: 10px; top: 8px; border: none; background: none;"><i class="icon-search"></i></button>
</div>
</form>
</div>
<div class="probootstrap-sidebar-inner probootstrap-animate">
<h3 style="border-bottom: 2px solid #f2f2f2; padding-bottom: 10px; margin-bottom: 20px;"><?php echo $row['newstype_detail']; ?></h3>
<ul class="probootstrap-side-menu list-unstyled">
<?php
while ($row_type = mysqli_fetch_array($result_type)) {
?>
<?php
$date2 = $row_type['new_date'];
$show_date2 = displaydate($date2);
?>
<li style="margin-bottom: 20px;">
<a href="news_details.php?news_id=<?php echo $row_type['news_id']; ?>" style="display: flex; align-items: flex-start; text-decoration: none; color: inherit;">
<img src="admin/images/<?php echo $row_type['news_images']; ?>" alt="thumb" style="width: 70px; height: 50px; object-fit: cover; margin-right: 15px; border-radius: 3px;">
<div>
<h5 style="margin: 0 0 5px 0; font-size: 14px; line-height: 1.4;"><?php echo $row_type['news_topic']; ?></h5>
<small style="color: #999;"><i class="icon-calendar"></i> <?php echo $show_date2; ?></small>
</div>
</a>
</li>
<?php } ?>
</ul>
</div>
</div>
</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