|
4 | 4 | <meta charset="UTF-8" /> |
5 | 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
6 | 6 | <title>Loro CodeMirror Example</title> |
7 | | - <style> |
8 | | - :root { |
9 | | - --primary-color: #4f46e5; |
10 | | - --secondary-color: #6366f1; |
11 | | - --background-color: #f9fafb; |
12 | | - --border-color: #e5e7eb; |
13 | | - --text-color: #1f2937; |
14 | | - } |
15 | | - |
16 | | - body { |
17 | | - margin: 0; |
18 | | - padding: 40px 20px; |
19 | | - font-family: system-ui, -apple-system, BlinkMacSystemFont, |
20 | | - "Segoe UI", Roboto, sans-serif; |
21 | | - background-color: var(--background-color); |
22 | | - color: var(--text-color); |
23 | | - line-height: 1.5; |
24 | | - } |
25 | | - |
26 | | - .header { |
27 | | - text-align: center; |
28 | | - margin-bottom: 40px; |
29 | | - } |
30 | | - |
31 | | - .header h1 { |
32 | | - font-size: 2.5rem; |
33 | | - color: var(--primary-color); |
34 | | - margin: 0 0 12px 0; |
35 | | - font-weight: 700; |
36 | | - } |
37 | | - |
38 | | - .header p { |
39 | | - font-size: 1.1rem; |
40 | | - color: #6b7280; |
41 | | - max-width: 600px; |
42 | | - margin: 0 auto; |
43 | | - } |
44 | | - |
45 | | - .editor-container { |
46 | | - display: flex; |
47 | | - gap: 32px; |
48 | | - max-width: 1200px; |
49 | | - margin: 0 auto; |
50 | | - padding: 20px; |
51 | | - background: white; |
52 | | - border-radius: 12px; |
53 | | - box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), |
54 | | - 0 2px 4px -2px rgb(0 0 0 / 0.1); |
55 | | - } |
56 | | - |
57 | | - .editor-wrapper { |
58 | | - flex: 1; |
59 | | - min-width: 0; |
60 | | - } |
61 | | - |
62 | | - .editor { |
63 | | - border: 1px solid var(--border-color); |
64 | | - border-radius: 8px; |
65 | | - height: 300px; |
66 | | - background: white; |
67 | | - overflow: hidden; |
68 | | - transition: border-color 0.2s; |
69 | | - } |
70 | | - |
71 | | - .editor:hover { |
72 | | - border-color: var(--secondary-color); |
73 | | - } |
74 | | - |
75 | | - h2 { |
76 | | - margin: 0 0 16px 0; |
77 | | - font-size: 1.25rem; |
78 | | - color: var(--text-color); |
79 | | - font-weight: 600; |
80 | | - display: flex; |
81 | | - align-items: center; |
82 | | - gap: 8px; |
83 | | - } |
84 | | - |
85 | | - .editor-badge { |
86 | | - font-size: 0.875rem; |
87 | | - padding: 4px 8px; |
88 | | - border-radius: 6px; |
89 | | - font-weight: 500; |
90 | | - } |
91 | | - |
92 | | - .user1 { |
93 | | - background-color: #ed4f47; |
94 | | - color: #e11d48; |
95 | | - } |
96 | | - |
97 | | - .user2 { |
98 | | - background-color: #32bf76; |
99 | | - color: #047857; |
100 | | - } |
101 | | - |
102 | | - @media (max-width: 768px) { |
103 | | - .editor-container { |
104 | | - flex-direction: column; |
105 | | - } |
106 | | - |
107 | | - .editor { |
108 | | - height: 400px; |
109 | | - } |
110 | | - } |
111 | | - </style> |
112 | 7 | </head> |
113 | 8 | <body> |
114 | | - <div class="header"> |
115 | | - <h1>Loro CodeMirror Plugin</h1> |
116 | | - </div> |
117 | | - <div class="editor-container"> |
118 | | - <div class="editor-wrapper"> |
119 | | - <h2> |
120 | | - Editor 1 |
121 | | - <span class="editor-badge" style="background-color: #ed4f47" |
122 | | - >User 1</span |
123 | | - > |
124 | | - </h2> |
125 | | - <div id="editor1" class="editor"></div> |
126 | | - </div> |
127 | | - <div class="editor-wrapper"> |
128 | | - <h2> |
129 | | - Editor 2 |
130 | | - <span class="editor-badge" style="background-color: #32bf76" |
131 | | - >User 2</span |
132 | | - > |
133 | | - </h2> |
134 | | - <div id="editor2" class="editor"></div> |
135 | | - </div> |
136 | | - </div> |
137 | | - <script type="module" src="/src/main.ts"></script> |
| 9 | + <div id="root"></div> |
| 10 | + <script type="module" src="/src/main.tsx"></script> |
138 | 11 | </body> |
139 | 12 | </html> |
0 commit comments