CommandCenter/RF2_materials.html at main · CMCKHMER/CommandCenter · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reading Future Connect 2 Materials</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Outfit', sans-serif; }

        /* Global Theme Styles */
        body {
            background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 25%, #0891b2 75%, #06b6d4 100%);
            background-attachment: fixed;
        }

        .theme-section {
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 58, 95, 0.85) 50%, rgba(8, 145, 178, 0.8) 100%);
            backdrop-filter: blur(10px);
        }

        .theme-card {
            background: linear-gradient(135deg, rgba(26, 31, 46, 0.95) 0%, rgba(45, 55, 72, 0.9) 100%);
            border: 1px solid rgba(14, 165, 233, 0.2);
            transition: all 0.3s ease;
        }

        .theme-card:hover {
            border-color: rgba(14, 165, 233, 0.5);
            box-shadow: 0 0 30px rgba(14, 165, 233, 0.2), 0 0 60px rgba(20, 184, 166, 0.1);
            transform: translateY(-5px);
        }

        .theme-heading {
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(135deg, #ffffff 0%, #90e0ef 50%, #fbbf24 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .theme-text {
            font-family: 'Nunito', sans-serif;
            color: #e2e8f0;
        }

        .theme-text-muted {
            font-family: 'Nunito', sans-serif;
            color: #94a3b8;
        }

        /* 3D Button Styles */
        .btn-3d {
            position: relative;
            display: inline-block;
            padding: 16px 40px;
            font-size: 1.1rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #ffffff;
            background: linear-gradient(135deg, #0077b6 0%, #00b4d8 50%, #90e0ef 100%);
            border: none;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            box-shadow:
                0 8px 0 #005f91,
                0 15px 20px rgba(0, 119, 182, 0.4),
                0 0 30px rgba(0, 180, 216, 0.3);
            transform-style: preserve-3d;
            overflow: hidden;
        }

        .btn-3d::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: left 0.5s ease;
        }

        .btn-3d:hover {
            transform: translateY(-4px) scale(1.02);
            box-shadow:
                0 12px 0 #005f91,
                0 20px 30px rgba(0, 119, 182, 0.5),
                0 0 50px rgba(0, 180, 216, 0.6),
                0 0 80px rgba(144, 224, 239, 0.4);
        }

        .btn-3d:hover::before {
            left: 100%;
        }

        .btn-3d:active {
            transform: translateY(4px);
            box-shadow:
                0 4px 0 #005f91,
                0 8px 15px rgba(0, 119, 182, 0.3);
        }

        .icon-svg { width: 60px; height: 60px; fill: currentColor; }
        .card-img { width: 100%; height: 140px; object-fit: cover; border-radius: 0.75rem; margin-bottom: 0.75rem; display: block; }
    </style>
</head>
<body class="text-[#e5e7eb] min-h-screen">

    <!-- Navigation -->
    <nav class="theme-card py-4 px-6 flex justify-between items-center sticky top-0 z-10">
        <div class="flex items-center space-x-2">
            <a href="index.html" class="text-xl font-bold theme-heading">← Back to Home</a>
        </div>
        <h1 class="text-2xl font-bold theme-heading">Reading Future Connect 2 Materials</h1>
        <div></div>
    </nav>

    <!-- Main Content -->
    <section class="py-16 theme-section px-4 min-h-screen">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-3xl font-bold mb-4 text-center theme-heading">Reading Future Connect 2 Materials</h2>
            <p class="text-center theme-text-muted mb-12">Select an activity to begin your learning journey</p>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- Test Card -->
                <div class="theme-card p-6 rounded-xl flex flex-col items-center">
                    <img src="assets/cards/rf2-test.svg" alt="Test paper with graded answers and pencil" class="card-img">
                    <h3 class="text-xl font-bold mb-2 theme-heading">Test</h3>
                    <p class="theme-text-muted mb-4 text-center">Comprehensive test exercises to assess your understanding and progress.</p>
                    <button onclick="window.location.href='Test.html'" class="btn-3d glow-effect text-sm px-4 py-2">Start Test →</button>
                </div>

                <!-- Unit Test Card -->
                <div class="theme-card p-6 rounded-xl flex flex-col items-center">
                    <img src="assets/cards/rf2-unit-test.svg" alt="Stacked quiz sheets with small trophy and medal" class="card-img">
                    <h3 class="text-xl font-bold mb-2 theme-heading">Unit Test</h3>
                    <p class="theme-text-muted mb-4 text-center">Unit-based assessments to reinforce learning from each section.</p>
                    <button onclick="window.location.href='unittest.html'" class="btn-3d glow-effect text-sm px-4 py-2">Start Unit Test →</button>
                </div>

                <!-- Word Card -->
                <div class="theme-card p-6 rounded-xl flex flex-col items-center">
                    <img src="assets/cards/rf2-word.svg" alt="Vocabulary flashcards fanned out with letters and alphabet" class="card-img">
                    <h3 class="text-xl font-bold mb-2 theme-heading">Word</h3>
                    <p class="theme-text-muted mb-4 text-center">Vocabulary building exercises to expand your word knowledge.</p>
                    <button onclick="window.location.href='word.html'" class="btn-3d glow-effect text-sm px-4 py-2">Start Word →</button>
                </div>

                <!-- Word Review Card -->
                <div class="theme-card p-6 rounded-xl flex flex-col items-center">
                    <img src="assets/cards/rf2-word-review.svg" alt="Flashcards with circular refresh arrow and checkmark for word review" class="card-img">
                    <h3 class="text-xl font-bold mb-2 theme-heading">Word Review</h3>
                    <p class="theme-text-muted mb-4 text-center">Review and reinforce vocabulary you've learned previously.</p>
                    <button onclick="window.location.href='wordreview.html'" class="btn-3d glow-effect text-sm px-4 py-2">Start Review →</button>
                </div>

                <!-- Word Test Card -->
                <div class="theme-card p-6 rounded-xl flex flex-col items-center">
                    <img src="assets/cards/rf2-word-test.svg" alt="Flashcard with question mark and A B C D answer bubbles for word test" class="card-img">
                    <h3 class="text-xl font-bold mb-2 theme-heading">Word Test</h3>
                    <p class="theme-text-muted mb-4 text-center">Test your vocabulary knowledge with interactive quizzes.</p>
                    <button onclick="window.location.href='wordtest.html'" class="btn-3d glow-effect text-sm px-4 py-2">Start Word Test →</button>
                </div>
            </div>
        </div>
    </section>

    <script>
        // Glow effect on hover
        document.querySelectorAll('.btn-3d').forEach(button => {
            button.addEventListener('mouseenter', function() {
                this.style.boxShadow = '0 12px 0 #005f91, 0 20px 30px rgba(0, 119, 182, 0.5), 0 0 50px rgba(0, 180, 216, 0.6), 0 0 80px rgba(144, 224, 239, 0.4)';
            });
            button.addEventListener('mouseleave', function() {
                this.style.boxShadow = '0 8px 0 #005f91, 0 15px 20px rgba(0, 119, 182, 0.4), 0 0 30px rgba(0, 180, 216, 0.3)';
            });
        });
    </script>
</body>
</html>