Skip to content

Commit 0df1a9f

Browse files
committed
Added about.html and GitHub link
1 parent 78fb768 commit 0df1a9f

File tree

6 files changed

+157
-2
lines changed

6 files changed

+157
-2
lines changed

about.html

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
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+
<link rel="apple-touch-icon" sizes="180x180" href="icons/apple-touch-icon.png">
7+
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
8+
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
9+
<meta http-equiv="X-Content-Type-Options" content="nosniff">
10+
<meta http-equiv="X-XSS-Protection" content="1; mode=block">
11+
<title>About SplitMark - Online Markdown Editor</title>
12+
<meta name="description" content="Discover the feature-rich, easy-to-use SplitMark - your ideal online Markdown editor. Seamlessly create and preview Markdown files for documentation, notes, and READMEs.">
13+
<meta property="og:title" content="About SplitMark - Online Markdown Editor">
14+
<meta property="og:description" content="Discover the feature-rich, easy-to-use SplitMark - your ideal online Markdown editor. Seamlessly create and preview Markdown files for documentation, notes, and READMEs.">
15+
<meta property="og:url" content="https://splitmark.com/about">
16+
<meta property="og:image" content="screenshot.png">
17+
<meta property="og:type" content="website">
18+
<!-- Twitter Card meta tags for social media -->
19+
<meta name="twitter:card" content="summary_large_image">
20+
<meta name="twitter:title" content="About SplitMark">
21+
<meta name="twitter:description" content="Discover the feature-rich, easy-to-use SplitMark - your ideal online Markdown editor. Seamlessly create and preview Markdown files for documentation, notes, and READMEs.">
22+
<meta name="twitter:image" content="screenshot.png">
23+
<link rel="stylesheet" href="style.css">
24+
25+
<style>
26+
body {
27+
font-family: 'Inter', sans-serif;
28+
line-height: 1.6;
29+
margin: 0;
30+
padding: 0;
31+
overflow: auto;
32+
33+
}
34+
35+
.light-mode .menu {
36+
background-color: white; /* Lighter color for light mode */
37+
}
38+
39+
header {
40+
padding: 20px;
41+
text-align: center;
42+
43+
}
44+
45+
section {
46+
max-width: 800px;
47+
margin: 20px auto;
48+
padding: 20px;
49+
background-color: #242424;
50+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
51+
border-radius: 5px;
52+
}
53+
54+
.light-mode section{
55+
background-color: white;
56+
}
57+
58+
59+
article img {
60+
width: 100%;
61+
max-width: 400px;
62+
height: auto;
63+
border-radius: 5px;
64+
margin: 20px 0;
65+
}
66+
67+
footer {
68+
text-align: center;
69+
padding: 20px;
70+
}
71+
</style>
72+
<script>
73+
// Load the theme from localStorage and apply it
74+
document.addEventListener('DOMContentLoaded', function () {
75+
const isLightMode = localStorage.getItem('theme') === 'light';
76+
if (isLightMode) {
77+
document.body.classList.add('light-mode');
78+
}
79+
});
80+
</script>
81+
</head>
82+
<body>
83+
<div class="menu">
84+
<div>
85+
<button onclick="window.open('index.html', '_self')">Home</button>
86+
<button onclick="window.open('https://github.com/Clevis22/SplitMark/blob/main/README.md', '_blank')">GitHub</button>
87+
<button onclick="window.open('https://github.com/showdownjs/showdown/wiki/Showdown\'s-Markdown-syntax', '_blank')">Syntax</button>
88+
</div>
89+
</div>
90+
<header>
91+
<h1>About</h1>
92+
</header>
93+
<section>
94+
<article>
95+
<!-- <img src="images/githubpreview.png" alt="Our Team"> -->
96+
<p>SplitMark - A minimal yet feature-rich online markdown editor.</p>
97+
<p>SplitMark is an online, privacy-focused, open-source, real-time markdown editor powered by Showdown and Split.js. There is no login, no ads, and no tracking. It is just markdown editing in its purest form.</p>
98+
<h3>Key Features</h3>
99+
<ul>
100+
<li>Resizable Split View: View your rendered markdown in real-time while editing.</li>
101+
<li>Emoji Support: Add emojis to your markdown through <a href="https://github.com/showdownjs/showdown/wiki/Emojis#introduction">Showdown's emoji support</a>.</li>
102+
<li>Open-Source: SplitMark is open-source and available on <a href="https://github.com/Clevis22/SplitMark">GitHub.</a></li>
103+
<li>Speed: SplitMark is designed to be lightweight and fast.</li>
104+
<li>Privacy: SplitMark does not collect any data, and your markdown never leaves your device.</li>
105+
<li>Export Files: Save your markdown locally on your device as HTML, Markdown, or PDF.</li>
106+
<li>Load Files: Load your markdown or HTML from your device.</li>
107+
<li>Powerful Keyboard Shortcuts: Use shortcuts to speed up your writing process.</li>
108+
</ul>
109+
110+
<h3>Keybord Shortcuts</h3>
111+
<ul>
112+
<li><b>Control B:</b> Bold</li>
113+
<li><i>Control I:</i> Italicize</li>
114+
<li><s>Control S:</s> Strikethrough</li>
115+
<li>Control E: Emoji</li>
116+
<li>Control L: Line break</li>
117+
<li>Control Z: Undo</li>
118+
<li>Control Y: Redo</li>
119+
<li>Control Enter: Toggle between split view, full-screen editor, and full-screen preview</li>
120+
<li>Control +: Increase text size</li>
121+
<li>Control -: Decrease text size</li>
122+
<li>Control Shift C: Show word count and time to read</li>
123+
</ul>
124+
125+
</article>
126+
</section>
127+
<footer>
128+
<!-- Footer content with links to privacy policy, terms of use, etc. -->
129+
</footer>
130+
</body>
131+
</html>

