relay-programming/index.html at main · rickdeazer/relay-programming · GitHub

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
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="google-site-verification" content="b2nzOrEjNsHuPHb2r23ZBrda2DaAwJlK7Mj48xuDfWQ" />
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Relay Programming - Unlock Your Critical Mind</title>
    <style>
        /* Reset & Base Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            background-color: #0a0a0a;
            color: #ffffff;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        /* Navigation Bar */
        nav {
            position: fixed;
            top: 0;
            width: 100%;
            background: rgba(0, 0, 0, 0.85);
            padding: 15px 0;
            text-align: center;
            z-index: 1000;
            box-shadow: 0 4px 12px rgba(0, 255, 255, 0.2);
        }

        .slogan {
            font-size: 10px;
            font-weight: bold;
            color: #00ffff;
            letter-spacing: 2px;
            text-shadow: 0 0 8px #00ffff;
            margin-bottom: 8px;
        }

        nav button {
            background: none;
            border: none;
            color: #00ffff;
            font-size: 18px;
            margin: 0 20px;
            padding: 10px;
            cursor: pointer;
            transition: color 0.3s;
            position: relative;
        }

        nav button::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: #00ffff;
            transition: width 0.3s;
        }

        nav button:hover::after,
        nav button.active::after {
            width: 100%;
        }

        nav button:hover,
        nav button.active {
            color: #ffffff;
        }

        /* Mobile Nav Adjustments */
        @media (max-width: 768px) {
            .slogan {
                font-size: 8px;
                margin-bottom: 6px;
            }
            nav button {
                font-size: 16px;
                margin: 0 10px;
            }
        }

        @media (max-width: 480px) {
            .slogan {
                font-size: 7px;
            }
        }

        /* Sections */
        section {
            min-height: 100vh;
            padding: 120px 20px 80px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.9));
            z-index: -1;
        }

        /* Wave Background */
        .wave-bg {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 200%;
            height: 120px;
            background: linear-gradient(90deg, #00eeee 0%, #00cccc 50%, #00eeee 100%);
            opacity: 0.3;
            animation: wave 15s linear infinite;
            z-index: -1;
        }

        @keyframes wave {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        /* Background Images */
        #home { background: url('https://source.unsplash.com/random/1920x1080/?circuit,neon') no-repeat center/cover; }
        #about { background: url('https://source.unsplash.com/random/1920x1080/?brain,intelligence') no-repeat center/cover; }
        #floods { background: url('https://source.unsplash.com/random/1920x1080/?wave,ocean,blue') no-repeat center/cover; }
        #enroll { background: url('https://source.unsplash.com/random/1920x1080/?future,tech,cyber') no-repeat center/cover; }
        #contact { background: url('https://source.unsplash.com/random/1920x1080/?network,connect') no-repeat center/cover; }

        h1, h2 {
            font-size: 48px;
            margin-bottom: 20px;
            text-shadow: 0 0 15px #00ffff;
            animation: glow 2s infinite alternate;
        }

        @keyframes glow {
            from { text-shadow: 0 0 8px #00ffff; }
            to { text-shadow: 0 0 25px #00ffff, 0 0 35px #00ffff; }
        }

        p {
            font-size: 20px;
            line-height: 1.6;
            max-width: 800px;
            margin: 20px auto;
        }

        .cta-button {
            background: #00ffff;
            color: #000000;
            padding: 16px 36px;
            font-size: 20px;
            font-weight: bold;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 6px 15px rgba(0, 255, 255, 0.4);
        }

        .cta-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 0 25px #00ffff;
        }

        /* Floods Section */
        .flood-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 30px;
            max-width: 1400px;
            width: 100%;
            margin: 40px auto;
            padding: 0 20px;
        }

        .flood-card {
            background: rgba(0, 0, 0, 0.7);
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
            transition: transform 0.4s;
        }

        .flood-card:hover {
            transform: translateY(-10px);
        }

        .flood-card h3 {
            color: #00ffff;
            font-size: 26px;
            margin-bottom: 20px;
        }

        .flood-card ul {
            list-style: none;
            text-align: left;
        }

        .flood-card li {
            margin: 15px 0;
            padding-left: 15px;
            position: relative;
        }

        .flood-card li::before {
            content: "▸";
            color: #00ffff;
            position: absolute;
            left: 0;
        }

        /* Read More Styles */
        .read-more-content {
            display: none;
            margin-top: 20px;
            text-align: left;
        }

        .read-more-btn {
            background: none;
            border: none;
            color: #00ffff;
            font-size: 18px;
            cursor: pointer;
            margin-top: 15px;
            text-decoration: underline;
        }

        .read-more-btn:hover {
            color: #ffffff;
        }

        /* Mobile Responsiveness */
        @media (max-width: 1024px) {
            h1, h2 { font-size: 42px; }
            p { font-size: 18px; }
            .cta-button { padding: 14px 30px; font-size: 18px; }
        }

        @media (max-width: 768px) {
            h1, h2 { font-size: 36px; }
            p { font-size: 17px; max-width: 95%; }
            .cta-button { padding: 14px 28px; font-size: 18px; }

            .flood-list {
                grid-template-columns: 1fr;
                gap: 25px;
                padding: 0 15px;
            }

            .flood-card {
                padding: 25px;
            }

            .flood-card h3 {
                font-size: 24px;
            }
        }

        @media (max-width: 480px) {
            nav button {
                font-size: 14px;
                margin: 0 8px;
                padding: 8px;
            }

            h1, h2 { font-size: 32px; }
            section { padding: 100px 15px 80px; }
        }
    </style>
</head>
<body>
    <nav>
        <div class="slogan">PITY NOT YOUR FIVE</div>
        <button onclick="scrollToSection('home')">Home</button>
        <button onclick="scrollToSection('about')">About</button>
        <button onclick="scrollToSection('floods')">Floods</button>
        <button onclick="scrollToSection('enroll')">Enroll</button>
        <button onclick="scrollToSection('contact')">Contact</button>
    </nav>

    <!-- Everything else remains exactly the same as you provided -->
    <section id="home">
        <div class="wave-bg"></div>
        <h1>Welcome to Relay Programming</h1>
        <p>Discover the revolutionary way to program electronic circuits using just a pen and paper – no integrated circuits needed!</p>
        <p>Founded by Rick Deazer, CEO of The Relay Programming Company. Master critical thinking and unlock high intelligence.</p>
        <button class="cta-button" onclick="scrollToSection('enroll')">Start Your Journey Today!</button>
    </section>

    <section id="about">
        <div class="wave-bg"></div>
        <h2>About Relay Programming</h2>
        <p>Rick Deazer pioneered this unique method that teaches students to think deeply and critically through hand-drawn relay logic circuits.</p>
        <p>Progress through 7 powerful Floods, each containing 3 transformative Waves – from beginner to expert mastery.</p>
        <button class="cta-button" onclick="scrollToSection('floods')">Explore the 7 Floods</button>
    </section>

    <section id="floods">
        <div class="wave-bg"></div>
        <h2>The 7 Floods of Mastery</h2>
        <p>Each Flood builds your skills progressively with 3 Waves of deep learning and practical challenges.</p>
        <div class="flood-list">
            <div class="flood-card">
                <h3>Flood 1: Relay Programming</h3>
                <ul>
                    <li>Wave 1: Electrical Components and their symbols</li>
                    <li>Wave 2: Working of Electrical Components</li>
                    <li>Wave 3: The Relationship between the components and a relay. Types of relays and how they work</li>
                </ul>
                <button class="read-more-btn" onclick="this.nextElementSibling.style.display = (this.nextElementSibling.style.display === 'block') ? 'none' : 'block'; this.innerText = (this.innerText === 'Read More') ? 'Read Less' : 'Read More';">Read More</button>
                <div class="read-more-content">
                    <p><strong>Wave 1 Details:</strong> Battery, Switch and Button, Bulb and LED's, Connecting cables, Capacitors, Diodes, Resistors, Electromagnetic Relay, Transformers</p>
                    <p><strong>Wave 2 Details:</strong> Determine how the above electrical components function, and be able to draw simple electronic circuits using these components (no ICs).</p>
                    <p><strong>Wave 3 Details:</strong> Learn how various electrical components relate to each other and especially to an electronic relay. Master interconnecting items like diodes, capacitors, and transformers without ICs.</p>
                    <p><strong>Relay Task (to proceed to Flood 2):</strong></p>
                    <p>Develop a well-designed circuit for a device that has the following capabilities:</p>
                    <ul>
                        <li>Button A: Switch on beam light</li>
                        <li>Button B: Switch on flood light</li>
                        <li>Button C: Switch on propeller</li>
                        <li>Button D: Switch off anything on (single tap)</li>
                    </ul>
                    <p>All buttons single tap. The device is rechargeable with LED indicators for charging. Upon pressing Button D, lights delay then gradually shrink off. Device: 12V DC operated; LEDs: 5V DC; lights and propeller: 12V DC.</p>
                    <p>The trainer will review your completed circuit for errors before approving progression to Flood 2.</p>
                </div>
            </div>
            <div class="flood-card">
                <h3>Flood 2: Intermediate Circuits</h3>
                <ul>
                    <li>Wave 1: Sequential Logic</li>
                    <li>Wave 2: Flip-Flops on Paper</li>
                    <li>Wave 3: Counters & Registers</li>
                </ul>
            </div>
            <div class="flood-card">
                <h3>Flood 3: Advanced Designs</h3>
                <ul>
                    <li>Wave 1: State Machines</li>
                    <li>Wave 2: Finite Automata</li>
                    <li>Wave 3: Optimization Techniques</li>
                </ul>
            </div>
            <div class="flood-card">
                <h3>Flood 4: Real-World Applications</h3>
                <ul>
                    <li>Wave 1: Control Systems</li>
                    <li>Wave 2: Automation Projects</li>
                    <li>Wave 3: Troubleshooting</li>
                </ul>
            </div>
            <div class="flood-card">
                <h3>Flood 5: Innovative Thinking</h3>
                <ul>
                    <li>Wave 1: Creative Circuitry</li>
                    <li>Wave 2: Hybrid Designs</li>
                    <li>Wave 3: Invention Challenges</li>
                </ul>
            </div>
            <div class="flood-card">
                <h3>Flood 6: Mastery Level</h3>
                <ul>
                    <li>Wave 1: Complex Simulations</li>
                    <li>Wave 2: Paper-to-Prototype</li>
                    <li>Wave 3: Teaching Others</li>
                </ul>
            </div>
            <div class="flood-card">
                <h3>Flood 7: Expert Innovation</h3>
                <ul>
                    <li>Wave 1: Cutting-Edge Research</li>
                    <li>Wave 2: Collaborative Projects</li>
                    <li>Wave 3: Global Impact</li>
                </ul>
            </div>
        </div>
    </section>

    <section id="enroll">
        <div class="wave-bg"></div>
        <h2>Enroll in Relay Programming Today!</h2>
        <p>Join thousands transforming their minds through pure logic and critical thinking.</p>
        <p>Begin with Flood 1 and rise to mastery – one wave at a time.</p>
        <button class="cta-button">Sign Up Now</button>
        <p style="margin-top: 40px; font-style: italic;">"Think deeper. Design smarter. Become unstoppable."</p>
    </section>

    <section id="contact">
        <div class="wave-bg"></div>
        <h2>Contact Rick Deazer</h2>
        <p>Reach out directly for inquiries, enrollment, or to learn more about Relay Programming.</p>
        <p><strong>Email:</strong> <a href="mailto:deazerrick@gmail.com" style="color: #00ffff; text-decoration: none;">deazerrick@gmail.com</a></p>
        <p><strong>Phone:</strong> <a href="tel:+27768229333" style="color: #00ffff; text-decoration: none;">076 822 9333</a></p>
        <p><strong>WhatsApp:</strong> <a href="https://wa.me/2784843808" style="color: #00ffff; text-decoration: none;">078 484 3808</a></p>
        <div style="margin-top: 40px; display: flex; flex-direction: column; gap: 20px; align-items: center;">
            <button class="cta-button" onclick="window.location.href='mailto:deazerrick@gmail.com'">Send Email</button>
            <button class="cta-button" onclick="window.location.href='tel:+254768229333'">Call Now</button>
            <button class="cta-button" onclick="window.location.href='https://wa.me/254784843808'">Message on WhatsApp</button>
        </div>
    </section>

    <script>
        function scrollToSection(id) {
            document.getElementById(id).scrollIntoView({ behavior: 'smooth' });
        }

        // Highlight active navigation button
        window.addEventListener('scroll', () => {
            const sections = document.querySelectorAll('section');
            const navButtons = document.querySelectorAll('nav button');
            let current = '';

            sections.forEach(section => {
                const sectionTop = section.offsetTop - 100;
                const sectionHeight = section.clientHeight;
                if (pageYOffset >= sectionTop && pageYOffset < sectionTop + sectionHeight) {
                    current = section.getAttribute('id');
                }
            });

            navButtons.forEach(btn => {
                btn.classList.remove('active');
                if (btn.getAttribute('onclick').includes(current)) {
                    btn.classList.add('active');
                }
            });
        });
    </script>
</body>
</html>