Improve SEO nav and map loading placeholder
This commit is contained in:
SocioWire
parent
4f2894987d
commit
eedebaea46
14
index.html
14
index.html
|
|
@ -6,6 +6,7 @@
|
||||||
<meta name="description" content="SocioWire maps local news, events, deals, and social posts in real time. Explore what’s happening around you." />
|
<meta name="description" content="SocioWire maps local news, events, deals, and social posts in real time. Explore what’s happening around you." />
|
||||||
<meta name="robots" content="index, follow" />
|
<meta name="robots" content="index, follow" />
|
||||||
<link rel="canonical" href="https://sociowire.com/" />
|
<link rel="canonical" href="https://sociowire.com/" />
|
||||||
|
<link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap.xml" />
|
||||||
|
|
||||||
<!-- Favicon -->
|
<!-- Favicon -->
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
|
|
@ -45,6 +46,19 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@graph": [
|
||||||
|
{ "@type": "SiteNavigationElement", "name": "Live Map", "url": "https://sociowire.com/#map" },
|
||||||
|
{ "@type": "SiteNavigationElement", "name": "SocioWall", "url": "https://sociowire.com/#wall" },
|
||||||
|
{ "@type": "SiteNavigationElement", "name": "Islands", "url": "https://sociowire.com/#islands" },
|
||||||
|
{ "@type": "SiteNavigationElement", "name": "About", "url": "https://sociowire.com/about.html" },
|
||||||
|
{ "@type": "SiteNavigationElement", "name": "Contact", "url": "https://sociowire.com/contact.html" },
|
||||||
|
{ "@type": "SiteNavigationElement", "name": "Privacy", "url": "https://sociowire.com/privacy.html" }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
<!-- Google tag (gtag.js) -->
|
<!-- Google tag (gtag.js) -->
|
||||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-QT0P53R99H"></script>
|
<script async src="https://www.googletagmanager.com/gtag/js?id=G-QT0P53R99H"></script>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,99 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="Learn how SocioWire maps local news, events, and community stories in real time."
|
||||||
|
/>
|
||||||
|
<link rel="canonical" href="https://sociowire.com/about.html" />
|
||||||
|
<title>About SocioWire</title>
|
||||||
|
<style>
|
||||||
|
:root { color-scheme: light; }
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: "Georgia", "Times New Roman", serif;
|
||||||
|
background: #f8fafc;
|
||||||
|
color: #0f172a;
|
||||||
|
}
|
||||||
|
main {
|
||||||
|
max-width: 860px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 48px 24px 72px;
|
||||||
|
}
|
||||||
|
h1 { font-size: 34px; margin: 0 0 8px; }
|
||||||
|
h2 { font-size: 18px; margin: 28px 0 8px; }
|
||||||
|
p { line-height: 1.6; font-size: 16px; }
|
||||||
|
.card {
|
||||||
|
background: #ffffff;
|
||||||
|
border: 1px solid #e2e8f0;
|
||||||
|
border-radius: 14px;
|
||||||
|
padding: 20px 22px;
|
||||||
|
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
|
||||||
|
}
|
||||||
|
.page-header {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 12px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.logo-link {
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
text-decoration: none;
|
||||||
|
color: #0f172a;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
.page-nav {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 12px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.page-nav a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #1d4ed8;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.cta {
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 12px;
|
||||||
|
padding: 10px 16px;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: #1d4ed8;
|
||||||
|
color: #ffffff;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<div class="card">
|
||||||
|
<div class="page-header">
|
||||||
|
<a class="logo-link" href="https://sociowire.com/">SOCIOWIRE</a>
|
||||||
|
<nav class="page-nav" aria-label="Site">
|
||||||
|
<a href="https://sociowire.com/islands.html">Islands</a>
|
||||||
|
<a href="https://sociowire.com/sociowall.html">SocioWall</a>
|
||||||
|
<a href="https://sociowire.com/contact.html">Contact</a>
|
||||||
|
<a href="https://sociowire.com/privacy.html">Privacy</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<h1>About SocioWire</h1>
|
||||||
|
<p>
|
||||||
|
SocioWire is a live map for what is happening around you. We surface local news, events,
|
||||||
|
market deals, and community posts so you can discover what matters in real time.
|
||||||
|
</p>
|
||||||
|
<h2>What makes it different</h2>
|
||||||
|
<p>
|
||||||
|
Explore a location-first feed, jump into Island communities, and filter the map to focus
|
||||||
|
on the stories that matter most to you.
|
||||||
|
</p>
|
||||||
|
<a class="cta" href="https://sociowire.com/#map">Open the live map</a>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,95 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="Contact SocioWire support for help, partnerships, and community feedback."
|
||||||
|
/>
|
||||||
|
<link rel="canonical" href="https://sociowire.com/contact.html" />
|
||||||
|
<title>Contact SocioWire</title>
|
||||||
|
<style>
|
||||||
|
:root { color-scheme: light; }
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: "Georgia", "Times New Roman", serif;
|
||||||
|
background: #f8fafc;
|
||||||
|
color: #0f172a;
|
||||||
|
}
|
||||||
|
main {
|
||||||
|
max-width: 860px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 48px 24px 72px;
|
||||||
|
}
|
||||||
|
h1 { font-size: 34px; margin: 0 0 8px; }
|
||||||
|
p { line-height: 1.6; font-size: 16px; }
|
||||||
|
.card {
|
||||||
|
background: #ffffff;
|
||||||
|
border: 1px solid #e2e8f0;
|
||||||
|
border-radius: 14px;
|
||||||
|
padding: 20px 22px;
|
||||||
|
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
|
||||||
|
}
|
||||||
|
.page-header {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 12px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.logo-link {
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
text-decoration: none;
|
||||||
|
color: #0f172a;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
.page-nav {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 12px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.page-nav a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #1d4ed8;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.cta {
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 12px;
|
||||||
|
padding: 10px 16px;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: #1d4ed8;
|
||||||
|
color: #ffffff;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<div class="card">
|
||||||
|
<div class="page-header">
|
||||||
|
<a class="logo-link" href="https://sociowire.com/">SOCIOWIRE</a>
|
||||||
|
<nav class="page-nav" aria-label="Site">
|
||||||
|
<a href="https://sociowire.com/about.html">About</a>
|
||||||
|
<a href="https://sociowire.com/islands.html">Islands</a>
|
||||||
|
<a href="https://sociowire.com/sociowall.html">SocioWall</a>
|
||||||
|
<a href="https://sociowire.com/privacy.html">Privacy</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<h1>Contact</h1>
|
||||||
|
<p>
|
||||||
|
Reach the SocioWire team for support, partnerships, or community feedback.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Email us at <a href="mailto:support@sociowire.com">support@sociowire.com</a>.
|
||||||
|
</p>
|
||||||
|
<a class="cta" href="https://sociowire.com/">Return to SocioWire</a>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,96 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="SocioWire Islands are community hubs for local updates, deals, and stories."
|
||||||
|
/>
|
||||||
|
<link rel="canonical" href="https://sociowire.com/islands.html" />
|
||||||
|
<title>SocioWire Islands</title>
|
||||||
|
<style>
|
||||||
|
:root { color-scheme: light; }
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: "Georgia", "Times New Roman", serif;
|
||||||
|
background: #f8fafc;
|
||||||
|
color: #0f172a;
|
||||||
|
}
|
||||||
|
main {
|
||||||
|
max-width: 860px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 48px 24px 72px;
|
||||||
|
}
|
||||||
|
h1 { font-size: 34px; margin: 0 0 8px; }
|
||||||
|
p { line-height: 1.6; font-size: 16px; }
|
||||||
|
.card {
|
||||||
|
background: #ffffff;
|
||||||
|
border: 1px solid #e2e8f0;
|
||||||
|
border-radius: 14px;
|
||||||
|
padding: 20px 22px;
|
||||||
|
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
|
||||||
|
}
|
||||||
|
.page-header {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 12px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.logo-link {
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
text-decoration: none;
|
||||||
|
color: #0f172a;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
.page-nav {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 12px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.page-nav a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #1d4ed8;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.cta {
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 12px;
|
||||||
|
padding: 10px 16px;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: #1d4ed8;
|
||||||
|
color: #ffffff;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<div class="card">
|
||||||
|
<div class="page-header">
|
||||||
|
<a class="logo-link" href="https://sociowire.com/">SOCIOWIRE</a>
|
||||||
|
<nav class="page-nav" aria-label="Site">
|
||||||
|
<a href="https://sociowire.com/about.html">About</a>
|
||||||
|
<a href="https://sociowire.com/sociowall.html">SocioWall</a>
|
||||||
|
<a href="https://sociowire.com/contact.html">Contact</a>
|
||||||
|
<a href="https://sociowire.com/privacy.html">Privacy</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<h1>Islands</h1>
|
||||||
|
<p>
|
||||||
|
Islands are community spaces that gather local updates, neighborhood stories, and deals
|
||||||
|
into a single feed. Pick an Island to see what people are sharing right now.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Use Islands to follow creators, save a local hub, or discover new areas when you travel.
|
||||||
|
</p>
|
||||||
|
<a class="cta" href="https://sociowire.com/#islands">Explore Islands on SocioWire</a>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -3,6 +3,11 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="SocioWire privacy policy covering data collection, usage, and your choices."
|
||||||
|
/>
|
||||||
|
<link rel="canonical" href="https://sociowire.com/privacy.html" />
|
||||||
<title>SocioWire Privacy Policy</title>
|
<title>SocioWire Privacy Policy</title>
|
||||||
<style>
|
<style>
|
||||||
:root {
|
:root {
|
||||||
|
|
@ -46,6 +51,32 @@
|
||||||
padding: 20px 22px;
|
padding: 20px 22px;
|
||||||
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
|
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
|
||||||
}
|
}
|
||||||
|
.page-header {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 12px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.logo-link {
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
text-decoration: none;
|
||||||
|
color: #0f172a;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
.page-nav {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 12px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.page-nav a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #1d4ed8;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
a {
|
a {
|
||||||
color: #1d4ed8;
|
color: #1d4ed8;
|
||||||
}
|
}
|
||||||
|
|
@ -54,6 +85,15 @@
|
||||||
<body>
|
<body>
|
||||||
<main>
|
<main>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
|
<div class="page-header">
|
||||||
|
<a class="logo-link" href="https://sociowire.com/">SOCIOWIRE</a>
|
||||||
|
<nav class="page-nav" aria-label="Site">
|
||||||
|
<a href="https://sociowire.com/about.html">About</a>
|
||||||
|
<a href="https://sociowire.com/islands.html">Islands</a>
|
||||||
|
<a href="https://sociowire.com/sociowall.html">SocioWall</a>
|
||||||
|
<a href="https://sociowire.com/contact.html">Contact</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
<h1>Privacy Policy</h1>
|
<h1>Privacy Policy</h1>
|
||||||
<div class="meta">Last updated: 2025-12-27</div>
|
<div class="meta">Last updated: 2025-12-27</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,27 @@
|
||||||
<priority>1.0</priority>
|
<priority>1.0</priority>
|
||||||
</url>
|
</url>
|
||||||
<url>
|
<url>
|
||||||
<loc>https://sociowire.com/privacy</loc>
|
<loc>https://sociowire.com/about.html</loc>
|
||||||
|
<changefreq>monthly</changefreq>
|
||||||
|
<priority>0.6</priority>
|
||||||
|
</url>
|
||||||
|
<url>
|
||||||
|
<loc>https://sociowire.com/islands.html</loc>
|
||||||
|
<changefreq>weekly</changefreq>
|
||||||
|
<priority>0.7</priority>
|
||||||
|
</url>
|
||||||
|
<url>
|
||||||
|
<loc>https://sociowire.com/sociowall.html</loc>
|
||||||
|
<changefreq>weekly</changefreq>
|
||||||
|
<priority>0.7</priority>
|
||||||
|
</url>
|
||||||
|
<url>
|
||||||
|
<loc>https://sociowire.com/contact.html</loc>
|
||||||
|
<changefreq>yearly</changefreq>
|
||||||
|
<priority>0.4</priority>
|
||||||
|
</url>
|
||||||
|
<url>
|
||||||
|
<loc>https://sociowire.com/privacy.html</loc>
|
||||||
<changefreq>yearly</changefreq>
|
<changefreq>yearly</changefreq>
|
||||||
<priority>0.3</priority>
|
<priority>0.3</priority>
|
||||||
</url>
|
</url>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,96 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="SocioWall is the live feed of posts and local moments on SocioWire."
|
||||||
|
/>
|
||||||
|
<link rel="canonical" href="https://sociowire.com/sociowall.html" />
|
||||||
|
<title>SocioWall Feed</title>
|
||||||
|
<style>
|
||||||
|
:root { color-scheme: light; }
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: "Georgia", "Times New Roman", serif;
|
||||||
|
background: #f8fafc;
|
||||||
|
color: #0f172a;
|
||||||
|
}
|
||||||
|
main {
|
||||||
|
max-width: 860px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 48px 24px 72px;
|
||||||
|
}
|
||||||
|
h1 { font-size: 34px; margin: 0 0 8px; }
|
||||||
|
p { line-height: 1.6; font-size: 16px; }
|
||||||
|
.card {
|
||||||
|
background: #ffffff;
|
||||||
|
border: 1px solid #e2e8f0;
|
||||||
|
border-radius: 14px;
|
||||||
|
padding: 20px 22px;
|
||||||
|
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
|
||||||
|
}
|
||||||
|
.page-header {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 12px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.logo-link {
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
text-decoration: none;
|
||||||
|
color: #0f172a;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
.page-nav {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 12px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.page-nav a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #1d4ed8;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.cta {
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 12px;
|
||||||
|
padding: 10px 16px;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: #1d4ed8;
|
||||||
|
color: #ffffff;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<div class="card">
|
||||||
|
<div class="page-header">
|
||||||
|
<a class="logo-link" href="https://sociowire.com/">SOCIOWIRE</a>
|
||||||
|
<nav class="page-nav" aria-label="Site">
|
||||||
|
<a href="https://sociowire.com/about.html">About</a>
|
||||||
|
<a href="https://sociowire.com/islands.html">Islands</a>
|
||||||
|
<a href="https://sociowire.com/contact.html">Contact</a>
|
||||||
|
<a href="https://sociowire.com/privacy.html">Privacy</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<h1>SocioWall</h1>
|
||||||
|
<p>
|
||||||
|
SocioWall is the live stream of posts, deals, and news from across SocioWire. It keeps
|
||||||
|
you up to date without losing the local context.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Use SocioWall to scan recent activity, then jump to the map for a location view.
|
||||||
|
</p>
|
||||||
|
<a class="cta" href="https://sociowire.com/#wall">Open SocioWall</a>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
63
src/App.jsx
63
src/App.jsx
|
|
@ -133,8 +133,36 @@ export default function App() {
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div className="main-shell">
|
<div className="main-shell">
|
||||||
<div className="map-shell">
|
<div className="map-shell" id="map">
|
||||||
<Suspense fallback={<div style={{ padding: 16 }}>Loading map…</div>}>
|
<Suspense
|
||||||
|
fallback={
|
||||||
|
<div className="map-page">
|
||||||
|
<div className="map-stage map-stage--placeholder">
|
||||||
|
<div className="map-placeholder-content">
|
||||||
|
<div className="map-placeholder-title">Loading map</div>
|
||||||
|
<div className="map-placeholder-subtitle">Warming up tiles and live data.</div>
|
||||||
|
</div>
|
||||||
|
<div className="map-placeholder-overlay map-placeholder-top">
|
||||||
|
<div className="map-placeholder-pill map-placeholder-pill--wide" />
|
||||||
|
</div>
|
||||||
|
<div className="map-placeholder-overlay map-placeholder-left">
|
||||||
|
<div className="map-placeholder-pill" />
|
||||||
|
<div className="map-placeholder-pill" />
|
||||||
|
<div className="map-placeholder-pill" />
|
||||||
|
</div>
|
||||||
|
<div className="map-placeholder-overlay map-placeholder-right">
|
||||||
|
<div className="map-placeholder-pill" />
|
||||||
|
<div className="map-placeholder-pill" />
|
||||||
|
</div>
|
||||||
|
<div className="map-placeholder-overlay map-placeholder-bottom">
|
||||||
|
<div className="map-placeholder-chip" />
|
||||||
|
<div className="map-placeholder-chip" />
|
||||||
|
<div className="map-placeholder-chip" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
>
|
||||||
<MapView
|
<MapView
|
||||||
theme={theme}
|
theme={theme}
|
||||||
onPostsState={handlePostsState}
|
onPostsState={handlePostsState}
|
||||||
|
|
@ -150,7 +178,7 @@ export default function App() {
|
||||||
{/* BELOW THE MAP (page scroll like Facebook) */}
|
{/* BELOW THE MAP (page scroll like Facebook) */}
|
||||||
<div className="below-stage">
|
<div className="below-stage">
|
||||||
<div className="below-row">
|
<div className="below-row">
|
||||||
<div className="sociowall-panel">
|
<div className="sociowall-panel" id="wall">
|
||||||
<div className="sociowall-header">SOCIOWALL</div>
|
<div className="sociowall-header">SOCIOWALL</div>
|
||||||
<PostList
|
<PostList
|
||||||
posts={wallPosts}
|
posts={wallPosts}
|
||||||
|
|
@ -166,6 +194,20 @@ export default function App() {
|
||||||
|
|
||||||
<div style={{ height: 18 }} />
|
<div style={{ height: 18 }} />
|
||||||
|
|
||||||
|
<section className="seo-section" id="islands">
|
||||||
|
<div className="seo-card">
|
||||||
|
<div className="seo-kicker">Communities</div>
|
||||||
|
<h2>Explore Islands</h2>
|
||||||
|
<p>
|
||||||
|
Islands are local hubs where people share updates, deals, and stories in one place.
|
||||||
|
Browse nearby islands or jump into a new community to see what is trending.
|
||||||
|
</p>
|
||||||
|
<button className="seo-cta" type="button" onClick={handleOpenUniverse}>
|
||||||
|
Open Islands
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
{/* Bouton Contacts flottant en bas à droite */}
|
{/* Bouton Contacts flottant en bas à droite */}
|
||||||
<button className="contacts-float-btn" onClick={() => setShowContactsList(!showContactsList)}>
|
<button className="contacts-float-btn" onClick={() => setShowContactsList(!showContactsList)}>
|
||||||
<span className="contact-icon">👥</span>
|
<span className="contact-icon">👥</span>
|
||||||
|
|
@ -196,6 +238,21 @@ export default function App() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<footer className="sw-footer">
|
||||||
|
<div className="sw-footer-inner">
|
||||||
|
<div className="sw-footer-brand">SOCIOWIRE</div>
|
||||||
|
<nav className="sw-footer-nav" aria-label="Site">
|
||||||
|
<a href="/">Home</a>
|
||||||
|
<a href="/#map">Live Map</a>
|
||||||
|
<a href="/#wall">SocioWall</a>
|
||||||
|
<a href="/#islands">Islands</a>
|
||||||
|
<a href="/about.html">About</a>
|
||||||
|
<a href="/contact.html">Contact</a>
|
||||||
|
<a href="/privacy.html">Privacy</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
{/* Island Universe Modal */}
|
{/* Island Universe Modal */}
|
||||||
{showUniverse && (
|
{showUniverse && (
|
||||||
<IslandUniverse
|
<IslandUniverse
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,88 @@
|
||||||
.app-root{ min-height:100vh; display:flex; flex-direction:column; }
|
.app-root{ min-height:100vh; display:flex; flex-direction:column; }
|
||||||
.main-shell{ flex: 1 0 auto; display:block; padding:0; }
|
.main-shell{ flex: 1 0 auto; display:block; padding:0; }
|
||||||
.map-shell{ position:relative; width:100%; height:auto; overflow:visible; border:none; background:transparent; }
|
.map-shell{ position:relative; width:100%; height:auto; overflow:visible; border:none; background:transparent; }
|
||||||
|
.seo-section {
|
||||||
|
padding: 0 20px 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.seo-card {
|
||||||
|
max-width: 980px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 26px 28px;
|
||||||
|
border-radius: 18px;
|
||||||
|
border: 1px solid rgba(59, 130, 246, 0.4);
|
||||||
|
background: rgba(4, 12, 32, 0.7);
|
||||||
|
box-shadow: 0 18px 38px rgba(2, 6, 23, 0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
.seo-kicker {
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 12px;
|
||||||
|
letter-spacing: 0.22em;
|
||||||
|
color: rgba(148, 163, 184, 0.9);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.seo-card h2 {
|
||||||
|
margin: 10px 0 8px;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.seo-card p {
|
||||||
|
margin: 0 0 16px;
|
||||||
|
color: rgba(226, 232, 240, 0.9);
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.seo-cta {
|
||||||
|
border: none;
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: 10px 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
background: #38bdf8;
|
||||||
|
color: #0f172a;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sw-footer {
|
||||||
|
border-top: 1px solid rgba(59, 130, 246, 0.25);
|
||||||
|
background: rgba(2, 8, 23, 0.9);
|
||||||
|
padding: 24px 16px 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sw-footer-inner {
|
||||||
|
max-width: 1080px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sw-footer-brand {
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.18em;
|
||||||
|
font-size: 13px;
|
||||||
|
color: rgba(226, 232, 240, 0.85);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sw-footer-nav {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 14px;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sw-footer-nav a {
|
||||||
|
color: rgba(226, 232, 240, 0.9);
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sw-footer-nav a:hover {
|
||||||
|
color: #38bdf8;
|
||||||
|
}
|
||||||
|
|
||||||
/* Bouton Contacts flottant en bas à droite */
|
/* Bouton Contacts flottant en bas à droite */
|
||||||
.contacts-float-btn {
|
.contacts-float-btn {
|
||||||
|
|
|
||||||
|
|
@ -17,6 +17,104 @@
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.map-stage--placeholder{
|
||||||
|
display:flex;
|
||||||
|
align-items:center;
|
||||||
|
justify-content:center;
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at 20% 20%, rgba(56,189,248,0.2), transparent 45%),
|
||||||
|
radial-gradient(circle at 80% 30%, rgba(14,116,144,0.25), transparent 40%),
|
||||||
|
linear-gradient(135deg, rgba(2,6,23,0.9), rgba(6,14,36,0.95));
|
||||||
|
border: 1px solid rgba(56,189,248,0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-placeholder-content{
|
||||||
|
text-align:center;
|
||||||
|
padding: 16px 20px;
|
||||||
|
border-radius: 16px;
|
||||||
|
background: rgba(2, 6, 23, 0.5);
|
||||||
|
border: 1px solid rgba(148, 163, 184, 0.25);
|
||||||
|
color: #e2e8f0;
|
||||||
|
box-shadow: 0 14px 30px rgba(2,6,23,0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-placeholder-title{
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-placeholder-subtitle{
|
||||||
|
margin-top: 6px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: rgba(226, 232, 240, 0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-placeholder-overlay{
|
||||||
|
position:absolute;
|
||||||
|
display:flex;
|
||||||
|
gap: 10px;
|
||||||
|
z-index: 2;
|
||||||
|
opacity: 0.85;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-placeholder-top{
|
||||||
|
top: 16px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-placeholder-left{
|
||||||
|
left: 16px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-placeholder-right{
|
||||||
|
right: 16px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-placeholder-bottom{
|
||||||
|
left: 50%;
|
||||||
|
bottom: 18px;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-placeholder-pill{
|
||||||
|
width: 42px;
|
||||||
|
height: 42px;
|
||||||
|
border-radius: 14px;
|
||||||
|
background: linear-gradient(135deg, rgba(148,163,184,0.15), rgba(56,189,248,0.25));
|
||||||
|
border: 1px solid rgba(148, 163, 184, 0.25);
|
||||||
|
box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.4);
|
||||||
|
animation: map-skel-pulse 1.6s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-placeholder-pill--wide{
|
||||||
|
width: min(520px, calc(100vw - 72px));
|
||||||
|
height: 48px;
|
||||||
|
border-radius: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-placeholder-chip{
|
||||||
|
width: 84px;
|
||||||
|
height: 30px;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: linear-gradient(135deg, rgba(148,163,184,0.18), rgba(14,116,144,0.25));
|
||||||
|
border: 1px solid rgba(148, 163, 184, 0.25);
|
||||||
|
animation: map-skel-pulse 1.6s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes map-skel-pulse{
|
||||||
|
0%{ opacity: 0.5; }
|
||||||
|
50%{ opacity: 1; }
|
||||||
|
100%{ opacity: 0.6; }
|
||||||
|
}
|
||||||
|
|
||||||
/* Landscape: vh is small, reduce min height */
|
/* Landscape: vh is small, reduce min height */
|
||||||
@media (orientation: landscape){
|
@media (orientation: landscape){
|
||||||
:root{ --sw-below-overlap: 22px; }
|
:root{ --sw-below-overlap: 22px; }
|
||||||
|
|
|
||||||
|
|
@ -19,3 +19,23 @@ body[data-theme="light"] .post-pin--expanded .post-card {
|
||||||
border-color: rgba(148, 163, 184, 0.9);
|
border-color: rgba(148, 163, 184, 0.9);
|
||||||
color:#111827;
|
color:#111827;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body[data-theme="light"] .seo-card {
|
||||||
|
background: rgba(248, 250, 252, 0.98);
|
||||||
|
border-color: rgba(148, 163, 184, 0.7);
|
||||||
|
color: #111827;
|
||||||
|
}
|
||||||
|
|
||||||
|
body[data-theme="light"] .seo-card p {
|
||||||
|
color: rgba(30, 41, 59, 0.85);
|
||||||
|
}
|
||||||
|
|
||||||
|
body[data-theme="light"] .sw-footer {
|
||||||
|
background: rgba(226, 232, 240, 0.95);
|
||||||
|
border-top-color: rgba(148, 163, 184, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
body[data-theme="light"] .sw-footer-nav a,
|
||||||
|
body[data-theme="light"] .sw-footer-brand {
|
||||||
|
color: rgba(15, 23, 42, 0.8);
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue