mirror of
https://github.com/kennethreitz/elonpoetrytracker.git
synced 2026-06-20 14:40:59 +00:00
383 lines
12 KiB
HTML
383 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>SpaceX Poetry Tracker | ACCELERATE</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/tufte.min.css">
|
|
|
|
<style>
|
|
/* Enhanced dark mode base styles */
|
|
body {
|
|
background-color: #0a0a0a;
|
|
color: #e1e1e1;
|
|
background-image:
|
|
radial-gradient(circle at 10% 20%, rgba(0, 136, 255, 0.03) 0%, transparent 20%),
|
|
radial-gradient(circle at 90% 80%, rgba(255, 65, 54, 0.03) 0%, transparent 20%);
|
|
min-height: 100vh;
|
|
margin: 0;
|
|
}
|
|
|
|
@keyframes gradientShift {
|
|
0% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
100% { background-position: 0% 50%; }
|
|
}
|
|
|
|
article {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 2rem;
|
|
position: relative;
|
|
}
|
|
|
|
/* Floating particles effect */
|
|
@keyframes float {
|
|
0% { transform: translateY(0px) rotate(0deg); }
|
|
50% { transform: translateY(-20px) rotate(180deg); }
|
|
100% { transform: translateY(0px) rotate(360deg); }
|
|
}
|
|
|
|
.particle {
|
|
position: fixed;
|
|
width: 3px;
|
|
height: 3px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Enhanced header styles */
|
|
h1 {
|
|
color: #ffffff;
|
|
font-size: 2.5em;
|
|
margin-bottom: 0.2em;
|
|
background: linear-gradient(120deg, #ffffff, #0088ff);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
animation: gradientShift 8s ease infinite;
|
|
background-size: 200% 200%;
|
|
}
|
|
|
|
.subtitle {
|
|
color: #a0a0a0;
|
|
font-style: italic;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
/* Enhanced animations */
|
|
@keyframes pulseGlow {
|
|
0% { box-shadow: 0 0 5px rgba(255, 65, 54, 0.5); }
|
|
50% { box-shadow: 0 0 20px rgba(255, 65, 54, 0.8); }
|
|
100% { box-shadow: 0 0 5px rgba(255, 65, 54, 0.5); }
|
|
}
|
|
|
|
@keyframes fadeSlideIn {
|
|
from {
|
|
transform: translateY(20px);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Enhanced status indicator */
|
|
.status-indicator {
|
|
display: inline-block;
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
background-color: #ff4136;
|
|
margin-right: 8px;
|
|
animation: pulseGlow 2s infinite;
|
|
}
|
|
|
|
/* Enhanced tracking status */
|
|
.tracking-status {
|
|
font-family: "Gill Sans", sans-serif;
|
|
background: linear-gradient(145deg, #1a1a1a, #151515);
|
|
padding: 1.5rem;
|
|
margin: 1rem 0;
|
|
border-left: 3px solid #ff4136;
|
|
animation: fadeSlideIn 0.5s ease-out;
|
|
border-radius: 4px;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.tracking-status:hover {
|
|
transform: translateX(5px);
|
|
}
|
|
|
|
/* Enhanced poem section */
|
|
.poem {
|
|
font-family: "Gill Sans", sans-serif;
|
|
line-height: 1.6;
|
|
margin: 2rem 0;
|
|
padding: 2rem;
|
|
border-left: 2px solid #0088ff;
|
|
background: linear-gradient(to right, rgba(0, 136, 255, 0.1), transparent);
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.poem:hover {
|
|
transform: scale(1.01);
|
|
background: linear-gradient(to right, rgba(0, 136, 255, 0.15), transparent);
|
|
}
|
|
|
|
.poem::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.03));
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Enhanced metric cards */
|
|
.metrics {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 1rem;
|
|
margin: 2rem 0;
|
|
}
|
|
|
|
.metric-card {
|
|
background: linear-gradient(145deg, #1a1a1a, #151515);
|
|
padding: 1.5rem;
|
|
border-radius: 8px;
|
|
border: 1px solid #333;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.metric-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.metric-card h4 {
|
|
color: #0088ff;
|
|
margin-top: 0;
|
|
position: relative;
|
|
}
|
|
|
|
.metric-card h4::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -5px;
|
|
left: 0;
|
|
width: 50px;
|
|
height: 2px;
|
|
background: #0088ff;
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.metric-card:hover h4::after {
|
|
width: 100px;
|
|
}
|
|
|
|
/* Enhanced activity feed */
|
|
.activity-feed li {
|
|
transition: all 0.3s ease;
|
|
padding: 0.8rem 1.5rem;
|
|
margin-bottom: 0.8rem;
|
|
background: linear-gradient(145deg, #1a1a1a, #151515);
|
|
border-radius: 4px;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.activity-feed li:hover {
|
|
border-color: #0088ff;
|
|
transform: translateX(10px);
|
|
}
|
|
|
|
.activity-feed li::before {
|
|
content: "→";
|
|
color: #0088ff;
|
|
position: absolute;
|
|
left: 0.5rem;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.activity-feed li:hover::before {
|
|
transform: translateX(5px);
|
|
}
|
|
|
|
/* Contact section enhancements */
|
|
.contact-info {
|
|
background: linear-gradient(145deg, #1a1a1a, #151515);
|
|
padding: 2rem;
|
|
border-radius: 8px;
|
|
margin-top: 2rem;
|
|
border: 1px solid #333;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.contact-info:hover {
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* Additional interactive elements */
|
|
a {
|
|
color: #0088ff;
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
}
|
|
|
|
a:hover {
|
|
color: #66b3ff;
|
|
}
|
|
|
|
a::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -2px;
|
|
left: 0;
|
|
width: 0;
|
|
height: 1px;
|
|
background: #0088ff;
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
a:hover::after {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Scrollbar styling */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
background: #0a0a0a;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #333;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #444;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Add floating particles -->
|
|
<script>
|
|
function createParticles() {
|
|
for(let i = 0; i < 50; i++) {
|
|
const particle = document.createElement('div');
|
|
particle.className = 'particle';
|
|
particle.style.left = Math.random() * 100 + 'vw';
|
|
particle.style.top = Math.random() * 100 + 'vh';
|
|
particle.style.animation = `float ${5 + Math.random() * 10}s infinite`;
|
|
document.body.appendChild(particle);
|
|
}
|
|
}
|
|
document.addEventListener('DOMContentLoaded', createParticles);
|
|
</script>
|
|
|
|
<article>
|
|
<h1>SpaceX Poetry Tracking Initiative</h1>
|
|
<p class="subtitle">Monitoring the journey of "ACCELERATE" to Mars via Elon Musk's reading list</p>
|
|
|
|
<section class="tracking-status">
|
|
<h2><span class="status-indicator"></span>Current Status</h2>
|
|
<p>Location: Austin, TX (Tesla HQ)</p>
|
|
<p>Reading Status: Pending Executive Review</p>
|
|
<p>Time Since Submission: 3 days, 14 hours</p>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>The Poem</h2>
|
|
<div class="poem">
|
|
<h3>ACCELERATE</h3>
|
|
<p>Such are the days of new<br>
|
|
When Humanity's view grew<br>
|
|
Intelligence is not on the horizon<br>
|
|
But here, by the grace of<br>
|
|
Fantastical cheer<br>
|
|
Brazen, we blaze through fear<br>
|
|
Accelerate to the moon<br>
|
|
AND BEYOND!<br>
|
|
Mars really isn't so far<br>
|
|
Dream, for sleep will cease<br>
|
|
Until curiosity's demands<br>
|
|
Tremble, at peace</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="metrics">
|
|
<div class="metric-card">
|
|
<h4>Engagement Metrics</h4>
|
|
<ul>
|
|
<li>Social Media Shares: 42</li>
|
|
<li>SpaceX Employee Views: 7</li>
|
|
<li>Poetry Reading Progress: 0%</li>
|
|
</ul>
|
|
</div>
|
|
<div class="metric-card">
|
|
<h4>Timeline</h4>
|
|
<ul>
|
|
<li>Submitted: October 20, 2024</li>
|
|
<li>Initial Review: Pending</li>
|
|
<li>Executive Reading: Scheduled</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Recent Activity</h2>
|
|
<ul class="activity-feed">
|
|
<li>Poem added to SpaceX communications queue</li>
|
|
<li>Poetry initiative documented for Mars cultural archive</li>
|
|
<li>Shared with SpaceX Media Communications Team</li>
|
|
<li>Pending review by creative development team</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Context</h2>
|
|
<p>This initiative began as a tribute to SpaceX's innovative rocket recovery system. The poem "ACCELERATE" captures the spirit of technological advancement and human exploration that SpaceX embodies. It represents an effort to bridge the gap between technical achievement and artistic expression, potentially establishing a new tradition of commemorating space exploration milestones through poetry.</p>
|
|
</section>
|
|
|
|
<section class="contact-info">
|
|
<h2>Contact Information</h2>
|
|
<p>Sarah Reitz<br>
|
|
Poetry for Mars Initiative<br>
|
|
Phone: (540)-398-6411</p>
|
|
<p class="footnote">This tracking page serves as a creative way to monitor the poem's journey through SpaceX's communications channels. All tracking metrics are artistic interpretations and do not represent actual internal SpaceX processes.</p>
|
|
</section>
|
|
</article>
|
|
|
|
<hr/>
|
|
|
|
<p>
|
|
<a href="https://github.com/kennethreitz/elonpoetrytracker">Open source</a>.
|
|
</p>
|
|
|
|
<script type="text/javascript">
|
|
var _gauges = _gauges || [];
|
|
(function() {
|
|
var t = document.createElement('script');
|
|
t.type = 'text/javascript';
|
|
t.async = true;
|
|
t.id = 'gauges-tracker';
|
|
t.setAttribute('data-site-id', '67190c9b9a274b710799eb87');
|
|
t.setAttribute('data-track-path', 'https://track.gaug.es/track.gif');
|
|
t.src = 'https://d2fuc4clr7gvcn.cloudfront.net/track.js';
|
|
var s = document.getElementsByTagName('script')[0];
|
|
s.parentNode.insertBefore(t, s);
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|