Skip to content

Add landing page skeleton (docs/) #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
fermingut merged 1 commit into from
Jun 30, 2026
Merged

Add landing page skeleton (docs/) #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
153 changes: 153 additions & 0 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The SHARP-Raptor Challenge: Surface Pressure Prediction on an F-22 Airfoil Section</title>
<meta name="description" content="A high-speed machine learning benchmark for surface pressure prediction on a transonic F-22 airfoil section.">

<!-- TODO: Open Graph / Twitter card meta tags once the page is hosted, e.g.
<meta property="og:title" content="...">
<meta property="og:image" content="https://<user>.github.io/<repo>/src/images/og-cover.png">
-->

<link rel="stylesheet" href="style.css">
</head>
<body>

<!-- ============ HEADER ============ -->
<header class="hero">
<div class="hero-inner">
<p class="kicker">Benchmark &amp; Challenge</p>
<h1>The SHARP&#8209;Raptor Challenge</h1>
<p class="subtitle">A High-Speed Machine Learning Benchmark for Surface Pressure Prediction on an F&#8209;22 Airfoil Section</p>

<!-- TODO: replace with your real author list / affiliations / superscripts -->
<p class="authors">
David Ramos<sup>1</sup>,
Lucas Lacasa<sup>2</sup>,
Fermín Gutiérrez<sup>1</sup>,
Eusebio Valero<sup>1,3</sup>,
Gonzalo Rubio<sup>1,3</sup>
</p>
<p class="affiliations">
<sup>1</sup> ETSIAE-UPM &middot; School of Aeronautics, Universidad Politécnica de Madrid &nbsp;&nbsp;
<sup>2</sup> Institute for Cross-Disciplinary Physics and Complex Systems (IFISC, CSIC-UIB) &nbsp;&nbsp;
<sup>3</sup> Center for Computational Simulation, Universidad Politécnica de Madrid
</p>

<!-- TODO: replace logo images and links with your own -->
<div class="logos">
<a href="https://www.upm.es/" target="_blank" rel="noopener">
<img src="src/images/banner_upm.svg" alt="Universidad Politécnica de Madrid">
</a>
<a href="https://numath.dmae.upm.es/" target="_blank" rel="noopener">
<img src="src/images/Logo-Numath-Blue.png" alt="NUMATH group">
</a>
</div>

<!-- ============ LINK BUTTONS ============ -->
<nav class="link-row">
<a class="btn" href="#">📄 Paper</a>
<a class="btn" href="#">📚 arXiv</a>
<a class="btn" href="https://github.com/TU-USUARIO/TU-REPO" target="_blank" rel="noopener">💻 Code</a>
<a class="btn btn-accent" href="#database">📦 Database</a>
<a class="btn" href="https://www.codabench.org/" target="_blank" rel="noopener">🏆 Leaderboard</a>
</nav>
</div>
</header>

<main>

<!-- ============ ABSTRACT ============ -->
<section id="abstract" class="section">
<h2>Abstract</h2>
<p class="placeholder">
<!-- TODO: write abstract -->
Abstract coming soon.
</p>
</section>

<!-- ============ DATABASE ============ -->
<section id="database" class="section section-alt">
<h2>Database</h2>
<p class="placeholder">
<!-- TODO: describe the dataset: geometry, flow conditions, format, train/test split, size, license, download link -->
Database description coming soon.
</p>
</section>

<!-- ============ METHODS ============ -->
<section id="methods" class="section">
<h2>Methods</h2>
<p class="placeholder">
<!-- TODO: describe baseline models (MLP, KAN, RBF-ELM, diffusion-based) and evaluation protocol -->
Methods description coming soon.
</p>
</section>

<!-- ============ RESULTS ============ -->
<section id="results" class="section section-alt">
<h2>Results</h2>
<p class="placeholder">
<!-- TODO: add results tables / figures / leaderboard snapshot -->
Results coming soon.
</p>
</section>

<!-- ============ BIBTEX ============ -->
<section id="bibtex" class="section">
<h2>BibTeX</h2>
<div class="code-block">
<button class="copy-btn" onclick="copyBibtex()">Copy</button>
<pre id="bibtex-content">@misc{sharpraptor2026,
title={The SHARP-Raptor Challenge: A High-Speed Machine Learning Benchmark for Surface Pressure Prediction on an F-22 Airfoil Section},
author={TODO: author list},
year={2026},
eprint={TODO},
archivePrefix={arXiv},
primaryClass={cs.LG},
url={TODO},
}</pre>
</div>
</section>

<!-- ============ ACKNOWLEDGEMENTS ============ -->
<section id="acknowledgements" class="section section-alt">
<h2>Acknowledgements</h2>
<p class="placeholder">
<!-- TODO: replace text and funder logos -->
This work was supported by the following institutions and funding programs.
</p>
<div class="logos logos-small">
<!-- TODO: replace with your funders -->
<a href="#"><img src="src/images/funder1.png" alt="Funder 1"></a>
<a href="#"><img src="src/images/funder2.png" alt="Funder 2"></a>
</div>
</section>

</main>

<!-- ============ FOOTER ============ -->
<footer class="footer">
<p>&copy; 2026 SHARP-Raptor Challenge Authors &middot;
<a href="#">Paper</a> &middot;
<a href="https://github.com/TU-USUARIO/TU-REPO" target="_blank" rel="noopener">Code</a> &middot;
<a href="#database">Database</a>
</p>
</footer>

