From 3d786f4fd3d55ad232513c24725106a65591f8cf Mon Sep 17 00:00:00 2001 From: ION606 Date: Tue, 26 Aug 2025 13:07:23 -0400 Subject: [PATCH] added home page --- Caddyfile | 5 +- docker-compose.yml | 2 +- public/app.js | 22 +++- public/index.html | 55 ++++++---- public/links.js | 6 +- public/styles.css | 267 +++++++++++++++++++++++++++++++++++---------- 6 files changed, 268 insertions(+), 89 deletions(-) diff --git a/Caddyfile b/Caddyfile index 74d2937..7c4ad3a 100644 --- a/Caddyfile +++ b/Caddyfile @@ -39,6 +39,7 @@ http://{$FILES_DOMAIN}:8550 { reverse_proxy http://lufi:8081 } -http://{$HOMR_DOMAIN} { - respond "KFDJSLKFJSLKFJSLKFDJLKDS" 200 +http://{$HOME_DOMAIN}:8550 { + root * /var/www/share + file_server } diff --git a/docker-compose.yml b/docker-compose.yml index 79ace23..09cefcf 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -7,7 +7,7 @@ services: volumes: - ./Caddyfile:/etc/caddy/Caddyfile:ro,Z - caddy-data:/data - - ./public:/var/www/share + - ./public:/var/www/share:ro,Z environment: - PASTE_DOMAIN=${PASTE_DOMAIN} - FILES_DOMAIN=${FILES_DOMAIN} diff --git a/public/app.js b/public/app.js index 40589b0..d90d845 100644 --- a/public/app.js +++ b/public/app.js @@ -1,17 +1,27 @@ -import { privateNoteUrl, fileDropUrl, homeDomain } from "./links.js"; +import { privateNoteUrl, fileDropUrl, homeDomain, github } from "./links.js"; const yearEl = document.querySelector("#year"), - homeDomainEl = document.querySelector("#home-domain"), - noteLink = document.querySelector('[data-link="note"]'), - dropLink = document.querySelector('[data-link="drop"]'); + homeDomainEl = document.querySelector("#home-domain"), + noteLink = document.querySelector('[data-link="note"]'), + dropLink = document.querySelector('[data-link="drop"]'), + githubLink = document.querySelector('[data-link="github"]'); // set the current year if (yearEl) { yearEl.textContent = String(new Date().getFullYear()); } -// set home domain text -if (homeDomainEl) { homeDomainEl.textContent = homeDomain; } +// set home domain text and href +if (homeDomainEl) { + homeDomainEl.textContent = homeDomain.replace(/^https?:\/\//, ""); + homeDomainEl.setAttribute("href", homeDomain); + homeDomainEl.setAttribute("target", "_blank"); + homeDomainEl.setAttribute("rel", "noopener"); +} // wire up links from config if (noteLink) { noteLink.setAttribute("href", privateNoteUrl); } if (dropLink) { dropLink.setAttribute("href", fileDropUrl); } +if (githubLink) { + githubLink.setAttribute("href", github); + githubLink.textContent = github; +} diff --git a/public/index.html b/public/index.html index 3753773..26f0072 100644 --- a/public/index.html +++ b/public/index.html @@ -3,45 +3,60 @@ - ION606's sharing hub - + ION606 — Share Portal + -
-
-

ion606 hub

-

welcome to my privatenote and lufi instances!

+
+
+ +
+

ION606's Share Portal

+

Self‑hosted privacy tools: encrypted notes & secure file drops

+
+
-
-

quick links

-

pick a destination:

+
+

Private notes • Encrypted file drops

+

Quick links to your self‑hosted services. Nothing stored here — just shortcuts to PrivateBin (end‑to‑end encrypted notes) and LUFI (client‑side encrypted file sharing).

+ -

psst: bookmark this page at share.ion606.com for next time.

+ +

Bookmark this page at

-
-

what are these?

-
    -
  • privatenote is an end-to-end encrypted pastebin for sharing text or code snippets securely.
    • -
  • lufi lets you upload and share files; encryption happens before upload for extra privacy.
    • -
+
+
+

Why PrivateBin?

+

End‑to‑end encrypted pastes. Paste content is encrypted in your browser before upload — the server never sees plain text.