icons/github-mark-white.png

4.72 KB
Loading

icons/github-mark.png

6.24 KB
Loading

index.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
<body>
2929
<div class="menu">
3030
<div>
31-
<button onclick="window.open('https://github.com/Clevis22/SplitMark/blob/main/README.md', '_blank')">About</button>
31+
<button onclick="window.open('about.html', '_self')">About</button>
3232
<button onclick="window.open('https://github.com/showdownjs/showdown/wiki/Showdown\'s-Markdown-syntax', '_blank')">Syntax</button>
3333
<button class="toggle-mode" onclick="toggleLightMode()">Toggle Theme</button>
3434
<button id="loadButton">Load</button>
@@ -44,6 +44,7 @@
4444
<a href="#" id="exportMarkdownButton">Markdown</a>
4545
</div>
4646
</div>
47+
<a class="githubLogoContainer" href="https://github.com/Clevis22/SplitMark" target="_blank"><img class = "githubLogo" src="icons/github-mark-white.png"></a>
4748
</div>
4849
</div>
4950
<div class="editor-preview">

script.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -257,7 +257,6 @@ function toggleLightMode() {
257257
updateThemeElements(isLightMode);
258258
}
259259

260-
// Function to update styling of elements that depend on the theme
261260
function updateThemeElements(isLightMode) {
262261
const toggleElements = document.querySelectorAll('.toggle-mode, .menu, .editor-preview, .preview, .markdown-body');
263262
toggleElements.forEach(element => {
@@ -267,6 +266,13 @@ function updateThemeElements(isLightMode) {
267266
element.classList.remove('light-mode');
268267
}
269268
});
269+
270+
// Target the specific image element for theme-based source switching
271+
const githubLogoImage = document.querySelector('.githubLogo');
272+
273+
if (githubLogoImage) {
274+
githubLogoImage.src = isLightMode ? 'icons/github-mark.png' : 'icons/github-mark-white.png';
275+
}
270276
}
271277

272278
// Apply the correct mode from localStorage when the document loads

style.css

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,13 @@ textarea,
6464
font-family: 'Inter', sans-serif;
6565
}
6666

67+
.githubLogo{
68+
width: 1.5em;
69+
height: 1.5em;
70+
vertical-align: middle; /* Align with other elements */
71+
margin: 0 5px; /* Similar margin to buttons for consistency */
72+
}
73+
6774
/* Style for the font size selector */
6875
select {
6976
padding: 0.5em;
@@ -84,6 +91,11 @@ select {
8491
background: #8a8888;
8592
}
8693

94+
/* Light Mode Scrollbar */
95+
.light-mode::-webkit-scrollbar-track {
96+
background: white; /* Light background color for light mode */
97+
}
98+
8799
/*code scrollbar */
88100
pre::-webkit-scrollbar {
89101
width: 2px;
@@ -426,6 +438,11 @@ blockquote p{
426438
padding: 0.3em 0.5em;
427439
font-size: 0.7rem;
428440
}
441+
442+
.githubLogoContainer{
443+
display: none;
444+
}
445+
429446
}
430447

431448

0 commit comments

Comments
 (0)