feat: add credits modal and update docker config
- Add credits modal showing project creators and libraries used - Replace bottom-of-canvas credits with clickable credits button - Update docker-compose to pull pre-built image from git.azuze.fr registry - Simplify README Docker instructions Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
Claude Haiku 4.5
@@ -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).
|
||||
|
||||
+1
-7
@@ -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
|
||||
|
||||
+17
-2
@@ -103,6 +103,22 @@
|
||||
<p class="header-2">Export this project</p>
|
||||
<div id="export-project"><img src="assets/download-icon.svg"> <span>Export</span></div>
|
||||
</div>
|
||||
<div id="credits-modal">
|
||||
<p class="header">Credits</p>
|
||||
<p class="subtitle">Created by <span>Alyssa X</span></p>
|
||||
<p class="subtitle">Maintained by <span>Kawa</span></p>
|
||||
<hr style="margin-top: 15px; margin-bottom: 15px;">
|
||||
<p class="subheader">Libraries & Tools</p>
|
||||
<div id="credits-list">
|
||||
<div class="credit-item">Fabric.js</div>
|
||||
<div class="credit-item">Anime.js</div>
|
||||
<div class="credit-item">Lottie</div>
|
||||
<div class="credit-item">Pickr</div>
|
||||
<div class="credit-item">Sortable.js</div>
|
||||
<div class="credit-item">FFmpeg.wasm</div>
|
||||
<div class="credit-item">jQuery</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="background-overlay"></div>
|
||||
<div id="color-picker"></div>
|
||||
<div id="color-picker-fill"></div>
|
||||
@@ -290,8 +306,6 @@
|
||||
</div>
|
||||
</div>
|
||||
<div id="bottom-canvas">
|
||||
<a id="sponsor" href="https://github.com/sponsors/alyssaxuu" target="_blank"><img src="assets/sponsor.svg"> Sponsor</a>
|
||||
<a id="alyssa-credit" href="https://twitter.com/alyssaxuu" target="_blank">Made by <span>Alyssa X</span> <img src="assets/alyssaimg.jpeg"></a>
|
||||
</div>
|
||||
<img src="assets/replace-image.svg" id="replace-image">
|
||||
<img src="assets/loading-image.svg" id="load-image" class="load-media">
|
||||
@@ -375,6 +389,7 @@
|
||||
<div id="share"><img src="assets/importexport.svg"> Import & export</div>
|
||||
<div id="download"><img src="assets/download-icon.svg"> Download</div>
|
||||
</div>
|
||||
<div id="credits-button">Credits</div>
|
||||
</div>
|
||||
|
||||
<video id="test-video"></video>
|
||||
|
||||
@@ -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 == '') {
|
||||
|
||||
+64
-52
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user