feat(web): add SEO landing page
This commit is contained in:
Hakan Seven
parent
c22f6cde60
commit
c465bcf624
14 changed files with 673 additions and 80 deletions
15
.github/workflows/pages.yml
vendored
15
.github/workflows/pages.yml
vendored
|
|
@ -51,7 +51,10 @@ jobs:
|
|||
tool: wasm-bindgen@${{ steps.wasm-bindgen-version.outputs.version }}
|
||||
|
||||
- name: Build web bundle
|
||||
run: trunk build --release --public-url /
|
||||
run: trunk build --release --public-url /app/ --dist dist/app --html-output index.html web-app.html
|
||||
|
||||
- name: Assemble landing page
|
||||
run: sh scripts/assemble-site.sh
|
||||
|
||||
# GitHub Pages runs Jekyll, which ignores files; opt out so the
|
||||
# wasm-bindgen output is served verbatim.
|
||||
|
|
@ -74,7 +77,7 @@ jobs:
|
|||
from decimal import Decimal, ROUND_HALF_UP
|
||||
from pathlib import Path
|
||||
|
||||
output = Path("dist/supporters.json")
|
||||
output = Path("dist/app/supporters.json")
|
||||
token = os.environ.get("OCS_PATREON_TOKEN", "")
|
||||
if not token:
|
||||
output.write_text("[]\n", encoding="utf-8")
|
||||
|
|
@ -196,8 +199,8 @@ jobs:
|
|||
|
||||
playlist = "https://youtube.com/playlist?list=PLZq_TEkIFh9bAnoOX1HiCAunm3anZDBOl"
|
||||
fallback = Path("web/videos.json")
|
||||
output = Path("dist/videos.json")
|
||||
thumbs = Path("dist/video_thumbs")
|
||||
output = Path("dist/app/videos.json")
|
||||
thumbs = Path("dist/app/video_thumbs")
|
||||
thumbs.mkdir(parents=True, exist_ok=True)
|
||||
request_headers = {"User-Agent": "Mozilla/5.0"}
|
||||
|
||||
|
|
@ -294,8 +297,8 @@ jobs:
|
|||
updated_at: .updatedAt,
|
||||
pinned
|
||||
})' \
|
||||
> dist/discussions.json
|
||||
echo "discussions: $(jq 'length' dist/discussions.json)"
|
||||
> dist/app/discussions.json
|
||||
echo "discussions: $(jq 'length' dist/app/discussions.json)"
|
||||
|
||||
- uses: actions/upload-pages-artifact@v3
|
||||
with:
|
||||
|
|
|
|||
|
|
@ -7,7 +7,10 @@
|
|||
# cargo install trunk wasm-bindgen-cli
|
||||
|
||||
[build]
|
||||
target = "index.html"
|
||||
target = "web-app.html"
|
||||
dist = "dist/app"
|
||||
public_url = "/app/"
|
||||
html_output = "index.html"
|
||||
# The crate has no Cargo features: the geometry kernel is pure Rust and
|
||||
# cross-compiles to wasm, so the web build gets the same solid modelling the
|
||||
# native one does.
|
||||
|
|
|
|||
|
|
@ -98,7 +98,8 @@ folder and load again on the next desktop launch.
|
|||
## Build & deploy
|
||||
|
||||
- Native: `cargo build --release --bin OpenCADStudio`.
|
||||
- Web: `trunk build --release --public-url /OpenCADStudio/`.
|
||||
- Web app: `trunk build --release --public-url /app/ --dist dist/app --html-output index.html web-app.html`.
|
||||
Run `sh scripts/assemble-site.sh` afterward to add the landing page.
|
||||
`.github/workflows/pages.yml` builds and deploys to GitHub Pages on every
|
||||
release. No COOP/COEP headers are needed because the web build is
|
||||
single-threaded.
|
||||
|
|
|
|||
388
index.html
388
index.html
|
|
@ -1,80 +1,330 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Open CAD Studio</title>
|
||||
<link data-trunk rel="icon" href="assets/logo.svg" />
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #1e1e1e; }
|
||||
canvas { display: block; }
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Open CAD Studio — Open-Source DWG & DXF CAD</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Open-source CAD for native DWG and DXF editing, precise 2D drafting, layouts and kernel-backed 3D modeling. Use it on the web or download it for desktop."
|
||||
/>
|
||||
<meta name="robots" content="index, follow, max-image-preview:large" />
|
||||
<meta name="theme-color" content="#0b1016" />
|
||||
<meta name="color-scheme" content="dark" />
|
||||
<link rel="canonical" href="https://www.opencadstudio.com/" />
|
||||
<link rel="icon" href="/assets/logo.svg" type="image/svg+xml" />
|
||||
<link rel="manifest" href="/site.webmanifest" />
|
||||
<link rel="stylesheet" href="/site.css" />
|
||||
<link rel="preload" as="image" href="/assets/workspace.png" fetchpriority="high" />
|
||||
|
||||
/* Splash shown while the wasm bundle downloads and initializes. Removed
|
||||
once the app's canvas appears (see the observer script below). */
|
||||
#loading {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 22px;
|
||||
background: #1e1e1e;
|
||||
color: #cfcfcf;
|
||||
font-family: system-ui, sans-serif;
|
||||
z-index: 9999;
|
||||
transition: opacity 0.4s ease;
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:site_name" content="Open CAD Studio" />
|
||||
<meta property="og:title" content="Open CAD Studio — Open-Source DWG & DXF CAD" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Technical drawing and solid modeling for desktop and web, built in Rust and open to everyone."
|
||||
/>
|
||||
<meta property="og:url" content="https://www.opencadstudio.com/" />
|
||||
<meta property="og:image" content="https://www.opencadstudio.com/og.png" />
|
||||
<meta property="og:image:alt" content="Open CAD Studio technical drawing and 3D modeling" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="Open CAD Studio — Open-Source DWG & DXF CAD" />
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content="Native DWG and DXF editing, precise 2D drafting and kernel-backed 3D modeling."
|
||||
/>
|
||||
<meta name="twitter:image" content="https://www.opencadstudio.com/og.png" />
|
||||
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@graph": [
|
||||
{
|
||||
"@type": "WebSite",
|
||||
"@id": "https://www.opencadstudio.com/#website",
|
||||
"url": "https://www.opencadstudio.com/",
|
||||
"name": "Open CAD Studio",
|
||||
"alternateName": "OCS",
|
||||
"description": "Open-source 2D drafting and 3D modeling for desktop and web."
|
||||
},
|
||||
{
|
||||
"@type": "SoftwareApplication",
|
||||
"@id": "https://www.opencadstudio.com/#software",
|
||||
"name": "Open CAD Studio",
|
||||
"url": "https://www.opencadstudio.com/",
|
||||
"downloadUrl": "https://github.com/HakanSeven12/OpenCADStudio/releases/latest",
|
||||
"installUrl": "https://www.opencadstudio.com/app/",
|
||||
"applicationCategory": "DesignApplication",
|
||||
"operatingSystem": "Windows, Linux, macOS, Web",
|
||||
"isAccessibleForFree": true,
|
||||
"license": "https://www.gnu.org/licenses/gpl-3.0.html",
|
||||
"codeRepository": "https://github.com/HakanSeven12/OpenCADStudio",
|
||||
"description": "Open-source CAD for DWG and DXF editing, 2D drafting, layouts and 3D solid modeling.",
|
||||
"featureList": [
|
||||
"Native DWG and DXF read and write",
|
||||
"Precise 2D drafting and documentation",
|
||||
"Model space, paper space and viewports",
|
||||
"Kernel-backed 3D solid modeling",
|
||||
"Browser and desktop editions"
|
||||
],
|
||||
"offers": {
|
||||
"@type": "Offer",
|
||||
"price": "0",
|
||||
"priceCurrency": "USD"
|
||||
}
|
||||
#loading.hide { opacity: 0; pointer-events: none; }
|
||||
#loading .title { font-size: 22px; font-weight: 600; letter-spacing: 0.5px; }
|
||||
#loading .title span { color: #3399e6; }
|
||||
#loading .sub { font-size: 12px; color: #777; }
|
||||
#loading .spinner {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
border: 4px solid #2e2e2e;
|
||||
border-top-color: #3399e6;
|
||||
border-radius: 50%;
|
||||
animation: ocs-spin 0.9s linear infinite;
|
||||
}
|
||||
@keyframes ocs-spin { to { transform: rotate(360deg); } }
|
||||
</style>
|
||||
<!-- Trunk builds the wasm32 binary. The crate has no Cargo features:
|
||||
the geometry kernel is pure Rust, so the web build gets the same
|
||||
solid modelling the native one does. See issue #45. -->
|
||||
<link data-trunk rel="rust" data-bin="OpenCADStudio" />
|
||||
<!-- Per-script Noto subsets, fetched lazily at runtime (one alphabet per
|
||||
file) so CAD text renders non-Latin scripts on the web. (#141) -->
|
||||
<link data-trunk rel="copy-dir" href="web/fonts" />
|
||||
<link data-trunk rel="copy-file" href="web/ocs-parse-worker.js" />
|
||||
<link data-trunk rel="copy-file" href="web/discussions.json" />
|
||||
<link data-trunk rel="copy-file" href="web/videos.json" />
|
||||
]
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="loading">
|
||||
<div class="spinner"></div>
|
||||
<div class="title">Open <span>CAD</span> Studio</div>
|
||||
<div class="sub">Loading…</div>
|
||||
<a class="skip-link" href="#main">Skip to content</a>
|
||||
|
||||
<header class="site-header">
|
||||
<div class="shell nav-shell">
|
||||
<a class="brand" href="/" aria-label="Open CAD Studio home">
|
||||
<img src="/assets/logo.svg" width="38" height="38" alt="" />
|
||||
<span>Open <strong>CAD</strong> Studio</span>
|
||||
</a>
|
||||
<nav aria-label="Primary navigation">
|
||||
<a href="#capabilities">Capabilities</a>
|
||||
<a href="#desktop">Desktop</a>
|
||||
<a href="#formats">Formats</a>
|
||||
<a href="https://github.com/HakanSeven12/OpenCADStudio">GitHub</a>
|
||||
</nav>
|
||||
<a class="button button-small" href="/app/">Launch web app <span aria-hidden="true">↗</span></a>
|
||||
</div>
|
||||
<script>
|
||||
// The app mounts a <canvas> into <body> when it's ready. Watch for it and
|
||||
// fade the splash out.
|
||||
(function () {
|
||||
const splash = document.getElementById("loading");
|
||||
const done = () => {
|
||||
if (!splash) return;
|
||||
splash.classList.add("hide");
|
||||
setTimeout(() => splash.remove(), 450);
|
||||
};
|
||||
if (document.querySelector("canvas")) return done();
|
||||
const obs = new MutationObserver(() => {
|
||||
if (document.querySelector("canvas")) {
|
||||
obs.disconnect();
|
||||
done();
|
||||
}
|
||||
});
|
||||
obs.observe(document.body, { childList: true, subtree: true });
|
||||
})();
|
||||
</script>
|
||||
</header>
|
||||
|
||||
<main id="main">
|
||||
<section class="hero shell">
|
||||
<div class="hero-copy">
|
||||
<p class="eyebrow"><span></span> Open-source CAD · Desktop + Web</p>
|
||||
<h1>Native DWG & DXF.<br /><em>One open CAD studio.</em></h1>
|
||||
<p class="hero-lead">
|
||||
Create technical drawings, layouts and 3D models with a shared Rust core.
|
||||
Start in your browser or install the desktop app for your full production workflow.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a class="button" href="/app/">Launch web app <span aria-hidden="true">↗</span></a>
|
||||
<a class="button button-quiet" href="https://github.com/HakanSeven12/OpenCADStudio/releases/latest">
|
||||
Download desktop
|
||||
</a>
|
||||
</div>
|
||||
<ul class="hero-notes" aria-label="Project highlights">
|
||||
<li>GPL-3.0 licensed</li>
|
||||
<li>Windows · Linux · macOS</li>
|
||||
<li>19 interface languages</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="hero-visual" aria-label="Open CAD Studio workspace preview">
|
||||
<div class="visual-toolbar" aria-hidden="true">
|
||||
<span class="window-mark"><i></i><i></i><i></i></span>
|
||||
<span>technical-plan.dwg</span>
|
||||
<b>2D</b>
|
||||
</div>
|
||||
<img
|
||||
src="/assets/workspace.png"
|
||||
width="1920"
|
||||
height="940"
|
||||
alt="A detailed DWG technical plan open in the Open CAD Studio workspace"
|
||||
fetchpriority="high"
|
||||
/>
|
||||
<div class="visual-badge"><strong>DWG</strong><span>Native editing</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="signal-strip" aria-label="Key capabilities">
|
||||
<div class="shell signal-grid">
|
||||
<div><strong>DWG + DXF</strong><span>Read and write</span></div>
|
||||
<div><strong>2D + 3D</strong><span>One workspace</span></div>
|
||||
<div><strong>GPU</strong><span>Accelerated viewport</span></div>
|
||||
<div><strong>Rust</strong><span>Shared editing core</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section shell" id="capabilities">
|
||||
<div class="section-heading">
|
||||
<p class="eyebrow"><span></span> Built for real drawing work</p>
|
||||
<h2>From the first line to the final layout.</h2>
|
||||
<p>One focused environment for drafting, documentation and solid modeling.</p>
|
||||
</div>
|
||||
|
||||
<div class="capability-grid">
|
||||
<article class="capability-card capability-wide">
|
||||
<div class="card-index">01</div>
|
||||
<div>
|
||||
<p class="card-kicker">Precise drafting</p>
|
||||
<h3>Draw with intent.</h3>
|
||||
<p>
|
||||
Lines, polylines, curves, splines, hatches, object snaps, tracking,
|
||||
layers, blocks and external references stay close at hand.
|
||||
</p>
|
||||
</div>
|
||||
<div class="drafting-mark" aria-hidden="true">
|
||||
<span class="axis axis-x"></span><span class="axis axis-y"></span>
|
||||
<span class="arc"></span><i></i><b></b>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="capability-card">
|
||||
<div class="card-index">02</div>
|
||||
<p class="card-kicker">Documentation</p>
|
||||
<h3>Layouts that communicate.</h3>
|
||||
<p>
|
||||
Text, dimensions, leaders, tolerances, tables, paper space, viewports
|
||||
and plot styles turn geometry into deliverables.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="capability-card card-accent">
|
||||
<div class="card-index">03</div>
|
||||
<p class="card-kicker">Open workflow</p>
|
||||
<h3>Your drawings stay yours.</h3>
|
||||
<p>
|
||||
Work with native files, inspect the source and choose the browser or
|
||||
desktop workflow that fits the job.
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section model-section">
|
||||
<div class="shell model-grid">
|
||||
<div class="model-copy">
|
||||
<p class="eyebrow"><span></span> Kernel-backed 3D</p>
|
||||
<h2>Solid modeling, not a visual shortcut.</h2>
|
||||
<p>
|
||||
Build primitives and shape them with extrusion, revolution, sweep,
|
||||
loft and Boolean operations. The geometry kernel resolves the model;
|
||||
the GPU viewport keeps it responsive.
|
||||
</p>
|
||||
<ul class="check-list">
|
||||
<li>Orthographic and perspective cameras</li>
|
||||
<li>ACIS entity tessellation</li>
|
||||
<li>OBJ import and mesh export workflows</li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="model-frame">
|
||||
<img
|
||||
src="/assets/modeling.png"
|
||||
width="1920"
|
||||
height="940"
|
||||
alt="A 3D mechanical model shown in two Open CAD Studio viewports"
|
||||
loading="lazy"
|
||||
/>
|
||||
<figcaption><span>Model space</span><strong>Kernel → Tessellation → GPU</strong></figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section shell" id="desktop">
|
||||
<div class="section-heading compact">
|
||||
<p class="eyebrow"><span></span> One core, two ways to work</p>
|
||||
<h2>Start instantly. Scale up when you need to.</h2>
|
||||
</div>
|
||||
|
||||
<div class="edition-grid">
|
||||
<article class="edition-card edition-primary">
|
||||
<div class="edition-label">Web</div>
|
||||
<h3>Open a drawing in your browser.</h3>
|
||||
<p>
|
||||
No installation. Select a drawing from your device, edit with the
|
||||
shared core and save the result as a local download.
|
||||
</p>
|
||||
<a class="text-link" href="/app/">Launch the web app <span aria-hidden="true">↗</span></a>
|
||||
</article>
|
||||
<article class="edition-card">
|
||||
<div class="edition-label">Desktop</div>
|
||||
<h3>Connect the full production workflow.</h3>
|
||||
<p>
|
||||
Add native file associations, thumbnails, system printing, PDF output,
|
||||
external plugins, scripts and headless automation.
|
||||
</p>
|
||||
<a class="text-link" href="https://github.com/HakanSeven12/OpenCADStudio/releases/latest">
|
||||
Download the latest release <span aria-hidden="true">↗</span>
|
||||
</a>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section formats-section" id="formats">
|
||||
<div class="shell formats-grid">
|
||||
<div>
|
||||
<p class="eyebrow"><span></span> File workflows</p>
|
||||
<h2>Meet drawings where they are.</h2>
|
||||
<p>
|
||||
Native drawing formats, recovery files, survey data, meshes, plots
|
||||
and property exports fit into a practical project workflow.
|
||||
</p>
|
||||
</div>
|
||||
<div class="format-list" aria-label="Supported file workflows">
|
||||
<div><strong>DWG</strong><span>Read · Write · R14–2018 targets</span></div>
|
||||
<div><strong>DXF</strong><span>Read · Write · R14–2018 targets</span></div>
|
||||
<div><strong>BAK / SV$</strong><span>Drawing recovery</span></div>
|
||||
<div><strong>OBJ / STL</strong><span>Mesh import and export</span></div>
|
||||
<div><strong>PDF</strong><span>Desktop plotting</span></div>
|
||||
<div><strong>CSV</strong><span>Property extraction</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section shell faq-section">
|
||||
<div class="section-heading compact">
|
||||
<p class="eyebrow"><span></span> Common questions</p>
|
||||
<h2>Before you open your first drawing.</h2>
|
||||
</div>
|
||||
<div class="faq-grid">
|
||||
<details>
|
||||
<summary>Is Open CAD Studio free?</summary>
|
||||
<p>Yes. The project is open source and distributed under the GPL-3.0 license.</p>
|
||||
</details>
|
||||
<details>
|
||||
<summary>Can I use it without installing anything?</summary>
|
||||
<p>Yes. The web app runs in a modern browser and saves edited drawings as local downloads.</p>
|
||||
</details>
|
||||
<details>
|
||||
<summary>Which desktop platforms are supported?</summary>
|
||||
<p>Release packages are available for Windows, Linux and Apple Silicon macOS.</p>
|
||||
</details>
|
||||
<details>
|
||||
<summary>Is the project ready for critical production files?</summary>
|
||||
<p>The project is under active development. Keep backups and report reproducible problems on GitHub.</p>
|
||||
</details>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section shell community-cta">
|
||||
<div>
|
||||
<p class="eyebrow"><span></span> Built in the open</p>
|
||||
<h2>Use it. Inspect it. Help shape it.</h2>
|
||||
<p>
|
||||
Follow development, report reproducible issues, contribute code or
|
||||
support the work that keeps an independent CAD project moving.
|
||||
</p>
|
||||
</div>
|
||||
<div class="cta-links">
|
||||
<a class="button" href="https://github.com/HakanSeven12/OpenCADStudio">View on GitHub</a>
|
||||
<a class="button button-quiet" href="https://github.com/sponsors/HakanSeven12">Sponsor development</a>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="shell footer-grid">
|
||||
<div class="brand footer-brand">
|
||||
<img src="/assets/logo.svg" width="34" height="34" alt="" />
|
||||
<span>Open <strong>CAD</strong> Studio</span>
|
||||
</div>
|
||||
<p>Open-source technical drawing and solid modeling.</p>
|
||||
<nav aria-label="Footer navigation">
|
||||
<a href="/app/">Web app</a>
|
||||
<a href="https://github.com/HakanSeven12/OpenCADStudio/releases/latest">Downloads</a>
|
||||
<a href="https://github.com/HakanSeven12/OpenCADStudio/discussions">Discussions</a>
|
||||
<a href="https://github.com/HakanSeven12/OpenCADStudio/blob/main/LICENSE">GPL-3.0</a>
|
||||
</nav>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
17
scripts/assemble-site.sh
Normal file
17
scripts/assemble-site.sh
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
#!/bin/sh
|
||||
set -eu
|
||||
|
||||
output="${1:-dist}"
|
||||
test -f "$output/app/index.html"
|
||||
mkdir -p "$output/assets"
|
||||
|
||||
install -m 0644 index.html "$output/index.html"
|
||||
install -m 0644 site/site.css "$output/site.css"
|
||||
install -m 0644 site/robots.txt "$output/robots.txt"
|
||||
install -m 0644 site/sitemap.xml "$output/sitemap.xml"
|
||||
install -m 0644 site/site.webmanifest "$output/site.webmanifest"
|
||||
install -m 0644 site/CNAME "$output/CNAME"
|
||||
install -m 0644 site/og.png "$output/og.png"
|
||||
install -m 0644 site/workspace.png "$output/assets/workspace.png"
|
||||
install -m 0644 site/modeling.png "$output/assets/modeling.png"
|
||||
install -m 0644 assets/logo.svg "$output/assets/logo.svg"
|
||||
1
site/CNAME
Normal file
1
site/CNAME
Normal file
|
|
@ -0,0 +1 @@
|
|||
www.opencadstudio.com
|
||||
BIN
site/modeling.png
Normal file
BIN
site/modeling.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
BIN
site/og.png
Normal file
BIN
site/og.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
4
site/robots.txt
Normal file
4
site/robots.txt
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
User-agent: *
|
||||
Allow: /
|
||||
|
||||
Sitemap: https://www.opencadstudio.com/sitemap.xml
|
||||
210
site/site.css
Normal file
210
site/site.css
Normal file
|
|
@ -0,0 +1,210 @@
|
|||
:root {
|
||||
--ink: #f5f7fa;
|
||||
--muted: #9aa8b6;
|
||||
--quiet: #71808f;
|
||||
--page: #0b1016;
|
||||
--panel: #111923;
|
||||
--panel-2: #16212d;
|
||||
--line: rgba(178, 211, 233, 0.14);
|
||||
--line-strong: rgba(178, 211, 233, 0.24);
|
||||
--cyan: #59c3ff;
|
||||
--red: #b03020;
|
||||
--shell: min(1180px, calc(100% - 40px));
|
||||
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
color: var(--ink);
|
||||
background: var(--page);
|
||||
font-synthesis: none;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
html { scroll-behavior: smooth; }
|
||||
body { margin: 0; min-width: 320px; background: var(--page); color: var(--ink); }
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
background:
|
||||
linear-gradient(rgba(89, 195, 255, 0.025) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(89, 195, 255, 0.025) 1px, transparent 1px);
|
||||
background-size: 48px 48px;
|
||||
mask-image: linear-gradient(to bottom, black, transparent 82%);
|
||||
}
|
||||
|
||||
a { color: inherit; text-decoration: none; }
|
||||
img { display: block; max-width: 100%; }
|
||||
.shell { width: var(--shell); margin-inline: auto; }
|
||||
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--cyan); color: #05101a; }
|
||||
.skip-link:focus { top: 16px; }
|
||||
|
||||
.site-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
border-bottom: 1px solid var(--line);
|
||||
background: rgba(11, 16, 22, 0.86);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
.nav-shell { min-height: 74px; display: flex; align-items: center; gap: 30px; }
|
||||
.brand { display: inline-flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 630; letter-spacing: -0.02em; white-space: nowrap; }
|
||||
.brand img { border-radius: 8px; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
|
||||
.brand strong { color: var(--cyan); }
|
||||
.nav-shell nav { display: flex; align-items: center; gap: 28px; margin-left: auto; color: var(--muted); font-size: 14px; }
|
||||
.nav-shell nav a, .site-footer nav a { transition: color .2s ease; }
|
||||
.nav-shell nav a:hover, .site-footer nav a:hover { color: var(--ink); }
|
||||
|
||||
.button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
min-height: 50px;
|
||||
padding: 0 20px;
|
||||
border: 1px solid var(--cyan);
|
||||
border-radius: 6px;
|
||||
background: var(--cyan);
|
||||
color: #06121c;
|
||||
font-size: 14px;
|
||||
font-weight: 750;
|
||||
letter-spacing: .01em;
|
||||
transition: transform .2s ease, background .2s ease, border-color .2s ease;
|
||||
}
|
||||
.button:hover { transform: translateY(-2px); background: #84d3ff; border-color: #84d3ff; }
|
||||
.button-small { min-height: 40px; padding-inline: 15px; font-size: 13px; }
|
||||
.button-quiet { border-color: var(--line-strong); background: rgba(255,255,255,.025); color: var(--ink); }
|
||||
.button-quiet:hover { background: var(--panel-2); border-color: rgba(89,195,255,.5); }
|
||||
|
||||
.hero { display: grid; grid-template-columns: .86fr 1.14fr; gap: 64px; align-items: center; min-height: 720px; padding-block: 92px 78px; }
|
||||
.hero-copy { position: relative; z-index: 2; }
|
||||
.eyebrow { display: flex; align-items: center; gap: 11px; margin: 0 0 22px; color: var(--cyan); font-size: 12px; font-weight: 760; letter-spacing: .14em; text-transform: uppercase; }
|
||||
.eyebrow span { width: 28px; height: 1px; background: var(--cyan); }
|
||||
h1, h2, h3, p { margin-top: 0; }
|
||||
h1 { margin-bottom: 26px; font-size: clamp(48px, 5.15vw, 76px); line-height: .99; letter-spacing: -.055em; font-weight: 720; }
|
||||
h1 em { color: var(--cyan); font-style: normal; }
|
||||
.hero-lead { max-width: 650px; margin-bottom: 32px; color: var(--muted); font-size: 18px; line-height: 1.72; }
|
||||
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
|
||||
.hero-notes { display: flex; flex-wrap: wrap; gap: 14px 26px; margin: 0; padding: 0; list-style: none; color: var(--quiet); font-size: 12px; }
|
||||
.hero-notes li { position: relative; }
|
||||
.hero-notes li:not(:first-child)::before { content: ""; position: absolute; left: -14px; top: 6px; width: 3px; height: 3px; border-radius: 50%; background: var(--cyan); }
|
||||
|
||||
.hero-visual { position: relative; border: 1px solid var(--line-strong); border-radius: 10px; background: #101820; box-shadow: 0 36px 90px rgba(0,0,0,.42); transform: perspective(1400px) rotateY(-4deg) rotateX(1deg); transform-origin: left center; }
|
||||
.hero-visual::before { content: ""; position: absolute; inset: -36px; z-index: -1; background: radial-gradient(circle at 60% 45%, rgba(36,174,247,.18), transparent 68%); filter: blur(22px); }
|
||||
.hero-visual img { width: 100%; aspect-ratio: 1.88 / 1; object-fit: cover; object-position: center; border-radius: 0 0 9px 9px; }
|
||||
.visual-toolbar { display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 14px; color: var(--quiet); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
|
||||
.visual-toolbar b { margin-left: auto; color: var(--cyan); font-weight: 700; }
|
||||
.window-mark { display: flex; gap: 5px; }
|
||||
.window-mark i { width: 6px; height: 6px; border-radius: 50%; background: #314150; }
|
||||
.window-mark i:first-child { background: var(--red); }
|
||||
.visual-badge { position: absolute; right: -18px; bottom: -22px; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border: 1px solid rgba(89,195,255,.34); border-radius: 7px; background: rgba(11,16,22,.96); box-shadow: 0 18px 42px rgba(0,0,0,.35); }
|
||||
.visual-badge strong { display: grid; place-items: center; width: 40px; height: 32px; border-radius: 4px; background: var(--cyan); color: #07121b; font-size: 11px; }
|
||||
.visual-badge span { color: var(--muted); font-size: 12px; }
|
||||
|
||||
.signal-strip { border-block: 1px solid var(--line); background: rgba(17,25,35,.74); }
|
||||
.signal-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
|
||||
.signal-grid div { display: flex; flex-direction: column; gap: 4px; padding: 23px 28px; border-left: 1px solid var(--line); }
|
||||
.signal-grid div:last-child { border-right: 1px solid var(--line); }
|
||||
.signal-grid strong { font: 700 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); letter-spacing: .06em; }
|
||||
.signal-grid span { color: var(--quiet); font-size: 12px; }
|
||||
|
||||
.section { padding-block: 118px; }
|
||||
.section-heading { max-width: 720px; margin-bottom: 54px; }
|
||||
.section-heading.compact { max-width: 800px; }
|
||||
h2 { margin-bottom: 20px; font-size: clamp(38px, 4.4vw, 60px); line-height: 1.04; letter-spacing: -.045em; font-weight: 680; }
|
||||
.section-heading > p:last-child, .formats-grid > div > p:last-child, .model-copy > p { max-width: 640px; color: var(--muted); font-size: 17px; line-height: 1.7; }
|
||||
|
||||
.capability-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
||||
.capability-card { position: relative; min-height: 340px; padding: 34px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(145deg, rgba(22,33,45,.9), rgba(14,21,29,.9)); }
|
||||
.capability-wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr .8fr; align-items: center; min-height: 410px; }
|
||||
.capability-card h3, .edition-card h3 { max-width: 560px; margin-bottom: 18px; font-size: clamp(28px, 3vw, 42px); line-height: 1.08; letter-spacing: -.035em; }
|
||||
.capability-card p:not(.card-kicker) { max-width: 570px; color: var(--muted); font-size: 15px; line-height: 1.72; }
|
||||
.card-index { position: absolute; top: 25px; right: 28px; color: rgba(89,195,255,.42); font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
|
||||
.card-kicker, .edition-label { margin-bottom: 20px; color: var(--cyan); font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .13em; text-transform: uppercase; }
|
||||
.card-accent { background: linear-gradient(145deg, rgba(19,46,62,.92), rgba(11,22,30,.92)); }
|
||||
.drafting-mark { position: relative; width: min(310px, 80%); aspect-ratio: 1; justify-self: center; border: 1px solid rgba(89,195,255,.18); border-radius: 50%; }
|
||||
.drafting-mark .axis { position: absolute; background: rgba(89,195,255,.25); }
|
||||
.drafting-mark .axis-x { left: -15%; right: -15%; top: 50%; height: 1px; }
|
||||
.drafting-mark .axis-y { top: -15%; bottom: -15%; left: 50%; width: 1px; }
|
||||
.drafting-mark .arc { position: absolute; inset: 20%; border: 2px solid var(--cyan); border-left-color: transparent; border-radius: 50%; transform: rotate(-28deg); }
|
||||
.drafting-mark i, .drafting-mark b { position: absolute; width: 9px; height: 9px; border: 2px solid var(--ink); border-radius: 50%; background: var(--panel); }
|
||||
.drafting-mark i { left: 25%; bottom: 18%; }.drafting-mark b { right: 16%; top: 30%; }
|
||||
|
||||
.model-section { border-block: 1px solid var(--line); background: #0e151d; }
|
||||
.model-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 70px; align-items: center; }
|
||||
.model-copy h2 { max-width: 580px; }
|
||||
.check-list { display: grid; gap: 13px; margin: 30px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 14px; }
|
||||
.check-list li::before { content: "+"; display: inline-block; width: 24px; color: var(--cyan); font-family: ui-monospace, monospace; }
|
||||
.model-frame { margin: 0; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 8px; background: #13191f; }
|
||||
.model-frame img { aspect-ratio: 1.88 / 1; object-fit: cover; }
|
||||
.model-frame figcaption { display: flex; justify-content: space-between; gap: 20px; padding: 14px 17px; border-top: 1px solid var(--line); color: var(--quiet); font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
|
||||
.model-frame figcaption strong { color: var(--cyan); font-weight: 550; }
|
||||
|
||||
.edition-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
||||
.edition-card { min-height: 390px; padding: 38px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
|
||||
.edition-primary { border-color: rgba(89,195,255,.36); background: linear-gradient(145deg, rgba(19,52,69,.85), rgba(13,24,33,.94)); }
|
||||
.edition-card p { max-width: 520px; color: var(--muted); line-height: 1.7; }
|
||||
.text-link { display: inline-flex; gap: 8px; margin-top: 36px; color: var(--cyan); font-size: 14px; font-weight: 720; }
|
||||
.text-link:hover { color: #91daff; }
|
||||
|
||||
.formats-section { border-block: 1px solid var(--line); background: linear-gradient(180deg, rgba(17,25,35,.75), rgba(11,16,22,.6)); }
|
||||
.formats-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 90px; align-items: start; }
|
||||
.format-list { border-top: 1px solid var(--line-strong); }
|
||||
.format-list div { display: grid; grid-template-columns: 160px 1fr; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--line); }
|
||||
.format-list strong { color: var(--ink); font: 700 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .05em; }
|
||||
.format-list span { color: var(--muted); font-size: 14px; }
|
||||
|
||||
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
||||
.faq-grid details { border: 1px solid var(--line); border-radius: 7px; background: rgba(17,25,35,.72); }
|
||||
.faq-grid summary { padding: 21px 24px; cursor: pointer; font-size: 14px; font-weight: 680; }
|
||||
.faq-grid details p { margin: 0; padding: 0 24px 22px; color: var(--muted); font-size: 14px; line-height: 1.65; }
|
||||
.community-cta { display: grid; grid-template-columns: 1.2fr .8fr; gap: 60px; align-items: end; margin-bottom: 118px; padding: 58px; border: 1px solid rgba(89,195,255,.28); border-radius: 10px; background: linear-gradient(130deg, #142635, #0f1821 70%); }
|
||||
.community-cta h2 { max-width: 680px; }
|
||||
.community-cta p:last-child { max-width: 700px; color: var(--muted); line-height: 1.7; }
|
||||
.cta-links { display: flex; flex-direction: column; gap: 12px; }
|
||||
|
||||
.site-footer { border-top: 1px solid var(--line); background: #080c11; }
|
||||
.footer-grid { min-height: 150px; display: grid; grid-template-columns: auto 1fr auto; gap: 34px; align-items: center; }
|
||||
.footer-grid p { margin: 0; color: var(--quiet); font-size: 12px; }
|
||||
.footer-grid nav { display: flex; gap: 22px; color: var(--muted); font-size: 12px; }
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.nav-shell nav { display: none; }
|
||||
.nav-shell .button { margin-left: auto; }
|
||||
.hero { grid-template-columns: 1fr; gap: 60px; min-height: auto; padding-top: 80px; }
|
||||
.hero-copy { max-width: 760px; }
|
||||
.hero-visual { transform: none; }
|
||||
.model-grid, .formats-grid { grid-template-columns: 1fr; gap: 48px; }
|
||||
.community-cta { grid-template-columns: 1fr; }
|
||||
.cta-links { flex-direction: row; flex-wrap: wrap; }
|
||||
.footer-grid { grid-template-columns: 1fr; gap: 18px; padding-block: 34px; }
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
:root { --shell: min(100% - 28px, 1180px); }
|
||||
.nav-shell { min-height: 64px; }
|
||||
.brand { font-size: 14px; }.brand img { width: 34px; height: 34px; }
|
||||
.nav-shell .button-small { min-height: 36px; padding-inline: 11px; font-size: 11px; }
|
||||
.hero { padding-block: 64px 58px; }
|
||||
h1 { font-size: clamp(42px, 13vw, 62px); }
|
||||
.hero-lead { font-size: 16px; }
|
||||
.hero-actions .button { width: 100%; }
|
||||
.hero-notes { display: grid; gap: 8px; }.hero-notes li::before { display: none; }
|
||||
.visual-badge { right: 10px; bottom: -24px; }
|
||||
.signal-grid { grid-template-columns: 1fr 1fr; }
|
||||
.signal-grid div { padding: 19px 16px; border-bottom: 1px solid var(--line); }
|
||||
.section { padding-block: 82px; }
|
||||
.capability-grid, .edition-grid, .faq-grid { grid-template-columns: 1fr; }
|
||||
.capability-wide { grid-column: auto; display: block; min-height: 540px; }
|
||||
.drafting-mark { position: absolute; right: -30px; bottom: -55px; width: 290px; opacity: .75; }
|
||||
.capability-card, .edition-card { padding: 28px; }
|
||||
.format-list div { grid-template-columns: 110px 1fr; gap: 14px; }
|
||||
.model-frame figcaption { flex-direction: column; gap: 6px; }
|
||||
.community-cta { width: var(--shell); margin-bottom: 82px; padding: 34px 24px; }
|
||||
.cta-links .button { width: 100%; }
|
||||
.footer-grid nav { flex-wrap: wrap; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html { scroll-behavior: auto; }
|
||||
*, *::before, *::after { transition-duration: .01ms !important; }
|
||||
}
|
||||
24
site/site.webmanifest
Normal file
24
site/site.webmanifest
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
{
|
||||
"name": "Open CAD Studio",
|
||||
"short_name": "Open CAD Studio",
|
||||
"description": "Open-source 2D drafting and 3D modeling for desktop and web.",
|
||||
"start_url": "/",
|
||||
"scope": "/",
|
||||
"display": "standalone",
|
||||
"background_color": "#0b1016",
|
||||
"theme_color": "#0b1016",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/assets/logo.svg",
|
||||
"sizes": "any",
|
||||
"type": "image/svg+xml",
|
||||
"purpose": "any"
|
||||
}
|
||||
],
|
||||
"shortcuts": [
|
||||
{
|
||||
"name": "Launch web app",
|
||||
"url": "/app/"
|
||||
}
|
||||
]
|
||||
}
|
||||
8
site/sitemap.xml
Normal file
8
site/sitemap.xml
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
||||
<url>
|
||||
<loc>https://www.opencadstudio.com/</loc>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>1.0</priority>
|
||||
</url>
|
||||
</urlset>
|
||||
BIN
site/workspace.png
Normal file
BIN
site/workspace.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 576 KiB |
72
web-app.html
Normal file
72
web-app.html
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="robots" content="noindex, follow" />
|
||||
<meta name="theme-color" content="#1e1e1e" />
|
||||
<title>Open CAD Studio Web App</title>
|
||||
<link data-trunk rel="icon" href="assets/logo.svg" />
|
||||
<style>
|
||||
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #1e1e1e; }
|
||||
canvas { display: block; }
|
||||
#loading {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 22px;
|
||||
background: #1e1e1e;
|
||||
color: #cfcfcf;
|
||||
font-family: system-ui, sans-serif;
|
||||
z-index: 9999;
|
||||
transition: opacity 0.4s ease;
|
||||
}
|
||||
#loading.hide { opacity: 0; pointer-events: none; }
|
||||
#loading .title { font-size: 22px; font-weight: 600; letter-spacing: 0.5px; }
|
||||
#loading .title span { color: #3399e6; }
|
||||
#loading .sub { font-size: 12px; color: #777; }
|
||||
#loading .spinner {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
border: 4px solid #2e2e2e;
|
||||
border-top-color: #3399e6;
|
||||
border-radius: 50%;
|
||||
animation: ocs-spin 0.9s linear infinite;
|
||||
}
|
||||
@keyframes ocs-spin { to { transform: rotate(360deg); } }
|
||||
</style>
|
||||
<link data-trunk rel="rust" data-bin="OpenCADStudio" />
|
||||
<link data-trunk rel="copy-dir" href="web/fonts" />
|
||||
<link data-trunk rel="copy-file" href="web/ocs-parse-worker.js" />
|
||||
<link data-trunk rel="copy-file" href="web/discussions.json" />
|
||||
<link data-trunk rel="copy-file" href="web/videos.json" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="loading">
|
||||
<div class="spinner"></div>
|
||||
<div class="title">Open <span>CAD</span> Studio</div>
|
||||
<div class="sub">Loading…</div>
|
||||
</div>
|
||||
<script>
|
||||
(() => {
|
||||
const splash = document.getElementById("loading");
|
||||
const done = () => {
|
||||
if (!splash) return;
|
||||
splash.classList.add("hide");
|
||||
setTimeout(() => splash.remove(), 450);
|
||||
};
|
||||
if (document.querySelector("canvas")) return done();
|
||||
const observer = new MutationObserver(() => {
|
||||
if (document.querySelector("canvas")) {
|
||||
observer.disconnect();
|
||||
done();
|
||||
}
|
||||
});
|
||||
observer.observe(document.body, { childList: true, subtree: true });
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue