include mixins/head.pug
include mixins/menu.pug
include mixins/scroller.pug
-
const info = require(__dirname + '/public/data/ayaya.json');
const sizeOf = require('image-size');
+head('Ayaya - Old')
body.body.body_hidden.body_page_old(data-start='#dae4ff', data-end='#dae4ff')
+menu('old')
//- Menu button
.menu__button.menu__button_old
.hamburger.menu__hamburger.hamburger_old
.menu__button.menu__button_bottom.menu__button_hidden.menu__button_old
//- Hamburger just to keep the button the same size as the main one
.hamburger.menu__hamburger.hamburger_hidden
//- Main play button
.play-button.play-button_main.play-button_main_old#play-button
//- Horizontal slide
.slider.slider_type_horizontal
.slider__wrapper
.slider__slide
.columns
.columns__column.columns__column_md_3
.columns__column.columns__column_md_6.columns__column_centered-content
h2.old-title Status
+scroller('old')
#status
.slider__slide
.columns
.columns__column.columns__column_md_4
img.old-about-us__image(src='/public/images/site/old/aboutus.png')
.columns__column.columns__column_md_8
h2.old-title About Us
p.old-text #{info.old_description_us}
.slider__slide
.columns
.columns__column.columns__column_md_8
h2.old-title About
.old-about__page.old-about__page_active
p.old-text #{info.old_description}
each page in info.old_characteristics
.old-about__page
table.old-about__table
each chars, name in page
tr
td(rowspan=chars.length) #{name}
td #{chars[0]}
if chars[1]
tr
td #{chars[1]}
.old-about__link.old-about__link_hidden.old-about__link_dir_left#about-less
| Previous...
.old-about__link.old-about__link_dir_right#about-more
| ...More
.columns__column.columns__column_md_4
img.old-about__image(src='/public/images/site/ayaya_twintail.png')
img.old-about__image(src='/public/images/site/ayaya.png')
//- Main slide
.slider__slide
//- Vertical slider
.slider.slider_type_vertical
.slider__wrapper
//- Intro slide
.slider__slide
.old-welcome
h1.old-letter
img.old-letter__char(alt="Ayaya", src=`/public/images/site/old/letter_w.png`)
each l in 'elcome'
.old-letter
img.old-letter__char(src=`/public/images/site/old/letter_${l}.png`)
img.old-corner.old-corner_lt(src='/public/images/site/old/fancy_corner.png')
img.old-corner.old-corner_rt(src='/public/images/site/old/fancy_corner.png')
img.old-corner.old-corner_lb(src='/public/images/site/old/fancy_corner.png')
img.old-corner.old-corner_rb(src='/public/images/site/old/fancy_corner.png')
.slider__slide
.marquees
.marquee.marquee_left Ayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayaya
.marquee.marquee_right Ayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayaya
.marquee.marquee_left Ayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayaya
.marquee.marquee_right Ayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayaya
.marquee.marquee_left Ayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayayaya
.slider__slide
h2.old-title Songs
#music.old-songs
//- Divide pages into with 21 songs each
//- TODO: Make this more responsive
- songsPerPage = 21
each _, i in Array(Math.ceil(info.music.length / songsPerPage))
.old-songs__page(class= !i ? 'old-songs__page_active' : '')
each _, j in Array(Math.min(info.music.length - i * songsPerPage, songsPerPage))
- const song = info.music[i * songsPerPage + j]
.old-song.song(data-url!=`${song.url}`)
.old-song__info
.old-song__player.old-song__player_paused
.play-button.play-button_old
svg.old-icon(viewbox="0 0 32 32")
path(stroke-miterlimit="10" d="M12,9l12,7l-12,7V9z")
h3.old-song_title
each char, k in song.title
//- If the title is in japanese then double the spacing
- let space = song.title.split('').find(c => c.charCodeAt() >= 0x3000 && c.charCodeAt() <= 0x30ff) ? 30 : 15
span(style=`transform: translateX(-50%) rotateZ(${k * space}deg)`) #{char}
.old-songs__link.old-songs__link_hidden.old-songs__link_dir_left#songs-less
| Previous Songs
.old-songs__link.old-songs__link_dir_right#songs-more
| More Songs
audio#player
canvas.old-songs__visualizer#old-visualizer
.slider__slide#mousearea
#board.old-board
.old-board__board
img.old-board__img(src='/public/images/site/old/board.png')
.old-board__text
img.old-board__img(src='/public/images/site/old/do-it-for-her.png')
.old-board__layer(data-cat='kisekae')
img.old-board__img(src='/public/images/galleries/kisekae-aya-7.jpg')
.old-board__link
| Kisekae
.old-board__layer(data-cat='minecraft')
img.old-board__img(src='/public/images/galleries/minecraft-aya-1.jpg')
.old-board__link
| Minecraft
.old-board__layer(data-cat='commissions')
img.old-board__img(src='/public/images/galleries/commission-aya-7.jpg')
.old-board__link
| Commissions
.old-board__layer(data-cat='official')
img.old-board__img(src='/public/images/galleries/official-aya-5.jpg')
.old-board__link
| Official Art
.old-board__layer(data-cat='oc')
img.old-board__img(src='/public/images/galleries/oc-aya-1.png')
.old-board__link
| OC
.old-board__layer(data-cat='video')
video.old-board__img(muted="true", src='https://aya.volk.pt/video/video-aya-7.webm')
.old-board__link
| Videos
.old-board__layer(data-cat='other')
img.old-board__img(src='/public/images/galleries/other-aya-1.jpg')
.old-board__link
| Other
.old-board__layer(data-cat='manga')
img.old-board__img(src='/public/images/galleries/manga-aya-4.jpg')
.old-board__link
| Manga
.old-board__layer(data-cat='3d')
img.old-board__img(src='/public/images/galleries/3d-aya-5.jpg')
.old-board__link
| 3D
.old-board__layer(data-cat='screenshots')
img.old-board__img(src='/public/images/galleries/screenshot-aya-3.jpg')
.old-board__link
| Screenshots
.old-board__layer(data-cat='fanart')
img.old-board__img(src='/public/images/galleries/fanart-aya-2.jpg')
.old-board__link
| Fanart
.slider__slide
.columns
.columns__column.columns__column_md_8
h2.old-title.old-title_small Comments
form.old-form#comment-form(action='https://aya.volk.pt/comments', method='POST')
label.old-form__label(for='comments-name') Name:
|
|
input.old-form__input.old-form__input_single#comment-name(name='name', type='text', placeholder='(optional)')
textarea.old-form__input.old-form__input_multi#comment-text(name="text", placeholder='Comment')
.old-form__controls
.old-form__reply#replying-to
.old-form__submit#submit
| Submit
svg.old-form__icon.old-icon(viewbox="0 0 32 32")
path.old-form__path(stroke-miterlimit="10" d="m30.76 25.49c-1.5812 1.5681-3.101 2.9516-4.5596 4.5197-0.60059 0.64567-0.91928 0.4612-1.4586 0-2.6965-2.7672-5.4789-5.5343-8.1754-8.3015-0.57608-0.55343-0.89476-0.55343-1.4341 0-2.672 2.7672-5.4299 5.4421-8.0896 8.2092-0.72316 0.73791-1.1154 0.64567-1.7773-0.092241-1.0909-1.1991-2.2063-2.306-3.4442-3.4128-0.89476-0.73791-0.66188-1.1991 0.061285-1.937 2.672-2.5827 5.2583-5.2576 7.9548-7.8403 0.66188-0.64567 0.68639-1.0146 0.02451-1.6603-2.672-2.5827-5.2583-5.2576-7.9548-7.8403-0.85799-0.83015-0.74768-1.2913 0.061285-2.0293 1.1522-1.0146 2.243-2.0293 3.2481-3.2284 0.68639-0.75636 1.1154-0.90394 1.9489-0.092239 2.5862 2.7672 5.2828 5.3498 7.869 8.0248 0.66188 0.64567 1.0051 0.64567 1.667 0 2.5862-2.6749 5.3073-5.2576 7.869-8.0248 0.80896-0.8117 1.2625-0.70101 1.9856 0.092239 1.0909 1.1991 2.243 2.3982 3.4442 3.4128 0.74768 0.73791 0.57608 1.1069-0.06129 1.7525-2.6965 2.5827-5.3441 5.2576-8.0406 7.9325-0.66188 0.64567-0.72316 1.0146-0.02451 1.6603z")
.columns__column.columns__column_md_4
+scroller('old')
.old-comments#comments
//- Anchors
.anchors.anchors_hidden#anchors
img.anchor.anchor_bottom.anchor_left-3(src='/public/images/site/old/status.png')
img.anchor.anchor_middle.anchor_left-2(src='/public/images/site/old/us.png')
img.anchor.anchor_top.anchor_left-1(src='/public/images/site/old/about.png')
img.anchor.anchor_main(src='/public/images/site/old/main.png')
img.anchor.anchor_top.anchor_right-3(src='/public/images/site/old/songs.png')
img.anchor.anchor_middle.anchor_right-2(src='/public/images/site/old/gallery.png')
img.anchor.anchor_bottom.anchor_right-1(src='/public/images/site/old/comments.png')
.anchors__tooltip#tooltip
.old-gallery__screen#gallery-screen
.old-gallery__link#gallery-back
| Back
each images, name in info.gallery
.old-gallery__list(id=`gallery-${name}`)
.slider.slider_type_horizontal-list.old-gallery__slider
.slider__wrapper
each filename in images
- dimensions = sizeOf(`${__dirname}/public/images/galleries/${filename}`)
.slider__slide.old-gallery__frame(data-src=filename, style=`height: 15vh; width: ${15 * dimensions.width / dimensions.height}vh`)
.old-gallery__list(id='gallery-video')
.slider.slider_type_horizontal-list.old-gallery__slider
.slider__wrapper
each filename in info.old_videos
.slider__slide.old-gallery__frame(data-src=filename, style=`height: 15vh; width: ${15 * 16 / 9}vh`)
script(src='/public/scripts/main.min.js')