mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
lenooby09.tech
1import escapeHTML from 'escape-html'
2
3export function linkWarningLayout(
4 title: string,
5 containerContents: string,
6): string {
7 return `
8 <!DOCTYPE html>
9 <html>
10 <head>
11 <meta charset="UTF-8" />
12 <meta
13 http-equiv="Cache-Control"
14 content="no-store, no-cache, must-revalidate, max-age=0" />
15 <meta http-equiv="Pragma" content="no-cache" />
16 <meta http-equiv="Expires" content="0" />
17 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
18 <title>${escapeHTML(title)}</title>
19 <style>
20 * {
21 margin: 0;
22 padding: 0;
23 box-sizing: border-box;
24 }
25 body {
26 font-family:
27 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial,
28 sans-serif;
29 background-color: #ffffff;
30 min-height: 100vh;
31 display: flex;
32 align-items: center;
33 justify-content: center;
34 padding: 20px;
35 }
36 .container {
37 width: 100%;
38 max-width: 400px;
39 text-align: center;
40 }
41 .warning-icon {
42 font-size: 48px;
43 margin-bottom: 16px;
44 }
45 h1 {
46 font-size: 20px;
47 font-weight: 600;
48 margin-bottom: 12px;
49 color: #000000;
50 }
51 .warning-text {
52 font-size: 15px;
53 color: #536471;
54 line-height: 1.4;
55 margin-bottom: 24px;
56 padding: 0 20px;
57 }
58 .blocked-site {
59 background-color: #f7f9fa;
60 border-radius: 12px;
61 padding: 16px;
62 margin-bottom: 24px;
63 text-align: left;
64 word-break: break-all;
65 }
66 .site-name {
67 font-size: 16px;
68 font-weight: 500;
69 color: #000000;
70 margin-bottom: 4px;
71 word-break: break-word;
72 display: block;
73 text-align: center;
74 }
75 .site-url {
76 font-size: 14px;
77 color: #536471;
78 word-break: break-all;
79 display: block;
80 text-align: center;
81 }
82 .button {
83 border: none;
84 border-radius: 24px;
85 padding: 12px 32px;
86 font-size: 16px;
87 font-weight: 600;
88 cursor: pointer;
89 width: 100%;
90 max-width: 280px;
91 transition: background-color 0.2s;
92 }
93 .primary {
94 background-color: #1d9bf0;
95 color: white;
96 }
97 .secondary {
98 }
99 .back-button:hover {
100 background-color: #1a8cd8;
101 }
102 .back-button:active {
103 background-color: #1681c4;
104 }
105 @media (max-width: 480px) {
106 .warning-text {
107 padding: 0 10px;
108 }
109 .blocked-site {
110 padding: 8px;
111 }
112 }
113 </style>
114 </head>
115 <body>
116 <div class="container">${containerContents}</div>
117 </body>
118 </html>
119 `
120}