+
+ +
+

Why LUFI?

+

Client‑side encrypted file sharing with configurable expiry. Share large files securely without third‑party hosting.

+
+ +
+

Wanna self-host?

+

You can view the source code/instructions at

+
diff --git a/public/links.js b/public/links.js index 4591947..80dde79 100644 --- a/public/links.js +++ b/public/links.js @@ -1,4 +1,4 @@ export const privateNoteUrl = "https://bin.ion606.com", - fileDropUrl = "https://tfiles.ion606.com", - homeDomain = "share.ion606.com"; - + fileDropUrl = "https://tfiles.ion606.com", + homeDomain = "https://share.ion606.com", + github = "https://github.com/ION606/sharing"; diff --git a/public/styles.css b/public/styles.css index 4e68081..18cc9ec 100644 --- a/public/styles.css +++ b/public/styles.css @@ -1,91 +1,244 @@ :root { - --bg: #0b0f14; - --panel: #121821; - --text: #e6edf3; - --muted: #9fb0c0; - --accent: #7cc7ff; - --accent-2: #8ae3cf; - --btn-bg: #1a2330; - --btn-border: #2a374a; + --bg: #071019; + --panel: #0f1720; + --muted: #9fb0c0; + --text: #e6edf3; + --accent: #7cc7ff; + --accent-2: #8ae3cf; + --card-border: rgba(255, 255, 255, .04); + --radius: 12px; + --container-width: 980px; + font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial; } -* { box-sizing: border-box; } +* { + box-sizing: border-box +} -html, body { - margin: 0; - padding: 0; - background: radial-gradient(1000px 600px at 10% -10%, rgba(124,199,255,.12), transparent 60%), - radial-gradient(800px 500px at 110% 10%, rgba(138,227,207,.12), transparent 60%), var(--bg); - color: var(--text); - font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; - line-height: 1.6; +html, +body { + height: 100%; + margin: 0; + background: + radial-gradient(800px 500px at 10% -10%, rgba(124, 199, 255, .06), transparent 40%), + radial-gradient(700px 400px at 110% 10%, rgba(138, 227, 207, .04), transparent 40%), + var(--bg); + color: var(--text); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + line-height: 1.5; } .container { - max-width: 880px; - margin: 0 auto; - padding: 1.25rem; + max-width: var(--container-width); + margin: 0 auto; + padding: 1.25rem; } -.site-header { - padding: 2.5rem 0 1rem; - text-align: center; +.header-inner { + display: flex; + align-items: center; + justify-content: center; + padding: 2.25rem 0 1rem +} + +.brand-row { + display: flex; + gap: 1rem; + align-items: center +} + +.logo { + font-size: 2rem } .brand { - margin: 0 0 .5rem; - font-size: clamp(1.6rem, 3vw, 2rem); - letter-spacing: .2px; + margin: 0; + font-weight: 800; + font-size: clamp(1.4rem, 3vw, 1.9rem) } .tagline { - margin: 0; - color: var(--muted); + margin: 0; + color: var(--muted); + font-size: .95rem } .card { - background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); - border: 1px solid rgba(255,255,255,.08); - border-radius: 16px; - padding: 1.25rem; - margin: 1rem 0; - box-shadow: 0 10px 30px rgba(0,0,0,.25); + background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, .01)); + border: 1px solid var(--card-border); + border-radius: var(--radius); + padding: 1.25rem; + margin: 1rem 0; + box-shadow: 0 8px 24px rgba(0, 0, 0, .32); } -.card.info { color: var(--muted); } +.hero { + padding: 1.5rem +} + +.hero-title { + margin: .25rem 0 0; + font-size: 1.25rem +} + +.hero-lead { + color: var(--muted); + margin: .5rem 0 1rem +} .actions { - display: flex; - flex-wrap: wrap; - gap: .75rem; - margin: 1rem 0 0; + display: flex; + flex-wrap: wrap; + margin: 2em; + justify-content: space-evenly; + width: 90%; } .btn { - display: inline-block; - padding: .9rem 1.1rem; - border-radius: 12px; - background: var(--btn-bg); - border: 1px solid var(--btn-border); - color: var(--text); - text-decoration: none; - font-weight: 600; - transition: transform .06s ease, background .2s ease, border-color .2s ease; + display: inline-block; + padding: .85rem 1.1rem; + border-radius: 10px; + text-decoration: none; + font-weight: 700; + color: var(--text); + background: var(--panel); + border: 1px solid rgba(255, 255, 255, .06) } -.btn:hover { transform: translateY(-1px); } -.btn:active { transform: translateY(0); } +/* contrast style for the "Open LUFI (file drop)" button */ +[data-link="drop"] { + background: linear-gradient(90deg, rgba(4, 32, 42, 1), rgba(7, 17, 22, 1)); + color: var(--accent-2); + border: 1px solid rgba(138, 227, 207, .22); + box-shadow: inset 0 -2px 8px rgba(0, 0, 0, .45), 0 6px 20px rgba(7, 12, 15, .6); + backdrop-filter: blur(6px); + transition: transform .12s ease, box-shadow .12s ease, background .12s ease; +} -.btn.secondary { background: #101723; } +[data-link="drop"]:hover { + transform: translateY(-3px); + box-shadow: inset 0 -2px 10px rgba(0, 0, 0, .5), 0 10px 30px rgba(7, 12, 15, .6); + background: linear-gradient(90deg, rgba(12, 56, 64, 1), rgba(10, 34, 40, 1)); +} -.hint { color: var(--muted); font-size: .95rem; } +[data-link="drop"]:active { + transform: translateY(0); + box-shadow: inset 0 -1px 6px rgba(0, 0, 0, .5), 0 4px 12px rgba(7, 12, 15, .5); +} -.bullets { padding-left: 1.1rem; } +/* PrivateBin (notes) */ +[data-link="note"] { + background: linear-gradient(90deg, var(--accent), var(--accent-2)); + color: #04202a; + border: none; + box-shadow: 0 6px 18px rgba(124, 199, 255, .08); + transition: transform .12s ease, box-shadow .12s ease, background .12s ease; +} + +[data-link="note"]:hover { + transform: translateY(-3px); + box-shadow: 0 10px 30px rgba(124, 199, 255, .12); + background: linear-gradient(90deg, rgba(124, 199, 255, .98), rgba(138, 227, 207, .92)); +} + +[data-link="note"]:active { + transform: translateY(0); + box-shadow: 0 4px 12px rgba(124, 199, 255, .08); +} + +.hint { + color: var(--muted); + margin-top: 1rem; + font-size: .95rem +} + +.hint a { + color: var(--accent); + text-decoration: none +} + +.cards-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + gap: 1rem; + margin-top: 1rem +} + +.feature h3 { + margin: 0 0 .5rem +} + +.feature p { + margin: 0; + color: var(--muted) +} .site-footer { - text-align: center; - padding: 2rem 0 3rem; - color: var(--muted); - font-size: .95rem; + padding: 2rem 0 3rem; + color: var(--muted); + font-size: .95rem; + text-align: center } +.footer-inner { + display: flex; + justify-content: center +} + +/* GitHub link (inline, subtle CTA) */ +[data-link="github"] { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.45rem 0.75rem; + border-radius: 10px; + text-decoration: none; + font-weight: 700; + font-size: 0.95rem; + color: var(--muted); + background: transparent; + border: 1px solid rgba(255, 255, 255, .03); + transition: background .12s ease, color .12s ease, transform .12s ease, box-shadow .12s ease, border-color .12s ease; +} + +[data-link="github"]::before { + content: "🐙"; + display: inline-block; + font-size: 1rem; + line-height: 1; + transform: translateY(-1px); +} + +[data-link="github"]:hover { + background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, .01)); + color: var(--text); + border-color: rgba(255, 255, 255, .06); + transform: translateY(-3px); + box-shadow: 0 8px 24px rgba(0, 0, 0, .32); +} + +[data-link="github"]:active { + transform: translateY(0); + box-shadow: 0 4px 12px rgba(0, 0, 0, .2); +} + +/* small screens */ +@media (max-width:520px) { + .brand { + font-size: 1.25rem + } + + .logo { + font-size: 1.6rem + } + + .actions { + flex-direction: column + } + + .btn { + width: 100%; + text-align: center + } +} \ No newline at end of file