create new branch

# 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

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.

# 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!*

#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;

}

 No newline at end of file