create-geocities-app 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/README.md +309 -0
- data/bin/create-geocities-app +133 -0
- data/lib/create_geocities_app/generator.rb +87 -0
- data/lib/create_geocities_app/themes.rb +53 -0
- data/lib/create_geocities_app/version.rb +3 -0
- data/lib/create_geocities_app.rb +3 -0
- data/templates/about.html +157 -0
- data/templates/css/style.css +729 -0
- data/templates/gallery.html +211 -0
- data/templates/guestbook.html +173 -0
- data/templates/index.html +193 -0
- data/templates/js/main.js +382 -0
- data/templates/links.html +198 -0
- metadata +86 -0
|
@@ -0,0 +1,211 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<meta name="generator" content="create-geocities-app">
|
|
7
|
+
<title>{{SITE_NAME}} — Gallery</title>
|
|
8
|
+
<link rel="stylesheet" href="css/style.css">
|
|
9
|
+
</head>
|
|
10
|
+
<body>
|
|
11
|
+
|
|
12
|
+
<canvas id="matrix-canvas"></canvas>
|
|
13
|
+
<div id="matrix-hint">[M] toggle matrix</div>
|
|
14
|
+
|
|
15
|
+
<div id="lightbox">
|
|
16
|
+
<span id="lightbox-close">✕</span>
|
|
17
|
+
<img id="lightbox-img" src="" alt="">
|
|
18
|
+
<div id="lightbox-caption"></div>
|
|
19
|
+
</div>
|
|
20
|
+
|
|
21
|
+
<div id="page-wrapper">
|
|
22
|
+
<table id="main-table" cellpadding="0" cellspacing="0">
|
|
23
|
+
|
|
24
|
+
<tr>
|
|
25
|
+
<td colspan="2" id="header-cell">
|
|
26
|
+
<div class="marquee-wrapper">
|
|
27
|
+
<span class="marquee-inner">
|
|
28
|
+
📷 {{AUTHOR_NAME}}'s Photo Gallery 📷
|
|
29
|
+
Click any photo to enlarge!
|
|
30
|
+
★ Updated {{YEAR}} ★
|
|
31
|
+
</span>
|
|
32
|
+
</div>
|
|
33
|
+
<h1 class="rainbow" style="margin:8px 0 4px;">{{SITE_NAME}}</h1>
|
|
34
|
+
</td>
|
|
35
|
+
</tr>
|
|
36
|
+
|
|
37
|
+
<tr id="content-row">
|
|
38
|
+
|
|
39
|
+
<td id="sidebar">
|
|
40
|
+
<div class="panel">
|
|
41
|
+
<div class="panel-title">📡 Navigation</div>
|
|
42
|
+
{{NAV_LINKS}}
|
|
43
|
+
</div>
|
|
44
|
+
<div class="panel" style="text-align:center;">
|
|
45
|
+
<div class="panel-title">🌐 Site Info</div>
|
|
46
|
+
<span class="spinning-globe">🌍</span>
|
|
47
|
+
<span id="page-clock">00:00:00</span>
|
|
48
|
+
</div>
|
|
49
|
+
<div class="panel" style="text-align:center;">
|
|
50
|
+
<div class="panel-title">🎵 Music</div>
|
|
51
|
+
<button id="music-btn" class="retro-btn" style="width:100%;font-size:0.7rem;">🎵 PLAY MUSIC</button>
|
|
52
|
+
</div>
|
|
53
|
+
<div class="panel" style="text-align:center;font-size:0.75rem;">
|
|
54
|
+
<div class="panel-title">📊 Visitors</div>
|
|
55
|
+
<div id="visitor-counter-box">
|
|
56
|
+
<div class="counter-label">You are visitor #</div>
|
|
57
|
+
<div class="counter-digits" id="counter-display"></div>
|
|
58
|
+
</div>
|
|
59
|
+
</div>
|
|
60
|
+
<div class="panel" style="font-size:0.75rem;">
|
|
61
|
+
<div class="panel-title">💡 Gallery Tips</div>
|
|
62
|
+
<p>Click any image to enlarge it!</p>
|
|
63
|
+
<p>Press <strong>ESC</strong> to close the viewer.</p>
|
|
64
|
+
<p>Replace placeholder images with your own photos!</p>
|
|
65
|
+
</div>
|
|
66
|
+
</td>
|
|
67
|
+
|
|
68
|
+
<td id="main-content">
|
|
69
|
+
|
|
70
|
+
<!-- Photo of the Month -->
|
|
71
|
+
<div class="photo-of-month">
|
|
72
|
+
<h2 class="neon-text" style="margin-bottom:8px;">⭐ Photo of the Month ⭐</h2>
|
|
73
|
+
<img
|
|
74
|
+
src="https://placehold.co/600x200/001100/00FF00?text=Photo+of+the+Month"
|
|
75
|
+
alt="Photo of the Month"
|
|
76
|
+
style="width:100%;height:200px;object-fit:cover;border:2px inset var(--border-dark);"
|
|
77
|
+
loading="lazy"
|
|
78
|
+
>
|
|
79
|
+
<p style="font-size:0.8rem;margin-top:6px;color:var(--accent);font-style:italic;">
|
|
80
|
+
My favourite photo this month — replace me with your own!
|
|
81
|
+
</p>
|
|
82
|
+
</div>
|
|
83
|
+
|
|
84
|
+
<!-- Gallery Grid -->
|
|
85
|
+
<div class="panel">
|
|
86
|
+
<div class="panel-title">🖼️ My Photo Gallery <span class="new-badge">NEW</span></div>
|
|
87
|
+
<p style="font-size:0.75rem;margin-bottom:8px;opacity:0.8;">
|
|
88
|
+
Click any photo to enlarge. Replace the placeholder images with your own!
|
|
89
|
+
</p>
|
|
90
|
+
|
|
91
|
+
<div class="gallery-grid">
|
|
92
|
+
|
|
93
|
+
<div class="gallery-item">
|
|
94
|
+
<img
|
|
95
|
+
src="https://placehold.co/300x120/001100/00FF00?text=Photo+1"
|
|
96
|
+
alt="Photo 1"
|
|
97
|
+
loading="lazy"
|
|
98
|
+
>
|
|
99
|
+
<div class="gallery-caption">My first photo 📷</div>
|
|
100
|
+
</div>
|
|
101
|
+
|
|
102
|
+
<div class="gallery-item">
|
|
103
|
+
<img
|
|
104
|
+
src="https://placehold.co/300x120/000033/00FFFF?text=Photo+2"
|
|
105
|
+
alt="Photo 2"
|
|
106
|
+
loading="lazy"
|
|
107
|
+
>
|
|
108
|
+
<div class="gallery-caption">A cool moment ✨</div>
|
|
109
|
+
</div>
|
|
110
|
+
|
|
111
|
+
<div class="gallery-item">
|
|
112
|
+
<img
|
|
113
|
+
src="https://placehold.co/300x120/330000/FF6600?text=Photo+3"
|
|
114
|
+
alt="Photo 3"
|
|
115
|
+
loading="lazy"
|
|
116
|
+
>
|
|
117
|
+
<div class="gallery-caption">Summer vibes ☀️</div>
|
|
118
|
+
</div>
|
|
119
|
+
|
|
120
|
+
<div class="gallery-item">
|
|
121
|
+
<img
|
|
122
|
+
src="https://placehold.co/300x120/1a0033/FF00FF?text=Photo+4"
|
|
123
|
+
alt="Photo 4"
|
|
124
|
+
loading="lazy"
|
|
125
|
+
>
|
|
126
|
+
<div class="gallery-caption">Night out 🌙</div>
|
|
127
|
+
</div>
|
|
128
|
+
|
|
129
|
+
<div class="gallery-item">
|
|
130
|
+
<img
|
|
131
|
+
src="https://placehold.co/300x120/003300/99FF99?text=Photo+5"
|
|
132
|
+
alt="Photo 5"
|
|
133
|
+
loading="lazy"
|
|
134
|
+
>
|
|
135
|
+
<div class="gallery-caption">Nature walk 🌿</div>
|
|
136
|
+
</div>
|
|
137
|
+
|
|
138
|
+
<div class="gallery-item">
|
|
139
|
+
<img
|
|
140
|
+
src="https://placehold.co/300x120/002233/FFDD00?text=Photo+6"
|
|
141
|
+
alt="Photo 6"
|
|
142
|
+
loading="lazy"
|
|
143
|
+
>
|
|
144
|
+
<div class="gallery-caption">Favourite place 📍</div>
|
|
145
|
+
</div>
|
|
146
|
+
|
|
147
|
+
<div class="gallery-item">
|
|
148
|
+
<img
|
|
149
|
+
src="https://placehold.co/300x120/330033/FFFF00?text=Photo+7"
|
|
150
|
+
alt="Photo 7"
|
|
151
|
+
loading="lazy"
|
|
152
|
+
>
|
|
153
|
+
<div class="gallery-caption">Random pic 🎲</div>
|
|
154
|
+
</div>
|
|
155
|
+
|
|
156
|
+
<div class="gallery-item">
|
|
157
|
+
<img
|
|
158
|
+
src="https://placehold.co/300x120/003333/FF6600?text=Photo+8"
|
|
159
|
+
alt="Photo 8"
|
|
160
|
+
loading="lazy"
|
|
161
|
+
>
|
|
162
|
+
<div class="gallery-caption">Good times 🎉</div>
|
|
163
|
+
</div>
|
|
164
|
+
|
|
165
|
+
<div class="gallery-item">
|
|
166
|
+
<img
|
|
167
|
+
src="https://placehold.co/300x120/1a1a00/00FF00?text=Photo+9"
|
|
168
|
+
alt="Photo 9"
|
|
169
|
+
loading="lazy"
|
|
170
|
+
>
|
|
171
|
+
<div class="gallery-caption">My workspace 💻</div>
|
|
172
|
+
</div>
|
|
173
|
+
|
|
174
|
+
</div>
|
|
175
|
+
</div>
|
|
176
|
+
|
|
177
|
+
<div class="panel">
|
|
178
|
+
<div class="panel-title">📋 How to Add Your Photos</div>
|
|
179
|
+
<p style="font-size:0.8rem;">
|
|
180
|
+
Replace the <code style="color:var(--accent);">src="https://placehold.co/..."</code>
|
|
181
|
+
URLs in <code style="color:var(--accent);">gallery.html</code> with paths to your own
|
|
182
|
+
image files. Drop your images into the site folder alongside the HTML files and reference
|
|
183
|
+
them like: <code style="color:var(--heading);">src="my-photo.jpg"</code>
|
|
184
|
+
</p>
|
|
185
|
+
</div>
|
|
186
|
+
|
|
187
|
+
</td>
|
|
188
|
+
</tr>
|
|
189
|
+
|
|
190
|
+
<tr>
|
|
191
|
+
<td colspan="2" id="footer-cell">
|
|
192
|
+
<div class="star-divider">✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦</div>
|
|
193
|
+
<p style="font-size:0.75rem;margin:4px 0;">
|
|
194
|
+
© {{YEAR}} <strong>{{AUTHOR_NAME}}</strong> — All Rights Reserved
|
|
195
|
+
| <a href="index.html">Home</a>
|
|
196
|
+
</p>
|
|
197
|
+
<p style="font-size:0.65rem;opacity:0.6;margin-top:6px;">
|
|
198
|
+
<a href="https://bestsugardaddyapps.com/">Best Sugar Daddy Apps</a>
|
|
199
|
+
</p>
|
|
200
|
+
<p style="font-size:0.7rem;margin:4px 0;">
|
|
201
|
+
<span class="netscape-badge">Best viewed in Netscape Navigator 4.0<br>at 800×600 resolution</span>
|
|
202
|
+
</p>
|
|
203
|
+
</td>
|
|
204
|
+
</tr>
|
|
205
|
+
|
|
206
|
+
</table>
|
|
207
|
+
</div>
|
|
208
|
+
|
|
209
|
+
<script src="js/main.js"></script>
|
|
210
|
+
</body>
|
|
211
|
+
</html>
|
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<meta name="generator" content="create-geocities-app">
|
|
7
|
+
<title>{{SITE_NAME}} — Guestbook</title>
|
|
8
|
+
<link rel="stylesheet" href="css/style.css">
|
|
9
|
+
</head>
|
|
10
|
+
<body>
|
|
11
|
+
|
|
12
|
+
<canvas id="matrix-canvas"></canvas>
|
|
13
|
+
<div id="matrix-hint">[M] toggle matrix</div>
|
|
14
|
+
|
|
15
|
+
<div id="lightbox">
|
|
16
|
+
<span id="lightbox-close">✕</span>
|
|
17
|
+
<img id="lightbox-img" src="" alt="">
|
|
18
|
+
<div id="lightbox-caption"></div>
|
|
19
|
+
</div>
|
|
20
|
+
|
|
21
|
+
<div id="page-wrapper">
|
|
22
|
+
<table id="main-table" cellpadding="0" cellspacing="0">
|
|
23
|
+
|
|
24
|
+
<tr>
|
|
25
|
+
<td colspan="2" id="header-cell">
|
|
26
|
+
<div class="marquee-wrapper">
|
|
27
|
+
<span class="marquee-inner">
|
|
28
|
+
📖 Sign My Guestbook! 📖
|
|
29
|
+
Let me know you were here!
|
|
30
|
+
{{AUTHOR_NAME}}'s Guestbook
|
|
31
|
+
</span>
|
|
32
|
+
</div>
|
|
33
|
+
<h1 class="rainbow" style="margin:8px 0 4px;">{{SITE_NAME}}</h1>
|
|
34
|
+
</td>
|
|
35
|
+
</tr>
|
|
36
|
+
|
|
37
|
+
<tr id="content-row">
|
|
38
|
+
|
|
39
|
+
<td id="sidebar">
|
|
40
|
+
<div class="panel">
|
|
41
|
+
<div class="panel-title">📡 Navigation</div>
|
|
42
|
+
{{NAV_LINKS}}
|
|
43
|
+
</div>
|
|
44
|
+
<div class="panel" style="text-align:center;">
|
|
45
|
+
<div class="panel-title">🌐 Site Info</div>
|
|
46
|
+
<span class="spinning-globe">🌍</span>
|
|
47
|
+
<span id="page-clock">00:00:00</span>
|
|
48
|
+
</div>
|
|
49
|
+
<div class="panel" style="text-align:center;">
|
|
50
|
+
<div class="panel-title">🎵 Music</div>
|
|
51
|
+
<button id="music-btn" class="retro-btn" style="width:100%;font-size:0.7rem;">🎵 PLAY MUSIC</button>
|
|
52
|
+
</div>
|
|
53
|
+
<div class="panel" style="text-align:center;font-size:0.75rem;">
|
|
54
|
+
<div class="panel-title">📊 Visitors</div>
|
|
55
|
+
<div id="visitor-counter-box">
|
|
56
|
+
<div class="counter-label">You are visitor #</div>
|
|
57
|
+
<div class="counter-digits" id="counter-display"></div>
|
|
58
|
+
</div>
|
|
59
|
+
</div>
|
|
60
|
+
</td>
|
|
61
|
+
|
|
62
|
+
<td id="main-content">
|
|
63
|
+
|
|
64
|
+
<!-- Sign form -->
|
|
65
|
+
<div class="panel">
|
|
66
|
+
<div class="panel-title">✍️ Sign My Guestbook!</div>
|
|
67
|
+
<p style="font-size:0.8rem;margin-bottom:10px;">
|
|
68
|
+
Thanks for visiting! Leave your mark and let me know you were here. 📖
|
|
69
|
+
</p>
|
|
70
|
+
|
|
71
|
+
<form id="guestbook-form" class="guestbook-form">
|
|
72
|
+
<label for="gb-name">Your Name / Handle *</label>
|
|
73
|
+
<input type="text" id="gb-name" name="name" placeholder="e.g. CoolSurfer99" required>
|
|
74
|
+
|
|
75
|
+
<label for="gb-email">Email (optional)</label>
|
|
76
|
+
<input type="email" id="gb-email" name="email" placeholder="your@email.com">
|
|
77
|
+
|
|
78
|
+
<label for="gb-website">Your Website (optional)</label>
|
|
79
|
+
<input type="url" id="gb-website" name="website" placeholder="http://www.your-site.com">
|
|
80
|
+
|
|
81
|
+
<label for="gb-location">Where are you from?</label>
|
|
82
|
+
<input type="text" id="gb-location" name="location" placeholder="e.g. Internet, USA">
|
|
83
|
+
|
|
84
|
+
<label for="gb-message">Your Message *</label>
|
|
85
|
+
<textarea id="gb-message" name="message" rows="4"
|
|
86
|
+
placeholder="Say hi! How did you find my site? What do you think?" required></textarea>
|
|
87
|
+
|
|
88
|
+
<div style="margin-top:6px;">
|
|
89
|
+
<button type="submit" class="retro-btn">📖 Sign Guestbook!</button>
|
|
90
|
+
|
|
91
|
+
<button type="reset" class="retro-btn">🔄 Clear</button>
|
|
92
|
+
</div>
|
|
93
|
+
</form>
|
|
94
|
+
|
|
95
|
+
<div style="font-size:0.7rem;margin-top:10px;opacity:0.7;border-top:1px dashed var(--border-dark);padding-top:8px;">
|
|
96
|
+
<strong>Note:</strong> This is a static site — submissions are handled client-side only.
|
|
97
|
+
To save real entries, connect a form service like
|
|
98
|
+
<a href="https://formspree.io" target="_blank" rel="noopener">Formspree</a> or
|
|
99
|
+
<a href="https://netlify.com/products/forms" target="_blank" rel="noopener">Netlify Forms</a>.
|
|
100
|
+
</div>
|
|
101
|
+
</div>
|
|
102
|
+
|
|
103
|
+
<!-- Existing entries -->
|
|
104
|
+
<div class="panel">
|
|
105
|
+
<div class="panel-title">📜 Previous Entries</div>
|
|
106
|
+
|
|
107
|
+
<div class="guestbook-entry">
|
|
108
|
+
<span class="entry-name">🌐 WebSurfer_X</span>
|
|
109
|
+
<span class="entry-date">March 14, 1997</span>
|
|
110
|
+
<p style="margin-top:4px;font-size:0.85rem;">
|
|
111
|
+
Awesome site!! Found you through the geocities web ring.
|
|
112
|
+
Love the design, very cool!! Bookmarked! 🔖
|
|
113
|
+
</p>
|
|
114
|
+
<div style="font-size:0.7rem;opacity:0.7;">From: California, USA</div>
|
|
115
|
+
</div>
|
|
116
|
+
|
|
117
|
+
<div class="guestbook-entry">
|
|
118
|
+
<span class="entry-name">💾 NetNinja42</span>
|
|
119
|
+
<span class="entry-date">February 28, 1997</span>
|
|
120
|
+
<p style="margin-top:4px;font-size:0.85rem;">
|
|
121
|
+
Great homepage! The animated stuff is rad. Can we exchange links?
|
|
122
|
+
Check out my site too!
|
|
123
|
+
</p>
|
|
124
|
+
<div style="font-size:0.7rem;opacity:0.7;">From: The Internet</div>
|
|
125
|
+
</div>
|
|
126
|
+
|
|
127
|
+
<div class="guestbook-entry">
|
|
128
|
+
<span class="entry-name">🎮 GameMaster2000</span>
|
|
129
|
+
<span class="entry-date">January 5, 1997</span>
|
|
130
|
+
<p style="margin-top:4px;font-size:0.85rem;">
|
|
131
|
+
First!! lol. Nice page {{AUTHOR_NAME}}!
|
|
132
|
+
The music is a bit much but overall VERY COOL SITE!!!
|
|
133
|
+
</p>
|
|
134
|
+
<div style="font-size:0.7rem;opacity:0.7;">From: New York, USA</div>
|
|
135
|
+
</div>
|
|
136
|
+
|
|
137
|
+
<div class="guestbook-entry">
|
|
138
|
+
<span class="entry-name">🌸 StarChild</span>
|
|
139
|
+
<span class="entry-date">December 25, 1996</span>
|
|
140
|
+
<p style="margin-top:4px;font-size:0.85rem;">
|
|
141
|
+
Merry Christmas! 🎄 Found your page totally by accident and I'm so glad I did.
|
|
142
|
+
Signing from my shiny new Pentium II!!
|
|
143
|
+
</p>
|
|
144
|
+
<div style="font-size:0.7rem;opacity:0.7;">From: Canada 🍁</div>
|
|
145
|
+
</div>
|
|
146
|
+
|
|
147
|
+
</div>
|
|
148
|
+
|
|
149
|
+
</td>
|
|
150
|
+
</tr>
|
|
151
|
+
|
|
152
|
+
<tr>
|
|
153
|
+
<td colspan="2" id="footer-cell">
|
|
154
|
+
<div class="star-divider">✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦</div>
|
|
155
|
+
<p style="font-size:0.75rem;margin:4px 0;">
|
|
156
|
+
© {{YEAR}} <strong>{{AUTHOR_NAME}}</strong> — All Rights Reserved
|
|
157
|
+
| <a href="index.html">Home</a>
|
|
158
|
+
</p>
|
|
159
|
+
<p style="font-size:0.65rem;opacity:0.6;margin-top:6px;">
|
|
160
|
+
<a href="https://bestsugardaddyapps.com/">Best Sugar Daddy Apps</a>
|
|
161
|
+
</p>
|
|
162
|
+
<p style="font-size:0.7rem;margin:4px 0;">
|
|
163
|
+
<span class="netscape-badge">Best viewed in Netscape Navigator 4.0<br>at 800×600 resolution</span>
|
|
164
|
+
</p>
|
|
165
|
+
</td>
|
|
166
|
+
</tr>
|
|
167
|
+
|
|
168
|
+
</table>
|
|
169
|
+
</div>
|
|
170
|
+
|
|
171
|
+
<script src="js/main.js"></script>
|
|
172
|
+
</body>
|
|
173
|
+
</html>
|
|
@@ -0,0 +1,193 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<meta name="generator" content="create-geocities-app">
|
|
7
|
+
<title>{{SITE_NAME}} — Welcome!</title>
|
|
8
|
+
<link rel="stylesheet" href="css/style.css">
|
|
9
|
+
</head>
|
|
10
|
+
<body>
|
|
11
|
+
|
|
12
|
+
<!-- Falling effect elements spawned by JS -->
|
|
13
|
+
<!-- Matrix rain canvas -->
|
|
14
|
+
<canvas id="matrix-canvas"></canvas>
|
|
15
|
+
<div id="matrix-hint">[M] toggle matrix</div>
|
|
16
|
+
|
|
17
|
+
<!-- Lightbox -->
|
|
18
|
+
<div id="lightbox">
|
|
19
|
+
<span id="lightbox-close">✕</span>
|
|
20
|
+
<img id="lightbox-img" src="" alt="">
|
|
21
|
+
<div id="lightbox-caption"></div>
|
|
22
|
+
</div>
|
|
23
|
+
|
|
24
|
+
<div id="page-wrapper">
|
|
25
|
+
<table id="main-table" cellpadding="0" cellspacing="0">
|
|
26
|
+
|
|
27
|
+
<!-- ── HEADER ── -->
|
|
28
|
+
<tr>
|
|
29
|
+
<td colspan="2" id="header-cell">
|
|
30
|
+
<div class="marquee-wrapper">
|
|
31
|
+
<span class="marquee-inner">
|
|
32
|
+
★ Welcome to {{SITE_NAME}} ★ Est. {{YEAR}}
|
|
33
|
+
★ Made with ❤️ by {{AUTHOR_NAME}} ★
|
|
34
|
+
This site is best viewed in Netscape Navigator 4.0 at 800×600
|
|
35
|
+
</span>
|
|
36
|
+
</div>
|
|
37
|
+
<h1 class="rainbow" style="margin:8px 0 4px;">{{SITE_NAME}}</h1>
|
|
38
|
+
<p style="font-size:0.8rem;opacity:0.8;">
|
|
39
|
+
<span class="blink">★</span>
|
|
40
|
+
Welcome to my corner of the web!
|
|
41
|
+
<span class="blink">★</span>
|
|
42
|
+
</p>
|
|
43
|
+
</td>
|
|
44
|
+
</tr>
|
|
45
|
+
|
|
46
|
+
<!-- ── CONTENT ROW ── -->
|
|
47
|
+
<tr id="content-row">
|
|
48
|
+
|
|
49
|
+
<!-- ── SIDEBAR ── -->
|
|
50
|
+
<td id="sidebar">
|
|
51
|
+
|
|
52
|
+
<div class="panel">
|
|
53
|
+
<div class="panel-title">📡 Navigation</div>
|
|
54
|
+
{{NAV_LINKS}}
|
|
55
|
+
</div>
|
|
56
|
+
|
|
57
|
+
<div class="panel" style="text-align:center;">
|
|
58
|
+
<div class="panel-title">🌐 Site Info</div>
|
|
59
|
+
<span class="spinning-globe">🌍</span>
|
|
60
|
+
<div style="font-size:0.7rem;margin-top:4px;">Theme: {{THEME_NAME}}</div>
|
|
61
|
+
<span id="page-clock">00:00:00</span>
|
|
62
|
+
</div>
|
|
63
|
+
|
|
64
|
+
<div class="panel" style="text-align:center;">
|
|
65
|
+
<div class="panel-title">🎵 Music</div>
|
|
66
|
+
<button id="music-btn" class="retro-btn" style="width:100%;font-size:0.7rem;">🎵 PLAY MUSIC</button>
|
|
67
|
+
</div>
|
|
68
|
+
|
|
69
|
+
<div class="panel" style="text-align:center;font-size:0.75rem;">
|
|
70
|
+
<div class="panel-title">📊 Visitors</div>
|
|
71
|
+
<div id="visitor-counter-box">
|
|
72
|
+
<div class="counter-label">You are visitor #</div>
|
|
73
|
+
<div class="counter-digits" id="counter-display"></div>
|
|
74
|
+
</div>
|
|
75
|
+
</div>
|
|
76
|
+
|
|
77
|
+
<div class="webring">
|
|
78
|
+
<div class="webring-title">⚡ GeoCities Web Ring ⚡</div>
|
|
79
|
+
<div class="webring-nav">
|
|
80
|
+
<a href="#" class="webring-btn">◀ Prev</a>
|
|
81
|
+
<a href="#" class="webring-btn">🏠 Hub</a>
|
|
82
|
+
<a href="#" class="webring-btn">Next ▶</a>
|
|
83
|
+
</div>
|
|
84
|
+
</div>
|
|
85
|
+
|
|
86
|
+
</td>
|
|
87
|
+
|
|
88
|
+
<!-- ── MAIN CONTENT ── -->
|
|
89
|
+
<td id="main-content">
|
|
90
|
+
|
|
91
|
+
<div class="panel">
|
|
92
|
+
<div class="panel-title">🏠 Welcome to My Homepage! <span class="new-badge">NEW</span></div>
|
|
93
|
+
|
|
94
|
+
<p>
|
|
95
|
+
Hey there, internet traveler! 👋 You've found <strong>{{SITE_NAME}}</strong>,
|
|
96
|
+
the personal homepage of <strong>{{AUTHOR_NAME}}</strong>.
|
|
97
|
+
Pull up a chair, grab a Surge, and stay a while!
|
|
98
|
+
</p>
|
|
99
|
+
|
|
100
|
+
<div class="star-divider">✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦</div>
|
|
101
|
+
|
|
102
|
+
<h2 class="neon-text">🔥 What's New</h2>
|
|
103
|
+
<ul style="margin-left:16px;font-size:0.85rem;">
|
|
104
|
+
<li><span class="new-badge">NEW</span> <strong>{{YEAR}}</strong> — Site launched! Welcome!</li>
|
|
105
|
+
<li>🖼️ Gallery page now live — check it out!</li>
|
|
106
|
+
<li>📖 Guestbook open — please sign it!</li>
|
|
107
|
+
<li>🔗 Cool Links page updated with fresh finds.</li>
|
|
108
|
+
</ul>
|
|
109
|
+
|
|
110
|
+
<hr class="retro-divider">
|
|
111
|
+
|
|
112
|
+
<h2 class="neon-text">👤 About This Site</h2>
|
|
113
|
+
<p>
|
|
114
|
+
This is the personal website of <strong>{{AUTHOR_NAME}}</strong>.
|
|
115
|
+
Here you'll find my thoughts, photos, cool links, and more.
|
|
116
|
+
I built this page all by myself — no frames were harmed in the making!
|
|
117
|
+
</p>
|
|
118
|
+
<p>
|
|
119
|
+
Feel free to look around. Don't forget to
|
|
120
|
+
<a href="guestbook.html">sign my guestbook</a>!
|
|
121
|
+
</p>
|
|
122
|
+
</div>
|
|
123
|
+
|
|
124
|
+
<!-- Under Construction -->
|
|
125
|
+
<div class="under-construction">
|
|
126
|
+
<div class="uc-inner">
|
|
127
|
+
<span class="uc-icon">🚧</span>
|
|
128
|
+
THIS PAGE IS UNDER CONSTRUCTION
|
|
129
|
+
<span class="uc-icon">🚧</span>
|
|
130
|
+
<br>
|
|
131
|
+
<span style="font-size:0.75rem;font-weight:normal;">
|
|
132
|
+
Check back soon for more awesome content!
|
|
133
|
+
</span>
|
|
134
|
+
</div>
|
|
135
|
+
</div>
|
|
136
|
+
|
|
137
|
+
<div class="panel">
|
|
138
|
+
<div class="panel-title">💡 Did You Know?</div>
|
|
139
|
+
<p style="font-size:0.85rem;">
|
|
140
|
+
You can press <strong style="color:var(--heading);">[M]</strong> on your keyboard
|
|
141
|
+
to activate the secret Matrix rain effect! 🕶️
|
|
142
|
+
</p>
|
|
143
|
+
<p style="font-size:0.85rem;">
|
|
144
|
+
This site uses <strong>ZERO external dependencies</strong>.
|
|
145
|
+
Pure HTML, CSS, and vanilla JavaScript — just like 1996! 🖥️
|
|
146
|
+
</p>
|
|
147
|
+
</div>
|
|
148
|
+
|
|
149
|
+
<div class="panel">
|
|
150
|
+
<div class="panel-title">📬 Contact Me</div>
|
|
151
|
+
<p style="font-size:0.85rem;">
|
|
152
|
+
Want to reach me? Send me an email!
|
|
153
|
+
<br><br>
|
|
154
|
+
<a href="mailto:{{AUTHOR_NAME}}@example.com" class="retro-btn">
|
|
155
|
+
📧 Email Me!
|
|
156
|
+
</a>
|
|
157
|
+
|
|
158
|
+
<a href="guestbook.html" class="retro-btn">📖 Sign Guestbook</a>
|
|
159
|
+
</p>
|
|
160
|
+
</div>
|
|
161
|
+
|
|
162
|
+
</td>
|
|
163
|
+
</tr>
|
|
164
|
+
|
|
165
|
+
<!-- ── FOOTER ── -->
|
|
166
|
+
<tr>
|
|
167
|
+
<td colspan="2" id="footer-cell">
|
|
168
|
+
<div class="star-divider">✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦</div>
|
|
169
|
+
<p style="font-size:0.75rem;margin:4px 0;">
|
|
170
|
+
© {{YEAR}} <strong>{{AUTHOR_NAME}}</strong> — All Rights Reserved
|
|
171
|
+
|
|
|
172
|
+
<a href="index.html">Home</a>
|
|
173
|
+
|
|
|
174
|
+
<a href="guestbook.html">Guestbook</a>
|
|
175
|
+
</p>
|
|
176
|
+
<p style="font-size:0.7rem;margin:4px 0;">
|
|
177
|
+
<span class="netscape-badge">Best viewed in Netscape Navigator 4.0<br>at 800×600 resolution</span>
|
|
178
|
+
</p>
|
|
179
|
+
<p style="font-size:0.65rem;opacity:0.6;margin-top:6px;">
|
|
180
|
+
Made with create-geocities-app ✨ No cookies. No tracking. Just vibes.
|
|
181
|
+
</p>
|
|
182
|
+
<p style="font-size:0.65rem;opacity:0.6;margin-top:6px;">
|
|
183
|
+
<a href="https://bestsugardaddyapps.com/">Best Sugar Daddy Apps</a>
|
|
184
|
+
</p>
|
|
185
|
+
</td>
|
|
186
|
+
</tr>
|
|
187
|
+
|
|
188
|
+
</table>
|
|
189
|
+
</div>
|
|
190
|
+
|
|
191
|
+
<script src="js/main.js"></script>
|
|
192
|
+
</body>
|
|
193
|
+
</html>
|