create new branch

.github/workflows/static.yml

@@ -0,0 +1,43 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          # Upload entire repository
+          path: '.'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2

LICENSE

@@ -0,0 +1,25 @@
+BSD 2-Clause License
+
+Copyright (c) 2020, George
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

README.md

@@ -0,0 +1,69 @@
+# Use eLuvLetter
+
+[![license](https://img.shields.io/github/license/MuGeminorum/eLuvLetter.svg)](https://github.com/MuGeminorum/eLuvLetter/blob/master/LICENSE)
+[![Deploy static content to Pages](https://github.com/MuGeminorum/eLuvLetter/actions/workflows/static.yml/badge.svg?branch=main)](https://github.com/MuGeminorum/eLuvLetter/actions/workflows/static.yml)
+[![Netlify Status](https://api.netlify.com/api/v1/badges/712880d1-1b1f-4500-a50f-16433c31d130/deploy-status)](https://app.netlify.com/sites/eluvletter/deploys)
+
+## Important links
+|        Name         | URL                                                   |
+| :-----------------: | :---------------------------------------------------- |
+|         Git         | <https://git-scm.com/downloads>                       |
+|       GitHub        | <https://github.com>                                  |
+|     eLuvLetter      | <https://github.com/MuGeminorum/eLuvLetter>           |
+|       Netlify       | <https://app.netlify.com>                             |
+|       2D Demo       | <https://eluvletter.pages.dev>                        |
+|       3D Demo       | <https://eluvletter.pages.dev/index-3d.html>          |
+| Tutorial in Chinese | <https://www.cnblogs.com/MuGeminorum/p/16617269.html> |
+
+Note: the heartbeat animation indicates that the BGM is loading, please be patient and wait util the envelope appears.
+
+## Customize
+
+0. Download and install Git;
+
+1. Register a GitHub account, set SSH, and fork a copy of this repository to your own account;
+
+2. Clone the repository to local:
+```
+git clone https://github.com/%Your_GitHub_Account%/eLuvLetter.git
+```
+
+3. Go to the `./eLuvLetter/font/` directory, open `content.json`, and customize the configuration as follows:
+
+```
+{
+    "to"        : "envelope recipient",
+    "from"      : "sign",
+    "recipient" : "letter recipient",
+    "title"     : "Web page tab title",
+    "stamp"     : "Stamp URL",
+    "bgm"       : "BGM URL",
+    "text"      : "letter ^n content"
+}
+```
+
+The symbol `^n` in the demo means that the typewriter pauses for n milliseconds,
+
+BGM URL is the default mp3 directory or mp3 direct link in the demo code(Note: It is best not to use the API to get mp3, it may be blocked by cross-domain)
+
+If you use the default directory, you can rename your mp3 to `bgm.mp3` and overwrite `bgm.mp3` under `./eLuvLetter/bgm` to achieve custom modification of BGM (mp3 size is better < 500K)
+
+## Deploy to Netlify
+1. Sync the modified local code to your GitHub account:
+```
+cd eLuvLetter
+git add .
+git commit -a
+# i
+# input description
+# :wq!
+git push
+```
+2. Enter [Netlify official website](https://app.netlify.com);
+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(The `%PROJECT_NAME%` is the second-level domain name customized just now)
+
+*Good luck!*

css/bgm.css

@@ -0,0 +1,24 @@
+#footer {
+    position: fixed;
+    top: 10px;
+    right: 10px;
+}
+
+#music_btn {
+    position: relative;
+    margin: 0 auto;
+    display: none;
+    width: 40px;
+    height: 40px;
+    cursor: pointer;
+    background: url(../img/bgm.png) no-repeat;
+}
+
+.play {
+    background-position-y: 0px !important;
+}
+
+.mute {
+    background-position-y: -40px !important;
+
+}