Add Star Trek: First Contact website with About and Characters pages
- Added routing with Home, About, and Characters pages - Included information about the 1996 movie - Added character profiles (Picard, Riker, Data, Borg Queen, Cochrane, Lily) - Styled with Star Trek-themed dark blue gradient - Responsive design with navigation menu Features: - Movie summary and plot - Historical context (April 5, 2063 first contact) - Character cards with actors and roles - Themes and significance of the film
This commit is contained in:
Claude Code
299
index.js
299
index.js
@@ -1,13 +1,304 @@
|
||||
const http = require('http');
|
||||
const url = require('url');
|
||||
|
||||
const PORT = process.env.PORT || 3000;
|
||||
|
||||
// Movie data
|
||||
const movieData = {
|
||||
title: "Star Trek: First Contact",
|
||||
year: 1996,
|
||||
tagline: "Resistance is futile",
|
||||
summary: "The Borg travel back in time to prevent Earth's first contact with an alien species. Captain Picard and his crew pursue them to ensure that Zefram Cochrane makes his maiden flight reaching warp speed.",
|
||||
characters: [
|
||||
{
|
||||
name: "Captain Jean-Luc Picard",
|
||||
actor: "Patrick Stewart",
|
||||
role: "Captain of the USS Enterprise-E, haunted by his past assimilation by the Borg"
|
||||
},
|
||||
{
|
||||
name: "Commander William Riker",
|
||||
actor: "Jonathan Frakes",
|
||||
role: "First Officer who leads the away team to help Zefram Cochrane"
|
||||
},
|
||||
{
|
||||
name: "Lt. Commander Data",
|
||||
actor: "Brent Spiner",
|
||||
role: "Android who is captured and tempted by the Borg Queen"
|
||||
},
|
||||
{
|
||||
name: "Borg Queen",
|
||||
actor: "Alice Krige",
|
||||
role: "Leader of the Borg Collective who attempts to seduce Data"
|
||||
},
|
||||
{
|
||||
name: "Zefram Cochrane",
|
||||
actor: "James Cromwell",
|
||||
role: "Inventor of warp drive who makes first contact with the Vulcans"
|
||||
},
|
||||
{
|
||||
name: "Lily Sloane",
|
||||
actor: "Alfre Woodard",
|
||||
role: "Cochrane's assistant who helps Picard confront his demons"
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// HTML Templates
|
||||
function renderHTML(title, content) {
|
||||
return `
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>${title} - Star Trek: First Contact</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 100%);
|
||||
color: #e0e0e0;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
}
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
background: rgba(26, 31, 58, 0.8);
|
||||
padding: 40px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
header {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
border-bottom: 2px solid #4a5568;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
h1 {
|
||||
color: #60a5fa;
|
||||
font-size: 3em;
|
||||
margin-bottom: 10px;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.tagline {
|
||||
font-style: italic;
|
||||
color: #9ca3af;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
nav {
|
||||
background: rgba(74, 85, 104, 0.3);
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
nav a {
|
||||
color: #60a5fa;
|
||||
text-decoration: none;
|
||||
padding: 10px 20px;
|
||||
margin: 0 10px;
|
||||
border-radius: 5px;
|
||||
transition: background 0.3s;
|
||||
display: inline-block;
|
||||
}
|
||||
nav a:hover {
|
||||
background: rgba(96, 165, 250, 0.2);
|
||||
}
|
||||
.content {
|
||||
line-height: 1.8;
|
||||
}
|
||||
.character-card {
|
||||
background: rgba(74, 85, 104, 0.2);
|
||||
padding: 20px;
|
||||
margin: 20px 0;
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid #60a5fa;
|
||||
}
|
||||
.character-card h3 {
|
||||
color: #60a5fa;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.character-card .actor {
|
||||
color: #9ca3af;
|
||||
font-style: italic;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.info-box {
|
||||
background: rgba(96, 165, 250, 0.1);
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
margin: 20px 0;
|
||||
border: 1px solid #60a5fa;
|
||||
}
|
||||
footer {
|
||||
text-align: center;
|
||||
margin-top: 40px;
|
||||
padding-top: 20px;
|
||||
border-top: 2px solid #4a5568;
|
||||
color: #9ca3af;
|
||||
}
|
||||
.emoji { font-size: 1.5em; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1><span class="emoji">🚀</span> ${movieData.title}</h1>
|
||||
<p class="tagline">"${movieData.tagline}"</p>
|
||||
</header>
|
||||
|
||||
<nav>
|
||||
<a href="/">Home</a>
|
||||
<a href="/about">About</a>
|
||||
<a href="/characters">Characters</a>
|
||||
</nav>
|
||||
|
||||
<div class="content">
|
||||
${content}
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p>Star Trek: First Contact © 1996 Paramount Pictures</p>
|
||||
<p>Deployed via Coolify | Auto-deployment enabled</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
}
|
||||
|
||||
function homePage() {
|
||||
return renderHTML('Home', `
|
||||
<div class="info-box">
|
||||
<h2><span class="emoji">🖖</span> Welcome to First Contact!</h2>
|
||||
<p style="margin-top: 15px;">
|
||||
This application is dedicated to one of the most beloved Star Trek films.
|
||||
Explore information about the movie, its characters, and the historic moment
|
||||
when humanity made first contact with extraterrestrial intelligence.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h2>Quick Facts</h2>
|
||||
<div class="character-card">
|
||||
<h3>Release Year: ${movieData.year}</h3>
|
||||
<p>The eighth film in the Star Trek film series and the second featuring the cast of The Next Generation.</p>
|
||||
</div>
|
||||
|
||||
<div class="character-card">
|
||||
<h3>Directed by: Jonathan Frakes</h3>
|
||||
<p>This was Frakes' feature film directorial debut, also starring as Commander Riker.</p>
|
||||
</div>
|
||||
|
||||
<h2 style="margin-top: 30px;">Navigation</h2>
|
||||
<p>Use the navigation menu above to explore:</p>
|
||||
<ul style="margin: 15px 0 0 40px;">
|
||||
<li><strong>About:</strong> Learn about the movie's plot and significance</li>
|
||||
<li><strong>Characters:</strong> Meet the crew and antagonists</li>
|
||||
</ul>
|
||||
`);
|
||||
}
|
||||
|
||||
function aboutPage() {
|
||||
return renderHTML('About', `
|
||||
<h2><span class="emoji">📽️</span> About the Movie</h2>
|
||||
|
||||
<div class="info-box">
|
||||
<h3>Plot Summary</h3>
|
||||
<p style="margin-top: 10px;">
|
||||
${movieData.summary}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h2 style="margin-top: 30px;">Historical Context</h2>
|
||||
<div class="character-card">
|
||||
<h3>April 5, 2063</h3>
|
||||
<p>
|
||||
The date of humanity's first contact with alien life in the Star Trek timeline.
|
||||
After successfully testing the Phoenix, Earth's first warp-capable ship, Zefram Cochrane
|
||||
attracts the attention of a passing Vulcan survey ship, forever changing human history.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="character-card">
|
||||
<h3>The Borg Threat</h3>
|
||||
<p>
|
||||
The Borg, a cybernetic collective consciousness, travel back in time to prevent this
|
||||
pivotal moment. Their goal: assimilate Earth before it can join the galactic community.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h2 style="margin-top: 30px;">Themes</h2>
|
||||
<div class="info-box">
|
||||
<ul style="margin-left: 20px; line-height: 2;">
|
||||
<li>Overcoming trauma and obsession</li>
|
||||
<li>Hope and the human spirit</li>
|
||||
<li>The importance of first impressions</li>
|
||||
<li>Technology and humanity's future</li>
|
||||
</ul>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
function charactersPage() {
|
||||
const characterCards = movieData.characters.map(char => `
|
||||
<div class="character-card">
|
||||
<h3><span class="emoji">👤</span> ${char.name}</h3>
|
||||
<p class="actor">Played by: ${char.actor}</p>
|
||||
<p>${char.role}</p>
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
return renderHTML('Characters', `
|
||||
<h2><span class="emoji">🎭</span> Main Characters</h2>
|
||||
<p style="margin-bottom: 20px;">
|
||||
Meet the heroes and villains of Star Trek: First Contact
|
||||
</p>
|
||||
${characterCards}
|
||||
`);
|
||||
}
|
||||
|
||||
function notFoundPage() {
|
||||
return renderHTML('404 Not Found', `
|
||||
<div class="info-box">
|
||||
<h2><span class="emoji">⚠️</span> Page Not Found</h2>
|
||||
<p style="margin-top: 15px;">
|
||||
The page you're looking for doesn't exist. Perhaps it was assimilated by the Borg?
|
||||
</p>
|
||||
<p style="margin-top: 10px;">
|
||||
<a href="/" style="color: #60a5fa;">Return to Home</a>
|
||||
</p>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
// Server
|
||||
const server = http.createServer((req, res) => {
|
||||
res.writeHead(200, { 'Content-Type': 'text/plain' });
|
||||
res.end('Hello World from First Contact! 🚀\n');
|
||||
const parsedUrl = url.parse(req.url, true);
|
||||
const pathname = parsedUrl.pathname;
|
||||
|
||||
let content;
|
||||
|
||||
switch(pathname) {
|
||||
case '/':
|
||||
content = homePage();
|
||||
break;
|
||||
case '/about':
|
||||
content = aboutPage();
|
||||
break;
|
||||
case '/characters':
|
||||
content = charactersPage();
|
||||
break;
|
||||
default:
|
||||
res.writeHead(404, { 'Content-Type': 'text/html' });
|
||||
content = notFoundPage();
|
||||
}
|
||||
|
||||
res.writeHead(res.statusCode || 200, { 'Content-Type': 'text/html' });
|
||||
res.end(content);
|
||||
});
|
||||
|
||||
server.listen(PORT, '0.0.0.0', () => {
|
||||
console.log(`Server running on port ${PORT}`);
|
||||
console.log(`First Contact application ready!`);
|
||||
console.log(`🚀 Star Trek: First Contact server running on port ${PORT}`);
|
||||
console.log(`🖖 Live long and prosper!`);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user