|
0
|
1 local Luan = require "luan:Luan.luan"
|
|
|
2 local error = Luan.error
|
|
|
3 local Io = require "luan:Io.luan"
|
|
|
4 local Http = require "luan:http/Http.luan"
|
|
|
5 local Shared = require "site:/lib/Shared.luan"
|
|
|
6 local head = Shared.head or error()
|
|
|
7 local page_header = Shared.page_header or error()
|
|
|
8 local footer = Shared.footer or error()
|
|
|
9
|
|
|
10
|
|
|
11 return function()
|
|
|
12 Io.stdout = Http.response.text_writer()
|
|
|
13 %>
|
|
|
14 <!doctype html>
|
|
|
15 <html lang="en">
|
|
|
16 <head>
|
|
|
17 <% head() %>
|
|
|
18 <title>Link My Style</title>
|
|
|
19 <style>
|
|
|
20 [page] > * {
|
|
|
21 max-width: 700px;
|
|
|
22 }
|
|
|
23 h1 {
|
|
|
24 text-align: center;
|
|
|
25 }
|
|
|
26 div[row] {
|
|
|
27 border: solid #EEEEEE;
|
|
|
28 color: #4E4293;
|
|
|
29 }
|
|
|
30 div[row] + div[row] {
|
|
|
31 border-top: none;
|
|
|
32 }
|
|
|
33 div[row] > div {
|
|
|
34 padding: 10px;
|
|
|
35 }
|
|
|
36 div[q] {
|
|
|
37 display: flex;
|
|
|
38 justify-content: space-between;
|
|
|
39 }
|
|
|
40 div[q]:hover {
|
|
|
41 background-color: #DBD6FE;
|
|
|
42 }
|
|
|
43 div[a] {
|
|
|
44 display: none;
|
|
|
45 }
|
|
|
46 div[a] img {
|
|
|
47 width: 100%;
|
|
|
48 }
|
|
|
49 @media (min-width: 575px) {
|
|
|
50 div[a] > div {
|
|
|
51 display: flex;
|
|
|
52 align-items: flex-start;
|
|
|
53 gap: 10px;
|
|
|
54 }
|
|
|
55 div[a] img {
|
|
|
56 width: 40%;
|
|
|
57 }
|
|
|
58 }
|
|
|
59 </style>
|
|
|
60 <script>
|
|
|
61 function toggle(q) {
|
|
|
62 let a = q.nextElementSibling;
|
|
|
63 let span = q.querySelector('span:last-child');
|
|
|
64 if( a.style.display === 'block' ) {
|
|
|
65 a.style.display = 'none';
|
|
|
66 span.textContent = '⌄';
|
|
|
67 history.replaceState(null,null,'#');
|
|
|
68 } else {
|
|
|
69 a.style.display = 'block';
|
|
|
70 span.textContent = '^';
|
|
|
71 history.replaceState(null,null,`#${q.id}`);
|
|
|
72 }
|
|
|
73 }
|
|
|
74
|
|
|
75 function init() {
|
|
|
76 if( location.hash ) {
|
|
|
77 let q = document.querySelector(location.hash);
|
|
|
78 if(q)
|
|
|
79 toggle(q);
|
|
|
80 }
|
|
|
81 }
|
|
|
82 </script>
|
|
|
83 </head>
|
|
|
84 <body onload="init()">
|
|
|
85 <div page>
|
|
|
86 <% page_header() %>
|
|
|
87 <h1>Help</h1>
|
|
|
88 <div row>
|
|
|
89 <div q id=account onclick="toggle(this)">
|
|
|
90 <span>How to create an account</span>
|
|
|
91 <span>⌄</span>
|
|
|
92 </div>
|
|
|
93 <div a>
|
|
|
94 <div>
|
|
|
95 <div>
|
|
|
96 <p>When signing up for LinkMyStyle, all we ask is for an email, a username, and a password.</p>
|
|
|
97
|
|
|
98 <p>Once you’ve filled everything out and clicked on the “Create Account” button, we will send you a 6 digit verification code. Enter this code and you’re all set up.</p>
|
|
|
99 </div>
|
|
|
100 <img src="/images/help/register.jpg">
|
|
|
101 </div>
|
|
|
102 </div>
|
|
|
103 </div>
|
|
|
104 <div row>
|
|
|
105 <div q id=setup onclick="toggle(this)">
|
|
|
106 <span>How to set up your page</span>
|
|
|
107 <span>⌄</span>
|
|
|
108 </div>
|
|
|
109 <div a>
|
|
|
110 <div>
|
|
|
111 <div>
|
|
|
112 <p>First, click on the upper-right icon, and then click on “My account”. This will bring you to your account page. Here, you can add your profile picture, profile title, profile bio, change your username, change your password, add social icons, and change your email.</p>
|
|
|
113
|
|
|
114 <p>Once you’ve done this you can start adding links by clicking on the upper-right corner and clicking on “Links”. Title your link and input the URL. Once you’ve done this, you can grab the left of each link and rearrange as needed.</p>
|
|
|
115
|
|
|
116 <p>Next, to add images to your page, you can click on the upper-right corner and click “Photos”. Start by adding a title to your photo. This is just for your own analytics. Once you’ve named your photo, click “Add an image”, crop if needed, save the image, and then go ahead and add the associated links to the photo.</p>
|
|
|
117 </div>
|
|
|
118 <img src="/images/help/burger.jpg">
|
|
|
119 </div>
|
|
|
120 </div>
|
|
|
121 </div>
|
|
|
122 <div row>
|
|
|
123 <div q id=customize onclick="toggle(this)">
|
|
|
124 <span>How to customize your page</span>
|
|
|
125 <span>⌄</span>
|
|
|
126 </div>
|
|
|
127 <div a>
|
|
|
128 <div>
|
|
|
129 <div>
|
|
|
130 <p>Click on the upper-right icon and then click on “My theme” to edit the look of your page. Here you can upload any background image or change the background color. When changing the color of a section, you can either click on the left box showing the color or input a hex code of your choice. You can click the left side of every section to make quick changes there.</p>
|
|
|
131 </div>
|
|
|
132 <img src="/images/help/themepage.jpg">
|
|
|
133 </div>
|
|
|
134 </div>
|
|
|
135 </div>
|
|
|
136 <div row>
|
|
|
137 <div q id=affiliates onclick="toggle(this)">
|
|
|
138 <span>The best design for affiliates</span>
|
|
|
139 <span>⌄</span>
|
|
|
140 </div>
|
|
|
141 <div a>
|
|
|
142 <div>
|
|
|
143 <div>
|
|
|
144 <p><a href="https://linkmy.style/MidsizeFashionInspo ">MidsizeFashionInspo</a> is a great example of an affiliate who uses our site. Whenever she posts a video on TikTok or Instagram, she uploads a screenshot to her LinkMyStyle page. Once she does that, she links the products she shows in that video. This helps her followers easily find products and helps to increase her affiliate sales.</p>
|
|
|
145 </div>
|
|
|
146 <img src="/images/help/mid.jpg">
|
|
|
147 </div>
|
|
|
148 </div>
|
|
|
149 </div>
|
|
|
150 <div row>
|
|
|
151 <div q id=musicians onclick="toggle(this)">
|
|
|
152 <span>The best design for musicians</span>
|
|
|
153 <span>⌄</span>
|
|
|
154 </div>
|
|
|
155 <div a>
|
|
|
156 <div>
|
|
|
157 <div>
|
|
|
158 <p><a href="https://linkmy.style/JordanTaylor">JordanTaylor</a> is a great example of a musician who uses our site. If you click on her link, you can see that she displays her name, describes her work, links her social media, and then has her albums as photos. Each photo of an album cover also has links to each individual song. Since Jordan has a mix of songs on Spotify and Soundcloud, this makes it easy to mix and match platforms.</p>
|
|
|
159 </div>
|
|
|
160 <img src="/images/help/jordan.jpg">
|
|
|
161 </div>
|
|
|
162 </div>
|
|
|
163 </div>
|
|
|
164 <div row>
|
|
|
165 <div q id=file onclick="toggle(this)">
|
|
|
166 <span>How to link to a file</span>
|
|
|
167 <span>⌄</span>
|
|
|
168 </div>
|
|
|
169 <div a>
|
|
|
170 <div>
|
|
|
171 <div>
|
|
|
172 <p>To link to a file, you need a URL for the file. If you have a cloud file storage service like <a href="https://support.google.com/docs/answer/183965?visit_id=638477670270957051-2553158566&rd=1">Google Drive</a> or <a href="https://help.dropbox.com/share/create-and-share-link">Dropbox</a>, you should be able to share the file and get a URL for it. If you don't have such a service, you can look for a "file upload" service instead.</p>
|
|
|
173 </div>
|
|
|
174 </div>
|
|
|
175 </div>
|
|
|
176 </div>
|
|
|
177 <div row>
|
|
|
178 <div q id=contact onclick="toggle(this)">
|
|
|
179 <span>Have another question?</span>
|
|
|
180 <span>⌄</span>
|
|
|
181 </div>
|
|
|
182 <div a>
|
|
|
183 <p>Contact us at <b>support@linkmy.style</b></p>
|
|
|
184 </div>
|
|
|
185 </div>
|
|
|
186 <% footer() %>
|
|
|
187 </div>
|
|
|
188 </body>
|
|
|
189 </html>
|
|
|
190 <%
|
|
|
191 end
|
