Skip to content

Commit ed71de5

Browse files
MrBlankCodingMrBlankCoding
authored
Merge pull request #1 from MrBlankCoding/Website
Website
2 parents 2a9eb02 + 4b4adc8 commit ed71de5

File tree

7 files changed

+1154
-0
lines changed

7 files changed

+1154
-0
lines changed

‎web/index.html

Lines changed: 302 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,302 @@
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+
<title>Code Tweak - Chrome Extension</title>
7+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8+
<link href="style.css" rel="stylesheet">
9+
</head>
10+
<body>
11+
<!-- Hero Section -->
12+
<section class="hero" id="hero">
13+
<div class="code-background"></div>
14+
<div class="container">
15+
<div class="hero-content">
16+
<div class="logo">
17+
<div class="code-brackets">{ct}</div>
18+
</div>
19+
<h1 class="glitch" data-text="Code Tweak">Code Tweak</h1>
20+
<p>Code Tweak empowers your browser with custom UserScript support.</p>
21+
<div class="cta-wrapper">
22+
<a href="#" class="cta-button">
23+
<i class="fab fa-chrome"></i> Add to Chrome
24+
<span class="button-glow"></span>
25+
</a>
26+
</div>
27+
<div class="scroll-indicator">
28+
<p>Scroll to explore</p>
29+
<i class="fas fa-chevron-down bounce"></i>
30+
</div>
31+
</div>
32+
</div>
33+
</section>
34+
35+
<!-- Features Section -->
36+
<section class="features" id="features">
37+
<div class="container">
38+
<h2 class="section-title">
39+
<span class="code-symbol">&lt;</span>
40+
Key Features
41+
<span class="code-symbol">/&gt;</span>
42+
</h2>
43+
44+
<div class="feature-grid">
45+
<div class="feature-card" data-aos="fade-up">
46+
<div class="feature-icon">
47+
<i class="fas fa-code"></i>
48+
</div>
49+
<div class="feature-content">
50+
<h3 class="feature-title">Built-in Script Editor</h3>
51+
<p>Edit user scripts in our custom all in browser code editor</p>
52+
</div>
53+
<div class="card-flourish"></div>
54+
</div>
55+
56+
<div class="feature-card" data-aos="fade-up" data-aos-delay="100">
57+
<div class="feature-icon">
58+
<i class="fas fa-crosshairs"></i>
59+
</div>
60+
<div class="feature-content">
61+
<h3 class="feature-title">Element Targeting</h3>
62+
<p>Point and click to identify DOM elements directly on any webpage</p>
63+
</div>
64+
<div class="card-flourish"></div>
65+
</div>
66+
67+
<div class="feature-card" data-aos="fade-up" data-aos-delay="200">
68+
<div class="feature-icon">
69+
<i class="fas fa-database"></i>
70+
</div>
71+
<div class="feature-content">
72+
<h3 class="feature-title">Greasy Fork Integration</h3>
73+
<p>Easily import exsisting userscripts</p>
74+
</div>
75+
<div class="card-flourish"></div>
76+
</div>
77+
78+
<div class="feature-card" data-aos="fade-up">
79+
<div class="feature-icon">
80+
<i class="fas fa-clipboard-list"></i>
81+
</div>
82+
<div class="feature-content">
83+
<h3 class="feature-title">Template Library</h3>
84+
<p>Use prebuilt template's for common script modifications</p>
85+
</div>
86+
<div class="card-flourish"></div>
87+
</div>
88+
89+
<div class="feature-card" data-aos="fade-up" data-aos-delay="100">
90+
<div class="feature-icon">
91+
<i class="fas fa-layer-group"></i>
92+
</div>
93+
<div class="feature-content">
94+
<h3 class="feature-title">Script Management</h3>
95+
<p>Our intuitive and simplistic dashboard makes it easy to manage all of your scripts in one place</p>
96+
</div>
97+
<div class="card-flourish"></div>
98+
</div>
99+
100+
<div class="feature-card" data-aos="fade-up" data-aos-delay="200">
101+
<div class="feature-icon">
102+
<i class="fas fa-bolt"></i>
103+
</div>
104+
<div class="feature-content">
105+
<h3 class="feature-title">Lightweight & Fast</h3>
106+
<p>High performance with minimal memory and CPU usage</p>
107+
</div>
108+
<div class="card-flourish"></div>
109+
</div>
110+
</div>
111+
</div>
112+
</section>
113+
114+
<!-- Interface Preview Section -->
115+
<section class="interface-preview" id="preview">
116+
<div class="container">
117+
<h2 class="section-title">
118+
<span class="code-symbol">&lt;</span>
119+
Interface Preview
120+
<span class="code-symbol">/&gt;</span>
121+
</h2>
122+
123+
<div class="preview-wrapper">
124+
<img src="screenshots/editor.png">
125+
</div>
126+
</div>
127+
</section>
128+
129+
<!-- How It Works Section -->
130+
<section class="how-it-works" id="how">
131+
<div class="container">
132+
<h2 class="section-title">
133+
<span class="code-symbol">&lt;</span>
134+
How It Works
135+
<span class="code-symbol">/&gt;</span>
136+
</h2>
137+
138+
<div class="steps">
139+
<div class="timeline-line"></div>
140+
141+
<div class="step" data-aos="fade-right">
142+
<div class="step-number">01</div>
143+
<div class="step-content">
144+
<h3>Install the Extension</h3>
145+
<p>Add Code Tweak to Chrome from the Web Store with a single click.</p>
146+
<div class="step-icon">
147+
<i class="fas fa-download"></i>
148+
</div>
149+
</div>
150+
</div>
151+
152+
<div class="step" data-aos="fade-left">
153+
<div class="step-number">02</div>
154+
<div class="step-content">
155+
<h3>Find or Create Scripts</h3>
156+
<p>Search for scripts on Greasy Fork or create your own with our editor.</p>
157+
<div class="step-icon">
158+
<i class="fas fa-pen-fancy"></i>
159+
</div>
160+
</div>
161+
</div>
162+
163+
<div class="step" data-aos="fade-right">
164+
<div class="step-number">03</div>
165+
<div class="step-content">
166+
<h3>Target Elements Easily</h3>
167+
<p>Right-click on any element to select it directly into your code.</p>
168+
<div class="step-icon">
169+
<i class="fas fa-bullseye"></i>
170+
</div>
171+
</div>
172+
</div>
173+
174+
<div class="step" data-aos="fade-left">
175+
<div class="step-number">04</div>
176+
<div class="step-content">
177+
<h3>Manage Your Scripts</h3>
178+
<p>Enable, disable, edit, or delete scripts from the dashboard.</p>
179+
<div class="step-icon">
180+
<i class="fas fa-sliders-h"></i>
181+
</div>
182+
</div>
183+
</div>
184+
</div>
185+
</div>
186+
</section>
187+
188+
<!-- FAQ Section -->
189+
<section class="faq" id="faq">
190+
<div class="container">
191+
<h2 class="section-title">
192+
<span class="code-symbol">&lt;</span>
193+
FAQ
194+
<span class="code-symbol">/&gt;</span>
195+
</h2>
196+
197+
<div class="accordion">
198+
<div class="accordion-item" data-aos="fade-up">
199+
<div class="accordion-header">
200+
<h3>What are user scripts?</h3>
201+
<div class="accordion-icon">
202+
<i class="fas fa-plus"></i>
203+
<i class="fas fa-minus"></i>
204+
</div>
205+
</div>
206+
<div class="accordion-content">
207+
<p>User scripts are small JavaScript programs that modify the behavior or appearance of websites you visit. They can add new features, remove annoyances, or make sites more usable. Think of them as mini-extensions that you can write yourself or download from the community.</p>
208+
</div>
209+
</div>
210+
211+
<div class="accordion-item" data-aos="fade-up" data-aos-delay="100">
212+
<div class="accordion-header">
213+
<h3>Is this extension compatible with scripts from other managers?</h3>
214+
<div class="accordion-icon">
215+
<i class="fas fa-plus"></i>
216+
<i class="fas fa-minus"></i>
217+
</div>
218+
</div>
219+
<div class="accordion-content">
220+
<p>Yes, this extension is compatible with most standard user scripts created for other popular script managers like Tampermonkey and Greasemonkey, as long as they follow common user script patterns and metadata formats.</p>
221+
</div>
222+
</div>
223+
224+
<div class="accordion-item" data-aos="fade-up" data-aos-delay="200">
225+
<div class="accordion-header">
226+
<h3>Can I import my existing scripts?</h3>
227+
<div class="accordion-icon">
228+
<i class="fas fa-plus"></i>
229+
<i class="fas fa-minus"></i>
230+
</div>
231+
</div>
232+
<div class="accordion-content">
233+
<p>Absolutley, you can easily import and export scripts you or the community has created.</p>
234+
</div>
235+
</div>
236+
237+
<div class="accordion-item" data-aos="fade-up" data-aos-delay="300">
238+
<div class="accordion-header">
239+
<h3>Does this extension collect any data?</h3>
240+
<div class="accordion-icon">
241+
<i class="fas fa-plus"></i>
242+
<i class="fas fa-minus"></i>
243+
</div>
244+
</div>
245+
<div class="accordion-content">
246+
<p>No, Code Tweak respects your privacy and doesnt collect your data.</p>
247+
</div>
248+
</div>
249+
</div>
250+
</div>
251+
</section>
252+
253+
<!-- Community Section -->
254+
<section class="community" id="community">
255+
<div class="container">
256+
<h2 class="section-title">
257+
<span class="code-symbol">&lt;</span>
258+
Join The Community
259+
<span class="code-symbol">/&gt;</span>
260+
</h2>
261+
262+
<div class="community-content">
263+
<div class="community-text" data-aos="fade-right">
264+
<p>Join likeminded developers creating and sharing userscripts. Get help, share your creations, and collaborate.</p>
265+
<div class="community-buttons">
266+
<a href="#" class="community-button">
267+
<i class="fab fa-github"></i> GitHub
268+
</a>
269+
<a href="#" class="community-button">
270+
<i class="fab fa-discord"></i> Discord
271+
</a>
272+
</div>
273+
</div>
274+
<div class="community-image" data-aos="fade-left">
275+
<div class="code-container">
276+
<pre><span class="comment">// Community highlight</span>
277+
<span class="keyword">function</span> <span class="function">joinCommunity</span>() {
278+
<span class="keyword">const</span> <span class="variable">dev</span> = <span class="keyword">new</span> <span class="constructor">Developer</span>(<span class="string">'you'</span>);
279+
<span class="variable">community</span>.<span class="method">welcome</span>(<span class="variable">dev</span>);
280+
<span class="keyword">return</span> <span class="variable">dev</span>.<span class="method">contribute</span>();
281+
}</pre>
282+
</div>
283+
</div>
284+
</div>
285+
</div>
286+
</section>
287+
288+
<!-- CTA Section -->
289+
<section class="cta-section" id="cta">
290+
<div class="container">
291+
<div class="cta-content">
292+
<h2>Ready to Transform Your Browsing?</h2>
293+
<p>Join many developers enhancing their web experience with custom scripts</p>
294+
<a href="#" class="cta-button large">
295+
<i class="fab fa-chrome"></i> Add to Chrome
296+
<span class="button-glow"></span>
297+
</a>
298+
</div>
299+
</div>
300+
</section>
301+
</body>
302+
</html>

‎web/screenshots/dashboard.png

187 KB
Loading

‎web/screenshots/editor.png

210 KB
Loading

‎web/screenshots/popup.png

44.9 KB
Loading

‎web/screenshots/toolSelect.png

26.7 KB
Loading

‎web/screenshots/tools.png

92.4 KB
Loading

0 commit comments

Comments
 (0)