index.pug

html
    head
        title コラボメシジェネレーター
        link(rel='stylesheet', href='curry.css')
        meta(charset='UTF-8')

    mixin profile(id, value)
        span.profile(id=id, contenteditable='true', tabindex='0')= value

    body
        img(alt='コラボメシジェネレーター', src='logo.svg', width='400')
        #frame
            div#portrait
            #name-container.cute
                span#name(contenteditable='true') 島村卯月
                span#type ＜Cute＞
            +profile('furigana', 'しまむらうづき')
            +profile('height', '159cm')
            +profile('age', '17歳')
            +profile('weight', '44kg')
            +profile('dob', '4月24日')
            +profile('blood', 'O')
            +profile('hand', '右')
            +profile('three', '83/58/87')
            +profile('stellar', '牡牛座')
            +profile('birthplace', '東京')
            +profile('hobby', '友達と長電話')
            +profile('cv', '大橋彩香')
            #comment-container
                textarea#comment
                    | コメント欄は５行くらいまで
                    | 入力できるようだ。ジャスティス！

        ul#help
            li 最新版のデスクトップブラウザ以外での動作は確認していません。
            li データを外部にシェア・保存・送信する機能は一切ありません。保存する場合はOSの機能でスクリーンショットを撮ってください。
            li <code>#imas_cg_curry</code> のハッシュタグがついていると作者が喜びます。
            li <a href="https://twitter.com/share" class="twitter-share-button" data-text="コラボメシジェネレーター" data-lang="ja" data-size="large" data-hashtags="imas_cg_curry">ツイート</a>

        input(type='file')#file-selector

        script(src='https://use.typekit.net/rvo8koj.js')
        script(src='curry.js')
        script.
            !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');