-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
141 lines (139 loc) · 8.3 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
<!DOCTYPE html>
<!-- (C) Bar Hatsor, 2020. -->
<html lang="en-us">
<head>
<title>Filmstrip</title>
<meta charset="utf-8">
<link rel="icon" href="/icon.svg">
<meta name="description" content="Animation for the modern web.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<meta name="theme-color" content="#2a2a2e">
<meta property="og:title" content="Filmstrip">
<meta property="og:description" content="Animation for the modern web.">
<meta property="og:url" content="https://filmstrip.netlify.app">
<meta property="og:type" content="website">
<meta name="Keywords" content="HTML,CSS,JavaScript,animate css,animate,lightweight,web,css3,css transition,css transform,css animation examples,css animation effects,css3 animation effects,css3 transition,keyframes animation,css animation examples with code,css3 animation demo,css3 frames generator,css animation generator,css effects,css3 transform,css text animation examples,css3 text animation,html5 css3 animation,css transition all,css3 keyframes,modern website,animation generator,animation delay,css text animation,animations,editor,easy,keyframes,creating,css,creator,web designer,web design">
<meta name="Description" content="Filmstrip allows you to create or import keyframe animations, make adjustments, and export them for web playback. It’s a quick and easy tool for modern web animation.">
<meta name="next-head-count" content="24">
<meta name="robots" content="all">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-180205191-1"></script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
<script>(function(b,c,d,e,f,g,h){b.GoogleAnalyticsObject=f,b[f]=b[f]||function(){(b[f].q=b[f].q||[]).push(arguments)},b[f].l=1*new Date,g=c.createElement(d),h=c.getElementsByTagName(d)[0],g.async=1,g.src=e,h.parentNode.insertBefore(g,h)})(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-180205191-1","auto"),ga("require","displayfeatures"),ga("config","UA-180205191-1"),ga("send","pageview");</script>
</head>
<body>
<div class="main">
<div class="title-wrapper">
<div class="top">
<svg xmlns="http://www.w3.org/2000/svg" height="40" viewBox="0 0 24 24" width="50">
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="M18 3v2h-2V3H8v2H6V3H4v18h2v-2h2v2h8v-2h2v2h2V3h-2zM8 17H6v-2h2v2zm0-4H6v-2h2v2zm0-4H6V7h2v2zm10 8h-2v-2h2v2zm0-4h-2v-2h2v2zm0-4h-2V7h2v2z" fill="currentColor"></path>
</svg>
Filmstrip
</div>
<p>Animation for the modern web</p>
<hr>
<div class="buttons">
<div class="button" onclick="deleteAnimation();document.querySelector('.main').classList.add('hidden')">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" fill="currentColor"></path>
</svg>
Create a new animation
</div>
<div class="button second" onclick="document.querySelector('.title-wrapper').classList.add('hidden');document.querySelector('.upload-wrapper').classList.remove('hidden')">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z" fill="currentColor"></path>
</svg>
Import an existing one
</div>
</div>
</div>
<div class="upload-wrapper hidden">
<div class="top">
<svg xmlns="http://www.w3.org/2000/svg" height="40" viewBox="0 0 24 24" width="50">
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="M18 3v2h-2V3H8v2H6V3H4v18h2v-2h2v2h8v-2h2v2h2V3h-2zM8 17H6v-2h2v2zm0-4H6v-2h2v2zm0-4H6V7h2v2zm10 8h-2v-2h2v2zm0-4h-2v-2h2v2zm0-4h-2V7h2v2z" fill="currentColor"></path>
</svg>
Filmstrip
</div>
<hr style="margin-bottom: 0">
<p>Paste exported CSS below</p><span class="code" contenteditable=""></span>
<div class="buttons">
<div class="button second" onclick="document.querySelector('.upload-wrapper').classList.add('hidden');document.querySelector('.title-wrapper').classList.remove('hidden')">Back</div>
<div class="button" onclick="importAnimation()">Import</div>
</div>
</div>
<div class="github">
<a class="inner" href="https://github.com/barhatsor/filmstrip">
<svg class="octicon" height="15" viewBox="0 0 16 16" width="15"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" fill="currentColor"></path></svg>
Star
</a>
</div>
</div>
<div class="header">
<div class="option menu" onclick="this.classList.toggle('open')">
<svg xmlns="http://www.w3.org/2000/svg" height="30" viewBox="0 0 24 24" width="30">
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" fill="currentColor"></path>
</svg>
<div class="button save" title="Save">
<svg xmlns="http://www.w3.org/2000/svg" height="30" viewBox="0 0 24 24" width="30">
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" fill="currentColor"></path>
</svg>
</div>
<div class="button new" title="New">
<svg xmlns="http://www.w3.org/2000/svg" height="30" viewBox="0 0 24 24" width="30">
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 14h-3v3h-2v-3H8v-2h3v-3h2v3h3v2zm-3-7V3.5L18.5 9H13z" fill="currentColor"></path>
</svg>
</div>
<div class="button exit" title="Exit" onclick="document.querySelector('.main').classList.remove('hidden')">
<svg xmlns="http://www.w3.org/2000/svg" height="30" viewBox="0 0 24 24" width="30">
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="M10.09 15.59L11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.11 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" fill="currentColor"></path>
</svg>
</div>
</div>
<div class="logo">
<span role="textbox" contenteditable="" spellcheck="false" onclick="select(this)" oninput="settings.name = this.innerHTML">Untitled Animation</span>
<svg xmlns="http://www.w3.org/2000/svg" height="17" viewBox="0 0 24 24" width="17" onclick="select(document.querySelector('.logo span'))">
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" fill="currentColor"></path>
</svg>
</div>
<div class="right">
<div class="option play">
<label>
<span></span>
</label>
</div>
<div class="option remove">
<svg xmlns="http://www.w3.org/2000/svg" height="30" viewBox="0 0 24 24" width="30">
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="M19 13H5v-2h14v2z" fill="currentColor"></path>
</svg>
</div>
<div class="option add">
<svg xmlns="http://www.w3.org/2000/svg" height="34" viewBox="0 0 24 24" width="34">
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" fill="currentColor"></path>
</svg>
</div>
</div>
</div>
<div class="sidebar"></div>
<div class="canvas">
<div class="wrapper">
<div class="el draggable"></div>
</div>
</div>
<div class="prompt-wrapper">
<div class="background" onclick="this.parentElement.classList.toggle('open')"></div>
<div class="prompt"></div>
</div>
<script src="main.js"></script>
</body>
</html>