-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtemplate.html
More file actions
253 lines (227 loc) · 11.4 KB
/
Copy pathtemplate.html
File metadata and controls
253 lines (227 loc) · 11.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
<!DOCTYPE HTML>
<!--
================================================================================
PHAI Lab — Paper Project Page TEMPLATE
Built on "Strata" by HTML5 UP (html5up.net).
HOW TO USE
1. Copy this file to a new page, e.g. cp template.html index.html
2. Search for "REPLACE" and fill in every spot (including the og:url / canonical).
3. Drop your figures/videos in images/ and videos/ and update the src paths.
4. Change the accent color in ONE place: assets/css/phai.css -> --accent
5. Preview locally: python3 -m http.server 8000 then open localhost:8000
6. See README.md for the full guide and the GitHub Pages deploy steps.
Every section below is wrapped in "===== SECTION =====" HTML comments.
Delete any section you don't need.
================================================================================
-->
<html lang="en">
<head>
<!-- ===== META (REPLACE title + description + urls) ===== -->
<title>REPLACE — Paper Title | PHAI Lab</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="REPLACE — one-sentence description of the paper." />
<!-- Open Graph / social-card preview -->
<meta property="og:type" content="website" />
<meta property="og:title" content="REPLACE — Paper Title" />
<meta property="og:description" content="REPLACE — one-sentence description of the paper." />
<!-- REPLACE both URLs below with your page's ABSOLUTE deployed URL (e.g.
https://phai-lab.github.io/your-paper/). They must match the live path. -->
<meta property="og:url" content="https://phai-lab.github.io/REPLACE-your-paper/" />
<link rel="canonical" href="https://phai-lab.github.io/REPLACE-your-paper/" />
<!-- og:image MUST be an ABSOLUTE url to a real raster (PNG/JPEG, 1200x630) — crawlers
fetch it out of page context and ignore relative paths. Ship images/og-card.png. -->
<meta property="og:image" content="https://phai-lab.github.io/REPLACE-your-paper/images/og-card.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="REPLACE — short teaser alt text" />
<!-- Twitter / X card (image should match og:image) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="REPLACE — Paper Title" />
<meta name="twitter:description" content="REPLACE — one-sentence description of the paper." />
<meta name="twitter:image" content="https://phai-lab.github.io/REPLACE-your-paper/images/og-card.png" />
<!-- Favicon -->
<link rel="icon" type="image/png" sizes="any" href="images/favicon.png" />
<!-- Stylesheets: theme first, then PHAI overrides -->
<link rel="stylesheet" href="assets/css/main.css" />
<link rel="stylesheet" href="assets/css/phai.css" />
</head>
<body id="top">
<main id="main">
<header class="masthead">
<!-- ===== AFFILIATION LOGOS (your university + collaborators; REPLACE) ===== -->
<div class="logo-row">
<img src="images/tamu-logo.png" class="wordmark" alt="Texas A&M University" />
<img src="images/placeholder-logo.svg" alt="Collaborating institution" />
<img src="images/placeholder-logo.svg" alt="Collaborating institution" />
</div>
<!-- ===== TITLE / SUBTITLE / VENUE (REPLACE) ===== -->
<h1 class="title">REPLACE — Paper Title</h1>
<h2 class="subtitle">REPLACE — short, catchy one-line description</h2>
<p class="venue">REPLACE — Conference / Journal Year · (e.g. CVPR 2026)</p>
<!-- ===== AUTHORS (REPLACE names, links, superscripts) ===== -->
<!-- * = equal contribution. Superscripts map to the affiliations below. -->
<p class="authors">
<a href="#">First Author<sup>*1</sup></a>,
<a href="#">Second Author<sup>*1</sup></a>,
<a href="#">Third Author<sup>2</sup></a>,
<a href="#">Senior Author<sup>1</sup></a>
</p>
<p class="affiliations">
<sup>1</sup> <a href="https://www.tamu.edu/">Texas A&M University</a>
<sup>2</sup> Institution Two
<sup>*</sup> Equal contribution
</p>
<!-- ===== LINK BUTTONS (REPLACE hrefs; delete any you don't have) ===== -->
<div class="links">
<a href="#" class="button special icon fa-file-pdf-o">Paper</a>
<a href="#" class="button icon fa-file-text-o">arXiv</a>
<a href="#" class="button icon fa-github">Code</a>
<a href="#video" class="button icon fa-youtube-play">Video</a>
<a href="#" class="button icon fa-database">Data</a>
</div>
</header>
<!-- ===== TEASER (REPLACE) =====
PREFERRED (premium default): an autoplaying muted-loop clip. Drop
videos/teaser.mp4 in place, then DELETE the <img> block below and
UNCOMMENT this one:
<span class="image teaser">
<video autoplay loop muted playsinline preload="metadata"
poster="images/placeholder-teaser.svg" style="width:100%;">
<source src="videos/teaser.mp4" type="video/mp4">
</video>
</span>
-->
<!-- Fallback: a static teaser figure (used here so the page renders out-of-the-box). -->
<span class="image teaser">
<img src="images/placeholder-teaser.svg" alt="REPLACE — describe what the teaser figure SHOWS (for screen readers)" />
</span>
<p class="media-caption">REPLACE — one-line teaser caption (a teaser figure or an autoplaying clip).</p>
<!-- ===== ABSTRACT (REPLACE) ===== -->
<h3>Abstract</h3>
<p>
REPLACE — Paste your abstract here. Keep it to one paragraph. This is the
same copy you would submit to the conference; it sets up the contribution,
the method, and the headline result.
</p>
<!-- ===== VIDEO (REPLACE YouTube ID, or delete section) ===== -->
<h3 id="video">Video</h3>
<div class="video-embed">
<!-- Replace VIDEO_ID with your YouTube id (the part after watch?v=). -->
<iframe src="https://www.youtube.com/embed/VIDEO_ID"
title="Project video" allowfullscreen
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe>
</div>
<p class="media-caption">REPLACE — one-line video caption (or delete).</p>
<!-- ===== METHOD (REPLACE figure + text; duplicate for more parts) ===== -->
<h3>Method</h3>
<!-- alt text is REQUIRED on every content image: describe what it SHOWS, not "figure". (Decorative-only images use alt="".) -->
<span class="image">
<img src="images/placeholder-figure.svg" alt="REPLACE — describe the method/pipeline figure" />
</span>
<p class="media-caption">REPLACE — figure caption explaining the pipeline.</p>
<p>
REPLACE — Describe your approach. Use as many paragraphs and figures as you
need. Copy the <code><span class="image"></code> + caption block above to add
more figures.
</p>
<!-- ===== RESULTS (REPLACE) ===== -->
<h3>Results</h3>
<!-- (a) Responsive media grid. 12-col Strata grid: 4u+4u+4u$ = 3 across,
6u+6u$ = 2 across, 3u x4 = 4 across. Last cell in a row ends with "$". -->
<div class="box alt">
<div class="row 50% uniform">
<div class="4u">
<span class="image fit"><img src="images/placeholder-figure.svg" alt="REPLACE — describe result 1" /></span>
<p class="media-caption">REPLACE — result 1</p>
</div>
<div class="4u">
<span class="image fit"><img src="images/placeholder-figure.svg" alt="REPLACE — describe result 2" /></span>
<p class="media-caption">REPLACE — result 2</p>
</div>
<div class="4u$">
<span class="image fit"><img src="images/placeholder-figure.svg" alt="REPLACE — describe result 3" /></span>
<p class="media-caption">REPLACE — result 3</p>
</div>
</div>
</div>
<!-- (b) Side-by-side comparison (Ours vs Baseline). Left col gets the accent label via class="col ours". -->
<div class="compare">
<div class="col ours">
<span class="col-label">Ours</span><span class="speed-badge">1×</span>
<img src="images/placeholder-figure.svg" alt="REPLACE — our method" />
</div>
<div class="col">
<span class="col-label">Baseline</span><span class="speed-badge">1×</span>
<img src="images/placeholder-figure.svg" alt="REPLACE — baseline" />
</div>
</div>
<p class="media-caption">REPLACE — comparison caption (left: ours, right: baseline).</p>
<!-- Option B — autoplaying clips (drop files in videos/, swap each <img> above for):
<video autoplay loop muted playsinline preload="metadata" poster="images/placeholder-figure.svg">
<source src="videos/ours.mp4" type="video/mp4"></video>
-->
<!-- (c) Quantitative results table. Best result per row gets class="best". -->
<div class="table-wrap">
<table class="results-table">
<thead><tr><th>Task</th><th>Baseline</th><th>Ours</th></tr></thead>
<tbody>
<tr><td>REPLACE — Task A</td><td>00.0</td><td class="best">00.0</td></tr>
<tr><td>REPLACE — Task B</td><td>00.0</td><td class="best">00.0</td></tr>
</tbody>
</table>
</div>
<p class="media-caption">REPLACE — table caption. Best result per row in <span class="best">accent bold</span>.</p>
<!-- ===== TEAM (optional — circular author photos; REPLACE or delete) ===== -->
<h3>Team</h3>
<section class="team">
<!-- Keep alt="" on portraits: the author name in the same <a> is the accessible label.
Don't set alt="photo"/"author". Only set alt="Person Name" if you delete the visible name. -->
<div class="box alt">
<div class="row 50% uniform">
<div class="3u">
<a href="#"><span class="image fit"><img src="images/placeholder-author.svg" alt="" /></span>First Author</a>
</div>
<div class="3u">
<a href="#"><span class="image fit"><img src="images/placeholder-author.svg" alt="" /></span>Second Author</a>
</div>
<div class="3u">
<a href="#"><span class="image fit"><img src="images/placeholder-author.svg" alt="" /></span>Third Author</a>
</div>
<div class="3u$">
<a href="#"><span class="image fit"><img src="images/placeholder-author.svg" alt="" /></span>Senior Author</a>
</div>
</div>
</div>
</section>
<!-- ===== BIBTEX (REPLACE) ===== -->
<h3>BibTeX</h3>
<pre><code>@article{REPLACE_citekey,
title = {REPLACE — Paper Title},
author = {Last, First and Last, First and Last, First},
journal = {REPLACE — Conference / Journal},
year = {2026}
}</code></pre>
<!-- ===== ACKNOWLEDGEMENTS (REPLACE, or delete) ===== -->
<h3>Acknowledgements</h3>
<p>
REPLACE — funding sources and thanks. This page is built on the open-source
<a href="https://html5up.net/">HTML5 UP "Strata"</a> theme.
</p>
<!-- ===== FOOTER ===== -->
<footer id="page-footer">
<p>
© <a href="https://phai-lab.github.io/">PHAI Lab</a>.
Page template built on <a href="https://html5up.net/">HTML5 UP — Strata</a>
(<a href="https://html5up.net/license">CCA 3.0</a>).
</p>
</footer>
</main>
<!-- ===== SCRIPTS (do not remove — power the layout + lightbox) ===== -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.poptrox.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>