Skip to content

Commit 75841bc

Browse files
NatuworkguyNatuworkguy
authored
Create index.html
1 parent 0643b91 commit 75841bc

File tree

1 file changed

+193
-0
lines changed

1 file changed

+193
-0
lines changed

‎pages-root/index.html‎

Lines changed: 193 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -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+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=content_copy" />
7+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
8+
<title>GameBro Studio</title>
9+
<style>
10+
body {
11+
margin: 0;
12+
font-family: Consolas, monospace;
13+
background: #141414;
14+
color: #fff;
15+
text-align: center;
16+
animation: fadeIn 1s ease-in;
17+
}
18+
header {
19+
background: #1f1f1f;
20+
padding: 2rem 1rem;
21+
border-bottom: 2px solid #00c8ff;
22+
}
23+
header img {
24+
width: 80px;
25+
height: 80px;
26+
}
27+
h1 {
28+
margin: 0.5rem 0 0.2rem;
29+
font-size: 2rem;
30+
color: #00c8ff;
31+
}
32+
p {
33+
margin: 0.2rem 0 1rem;
34+
color: #ccc;
35+
}
36+
.btn {
37+
display: inline-block;
38+
margin-top: 1rem;
39+
padding: 0.5rem 1rem;
40+
background: #00c8ff;
41+
color: #000;
42+
border-radius: 6px;
43+
text-decoration: none;
44+
font-weight: bold;
45+
transition: transform 0.2s ease;
46+
align-content: center;
47+
align-items: center;
48+
text-align: center;
49+
}
50+
.btn:hover {
51+
transform: scale(1.05);
52+
}
53+
.copy-btn {
54+
background: #222;
55+
color: #00c8ff;
56+
border: 1px solid #00c8ff;
57+
padding: 0.2rem 0.5rem;
58+
border-radius: 4px;
59+
cursor: pointer;
60+
font-size: 0.8rem;
61+
position: absolute;
62+
top: 8px;
63+
right: 8px;
64+
}
65+
.copy-btn:hover {
66+
background: #00c8ff;
67+
color: #000;
68+
}
69+
section {
70+
padding: 2rem 1rem;
71+
border-bottom: 1px solid #333;
72+
}
73+
h2 {
74+
color: #00c8ff;
75+
font-size: 1.5rem;
76+
margin-bottom: 1rem;
77+
}
78+
ul {
79+
list-style: none;
80+
padding: 0;
81+
}
82+
li {
83+
margin: 0.5rem 0;
84+
}
85+
code, pre {
86+
background: #1e1e1e;
87+
color: #00ffcc;
88+
padding: 1rem;
89+
display: block;
90+
overflow-x: auto;
91+
border-radius: 6px;
92+
text-align: left;
93+
position: relative;
94+
}
95+
footer {
96+
text-align: center;
97+
padding: 1rem;
98+
font-size: 0.9rem;
99+
background: #1f1f1f;
100+
color: #666;
101+
}
102+
</style>
103+
</head>
104+
<body>
105+
<header class="animate__animated animate__slideInDown">
106+
<img src="https://raw.githubusercontent.com/Natuworkguy/GameBro/main/assets/icon.png" alt="GameBro logo" class="animate__animated animate__rotateIn" />
107+
<h1>🎮 GameBro Studio</h1>
108+
<p>The pixel-perfect code-first game editor made for devs who get it.</p>
109+
<a href="#download" class="btn animate__animated animate__pulse animate__infinite">Download Now</a>
110+
</header>
111+
112+
<section id="features" class="animate__animated animate__fadeInUp scroll-fade">
113+
<h2>🔥 Features</h2>
114+
<ul>
115+
<li>🎨 Visual Sprite Editor with JSON power-ups</li>
116+
<li>🧠 Custom data for real dev logic</li>
117+
<li>🧩 SpriteGroups to keep things neat</li>
118+
<li>📦 Export as Python + Pygame</li>
119+
<li>🎛️ Ctrl-powered keybinds for speed</li>
120+
</ul>
121+
</section>
122+
123+
<section id="examples" class="animate__animated animate__fadeInUp scroll-fade">
124+
<h2>📁 What It Exports</h2>
125+
<pre><code id="code-export"># -*- coding: utf-8 -*-
126+
from gamebro import Sprite, SpriteGroup
127+
128+
# Project: s
129+
# Created by GameBro Studio
130+
EvilBoss: Sprite = Sprite(customdata={'hp': 3000, 'attack': 'laser'}, name="EvilBoss")
131+
</code><button class="copy-btn" onclick="copyCode('code-export')">
132+
<span class="material-symbols-outlined">
133+
content_copy
134+
</span>
135+
</button></pre>
136+
</section>
137+
138+
<section id="json" class="animate__animated animate__fadeInUp scroll-fade">
139+
<h2>🧾 JSON Sprites</h2>
140+
<p>Make sprites like mods using a JSON file:</p>
141+
<pre><code id="code-json">{
142+
"name": "EvilBoss",
143+
"template": "boss",
144+
"data": {
145+
"hp": 3000,
146+
"attack": "laser"
147+
},
148+
"display_color": [255, 0, 0]
149+
}</code><button class="copy-btn" onclick="copyCode('code-json')">
150+
<span class="material-symbols-outlined">
151+
content_copy
152+
</span>
153+
</button></pre>
154+
<p><em>Templates override values in the file (like setting the name color).</em></p>
155+
</section>
156+
157+
<section id="download" class="animate__animated animate__fadeInUp scroll-fade">
158+
<h2>⬇️ Download</h2>
159+
<a href="https://github.com/Natuworkguy/GameBro" class="btn">Visit GitHub</a>
160+
<a href="https://github.com/Natuworkguy/GameBro/archive/refs/heads/main.zip" class="btn">Download ZIP</a>
161+
</section>
162+
163+
<footer>
164+
<p>🛠️ Built with love by Natuworkguy</p>
165+
</footer>
166+
167+
<script>
168+
function copyCode(id) {
169+
const code = document.getElementById(id);
170+
const text = code.innerText;
171+
navigator.clipboard.writeText(text).then(() => {
172+
alert("Copied to clipboard!");
173+
}).catch(err => {
174+
console.error('Copy failed', err);
175+
alert("Press Ctrl+C to copy manually.");
176+
});
177+
}
178+
179+
const faders = document.querySelectorAll('.scroll-fade');
180+
const options = {
181+
threshold: 0.1
182+
};
183+
const observer = new IntersectionObserver((entries) => {
184+
entries.forEach(entry => {
185+
if (entry.isIntersecting) {
186+
entry.target.classList.add('animate__fadeInUp');
187+
}
188+
});
189+
}, options);
190+
faders.forEach(fader => observer.observe(fader));
191+
</script>
192+
</body>
193+
</html>

0 commit comments

Comments
 (0)