webXOS/codecrunchinfo.html at main · webxos/webXOS · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Code Crunch Info - WebXOS 2025</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: #000;
            font-family: 'Courier New', monospace;
            height: 100vh;
            overflow: auto;
            color: #00ff00;
        }

        .console {
            width: 100vw;
            min-height: 100vh;
            background: #000;
            border: 1px solid #00ff00;
            padding: 20px;
            display: flex;
            flex-direction: column;
            font-size: clamp(14px, 3vw, 16px);
        }

        .content-area {
            flex-grow: 1;
            padding-bottom: 20px;
            white-space: pre-wrap;
            word-wrap: break-word;
        }

        .content-area h1 {
            font-size: clamp(20px, 4vw, 24px);
            margin-bottom: 10px;
            text-align: center;
        }

        .advertising {
            font-size: clamp(18px, 4vw, 22px);
            text-align: center;
            margin-bottom: 20px;
            text-shadow: 0 0 5px #00ff00;
        }

        .content-area h2 {
            font-size: clamp(16px, 3.5vw, 18px);
            margin: 20px 0 10px;
        }

        .content-area p, .content-area ul {
            margin-bottom: 15px;
            line-height: 1.5;
        }

        .content-area ul {
            list-style: none;
            padding-left: 20px;
        }

        .content-area ul li {
            position: relative;
            margin-bottom: 10px;
        }

        .content-area ul li:before {
            content: '>';
            position: absolute;
            left: -20px;
            color: #00ff00;
        }

        .large-play-btn {
            background: #000;
            border: 2px solid #00ff00;
            color: #00ff00;
            padding: 15px 30px;
            cursor: pointer;
            font-size: clamp(16px, 3.5vw, 18px);
            text-align: center;
            margin: 30px auto;
            display: block;
            width: fit-content;
            text-decoration: none;
        }

        .large-play-btn:hover {
            background: #00ff00;
            color: #000;
        }

        .footer {
            text-align: center;
            padding: 10px;
            font-size: clamp(10px, 2vw, 12px);
        }

        .glow {
            text-shadow: 0 0 5px #00ff00;
        }

        @media (max-width: 600px) {
            .console {
                padding: 10px;
            }
            .content-area h1 {
                font-size: clamp(18px, 3.5vw, 20px);
            }
            .content-area h2 {
                font-size: clamp(14px, 3vw, 16px);
            }
            .advertising {
                font-size: clamp(16px, 3.5vw, 18px);
            }
            .large-play-btn {
                width: 100%;
                padding: 12px 20px;
            }
        }
    </style>
</head>
<body>
    <div class="console">
        <div class="content-area">
            <h1 class="glow">Code Crunch - WebXOS 2025</h1>
            <p class="advertising">Test Your Coding Skills in a Fun, Competitive Challenge!</p>
            <a href="http://webxos.netlify.app/codecrunch.html" class="large-play-btn">Play Code Crunch</a>
            <h2>Overview</h2>
            <p>Code Crunch is a minimalist, low-end coding challenge game designed for WebXOS 2025. Built with simplicity and accessibility in mind, it runs seamlessly on old systems and low-end devices, offering an intuitive and engaging experience for coders of all levels. Its lightweight design and sustainable architecture align with WebXOS's vision of eco-friendly, inclusive software.</p>

            <h2>Key Features</h2>
            <ul>
                <li><strong>Multi-Language Support</strong>: Challenges in HTML, CSS, JavaScript, Python, Git, Linux Kernel, SQL, and Ruby cater to diverse coding interests.</li>
                <li><strong>Intuitive Serial Reward System</strong>: Earn a unique WebXOS serial based on your performance, incentivizing accuracy and speed.</li>
                <li><strong>Low System Requirements</strong>: Runs on outdated hardware and mobile devices, ensuring accessibility for all users.</li>
                <li><strong>Anti-Cheating Measures</strong>: Copy-paste prevention ensures fair play, maintaining a competitive edge.</li>
                <li><strong>Responsive Design</strong>: Adapts to mobile and desktop interfaces for a consistent experience.</li>
                <li><strong>Performance Tracking</strong>: Detailed stats (WPM, accuracy, errors) provide insights into your coding progress.</li>
            </ul>

            <h2>How It Works</h2>
            <p>Code Crunch is a 10-level typing challenge where players type code snippets accurately and quickly. Here's the flow:</p>
            <ul>
                <li><strong>Start</strong>: Select a code type (e.g., JavaScript, Python) and device (mobile or desktop).</li>
                <li><strong>Play</strong>: Type the displayed code snippet exactly as shown. Each level increases in complexity.</li>
                <li><strong>Score</strong>: Earn points based on accuracy and speed, tracked via words per minute (WPM) and error count.</li>
                <li><strong>Reward</strong>: Complete all 10 levels to receive a WebXOS serial, a unique code reflecting your performance, which can be copied for sharing or leaderboards.</li>
            </ul>

            <h2>Use Case: Coding Education with a Competitive Edge</h2>
            <p>Code Crunch is ideal for coding bootcamps, classrooms, or self-learners aiming to improve their coding fluency. For example, a coding bootcamp can integrate Code Crunch into its curriculum to gamify learning. Students practice typing real-world code snippets, reinforcing syntax familiarity and muscle memory. The competitive aspect—tracking WPM and accuracy—motivates students to improve, while the serial reward system adds a tangible goal. This fosters a fun, engaging environment that accelerates learning and builds confidence, especially for beginners.</p>

            <h2>WebXOS 2025 Ecosystem: Sustainable and Inclusive</h2>
            <p>Code Crunch embodies WebXOS 2025's commitment to sustainable software design and universal accessibility:</p>
            <ul>
                <li><strong>Low-End Compatibility</strong>: Optimized to run on older PCs, budget smartphones, and tablets, reducing the need for high-end hardware and minimizing electronic waste.</li>
                <li><strong>Equal Playing Field</strong>: Simple design and anti-cheating measures ensure fair competition, regardless of device or skill level.</li>
                <li><strong>Eco-Friendly</strong>: Lightweight code base reduces energy consumption, aligning with WebXOS's green technology goals.</li>
                <li><strong>Education Focus</strong>: Promotes coding literacy, empowering users worldwide to participate in the digital economy.</li>
            </ul>
            <p>By prioritizing accessibility and sustainability, Code Crunch levels the playing field, making coding education and competition available to everyone, from students in rural areas to professionals on outdated systems.</p>


        </div>
        <div class="footer">© 2025 WebXOS Code Crunch</div>
    </div>
</body>
</html>