studio-compliance-checklist/index.html at main · Poli-International/studio-compliance-checklist · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Studio Compliance Checklist | Poli International</title>
    <meta name="description" content="Professional health and safety auditor for tattoo and piercing studios. Verify compliance with global biosecurity and legal standards.">
    <link rel="stylesheet" href="css/style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">

    <!-- IFRAME CONTENT HIDER -->
    <script>
    (function() {
        'use strict';
        if (window.self !== window.top) {
            var style = document.createElement('style');
            style.textContent = `
                header, footer, .site-header, .site-footer, .breadcrumb-nav,
                .tool-discovery-map, .more-tools-section, .feedback-section,
                .related-tools-section, .geo-summary-block, .share-card,
                .need-support-card, .explore-all-card, #dark-toggle,
                .poli-footer, .poli-global-footer, .tool-standard-breadcrumbs,
                .feedback-form-section, .email-section, .geo-authority-block {
                    display: none !important;
                    visibility: hidden !important;
                    height: 0 !important;
                    overflow: hidden !important;
                }
                body { padding: 0 !important; margin: 0 !important; background: transparent !important; }
            `;
            document.head.appendChild(style);
        }
    })();
    </script>
</head>
<body class="dark-mode">

    <!-- STANDARD HEADER -->
    <header class="site-header">
        <div class="container site-header__container">
            <div class="site-header__logo-container">
                <img src="images/Poli-International-Co.webp" alt="Poli International" class="site-header__logo">
            </div>
            <div class="site-header__title-group">
                <h2 class="site-header__title">Studio Compliance Checklist</h2>
                <p class="site-header__subtitle">Global Health & Safety Audit Engine</p>
            </div>
            <div class="site-header__actions">
                <button id="embedBtn" class="btn btn--primary btn--small">
                    <span class="embed-icon">⚡</span>
                    <span class="embed-text">Free Embed</span>
                </button>

                <button id="darkModeToggle" class="btn btn--icon" aria-label="Toggle dark mode">
                    <span class="dark-mode-icon">◐</span>
                </button>
            </div>
        </div>
    </header>

    <main class="checklist-engine">
        <div class="container">
            <!-- App UI goes here -->
            <div id="app-root">
                <div class="loading-state">Initializing Compliance Database...</div>
            </div>
        </div>
    </main>

    <!-- STANDARD FOOTER -->
    <footer class="site-footer">
        <div class="container">
            <div class="site-footer__content">
                <div class="site-footer__brand">
                    <img src="images/Poli-International-Co.webp" alt="Poli International" class="site-footer__logo">
                    <p class="site-footer__tagline">Engineering Excellence in Body Art Compliance</p>
                </div>
                <div class="site-footer__support">
                    <p class="support-text">Enjoying this professional tool? Support our innovation.</p>

                </div>
            </div>
            <div class="site-footer__bottom">
                <p class="copyright">© 2026 Poli International Ltd. | Professional Use Only</p>
                <p class="disclaimer">⚠️ DISCLAIMER: This tool is for internal auditing only and does not constitute a legal guarantee of compliance. Always verify with your local health authority.</p>
            </div>
        </div>
    </footer>

    <!-- EMBED MODAL -->
    <div id="embedModal" class="modal" style="display: none;">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title">🎁 Use This Tool FREE on Your Website!</h2>
                <span class="modal-close" id="modalClose">&times;</span>
            </div>
            <div class="modal-body">
                <p class="modal-description">Embed this professional compliance auditor on your studio site - completely free!</p>

                <div class="modal-section">
                    <h3 class="modal-section-title">📋 Copy Embed Code</h3>
                    <div class="code-container">
                        <textarea id="embedCode" class="embed-code-textarea" readonly></textarea>
                        <button id="copyEmbedCode" class="btn btn--primary btn--small">📋 Copy Code</button>
                    </div>
                </div>

                <div class="modal-section">
                    <h3 class="modal-section-title">💾 Download or Explore</h3>
                    <div class="btn-group">
                        <a href="embed.html" download class="btn btn--secondary">⬇️ Download HTML</a>
                        <a href="https://poliinternational.com/tools" target="_blank" class="btn btn--primary">🔗 More Free Tools</a>
                    </div>
                </div>

                <div class="modal-section">
                    <h3 class="modal-section-title">🔔 Get Notified of New Tools!</h3>
                    <form id="modal-email-form" class="email-form" data-location="modal">
                        <div class="email-input-group">
                            <input type="email" class="email-input" placeholder="Your email address" required>
                            <button type="submit" class="btn btn--primary">Subscribe</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script src="js/database.js"></script>
    <script src="js/main.js"></script>
    <script src="js/common.js"></script>
</body>
</html>