-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
176 lines (164 loc) · 8.65 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ASCII Art Generator - Convert GIFs to ASCII Animation | Free Online Tool</title>
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="manifest" href="site.webmanifest">
<meta name="title" content="ASCII Art Generator - Convert GIFs to ASCII Animation | Free Online Tool">
<meta name="description" content="Free ASCII art generator - No sign up required! Convert GIFs to ASCII animations instantly. Features real-time preview, zoom controls, and multiple export formats. Create, customize, and download your ASCII art now.">
<meta name="keywords" content="ASCII art generator, GIF to ASCII converter, ASCII animation maker, text art creator, ASCII art online, animated ASCII, GIF converter, text animation">
<meta name="author" content="jayrich.dev">
<meta name="robots" content="index, follow">
<meta name="language" content="English">
<meta name="revisit-after" content="7 days">
<meta property="og:type" content="website">
<meta property="og:url" content="https://asciigif.com/">
<meta property="og:title" content="ASCII Art Generator - Interactive GIF to ASCII Converter">
<meta property="og:description" content="Transform GIFs into stunning ASCII art animations with real-time preview, interactive zoom, and multiple export formats. Free online tool, no installation needed.">
<meta property="og:image" content="https://asciigif.com/preview.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="ASCII Art Generator">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://asciigif.com/">
<meta name="twitter:title" content="ASCII Art Generator - Interactive GIF to ASCII Converter">
<meta name="twitter:description" content="Transform GIFs into stunning ASCII art animations with real-time preview, interactive zoom, and multiple export formats. Free online tool, no installation needed.">
<meta name="twitter:image" content="https://asciigif.com/preview.png">
<meta name="twitter:creator" content="@jayrich_dev">
<meta name="theme-color" content="#1a202c">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="main.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gif.js/0.2.0/gif.js"></script>
<script>
window.gifWorkerPath = 'gif.worker.js';
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebApplication",
"name": "ASCII Art Generator",
"description": "Transform GIFs into stunning ASCII art animations with real-time preview, interactive zoom, and multiple export formats. Free online tool, no installation needed.",
"applicationCategory": "MultimediaApplication",
"operatingSystem": "Any",
"browserRequirements": "Requires JavaScript enabled",
"softwareVersion": "1.0.0",
"url": "https://asciigif.com/",
"author": {
"@type": "Person",
"name": "Jay Rich",
"url": "https://jayrich.dev"
},
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
},
"featureList": [
"Real-time ASCII art preview",
"Interactive zoom and pan controls",
"Multiple export formats (GIF, ASCII, JSON, CSV)",
"Color mode support",
"Responsive design"
],
"screenshot": "https://asciigif.com/preview.png",
"image": "https://asciigif.com/preview.png",
"thumbnailUrl": "https://asciigif.com/preview.png"
}
</script>
<script data-goatcounter="https://ascii.goatcounter.com/count"
async src="//gc.zgo.at/count.js"></script>
</head>
<body>
<header id="app-header">
<h1>ASCII Art Generator</h1>
<div id="controls">
<input id="gif-url" type="text" placeholder="Enter GIF URL" aria-label="Enter GIF URL"/>
<div class="button-group">
<button id="go-button" aria-label="Convert GIF">GO</button>
<button id="reset-button" aria-label="Reset">Reset</button>
</div>
<label id="toggle-label">
<input type="checkbox" id="color-toggle" aria-label="Toggle color mode"/>
Color Mode
</label>
</div>
</header>
<div id="stats-window" role="complementary" aria-label="Conversion Statistics">
<h3>Statistics</h3>
<p><strong>Current Frame:</strong> <span id="current-frame">0</span></p>
<p><strong>Total Frames:</strong> <span id="total-frames">0</span></p>
<p><strong>Frame Time (ms):</strong> <span id="frame-time">0</span></p>
<p><strong>Elapsed Time (s):</strong> <span id="elapsed-time">0</span></p>
<p><strong>Resolution:</strong> <span id="resolution">0x0</span></p>
</div>
<div id="zoom-controls" class="inactive">
<div class="zoom-info">
<span class="zoom-status">Click to activate controls</span>
<div class="zoom-slider-container">
<div class="zoom-range">
<span class="min-zoom">0.5x</span>
<div class="zoom-track">
<div class="zoom-fill"></div>
<div class="zoom-handle" role="slider" tabindex="0" aria-label="Zoom level" aria-valuemin="0.5" aria-valuemax="5.0" aria-valuenow="1.0"></div>
</div>
<span class="max-zoom">5.0x</span>
</div>
<span class="zoom-value">1.0x</span>
</div>
</div>
<button class="reset-zoom" aria-label="Reset zoom">
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none">
<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path>
<path d="M3 3v5h5"></path>
</svg>
</button>
</div>
<div id="download-controls">
<button id="download-button" aria-haspopup="true" aria-expanded="false">Download As...</button>
<div id="download-dropdown" class="hidden" role="menu">
<button class="download-option" data-type="gif" role="menuitem">GIF</button>
<button class="download-option" data-type="ascii" role="menuitem">ASCII Text</button>
<button class="download-option" data-type="json" role="menuitem">JSON</button>
<button class="download-option" data-type="csv" role="menuitem">CSV</button>
<button class="download-option" data-type="canvas" role="menuitem">Canvas Image</button>
</div>
</div>
<div id="loading-overlay" class="hidden">
<div class="spinner"></div>
<p>Processing...</p>
</div>
<div id="gif-browser" class="hidden">
<div class="browser-overlay"></div>
<div class="browser-content">
<div class="browser-header">
<select id="category-select">
<option value="trending">Trending</option>
<option value="reactions">Reactions</option>
<option value="memes">Memes</option>
<option value="anime">Anime</option>
</select>
<button id="close-browser" aria-label="Close browser">×</button>
</div>
<div id="gif-grid"></div>
<div class="browser-footer">
<button id="prev-page" disabled>Previous</button>
<span id="page-info">Page 1</span>
<button id="next-page">Next</button>
</div>
</div>
</div>
<button id="browse-toggle" aria-label="Browse GIFs" aria-pressed="false">Browse GIFs</button>
<a href="https://jayrich.dev" target="_blank" rel="noopener" id="credits">jayrich.dev</a>
</body>
</html>