# Combined Trending Keywords Analyzer Website (HTML + CSS + Java)
Here's the complete combined implementation of your trending keywords analyzer
website using only HTML, CSS, and Java (with Servlets).
## Complete Code Implementation
### 1. index.html (Homepage)
```html
<!DOCTYPE html>
<html>
<head>
<title>Trending Keywords Analyzer</title>
<meta http-equiv="refresh" content="300">
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
color: #333;
background-color: #f5f5f5;
}
header {
background-color: #2c3e50;
color: white;
padding: 1rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.8rem;
font-weight: bold;
}
nav ul {
list-style: none;
display: flex;
gap: 1.5rem;
}
nav a {
color: white;
text-decoration: none;
font-weight: 500;
}
nav a:hover {
text-decoration: underline;
}
main {
padding: 2rem;
max-width: 1200px;
margin: 0 auto;
}
footer {
background-color: #2c3e50;
color: white;
text-align: center;
padding: 1rem;
margin-top: 2rem;
}
.hero {
text-align: center;
padding: 3rem 0;
margin-bottom: 2rem;
}
.hero h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
color: #2c3e50;
}
.hero p {
font-size: 1.2rem;
color: #7f8c8d;
}
.trending-section {
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 2rem;
margin-bottom: 2rem;
}
.trending-section h2 {
margin-top: 0;
color: #2c3e50;
border-bottom: 2px solid #ecf0f1;
padding-bottom: 0.5rem;
}
.platform-tabs {
display: flex;
margin-bottom: 1rem;
border-bottom: 1px solid #ddd;
}
.tab-button {
padding: 0.5rem 1.5rem;
background: none;
border: none;
cursor: pointer;
font-size: 1rem;
color: #7f8c8d;
border-bottom: 3px solid transparent;
}
.tab-button.active {
color: #3498db;
border-bottom: 3px solid #3498db;
font-weight: bold;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 1rem;
}
th, td {
padding: 0.75rem;
text-align: left;
border-bottom: 1px solid #ecf0f1;
}
th {
background-color: #f8f9fa;
font-weight: 600;
}
tr:hover {
background-color: #f8f9fa;
}
.positive {
color: #27ae60;
}
.negative {
color: #e74c3c;
}
</style>
</head>
<body>
<header>
<div class="logo">TrendAnalyzer</div>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="search.html">Search</a></li>
<li><a href="login.html">Login</a></li>
</ul>
</nav>
</header>
<main>
<section class="hero">
<h1>Discover What's Trending Now</h1>
<p>Real-time analysis of trending keywords across YouTube and
TikTok</p>
</section>
<section class="trending-section">
<h2>Currently Trending</h2>
<div class="platform-tabs">
<button class="tab-button active"
onclick="openTab('youtube')">YouTube</button>
<button class="tab-button"
onclick="openTab('tiktok')">TikTok</button>
</div>
<div id="youtube" class="tab-content active">
<table>
<tr>
<th>Rank</th>
<th>Keyword</th>
<th>Trend Score</th>
<th>24h Change</th>
</tr>
<tr>
<td>1</td>
<td><a href="analytics.html?keyword=Tech+Review">Tech
Review</a></td>
<td>95</td>
<td class="positive">+12%</td>
</tr>
<tr>
<td>2</td>
<td><a href="analytics.html?keyword=Gaming">Gaming</a></td>
<td>88</td>
<td class="positive">+8%</td>
</tr>
<tr>
<td>3</td>
<td><a href="analytics.html?
keyword=Cooking+Tutorial">Cooking Tutorial</a></td>
<td>82</td>
<td class="negative">-5%</td>
</tr>
</table>
</div>
<div id="tiktok" class="tab-content">
<table>
<tr>
<th>Rank</th>
<th>Hashtag</th>
<th>Videos</th>
<th>Trend Score</th>
</tr>
<tr>
<td>1</td>
<td><a href="analytics.html?keyword=
%23DanceChallenge">#DanceChallenge</a></td>
<td>1.2M</td>
<td>92</td>
</tr>
<tr>
<td>2</td>
<td><a href="analytics.html?keyword=
%23LifeHacks">#LifeHacks</a></td>
<td>850K</td>
<td>87</td>
</tr>
</table>
</div>
</section>
</main>
<footer>
<p>© 2023 TrendAnalyzer. All rights reserved.</p>
</footer>
<script>
function openTab(tabName) {
// Hide all tab content
const tabContents = document.getElementsByClassName('tab-content');
for (let i = 0; i < tabContents.length; i++) {
tabContents[i].style.display = 'none';
}
// Remove active class from all buttons
const tabButtons = document.getElementsByClassName('tab-button');
for (let i = 0; i < tabButtons.length; i++) {
tabButtons[i].classList.remove('active');
}
// Show the current tab and mark button as active
document.getElementById(tabName).style.display = 'block';
event.currentTarget.classList.add('active');
}
</script>
</body>
</html>
```
### 2. search.html
```html
<!DOCTYPE html>
<html>
<head>
<title>Search Trends</title>
<style>
/* All the styles from index.html plus these additions */
.search-section {
text-align: center;
margin-bottom: 2rem;
}
.search-section form {
display: flex;
gap: 0.5rem;
max-width: 600px;
margin: 0 auto;
}
.search-section input[type="text"] {
flex: 1;
padding: 0.75rem;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 1rem;
}
.search-section select {
padding: 0.75rem;
border: 1px solid #ddd;
border-radius: 4px;
background-color: white;
}
.search-section button {
padding: 0.75rem 1.5rem;
background-color: #3498db;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
}
.search-section button:hover {
background-color: #2980b9;
}
.results-section {
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 2rem;
}
.result-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1.5rem;
margin-top: 1.5rem;
}
.result-card {
border: 1px solid #ecf0f1;
border-radius: 6px;
padding: 1.5rem;
transition: transform 0.2s, box-shadow 0.2s;
}
.result-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.result-card h3 {
margin-top: 0;
color: #2c3e50;
}
.details-link {
display: inline-block;
margin-top: 1rem;
color: #3498db;
text-decoration: none;
font-weight: 500;
}
.details-link:hover {
text-decoration: underline;
}
.error {
color: #e74c3c;
background-color: #fadbd8;
padding: 1rem;
border-radius: 4px;
margin: 1rem 0;
}
</style>
</head>
<body>
<header>
<div class="logo">TrendAnalyzer</div>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="search.html">Search</a></li>
<li><a href="login.html">Login</a></li>
</ul>
</nav>
</header>
<main>
<section class="search-section">
<h1>Search for Keyword Trends</h1>
<form action="SearchServlet" method="get">
<input type="text" name="query" placeholder="Enter a keyword or
hashtag..." required>
<select name="platform">
<option value="all">All Platforms</option>
<option value="youtube">YouTube</option>
<option value="tiktok">TikTok</option>
</select>
<button type="submit">Analyze</button>
</form>
</section>
<section class="results-section">
<h2>Search Results for "Tech"</h2>
<div class="result-cards">
<div class="result-card">
<h3>Tech Review</h3>
<p>Platform: YouTube</p>
<p>Current Rank: 1</p>
<p>Trend Score: 95</p>
<a href="analytics.html?keyword=Tech+Review" class="details-
link">View Details</a>
</div>
<div class="result-card">
<h3>Tech News</h3>
<p>Platform: YouTube</p>
<p>Current Rank: 5</p>
<p>Trend Score: 78</p>
<a href="analytics.html?keyword=Tech+News" class="details-
link">View Details</a>
</div>
</div>
</section>
</main>
<footer>
<p>© 2023 TrendAnalyzer. All rights reserved.</p>
</footer>
</body>
</html>
```
### 3. analytics.html
```html
<!DOCTYPE html>
<html>
<head>
<title>Keyword Analytics</title>
<style>
/* All previous styles plus these additions */
.analytics-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
margin-bottom: 2rem;
}
.metric-card {
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 1.5rem;
text-align: center;
}
.metric-value {
font-size: 2rem;
font-weight: bold;
margin: 0.5rem 0;
color: #2c3e50;
}
.metric-change {
font-size: 0.9rem;
}
.platform-list {
list-style: none;
padding: 0;
margin: 0.5rem 0 0;
}
.platform-list li {
padding: 0.25rem 0;
}
.trend-chart {
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 1.5rem;
margin-bottom: 2rem;
}
.chart-container {
height: 400px;
margin-top: 1rem;
background-color: #f8f9fa;
display: flex;
align-items: center;
justify-content: center;
}
.related-terms {
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 1.5rem;
}
.related-terms-list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 1rem;
}
.related-term {
display: inline-block;
padding: 0.5rem 1rem;
background-color: #ecf0f1;
border-radius: 20px;
color: #2c3e50;
text-decoration: none;
font-size: 0.9rem;
}
.related-term:hover {
background-color: #3498db;
color: white;
}
</style>
</head>
<body>
<header>
<div class="logo">TrendAnalyzer</div>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="search.html">Search</a></li>
<li><a href="login.html">Login</a></li>
</ul>
</nav>
</header>
<main>
<section class="analytics-section">
<h1>Analytics for "Tech Review"</h1>
<div class="analytics-grid">
<div class="metric-card">
<h3>Current Trend Score</h3>
<p class="metric-value">95</p>
<p class="metric-change positive">+12% from yesterday</p>
</div>
<div class="metric-card">
<h3>Appears On</h3>
<p class="metric-value">2 platforms</p>
<ul class="platform-list">
<li>YouTube</li>
<li>TikTok</li>
</ul>
</div>
<div class="metric-card">
<h3>Peak Popularity</h3>
<p class="metric-value">98</p>
<p class="metric-date">on 2023-05-10</p>
</div>
</div>
<div class="trend-chart">
<h3>Popularity Over Time</h3>
<div class="chart-container">
<!-- This would be replaced with actual chart rendering -->
<p>Trend chart for "Tech Review" would appear here</p>
</div>
</div>
<div class="related-terms">
<h3>Related Keywords</h3>
<div class="related-terms-list">
<a href="analytics.html?keyword=Tech+Review+tutorial"
class="related-term">Tech Review tutorial</a>
<a href="analytics.html?keyword=best+Tech+Review"
class="related-term">best Tech Review</a>
<a href="analytics.html?keyword=Tech+Review+2023"
class="related-term">Tech Review 2023</a>
</div>
</div>
</section>
</main>
<footer>
<p>© 2023 TrendAnalyzer. All rights reserved.</p>
</footer>
</body>
</html>
```
### 4. HomeServlet.java
```java
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
import java.util.*;
public class HomeServlet extends HttpServlet {
// Mock data service
private List<Map<String, Object>> getYouTubeTrends() {
List<Map<String, Object>> trends = new ArrayList<>();
Map<String, Object> trend1 = new HashMap<>();
trend1.put("rank", 1);
trend1.put("keyword", "Tech Review");
trend1.put("score", 95);
trend1.put("change", 12);
trends.add(trend1);
Map<String, Object> trend2 = new HashMap<>();
trend2.put("rank", 2);
trend2.put("keyword", "Gaming");
trend2.put("score", 88);
trend2.put("change", 8);
trends.add(trend2);
return trends;
}
private List<Map<String, Object>> getTikTokTrends() {
List<Map<String, Object>> trends = new ArrayList<>();
Map<String, Object> trend1 = new HashMap<>();
trend1.put("rank", 1);
trend1.put("keyword", "#DanceChallenge");
trend1.put("videoCount", "1.2M");
trend1.put("score", 92);
trends.add(trend1);
return trends;
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// Add trends to request attributes
request.setAttribute("youtubeTrends", getYouTubeTrends());
request.setAttribute("tiktokTrends", getTikTokTrends());
// Forward to JSP page
RequestDispatcher dispatcher = request.getRequestDispatcher("index.jsp");
dispatcher.forward(request, response);
}
}
```
### 5. SearchServlet.java
```java
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
import java.util.*;
public class SearchServlet extends HttpServlet {
// Mock search service
private List<Map<String, Object>> searchTrends(String query, String platform) {
List<Map<String, Object>> results = new ArrayList<>();
if (query.toLowerCase().contains("tech")) {
Map<String, Object> result1 = new HashMap<>();
result1.put("keyword", "Tech Review");
result1.put("platform", "YouTube");
result1.put("rank", 1);
result1.put("score", 95);
results.add(result1);
Map<String, Object> result2 = new HashMap<>();
result2.put("keyword", "Tech News");
result2.put("platform", "YouTube");
result2.put("rank", 5);
result2.put("score", 78);
results.add(result2);
}
return results;
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String query = request.getParameter("query");
String platform = request.getParameter("platform");
if (query == null || query.trim().isEmpty()) {
request.setAttribute("error", "Please enter a search term");
} else {
request.setAttribute("results", searchTrends(query, platform));
request.setAttribute("query", query);
}
RequestDispatcher dispatcher = request.getRequestDispatcher("search.jsp");
dispatcher.forward(request, response);
}
}
```
### 6. AnalyticsServlet.java
```java
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
import java.util.*;
public class AnalyticsServlet extends HttpServlet {
// Mock analytics service
private Map<String, Object> getKeywordAnalytics(String keyword) {
Map<String, Object> analytics = new HashMap<>();
analytics.put("currentScore", 95);
analytics.put("scoreChange", 12);
List<String> platforms = new ArrayList<>();
platforms.add("YouTube");
platforms.add("TikTok");
analytics.put("platforms", platforms);
analytics.put("peakScore", 98);
analytics.put("peakDate", "2023-05-10");
return analytics;
}
private List<String> getRelatedTerms(String keyword) {
List<String> terms = new ArrayList<>();
terms.add(keyword + " tutorial");
terms.add("best " + keyword);
terms.add(keyword + " 2023");
return terms;
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String keyword = request.getParameter("keyword");
if (keyword == null || keyword.trim().isEmpty()) {
response.sendRedirect("search.html");
return;
}
request.setAttribute("keyword", keyword);
request.setAttribute("analytics", getKeywordAnalytics(keyword));
request.setAttribute("relatedTerms", getRelatedTerms(keyword));
RequestDispatcher dispatcher =
request.getRequestDispatcher("analytics.jsp");
dispatcher.forward(request, response);
}
}
```
### 7. web.xml
```xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0">
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>HomeServlet</servlet-name>
<servlet-class>HomeServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>HomeServlet</servlet-name>
<url-pattern>/HomeServlet</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>SearchServlet</servlet-name>
<servlet-class>SearchServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>SearchServlet</servlet-name>
<url-pattern>/SearchServlet</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>AnalyticsServlet</servlet-name>
<servlet-class>AnalyticsServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AnalyticsServlet</servlet-name>
<url-pattern>/AnalyticsServlet</url-pattern>
</servlet-mapping>
</web-app>
```
## Project Structure
```
/TrendingKeywordsAnalyzer
│
├── index.html
├── search.html
├── analytics.html
├── login.html
├── WEB-INF/
│ └── web.xml
│ └── classes/
│ ├── HomeServlet.class
│ ├── SearchServlet.class
│ └── AnalyticsServlet.class
└── css/
└── styles.css
```
## How to Deploy
1. **Compile the Java servlets**:
```
javac -cp "path/to/servlet-api.jar" HomeServlet.java SearchServlet.java
AnalyticsServlet.java
```
2. **Create the WAR file structure** as shown above
3. **Package into a WAR file**:
```
jar -cvf TrendingKeywordsAnalyzer.war *
```
4. **Deploy to your servlet container** (Tomcat, Jetty, etc.)
5. **Access the application** at:
```
http://localhost:8080/TrendingKeywordsAnalyzer/
```
This complete implementation provides a functional trending keywords analyzer
website using only HTML, CSS, and Java (with Servlets). The frontend is clean and
responsive, while the backend handles all the data processing and business logic.
The mock data services can be replaced with real API calls or database connections
as needed.