<script>
function copyBibtex() {
const text = document.getElementById('bibtex-content').innerText;
navigator.clipboard.writeText(text).then(() => {
const btn = document.querySelector('.copy-btn');
const original = btn.innerText;
btn.innerText = 'Copied!';
setTimeout(() => (btn.innerText = original), 1500);
});
}
</script>

</body>
</html>
231 changes: 231 additions & 0 deletions docs/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,231 @@
/* ============================================================
SHARP-Raptor Challenge — stylesheet
Design notes:
- Dark "cockpit/HUD" inspired hero, light content sections
- Accent color: amber/orange (high-speed, heat, transonic)
- Typography: system sans for body, condensed weight for headings
============================================================ */

:root {
--bg: #0b0e14;
--bg-light: #f7f7f5;
--bg-alt: #eef0ec;
--ink: #14161a;
--ink-soft: #4a4f57;
--accent: #ff7a1a;
--accent-dark: #c75a00;
--line: #d8dad4;
--radius: 14px;
--max-width: 880px;
font-size: 16px;
}

* { box-sizing: border-box; }

body {
margin: 0;
font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
color: var(--ink);
background: var(--bg-light);
line-height: 1.6;
}

h1, h2 {
font-weight: 700;
letter-spacing: -0.02em;
}

sup { font-size: 0.65em; }

/* ============ HERO ============ */
.hero {
background:
radial-gradient(circle at 20% 0%, rgba(255,122,26,0.18), transparent 55%),
var(--bg);
color: #f4f4f2;
padding: 64px 24px 48px;
text-align: center;
}

.hero-inner {
max-width: var(--max-width);
margin: 0 auto;
}

.kicker {
text-transform: uppercase;
letter-spacing: 0.16em;
font-size: 0.78rem;
color: var(--accent);
margin: 0 0 12px;
font-weight: 600;
}

.hero h1 {
font-size: clamp(1.8rem, 4vw, 2.7rem);
margin: 0 0 14px;
}

.subtitle {
font-size: 1.05rem;
color: #c9cad0;
max-width: 680px;
margin: 0 auto 28px;
}

.authors {
font-size: 1rem;
margin: 0 0 6px;
color: #f4f4f2;
}

.affiliations {
font-size: 0.8rem;
color: #9a9da6;
max-width: 700px;
margin: 0 auto 28px;
}

.logos {
display: flex;
align-items: center;
justify-content: center;
gap: 32px;
margin-bottom: 32px;
flex-wrap: wrap;
}

.logos img {
height: 38px;
filter: grayscale(1) brightness(1.8);
opacity: 0.85;
transition: opacity 0.15s ease;
}

.logos img:hover { opacity: 1; }

.logos-small img { height: 30px; }

/* ============ BUTTONS ============ */
.link-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
}

.btn {
display: inline-block;
padding: 10px 20px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.18);
background: rgba(255,255,255,0.04);
color: #f4f4f2;
text-decoration: none;
font-size: 0.92rem;
font-weight: 500;
transition: border-color 0.15s ease, background 0.15s ease;
}

.btn:hover {
border-color: var(--accent);
background: rgba(255,122,26,0.12);
}

.btn-accent {
background: var(--accent);
border-color: var(--accent);
color: #1a1a1a;
font-weight: 700;
}

.btn-accent:hover {
background: var(--accent-dark);
border-color: var(--accent-dark);
color: #fff;
}

/* ============ SECTIONS ============ */
.section {
max-width: var(--max-width);
margin: 0 auto;
padding: 56px 24px;
}

.section-alt {
background: var(--bg-alt);
max-width: none;
}

.section-alt > * {
max-width: var(--max-width);
margin-left: auto;
margin-right: auto;
}

.section h2 {
font-size: 1.5rem;
margin: 0 0 18px;
padding-bottom: 10px;
border-bottom: 3px solid var(--accent);
display: inline-block;
}

.placeholder {
color: var(--ink-soft);
font-style: italic;
}

/* ============ BIBTEX BLOCK ============ */
.code-block {
position: relative;
background: var(--bg);
border-radius: var(--radius);
padding: 20px;
overflow-x: auto;
}

.code-block pre {
margin: 0;
color: #d8e0e8;
font-family: "SFMono-Regular", Consolas, Menlo, monospace;
font-size: 0.85rem;
white-space: pre-wrap;
}

.copy-btn {
position: absolute;
top: 14px;
right: 14px;
background: var(--accent);
color: #1a1a1a;
border: none;
border-radius: 6px;
padding: 6px 12px;
font-size: 0.78rem;
font-weight: 700;
cursor: pointer;
}

.copy-btn:hover { background: var(--accent-dark); color: #fff; }

/* ============ FOOTER ============ */
.footer {
text-align: center;
padding: 32px 24px 48px;
color: var(--ink-soft);
font-size: 0.85rem;
}

.footer a {
color: var(--ink-soft);
text-decoration: underline;
}

.footer a:hover { color: var(--accent-dark); }

/* ============ RESPONSIVE ============ */
@media (max-width: 600px) {
.hero { padding: 48px 16px 36px; }
.section { padding: 40px 16px; }
}
Loading