Skip to content

Commit 7a56d3c

Browse files
WizardLoopWizardLoop
authored
Create index.html
1 parent 1b3c5d1 commit 7a56d3c

File tree

1 file changed

+288
-0
lines changed

1 file changed

+288
-0
lines changed

‎index.html‎

Lines changed: 288 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,288 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>MagicLottie</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
7+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Varela+Round&display=swap">
8+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css">
9+
10+
<meta name="description" content="MagicLottie is a beautiful, open-source, mobile-first Lottie & TGS animation editor. Import, preview, edit, and export Lottie JSON or Telegram TGS files — all in your browser, no server required!">
11+
<meta name="theme-color" content="#342356">
12+
13+
<!-- Favicon -->
14+
<link rel="icon" type="image/png" sizes="32x32" href="https://avatars.githubusercontent.com/WizardLoop">
15+
<link rel="icon" type="image/png" sizes="192x192" href="https://avatars.githubusercontent.com/WizardLoop">
16+
<link rel="apple-touch-icon" sizes="180x180" href="https://avatars.githubusercontent.com/WizardLoop">
17+
<link rel="shortcut icon" href="https://avatars.githubusercontent.com/WizardLoop">
18+
19+
<!-- Open Graph (Facebook, WhatsApp, Telegram, LinkedIn) -->
20+
<meta property="og:title" content="MagicLottie — Lottie/TGS Editor">
21+
<meta property="og:description" content="Edit, preview, and export Lottie or TGS (Telegram) animations easily. 100% browser, open-source, mobile-first.">
22+
<meta property="og:image" content="https://avatars.githubusercontent.com/WizardLoop">
23+
<meta property="og:url" content="https://wizardloop.github.io/magiclottie/">
24+
<meta property="og:type" content="website">
25+
26+
<!-- Twitter Card -->
27+
<meta name="twitter:card" content="summary">
28+
<meta name="twitter:title" content="MagicLottie — Lottie/TGS Editor">
29+
<meta name="twitter:description" content="Mobile-first Lottie/TGS animation editor. Open, fast, and fun!">
30+
<meta name="twitter:image" content="https://avatars.githubusercontent.com/WizardLoop">
31+
32+
<style>
33+
html, body {
34+
height: 100%;
35+
margin: 0;
36+
padding: 0;
37+
background: linear-gradient(140deg, #342356 0%, #593484 100%);
38+
color: #fff;
39+
font-family: 'Varela Round', Arial, sans-serif;
40+
min-height: 100vh;
41+
width: 100vw;
42+
box-sizing: border-box;
43+
overflow: hidden;
44+
}
45+
body {
46+
display: flex;
47+
flex-direction: column;
48+
min-height: 100vh;
49+
justify-content: center;
50+
align-items: center;
51+
box-sizing: border-box;
52+
overflow: hidden;
53+
height: 100vh;
54+
width: 100vw;
55+
}
56+
.container {
57+
width: 100%;
58+
max-width: 430px;
59+
padding: 1.2rem;
60+
background: rgba(32,18,56,0.94);
61+
border-radius: 22px;
62+
box-shadow: 0 6px 32px 0 rgba(51,28,92,0.28);
63+
display: flex;
64+
flex-direction: column;
65+
align-items: center;
66+
margin-top: 0;
67+
margin-bottom: 0;
68+
height: auto;
69+
min-height: 0;
70+
}
71+
h1 {
72+
margin: 0 0 20px 0;
73+
font-size: 2.1rem;
74+
letter-spacing: 0.05em;
75+
font-weight: bold;
76+
color: #e8e0ff;
77+
text-shadow: 0 2px 8px #2b1658;
78+
display: flex;
79+
align-items: center;
80+
gap: 0.7rem;
81+
}
82+
.logo {
83+
width: 38px;
84+
height: 38px;
85+
border-radius: 50%;
86+
box-shadow: 0 2px 12px 0 #6949be55;
87+
}
88+
.input-section {
89+
width: 100%;
90+
display: flex;
91+
flex-direction: column;
92+
gap: 12px;
93+
align-items: center;
94+
margin-bottom: 6px;
95+
}
96+
.file-row {
97+
width: 100%;
98+
display: flex;
99+
align-items: center;
100+
justify-content: center;
101+
gap: 0.6em;
102+
}
103+
.file-label {
104+
background: linear-gradient(90deg, #735ad0 0%, #cfb4ff 100%);
105+
color: #2e1747;
106+
padding: 0.85em 1.18em;
107+
border-radius: 12px;
108+
font-size: 1.13em;
109+
font-weight: bold;
110+
display: flex;
111+
align-items: center;
112+
cursor: pointer;
113+
box-shadow: 0 2px 10px #6949be35;
114+
border: none;
115+
transition: background 0.13s;
116+
gap: 0.62em;
117+
min-width: 140px;
118+
user-select: none;
119+
}
120+
.file-label:hover { background: linear-gradient(90deg, #917fff 0%, #eed6ff 100%); }
121+
#file-input {
122+
display: none;
123+
}
124+
.file-name {
125+
font-size: 1em;
126+
color: #e7dbff;
127+
margin-left: 0.1em;
128+
overflow: hidden;
129+
white-space: nowrap;
130+
text-overflow: ellipsis;
131+
max-width: 140px;
132+
direction: ltr;
133+
}
134+
.editor-section {
135+
width: 100%;
136+
display: flex;
137+
flex-direction: row;
138+
gap: 12px;
139+
margin-top: 16px;
140+
justify-content: center;
141+
align-items: stretch;
142+
}
143+
#lottie-preview {
144+
background: #231344;
145+
border-radius: 15px;
146+
min-width: 128px;
147+
min-height: 128px;
148+
max-width: 160px;
149+
max-height: 160px;
150+
flex: 1 1 40%;
151+
display: flex;
152+
align-items: center;
153+
justify-content: center;
154+
overflow: hidden;
155+
box-shadow: 0 2px 12px #230c3144;
156+
}
157+
#json-editor {
158+
flex: 1 1 55%;
159+
min-width: 0;
160+
min-height: 128px;
161+
max-height: 160px;
162+
border-radius: 12px;
163+
padding: 8px;
164+
font-size: 0.95rem;
165+
font-family: 'Fira Mono', monospace, monospace;
166+
background: #1b1332;
167+
color: #ffe7e6;
168+
border: 1px solid #45316e;
169+
resize: vertical;
170+
outline: none;
171+
box-shadow: 0 2px 8px #16092c22;
172+
transition: border 0.18s;
173+
overflow: auto !important;
174+
}
175+
#json-editor:focus { border-color: #9a6fff; }
176+
.actions {
177+
display: flex;
178+
width: 100%;
179+
gap: 8px;
180+
margin: 18px 0 0 0;
181+
justify-content: center;
182+
}
183+
.action-btn {
184+
flex: 1 1 0;
185+
padding: 0.85em 0.3em;
186+
font-size: 1.07em;
187+
border-radius: 11px;
188+
border: none;
189+
background: linear-gradient(90deg, #735ad0 0%, #cfb4ff 100%);
190+
color: #2e1747;
191+
font-weight: bold;
192+
box-shadow: 0 2px 10px #6949be35;
193+
cursor: pointer;
194+
transition: background .16s, transform .16s;
195+
outline: none;
196+
}
197+
.action-btn:active {
198+
background: linear-gradient(90deg, #5741b7 0%, #c6a6ff 100%);
199+
transform: scale(0.98);
200+
}
201+
@media (max-width: 640px) {
202+
.container { max-width: 99vw; padding: 4vw 2vw 2vw 2vw; }
203+
.editor-section { flex-direction: column; gap: 8px; }
204+
#lottie-preview, #json-editor { max-width: 100vw; min-width: 90vw; }
205+
#lottie-preview { min-height: 110px; max-height: 140px; }
206+
#json-editor { min-height: 90px; max-height: 120px; }
207+
h1 { font-size: 1.55rem; }
208+
.actions { flex-direction: column; gap: 7px; }
209+
.file-name { max-width: 80vw; }
210+
}
211+
.footer {
212+
text-align: center;
213+
font-size: 0.98em;
214+
margin: 24px 0 8px 0;
215+
color: #b5a9df;
216+
letter-spacing: 0.03em;
217+
}
218+
.footer a {
219+
color: #eedda9;
220+
font-weight: bold;
221+
text-decoration: none;
222+
border-bottom: 1.5px dotted #e7b45c88;
223+
transition: color 0.13s;
224+
}
225+
.footer a:hover { color: #fff3b6; }
226+
</style>
227+
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>
228+
<script src="https://cdn.jsdelivr.net/npm/pako@2.1.0/dist/pako.min.js"></script>
229+
<script defer src="script.js"></script>
230+
</head>
231+
<body>
232+
<div class="container">
233+
<h1>
234+
<img class="logo" src="https://avatars.githubusercontent.com/WizardLoop" alt="logo" />
235+
MagicLottie
236+
</h1>
237+
<div class="input-section">
238+
<div class="file-row">
239+
<label for="file-input" class="file-label">
240+
<i class="fas fa-file-import"></i> Choose file
241+
<input id="file-input" type="file" accept=".json,.tgs" style="display:none;">
242+
</label>
243+
<span class="file-name" id="file-name"></span>
244+
</div>
245+
</div>
246+
<div class="editor-section" style="display:none;">
247+
<div id="lottie-preview"></div>
248+
<textarea id="json-editor" spellcheck="false"></textarea>
249+
</div>
250+
<div class="actions" style="display:none;">
251+
<button id="refresh" class="action-btn" title="Refresh animation"><i class="fas fa-sync"></i> Refresh</button>
252+
<button id="export-json" class="action-btn" title="Export as JSON"><i class="fas fa-file-export"></i> JSON</button>
253+
<button id="export-tgs" class="action-btn" title="Export as TGS"><i class="fas fa-file-archive"></i> TGS</button>
254+
</div>
255+
</div>
256+
<div class="footer">
257+
created by <a href="https://github.com/wizardloop/magiclottie" target="_blank">wizardloop</a>
258+
</div>
259+
<script>
260+
document.getElementById('file-input').addEventListener('change', function (e) {
261+
const hasFile = !!e.target.files[0];
262+
document.querySelector('.editor-section').style.display = hasFile ? '' : 'none';
263+
document.querySelector('.actions').style.display = hasFile ? '' : 'none';
264+
document.getElementById('file-name').textContent = hasFile ? e.target.files[0].name : '';
265+
});
266+
document.body.addEventListener('touchmove', function (e) {
267+
if (
268+
e.target.tagName !== 'TEXTAREA'
269+
&& e.target.tagName !== 'INPUT'
270+
&& !e.target.closest('textarea')
271+
) {
272+
e.preventDefault();
273+
}
274+
}, { passive: false });
275+
document.body.addEventListener('wheel', function (e) {
276+
if (
277+
e.target.tagName !== 'TEXTAREA'
278+
&& e.target.tagName !== 'INPUT'
279+
&& !e.target.closest('textarea')
280+
) {
281+
e.preventDefault();
282+
}
283+
}, { passive: false });
284+
document.documentElement.style.overflow = 'hidden';
285+
document.body.style.overflow = 'hidden';
286+
</script>
287+
</body>
288+
</html>

0 commit comments

Comments
 (0)