WIP PWA for Grain
feat: add copyright policy page component
+138
+138
src/components/pages/grain-copyright.js
+138
src/components/pages/grain-copyright.js
···
1
+
import { LitElement, html, css } from 'lit';
2
+
import '../atoms/grain-icon.js';
3
+
4
+
export class GrainCopyright extends LitElement {
5
+
static styles = css`
6
+
:host {
7
+
display: block;
8
+
max-width: var(--feed-max-width);
9
+
margin: 0 auto;
10
+
min-height: 100vh;
11
+
min-height: 100dvh;
12
+
padding-bottom: 80px;
13
+
background: var(--color-bg-primary);
14
+
}
15
+
.header {
16
+
display: flex;
17
+
align-items: center;
18
+
gap: var(--space-sm);
19
+
padding: var(--space-md) var(--space-sm);
20
+
}
21
+
@media (min-width: 600px) {
22
+
.header {
23
+
padding-left: 0;
24
+
padding-right: 0;
25
+
}
26
+
}
27
+
.back-button {
28
+
background: none;
29
+
border: none;
30
+
padding: 8px;
31
+
cursor: pointer;
32
+
color: var(--color-text-primary);
33
+
margin-left: -8px;
34
+
}
35
+
h1 {
36
+
font-size: var(--font-size-md);
37
+
font-weight: var(--font-weight-semibold);
38
+
color: var(--color-text-primary);
39
+
margin: 0;
40
+
}
41
+
.content {
42
+
padding: 0 var(--space-sm);
43
+
}
44
+
@media (min-width: 600px) {
45
+
.content {
46
+
padding: 0;
47
+
}
48
+
}
49
+
.last-updated {
50
+
font-size: var(--font-size-xs);
51
+
color: var(--color-text-secondary);
52
+
margin-bottom: var(--space-lg);
53
+
}
54
+
section {
55
+
margin-bottom: var(--space-lg);
56
+
}
57
+
h2 {
58
+
font-size: var(--font-size-sm);
59
+
font-weight: var(--font-weight-semibold);
60
+
color: var(--color-text-primary);
61
+
margin: 0 0 var(--space-xs) 0;
62
+
}
63
+
p {
64
+
font-size: var(--font-size-xs);
65
+
color: var(--color-text-secondary);
66
+
line-height: 1.5;
67
+
margin: 0 0 var(--space-sm) 0;
68
+
}
69
+
a {
70
+
color: var(--color-accent);
71
+
}
72
+
`;
73
+
74
+
#goBack() {
75
+
history.back();
76
+
}
77
+
78
+
render() {
79
+
return html`
80
+
<div class="header">
81
+
<button class="back-button" @click=${this.#goBack}>
82
+
<grain-icon name="back" size="20"></grain-icon>
83
+
</button>
84
+
<h1>Copyright Policy</h1>
85
+
</div>
86
+
<div class="content">
87
+
<p class="last-updated">Last Updated: June 3, 2025</p>
88
+
89
+
<section>
90
+
<h2>Copyright Infringement</h2>
91
+
<p>
92
+
Grain respects the intellectual property rights of others and expects users to do the same.
93
+
If you believe your copyrighted work has been used in a way that constitutes infringement,
94
+
please notify us promptly.
95
+
</p>
96
+
</section>
97
+
98
+
<section>
99
+
<h2>Notice Requirements</h2>
100
+
<p>
101
+
Your infringement notice must include: (1) a description of the copyrighted work,
102
+
(2) the location of the infringing material, (3) your contact information,
103
+
(4) a statement that you believe in good faith the use is not authorized, and
104
+
(5) a statement, under penalty of perjury, that the information is accurate.
105
+
</p>
106
+
</section>
107
+
108
+
<section>
109
+
<h2>DMCA Compliance</h2>
110
+
<p>
111
+
Grain complies with the Digital Millennium Copyright Act (DMCA). If you are a copyright holder
112
+
and believe your rights have been violated, you may file a DMCA notice with the required
113
+
information to our designated agent. We will promptly respond to all valid DMCA notices and
114
+
take appropriate action, including removal of the infringing content and disabling access.
115
+
</p>
116
+
</section>
117
+
118
+
<section>
119
+
<h2>Repeat Infringers</h2>
120
+
<p>
121
+
Accounts that repeatedly infringe copyright may be suspended or removed in accordance with
122
+
AT Protocol and Grain Social's moderation guidelines.
123
+
</p>
124
+
</section>
125
+
126
+
<section>
127
+
<h2>Contact</h2>
128
+
<p>
129
+
To report infringement or submit a DMCA notice, contact us at
130
+
<a href="mailto:support@grain.social">support@grain.social</a>.
131
+
</p>
132
+
</section>
133
+
</div>
134
+
`;
135
+
}
136
+
}
137
+
138
+
customElements.define('grain-copyright', GrainCopyright);