Skip to content

Commit 8911b42

Browse files
IvanKoskovIvanKoskov
committed
WEBSITE RELEASE
1 parent 2226a54 commit 8911b42

File tree

1 file changed

+359
-0
lines changed

1 file changed

+359
-0
lines changed

‎index.html

Lines changed: 359 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,359 @@
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>SXMac</title>
7+
<!-- Bootstrap CSS -->
8+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
9+
<!-- Font Awesome для иконок -->
10+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
11+
<!-- Google Fonts: Inter -->
12+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
13+
<style>
14+
body {
15+
background: linear-gradient(45deg, #0f0f1a, #1a2633);
16+
background-size: 200% 200%;
17+
animation: gradientShift 10s ease infinite;
18+
color: #ffffff;
19+
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
20+
margin: 0;
21+
padding: 0;
22+
min-height: 100vh;
23+
display: flex;
24+
flex-direction: column;
25+
font-weight: 400;
26+
}
27+
@keyframes gradientShift {
28+
0% { background-position: 0% 0%; }
29+
50% { background-position: 100% 100%; }
30+
100% { background-position: 0% 0%; }
31+
}
32+
.header {
33+
background: linear-gradient(90deg, #3b82f6 0%, #1e40af 100%);
34+
height: 60px;
35+
display: flex;
36+
align-items: center;
37+
justify-content: center;
38+
padding: 0 30px;
39+
}
40+
.header-title {
41+
font-size: 26px;
42+
font-weight: 700;
43+
color: #ffffff;
44+
letter-spacing: 0.5px;
45+
}
46+
.content {
47+
flex: 1;
48+
padding: 30px;
49+
max-width: 1000px;
50+
margin: 0 auto;
51+
}
52+
.tab-content {
53+
margin-top: 20px;
54+
}
55+
.readme-content h2 {
56+
font-size: 30px;
57+
font-weight: 600;
58+
color: #ffffff;
59+
margin-bottom: 20px;
60+
opacity: 0;
61+
animation: fadeIn 0.5s ease forwards 0.2s;
62+
letter-spacing: 0.3px;
63+
}
64+
.feature-section {
65+
padding: 15px;
66+
border-left: 2px solid #3b82f6;
67+
margin-bottom: 20px;
68+
transition: opacity 0.3s ease, border-left-width 0.3s ease, background 0.3s ease;
69+
opacity: 0;
70+
animation: fadeIn 0.5s ease forwards 0.4s;
71+
display: flex;
72+
align-items: flex-start;
73+
gap: 10px;
74+
}
75+
.feature-section:hover {
76+
opacity: 0.95;
77+
border-left-width: 4px;
78+
background: rgba(255, 255, 255, 0.05);
79+
}
80+
.feature-section h3 {
81+
font-size: 22px;
82+
font-weight: 500;
83+
background: linear-gradient(90deg, #3b82f6, #1e40af);
84+
-webkit-background-clip: text;
85+
-webkit-text-fill-color: transparent;
86+
margin-bottom: 10px;
87+
letter-spacing: 0.2px;
88+
}
89+
.feature-section p {
90+
font-size: 16px;
91+
line-height: 1.8;
92+
margin: 0;
93+
color: #e0e0e0;
94+
font-weight: 400;
95+
}
96+
.feature-icon {
97+
font-size: 18px;
98+
color: #3b82f6;
99+
transition: transform 0.3s ease;
100+
flex-shrink: 0;
101+
}
102+
.feature-section:hover .feature-icon {
103+
transform: scale(1.2);
104+
}
105+
.feature-text {
106+
flex-grow: 1;
107+
}
108+
.releases-section {
109+
margin-top: 40px;
110+
}
111+
.releases-section h2 {
112+
font-size: 26px;
113+
font-weight: 600;
114+
color: #ffffff;
115+
margin-bottom: 15px;
116+
opacity: 0;
117+
animation: fadeIn 0.5s ease forwards 0.6s;
118+
}
119+
.release-link {
120+
color: #66b0ff;
121+
text-decoration: none;
122+
font-weight: 500;
123+
font-size: 16px;
124+
display: inline-flex;
125+
align-items: center;
126+
gap: 8px;
127+
}
128+
.release-link:hover {
129+
text-decoration: underline;
130+
}
131+
.footer {
132+
background: linear-gradient(90deg, #3b82f6 0%, #1e40af 100%);
133+
height: 50px;
134+
display: flex;
135+
align-items: center;
136+
justify-content: center;
137+
padding: 0 30px;
138+
}
139+
.footer .author {
140+
font-size: 14px;
141+
font-weight: 500;
142+
color: #ffffff;
143+
opacity: 0;
144+
animation: fadeIn 0.5s ease forwards 0.8s;
145+
}
146+
@keyframes fadeIn {
147+
from { opacity: 0; }
148+
to { opacity: 1; }
149+
}
150+
.nav-tabs {
151+
justify-content: center;
152+
border-bottom: none;
153+
max-width: 1200px;
154+
margin: 0 auto;
155+
}
156+
.nav-tabs .nav-link {
157+
color: #ffffff;
158+
background: rgba(255, 255, 255, 0.1);
159+
border: none;
160+
padding: 10px 30px;
161+
font-size: 18px;
162+
font-weight: 500;
163+
transition: all 0.3s ease;
164+
border-radius: 8px;
165+
}
166+
.nav-tabs .nav-link.active {
167+
background: linear-gradient(90deg, #3b82f6, #1e40af);
168+
color: #ffffff;
169+
font-weight: 600;
170+
}
171+
.nav-tabs .nav-link:hover {
172+
background: rgba(255, 255, 255, 0.2);
173+
}
174+
.requirements-list {
175+
margin-top: 15px;
176+
display: flex;
177+
flex-direction: column;
178+
gap: 12px;
179+
}
180+
.requirement-item {
181+
display: flex;
182+
align-items: center;
183+
gap: 10px;
184+
padding: 8px;
185+
background: rgba(59, 130, 246, 0.1);
186+
border-radius: 5px;
187+
transition: transform 0.3s ease, background 0.3s ease;
188+
}
189+
.requirement-item:hover {
190+
transform: translateX(5px);
191+
background: rgba(59, 130, 246, 0.2);
192+
}
193+
.requirement-icon {
194+
font-size: 16px;
195+
color: #3b82f6;
196+
transition: transform 0.3s ease;
197+
}
198+
.requirement-item:hover .requirement-icon {
199+
transform: rotate(20deg);
200+
}
201+
.requirement-item span {
202+
font-size: 16px;
203+
color: #e0e0e0;
204+
font-weight: 400;
205+
}
206+
.requirement-item span strong {
207+
color: #ffffff;
208+
font-weight: 600;
209+
}
210+
</style>
211+
</head>
212+
<body>
213+
<div class="header">
214+
<div class="header-title">SXMac</div>
215+
</div>
216+
217+
<div class="content">
218+
<!-- Вкладки -->
219+
<ul class="nav nav-tabs" id="myTab" role="tablist">
220+
<li class="nav-item" role="presentation">
221+
<button class="nav-link active" id="about-tab" data-bs-toggle="tab" data-bs-target="#about" type="button" role="tab" aria-controls="about" aria-selected="true">About</button>
222+
</li>
223+
<li class="nav-item" role="presentation">
224+
<button class="nav-link" id="compatibility-tab" data-bs-toggle="tab" data-bs-target="#compatibility" type="button" role="tab" aria-controls="compatibility" aria-selected="false">Compatibility</button>
225+
</li>
226+
</ul>
227+
228+
<div class="tab-content" id="myTabContent">
229+
<!-- Вкладка About -->
230+
<div class="tab-pane fade show active" id="about" role="tabpanel" aria-labelledby="about-tab">
231+
<div class="readme-content">
232+
<h2>About SXMac</h2>
233+
<div id="about-content">
234+
<div class="feature-section">
235+
<i class="fab fa-apple feature-icon"></i>
236+
<div class="feature-text">
237+
<h3>Overview</h3>
238+
<p>SXMac is a lightweight, note-like app that can be used as a rich text editor, Markdown editor and preview, and code editor with more than 100 supported languages. If you need specific files or anything else in one place.</p>
239+
</div>
240+
</div>
241+
<div class="feature-section">
242+
<i class="fas fa-lightbulb feature-icon"></i>
243+
<div class="feature-text">
244+
<h3>Simplicity</h3>
245+
<p>While being about simplicity, SXMac combines all needs for editing any kind of text. We don’t always want to set it up, but work out of the box! That is all about it!</p>
246+
</div>
247+
</div>
248+
<div class="feature-section">
249+
<i class="fas fa-pen feature-icon"></i>
250+
<div class="feature-text">
251+
<h3>Note Taking</h3>
252+
<p>SXMac can be used as a note-taking app with a simple and clear interface that gets the job done. The main focus is to preview .md files and dynamically see changes in your editor, with file export, easy import, and a centralized experience.</p>
253+
</div>
254+
</div>
255+
<div class="feature-section">
256+
<i class="fas fa-unity feature-icon"></i>
257+
<div class="feature-text">
258+
<h3>Unity</h3>
259+
<p>SXMac lets you quickly view or edit files. You can easily drop them into the documents folder for recognition or use a file picker box.</p>
260+
</div>
261+
</div>
262+
<div class="feature-section">
263+
<i class="fas fa-code feature-icon"></i>
264+
<div class="feature-text">
265+
<h3>Source Files Editor</h3>
266+
<p>Code highlighting without effort for any files you need. Yes, you can use it for basic coding with all editor functionality!</p>
267+
</div>
268+
</div>
269+
<div class="feature-section">
270+
<i class="fas fa-code feature-icon"></i>
271+
<div class="feature-text">
272+
<h3>Markdown Editor</h3>
273+
<p>Syntax highlighting for a clean, clear view.</p>
274+
</div>
275+
</div>
276+
<div class="feature-section">
277+
<i class="fas fa-eye feature-icon"></i>
278+
<div class="feature-text">
279+
<h3>Preview Rich Markdown</h3>
280+
<p>Instantly preview your Markdown file (.md) with all features supported!</p>
281+
</div>
282+
</div>
283+
<div class="feature-section">
284+
<i class="fas fa-adjust feature-icon"></i>
285+
<div class="feature-text">
286+
<h3>Quick Preview Changes</h3>
287+
<p>Quickly change the background color and see how it looks on different backgrounds.</p>
288+
</div>
289+
</div>
290+
<div class="feature-section">
291+
<i class="fas fa-tools feature-icon"></i>
292+
<div class="feature-text">
293+
<h3>Handy Features</h3>
294+
<p>Quick actions in the right place! Double-click and perform needed actions fast from a small menu!</p>
295+
</div>
296+
</div>
297+
<div class="feature-section">
298+
<i class="fas fa-arrows-alt feature-icon"></i>
299+
<div class="feature-text">
300+
<h3>Drag and Drop</h3>
301+
<p>This makes the app 100x more usable! Select a file from any mess and add it straight to the main menu!</p>
302+
</div>
303+
</div>
304+
<div class="feature-section">
305+
<i class="fas fa-plus feature-icon"></i>
306+
<div class="feature-text">
307+
<h3>Additional Features</h3>
308+
<p>Includes an HTML editor with website preview — write and view HTML pages right in the app! Plus, many more features not mentioned here. Download SXMac to share your opinion and help us improve!</p>
309+
</div>
310+
</div>
311+
</div>
312+
</div>
313+
</div>
314+
315+
<!-- Вкладка Compatibility -->
316+
<div class="tab-pane fade" id="compatibility" role="tabpanel" aria-labelledby="compatibility-tab">
317+
<div class="readme-content">
318+
<h2>Compatibility</h2>
319+
<div id="compatibility-content">
320+
<div class="feature-section">
321+
<i class="fas fa-laptop feature-icon"></i>
322+
<div class="feature-text">
323+
<h3>System Requirements</h3>
324+
<p>SXMac runs smoothly on macOS 14.6 and later. Whether you're rocking an Intel-based Mac or the latest Apple Silicon (M1, M2, and beyond), we've got you covered!</p>
325+
<div class="requirements-list">
326+
<div class="requirement-item">
327+
<i class="fas fa-check-circle requirement-icon"></i>
328+
<span><strong>OS:</strong> macOS 14.6 or newer</span>
329+
</div>
330+
<div class="requirement-item">
331+
<i class="fas fa-microchip requirement-icon"></i>
332+
<span><strong>CPU:</strong> Intel x86_64 or Apple Silicon (ARM64)</span>
333+
</div>
334+
<div class="requirement-item">
335+
<i class="fas fa-hdd requirement-icon"></i>
336+
<span><strong>Storage:</strong> 20 MB free space</span>
337+
</div>
338+
</div>
339+
</div>
340+
</div>
341+
</div>
342+
</div>
343+
</div>
344+
</div>
345+
346+
<div class="releases-section">
347+
<h2>Releases</h2>
348+
<p>Latest release: <a href="https://github.com/IvanKoskov/SXMac/releases/latest" class="release-link" target="_blank"><i class="fab fa-github"></i> GitHub Releases</a></p>
349+
</div>
350+
</div>
351+
352+
<div class="footer">
353+
<div class="author">By Evan Matthew</div>
354+
</div>
355+
356+
<!-- Bootstrap JS -->
357+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
358+
</body>
359+
</html>

0 commit comments

Comments
 (0)