Skip to content

Commit 438ce47

Browse files
JoplayXYZJoplayXYZ
authored
Create index.html
1 parent 9abe82f commit 438ce47

1 file changed

Lines changed: 210 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,210 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Link in Bio website Maker</title>
7+
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
8+
<style>
9+
body {
10+
background: #0d1b2a;
11+
color: #e0e1dd;
12+
font-family: monospace;
13+
padding: 2rem;
14+
max-width: 800px;
15+
margin: auto;
16+
}
17+
h1 {
18+
color: #00ff9d;
19+
margin-bottom: 1rem;
20+
}
21+
textarea {
22+
width: 100%;
23+
height: 200px;
24+
background: #1b263b;
25+
color: #e0e1dd;
26+
border: none;
27+
padding: 1rem;
28+
font-family: monospace;
29+
margin-bottom: 1rem;
30+
resize: vertical;
31+
}
32+
button {
33+
background: #00ff9d;
34+
color: #0d1b2a;
35+
font-weight: bold;
36+
border: none;
37+
padding: 0.75rem 1.5rem;
38+
cursor: pointer;
39+
margin-right: 1rem;
40+
margin-bottom: 2rem;
41+
}
42+
button:hover {
43+
background: #00e68a;
44+
}
45+
iframe {
46+
width: 100%;
47+
height: 400px;
48+
border: 1px solid #00ff9d;
49+
margin-top: 1rem;
50+
}
51+
footer {
52+
margin-top: 2rem;
53+
font-size: 0.85rem;
54+
color: #748cab;
55+
text-align: center;
56+
}
57+
a {
58+
color: #00b4d8;
59+
}
60+
</style>
61+
</head>
62+
<body>
63+
64+
<h1>Link in bio maker!</h1>
65+
66+
<textarea id="name" placeholder="Enter your site name here..." style="height: 30px;"></textarea>
67+
68+
<textarea id="markdown" placeholder="Paste your markdown here..."># Hello
69+
This is a sample bio page. You can add links, lists and images!
70+
71+
## Links
72+
- [Github repo](https://github.com/JoplayXYZ/LinkInBio)
73+
- [Demo link](https://github.com/JoplayXYZ/LinkInBio)
74+
75+
https://github.com/JoplayXYZ/LinkInBio
76+
</textarea>
77+
78+
<br />
79+
<button onclick="convert()">Convert & Preview</button>
80+
<button id="downloadButton" style="display:none" onclick="downloadHtml()">Download as .HTML</button>
81+
<button id="viewCodeButton" style="display:none" onclick="viewCode()">View Code</button>
82+
83+
<iframe id="preview"></iframe>
84+
85+
<footer>
86+
View on <a href="https://github.com/JoplayXYZ/LinkInBio" target="_blank">Github</a>
87+
</footer>
88+
<script>
89+
let latestHtml = "";
90+
91+
function convert() {
92+
const md = document.getElementById("markdown").value;
93+
const siteName = document.getElementById("name").value.trim() || "site";
94+
const htmlContent = marked.parse(md);
95+
96+
latestHtml = `
97+
<!DOCTYPE html>
98+
<html lang="en">
99+
<head>
100+
<meta charset="UTF-8" />
101+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
102+
<title>${siteName}</title>
103+
<style>
104+
:root {
105+
--bg: #0d1b2a;
106+
--text: #e0e1dd;
107+
--accent: #00ff9d;
108+
--link: #00b4d8;
109+
}
110+
body {
111+
background: var(--bg);
112+
color: var(--text);
113+
font-family: monospace;
114+
line-height: 1.6;
115+
padding: 2rem;
116+
max-width: 800px;
117+
margin: auto;
118+
}
119+
h1, h2, h3 {
120+
color: var(--accent);
121+
margin-top: 1.5rem;
122+
margin-bottom: 0.5rem;
123+
}
124+
a {
125+
color: var(--link);
126+
text-decoration: none;
127+
}
128+
a:hover {
129+
text-decoration: underline;
130+
}
131+
pre {
132+
background: #1b263b;
133+
padding: 1rem;
134+
border-radius: 6px;
135+
overflow-x: auto;
136+
}
137+
code {
138+
background: #1b263b;
139+
padding: 2px 4px;
140+
border-radius: 4px;
141+
}
142+
footer {
143+
margin-top: 4rem;
144+
text-align: center;
145+
font-size: 0.85rem;
146+
color: #748cab;
147+
}
148+
</style>
149+
</head>
150+
<body>
151+
${htmlContent}
152+
<footer>
153+
View on <a href="https://github.com/JoplayXYZ/LinkInBio">Github</a>
154+
</footer>
155+
</body>
156+
</html>`;
157+
158+
const blob = new Blob([latestHtml], { type: 'text/html' });
159+
const url = URL.createObjectURL(blob);
160+
161+
document.getElementById("preview").src = url;
162+
document.getElementById("downloadButton").style.display = "inline-block";
163+
document.getElementById("viewCodeButton").style.display = "inline-block";
164+
}
165+
166+
function downloadHtml() {
167+
const siteName = document.getElementById("name").value.trim() || "site";
168+
const blob = new Blob([latestHtml], { type: 'text/html' });
169+
const url = URL.createObjectURL(blob);
170+
const a = document.createElement("a");
171+
a.href = url;
172+
a.download = `${siteName}-link-in-bio-website.html`;
173+
a.click();
174+
}
175+
176+
function viewCode() {
177+
const escaped = latestHtml
178+
.replace(/&/g, "&amp;")
179+
.replace(/</g, "&lt;")
180+
.replace(/>/g, "&gt;");
181+
182+
const win = window.open("", "_blank");
183+
win.document.write(`
184+
<html>
185+
<head>
186+
<title>Generated Code</title>
187+
<style>
188+
body {
189+
background: #0d1b2a;
190+
color: #d5dbdb;
191+
font-family: monospace;
192+
padding: 2rem;
193+
}
194+
pre {
195+
white-space: pre-wrap;
196+
word-break: break-word;
197+
}
198+
</style>
199+
</head>
200+
<body>
201+
<h1>Generated HTML</h1>
202+
<pre>${escaped}</pre>
203+
</body>
204+
</html>
205+
`);
206+
}
207+
</script>
208+
209+
</body>
210+
</html>

0 commit comments

Comments
 (0)