blackribbon/index.html at main · priesdelly/blackribbon · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Black Ribbon Memorial Overlay - เครื่องมือเพิ่มโบว์ไว้อาลัยบนรูปภาพ</title>
    <meta name="description" content="เครื่องมือเพิ่มโบว์สีดำไว้อาลัยบนรูปภาพ ใช้งานฟรี ปลอดภัย ประมวลผลบนเครื่องของคุณเท่านั้น | Add memorial ribbons to images with respect - Powered by Priesdelly">
    <meta name="author" content="Priesdelly">
    <meta name="creator" content="Priesdelly - github.com/priesdelly">
    <meta name="keywords" content="black ribbon, memorial, ไว้อาลัย, โบว์ดำ, รูปไว้ทุกข์, tribute, remembrance">

    <!-- Open Graph / Facebook / LINE -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://blackribbon.priesdelly.com/">
    <meta property="og:title" content="Black Ribbon Memorial Overlay - เครื่องมือเพิ่มโบว์ไว้อาลัย">
    <meta property="og:description" content="เครื่องมือเพิ่มโบว์สีดำไว้อาลัยบนรูปภาพ ใช้งานฟรี ปลอดภัย ประมวลผลบนเครื่องของคุณเท่านั้น | Add memorial ribbons to images with respect">
    <meta property="og:image" content="https://blackribbon.priesdelly.com/img/og-image.png">
    <meta property="og:image:secure_url" content="https://blackribbon.priesdelly.com/img/og-image.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:image:alt" content="Black Ribbon Memorial - โบว์ดำไว้อาลัย">
    <!-- Alternative images for different platforms -->
    <meta property="og:image" content="https://blackribbon.priesdelly.com/img/og-image-square.png">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="1200">
    <meta property="og:image:alt" content="Black Ribbon Memorial - โบว์ดำไว้อาลัย">
    <meta property="og:locale" content="th_TH">
    <meta property="og:locale:alternate" content="en_US">
    <meta property="og:site_name" content="Black Ribbon Memorial">

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:url" content="https://blackribbon.priesdelly.com/">
    <meta name="twitter:title" content="Black Ribbon Memorial Overlay - เครื่องมือเพิ่มโบว์ไว้อาลัย">
    <meta name="twitter:description" content="เครื่องมือเพิ่มโบว์สีดำไว้อาลัยบนรูปภาพ ใช้งานฟรี ปลอดภัย ประมวลผลบนเครื่องของคุณเท่านั้น">
    <meta name="twitter:image" content="https://blackribbon.priesdelly.com/img/og-image-twitter.png">
    <meta name="twitter:image:alt" content="Black Ribbon Memorial - โบว์ดำไว้อาลัย">
    <meta name="twitter:creator" content="@priesdelly">

    <!-- Favicon and App Icons -->
    <link rel="icon" type="image/png" sizes="192x192" href="img/og-image-small.png">
    <link rel="apple-touch-icon" href="img/og-image-square.png">
    <link rel="shortcut icon" href="img/og-image-small.png">

    <!-- Additional Meta Tags -->
    <meta name="robots" content="index, follow">
    <meta name="theme-color" content="#2c2c2c">
    <link rel="canonical" content="https://blackribbon.priesdelly.com/">

    <!-- HEIC to JPEG conversion library -->
    <script src="https://cdn.jsdelivr.net/npm/heic2any@0.0.4/dist/heic2any.min.js"></script>

    <link rel="stylesheet" href="styles.css">
</head>
<!--
  ╔═══════════════════════════════════════════════════════════════════╗
  ║         Black Ribbon Memorial Overlay - Web Application           ║
  ║                    Powered by Priesdelly                          ║
  ║                 © 2025 - github.com/priesdelly                    ║
  ║                                                                   ║
  ║  A respectful tool for adding memorial ribbons to images          ║
  ║  Built with privacy and dignity in mind                           ║
  ║  All processing happens locally in your browser                   ║
  ║  Created with love and respect for those we remember 🕯️           ║
  ╚═══════════════════════════════════════════════════════════════════╝
