guoziyun
/
artsite


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
							<!DOCTYPE html>
<html lang="<%= lang %>">

<head>
    <%- include('common-meta') %>

        <link rel="stylesheet" href="/stylesheets/styles.css">
        <link rel="stylesheet" href="/stylesheets/header.css">
        <link rel="stylesheet" href="/stylesheets/detail.css">

        <script type="application/ld+json">
        {
            "@context": "https://schema.org",
            "@type": "CreativeWork",
            "name": "<%= translate.printableColoringPage[lang] %>: <%= detail.title %>",
            "description": "<%= detail.desc %>",
            "url": "https://art.pcoloring.com<%= uri %>",
            "image": "<%= detail.thumb %>",
            "category": "<%= detail.tags[0] %>",
            "keywords": "coloring page, <%= detail.title %>, color by number, paint by number, free, printable,  <%= detail.tags.join() %>",
            "contentRating": "General Audience",
            "mainEntityOfPage": "https://art.pcoloring.com<%= uri %>",
            "publisher": {
                "@type": "Organization",
                "name": "JCCY",
                "logo": {
                    "@type": "ImageObject",
                    "url": "https://art.pcoloring.com/assets/icon/icon.webp"
                }
            },
            "offers": {
                "@type": "Offer",
                "priceCurrency": "USD",
                "price": "0.00",
                "eligibleRegion": {
                "@type": "Place",
                "name": "Worldwide"
                },
                "url": "https://art.pcoloring.com<%= uri %>"
            },
            "author": {
                "@type": "Person",
                "name": "<%= detail.user.username %>"
            },
            "datePublished": "<%= detail.publishTime %>"
        }
    </script>
</head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-JBGGVGLHTP"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());

    gtag('config', 'G-JBGGVGLHTP');
</script>

<body>
    <%- include('header') %>
        <div class="details">
            <div class="poster"><img src="<%= detail.thumb %>" alt="<%= detail.title %>"></div>
            <div class="description">
                <h1>
                    <%= detail.title %>
                </h1>
                <p>
                    <%= translate.artist[lang] %>: <a href="/<%= lang %>/artist/<%= detail.user._id %>"
                            class="tag-button">
                            <%= detail.user.username %>
                        </a>
                </p>
                <p>
                    <%= translate.publishTime[lang] %>: <%= detail.publishTime %>
                </p>
                <p>
                    <%= translate.tag[lang] %>:
                        <% detail.tags.forEach(tag=> { %>
                            <a href="/<%= lang %>/tag/<%= tag %>" class="tag-button">
                                <%= tag %>
                            </a>
                            <% }); %>
                </p>
                <h2 style="font-size: 16px; font-weight:normal;">
                    <%= detail.copy ?? detail.desc %>
                </h2>
                <div class="button-wrapper">
                    <a href="/play/<%= detail._id %>" class="play-button">
                        <%= translate.play[lang] %>
                    </a>
                    <a id="downloadBtn" class="play-button" style="background-color: lightseagreen;">
                        <%= translate.download[lang] %>
                    </a>
                </div>
            </div>
        </div>

        <p style=" display: flex; justify-content: center; color: #777; font-size: 18px; font-weight: 500;">
            <%= translate.mayYouLike[lang] %>:
        </p>

        <div class="content" style="margin-bottom: 40px;">
            <div class="image-grid">
                <% relates.forEach(item=> { %>
                    <div class="image-card">
                        <a href="<%= item.uri %>"><img src="<%= item.thumb %>" alt="<%= item.title %>"></a>
                        <div class="card-title">
                            <%= item.title %>
                        </div>
                    </div>
                    <% }); %>
            </div>
        </div>

        <%- include('pagination') %>


            <script>
                // document.getElementById('downloadBtn').addEventListener('click', function () {
                //     var link = document.createElement('a');
                //     link.style.display = 'none';
                //     link.href = '<%= detail.downlink %>';
                //     link.download = '<%= detail._id %>.jpeg';
                //     document.body.appendChild(link);
                //     link.click();
                //     document.body.removeChild(link);
                // });

                document.getElementById('downloadBtn').addEventListener('click', function () {
                    const imageUrl = '<%= detail.downlink %>';
                    fetch(imageUrl)
                        .then(response => {
                            if (!response.ok) {
                                throw new Error('Network response was not ok');
                            }
                            return response.blob();
                        })
                        .then(blob => {
                            const url = URL.createObjectURL(blob);
                            const a = document.createElement('a');
                            a.style.display = 'none';
                            a.href = url;
                            a.download = '<%= detail._id %>.webp';
                            document.body.appendChild(a);
                            a.click();
                            URL.revokeObjectURL(url);
                            document.body.removeChild(a);
                        })
                        .catch(error => {
                            console.error('Image Download Error:', error);
                        });
                });

            </script>
</body>

</html>