mirror of
https://github.com/olehomelchenko/astrolabe.git
synced 2025-12-21 13:12:24 +00:00
feat: add About page with usage instructions and privacy information
This commit is contained in:
80
about.html
Normal file
80
about.html
Normal file
@@ -0,0 +1,80 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Astrolabe - your Vega-Lite IDE/Snippet manager</title>
|
||||||
|
<script defer data-domain="olehomelchenko.github.com"
|
||||||
|
src="https://plausible.io/js/script.outbound-links.tagged-events.js"></script>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
||||||
|
<link rel="icon" href="src/astrolabe.svg" type="image/svg+xml">
|
||||||
|
<link rel="stylesheet" href="src/styles.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="about-container">
|
||||||
|
<header class="app-header">
|
||||||
|
<a href="/">
|
||||||
|
<img src="src/astrolabe.svg" alt="Astrolabe logo">
|
||||||
|
<h1>Astrolabe</h1>
|
||||||
|
</a>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="panel">
|
||||||
|
<div class="about content">
|
||||||
|
<h2>About Astrolabe</h2>
|
||||||
|
<p>Astrolabe is a simple web application that allows you to create, edit, and save Vega & Vega-Lite snippets.
|
||||||
|
You can
|
||||||
|
create a new snippet, edit it, and save it to your browser's local storage. You can also export your
|
||||||
|
snippets to a JSON file and import them back into the application.</p>
|
||||||
|
<h2>How to use Astrolabe</h2>
|
||||||
|
<p>When you first open Astrolabe, you will see two panels: the Snippets panel and the Editor panel. The
|
||||||
|
Snippets panel displays a list of all your snippets, and the Editor panel allows you to edit the
|
||||||
|
selected
|
||||||
|
snippet. You can create a new snippet by clicking the "New Snippet" button in the Snippets panel.
|
||||||
|
You can
|
||||||
|
also search for snippets using the search bar at the top of the Snippets panel.</p>
|
||||||
|
<h3>Managing Snippets</h3>
|
||||||
|
<p>
|
||||||
|
<ul>
|
||||||
|
<li>You can create a new snippet by clicking the "New Snippet" button in the Snippets panel.</li>
|
||||||
|
<li>You can search for snippets using the search bar at the top of the Snippets panel.</li>
|
||||||
|
<li>You can rename a snippet's name by clicking the "Rename ✏️" button in the Snippets panel.</li>
|
||||||
|
<li>You can edit a snippet by selecting it in the Snippets panel.</li>
|
||||||
|
<li>You can delete a snippet by clicking the "Delete" button in the Snippets panel.</li>
|
||||||
|
<li>You can add or edit the comment for a snippet by clicking the "Comment 💬" icon.</li>
|
||||||
|
</ul>
|
||||||
|
</p>
|
||||||
|
<p>When you select a snippet in the Snippets panel, the Editor panel will display the snippet's code in
|
||||||
|
an editor. You can edit the code and save it by clicking the "Save" button. You can also switch
|
||||||
|
between the editor and the saved version of the snippet by clicking the "View Saved" button.</p>
|
||||||
|
<h2>Exporting and importing snippets</h2>
|
||||||
|
<p>You can export your snippets to a JSON file by clicking the "Export" button in the header. You can
|
||||||
|
import
|
||||||
|
snippets from a JSON file by clicking the "Import" button in the header and selecting the file you
|
||||||
|
want to
|
||||||
|
import.</p>
|
||||||
|
<h2>Privacy</h2>
|
||||||
|
<p>
|
||||||
|
Astrolabe does not collect any personal data. All your snippets are stored locally in your browser's
|
||||||
|
local storage. If you clear your browser's local storage, all your snippets will be deleted.
|
||||||
|
The only data that is collected is anonymous usage data, which is used to better understand
|
||||||
|
how users interact with the application. It is publicly available on the <a
|
||||||
|
href="https://plausible.io/olehomelchenko.github.com">Plausible Analytics</a> website.
|
||||||
|
</p>
|
||||||
|
<h2>Feedback</h2>
|
||||||
|
<p>If you have any feedback or suggestions for Astrolabe, please feel free to reach out to me on Twitter
|
||||||
|
<a href="https://twitter.com/olehomelchenko">@olehomelchenko</a>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<footer class="footer">
|
||||||
|
<p>2025 Oleh Omelchenko <a href="https://olehomelchenko.com">olehomelchenko.com</a></p>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
11
index.html
11
index.html
@@ -23,14 +23,17 @@
|
|||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<header class="app-header">
|
<header class="app-header">
|
||||||
<a href="/">
|
<div class="header-left">
|
||||||
<img src="src/astrolabe.svg" alt="Astrolabe logo">
|
<a href="/">
|
||||||
<h1>Astrolabe</h1>
|
<img src="src/astrolabe.svg" alt="Astrolabe logo">
|
||||||
</a>
|
<h1>Astrolabe</h1>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
<div class="header-controls">
|
<div class="header-controls">
|
||||||
<button class="button mini" id="export-snippets">Export</button>
|
<button class="button mini" id="export-snippets">Export</button>
|
||||||
<button class="button mini" id="import-snippets">Import</button>
|
<button class="button mini" id="import-snippets">Import</button>
|
||||||
<input type="file" id="import-file" accept=".json" style="display: none">
|
<input type="file" id="import-file" accept=".json" style="display: none">
|
||||||
|
<a href="/about.html" class="about-link">About</a>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<div class="panel">
|
<div class="panel">
|
||||||
|
|||||||
@@ -352,4 +352,84 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: calc(100% - 2rem);
|
height: calc(100% - 2rem);
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-link {
|
||||||
|
font-family: var(--ui-font);
|
||||||
|
font-size: 1rem;
|
||||||
|
color: #607D8B;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color 0.2s;
|
||||||
|
padding-left: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-link:hover {
|
||||||
|
color: #546E7A;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
max-width: 66%;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem 0;
|
||||||
|
font-family: var(--ui-font);
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content h2 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content p {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content a {
|
||||||
|
color: #2196F3;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content ul {
|
||||||
|
padding-left: 1.5rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content li {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
padding: 1rem 0;
|
||||||
|
background: #f5f5f5;
|
||||||
|
border-top: 1px solid #e0e0e0;
|
||||||
|
font-family: var(--ui-font);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer p {
|
||||||
|
margin: 0;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer a {
|
||||||
|
color: #2196F3;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user