first commit! 🎉
Signed-off-by: ari melody <ari@arimelody.me>
10
.gitattributes
vendored
Normal file
|
@ -0,0 +1,10 @@
|
||||||
|
*.woff2 filter=lfs diff=lfs merge=lfs -text
|
||||||
|
*.gif filter=lfs diff=lfs merge=lfs -text
|
||||||
|
*.png filter=lfs diff=lfs merge=lfs -text
|
||||||
|
*.jpg filter=lfs diff=lfs merge=lfs -text
|
||||||
|
*.webp filter=lfs diff=lfs merge=lfs -text
|
||||||
|
*.webm filter=lfs diff=lfs merge=lfs -text
|
||||||
|
*.mp3 filter=lfs diff=lfs merge=lfs -text
|
||||||
|
*.mp4 filter=lfs diff=lfs merge=lfs -text
|
||||||
|
. !text !filter !merge !diff
|
||||||
|
* !text !filter !merge !diff
|
1
.gitignore
vendored
Normal file
|
@ -0,0 +1 @@
|
||||||
|
**/.DS_Store
|
343
api/v1/music/music.go
Normal file
|
@ -0,0 +1,343 @@
|
||||||
|
package music
|
||||||
|
|
||||||
|
var placeholders = []Album{
|
||||||
|
{
|
||||||
|
Id: "test",
|
||||||
|
Title: "test album",
|
||||||
|
Type: "album",
|
||||||
|
Year: 2024,
|
||||||
|
Buyname: "go get it!!",
|
||||||
|
Buylink: "https://arimelody.me/",
|
||||||
|
Artists: []string{
|
||||||
|
"ari melody",
|
||||||
|
"zaire",
|
||||||
|
"mae taylor",
|
||||||
|
"Loudar",
|
||||||
|
},
|
||||||
|
Links: []AlbumLink{
|
||||||
|
AlbumLink{
|
||||||
|
Name: "youtube",
|
||||||
|
Url: "https://youtu.be/dQw4w9WgXcQ",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
Description: "she sample on my text 'til i 🚫🚫🚫",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Id: "free2play",
|
||||||
|
Title: "free2play",
|
||||||
|
Type: "upcoming",
|
||||||
|
Year: 2024,
|
||||||
|
Buyname: "pre-order",
|
||||||
|
Buylink: "https://arimelody.me/",
|
||||||
|
Artists: []string{ "ari melody" },
|
||||||
|
Description: "hello from your local SPACEGIRL! 💫",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Id: "dream",
|
||||||
|
Title: "Dream",
|
||||||
|
Type: "single",
|
||||||
|
Year: 2022,
|
||||||
|
Artists: []string{ "mellodoot" },
|
||||||
|
Artwork: "https://mellodoot.com/img/music_artwork/mellodoot_-_Dream.webp",
|
||||||
|
Buylink: "https://arimelody.bandcamp.com/track/dream",
|
||||||
|
Free: false,
|
||||||
|
Links: []AlbumLink{
|
||||||
|
AlbumLink{
|
||||||
|
Name: "spotify",
|
||||||
|
Url: "https://open.spotify.com/album/5talRpqzjExP1w6j5LFIAh",
|
||||||
|
},
|
||||||
|
AlbumLink{
|
||||||
|
Name: "apple music",
|
||||||
|
Url: "https://music.apple.com/ie/album/dream-single/1650037132",
|
||||||
|
},
|
||||||
|
AlbumLink{
|
||||||
|
Name: "soundcloud",
|
||||||
|
Url: "https://soundcloud.com/arimelody/dream2022",
|
||||||
|
},
|
||||||
|
AlbumLink{
|
||||||
|
Name: "youtube",
|
||||||
|
Url: "https://www.youtube.com/watch?v=nfFgtMuYAx8",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
Description: "living the dream 🌌 ✨",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Id: "gomyway",
|
||||||
|
Title: "Go My Way",
|
||||||
|
Type: "single",
|
||||||
|
Year: 2021,
|
||||||
|
Artists: []string{ "mellodoot" },
|
||||||
|
Artwork: "https://mellodoot.com/img/music_artwork/mellodoot_-_Go_My_Way.webp",
|
||||||
|
Buylink: "https://arimelody.bandcamp.com/track/go-my-way",
|
||||||
|
Links: []AlbumLink{
|
||||||
|
AlbumLink{
|
||||||
|
Name: "spotify",
|
||||||
|
Url: "https://open.spotify.com/album/35WNtxK12IDHCUoXHDePGE",
|
||||||
|
},
|
||||||
|
AlbumLink{
|
||||||
|
Name: "apple music",
|
||||||
|
Url: "https://music.apple.com/ie/album/go-my-way-single/1547145699",
|
||||||
|
},
|
||||||
|
AlbumLink{
|
||||||
|
Name: "soundcloud",
|
||||||
|
Url: "https://soundcloud.com/arimelody/go-my-way",
|
||||||
|
},
|
||||||
|
AlbumLink{
|
||||||
|
Name: "youtube",
|
||||||
|
Url: "https://www.youtube.com/watch?v=CNptNQdLkl0",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
Description: "hey! go my way! 💥 ✨",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Id: "rowboat",
|
||||||
|
Title: "Rowboat",
|
||||||
|
Type: "single",
|
||||||
|
Year: 2020,
|
||||||
|
Artists: []string{ "mellodoot" },
|
||||||
|
Artwork: "https://mellodoot.com/img/music_artwork/mellodoot_-_Rowboat.webp",
|
||||||
|
Buylink: "https://arimelody.bandcamp.com/track/rowboat",
|
||||||
|
Links: []AlbumLink{
|
||||||
|
{
|
||||||
|
Name: "spotify",
|
||||||
|
Url: "https://open.spotify.com/album/7jyqJFVKaENCPm58v5O44Y",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Name: "apple music",
|
||||||
|
Url: "https://music.apple.com/ie/album/rowboat-single/1502608714",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Name: "soundcloud",
|
||||||
|
Url: "https://soundcloud.com/arimelody/rowboat",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Name: "youtube",
|
||||||
|
Url: "https://www.youtube.com/watch?v=uOQyILDTzME",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
Description: "let's take a trip. i've got a goddamn boat ⛵️",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Id: "helloworld",
|
||||||
|
Title: "Hello World",
|
||||||
|
Type: "single",
|
||||||
|
Year: 2019,
|
||||||
|
Artists: []string{ "mellodoot" },
|
||||||
|
Artwork: "https://mellodoot.com/img/music_artwork/mellodoot_-_Hello_World.webp",
|
||||||
|
Buylink: "https://arimelody.bandcamp.com/track/hello-world",
|
||||||
|
Links: []AlbumLink{
|
||||||
|
{
|
||||||
|
Name: "spotify",
|
||||||
|
Url: "https://open.spotify.com/album/3LbElPXD4dsDumttGBuYxx",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Name: "apple music",
|
||||||
|
Url: "https://music.apple.com/ie/album/hello-world-single/1491880155",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Name: "soundcloud",
|
||||||
|
Url: "https://soundcloud.com/arimelody/helloworld",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Name: "youtube",
|
||||||
|
Url: "https://www.youtube.com/watch?v=CQhlRsl0Mjk",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
Description: "we'll dawn a new frontier! 👾",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Id: "sine",
|
||||||
|
Title: "Sine",
|
||||||
|
Type: "single",
|
||||||
|
Artists: []string{ "zaire", "mellodoot" },
|
||||||
|
Year: 2019,
|
||||||
|
Artwork: "https://mellodoot.com/img/music_artwork/zaire_-_Sine_ft._mellodoot.webp",
|
||||||
|
Links: []AlbumLink{
|
||||||
|
{
|
||||||
|
Name: "spotify",
|
||||||
|
Url: "https://open.spotify.com/album/4WPuaJtTV7z86KubD9Rnmk",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Name: "apple music",
|
||||||
|
Url: "https://music.apple.com/us/album/sine-feat-mellodoot/1489163020",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Name: "youtube",
|
||||||
|
Url: "https://www.youtube.com/watch?v=z1H1s6VRnyY",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Id: "10",
|
||||||
|
Title: "10",
|
||||||
|
Type: "single",
|
||||||
|
Year: 2019,
|
||||||
|
Artists: []string{ "mellodoot" },
|
||||||
|
Artwork: "https://mellodoot.com/img/music_artwork/mellodoot_-_10.webp",
|
||||||
|
Buylink: "https://arimelody.bandcamp.com/track/10",
|
||||||
|
Links: []AlbumLink{
|
||||||
|
{
|
||||||
|
Name: "spotify",
|
||||||
|
Url: "https://open.spotify.com/album/2x4gbACfDm99unaXpLXyj0",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Name: "apple music",
|
||||||
|
Url: "https://music.apple.com/ie/album/ten-single/1483193041",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Name: "soundcloud",
|
||||||
|
Url: "https://soundcloud.com/arimelody/ten",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Name: "youtube",
|
||||||
|
Url: "https://www.youtube.com/watch?v=C7WP5L2BK4U",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Id: "mad",
|
||||||
|
Title: "MAD",
|
||||||
|
Type: "single",
|
||||||
|
Year: 2018,
|
||||||
|
Artists: []string{ "mellodoot" },
|
||||||
|
Artwork: "https://mellodoot.com/img/music_artwork/mellodoot_-_MAD.webp",
|
||||||
|
Buylink: "https://arimelody.bandcamp.com/track/mad",
|
||||||
|
Links: []AlbumLink{
|
||||||
|
{
|
||||||
|
Name: "spotify",
|
||||||
|
Url: "https://open.spotify.com/album/59nFXw1WNoRhXou7lXqBZd",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Name: "apple music",
|
||||||
|
Url: "https://music.apple.com/ie/album/mad/1441233120",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Name: "soundcloud",
|
||||||
|
Url: "https://soundcloud.com/arimelody/mad",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Name: "youtube",
|
||||||
|
Url: "https://www.youtube.com/watch?v=OB-Pk6p6mfQ",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Id: "welcomingparty",
|
||||||
|
Title: "Welcoming Party",
|
||||||
|
Type: "album",
|
||||||
|
Year: 2018,
|
||||||
|
Artists: []string{ "mellodoot" },
|
||||||
|
Artwork: "https://mellodoot.com/img/music_artwork/mellodoot_-_Welcoming_Party.webp",
|
||||||
|
Buylink: "https://arimelody.bandcamp.com/album/welcoming-party",
|
||||||
|
Links: []AlbumLink{
|
||||||
|
{
|
||||||
|
Name: "spotify",
|
||||||
|
Url: "https://open.spotify.com/album/3EPa4HZpkISQVRAks64LfR",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Name: "apple music",
|
||||||
|
Url: "https://music.apple.com/ie/album/welcoming-party-ep/1441161424",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Name: "soundcloud",
|
||||||
|
Url: "https://soundcloud.com/arimelody/sets/welcoming-party",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Name: "youtube",
|
||||||
|
Url: "https://www.youtube.com/playlist?list=PLBG_QJeOHrB5EeniiXBIlHpoQbD6CUJca",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// "tracks": [
|
||||||
|
// {
|
||||||
|
// "title": "Paradigm"
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// "title": "Mitrio"
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// "title": "Level One"
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// "title": "Cubes"
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// "title": "Aria"
|
||||||
|
// }
|
||||||
|
// ]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Id: "howtheyknow2018",
|
||||||
|
Title: "How They Know (2018)",
|
||||||
|
Type: "single",
|
||||||
|
Year: 2018,
|
||||||
|
Artists: []string{ "mellodoot" },
|
||||||
|
Artwork: "https://mellodoot.com/img/music_artwork/mellodoot_-_How_They_Know_2018.webp",
|
||||||
|
Buylink: "https://arimelody.bandcamp.com/track/how-they-know-2018-remastered",
|
||||||
|
Free: true,
|
||||||
|
Links: []AlbumLink{
|
||||||
|
{
|
||||||
|
Name: "soundcloud",
|
||||||
|
Url: "https://soundcloud.com/arimelody/how-they-know-2018",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Name: "youtube",
|
||||||
|
Url: "https://www.youtube.com/watch?v=mbAgSwCzyMw",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Id: "howtheyknow",
|
||||||
|
Title: "How They Know",
|
||||||
|
Type: "single",
|
||||||
|
Year: 2017,
|
||||||
|
Artists: []string{ "mellodoot" },
|
||||||
|
Artwork: "https://mellodoot.com/img/music_artwork/mellodoot_-_How_They_Know.webp",
|
||||||
|
Buylink: "https://arimelody.bandcamp.com/track/how-they-know",
|
||||||
|
Free: true,
|
||||||
|
Links: []AlbumLink{
|
||||||
|
{
|
||||||
|
Name: "soundcloud",
|
||||||
|
Url: "https://soundcloud.com/arimelody/how-they-know",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Name: "youtube",
|
||||||
|
Url: "https://www.youtube.com/watch?v=q6lzKuG1Emo",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Id: "traveller",
|
||||||
|
Title: "Traveller",
|
||||||
|
Type: "single",
|
||||||
|
Year: 2017,
|
||||||
|
Artists: []string{ "mellodoot" },
|
||||||
|
Artwork: "https://mellodoot.com/img/music_artwork/mellodoot_-_Traveller.webp",
|
||||||
|
Buylink: "https://arimelody.bandcamp.com/track/traveller",
|
||||||
|
Free: true,
|
||||||
|
Links: []AlbumLink{
|
||||||
|
{
|
||||||
|
Name: "soundcloud",
|
||||||
|
Url: "https://soundcloud.com/arimelody/traveller",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Name: "youtube",
|
||||||
|
Url: "https://www.youtube.com/watch?v=ZTO7IQZ-yXA",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
Description: "an 8-bit expedition! ⚔️🛡️",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
func GetAlbum(id string) (Album, bool) {
|
||||||
|
for _, album := range placeholders {
|
||||||
|
if album.Id == id {
|
||||||
|
return album, true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return Album{}, false
|
||||||
|
}
|
||||||
|
|
||||||
|
func QueryAll() ([]Album) {
|
||||||
|
return placeholders
|
||||||
|
}
|
||||||
|
|
55
api/v1/music/music_types.go
Normal file
|
@ -0,0 +1,55 @@
|
||||||
|
package music
|
||||||
|
|
||||||
|
import (
|
||||||
|
"regexp"
|
||||||
|
"strings"
|
||||||
|
)
|
||||||
|
|
||||||
|
type (
|
||||||
|
Album struct {
|
||||||
|
Id string;
|
||||||
|
Title string;
|
||||||
|
Type string;
|
||||||
|
Year int;
|
||||||
|
Artists []string;
|
||||||
|
Artwork string;
|
||||||
|
Buyname string;
|
||||||
|
Buylink string;
|
||||||
|
Free bool;
|
||||||
|
Links []AlbumLink;
|
||||||
|
Description string;
|
||||||
|
}
|
||||||
|
|
||||||
|
AlbumLink struct {
|
||||||
|
Name string;
|
||||||
|
Url string;
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
func (album Album) PrintArtists() string {
|
||||||
|
if len(album.Artists) == 1 {
|
||||||
|
return album.Artists[0]
|
||||||
|
}
|
||||||
|
res := strings.Join(album.Artists[:len(album.Artists) - 1], ", ")
|
||||||
|
res += " & " + album.Artists[len(album.Artists) - 1]
|
||||||
|
return res
|
||||||
|
}
|
||||||
|
|
||||||
|
func (album Album) PrintCommaArtists() string {
|
||||||
|
if len(album.Artists) == 1 {
|
||||||
|
return album.Artists[0]
|
||||||
|
}
|
||||||
|
return strings.Join(album.Artists[:len(album.Artists)], ", ")
|
||||||
|
}
|
||||||
|
|
||||||
|
func (album Album) ResolveArtwork() string {
|
||||||
|
if album.Artwork != "" {
|
||||||
|
return album.Artwork
|
||||||
|
}
|
||||||
|
return "/img/music-artwork/default.png"
|
||||||
|
}
|
||||||
|
|
||||||
|
func (link AlbumLink) NormaliseName() string {
|
||||||
|
re := regexp.MustCompile(`[^a-z0-9]`)
|
||||||
|
return strings.ToLower(re.ReplaceAllString(link.Name, ""))
|
||||||
|
}
|
5
go.mod
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
module arimelody.me/arimelody.me
|
||||||
|
|
||||||
|
go 1.22.1
|
||||||
|
|
||||||
|
require github.com/gomarkdown/markdown v0.0.0-20231222211730-1d6d20845b47 // indirect
|
2
go.sum
Normal file
|
@ -0,0 +1,2 @@
|
||||||
|
github.com/gomarkdown/markdown v0.0.0-20231222211730-1d6d20845b47 h1:k4Tw0nt6lwro3Uin8eqoET7MDA4JnT8YgbCjc/g5E3k=
|
||||||
|
github.com/gomarkdown/markdown v0.0.0-20231222211730-1d6d20845b47/go.mod h1:JDGcbDT52eL4fju3sZ4TeHGsQwhG9nbDV21aMyhwPoA=
|
122
main.go
Normal file
|
@ -0,0 +1,122 @@
|
||||||
|
package main
|
||||||
|
|
||||||
|
import (
|
||||||
|
"arimelody.me/arimelody.me/api/v1/music"
|
||||||
|
|
||||||
|
"fmt"
|
||||||
|
"html/template"
|
||||||
|
"os"
|
||||||
|
"net/http"
|
||||||
|
"log"
|
||||||
|
"strings"
|
||||||
|
|
||||||
|
"github.com/gomarkdown/markdown"
|
||||||
|
"github.com/gomarkdown/markdown/html"
|
||||||
|
"github.com/gomarkdown/markdown/parser"
|
||||||
|
)
|
||||||
|
|
||||||
|
var mime_types = map[string]string{
|
||||||
|
"css": "text/css; charset=utf-8",
|
||||||
|
"png": "image/png",
|
||||||
|
"jpg": "image/jpg",
|
||||||
|
"webp": "image/webp",
|
||||||
|
"html": "text/html",
|
||||||
|
"asc": "text/plain",
|
||||||
|
"pub": "text/plain",
|
||||||
|
"js": "application/javascript",
|
||||||
|
}
|
||||||
|
|
||||||
|
var templates = template.Must(template.ParseFiles(
|
||||||
|
"views/header.html",
|
||||||
|
"views/footer.html",
|
||||||
|
"views/index.html",
|
||||||
|
"views/music.html",
|
||||||
|
"views/music-gateway.html",
|
||||||
|
))
|
||||||
|
|
||||||
|
func web_handler(writer http.ResponseWriter, req *http.Request) {
|
||||||
|
uri := req.URL.Path
|
||||||
|
|
||||||
|
fmt.Printf("%s %s (%s)\n", req.Method, req.URL.Path, req.Header["User-Agent"][0])
|
||||||
|
|
||||||
|
if req.URL.Path == "/" {
|
||||||
|
index_handler(writer, req)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if uri == "/music" {
|
||||||
|
music_handler(writer, req)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if strings.HasPrefix(uri, "/music/") {
|
||||||
|
music_gateway_handler(writer, req)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
static_handler(writer, req)
|
||||||
|
}
|
||||||
|
|
||||||
|
func index_handler(writer http.ResponseWriter, req *http.Request) {
|
||||||
|
err := templates.ExecuteTemplate(writer, "index.html", nil)
|
||||||
|
if err != nil {
|
||||||
|
http.Error(writer, err.Error(), http.StatusInternalServerError)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
func music_handler(writer http.ResponseWriter, req *http.Request) {
|
||||||
|
err := templates.ExecuteTemplate(writer, "music.html", music.QueryAll())
|
||||||
|
if err != nil {
|
||||||
|
http.Error(writer, err.Error(), http.StatusInternalServerError)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
func music_gateway_handler(writer http.ResponseWriter, req *http.Request) {
|
||||||
|
if len(req.URL.Path) <= len("/music/") {
|
||||||
|
http.Error(writer, "400 bad request", http.StatusBadRequest)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
id := req.URL.Path[len("/music/"):]
|
||||||
|
// http.Redirect(writer, req, "https://mellodoot.com/music/"+title, 302)
|
||||||
|
// return
|
||||||
|
album, ok := music.GetAlbum(id)
|
||||||
|
if !ok {
|
||||||
|
http.Error(writer, "404 not found", http.StatusNotFound)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
err := templates.ExecuteTemplate(writer, "music-gateway.html", album)
|
||||||
|
if err != nil {
|
||||||
|
http.Error(writer, err.Error(), http.StatusInternalServerError)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
func static_handler(writer http.ResponseWriter, req *http.Request) {
|
||||||
|
filename := "public/" + req.URL.Path[1:]
|
||||||
|
body, err := os.ReadFile(filename)
|
||||||
|
if err != nil {
|
||||||
|
http.Error(writer, "404 not found", http.StatusNotFound)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
filetype := filename[strings.LastIndex(filename, ".") + 1:]
|
||||||
|
if mime_type, ok := mime_types[filetype]; ok {
|
||||||
|
writer.Header().Set("Content-Type", mime_type)
|
||||||
|
} else {
|
||||||
|
writer.Header().Set("Content-Type", "text/plain; charset=utf-8")
|
||||||
|
}
|
||||||
|
writer.Write([]byte(body))
|
||||||
|
}
|
||||||
|
|
||||||
|
func parse_markdown(md []byte) []byte {
|
||||||
|
extensions := parser.CommonExtensions | parser.AutoHeadingIDs | parser.NoEmptyLineBeforeBlock
|
||||||
|
p := parser.NewWithExtensions(extensions)
|
||||||
|
doc := p.Parse(md)
|
||||||
|
|
||||||
|
htmlFlags := html.CommonFlags
|
||||||
|
opts := html.RendererOptions{ Flags: htmlFlags }
|
||||||
|
renderer := html.NewRenderer(opts)
|
||||||
|
|
||||||
|
return markdown.Render(doc, renderer)
|
||||||
|
}
|
||||||
|
|
||||||
|
func main() {
|
||||||
|
http.HandleFunc("/", web_handler)
|
||||||
|
log.Fatal(http.ListenAndServe(":8080", nil))
|
||||||
|
}
|
1
public/font/monaspace-argon/AUTHORS.txt
Normal file
|
@ -0,0 +1 @@
|
||||||
|
GitHub Next <next@github.com>
|
74
public/font/monaspace-argon/CODE_OF_CONDUCT.md
Normal file
|
@ -0,0 +1,74 @@
|
||||||
|
# Contributor Covenant Code of Conduct
|
||||||
|
|
||||||
|
## Our Pledge
|
||||||
|
|
||||||
|
In the interest of fostering an open and welcoming environment, we as
|
||||||
|
contributors and maintainers pledge to making participation in our project and
|
||||||
|
our community a harassment-free experience for everyone, regardless of age, body
|
||||||
|
size, disability, ethnicity, gender identity and expression, level of experience,
|
||||||
|
nationality, personal appearance, race, religion, or sexual identity and
|
||||||
|
orientation.
|
||||||
|
|
||||||
|
## Our Standards
|
||||||
|
|
||||||
|
Examples of behavior that contributes to creating a positive environment
|
||||||
|
include:
|
||||||
|
|
||||||
|
* Using welcoming and inclusive language
|
||||||
|
* Being respectful of differing viewpoints and experiences
|
||||||
|
* Gracefully accepting constructive criticism
|
||||||
|
* Focusing on what is best for the community
|
||||||
|
* Showing empathy towards other community members
|
||||||
|
|
||||||
|
Examples of unacceptable behavior by participants include:
|
||||||
|
|
||||||
|
* The use of sexualized language or imagery and unwelcome sexual attention or
|
||||||
|
advances
|
||||||
|
* Trolling, insulting/derogatory comments, and personal or political attacks
|
||||||
|
* Public or private harassment
|
||||||
|
* Publishing others' private information, such as a physical or electronic
|
||||||
|
address, without explicit permission
|
||||||
|
* Other conduct which could reasonably be considered inappropriate in a
|
||||||
|
professional setting
|
||||||
|
|
||||||
|
## Our Responsibilities
|
||||||
|
|
||||||
|
Project maintainers are responsible for clarifying the standards of acceptable
|
||||||
|
behavior and are expected to take appropriate and fair corrective action in
|
||||||
|
response to any instances of unacceptable behavior.
|
||||||
|
|
||||||
|
Project maintainers have the right and responsibility to remove, edit, or
|
||||||
|
reject comments, commits, code, wiki edits, issues, and other contributions
|
||||||
|
that are not aligned to this Code of Conduct, or to ban temporarily or
|
||||||
|
permanently any contributor for other behaviors that they deem inappropriate,
|
||||||
|
threatening, offensive, or harmful.
|
||||||
|
|
||||||
|
## Scope
|
||||||
|
|
||||||
|
This Code of Conduct applies both within project spaces and in public spaces
|
||||||
|
when an individual is representing the project or its community. Examples of
|
||||||
|
representing a project or community include using an official project e-mail
|
||||||
|
address, posting via an official social media account, or acting as an appointed
|
||||||
|
representative at an online or offline event. Representation of a project may be
|
||||||
|
further defined and clarified by project maintainers.
|
||||||
|
|
||||||
|
## Enforcement
|
||||||
|
|
||||||
|
Instances of abusive, harassing, or otherwise unacceptable behavior may be
|
||||||
|
reported by contacting the project team at opensource@github.com. All
|
||||||
|
complaints will be reviewed and investigated and will result in a response that
|
||||||
|
is deemed necessary and appropriate to the circumstances. The project team is
|
||||||
|
obligated to maintain confidentiality with regard to the reporter of an incident.
|
||||||
|
Further details of specific enforcement policies may be posted separately.
|
||||||
|
|
||||||
|
Project maintainers who do not follow or enforce the Code of Conduct in good
|
||||||
|
faith may face temporary or permanent repercussions as determined by other
|
||||||
|
members of the project's leadership.
|
||||||
|
|
||||||
|
## Attribution
|
||||||
|
|
||||||
|
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
|
||||||
|
available at [https://contributor-covenant.org/version/1/4][version]
|
||||||
|
|
||||||
|
[homepage]: https://contributor-covenant.org
|
||||||
|
[version]: https://contributor-covenant.org/version/1/4/
|
6
public/font/monaspace-argon/CONTRIBUTORS.txt
Normal file
|
@ -0,0 +1,6 @@
|
||||||
|
Riley Cran <riley@lettermatic.com>
|
||||||
|
Heather Cran Arrow <heather@lettermatic.com>
|
||||||
|
Danelle Cheney <danelle@lettermatic.com>
|
||||||
|
Idan Gazit <idan@github.com>
|
||||||
|
Cole Bemis <colebemis@github.com>
|
||||||
|
Amelia Wattenberger <wattenberger@github.com>
|
93
public/font/monaspace-argon/LICENSE
Normal file
|
@ -0,0 +1,93 @@
|
||||||
|
Copyright (c) 2023, GitHub https://github.com/githubnext/monaspace
|
||||||
|
with Reserved Font Name "Monaspace", including subfamilies: "Argon", "Neon", "Xenon", "Radon", and "Krypton"
|
||||||
|
|
||||||
|
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||||
|
This license is copied below, and is also available with a FAQ at:
|
||||||
|
http://scripts.sil.org/OFL
|
||||||
|
|
||||||
|
-----------------------------------------------------------
|
||||||
|
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||||
|
-----------------------------------------------------------
|
||||||
|
|
||||||
|
PREAMBLE
|
||||||
|
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||||
|
development of collaborative font projects, to support the font creation
|
||||||
|
efforts of academic and linguistic communities, and to provide a free and
|
||||||
|
open framework in which fonts may be shared and improved in partnership
|
||||||
|
with others.
|
||||||
|
|
||||||
|
The OFL allows the licensed fonts to be used, studied, modified and
|
||||||
|
redistributed freely as long as they are not sold by themselves. The
|
||||||
|
fonts, including any derivative works, can be bundled, embedded,
|
||||||
|
redistributed and/or sold with any software provided that any reserved
|
||||||
|
names are not used by derivative works. The fonts and derivatives,
|
||||||
|
however, cannot be released under any other type of license. The
|
||||||
|
requirement for fonts to remain under this license does not apply
|
||||||
|
to any document created using the fonts or their derivatives.
|
||||||
|
|
||||||
|
DEFINITIONS
|
||||||
|
"Font Software" refers to the set of files released by the Copyright
|
||||||
|
Holder(s) under this license and clearly marked as such. This may
|
||||||
|
include source files, build scripts and documentation.
|
||||||
|
|
||||||
|
"Reserved Font Name" refers to any names specified as such after the
|
||||||
|
copyright statement(s).
|
||||||
|
|
||||||
|
"Original Version" refers to the collection of Font Software components as
|
||||||
|
distributed by the Copyright Holder(s).
|
||||||
|
|
||||||
|
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||||
|
or substituting — in part or in whole — any of the components of the
|
||||||
|
Original Version, by changing formats or by porting the Font Software to a
|
||||||
|
new environment.
|
||||||
|
|
||||||
|
"Author" refers to any designer, engineer, programmer, technical
|
||||||
|
writer or other person who contributed to the Font Software.
|
||||||
|
|
||||||
|
PERMISSION & CONDITIONS
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining
|
||||||
|
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||||
|
redistribute, and sell modified and unmodified copies of the Font
|
||||||
|
Software, subject to the following conditions:
|
||||||
|
|
||||||
|
1) Neither the Font Software nor any of its individual components,
|
||||||
|
in Original or Modified Versions, may be sold by itself.
|
||||||
|
|
||||||
|
2) Original or Modified Versions of the Font Software may be bundled,
|
||||||
|
redistributed and/or sold with any software, provided that each copy
|
||||||
|
contains the above copyright notice and this license. These can be
|
||||||
|
included either as stand-alone text files, human-readable headers or
|
||||||
|
in the appropriate machine-readable metadata fields within text or
|
||||||
|
binary files as long as those fields can be easily viewed by the user.
|
||||||
|
|
||||||
|
3) No Modified Version of the Font Software may use the Reserved Font
|
||||||
|
Name(s) unless explicit written permission is granted by the corresponding
|
||||||
|
Copyright Holder. This restriction only applies to the primary font name as
|
||||||
|
presented to the users.
|
||||||
|
|
||||||
|
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||||
|
Software shall not be used to promote, endorse or advertise any
|
||||||
|
Modified Version, except to acknowledge the contribution(s) of the
|
||||||
|
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||||
|
permission.
|
||||||
|
|
||||||
|
5) The Font Software, modified or unmodified, in part or in whole,
|
||||||
|
must be distributed entirely under this license, and must not be
|
||||||
|
distributed under any other license. The requirement for fonts to
|
||||||
|
remain under this license does not apply to any document created
|
||||||
|
using the Font Software.
|
||||||
|
|
||||||
|
TERMINATION
|
||||||
|
This license becomes null and void if any of the above conditions are
|
||||||
|
not met.
|
||||||
|
|
||||||
|
DISCLAIMER
|
||||||
|
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||||
|
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||||
|
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||||
|
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||||
|
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||||
|
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||||
|
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||||
|
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||||
|
OTHER DEALINGS IN THE FONT SOFTWARE.
|
BIN
public/font/monaspace-argon/MonaspaceArgon-Bold.woff
Normal file
BIN
public/font/monaspace-argon/MonaspaceArgon-BoldItalic.woff
Normal file
BIN
public/font/monaspace-argon/MonaspaceArgon-ExtraBold.woff
Normal file
BIN
public/font/monaspace-argon/MonaspaceArgon-ExtraBoldItalic.woff
Normal file
BIN
public/font/monaspace-argon/MonaspaceArgon-ExtraLight.woff
Normal file
BIN
public/font/monaspace-argon/MonaspaceArgon-ExtraLightItalic.woff
Normal file
BIN
public/font/monaspace-argon/MonaspaceArgon-Italic.woff
Normal file
BIN
public/font/monaspace-argon/MonaspaceArgon-Light.woff
Normal file
BIN
public/font/monaspace-argon/MonaspaceArgon-LightItalic.woff
Normal file
BIN
public/font/monaspace-argon/MonaspaceArgon-Medium.woff
Normal file
BIN
public/font/monaspace-argon/MonaspaceArgon-MediumItalic.woff
Normal file
BIN
public/font/monaspace-argon/MonaspaceArgon-Regular.woff
Normal file
BIN
public/font/monaspace-argon/MonaspaceArgon-SemiBold.woff
Normal file
BIN
public/font/monaspace-argon/MonaspaceArgon-SemiBoldItalic.woff
Normal file
BIN
public/font/monaspace-argon/MonaspaceArgon-SemiWideBold.woff
Normal file
BIN
public/font/monaspace-argon/MonaspaceArgon-SemiWideItalic.woff
Normal file
BIN
public/font/monaspace-argon/MonaspaceArgon-SemiWideLight.woff
Normal file
BIN
public/font/monaspace-argon/MonaspaceArgon-SemiWideMedium.woff
Normal file
BIN
public/font/monaspace-argon/MonaspaceArgon-SemiWideRegular.woff
Normal file
BIN
public/font/monaspace-argon/MonaspaceArgon-SemiWideSemiBold.woff
Normal file
BIN
public/font/monaspace-argon/MonaspaceArgon-WideBold.woff
Normal file
BIN
public/font/monaspace-argon/MonaspaceArgon-WideBoldItalic.woff
Normal file
BIN
public/font/monaspace-argon/MonaspaceArgon-WideExtraBold.woff
Normal file
BIN
public/font/monaspace-argon/MonaspaceArgon-WideExtraLight.woff
Normal file
BIN
public/font/monaspace-argon/MonaspaceArgon-WideItalic.woff
Normal file
BIN
public/font/monaspace-argon/MonaspaceArgon-WideLight.woff
Normal file
BIN
public/font/monaspace-argon/MonaspaceArgon-WideLightItalic.woff
Normal file
BIN
public/font/monaspace-argon/MonaspaceArgon-WideMedium.woff
Normal file
BIN
public/font/monaspace-argon/MonaspaceArgon-WideMediumItalic.woff
Normal file
BIN
public/font/monaspace-argon/MonaspaceArgon-WideRegular.woff
Normal file
BIN
public/font/monaspace-argon/MonaspaceArgon-WideSemiBold.woff
Normal file
BIN
public/img/buttons/ari melody.gif
Normal file
After Width: | Height: | Size: 1.3 KiB |
BIN
public/img/buttons/mae.png
Normal file
After Width: | Height: | Size: 5.2 KiB |
BIN
public/img/buttons/misc/debian.gif
Normal file
After Width: | Height: | Size: 2.1 KiB |
BIN
public/img/buttons/misc/epicblazed.png
Normal file
After Width: | Height: | Size: 3.4 KiB |
BIN
public/img/buttons/misc/gaywebring.gif
Normal file
After Width: | Height: | Size: 1.3 KiB |
BIN
public/img/buttons/misc/girls4notepad.gif
Normal file
After Width: | Height: | Size: 19 KiB |
BIN
public/img/buttons/misc/gplv3.gif
Normal file
After Width: | Height: | Size: 2.3 KiB |
BIN
public/img/buttons/misc/graphicdesign.gif
Normal file
After Width: | Height: | Size: 3 KiB |
BIN
public/img/buttons/misc/h-free-anim.gif
Normal file
After Width: | Height: | Size: 6.8 KiB |
BIN
public/img/buttons/misc/hl.gif
Normal file
After Width: | Height: | Size: 2.3 KiB |
BIN
public/img/buttons/misc/iemandatory.gif
Normal file
After Width: | Height: | Size: 1.8 KiB |
BIN
public/img/buttons/misc/ipv6.gif
Normal file
After Width: | Height: | Size: 2.3 KiB |
BIN
public/img/buttons/misc/learn_html.gif
Normal file
After Width: | Height: | Size: 1.5 KiB |
BIN
public/img/buttons/misc/ltg.gif
Normal file
After Width: | Height: | Size: 2.9 KiB |
BIN
public/img/buttons/misc/mymusic.gif
Normal file
After Width: | Height: | Size: 2.8 KiB |
BIN
public/img/buttons/misc/smokepowered.gif
Normal file
After Width: | Height: | Size: 999 B |
BIN
public/img/buttons/misc/sprunk.gif
Normal file
After Width: | Height: | Size: 6.2 KiB |
BIN
public/img/buttons/misc/tohell.gif
Normal file
After Width: | Height: | Size: 14 KiB |
BIN
public/img/buttons/misc/virusalert.gif
Normal file
After Width: | Height: | Size: 3.3 KiB |
BIN
public/img/buttons/misc/wii.gif
Normal file
After Width: | Height: | Size: 2.5 KiB |
BIN
public/img/buttons/misc/www2.gif
Normal file
After Width: | Height: | Size: 5.2 KiB |
BIN
public/img/buttons/zaire.gif
Normal file
After Width: | Height: | Size: 1.6 KiB |
BIN
public/img/favicon.png
Normal file
After Width: | Height: | Size: 122 KiB |
1
public/img/mailicon.svg
Normal file
After Width: | Height: | Size: 26 KiB |
BIN
public/img/music-artwork/default.png
Normal file
After Width: | Height: | Size: 139 KiB |
13
public/keys/ari melody_0x92678188_public.asc
Normal file
|
@ -0,0 +1,13 @@
|
||||||
|
-----BEGIN PGP PUBLIC KEY BLOCK-----
|
||||||
|
|
||||||
|
mDMEZNW03RYJKwYBBAHaRw8BAQdAuMUNVjXT7m/YisePPnSYY6lc1Xmm3oS79ZEO
|
||||||
|
JriRCZy0HWFyaSBtZWxvZHkgPGFyaUBhcmltZWxvZHkubWU+iJMEExYKADsWIQTu
|
||||||
|
jeuNYocuegkeKt/PmYKckmeBiAUCZNW03QIbAwULCQgHAgIiAgYVCgkICwIEFgID
|
||||||
|
AQIeBwIXgAAKCRDPmYKckmeBiGCbAP4wTcLCU5ZlfSTJrFtGhQKWA6DxtUO7Cegk
|
||||||
|
Vu8SgkY3KgEA1/YqjZ1vSaqPDN4137vmhkhfduoYOjN0iptNj39u2wG4OARk1bTd
|
||||||
|
EgorBgEEAZdVAQUBAQdAnA2drPzQBoXNdwIrFnovuF0CjX+8+8QSugCF4a5ZEXED
|
||||||
|
AQgHiHgEGBYKACAWIQTujeuNYocuegkeKt/PmYKckmeBiAUCZNW03QIbDAAKCRDP
|
||||||
|
mYKckmeBiC/xAQD1hu4WcstR40lkUxMqhZ44wmizrDA+eGCdh7Ge3Gy79wEAx385
|
||||||
|
GnYoNplMTA4BTGs7orV4WSfSkoBx0+px1UOewgs=
|
||||||
|
=M1Bp
|
||||||
|
-----END PGP PUBLIC KEY BLOCK-----
|
1
public/keys/id_ari_ed25519.pub
Normal file
|
@ -0,0 +1 @@
|
||||||
|
ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIBHkNL8tYKlEDX0eAQB9rD1GZ3jYzRXZfKmCEFuYJ9jP ari@aria
|
313
public/music.json
Normal file
|
@ -0,0 +1,313 @@
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"id": "dream",
|
||||||
|
"title": "Dream",
|
||||||
|
"type": "single",
|
||||||
|
"year": 2022,
|
||||||
|
"artists": [
|
||||||
|
"mellodoot"
|
||||||
|
],
|
||||||
|
"artwork": "https://mellodoot.com/img/music_artwork/mellodoot_-_Dream.webp",
|
||||||
|
"buylink": "https://arimelody.bandcamp.com/track/dream",
|
||||||
|
"links": [
|
||||||
|
{
|
||||||
|
"title": "Spotify",
|
||||||
|
"url": "https://open.spotify.com/album/5talRpqzjExP1w6j5LFIAh"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Apple Music",
|
||||||
|
"url": "https://music.apple.com/ie/album/dream-single/1650037132"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Soundcloud",
|
||||||
|
"url": "https://soundcloud.com/arimelody/dream2022"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "YouTube",
|
||||||
|
"url": "https://www.youtube.com/watch?v=nfFgtMuYAx8"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "gomyway",
|
||||||
|
"title": "Go My Way",
|
||||||
|
"type": "single",
|
||||||
|
"year": 2021,
|
||||||
|
"artists": [
|
||||||
|
"mellodoot"
|
||||||
|
],
|
||||||
|
"artwork": "https://mellodoot.com/img/music_artwork/mellodoot_-_Go_My_Way.webp",
|
||||||
|
"buylink": "https://arimelody.bandcamp.com/track/go-my-way",
|
||||||
|
"links": [
|
||||||
|
{
|
||||||
|
"title": "Spotify",
|
||||||
|
"url": "https://open.spotify.com/album/35WNtxK12IDHCUoXHDePGE"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Apple Music",
|
||||||
|
"url": "https://music.apple.com/ie/album/go-my-way-single/1547145699"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Soundcloud",
|
||||||
|
"url": "https://soundcloud.com/arimelody/go-my-way"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "YouTube",
|
||||||
|
"url": "https://www.youtube.com/watch?v=CNptNQdLkl0"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "rowboat",
|
||||||
|
"title": "Rowboat",
|
||||||
|
"type": "single",
|
||||||
|
"year": 2020,
|
||||||
|
"artists": [
|
||||||
|
"mellodoot"
|
||||||
|
],
|
||||||
|
"artwork": "https://mellodoot.com/img/music_artwork/mellodoot_-_Rowboat.webp",
|
||||||
|
"buylink": "https://arimelody.bandcamp.com/track/rowboat",
|
||||||
|
"links": [
|
||||||
|
{
|
||||||
|
"title": "Spotify",
|
||||||
|
"url": "https://open.spotify.com/album/7jyqJFVKaENCPm58v5O44Y"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Apple Music",
|
||||||
|
"url": "https://music.apple.com/ie/album/rowboat-single/1502608714"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Soundcloud",
|
||||||
|
"url": "https://soundcloud.com/arimelody/rowboat"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "YouTube",
|
||||||
|
"url": "https://www.youtube.com/watch?v=uOQyILDTzME"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "helloworld",
|
||||||
|
"title": "Hello World",
|
||||||
|
"type": "single",
|
||||||
|
"year": 2019,
|
||||||
|
"artists": [
|
||||||
|
"mellodoot"
|
||||||
|
],
|
||||||
|
"artwork": "https://mellodoot.com/img/music_artwork/mellodoot_-_Hello_World.webp",
|
||||||
|
"buylink": "https://arimelody.bandcamp.com/track/hello-world",
|
||||||
|
"links": [
|
||||||
|
{
|
||||||
|
"title": "Spotify",
|
||||||
|
"url": "https://open.spotify.com/album/3LbElPXD4dsDumttGBuYxx"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Apple Music",
|
||||||
|
"url": "https://music.apple.com/ie/album/hello-world-single/1491880155"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Soundcloud",
|
||||||
|
"url": "https://soundcloud.com/arimelody/helloworld"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "YouTube",
|
||||||
|
"url": "https://www.youtube.com/watch?v=CQhlRsl0Mjk"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "sine",
|
||||||
|
"title": "Sine",
|
||||||
|
"type": "single",
|
||||||
|
"artists": [
|
||||||
|
"zaire",
|
||||||
|
"mellodoot"
|
||||||
|
],
|
||||||
|
"year": 2019,
|
||||||
|
"artwork": "https://mellodoot.com/img/music_artwork/zaire_-_Sine_ft._mellodoot.webp",
|
||||||
|
"links": [
|
||||||
|
{
|
||||||
|
"title": "Spotify",
|
||||||
|
"url": "https://open.spotify.com/album/4WPuaJtTV7z86KubD9Rnmk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Apple Music",
|
||||||
|
"url": "https://music.apple.com/us/album/sine-feat-mellodoot/1489163020"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "YouTube",
|
||||||
|
"url": "https://www.youtube.com/watch?v=z1H1s6VRnyY"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "10",
|
||||||
|
"title": "10",
|
||||||
|
"type": "single",
|
||||||
|
"year": 2019,
|
||||||
|
"artists": [
|
||||||
|
"mellodoot"
|
||||||
|
],
|
||||||
|
"artwork": "https://mellodoot.com/img/music_artwork/mellodoot_-_10.webp",
|
||||||
|
"buylink": "https://arimelody.bandcamp.com/track/10",
|
||||||
|
"links": [
|
||||||
|
{
|
||||||
|
"title": "Spotify",
|
||||||
|
"url": "https://open.spotify.com/album/2x4gbACfDm99unaXpLXyj0"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Apple Music",
|
||||||
|
"url": "https://music.apple.com/ie/album/ten-single/1483193041"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Soundcloud",
|
||||||
|
"url": "https://soundcloud.com/arimelody/ten"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "YouTube",
|
||||||
|
"url": "https://www.youtube.com/watch?v=C7WP5L2BK4U"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "mad",
|
||||||
|
"title": "MAD",
|
||||||
|
"type": "single",
|
||||||
|
"year": 2018,
|
||||||
|
"artists": [
|
||||||
|
"mellodoot"
|
||||||
|
],
|
||||||
|
"artwork": "https://mellodoot.com/img/music_artwork/mellodoot_-_MAD.webp",
|
||||||
|
"buylink": "https://arimelody.bandcamp.com/track/mad",
|
||||||
|
"links": [
|
||||||
|
{
|
||||||
|
"title": "Spotify",
|
||||||
|
"url": "https://open.spotify.com/album/59nFXw1WNoRhXou7lXqBZd"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Apple Music",
|
||||||
|
"url": "https://music.apple.com/ie/album/mad/1441233120"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Soundcloud",
|
||||||
|
"url": "https://soundcloud.com/arimelody/mad"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "YouTube",
|
||||||
|
"url": "https://www.youtube.com/watch?v=OB-Pk6p6mfQ"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "welcomingparty",
|
||||||
|
"title": "Welcoming Party",
|
||||||
|
"type": "album",
|
||||||
|
"year": 2018,
|
||||||
|
"artists": [
|
||||||
|
"mellodoot"
|
||||||
|
],
|
||||||
|
"artwork": "https://mellodoot.com/img/music_artwork/mellodoot_-_Welcoming_Party.webp",
|
||||||
|
"buylink": "https://arimelody.bandcamp.com/album/welcoming-party",
|
||||||
|
"links": [
|
||||||
|
{
|
||||||
|
"title": "Spotify",
|
||||||
|
"url": "https://open.spotify.com/album/3EPa4HZpkISQVRAks64LfR"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Apple Music",
|
||||||
|
"url": "https://music.apple.com/ie/album/welcoming-party-ep/1441161424"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Soundcloud",
|
||||||
|
"url": "https://soundcloud.com/arimelody/sets/welcoming-party"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "YouTube",
|
||||||
|
"url": "https://www.youtube.com/playlist?list=PLBG_QJeOHrB5EeniiXBIlHpoQbD6CUJca"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"tracks": [
|
||||||
|
{
|
||||||
|
"title": "Paradigm"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Mitrio"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Level One"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Cubes"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Aria"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "howtheyknow2018",
|
||||||
|
"title": "How They Know (2018)",
|
||||||
|
"type": "single",
|
||||||
|
"year": 2018,
|
||||||
|
"artists": [
|
||||||
|
"mellodoot"
|
||||||
|
],
|
||||||
|
"artwork": "https://mellodoot.com/img/music_artwork/mellodoot_-_How_They_Know_2018.webp",
|
||||||
|
"buylink": "https://arimelody.bandcamp.com/track/how-they-know-2018-remastered",
|
||||||
|
"free": true,
|
||||||
|
"links": [
|
||||||
|
{
|
||||||
|
"title": "Soundcloud",
|
||||||
|
"url": "https://soundcloud.com/arimelody/how-they-know-2018"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "YouTube",
|
||||||
|
"url": "https://www.youtube.com/watch?v=mbAgSwCzyMw"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "howtheyknow",
|
||||||
|
"title": "How They Know",
|
||||||
|
"type": "single",
|
||||||
|
"year": 2017,
|
||||||
|
"artists": [
|
||||||
|
"mellodoot"
|
||||||
|
],
|
||||||
|
"artwork": "https://mellodoot.com/img/music_artwork/mellodoot_-_How_They_Know.webp",
|
||||||
|
"buylink": "https://arimelody.bandcamp.com/track/how-they-know",
|
||||||
|
"free": true,
|
||||||
|
"links": [
|
||||||
|
{
|
||||||
|
"title": "Soundcloud",
|
||||||
|
"url": "https://soundcloud.com/arimelody/how-they-know"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "YouTube",
|
||||||
|
"url": "https://www.youtube.com/watch?v=q6lzKuG1Emo"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "traveller",
|
||||||
|
"title": "Traveller",
|
||||||
|
"type": "single",
|
||||||
|
"year": 2017,
|
||||||
|
"artists": [
|
||||||
|
"mellodoot"
|
||||||
|
],
|
||||||
|
"artwork": "https://mellodoot.com/img/music_artwork/mellodoot_-_Traveller.webp",
|
||||||
|
"buylink": "https://arimelody.bandcamp.com/track/traveller",
|
||||||
|
"free": true,
|
||||||
|
"links": [
|
||||||
|
{
|
||||||
|
"title": "Soundcloud",
|
||||||
|
"url": "https://soundcloud.com/arimelody/traveller"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "YouTube",
|
||||||
|
"url": "https://www.youtube.com/watch?v=ZTO7IQZ-yXA"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
14
public/robots.txt
Normal file
|
@ -0,0 +1,14 @@
|
||||||
|
User-agent: *
|
||||||
|
Disallow: /nobot/
|
||||||
|
Disallow: /private/
|
||||||
|
|
||||||
|
User-agent: GPTBot
|
||||||
|
Disallow: /
|
||||||
|
User-agent: ChatGPT-User
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: Google-Extended
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: CCBot
|
||||||
|
Disallow: /
|
44
public/script/accessibility.js
Normal file
|
@ -0,0 +1,44 @@
|
||||||
|
const accessibility = JSON.parse(localStorage.getItem("accessibility")) || {};
|
||||||
|
|
||||||
|
function toggle_accessibility_setting(name) {
|
||||||
|
if (accessibility[name]) {
|
||||||
|
delete accessibility[name];
|
||||||
|
update_accessibility();
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
accessibility[name] = true;
|
||||||
|
update_accessibility();
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function set_accessibility_setting(name, value) {
|
||||||
|
accessibility[name] = value;
|
||||||
|
update_accessibility();
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function clear_accessibility_setting(name) {
|
||||||
|
if (!accessibility[name]) return false;
|
||||||
|
delete accessibility[name];
|
||||||
|
update_accessibility();
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function update_accessibility() {
|
||||||
|
localStorage.setItem("accessibility", JSON.stringify(accessibility));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (accessibility) {
|
||||||
|
if (accessibility.disable_crt) {
|
||||||
|
document.querySelector('div#overlay').setAttribute("hidden", true);
|
||||||
|
document.body.style.textShadow = "none";
|
||||||
|
document.getElementById('toggle-crt').classList.add("disabled");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById("toggle-crt").addEventListener("click", () => {
|
||||||
|
toggle_accessibility_setting("disable_crt");
|
||||||
|
document.querySelector('div#overlay').toggleAttribute("hidden");
|
||||||
|
document.getElementById('toggle-crt').className = accessibility.disable_crt ? "disabled" : "";
|
||||||
|
});
|
||||||
|
|
66
public/script/main.js
Normal file
|
@ -0,0 +1,66 @@
|
||||||
|
const header_links = document.getElementById("header-links");
|
||||||
|
const hamburger = document.getElementById("header-links-toggle");
|
||||||
|
|
||||||
|
function type_out(e) {
|
||||||
|
const text = e.innerText;
|
||||||
|
const original = e.innerHTML;
|
||||||
|
e.innerText = "";
|
||||||
|
const delay = 25;
|
||||||
|
let chars = 0;
|
||||||
|
|
||||||
|
function insert_char(character, parent) {
|
||||||
|
const c = document.createElement("span");
|
||||||
|
c.innerText = character;
|
||||||
|
parent.appendChild(c);
|
||||||
|
c.classList.add("newchar");
|
||||||
|
}
|
||||||
|
|
||||||
|
function normalize() {
|
||||||
|
e.innerHTML = original;
|
||||||
|
}
|
||||||
|
|
||||||
|
function increment_char() {
|
||||||
|
const newchar = text.substring(chars - 1, chars);
|
||||||
|
insert_char(newchar, e);
|
||||||
|
chars++;
|
||||||
|
if (chars <= text.length) {
|
||||||
|
setTimeout(increment_char, delay);
|
||||||
|
} else {
|
||||||
|
setTimeout(normalize, 250);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
increment_char();
|
||||||
|
}
|
||||||
|
|
||||||
|
function fill_list(list) {
|
||||||
|
const items = list.querySelectorAll("li a, li span");
|
||||||
|
items.innerText = "";
|
||||||
|
const delay = 100;
|
||||||
|
|
||||||
|
items.forEach((item, iter) => {
|
||||||
|
item.style.animationDelay = `${iter * delay}ms`;
|
||||||
|
item.style.animationPlayState = "playing";
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
[...document.querySelectorAll("h1, h2, h3, h4, h5, h6")]
|
||||||
|
.filter((e) => e.innerText != "")
|
||||||
|
.forEach((e) => {
|
||||||
|
type_out(e);
|
||||||
|
});
|
||||||
|
[...document.querySelectorAll("ol, ul")]
|
||||||
|
.filter((e) => e.innerText != "")
|
||||||
|
.forEach((e) => {
|
||||||
|
fill_list(e);
|
||||||
|
});
|
||||||
|
|
||||||
|
function toggle_header_links() {
|
||||||
|
header_links.classList.toggle("open");
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener("click", event => {
|
||||||
|
if (!header_links.contains(event.target) && !hamburger.contains(event.target)) {
|
||||||
|
header_links.classList.remove("open");
|
||||||
|
}
|
||||||
|
});
|
67
public/script/music-gateway.js
Normal file
|
@ -0,0 +1,67 @@
|
||||||
|
const bg = document.getElementById("background");
|
||||||
|
bg.style.backgroundImage = `url(${bg.dataset.url})`;
|
||||||
|
bg.removeAttribute("data-url");
|
||||||
|
|
||||||
|
const share_btn = document.getElementById("share");
|
||||||
|
share_btn.onclick = (e) => {
|
||||||
|
navigator.clipboard.writeText(window.location.href);
|
||||||
|
share_btn.classList.remove('active');
|
||||||
|
void share_btn.offsetWidth;
|
||||||
|
share_btn.classList.add('active');
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById("go-back").addEventListener("click", () => {
|
||||||
|
window.history.back();
|
||||||
|
});
|
||||||
|
|
||||||
|
apply_funny_bob_to_upcoming_tags();
|
||||||
|
|
||||||
|
function apply_funny_bob_to_upcoming_tags() {
|
||||||
|
upcomingTags = document.querySelectorAll("#type.upcoming");
|
||||||
|
for (var i = 0; i < upcomingTags.length; i++) {
|
||||||
|
const tag = upcomingTags[i];
|
||||||
|
chars = tag.innerText.split("");
|
||||||
|
result = chars.map((c, i) => `<span style="animation-delay: -${i * 100}ms;">${c}</span>`);
|
||||||
|
tag.innerHTML = result.join("");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const previews = document.querySelectorAll("[id^=preview-]");
|
||||||
|
for (const preview of previews) {
|
||||||
|
preview.addEventListener("click", (e) => {
|
||||||
|
if (e.target.classList.contains('playing')) {
|
||||||
|
stopPreview(e.target);
|
||||||
|
} else {
|
||||||
|
playPreview(e.target);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
preview.querySelector('audio').addEventListener("ended", () => { stopPreview(preview); });
|
||||||
|
}
|
||||||
|
|
||||||
|
var stupidsounds = false;
|
||||||
|
|
||||||
|
function stopPreviews() {
|
||||||
|
for (const preview of previews) stopPreview(preview);
|
||||||
|
}
|
||||||
|
|
||||||
|
function playPreview(preview) {
|
||||||
|
if (!stupidsounds) stopPreviews();
|
||||||
|
const btn = preview.querySelector('i');
|
||||||
|
btn.classList.remove("play", "fa-play");
|
||||||
|
btn.classList.add("pause", "fa-pause");
|
||||||
|
const audio = preview.querySelector('audio');
|
||||||
|
audio.play();
|
||||||
|
preview.classList.add('playing');
|
||||||
|
}
|
||||||
|
|
||||||
|
function stopPreview(preview) {
|
||||||
|
const btn = preview.querySelector('i');
|
||||||
|
btn.classList.remove("pause", "fa-pause");
|
||||||
|
btn.classList.add("play", "fa-play");
|
||||||
|
const audio = preview.querySelector('audio');
|
||||||
|
audio.pause();
|
||||||
|
audio.currentTime = 0;
|
||||||
|
preview.classList.remove('playing');
|
||||||
|
}
|
||||||
|
|
||||||
|
stopPreviews();
|
15
public/script/music.js
Normal file
|
@ -0,0 +1,15 @@
|
||||||
|
document.querySelectorAll("h2.question").forEach(element => {
|
||||||
|
element.onclick = (e) => {
|
||||||
|
const url = `${window.location.protocol}//${window.location.host}${window.location.pathname}#${e.target.id}`;
|
||||||
|
window.location = url;
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
document.querySelectorAll("div.music").forEach(element => {
|
||||||
|
console.log(element);
|
||||||
|
element.addEventListener("click", (e) => {
|
||||||
|
const url = `${window.location.protocol}//${window.location.host}/music/${element.id}`;
|
||||||
|
window.location = url;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
66
public/script/prideflag.js
Normal file
|
@ -0,0 +1,66 @@
|
||||||
|
/**
|
||||||
|
* 🏳️🌈🏳️⚧️💖 pride flag 💖🏳️⚧️🏳️🌈
|
||||||
|
* made with ❤️ by ari melody, 2023
|
||||||
|
*
|
||||||
|
* web: https://arimelody.me
|
||||||
|
* source: https://github.com/mellodoot/prideflag
|
||||||
|
*/
|
||||||
|
|
||||||
|
const pride_flag_svg =
|
||||||
|
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120">
|
||||||
|
<path id="red" d="M120,80 L100,100 L120,120 Z" style="fill:#d20605"/>
|
||||||
|
<path id="orange" d="M120,80 V40 L80,80 L100,100 Z" style="fill:#ef9c00"/>
|
||||||
|
<path id="yellow" d="M120,40 V0 L60,60 L80,80 Z" style="fill:#e5fe02"/>
|
||||||
|
<path id="green" d="M120,0 H80 L40,40 L60,60 Z" style="fill:#09be01"/>
|
||||||
|
<path id="blue" d="M80,0 H40 L20,20 L40,40 Z" style="fill:#081a9a"/>
|
||||||
|
<path id="purple" d="M40,0 H0 L20,20 Z" style="fill:#76008a"/>
|
||||||
|
|
||||||
|
<rect id="black" x="60" width="60" height="60" style="fill:#010101"/>
|
||||||
|
<rect id="brown" x="70" width="50" height="50" style="fill:#603814"/>
|
||||||
|
<rect id="lightblue" x="80" width="40" height="40" style="fill:#73d6ed"/>
|
||||||
|
<rect id="pink" x="90" width="30" height="30" style="fill:#ffafc8"/>
|
||||||
|
<rect id="white" x="100" width="20" height="20" style="fill:#fff"/>
|
||||||
|
|
||||||
|
<rect id="intyellow" x="110" width="10" height="10" style="fill:#fed800"/>
|
||||||
|
<circle id="intpurple" cx="120" cy="0" r="5" stroke="#7601ad" stroke-width="2" fill="none"/>
|
||||||
|
</svg>`;
|
||||||
|
|
||||||
|
const pride_flag_css =
|
||||||
|
`#pride-flag svg {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 120px;
|
||||||
|
transform-origin: 100% 0%;
|
||||||
|
transition: transform .5s cubic-bezier(.32,1.63,.41,1.01);
|
||||||
|
z-index: 8008135;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
#pride-flag svg:hover {
|
||||||
|
transform: scale(110%);
|
||||||
|
}
|
||||||
|
#pride-flag svg:active {
|
||||||
|
transform: scale(110%);
|
||||||
|
}
|
||||||
|
#pride-flag svg * {
|
||||||
|
pointer-events: all;
|
||||||
|
}`;
|
||||||
|
|
||||||
|
function create_pride_flag() {
|
||||||
|
const container = document.createElement("a");
|
||||||
|
container.id = "pride-flag";
|
||||||
|
container.href = "https://github.com/mellodoot/prideflag";
|
||||||
|
container.target = "_blank";
|
||||||
|
container.innerHTML = pride_flag_svg;
|
||||||
|
return container;
|
||||||
|
}
|
||||||
|
|
||||||
|
function load_pride_flag_style() {
|
||||||
|
const pride_stylesheet = document.createElement('style');
|
||||||
|
pride_stylesheet.textContent = pride_flag_css;
|
||||||
|
document.head.appendChild(pride_stylesheet);
|
||||||
|
}
|
||||||
|
|
||||||
|
load_pride_flag_style();
|
||||||
|
pride_flag = create_pride_flag();
|
||||||
|
document.body.appendChild(pride_flag);
|
448
public/style/main.css
Normal file
|
@ -0,0 +1,448 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: "Monaspace Argon";
|
||||||
|
src: url("/font/monaspace-argon/MonaspaceArgonVarVF[wght,wdth,slnt].woff2") format("woff2-variations");
|
||||||
|
font-weight: 125 950;
|
||||||
|
font-stretch: 75% 125%;
|
||||||
|
font-style: oblique 0deg 20deg;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--primary: #b7fd49;
|
||||||
|
--secondary: #f8e05b;
|
||||||
|
--tertiary: #f788fe;
|
||||||
|
--links: #5eb2ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-primary {
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-secondary {
|
||||||
|
color: var(--secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-tertiary {
|
||||||
|
color: var(--tertiary);
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background: #080808;
|
||||||
|
color: #eee;
|
||||||
|
font-family: "Monaspace Argon", monospace;
|
||||||
|
font-size: 18px;
|
||||||
|
text-shadow: 0 0 3em;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100vw;
|
||||||
|
border-bottom: 1px solid #888;
|
||||||
|
background-color: #080808;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
width: min(calc(100% - 4rem), 720px);
|
||||||
|
height: 3em;
|
||||||
|
margin: auto;
|
||||||
|
padding: 0 1em;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: .8em;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
img#header-icon {
|
||||||
|
width: 2em;
|
||||||
|
height: 2em;
|
||||||
|
margin: .5em;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header-text {
|
||||||
|
width: 11em;
|
||||||
|
margin-left: -0.5rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header-text h1 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header-text h2 {
|
||||||
|
height: 1.2em;
|
||||||
|
line-height: 1.2em;
|
||||||
|
margin: 0;
|
||||||
|
font-size: .7em;
|
||||||
|
color: #bbb;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header-links-toggle {
|
||||||
|
width: 3em;
|
||||||
|
height: 3em;
|
||||||
|
display: none;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
transition: background-color .2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header-links-toggle:hover {
|
||||||
|
background-color: #fff2;
|
||||||
|
}
|
||||||
|
|
||||||
|
header ul#header-links {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: .5em;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
header ul li {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
header ul li a,
|
||||||
|
header ul li span {
|
||||||
|
padding: .2em .5em;
|
||||||
|
border: 1px solid var(--links);
|
||||||
|
color: var(--links);
|
||||||
|
border-radius: 2px;
|
||||||
|
background-color: transparent;
|
||||||
|
transition-property: color, border-color, background-color;
|
||||||
|
transition-duration: .2s;
|
||||||
|
animation-delay: 0s;
|
||||||
|
animation: list-item-fadein .2s forwards;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
header ul li span {
|
||||||
|
color: #aaa;
|
||||||
|
border-color: #aaa;
|
||||||
|
cursor: default;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
header ul li a:hover {
|
||||||
|
color: #eee;
|
||||||
|
border-color: #eee;
|
||||||
|
background-color: var(--links) !important;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#toggle-crt a {
|
||||||
|
color: var(--primary);
|
||||||
|
border-color: var(--primary);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#toggle-crt a:hover {
|
||||||
|
color: #111;
|
||||||
|
background-color: var(--primary) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#toggle-crt.disabled a {
|
||||||
|
opacity: .5 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
width: min(calc(100% - 4rem), 720px);
|
||||||
|
min-height: calc(100vh - 10.3rem);
|
||||||
|
margin: 5rem auto 2rem auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
main h1 {
|
||||||
|
line-height: 3rem;
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
main h2 {
|
||||||
|
color: var(--secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
main h3 {
|
||||||
|
color: var(--tertiary);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--links);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
small {
|
||||||
|
font-size: 1em;
|
||||||
|
color: #aaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
span.newchar {
|
||||||
|
animation: newchar 0.25s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes newchar {
|
||||||
|
from {
|
||||||
|
background: #fff8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
span.hide {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1:hover span.hide {
|
||||||
|
display: initial;
|
||||||
|
opacity: 0.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#me_irl {
|
||||||
|
width: fit-content;
|
||||||
|
height: fit-content;
|
||||||
|
border: 2px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#me_irl img {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#me_irl::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 104px;
|
||||||
|
height: 104px;
|
||||||
|
transform: translate(2px, 2px);
|
||||||
|
background-image: linear-gradient(to top right,
|
||||||
|
var(--primary),
|
||||||
|
var(--secondary));
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
p,
|
||||||
|
small,
|
||||||
|
blockquote {
|
||||||
|
transition: background-color 0.1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 a,
|
||||||
|
h2 a,
|
||||||
|
h3 a,
|
||||||
|
h4 a,
|
||||||
|
h5 a,
|
||||||
|
h6 a {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 a:hover,
|
||||||
|
h2 a:hover,
|
||||||
|
h3 a:hover,
|
||||||
|
h4 a:hover,
|
||||||
|
h5 a:hover,
|
||||||
|
h6 a:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
main h1:hover,
|
||||||
|
main h2:hover,
|
||||||
|
main h3:hover,
|
||||||
|
main h4:hover,
|
||||||
|
main h5:hover,
|
||||||
|
main h6:hover,
|
||||||
|
main p:hover,
|
||||||
|
main small:hover,
|
||||||
|
main blockquote:hover {
|
||||||
|
background-color: #fff1;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
margin: 1rem 0;
|
||||||
|
padding: 0 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
text-align: center;
|
||||||
|
line-height: 0px;
|
||||||
|
border-width: 1px 0 0 0;
|
||||||
|
border-color: #888f;
|
||||||
|
margin: 1.5em 0;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.links {
|
||||||
|
display: flex;
|
||||||
|
gap: 1em .5em;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.links li {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.links li a {
|
||||||
|
padding: .2em .5em;
|
||||||
|
border: 1px solid var(--links);
|
||||||
|
color: var(--links);
|
||||||
|
border-radius: 2px;
|
||||||
|
background-color: transparent;
|
||||||
|
transition-property: color, border-color, background-color;
|
||||||
|
transition-duration: .2s;
|
||||||
|
animation-delay: 0s;
|
||||||
|
animation: list-item-fadein .2s forwards;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.links li a:hover {
|
||||||
|
color: #eee;
|
||||||
|
border-color: #eee;
|
||||||
|
background-color: var(--links) !important;
|
||||||
|
text-decoration: none;
|
||||||
|
box-shadow: 0 0 1em var(--links);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes list-item-fadein {
|
||||||
|
from {
|
||||||
|
opacity: 1;
|
||||||
|
background: #fff8;
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
div#web-buttons {
|
||||||
|
margin: 2rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#web-buttons a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#web-buttons img {
|
||||||
|
image-rendering: auto;
|
||||||
|
image-rendering: crisp-edges;
|
||||||
|
image-rendering: pixelated;
|
||||||
|
}
|
||||||
|
|
||||||
|
#web-buttons img:hover {
|
||||||
|
margin: -1px;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
transform: translate(-2px, -2px);
|
||||||
|
box-shadow: 1px 1px 0 #eee, 2px 2px 0 #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
border-top: 1px solid #888;
|
||||||
|
}
|
||||||
|
|
||||||
|
#footer {
|
||||||
|
width: min(calc(100% - 4rem), 720px);
|
||||||
|
margin: auto;
|
||||||
|
padding: 2rem 0;
|
||||||
|
color: #aaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes overlay-flicker {
|
||||||
|
from {
|
||||||
|
opacity: .5;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: .6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes overlay-scroll {
|
||||||
|
from {
|
||||||
|
background-position-y: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
background-position-y: .2em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
background-image: linear-gradient(180deg, rgba(0,0,0,0) 15%, rgb(0, 0, 0) 40%, rgb(0, 0, 0) 60%, rgba(0,0,0,0) 85%);
|
||||||
|
background-size: 100vw .2em;
|
||||||
|
background-repeat: repeat;
|
||||||
|
opacity: .5;
|
||||||
|
pointer-events: none;
|
||||||
|
/* animation: linear .05s infinite alternate overlay-flicker; */
|
||||||
|
mix-blend-mode: overlay;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 780px) {
|
||||||
|
body {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
width: calc(100vw - 2rem);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#header-text {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
a#header-links-toggle {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
header ul#header-links {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
top: 2.7rem;
|
||||||
|
width: calc(100vw - 2rem);
|
||||||
|
padding: 1rem;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
border-bottom: 1px solid #888;
|
||||||
|
background: #080808;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
header ul#header-links.open {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul#header-links li {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul#header-links li a,
|
||||||
|
ul#header-links li span {
|
||||||
|
margin: 0;
|
||||||
|
display: block;
|
||||||
|
font-size: 1rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
margin-top: 4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
550
public/style/music-gateway.css
Normal file
|
@ -0,0 +1,550 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: "Monaspace Argon";
|
||||||
|
src: url("/font/monaspace-argon/MonaspaceArgonVarVF[wght,wdth,slnt].woff2") format("woff2-variations");
|
||||||
|
font-weight: 125 950;
|
||||||
|
font-stretch: 75% 125%;
|
||||||
|
font-style: oblique 0deg 20deg;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
color: #fff;
|
||||||
|
background-color: #111;
|
||||||
|
font-family: "Monaspace Argon", monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
#background {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
filter: blur(25px) saturate(25%) brightness(0.5);
|
||||||
|
-webkit-filter: blur(25px) saturate(25%) brightness(0.5);;
|
||||||
|
animation: background-init .5s forwards,background-loop 30s ease-in-out infinite
|
||||||
|
}
|
||||||
|
|
||||||
|
#go-back {
|
||||||
|
position: absolute;
|
||||||
|
top: 1rem;
|
||||||
|
left: 1rem;
|
||||||
|
width: 2.5rem;
|
||||||
|
height: 2.5rem;
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
color: #fff;
|
||||||
|
background-color: #fff1;
|
||||||
|
border-radius: 4px;
|
||||||
|
text-decoration: none;
|
||||||
|
box-shadow: 0 0 8px #0004;
|
||||||
|
z-index: 100
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
display: flex;
|
||||||
|
min-height: calc(100vh - 6rem);
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center
|
||||||
|
}
|
||||||
|
|
||||||
|
#music-container {
|
||||||
|
position: absolute;
|
||||||
|
width: min(960px, calc(100vw - 4rem));
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
gap: 4rem;
|
||||||
|
animation: card-init .5s forwards
|
||||||
|
}
|
||||||
|
|
||||||
|
#art-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
width: 20rem;
|
||||||
|
transition: transform .5s cubic-bezier(0,0,0,1);
|
||||||
|
}
|
||||||
|
|
||||||
|
#art-container:hover {
|
||||||
|
transform: scale(1.05) translateY(-5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
#art-container:hover img#artwork {
|
||||||
|
box-shadow: 0 16px 18px #0003;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* TILT CONTROLS */
|
||||||
|
|
||||||
|
#art-container > div {
|
||||||
|
position: absolute;
|
||||||
|
width: 33.3%;
|
||||||
|
height: 33.3%;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
#art-container > div.tilt-topleft {
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#art-container > div.tilt-topleft:hover ~ #artwork {
|
||||||
|
transform: rotate3d(-1, 1, 0, 20deg);
|
||||||
|
filter: brightness(var(--shine));
|
||||||
|
-webkit-filter: brightness(var(--shine));
|
||||||
|
}
|
||||||
|
|
||||||
|
#art-container > div.tilt-top {
|
||||||
|
top: 0;
|
||||||
|
left: 33.3%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#art-container > div.tilt-top:hover ~ #artwork {
|
||||||
|
transform: rotate3d(-1, 0, 0, 20deg);
|
||||||
|
filter: brightness(var(--shine));
|
||||||
|
-webkit-filter: brightness(var(--shine));
|
||||||
|
}
|
||||||
|
|
||||||
|
#art-container > div.tilt-topright {
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#art-container > div.tilt-topright:hover ~ #artwork {
|
||||||
|
transform: rotate3d(-1, -1, 0, 20deg);
|
||||||
|
filter: brightness(var(--shine));
|
||||||
|
-webkit-filter: brightness(var(--shine));
|
||||||
|
}
|
||||||
|
|
||||||
|
#art-container > div.tilt-right {
|
||||||
|
top: 33.3%;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#art-container > div.tilt-right:hover ~ #artwork {
|
||||||
|
transform: rotate3d(0, -1, 0, 20deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
#art-container > div.tilt-bottomright {
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#art-container > div.tilt-bottomright:hover ~ #artwork {
|
||||||
|
transform: rotate3d(1, -1, 0, 20deg);
|
||||||
|
filter: brightness(var(--shadow));
|
||||||
|
-webkit-filter: brightness(var(--shadow));
|
||||||
|
}
|
||||||
|
|
||||||
|
#art-container > div.tilt-bottom {
|
||||||
|
bottom: 0;
|
||||||
|
left: 33.3%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#art-container > div.tilt-bottom:hover ~ #artwork {
|
||||||
|
transform: rotate3d(1, 0, 0, 20deg);
|
||||||
|
filter: brightness(var(--shadow));
|
||||||
|
-webkit-filter: brightness(var(--shadow));
|
||||||
|
}
|
||||||
|
|
||||||
|
#art-container > div.tilt-bottomleft {
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#art-container > div.tilt-bottomleft:hover ~ #artwork {
|
||||||
|
transform: rotate3d(1, 1, 0, 20deg);
|
||||||
|
filter: brightness(var(--shadow));
|
||||||
|
-webkit-filter: brightness(var(--shadow));
|
||||||
|
}
|
||||||
|
|
||||||
|
#art-container > div.tilt-left {
|
||||||
|
top: 33.3%;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#art-container > div.tilt-left:hover ~ #artwork {
|
||||||
|
transform: rotate3d(0, 1, 0, 20deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* TILT CONTROLS */
|
||||||
|
|
||||||
|
#artwork {
|
||||||
|
--shine: 1.05;
|
||||||
|
--shadow: 0.8;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 512px;
|
||||||
|
margin: auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
line-height: 15rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
color: #888;
|
||||||
|
background-color: #ccc;
|
||||||
|
box-shadow: 0 16px 16px #0004;
|
||||||
|
transition: transform 1s cubic-bezier(0,0,0,1), filter .3s linear, box-shadow .3s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#vertical-line {
|
||||||
|
width: 1px;
|
||||||
|
background-color: #fff4;
|
||||||
|
box-shadow: 0 0 16px #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
#title {
|
||||||
|
margin: 0;
|
||||||
|
line-height: 1em;
|
||||||
|
font-size: 3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#year {
|
||||||
|
margin-left: .9em;
|
||||||
|
font-size: .5em;
|
||||||
|
color: #eee
|
||||||
|
}
|
||||||
|
|
||||||
|
#artist {
|
||||||
|
margin: .2em 0 1em 0;
|
||||||
|
font-size: 1em;
|
||||||
|
color: #eee
|
||||||
|
}
|
||||||
|
|
||||||
|
#title,
|
||||||
|
#artist {
|
||||||
|
text-shadow: 0 .05em 2px #0004
|
||||||
|
}
|
||||||
|
|
||||||
|
#type {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0;
|
||||||
|
padding: .3em .8em;
|
||||||
|
color: #fff;
|
||||||
|
background-color: #111;
|
||||||
|
text-transform: uppercase;
|
||||||
|
border-radius: 4px
|
||||||
|
}
|
||||||
|
|
||||||
|
#type.single {
|
||||||
|
background-color: #3b47f4
|
||||||
|
}
|
||||||
|
|
||||||
|
#type.ep {
|
||||||
|
background-color: #f419bd
|
||||||
|
}
|
||||||
|
|
||||||
|
#type.album {
|
||||||
|
background-color: #34c627
|
||||||
|
}
|
||||||
|
|
||||||
|
#type.comp {
|
||||||
|
background-color: #ee8d46
|
||||||
|
}
|
||||||
|
|
||||||
|
#type.upcoming {
|
||||||
|
background-color: #ff3e3e
|
||||||
|
}
|
||||||
|
|
||||||
|
#type.upcoming span {
|
||||||
|
animation: bob 2s ease-in-out infinite;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#links {
|
||||||
|
margin: 1rem 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: .5rem
|
||||||
|
}
|
||||||
|
|
||||||
|
#links a {
|
||||||
|
padding: .5em .8em;
|
||||||
|
border-radius: 4px;
|
||||||
|
flex-grow: 1;
|
||||||
|
font-size: 1em;
|
||||||
|
color: #111;
|
||||||
|
background-color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: filter .1s,-webkit-filter .1s
|
||||||
|
}
|
||||||
|
|
||||||
|
#links a.buy {
|
||||||
|
background-color: #ff94e9
|
||||||
|
}
|
||||||
|
|
||||||
|
#links a.presave {
|
||||||
|
background-color: #ff94e9
|
||||||
|
}
|
||||||
|
|
||||||
|
#links a.spotify {
|
||||||
|
background-color: #8cff83
|
||||||
|
}
|
||||||
|
|
||||||
|
#links a.applemusic {
|
||||||
|
background-color: #8cd9ff
|
||||||
|
}
|
||||||
|
|
||||||
|
#links a.soundcloud {
|
||||||
|
background-color: #fdaa6d
|
||||||
|
}
|
||||||
|
|
||||||
|
#links a.youtube {
|
||||||
|
background-color: #ff6e6e
|
||||||
|
}
|
||||||
|
|
||||||
|
#links a:hover {
|
||||||
|
filter: brightness(125%);
|
||||||
|
-webkit-filter: brightness(125%)
|
||||||
|
}
|
||||||
|
|
||||||
|
#description {
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#share {
|
||||||
|
margin: 0;
|
||||||
|
display: inline-block;
|
||||||
|
text-shadow: 0 .05em 2px #0004;
|
||||||
|
cursor: pointer;
|
||||||
|
opacity: .5;
|
||||||
|
transition: opacity .1s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
#share:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#share.active {
|
||||||
|
animation: share-click .5s forwards
|
||||||
|
}
|
||||||
|
|
||||||
|
#share.active::after {
|
||||||
|
content: "✓";
|
||||||
|
font-size: 1.5em;
|
||||||
|
line-height: .75em;
|
||||||
|
position: absolute;
|
||||||
|
transform: translateX(.3em);
|
||||||
|
animation: share-after 2s cubic-bezier(.5,0,1,.5) forwards
|
||||||
|
}
|
||||||
|
|
||||||
|
#tracks {
|
||||||
|
flex-basis: 100%;
|
||||||
|
max-height: 10rem;
|
||||||
|
margin: auto 8rem;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0 2rem;
|
||||||
|
overflow-y: auto;
|
||||||
|
scrollbar-color: #fff transparent;
|
||||||
|
scrollbar-width: thin
|
||||||
|
}
|
||||||
|
|
||||||
|
#tracks .track-preview {
|
||||||
|
width: 100%;
|
||||||
|
height: 2.5rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
border-bottom: 1px solid #fff2;
|
||||||
|
border-radius: 4px;
|
||||||
|
user-select: none;
|
||||||
|
transition: background-color .2s,color .2s
|
||||||
|
}
|
||||||
|
|
||||||
|
#tracks .track-preview: last-of-type {
|
||||||
|
border-bottom: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.track-preview:hover {
|
||||||
|
background-color: #0002
|
||||||
|
}
|
||||||
|
|
||||||
|
.track-preview.playing {
|
||||||
|
color: #111;
|
||||||
|
background-color: #fff
|
||||||
|
}
|
||||||
|
|
||||||
|
.track-preview i {
|
||||||
|
width: .7em;
|
||||||
|
margin: auto .8em;
|
||||||
|
pointer-events: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.track-preview p {
|
||||||
|
margin: auto 0;
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 2em;
|
||||||
|
font-size: 1em;
|
||||||
|
pointer-events: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.track-preview audio {
|
||||||
|
width: 100%
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: 6rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
color: #eee;
|
||||||
|
background-color: #0008;
|
||||||
|
backdrop-filter: blur(25px)
|
||||||
|
}
|
||||||
|
|
||||||
|
footer p {
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
footer a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none
|
||||||
|
}
|
||||||
|
|
||||||
|
footer a:hover {
|
||||||
|
text-decoration: underline
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 800px) {
|
||||||
|
main {
|
||||||
|
min-height: calc(100vh - 4rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
#music-container {
|
||||||
|
width: calc(100vw - 8rem);
|
||||||
|
height: fit-content;
|
||||||
|
gap: 1rem;
|
||||||
|
padding: 2rem 0;
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center
|
||||||
|
}
|
||||||
|
|
||||||
|
#art-container {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#artwork {
|
||||||
|
max-width: 40vh;
|
||||||
|
max-height: 40vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
#vertical-line {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#music-container #info {
|
||||||
|
width: 100%
|
||||||
|
}
|
||||||
|
|
||||||
|
#year {
|
||||||
|
display: block;
|
||||||
|
margin: -.5em 0 .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#links {
|
||||||
|
margin: 2rem 0;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#share.active: : after {
|
||||||
|
transform: translate(calc(-50% - .6em),1.5em);
|
||||||
|
}
|
||||||
|
|
||||||
|
#tracks {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
height: 4rem;
|
||||||
|
font-size: .8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
background-image: linear-gradient(180deg, rgba(0,0,0,0) 15%, rgb(0, 0, 0) 40%, rgb(0, 0, 0) 60%, rgba(0,0,0,0) 85%);
|
||||||
|
background-size: 100vw .2em;
|
||||||
|
background-repeat: repeat;
|
||||||
|
opacity: .5;
|
||||||
|
pointer-events: none;
|
||||||
|
/* animation: linear .05s infinite alternate overlay-flicker; */
|
||||||
|
mix-blend-mode: overlay;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes background-init {
|
||||||
|
from {
|
||||||
|
opacity: 0
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes background-loop {
|
||||||
|
from {
|
||||||
|
transform: scale(1)
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: scale(1.05)
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: scale(1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes card-init {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(.9)
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes share-click {
|
||||||
|
from {
|
||||||
|
color: #5dfc01
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
color: #eee
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes share-after {
|
||||||
|
from {
|
||||||
|
opacity: 1
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bob {
|
||||||
|
from,
|
||||||
|
to {
|
||||||
|
transform: translateY(-10%);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateY(10%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
134
public/style/music.css
Normal file
|
@ -0,0 +1,134 @@
|
||||||
|
div.music {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
padding: 1.5rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 1.5em;
|
||||||
|
border: 1px solid #222;
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: #ffffff08;
|
||||||
|
transition: background-color .1s;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.music:hover {
|
||||||
|
background-color: #fff1;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.music a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.music h1:hover,
|
||||||
|
.music h2:hover,
|
||||||
|
.music h3:hover {
|
||||||
|
background: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.music-artwork img {
|
||||||
|
border: 1px solid #888;
|
||||||
|
}
|
||||||
|
|
||||||
|
.music-title {
|
||||||
|
margin: 0;
|
||||||
|
color: #eee;
|
||||||
|
font-size: 1.6em;
|
||||||
|
line-height: 1.6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.music-year {
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
|
||||||
|
.music-artist {
|
||||||
|
margin: -.5rem 0 0 0;
|
||||||
|
font-size: 1em;
|
||||||
|
color: #aaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3[class^=music-type] {
|
||||||
|
margin: 0 0 1rem 0;
|
||||||
|
font-size: .8em;
|
||||||
|
color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3.music-type-single {
|
||||||
|
color: var(--tertiary);
|
||||||
|
}
|
||||||
|
|
||||||
|
h3.music-type-compilation {
|
||||||
|
color: var(--secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
h3.music-type-album {
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
h3.music-type-upcoming {
|
||||||
|
color: #f47070;
|
||||||
|
}
|
||||||
|
|
||||||
|
.music-links {
|
||||||
|
width: fit-content;
|
||||||
|
margin: .5em 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
gap: .5rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
line-height: 1.7em;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.music-links li {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.music-links li a {
|
||||||
|
padding: .2em .5em;
|
||||||
|
border: 1px solid #65b4fd;
|
||||||
|
color: #65b4fd;
|
||||||
|
border-radius: 2px;
|
||||||
|
background-color: transparent;
|
||||||
|
transition-property: color, border-color, background-color;
|
||||||
|
transition-duration: .2s;
|
||||||
|
animation: list-item-fadein .2s forwards;
|
||||||
|
animation-delay: 0s;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.music-links li a:hover {
|
||||||
|
color: #eee;
|
||||||
|
border-color: #eee;
|
||||||
|
background-color: var(--links) !important;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2.question {
|
||||||
|
margin: 1rem 0;
|
||||||
|
padding: 1rem 1.5rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapse {
|
||||||
|
margin: -1rem 0 1rem 0;
|
||||||
|
padding: .5em 1.5em;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 740px) {
|
||||||
|
div.music {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.music-artwork,
|
||||||
|
.music-details {
|
||||||
|
text-align: center;
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
9
views/footer.html
Normal file
|
@ -0,0 +1,9 @@
|
||||||
|
{{define "footer"}}
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div id="footer">
|
||||||
|
<small><em>*made with ♥ by ari, 2024*</em></small>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
{{end}}
|
42
views/header.html
Normal file
|
@ -0,0 +1,42 @@
|
||||||
|
{{define "header"}}
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<nav>
|
||||||
|
<img src="img/favicon.png" id="header-icon" width="100" height="100" alt="">
|
||||||
|
<div id="header-text">
|
||||||
|
<h1>ari melody</h1>
|
||||||
|
<h2>your local SPACEGIRL 💫</h2>
|
||||||
|
</div>
|
||||||
|
<a id="header-links-toggle" onclick="toggle_header_links()">
|
||||||
|
<svg viewBox="0 0 70 50" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
|
||||||
|
<rect y="00" width="70" height="10" rx="5" fill="#eee" />
|
||||||
|
<rect y="20" width="70" height="10" rx="5" fill="#eee" />
|
||||||
|
<rect y="40" width="70" height="10" rx="5" fill="#eee" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<ul id="header-links">
|
||||||
|
<li>
|
||||||
|
<a href="/">home</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/music">music</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://git.arimelody.me/ari/arimelody.me" target="_blank">source</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<!-- coming later! -->
|
||||||
|
<span title="coming later!">blog</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<!-- coming later! -->
|
||||||
|
<span title="coming later!">art</span>
|
||||||
|
</li>
|
||||||
|
<li id="toggle-crt">
|
||||||
|
<a href="javascript:void(0)">crt</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{{end}}
|
196
views/index.html
Normal file
|
@ -0,0 +1,196 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
|
<title>ari melody 💫</title>
|
||||||
|
<link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
|
||||||
|
|
||||||
|
<meta name="description" content="home to your local SPACEGIRL 💫">
|
||||||
|
|
||||||
|
<meta property="og:title" content="ari melody">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:url" content="www.arimelody.me">
|
||||||
|
<meta property="og:image" content="https://www.arimelody.me/img/favicon.png">
|
||||||
|
<meta property="og:site_name" content="ari melody">
|
||||||
|
<meta property="og:description" content="home to your local SPACEGIRL 💫">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="style/main.css">
|
||||||
|
|
||||||
|
<script src="/script/main.js" defer></script>
|
||||||
|
<script src="/script/accessibility.js" defer></script>
|
||||||
|
<link rel="me" href="https://wetdry.world/@ari">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
{{block "header" .}}{{end}}
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<h1>
|
||||||
|
# hello, world!
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<strong>i'm ari!</strong>
|
||||||
|
<br>
|
||||||
|
<small>she/her 🏳️⚧️🏳️🌈💫🦆🇮🇪</small>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
i like to create things on the internet! namely <a href="/music">music</a>,
|
||||||
|
<a href="https://youtube.com/mellodoot" target="_blank">videos</a>, art <small><em>(link pending)</em></small>, and the odd
|
||||||
|
<a href="https://github.com/mellodoot?tab=repositories" target="_blank">code project</a> from time to time!
|
||||||
|
if it's a thing you can create on a computer, i've probably taken a swing at it.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
you're very welcome to take a look around my little slice of the internet here,
|
||||||
|
or explore any of the other corners i inhabit!
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
and if you're looking to support me financially, that's so cool of you!!
|
||||||
|
if you like, you can buy one or more of my songs over on
|
||||||
|
<a href="https://arimelody.bandcamp.com" target="_blank">bandcamp</a>,
|
||||||
|
so you can at least get something for your money.
|
||||||
|
thank you very much either way!! 💕
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
for anything else, you can reach me for any and all communications through
|
||||||
|
<a href="mailto:ari@arimelody.me">ari@arimelody.me</a>. if your message
|
||||||
|
contains anything beyond a silly gag, i strongly recommend encrypting
|
||||||
|
your message using my public pgp key, listed below!
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
thank you for stopping by- i hope you have a lovely rest of your day! 💫
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h2>
|
||||||
|
## metadata
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<strong>my colours 🌈</strong>
|
||||||
|
</p>
|
||||||
|
<ul>
|
||||||
|
<li>primary: <span class="col-primary">#b7fd49</span></li>
|
||||||
|
<li>secondary: <span class="col-secondary">#f8e05b</span></li>
|
||||||
|
<li>tertiary: <span class="col-tertiary">#f788fe</span></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<strong>my keys 🔑</strong>
|
||||||
|
</p>
|
||||||
|
<ul>
|
||||||
|
<li>pgp: <a href="/keys/ari melody_0x92678188_public.asc" target="_blank">[link]</a></li>
|
||||||
|
<li>ssh (ed25519): <a href="/keys/id_ari_ed25519.pub" target="_blank">[link]</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<strong>where to find me 🛰️</strong>
|
||||||
|
</p>
|
||||||
|
<ul class="links">
|
||||||
|
<li>
|
||||||
|
<a href="https://youtube.com/@mellodoot" target="_blank">youtube</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://mellodoot.tumblr.com" target="_blank">tumblr</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://twitch.tv/mellodoot" target="_blank">twitch</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://sptfy.com/mellodoot" target="_blank">spotify</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://soundcloud.com/arimelody" target="_blank">soundcloud</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://github.com/mellodoot" target="_blank">github</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<strong>projects i've worked on 🛠️</strong>
|
||||||
|
</p>
|
||||||
|
<ul class="links">
|
||||||
|
<li>
|
||||||
|
<a href="https://catdance.xyz" target="_blank">
|
||||||
|
catdance
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://github.com/mellodoot/sandblock" target="_blank">
|
||||||
|
sandblock
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://github.com/mellodoot/prideflag" target="_blank">
|
||||||
|
pride flag
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://github.com/mellodoot/ipaddrgen" target="_blank">
|
||||||
|
ipaddrgen
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://impact.arimelody.me/" target="_blank">
|
||||||
|
impact meme
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://term.arimelody.me/" target="_blank">
|
||||||
|
OpenTerminal
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h2>## cool people</h2>
|
||||||
|
|
||||||
|
<div id="web-buttons">
|
||||||
|
<a href="https://arimelody.me">
|
||||||
|
<img src="/img/buttons/ari melody.gif" alt="ari melody web button">
|
||||||
|
</a>
|
||||||
|
<a href="https://supitszaire.com" target="_blank">
|
||||||
|
<img src="/img/buttons/zaire.gif" alt="zaire web button">
|
||||||
|
</a>
|
||||||
|
<a href="https://mae.wtf" target="_blank">
|
||||||
|
<img src="/img/buttons/mae.png" alt="vimae web button">
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<img src="/img/buttons/misc/debian.gif" alt="powered by debian">
|
||||||
|
<img src="/img/buttons/misc/girls4notepad.gif" alt="girls 4 notepad">
|
||||||
|
<img src="/img/buttons/misc/gaywebring.gif" alt="this website is GAY">
|
||||||
|
<img src="/img/buttons/misc/graphicdesign.gif" alt="graphic design is my passion">
|
||||||
|
<img src="/img/buttons/misc/gplv3.gif" alt="GPLv3 free software">
|
||||||
|
<img src="/img/buttons/misc/hl.gif" alt="half-life">
|
||||||
|
<img src="/img/buttons/misc/h-free-anim.gif" alt="dis site is hentai FREE">
|
||||||
|
<img src="/img/buttons/misc/sprunk.gif" alt="sprunk">
|
||||||
|
<img src="/img/buttons/misc/tohell.gif" alt="go straight to hell">
|
||||||
|
<img src="/img/buttons/misc/virusalert.gif" alt="virus alert! click here" onclick="alert('meow :3')">
|
||||||
|
<img src="/img/buttons/misc/wii.gif" alt="wii">
|
||||||
|
<img src="/img/buttons/misc/www2.gif" alt="www">
|
||||||
|
<img src="/img/buttons/misc/iemandatory.gif" alt="get mandatory internet explorer">
|
||||||
|
<img src="/img/buttons/misc/learn_html.gif" alt="HTML - learn it today!">
|
||||||
|
<a href="https://smokepowered.com" target="_blank">
|
||||||
|
<img src="/img/buttons/misc/smokepowered.gif" alt="high on SMOKE">
|
||||||
|
</a>
|
||||||
|
<a href="https://epicblazed.com" target="_blank">
|
||||||
|
<img src="/img/buttons/misc/epicblazed.png" alt="epic blazed">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
{{block "footer" .}}{{end}}
|
||||||
|
|
||||||
|
<div id="overlay"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
121
views/music-gateway.html
Normal file
|
@ -0,0 +1,121 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
|
<title>{{.PrintArtists}} - {{.Title}}</title>
|
||||||
|
<link rel="icon" href="{{.ResolveArtwork}}">
|
||||||
|
|
||||||
|
<meta name="description" content="Stream "{{.Title}}" by {{.PrintArtists}} on all platforms!">
|
||||||
|
<meta name="author" content="{{.PrintArtists}}">
|
||||||
|
<meta name="keywords" content="{{.PrintCommaArtists}}, music, {{.Title}}, {{.Id}}, {{.Year}}">
|
||||||
|
|
||||||
|
<meta property="og:url" content="https://arimelody.me/music/{{.Id}}">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:locale" content="en_IE">
|
||||||
|
<meta property="og:site_name" content="ari melody music">
|
||||||
|
<meta property="og.Title" content="{{.PrintArtists}} - {{.Title}}">
|
||||||
|
<meta property="og:description" content="Stream "{{.Title}}" by {{.PrintArtists}} on all platforms!">
|
||||||
|
<meta property="og:image" content="https://arimelody.me{{.ResolveArtwork}}">
|
||||||
|
|
||||||
|
<meta name="twitter:card" content="summary_large_image">
|
||||||
|
<meta name="twitter:site" content="@funniduck">
|
||||||
|
<meta name="twitter:creator" content="@funniduck">
|
||||||
|
<meta property="twitter:domain" content="arimelody.me">
|
||||||
|
<meta property="twitter:url" content="https://arimelody.me/music/{{.Id}}">
|
||||||
|
<meta name="twitter.Title" content="{{.PrintArtists}} - {{.Title}}">
|
||||||
|
<meta name="twitter:description" content="Stream "{{.Title}}" by mellodoot on all platforms!">
|
||||||
|
<meta name="twitter:image" content="https://arimelody.me{{.ResolveArtwork}}">
|
||||||
|
<meta name="twitter:image:alt" content="Cover art for "{{.Title}}"">
|
||||||
|
|
||||||
|
<script type="text/javascript" src="/script/music-gateway.js" defer=""></script>
|
||||||
|
<script type="text/javascript" src="/script/prideflag.js" defer=""></script>
|
||||||
|
<link rel="stylesheet" href="/style/music-gateway.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="background" data-url="{{.ResolveArtwork}}"></div>
|
||||||
|
<div id="overlay"></div>
|
||||||
|
|
||||||
|
<a id="go-back" title="back to arimelody.me" href="/music"><</a>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<div id="music-container">
|
||||||
|
<div id="art-container">
|
||||||
|
<div class="tilt-topleft"></div>
|
||||||
|
<div class="tilt-top"></div>
|
||||||
|
<div class="tilt-topright"></div>
|
||||||
|
<div class="tilt-right"></div>
|
||||||
|
<div class="tilt-bottomright"></div>
|
||||||
|
<div class="tilt-bottom"></div>
|
||||||
|
<div class="tilt-bottomleft"></div>
|
||||||
|
<div class="tilt-left"></div>
|
||||||
|
<img id="artwork" src="{{.ResolveArtwork}}" alt="{{.Title}} artwork">
|
||||||
|
</div>
|
||||||
|
<div id="vertical-line"></div>
|
||||||
|
<div id="info">
|
||||||
|
<h1 id="title">{{.Title}}<span id="year">{{.Year}}</span></h1>
|
||||||
|
<p id="artist">{{.PrintArtists}}</p>
|
||||||
|
<p id="type" class="{{.Type}}">{{.Type}}</p>
|
||||||
|
|
||||||
|
<div id="links">
|
||||||
|
{{if .Buylink}}
|
||||||
|
<a href="{{.Buylink}}" target="_blank" class="buy">
|
||||||
|
{{if .Buyname}}
|
||||||
|
{{.Buyname}}
|
||||||
|
{{else}}
|
||||||
|
{{if .Free}}
|
||||||
|
download
|
||||||
|
{{else}}
|
||||||
|
buy
|
||||||
|
{{end}}
|
||||||
|
{{end}}</a>
|
||||||
|
{{end}}
|
||||||
|
|
||||||
|
{{range .Links}}
|
||||||
|
<a class="{{.NormaliseName}}" target="_blank" href="{{.Url}}">
|
||||||
|
{{.Name}}
|
||||||
|
</a>
|
||||||
|
{{end}}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p id="description">
|
||||||
|
{{.Description}}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p id="share">share</p>
|
||||||
|
</div>
|
||||||
|
<!-- <div id="tracks"> -->
|
||||||
|
<!-- <% var file = `/audio/preview/${data.id}.webm` %> -->
|
||||||
|
<!-- <% if (data.tracks && typeof(data.tracks) == typeof([])) { %> -->
|
||||||
|
<!-- <% for( let i = 0; i < data.tracks.length; i++ ) { %> -->
|
||||||
|
<!-- <% -->
|
||||||
|
<!-- songid = data.tracks[i].title.toLowerCase().replace(/[^a-z0-9]/g, ""); -->
|
||||||
|
<!-- file = `/audio/preview/${data.id}-${songid}.webm`; -->
|
||||||
|
<!-- %> -->
|
||||||
|
<!---->
|
||||||
|
<!-- <div class="track-preview" id="preview-<%= songid %>"> -->
|
||||||
|
<!-- <i class="fa-solid fa-play play"></i> -->
|
||||||
|
<!-- <p><%= data.tracks[i].title %></p> -->
|
||||||
|
<!-- <audio src="<%= file %>"></audio> -->
|
||||||
|
<!-- </div> -->
|
||||||
|
<!---->
|
||||||
|
<!-- <% } %> -->
|
||||||
|
<!-- <% } else { %> -->
|
||||||
|
<!-- <div class="track-preview" id="preview-<%= data.id %>"> -->
|
||||||
|
<!-- <i class="fa-solid fa-play play"></i> -->
|
||||||
|
<!-- <p>{{.Title}}</p> -->
|
||||||
|
<!-- <audio src="<%= file %>"></audio> -->
|
||||||
|
<!-- </div> -->
|
||||||
|
<!-- <% } %> -->
|
||||||
|
<!-- </div> -->
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>made with ❤ by <a href="/" target="_blank">ari melody</a>, 2024</p>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
145
views/music.html
Normal file
|
@ -0,0 +1,145 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
|
<title>music - ari melody 💫</title>
|
||||||
|
<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
|
||||||
|
|
||||||
|
<meta name="description" content="music from your local SPACEGIRL 💫">
|
||||||
|
|
||||||
|
<meta property="og:title" content="ari melody music">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:url" content="www.arimelody.me/music">
|
||||||
|
<meta property="og:image" content="https://www.arimelody.me/img/favicon.png">
|
||||||
|
<meta property="og:site_name" content="ari melody">
|
||||||
|
<meta property="og:description" content="music from your local SPACEGIRL 💫">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="/style/main.css">
|
||||||
|
<link rel="stylesheet" href="/style/music.css">
|
||||||
|
|
||||||
|
<script src="/script/main.js" defer></script>
|
||||||
|
<script src="/script/accessibility.js" defer></script>
|
||||||
|
<script src="/script/music.js" defer></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<nav>
|
||||||
|
<img src="/img/favicon.png" id="header-icon" width="100" height="100" alt="">
|
||||||
|
<div id="header-text">
|
||||||
|
<h1>ari melody</h1>
|
||||||
|
<h2>your local SPACEGIRL 💫</h2>
|
||||||
|
</div>
|
||||||
|
<a id="header-links-toggle" onclick="toggle_header_links()">
|
||||||
|
<svg viewBox="0 0 70 50" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
|
||||||
|
<rect y="00" width="70" height="10" rx="5" fill="#eee" />
|
||||||
|
<rect y="20" width="70" height="10" rx="5" fill="#eee" />
|
||||||
|
<rect y="40" width="70" height="10" rx="5" fill="#eee" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<ul id="header-links">
|
||||||
|
<li>
|
||||||
|
<a href="/">home</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/music">music</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://git.arimelody.me/ari/arimelody.me" target="_blank">source</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<!-- coming later! -->
|
||||||
|
<span title="coming later!">blog</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<!-- coming later! -->
|
||||||
|
<span title="coming later!">art</span>
|
||||||
|
</li>
|
||||||
|
<li id="toggle-crt">
|
||||||
|
<a href="javascript:void(0)">crt</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<h1>
|
||||||
|
# my music
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<div id="music-container">
|
||||||
|
{{range $Album := .}}
|
||||||
|
<div class="music" id="{{$Album.Id}}">
|
||||||
|
<div class="music-artwork">
|
||||||
|
<img src="{{$Album.ResolveArtwork}}" alt="{{$Album.Title}} artwork" width="128">
|
||||||
|
</div>
|
||||||
|
<div class="music-details">
|
||||||
|
<a href="/music/{{$Album.Id}}"><h1 class="music-title">{{$Album.Title}}</h1></a>
|
||||||
|
<h2 class="music-artist">{{$Album.PrintArtists}}</h2>
|
||||||
|
<h3 class="music-type-{{.Type}}">{{$Album.Type}}</h3>
|
||||||
|
<ul class="music-links">
|
||||||
|
{{range $Link := $Album.Links}}
|
||||||
|
<li>
|
||||||
|
<a href="{{$Link.Url}}">{{$Link.Name}}</a>
|
||||||
|
</li>
|
||||||
|
{{end}}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{{end}}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 id="usage" class="question">
|
||||||
|
<a href="#usage">
|
||||||
|
> "can i use your music in my content?"
|
||||||
|
</a>
|
||||||
|
</h2>
|
||||||
|
<div class="collapse">
|
||||||
|
<p>
|
||||||
|
<strong class="big">yes!</strong> well, in most cases...
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
from <a href="/music/dream">Dream (2022)</a> onward, all of my <em>self-released</em> songs are
|
||||||
|
licensed under <a href="https://creativecommons.org/licenses/by-sa/3.0/" target="_blank">Creative Commons Attribution-ShareAlike 3.0</a>. anyone may use these
|
||||||
|
songs freely, so long as they provide credit back to me!
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
a great example of some credit text would be as follows:
|
||||||
|
</p>
|
||||||
|
<blockquote>
|
||||||
|
music used: mellodoot - Dream<br>
|
||||||
|
buy it here: <a href="/music/dream">https://arimelody.me/music/dream</a><br>
|
||||||
|
licensed under CC BY-SA 3.0.
|
||||||
|
</blockquote>
|
||||||
|
<p>
|
||||||
|
for any songs prior to this, they were all either released by me (in which case, i honestly
|
||||||
|
don't mind), or in collaboration with chill people who i don't see having an issue with it.
|
||||||
|
do be sure to ask them about it, though!
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
in the event the song you want to use is released under some other label, their usage rights
|
||||||
|
will more than likely trump whatever i'd otherwise have in mind. i'll try to negotiate some
|
||||||
|
nice terms, though! ;3
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
i love the idea of other creators using my songs in their work, so if you do happen to use
|
||||||
|
my stuff in a work you're particularly proud of, feel free to send it my way!
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
> <a href="mailto:ari@arimelody.me">ari@arimelody.me</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div id="footer">
|
||||||
|
<small><em>*made with ♥ by ari, 2024*</em></small>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<div id="overlay"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|