mirror of
https://github.com/hyperknot/openfreemap.git
synced 2026-05-21 22:12:15 +00:00
rename
This commit is contained in:
Zsolt Ero
61
website/src/components/Card.astro
Normal file
61
website/src/components/Card.astro
Normal file
@@ -0,0 +1,61 @@
|
||||
---
|
||||
interface Props {
|
||||
title: string
|
||||
body: string
|
||||
href: string
|
||||
}
|
||||
|
||||
const { href, title, body } = Astro.props
|
||||
---
|
||||
|
||||
<li class="link-card">
|
||||
<a href={href}>
|
||||
<h2>
|
||||
{title}
|
||||
<span>→</span>
|
||||
</h2>
|
||||
<p>
|
||||
{body}
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<style>
|
||||
.link-card {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
padding: 1px;
|
||||
background-color: #23262d;
|
||||
background-image: none;
|
||||
background-size: 400%;
|
||||
border-radius: 7px;
|
||||
background-position: 100%;
|
||||
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.link-card > a {
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
line-height: 1.4;
|
||||
padding: calc(1.5rem - 1px);
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
background-color: #23262d;
|
||||
opacity: 0.8;
|
||||
}
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
p {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.link-card:is(:hover, :focus-within) {
|
||||
background-position: 0;
|
||||
background-image: var(--accent-gradient);
|
||||
}
|
||||
.link-card:is(:hover, :focus-within) h2 {
|
||||
color: rgb(var(--accent-light));
|
||||
}
|
||||
</style>
|
||||
99
website/src/components/Donate.astro
Normal file
99
website/src/components/Donate.astro
Normal file
@@ -0,0 +1,99 @@
|
||||
---
|
||||
import { Content as DonateText } from '../content/index/donate.md'
|
||||
---
|
||||
|
||||
<h2>How can I donate or support this project?</h2>
|
||||
<p>
|
||||
If this project helps you save on your map hosting costs, please subscribe to one of our support
|
||||
plans here:
|
||||
</p>
|
||||
|
||||
<div id="support-plans-slider"></div>
|
||||
|
||||
<DonateText />
|
||||
|
||||
<script is:inline src="https://unpkg.com/nouislider@15.7.1/dist/nouislider.min.js"></script>
|
||||
<script is:inline src="/scripts/donate.js"></script>
|
||||
|
||||
<style>
|
||||
#support-plans-slider {
|
||||
max-width: 600px;
|
||||
margin: 200px auto 150px;
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
#support-plans-slider {
|
||||
max-width: 98%;
|
||||
margin: 170px auto 120px;
|
||||
}
|
||||
}
|
||||
|
||||
.noUi-connects {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.noUi-value {
|
||||
line-height: 0;
|
||||
margin-top: 32px;
|
||||
font-size: 30px;
|
||||
transition: font-size 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.noUi-value.active {
|
||||
font-size: 45px;
|
||||
}
|
||||
|
||||
.noUi-marker-horizontal.noUi-marker-large {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.noUi-marker-horizontal.noUi-marker {
|
||||
margin-left: 0;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.noUi-tooltip {
|
||||
border-color: #ccc;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.noUi-tooltip.first {
|
||||
left: 0;
|
||||
transform: unset;
|
||||
}
|
||||
|
||||
.noUi-tooltip.last {
|
||||
right: 0;
|
||||
left: unset;
|
||||
transform: unset;
|
||||
}
|
||||
|
||||
.plan-name {
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.plan-link {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.05rem;
|
||||
font-size: 15px;
|
||||
|
||||
border-radius: 20px;
|
||||
padding: 6px 16px;
|
||||
margin-top: 15px;
|
||||
|
||||
background: linear-gradient(32deg, #03a9f4, transparent) #f441a5;
|
||||
transition: background-color 1s;
|
||||
}
|
||||
|
||||
.plan-link:hover,
|
||||
.plan-link:focus {
|
||||
background-color: #fdb900;
|
||||
}
|
||||
</style>
|
||||
31
website/src/components/Logo.astro
Normal file
31
website/src/components/Logo.astro
Normal file
@@ -0,0 +1,31 @@
|
||||
---
|
||||
interface Props {
|
||||
title: string
|
||||
}
|
||||
|
||||
const { title } = Astro.props
|
||||
---
|
||||
|
||||
<img src="/logo.jpg" alt="logo" height="200" class="logo" />
|
||||
|
||||
<h1>{title}</h1>
|
||||
|
||||
<div class="icons">
|
||||
<a href="https://github.com/hyperknot/openfreemap" target="_blank"
|
||||
><img src="/github.svg" alt="github" height="28" /></a
|
||||
>
|
||||
<a href="https://x.com/hyperknot" target="_blank"><img src="/x.svg" alt="x" height="28" /></a>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.logo {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.icons {
|
||||
margin: 0 auto;
|
||||
width: 80px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
100
website/src/components/Map.astro
Normal file
100
website/src/components/Map.astro
Normal file
@@ -0,0 +1,100 @@
|
||||
---
|
||||
import StyleUrlBug from './StyleUrlBug.astro'
|
||||
const { showStyleURL } = Astro.props
|
||||
---
|
||||
|
||||
<div id="map-container">
|
||||
<div id="mapbg-image">
|
||||
<div class="mapbg-attrib">
|
||||
<a href="https://openfreemap.org" target="_blank">OpenFreeMap</a>
|
||||
<a href="https://www.openmaptiles.org/" target="_blank">© OpenMapTiles</a> Data from
|
||||
<a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="button-container">
|
||||
<button data-style="positron" class="btn">Positron</button>
|
||||
<button data-style="bright" class="btn">Bright</button>
|
||||
<button data-style="liberty" class="btn selected">Liberty</button>
|
||||
<button data-style="liberty-3d" class="btn">3D</button>
|
||||
</div>
|
||||
|
||||
{showStyleURL && <StyleUrlBug />}
|
||||
|
||||
<script is:inline src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
|
||||
<script is:inline src="/scripts/map.js"></script>
|
||||
|
||||
<style>
|
||||
#map-container {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
margin-bottom: 24px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#mapbg-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
background-image: url('/berlin.webp');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
cursor: pointer;
|
||||
transition: opacity 3s;
|
||||
}
|
||||
|
||||
.mapbg-attrib {
|
||||
font:
|
||||
12px / 20px Helvetica Neue,
|
||||
Arial,
|
||||
Helvetica,
|
||||
sans-serif;
|
||||
background-color: hsla(0, 0%, 100%, 0.5);
|
||||
padding: 0 5px;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.mapbg-attrib a {
|
||||
color: rgba(0, 0, 0, 0.75);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.mapbg-attrib a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
margin: 0 auto 20px;
|
||||
max-width: 600px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border: 0;
|
||||
border-radius: 0.25rem;
|
||||
background: #2f5f8b;
|
||||
color: white;
|
||||
font-size: 1rem;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
padding: 0.25rem 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn.selected {
|
||||
background: #4892d9;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: #4892d9;
|
||||
}
|
||||
</style>
|
||||
11
website/src/components/StyleUrlBug.astro
Normal file
11
website/src/components/StyleUrlBug.astro
Normal file
@@ -0,0 +1,11 @@
|
||||
<p>Use the following style in a MapLibre map:</p>
|
||||
<pre
|
||||
id="style-url-pre"><code id="style-url-code">https://tiles.openfreemap.org/styles/liberty</code></pre>
|
||||
|
||||
<style>
|
||||
#style-url-pre {
|
||||
background: #efefef;
|
||||
padding: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user