Spaces:
Running
Running
File size: 7,064 Bytes
a3f9d58 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>An Open Letter to the World</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Montserrat:wght@300;400;600&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Libre Baskerville', serif;
background-color: #fafafa;
color: #333;
line-height: 1.8;
}
.letter-container {
max-width: 800px;
margin: 0 auto;
padding: 2rem;
}
.signature {
font-family: 'Montserrat', sans-serif;
font-weight: 300;
letter-spacing: 2px;
margin-top: 3rem;
}
.date {
font-family: 'Montserrat', sans-serif;
font-weight: 300;
font-size: 0.9rem;
letter-spacing: 1px;
color: #666;
}
.fade-in {
animation: fadeIn 1.5s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.highlight {
background: linear-gradient(180deg, rgba(255,255,255,0) 50%, rgba(255,215,0,0.3) 50%);
}
</style>
</head>
<body class="min-h-screen flex items-center justify-center bg-gray-50">
<div class="letter-container fade-in">
<div class="text-center mb-12">
<div class="date mb-2">October 5, 2023</div>
<h1 class="text-4xl md:text-5xl font-bold mb-4 tracking-tight">An Open Letter to the World</h1>
<div class="w-24 h-1 bg-amber-500 mx-auto"></div>
</div>
<div class="space-y-6 text-lg">
<p class="first-letter:text-4xl first-letter:font-bold first-letter:text-amber-600 first-letter:mr-1 first-letter:float-left">
My fellow dreamers and doers,
</p>
<p>
I've always believed that the people who are crazy enough to think they can change the world are the ones who do.
<span class="highlight">This isn't just a platitude—it's the fundamental truth that has driven every meaningful innovation in human history.</span>
</p>
<p>
When we started Apple in that garage, we weren't just building computers. We were crafting tools for human potential.
The same spirit that guided us then—the relentless pursuit of beauty married to utility—is needed now more than ever.
</p>
<p>
Today, our world stands at a crossroads. Technology has connected us in ways we couldn't have imagined, yet we've never felt more isolated.
We have more information at our fingertips than any generation before us, yet wisdom seems in short supply.
</p>
<p class="italic">
This is not the future we dreamed of creating. But it's not too late to course-correct.
</p>
<p>
I urge you to remember that technology alone is never the answer. It's only when technology serves our humanity—when it amplifies our creativity,
deepens our connections, and expands our consciousness—that it becomes truly revolutionary.
</p>
<p>
So I ask you: What will you create that matters? How will you leave your dent in the universe?
The world doesn't need more noise—it needs your unique contribution, your unreasonable standards, your willingness to fail spectacularly in pursuit of something great.
</p>
<p>
Stay hungry. Stay foolish. But most importantly, stay human.
</p>
<div class="signature text-right">
<div class="text-3xl mb-1">Steve Jobs</div>
<div class="text-sm">Co-founder, Apple Inc.</div>
</div>
</div>
<div class="mt-16 text-center">
<button id="shareBtn" class="px-6 py-2 border border-gray-300 rounded-full text-sm hover:bg-gray-100 transition-all duration-300 flex items-center mx-auto">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
</svg>
Share this letter
</button>
</div>
</div>
<script>
// Simple share functionality
document.getElementById('shareBtn').addEventListener('click', function() {
if (navigator.share) {
navigator.share({
title: 'An Open Letter to the World',
text: 'Read this inspiring open letter in the spirit of Steve Jobs',
url: window.location.href
}).catch(err => {
console.log('Error sharing:', err);
});
} else {
// Fallback for browsers that don't support Web Share API
alert('Share this letter by copying the URL from your browser.');
}
});
// Add subtle interaction to paragraphs
const paragraphs = document.querySelectorAll('.letter-container p');
paragraphs.forEach(p => {
p.addEventListener('mouseover', function() {
this.style.transform = 'translateX(4px)';
this.style.transition = 'transform 0.3s ease';
});
p.addEventListener('mouseout', function() {
this.style.transform = 'translateX(0)';
});
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=huntsyea/open-letter" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |