site_fursona_refs/tpl/index.haml

260 lines
9.5 KiB
Plaintext

- include 'header.html'
%html{'lang': '{{language}}', 'dir': 'ltr'}
%head
%meta{'charset': 'utf-8'}
%title= name
- if keywords
%meta{'name': 'keywords', 'content': '{{keywords}}'}
- if description
%meta{'name': 'description', 'content': '{{description}}'}
%meta{'name': 'theme-color', 'content': '#7EB643'}
%meta{'name': 'viewport', 'content': 'width=device-width, user-scalable=yes'}
%script= js_org_hierarchical
%script= js_org_linear
%script= js_imgs_hierarchical
%script= js_imgs_thumb
%script= js_imgs_small
%script= js_imgs_dcent
%script= js_imgs_large
%script= js_imgs_full
%script= js_artists
%script= js_images
%script= js_social
%script= js_tags
%script= js_zips
%script= js_name
%script= js_formats
%script= js_dimens
%script= js_sizes
%script= js_mes
%script= js_canonical_colors
%script= js_color_repeated
%script= js_color_list
%script= js_bodyparts
%script= js_tag_groups_sorted
%script= js_all_tags_by_group
%script= js_tag_groups
%script= js_sorted_artists
%script= js_tag_groups_nonempty_sorted
%script{'defer': 'defer', 'src': './main.js'}
%link{'rel': 'stylesheet', 'href': './main.css'}
%link{'rel': 'stylesheet', 'href': './font-awesome-4.7.0/css/font-awesome.min.css'}
%link{'rel': 'shortcut icon', 'type': 'image/png', 'href': './favicon.png'}
%link{'rel': 'apple-touch-icon', 'href': './appletouchicon.png'}
- for me in mes
%link{'rel': 'me', 'href': '{{me}}'}
%body
%header
.pageWidthConstraint
%h1.blockdisplay= name
%section.blockdisplay
%h2.nodisplay Filter criteria
%nav#filterNav.filterbar.nodisplay
Only displaying images with:
%span.badge
%i#filterIcon.fa.fa-user{'aria-hidden': 'true'}
%span= ' '
%span#filterText Something
%span= ' '
%i.fa.fa-times-circle{'aria-hidden': 'true', 'onclick': 'clearFilters()'}
#galleryBrowser.fullscreenOverlay.nodisplay
.closeButton{'onclick': 'closeGallery()'}
%i.fa.fa-2x.fa-times{'aria-hidden': 'true'}
#galleryImage
#imageQualities
#qualityThumb.quality
%a#downloadThumb
%i.fa.fa-download{'aria-hidden': 'true'}
%i#seeThumb.fa.fa-eye{'aria-hidden': 'true'}
%span Thumbnail
%span#sizeThumb= '(?)'
#qualitySmall.quality
%a#downloadSmall
%i.fa.fa-download{'aria-hidden': 'true'}
%i#seeSmall.fa.fa-eye{'aria-hidden': 'true'}
%span Small
%span#sizeSmall= '(?)'
#qualityDcent.quality
%a#downloadDcent
%i.fa.fa-download{'aria-hidden': 'true'}
%i#seeDcent.fa.fa-eye{'aria-hidden': 'true'}
%span Decent
%span#sizeDcent= '(?)'
#qualityLarge.quality
%a#downloadLarge
%i.fa.fa-download{'aria-hidden': 'true'}
%i#seeLarge.fa.fa-eye{'aria-hidden': 'true'}
%span Large
%span#sizeLarge= '(?)'
#qualityFull.quality
%a#downloadFull
%i.fa.fa-download{'aria-hidden': 'true'}
%i#seeFull.fa.fa-eye{'aria-hidden': 'true'}
%span Full
%span#sizeFull= '(?)'
#sideCard
%h2 Display
.controlButtons
%a.showNested.selected{'href': '#'}
%i.fa.fa-indent
Nested list
%a.showListed{'href': '#js:showAsList()'}
%i.fa.fa-bars
Plain list
%a.showFiltered{'href': '#js:buildFilters()'}
%i.fa.fa-filter
Filtered list
%h2 Fast navigation
.fastNavigation
- for item in imgs_thumb
- with info = images[loop.index0]
.fastNavigationCard{'style': 'background-image: url("{{item}}");', 'id': 'fastnav-{{loop.index0}}'}
#sideCardShadow
#sideCardRight
- for item in imgs_thumb
- with info = images[loop.index0]
.rightCard{'id': 'details-{{loop.index0}}'}
%span.title
%img.detailPic{'src': '{{item}}'}
%span= ' '
%span.titleText= info['name']
%dl
- if info['link']
%dt
%i.fa.fa-link{'aria-hidden': 'true'}
%dd
.link
%a{'href': '{{info["link"]}}', 'target': '_blank', 'rel': 'noreferrer'}
{{ info['link'] }}
- if info['notes']
%dt
%i.fa.fa-sticky-note{'aria-hidden': 'true'}
%dd
.notes.markdown
{{ info['notes']|markdown }}
#sideCardRightShadow
#filterBuilder.fullscreenOverlay.nodisplay
.closeButton{'onclick': 'closeFilterBuilder()'}
%i.fa.fa-2x.fa-times{'aria-hidden': 'true'}
#availableFilters
.taggroup
- for artistk in sorted_artists
- with artistv=artists[artistk]
%span.badge{'onclick': 'filterArtist("{{artistk}}")'}
%i{'aria-hidden': 'true', 'class': 'fa fa-user'}
%span= ' '
%span= artistv['name']
%hr
- for taggroupk in tag_groups_nonempty_sorted
.taggroup
- for tagk in all_tags_by_group.get(taggroupk, [])
%span.badge{'onclick': 'filterTag("{{tagk}}")'}
%i{'aria-hidden': 'true', 'class': 'fa fa-{{tags[tagk]["icon"]}}'}
%span= ' '
%span= tags[tagk]['name']
- if not loop.last
%hr
%main#main.pageWidthConstraint
%noscript
Please enable JavaScript for some features to work.
%section#nestedElements
%h2.nodisplay Image list with nested elements
- for nestedItem in org_hierarchical
- with item=imgs_hierarchical[nestedItem.item]
- with info=images[nestedItem.item]
.card.housingNested{'id': 'nested-{{nestedItem.item}}'}
%img.cardPic{'src': './{{item}}', 'loading': 'lazy', 'onclick': 'openGallery({{nestedItem.item}})', 'alt': ''}
.cardBody
- include 'cardbody.html'
- if nestedItem.children|length > 0
.cardBottom.minicardHolder
- for child in nestedItem.children
- with subitem=imgs_hierarchical[child]
- with subinfo=images[child]
.card.minicard{'id': 'nested-{{child}}', 'onclick': 'openGallery({{child}})'}
%img.cardPic{'src': './{{subitem}}', 'loading': 'lazy', 'alt': ''}
.cardBody= subinfo['name']
%section#listElements.nodisplay
%h2.nodisplay Image list without nested elements
- for item in org_linear
- with info = images[loop.index0]
.card.housingSimple{'id': 'list-{{loop.index0}}'}
%img.cardPic{'src': '{{item}}', 'onclick': 'openGallery({{loop.index0}})', 'alt': ''}
.cardBody
- include 'cardbody.html'
%section#colorAccuracy
%h2.nodisplay Color palette
.card
.cardBody
%h3 Color palette (in practice)
%span#colorAccuracyJSWall You need to turn JavaScript on for this feature of the site to work.
#colorAccuracyJSProtectedContent.nodisplay
%table
%thead
%tr
%th{'rowspan': '2'}
Art
- for clr in color_list
%th
.rotate270= bodyparts[clr]
%tr
- if color_repeated[False]>0
- with cs=color_repeated[False]
%th{'colspan': '{{cs}}'}
Base colors
- if color_repeated[True]>0
- with cs=color_repeated[True]
%th{'colspan': '{{cs}}'}
Often mistaken
%tbody
%tr
%th#row_ideal
Ideal
- for clr in color_list
%td{'title': '{%if canonical_colors[clr]["repeated"]%}Same color as "{{bodyparts[canonical_colors[clr]["rootColor"]]}}"{%else%}100% similar to the ideal value{%endif%}', 'style': 'background: {{canonical_colors[clr]["color"]}};', 'class': '{%if canonical_colors[clr]["colorIsLight"]%}blackText{%else%}whiteText{%endif%}'}
= canonical_colors[clr]['color']
%br
- if canonical_colors[clr]["repeated"]
%i.fa.fa-info-circle{'aria-hidden': 'true'}
- else
(100%)
%tr#row_avg.hideablePaletteItem
%th
Mean
- for clr in color_list
%td{'id': 'coloravg{{clr}}', 'class': 'clr_{{clr}}'}
- for item in org_linear
- with img=loop.index0
- with info=images[img]
- if info['color']|length > 0
%tr{'id': 'row_{{img}}', 'class': 'hideablePaletteItem'}
%th
%img.icon64{'src': './{{item}}', 'loading': 'lazy', 'onclick': 'openGallery({{img}})', 'alt': ''}
- for clr in color_list
%td{'title': 'Unspecified\nMaybe because it's not visible', 'class': 'clr_{{clr}}'}
%i.fa.fa-2x.fa-question-circle{'aria-hidden': 'true'}
%section#downloadPane
%h2.nodisplay Archive downloads
.card
.cardBody
%h3 Download
- with tiers='Thumbnails (ZIP),Small images (ZIP),Decently-sized images (ZIP),Large images (ZIP),Best quality (ZIP)'.split(',')
- for tier in tiers
%div
%a{'href': '{{zips[loop.index0]["name"]}}'}
%i.fa.fa-download{'aria-hidden': 'true'}
= tier
[{{zips[loop.index0]['fmtd']}}]
%footer
.pageWidthConstraint
%p.justify All artwork presented here serves the sole purpose of easing artists' effort to browse through references that, otherwise, would be sent via some electronical mean that is more prone to a misunderstanding.
%p.justify Even though a download button is easily accessible, no right over the images, for whatever purpose, is given.
%p.justify
If you drew something presented here and don't want it here, send me a message on
%a{'href': 'https://twitter.com/SfnerDragon', 'target': '_blank', 'rel': 'noreferrer'} Twitter
or
%a{'href': 'https://t.me/Sfner', 'target': '_blank', 'rel': 'noreferrer'} Telegram
and I'll have it removed as soon as possible.
%div.right
%a{'href': 'https://git.adlerneves.com/adler/site_fursona_refs'} Source code