-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
305 lines (258 loc) · 13.2 KB
/
index.html
File metadata and controls
305 lines (258 loc) · 13.2 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>https://lockman007.github.io/PixelSwirl/</title>
<style>
/* Basic Reset & Body Styling */
body {
margin: 0;
padding: 0;
background-color: black;
color: gray; /* Default text color - retained */
font-family: Arial, sans-serif; /* Modern, readable font */
display: flex; /* Use flexbox for centering content */
justify-content: center; /* Center horizontally */
align-items: flex-start; /* Align items to the start vertically for better page flow */
min-height: 100vh; /* Ensure body takes full viewport height */
}
/* Container for all content */
.container {
max-width: 1200px; /* Increased max-width to allow for 3 columns, adjust as needed */
width: 90%; /* Responsive width */
padding: 20px;
background-color: #1a1a1a; /* Slightly lighter black for contrast - retained */
border-radius: 8px; /* Rounded corners for a softer look */
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); /* Subtle shadow for depth */
text-align: center; /* Center text within the main container */
margin-top: 50px; /* Add some top margin if you don't want it perfectly centered vertically */
margin-bottom: 50px; /* Add some bottom margin */
}
/* Headings */
h1 {
color: yellow; /* Retained */
font-size: 2.5em; /* Larger heading */
margin-bottom: 30px;
}
/* Grid Container for the project items */
.links-grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Creates 3 equal columns */
gap: 20px; /* Space between grid items */
margin-bottom: 40px;
max-width: 1000px; /* Limit the width of the grid itself if desired */
margin-left: auto; /* Center the grid */
margin-right: auto; /* Center the grid */
}
/* NEW: Styling for each individual project item within the grid */
.project-item {
background-color: #222; /* Slightly different background for items */
border: 1px solid #333; /* Subtle border */
border-radius: 8px; /* Rounded corners */
padding: 15px;
display: flex; /* Use flexbox for vertical alignment of content inside each item */
flex-direction: column; /* Stack children vertically */
justify-content: space-between; /* Pushes content to top/bottom, image to bottom */
align-items: center; /* Center content horizontally within the item */
text-align: center; /* Center text */
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effects */
min-height: 250px; /* Ensure a minimum height for consistent cards */
}
.project-item:hover {
transform: translateY(-5px); /* Lift effect on hover */
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5); /* Stronger shadow on hover */
}
/* Styles for the link within a project item */
.project-item a {
color: white; /* Default link color - retained */
text-decoration: none;
font-weight: bold;
font-size: 1.2em; /* Slightly larger for the title link */
margin-bottom: 10px; /* Space between link and description */
display: block; /* Ensure link takes its own line */
transition: color 0.3s ease; /* Smooth color transition */
}
.project-item a:hover {
color: red; /* Hover color - retained */
text-decoration: underline;
}
.project-item a:visited {
color: white; /* Retained */
}
.project-item a:active {
color: yellow; /* Retained */
}
/* Styles for the description within a project item */
.project-item p.description {
color: gray; /* Retained from your body default or could be white */
font-size: 0.9em;
line-height: 1.5;
margin-bottom: 15px; /* Space between description and image */
flex-grow: 1; /* Allow description to take available space */
}
/* Styles for the image within a project item */
.project-item img {
max-width: 100%; /* Ensure image fits within its container */
height: auto; /* Maintain aspect ratio */
border-radius: 4px; /* Slightly rounded corners for images */
margin-top: auto; /* Pushes image to the bottom if content above is shorter */
display: block; /* Ensures proper rendering */
}
/* Your existing global paragraph and footer text styles - largely unchanged unless specific to project items */
p { /* This applies to general paragraphs, like the footer ones */
color: lime; /* Retained */
line-height: 1.6;
margin-bottom: 15px;
}
.footer-text-yellow {
color: yellow; /* Retained */
font-size: 0.9em;
margin-top: 30px;
}
.footer-text-lime {
color: lime; /* Retained */
font-size: 1em;
margin-top: 10px;
}
/* Horizontal Rules - retained */
hr {
border: none;
border-top: 2px solid #333;
margin: 40px auto;
width: 50%;
}
/* Media Queries for Responsiveness */
@media (max-width: 768px) {
.links-grid {
grid-template-columns: repeat(2, 1fr); /* 2 columns on medium screens */
}
.container {
width: 95%;
padding: 15px;
}
h1 {
font-size: 2.2em;
}
}
@media (max-width: 480px) {
.links-grid {
grid-template-columns: 1fr; /* Single column on small screens */
}
.project-item {
min-height: auto; /* Allow height to adjust on mobile */
}
h1 {
font-size: 1.8em;
}
}
</style>
</head>
<body>
<div class="container">
<h1>https://lockman007.github.io/PixelSwirl/</h1>
<div class="links-grid">
<div class="project-item">
<a href="https://lockman007.github.io/PixelSwirl/PixelSwirl.html">PixelSwirl.html</a>
<p class="description">image animation</p>
<a href="https://lockman007.github.io/PixelSwirl/PixelSwirl.html"><img src="https://lockman007.github.io/PixelSwirl/images/pixelswirl.png"></a>
</div>
<div class="project-item">
<a href="https://lockman007.github.io/PixelSwirl/cannon.html">cannon.html</a>
<p class="description">cannon shooter, basic</p>
<a href="https://lockman007.github.io/PixelSwirl/cannon.html"><img src="https://lockman007.github.io/PixelSwirl/images/cannon.png"></a>
</div>
<div class="project-item">
<a href="https://lockman007.github.io/PixelSwirl/mrwizard.html">mrwizard.html</a>
<p class="description">kaleidoscope drawing</p>
<a href="https://lockman007.github.io/PixelSwirl/mrwizard.html"><img src="https://lockman007.github.io/PixelSwirl/images/mrwizard.png"></a>
</div>
<div class="project-item">
<a href="https://lockman007.github.io/PixelSwirl/mystify.html">mystify.html</a>
<p class="description">win95 screensaver mystify your mind</p>
<a href="https://lockman007.github.io/PixelSwirl/mystify.html"><img src="https://lockman007.github.io/PixelSwirl/images/mystify.png"></a>
</div>
<div class="project-item">
<a href="https://lockman007.github.io/PixelSwirl/win95.html">win95.html</a>
<p class="description">win95 screensaver list (work in progress? 1625 lines)</p>
<a href="https://lockman007.github.io/PixelSwirl/win95.html"><img src="https://lockman007.github.io/PixelSwirl/images/win95.png"></a>
</div>
<div class="project-item">
<a href="https://lockman007.github.io/PixelSwirl/maze.html">maze.html</a>
<p class="description">win95 screensaver maze?</p>
<a href="https://lockman007.github.io/PixelSwirl/maze.html"><img src="https://lockman007.github.io/PixelSwirl/images/maze.png"></a>
</div>
<div class="project-item">
<a href="https://lockman007.github.io/PixelSwirl/tv-snow.html">tv-snow.html</a>
<p class="description">CPU Intensive</p>
<a href="https://lockman007.github.io/PixelSwirl/tv-snow.html"><img src="https://lockman007.github.io/PixelSwirl/images/tv-snow.png"></a>
</div>
<div class="project-item">
<a href="https://lockman007.github.io/PixelSwirl/tv-snow-SonifTweak.html">tv-snow-SonifTweak.html</a>
<p class="description">alt</p>
<a href="https://lockman007.github.io/PixelSwirl/tv-snow-SonifTweak.html"><img src="https://lockman007.github.io/PixelSwirl/images/tv-snow-SonifTweak.png"></a>
</div>
<div class="project-item">
<a href="https://lockman007.github.io/PixelSwirl/rgbnoise2.html">rgbnoise2.html</a>
<p class="description">some RBG Noise Generator (WiP)</p>
<a href="https://lockman007.github.io/PixelSwirl/rgbnoise2.html"><img src="https://lockman007.github.io/PixelSwirl/images/rgbnoise2.png"></a>
</div>
<div class="project-item">
<a href="https://lockman007.github.io/PixelSwirl/steganography-16-lsb-gemini.html">steganography-16-lsb-gemini.html</a>
<p class="description">Steganography (WiP) [LSB]</p>
<a href="https://lockman007.github.io/PixelSwirl/steganography-16-lsb-gemini.html"><img src="https://lockman007.github.io/PixelSwirl/images/steganography.png"></a>
</div>
<div class="project-item">
<a href="https://lockman007.github.io/PixelSwirl/image-rip.html">image-rip.html</a>
<p class="description">Steganography (WiP) [XOR & LCG]</p>
<a href="https://lockman007.github.io/PixelSwirl/image-rip.html"><img src="https://lockman007.github.io/PixelSwirl/images/image-rip.png"></a>
</div>
<div class="project-item">
<a href="https://lockman007.github.io/PixelSwirl/html5-py-as-html.html">html5-py-as-html.htm</a>
<p class="description">HTML Code helper</p>
or <a href="https://github.com/LockMan007/PixelSwirl/blob/main/Python-apps/html5.py">.py</a>
<a href="https://lockman007.github.io/PixelSwirl/html5-py-as-html.html"><img src="https://lockman007.github.io/PixelSwirl/images/html5-py-as-html.png"></a>
</div>
<div class="project-item">
<a href="https://lockman007.github.io/PixelSwirl/text-enc.html">text-enc.html</a>
<p class="description">Text encryption/decryption</p>
<a href="https://lockman007.github.io/PixelSwirl/text-enc.html"><img src="https://lockman007.github.io/PixelSwirl/text-enc.png"></a>
</div>
<div class="project-item">
<a href="https://lockman007.github.io/PixelSwirl/??.html">??.html</a>
<p class="description">??</p>
<a href="https://lockman007.github.io/PixelSwirl/??.html"><img src="https://lockman007.github.io/PixelSwirl/??.png"></a>
</div>
<div class="project-item">
<a href="https://lockman007.github.io/PixelSwirl/??.html">??.html</a>
<p class="description">??</p>
<a href="https://lockman007.github.io/PixelSwirl/??.html"><img src="https://lockman007.github.io/PixelSwirl/??.png"></a>
</div>
</div>
<hr>
<p class="footer-text-yellow">
<a href="https://github.com/LockMan007/PixelSwirl">https://github.com/LockMan007/PixelSwirl</a>
<br>
: 2025 - ?
</p>
<p class="footer-text-lime">
Feel free to use any of the source code for your own projects.
<br>If you want to donate to me, let me know.
<br>
Gemini 2.5 flash doesn't like to do over around 1,500 lines of html5 code. Although i made one with 1,770, it becomes VERY unstable, making lots of errors because it doesn't have enough tokens. So split up your projects.
</p>
<p>"Gemini 2.5 Flash, when processing extremely long inputs, can be unstable and have a low success rate, especially with inputs exceeding 20,000 characters. While it can generally handle around 5,000 characters, the likelihood of successful extraction decreases significantly with larger inputs, and it often fails with inputs of 100,000 characters or more."</p>
<br>
<a href="https://www.charactercountonline.com/">https://www.charactercountonline.com</a> website to check your character count.
<br>
<br>
<h1>
check out Chris Pirillo's projects:<br>
<a href=https://pirillo.com/arcade/>https://pirillo.com/arcade/</a>
<br>
<br>
<a href="https://pirillo.com/arcade/pipe-dream.html">https://pirillo.com/arcade/pipe-dream.html</a>
</h1>
</div>
</body>
</html>