-
-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathtechnology.html
More file actions
196 lines (174 loc) · 7.63 KB
/
Copy pathtechnology.html
File metadata and controls
196 lines (174 loc) · 7.63 KB
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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AT&T Long Lines & Bell Labs - Technology</title>
<link rel="icon" href="img/favicon.ico" referrerpolicy="no-referrer">
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
background-color: #f9f9f9;
color: #333;
line-height: 1.7;
}
header {
background-color: #003366;
color: white;
text-align: center;
padding: 2em 0;
margin-bottom: 20px;
}
nav {
background-color: #007acc;
color: white;
padding: 0.7em 0;
text-align: center;
margin-bottom: 20px;
}
nav a {
color: white;
text-decoration: none;
padding: 0.7em 1.5em;
display: inline-block;
transition: background-color 0.3s ease;
}
nav a:hover {
background-color: #0056b3;
}
main {
padding: 30px;
max-width: 900px;
margin: 20px auto;
background-color: white;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
.section {
margin-bottom: 40px;
}
.section h2 {
color: #003366;
border-bottom: 3px solid #007acc;
padding-bottom: 0.7em;
margin-bottom: 0.8em;
}
footer {
text-align: center;
padding: 2em 0;
background-color: #003366;
color: white;
position: relative;
bottom: 0;
width: 100%;
}
/* Dropdown Button Styling */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: rgba(0, 122, 204, 0.9); /* Transparent version of nav color */
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
border-radius: 5px;
opacity: 0;
transform: translateY(-10px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: rgba(0, 86, 179, 0.7); /* Darker transparent hover */
}
.dropdown:hover .dropdown-content {
display: block;
opacity: 1;
transform: translateY(0);
}
.dark-mode {
background-color: #121212;
color: #e0e0e0;
}
.dark-mode header {
background-color: #1f1f1f;
}
.dark-mode nav a {
color: #e0e0e0;
}
.dark-mode main {
background-color: #1f1f1f;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}
</style>
<script>
function toggleDarkMode() {
document.body.classList.toggle('dark-mode');
}
</script>
</head>
<body>
<header>
<h1>AT&T Long Lines & Bell Labs</h1>
<p>A Closer Look at the Technology</p>
<button onclick="toggleDarkMode()">Toggle Dark Mode</button>
</header>
<nav>
<a href="index.html" referrerpolicy="no-referrer">Home</a> |
<div class="dropdown">
<a href="#" referrerpolicy="no-referrer">Tech & Inventions</a>
<div class="dropdown-content">
<a href="technology.html" referrerpolicy="no-referrer">Tech Overview</a>
<a href="transistor.html" rel="noreferrer" referrerpolicy="no-referrer">The Transistor</a>
<a href="optical-maser.html" rel="noreferrer" referrerpolicy="no-referrer">Lasers</a>
<a href="ccd.html" rel="noreferrer" referrerpolicy="no-referrer">Digital Imaging (CCDs)</a>
<a href="photovoltaic-cell.html" rel="noreferrer" referrerpolicy="no-referrer">Solar Power</a>
<a href="unix.html" rel="noreferrer" referrerpolicy="no-referrer">UNIX</a>
</div>
</div> |
<a href="gallery.html" referrerpolicy="no-referrer">Cool Pictures</a> |
<a href="#discord" referrerpolicy="no-referrer">Join the Community</a>
</nav>
<main>
<section id="long-lines-tech" class="section">
<h2>The Backbone: Long Lines Technology</h2>
<p>Now, the AT&T Long Lines network... that was a real marvel of engineering. It relied on some seriously cool tech to send those signals across vast distances. Key among them? Microwave radio relay systems. Can you imagine, focused beams of radio waves carrying tons of calls and data!</p>
<p>And of course, these systems needed those tall towers, with their specialized antennas and electronic equipment to transmit and receive everything. They also used clever digital signal processing to make sure everything came through crystal clear.</p>
</section>
<section id="bell-labs-innovations" class="section">
<h2>Bell Labs: The Innovation Factory</h2>
<p>Bell Labs wasn't just a lab; it was an amazing place with so many groundbreaking things that changed the world. Let's take a peek at some of their biggest hits:</p>
<ul>
<li><b>The Transistor:</b> Replaced those old vacuum tubes, making electronics smaller and way more efficient. <a href="transistor.html" rel="noreferrer">More on the Transistor</a></li>
<li><b>The UNIX Operating System:</b> A super influential OS that's still felt today. <a href="unix.html" rel="noreferrer">More on UNIX</a></li>
<li><b>The Optical Maser:</b> The precursor to the laser, it was a groundbreaking way to generate and amplify light. <a href="optical-maser.html" rel="noreferrer">More on Optical Masers</a></li>
<li><b>The Charge-Coupled Device (CCD):</b> This is what makes digital cameras and imaging possible! <a href="ccd.html" rel="noreferrer">More on CCDs</a></li>
<li><b>Photovoltaic Cells:</b> And of course, they invented the first working solar cell. <a href="photovoltaic-cell.html" rel="noreferrer">More on Solar Cells</a></li>
</ul>
</section>
<section id="modern-advancements" class="section">
<h2>The Legacy Today</h2>
<p>The impact of Long Lines and Bell Labs is still huge, even today. Fiber optic cables, which send data as light, are now the standard. And wireless tech keeps expanding, connecting even the most remote places. It all builds on that foundation.</p>
</section>
</main>
<footer>
<p><small>We frequently review our code to ensure we remain a privacy-first, tracker-free site.</small></p>
<p>© <span id="year"></span> AT&T Long Lines & Bell Labs Community. <small>Site by juler#5461. All rights reserved.</small></p>
</footer>
<script>
document.addEventListener('DOMContentLoaded', () => {
const currentYear = new Date().getFullYear();
document.querySelector('#year').textContent = currentYear;
});
</script>
</body>
</html>