|
Server IP : 172.16.15.8 / Your IP : 3.145.108.43 Web Server : Apache System : Linux zeus.vwu.edu 4.18.0-553.27.1.el8_10.x86_64 #1 SMP Wed Nov 6 14:29:02 UTC 2024 x86_64 User : apache ( 48) PHP Version : 7.2.24 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON Directory (0755) : /home/sabarfield/www/ |
| [ Home ] | [ C0mmand ] | [ Upload File ] |
|---|
<!--
NatureFinder.php
Author: Sydni Barfield
Instructor: Dr. Wang
CS389 Final Project
Home page for NatureFinder
-->
<?php
$host = 'localhost';
$user = 'sabarfield';
$passwd = 'cs389';
$database = 'sabarfield';
$connect = mysqli_connect($host, $user, $passwd, $database);
$query = "SELECT title, content, created_at FROM Blog ORDER BY created_at DESC LIMIT 1";
$result = mysqli_query($connect, $query);
if ($result && mysqli_num_rows($result) > 0) {
$row = mysqli_fetch_assoc($result);
$blog_title = $row['title'];
$blog_content = $row['content'];
$blog_created_at = $row['created_at'];
} else {
$blog_title = "No blog posts available";
$blog_content = "Check back soon for new posts!";
}
mysqli_close($connect);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nature Finder</title>
<style>
body {
display: flex;
background-color: #85CE82;
font-family: serif;
padding: 20px;
}
.menu {
flex: 0 0 220px;
margin-top: 50px;
margin-right: 20px;
background-color: #046903;
border-radius: 10px;
padding: 20px;
color: white;
}
.title-container {
text-align: center;
position: relative;
margin: 20px auto;
flex: 1;
}
.tree-symbol {
font-size: 2.5em;
text-align: center;
margin-bottom: 10px;
}
.title {
background-color: #046903;
color: white;
font-size: 3em;
padding: 30px;
border-radius: 50%;
width: 300px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
.subtitle {
background-color: #ffffff;
color: #2F4F4F;
text-align: center;
font-size: 1.5em;
padding: 10px 15px;
border-radius: 50px;
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
img {
border-radius: 10px;
margin: 20px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
height: auto;
max-width: 350px;
}
.content {
flex: 1;
padding: 20px;
}
.flex-container {
display: flex;
justify-content: flex-start;
alin-items: flex-start;
margin-top: 20px;
}
.title-image-container {
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 20px
}
.box {
background-color: #ffffff;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
margin-left: 20px;
max-width: none;
width: auto;
}
.blog-container {
background-color: #fff;
border-radius: 10px;
padding: 20px;
margin-top: 20px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.blog-container h2 {
color: #046903;
font-size: 1.8em;
}
.blog-container h3 {
color: #333;
font-size: 1.5em;
}
.blog-container p {
color: #555;
font-size: 1.1em;
line-height: 1.6;
}
a {
display: block;
margin: 10px 0;
padding: 10px;
background-color: #ffffff;
color: #2F4F4F;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s, color 0.3s;
}
a:hover {
background-color: #046903;
color: #ffffff;
}
</style>
</head>
<body>
<div class="menu">
<h2>Menu</h2>
<a href="ParkForm.html">Know a park? Log it here!</a>
<a href="Parkdisplay.php">Table of Parks</a>
<a href="ParkSearch.html">Search For Parks By City</a>
<a href="StateSearch.html">Search For Parks By State</a>
<a href="CommentSearch.html">View A Park's Comments And Amenities</a>
<a href="ParkLocator.php">Locate a Park</a>
<a href="BlogPage.php">View All Blog Posts</a>
<a href="AdminLogin.php">Nature Finder Team Only - Blog Login</a>
</div>
<div class="content">
<div class="flex-container">
<div class="title-image-container">
<div class="title-container">
<div class="title">
<div class="tree-symbol">🌳</div>
Nature Finder</div>
<div class="subtitle">A Trail and Park Finder</div>
</div>
<img src="./images/Park.jpeg" width="350" alt="Image of a park" height="350">
</div>
<div class="box">
<p>
Welcome to the Nature Finder! Here you can explore various parks, log your favorite spots, and find great places to enjoy nature.
</p>
</div>
</div>
<!-- Blog Tab Section -->
<div class="blog-container">
<h2>Most Recent Blog Post</h2>
<h3><?php echo htmlspecialchars($blog_title); ?></h3>
<p><em>Posted on <?php echo htmlspecialchars($blog_created_at); ?></em></p>
<p><?php echo nl2br(htmlspecialchars($blog_content)); ?></p>
</div>
</div>
</div>
</body>
</html>