WIP PWA for Grain
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: add copyright policy page component

+138
+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);