mugeminorum / eluvletter

https://gitee.com/MuGeminorum/eLuvLetter

Tutorial of eLuvLetter usage

The heartbeat animation indicates that the BGM is loading, please be patient and wait util the envelope appears.

Important links

Name	URL
Download Git	https://git-scm.com/downloads
eLuvLetter GitHub repo	https://github.com/MuGeminorum/eLuvLetter
Netlify official website	https://app.netlify.com
eLuvLetter demo on Netlify	https://eluvletter.netlify.app
eLuvLetter JSON Generator	https://www.modelscope.cn/studios/MuGeminorum/eluvletter

Customization

1. Download and install Git;
2. Register a GitHub account, set SSH, and fork a copy of this repository to your own account;
3. Clone the repository to local:

git clone https://github.com/%YOUR_GITHUB_USERNAME%/eLuvLetter.git
cd eLuvLetter

4. Go to the ./eLuvLetter/font/ directory, customize content.json by eLuvLetter JSON Generator:

{
    "recipient"  : "The recipient centered on front of the envelope",
    "sender"     : "The sender name on back of the envelope",
    "salutation" : "The salutation in letter's upper left corner",
    "signature"  : "The signature in letter's lower right corner",
    "body"       : "Body of the letter",
    "title"      : "Browser tab text",
    "bgm"        : "BGM base64 code",
}

Deployment on Netlify

1. Sync the modified local code to your GitHub account:

cd eLuvLetter
git add .
git commit -a
# press i
# input any description
# ESC :wq! Enter
git push

2. Enter Netlify official website;
3. Use your GitHub account to login by authorization, click Add new site - Import an existing project;
4. Click GitHub, enter the keyword eLuvLetter in the search box to find the previously forked repo, and select it;
5. Click Deploy site to jump into Site overview page automatically, click Site settings;
6. Click Change site name under Site information, modify second-level domain name not conflict to others, and click Save;
7. After the deployment, we can visit https://%PROJECT_NAME%.netlify.app to broswe your page (%PROJECT_NAME% is the second-level domain name customized just now)

Good luck~💖

eluvletter's Issues

Similar to mp3 -> base64, how about png->base64

In the future, we shall convert pic files to base64 to make sure all items on the page are ready

信内容过长时，需美化显现的滚轴

打字光标位置需与滚轴自动保持一致，这样能保证最新内容显示在正中间

滚轴尽量隐藏，移动端采取手指划动屏幕实现上下翻页；
PC端采取滚轮实现翻页；但对于没有滚轮的鼠标来说，还需要一个美化过的滚轴用于翻页

ios safari 首次进入页面时下拉页面最顶端有细白条

下拉刷新的问题已处理，但是这个白条问题仍然存在
pan-* 不会屏蔽双击缩放
html 设置成 pan-y 导致的，若只给 html 设置成 none，#data 设置成 pan-y 容易导致双击后一下拉，#data就会出窗，此时html部分是none，点双击没法还原回来，而且none没法上下拉导致死屏，所以只能html #data均设置成 pan-y ，这就导致这个白条问题规避不了

需要兼容长篇内容

建议使用刷屏特效，文字打印到底之后顶端的内容会向上淡出，保持信内容高度不变

需要修复信封帽开关、信纸折叠伸缩动画生硬问题

重制一下教程视频

是否需要为竖屏设备特意添加整体信封的缩放甚至屏幕旋转

这个需要一个判定设备类型的js

仿 herta_kuru 中的加载技术，为心跳添加 loading 进度条

参考：duiqt/herta_kuru
PR #77

落款位置显示不正常

信封转至背面时，点击右下角落款触发的翻转不符合力学原理

需要修改翻转方向至反方向

需要兼容不同移动设备

在手机或平板上信封过小

Do not forget to update ReadMe

Better update the tutorial video and the doc

CC0问题

留意一下工程中是否有参杂版权素材