-->
<body>
    <div class="container">
        <!-- Important Notice -->
        <div class="notice-banner" id="noticeBanner">
            <div class="notice-header" onclick="toggleNotice()">
                <div class="notice-icon">📢</div>
                <div class="notice-header-text">
                    <span class="notice-title-inline">ประกาศแจ้งให้ทราบ</span>
                    <span class="notice-title-inline-en">Important Notice</span>
                </div>
                <div class="notice-toggle" id="noticeToggle">▼</div>
            </div>
            <div class="notice-content" id="noticeContent">
                                <p class="notice-text">
                    ณ เวลาที่จัดทำเว็บไซต์นี้ ยังไม่ปรากฏประกาศใดๆ อย่างเป็นทางการจากทางราชการ
                    เกี่ยวกับการใช้สัญลักษณ์ริบบิ้นโบว์ดำเพื่อแสดงความไว้อาลัย
                    ดังนั้น การตัดสินใจใช้โบว์ดำจึงเป็นดุลยพินิจส่วนบุคคล
                    จึงขอความกรุณาใช้วิจารณญาณประกอบการพิจารณาอย่างรอบคอบและเหมาะสม
                    เพื่อให้เหมาะสมกับการแสดงความไว้อาลัย
                </p>
                <p class="notice-subtitle">
                    As of this website's creation, there has been no official announcement from governmental authorities
                    regarding the use of black ribbon symbols to express condolences.
                    Therefore, the decision to use a black ribbon remains a matter of personal discretion.
                    We kindly request that you exercise careful judgment and consideration
                    to ensure appropriateness in expressing condolences.
                </p>
            </div>
        </div>        <main>
            <div class="canvas-container">
                <canvas id="mainCanvas" width="800" height="600"></canvas>
                <div id="ribbonOverlay" class="ribbon-overlay">
                    <img id="ribbonImage" src="assets/black-ribbon-01.svg" alt="Black Ribbon" draggable="false">
                </div>
            </div>

            <div class="controls-panel">
                <div class="control-group">
                    <h3>Image Upload <span class="subtitle">(อัปโหลดรูปภาพ)</span></h3>
                    <input type="file" id="imageUpload" accept="image/jpeg,image/jpg,image/png,image/webp,image/heic,image/heif,.heic,.heif">
                    <button id="clearImage" class="btn-secondary">Clear Image <span class="btn-subtitle">(ล้างรูป)</span></button>
                </div>

                <div class="control-group">
                    <h3>Ribbon Controls <span class="subtitle">(ปรับโบว์ไว้ทุกข์)</span></h3>
                    <label for="ribbonSize">Size <span class="label-subtitle">(ขนาด)</span>: <span id="sizeValue">150%</span></label>
                    <input type="range" id="ribbonSize" min="10" max="200" value="150">
                </div>

                <div class="control-group">
                    <h3>Grayscale Filter <span class="subtitle">(ฟิลเตอร์ขาวดำ)</span></h3>
                    <label class="checkbox-label">
                        <input type="checkbox" id="grayscaleToggle">
                        <span class="checkbox-text">Enable Grayscale <span class="label-subtitle">(เปิดโหมดขาวดำ)</span></span>
                    </label>
                    <label for="grayscaleIntensity">Intensity <span class="label-subtitle">(ความเข้ม)</span>: <span id="intensityValue">100%</span></label>
                    <input type="range" id="grayscaleIntensity" min="0" max="100" value="100" disabled>
                </div>

                <div class="control-group">
                    <button id="downloadBtn" class="btn-primary" disabled>Download Memorial Image<br><span class="btn-subtitle">(ดาวน์โหลดรูปไว้ทุกข์)</span></button>
                </div>
            </div>
        </main>

        <footer>
            <p>All processing is done locally in your browser. No data is sent to any server.<br>
            <span class="footer-subtitle">ประมวลผลทั้งหมดทำในเบราว์เซอร์ของคุณ ไม่มีการส่งข้อมูลไปยังเซิร์ฟเวอร์ใดๆ</span></p>
            <p class="footer-source">
                <a href="https://github.com/priesdelly/blackribbon" target="_blank" rel="noopener noreferrer">
                    View Source Code on GitHub
                </a>
            </p>
        </footer>
    </div>

    <!-- Cookie Consent Popup -->
    <div id="cookieConsent" class="cookie-consent">
        <div class="cookie-content">
            <p class="cookie-title">🍪 Cookie Policy</p>
            <p class="cookie-text">
                เว็บไซต์นี้ใช้ Google Analytics เพื่อเก็บสถิติการใช้งานเท่านั้น<br>
                <span class="cookie-subtitle">This website uses Google Analytics for usage statistics only</span>
            </p>
            <button id="acceptCookies" class="cookie-btn">ยอมรับ | Accept</button>
        </div>
    </div>

    <script src="script.js?vj=4"></script>
</body>
</html>