diff --git a/README.md b/README.md
index 74a8822..797df35 100644
--- a/README.md
+++ b/README.md
@@ -22,8 +22,7 @@ npm run dev # Electron app
**Docker:**
```bash
-npm run docker:build
-npm run docker:run # http://localhost:8080
+docker-compose up # http://localhost:8080
```
Full build instructions (Windows installers, Linux AppImage/Flatpak) in [PACKAGING.md](PACKAGING.md).
diff --git a/docker-compose.yml b/docker-compose.yml
index 15b6882..da29ff3 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,12 +1,6 @@
services:
motionity:
- build:
- context: .
- # WITH_FFMPEG: "0" trims 18.5 MB by fetching the MP4/GIF encoder from
- # archive.org at runtime instead of shipping it.
- args:
- WITH_FFMPEG: "1"
- image: motionity:latest
+ image: git.azuze.fr/kawa/motionity:latest
ports:
- "8080:8080"
restart: unless-stopped
diff --git a/src/index.html b/src/index.html
index 8b20c0e..75c4319 100644
--- a/src/index.html
+++ b/src/index.html
@@ -103,6 +103,22 @@
Export
+
+
Created by Alyssa X
+
Maintained by Kawa
+
+
+
+
Fabric.js
+
Anime.js
+
Lottie
+
Pickr
+
Sortable.js
+
FFmpeg.wasm
+
jQuery
+
+
@@ -375,6 +389,7 @@
Import & export
Download
Credits
diff --git a/src/js/ui.js b/src/js/ui.js
index e70b222..4add356 100644
--- a/src/js/ui.js
+++ b/src/js/ui.js
@@ -1785,6 +1785,14 @@ function importExportModal() {
}
$('#share').on('click', importExportModal);
+// Open credits modal
+function creditsModal() {
+ hideModals();
+ $('#credits-modal').toggleClass('modal-open');
+ $('#background-overlay').toggleClass('modal-open');
+}
+$('#credits-button').on('click', creditsModal);
+
function searchInput() {
var value = $(this).val().toLowerCase();
if (value == '') {
diff --git a/src/styles.css b/src/styles.css
index d57001b..776a225 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -204,6 +204,27 @@ body {
.hand-active:hover {
cursor: pointer;
}
+#credits-button {
+ width: 100px;
+ position: absolute;
+ right: 330px;
+ bottom: 12px;
+ height: 38px;
+ line-height: 38px;
+ text-align: center;
+ background-color: #30314e;
+ color: var(--main-text-color);
+ border-radius: 5px;
+ box-shadow: inset 0px 2px 2px rgba(255, 255, 255, 0.05),
+ inset 0px -2px 1px rgba(0, 0, 0, 0.05);
+ font-family: Inter;
+ font-weight: 500;
+ font-size: 14px;
+}
+#credits-button:hover {
+ cursor: pointer;
+ opacity: 0.7;
+}
/* Bottom of canvas */
#bottom-canvas {
position: absolute;
@@ -212,58 +233,6 @@ body {
z-index: 9999999;
width: 100%;
}
-#sponsor {
- position: absolute;
- bottom: 10px;
- left: -10px;
- height: 32px;
- line-height: 32px;
- font-family: Inter;
- font-size: 14px;
- font-weight: 500;
- color: var(--accent-color);
- background: rgba(22, 95, 205, 0.1);
- text-align: center;
- text-decoration: none;
- padding-left: 10px;
- padding-right: 10px;
- border-radius: 5px;
-}
-#sponsor img {
- margin-right: 3px;
- margin-bottom: -2px;
-}
-#sponsor:hover {
- background: rgba(22, 95, 205, 0.3) !important;
-}
-#alyssa-credit {
- color: var(--secondary-text-color);
- font-size: 14px;
- font-weight: 500;
- position: absolute;
- right: -20px;
- bottom: 15px;
- font-family: Inter;
- width: 200px;
- filter: drop-shadow(0px 1px 15px #141629);
- text-decoration: none !important;
-}
-#alyssa-credit:hover {
- filter: drop-shadow(0px 1px 10px #141629) !important;
-}
-#alyssa-credit span {
- color: var(--main-text-color) !important;
- text-decoration: none !important;
- display: inline-block;
-}
-#alyssa-credit img {
- display: inline-block;
- margin-left: 5px;
- border-radius: 50%;
- vertical-align: middle;
- width: 18px;
- margin-top: -2px;
-}
.hide-folder {
display: none !important;
}
@@ -1375,6 +1344,49 @@ input[type="number"] {
display: block;
z-index: 99999999999;
}
+/* Credits modal */
+#credits-modal {
+ width: 300px;
+ max-height: 400px;
+ background-color: var(--panel-back);
+ border: 1px solid var(--panel-stroke);
+ border-radius: 5px;
+ box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.3);
+ position: absolute;
+ right: 280px;
+ bottom: 60px;
+ visibility: hidden;
+ display: block;
+ z-index: 99999999999;
+ padding-bottom: 15px;
+ overflow-y: auto;
+}
+#credits-modal .header {
+ margin-bottom: 15px;
+}
+#credits-modal .subtitle {
+ margin-left: 20px;
+ margin-bottom: 5px;
+ font-size: 13px;
+}
+#credits-modal .subtitle span {
+ color: var(--main-text-color) !important;
+ font-weight: 500;
+}
+#credits-modal .subheader {
+ margin-top: 10px;
+ margin-bottom: 10px;
+}
+#credits-list {
+ margin-left: 20px;
+ margin-right: 20px;
+}
+.credit-item {
+ color: var(--secondary-text-color);
+ font-family: Inter;
+ font-size: 13px;
+ margin-bottom: 8px;
+}
.subtitle {
color: var(--secondary-text-color);
font-family: Inter;
Sponsor