mirror of
https://github.com/AvaLovelace1/LegoGPT.git
synced 2026-05-14 11:29:33 -05:00
add website
Update index.html Create static.yml
This commit is contained in:
Ava Pun
@@ -0,0 +1,43 @@
|
||||
# Simple workflow for deploying static content to GitHub Pages
|
||||
name: Deploy static content to Pages
|
||||
|
||||
on:
|
||||
# Runs on pushes targeting the default branch
|
||||
push:
|
||||
branches: ["main"]
|
||||
|
||||
# Allows you to run this workflow manually from the Actions tab
|
||||
workflow_dispatch:
|
||||
|
||||
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
|
||||
permissions:
|
||||
contents: read
|
||||
pages: write
|
||||
id-token: write
|
||||
|
||||
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
|
||||
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
|
||||
concurrency:
|
||||
group: "pages"
|
||||
cancel-in-progress: false
|
||||
|
||||
jobs:
|
||||
# Single deploy job since we're just deploying
|
||||
deploy:
|
||||
environment:
|
||||
name: github-pages
|
||||
url: ${{ steps.deployment.outputs.page_url }}
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
- name: Setup Pages
|
||||
uses: actions/configure-pages@v5
|
||||
- name: Upload artifact
|
||||
uses: actions/upload-pages-artifact@v3
|
||||
with:
|
||||
# Upload entire repository
|
||||
path: './website'
|
||||
- name: Deploy to GitHub Pages
|
||||
id: deployment
|
||||
uses: actions/deploy-pages@v4
|
||||
Vendored
BIN
Binary file not shown.
Vendored
BIN
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 341 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
Binary file not shown.
Binary file not shown.
BIN
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Vendored
BIN
Binary file not shown.
@@ -0,0 +1,64 @@
|
||||
.highlight-clean {
|
||||
color: #313437;
|
||||
background-color: #fff;
|
||||
padding: 50px 0;
|
||||
}
|
||||
|
||||
.highlight-clean p {
|
||||
color: #7d8285;
|
||||
}
|
||||
|
||||
.highlight-clean h2 {
|
||||
font-weight: bold;
|
||||
margin-bottom: 25px;
|
||||
line-height: 1.5;
|
||||
padding-top: 0;
|
||||
margin-top: 0;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.highlight-clean .intro {
|
||||
font-size: 16px;
|
||||
max-width: 500px;
|
||||
margin: 0 auto 25px;
|
||||
}
|
||||
|
||||
.highlight-clean .buttons {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.highlight-clean .buttons .btn {
|
||||
padding: 16px 32px;
|
||||
margin: 6px;
|
||||
border: none;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
text-shadow: none;
|
||||
opacity: 0.90;
|
||||
/*text-transform: uppercase;*/
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
letter-spacing: 0.4px;
|
||||
line-height: 1;
|
||||
outline: none;
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
.highlight-clean .buttons .btn:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.highlight-clean .buttons .btn:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
.highlight-clean .buttons .btn-primary {
|
||||
background-color: #055ada;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Source Sans Pro', sans-serif;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
+7
File diff suppressed because one or more lines are too long
Vendored
+7
File diff suppressed because one or more lines are too long
@@ -0,0 +1,168 @@
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: url(https://fonts.gstatic.com/s/sourcesanspro/v21/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwmhdu3cOWxy40.woff2) format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: url(https://fonts.gstatic.com/s/sourcesanspro/v21/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwkxdu3cOWxy40.woff2) format('woff2');
|
||||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
/* greek-ext */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: url(https://fonts.gstatic.com/s/sourcesanspro/v21/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwmxdu3cOWxy40.woff2) format('woff2');
|
||||
unicode-range: U+1F00-1FFF;
|
||||
}
|
||||
/* greek */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: url(https://fonts.gstatic.com/s/sourcesanspro/v21/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwlBdu3cOWxy40.woff2) format('woff2');
|
||||
unicode-range: U+0370-03FF;
|
||||
}
|
||||
/* vietnamese */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: url(https://fonts.gstatic.com/s/sourcesanspro/v21/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwmBdu3cOWxy40.woff2) format('woff2');
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: url(https://fonts.gstatic.com/s/sourcesanspro/v21/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwmRdu3cOWxy40.woff2) format('woff2');
|
||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: url(https://fonts.gstatic.com/s/sourcesanspro/v21/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwlxdu3cOWxw.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(https://fonts.gstatic.com/s/sourcesanspro/v21/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNa7lujVj9_mf.woff2) format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(https://fonts.gstatic.com/s/sourcesanspro/v21/6xK3dSBYKcSV-LCoeQqfX1RYOo3qPK7lujVj9_mf.woff2) format('woff2');
|
||||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
/* greek-ext */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(https://fonts.gstatic.com/s/sourcesanspro/v21/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNK7lujVj9_mf.woff2) format('woff2');
|
||||
unicode-range: U+1F00-1FFF;
|
||||
}
|
||||
/* greek */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(https://fonts.gstatic.com/s/sourcesanspro/v21/6xK3dSBYKcSV-LCoeQqfX1RYOo3qO67lujVj9_mf.woff2) format('woff2');
|
||||
unicode-range: U+0370-03FF;
|
||||
}
|
||||
/* vietnamese */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(https://fonts.gstatic.com/s/sourcesanspro/v21/6xK3dSBYKcSV-LCoeQqfX1RYOo3qN67lujVj9_mf.woff2) format('woff2');
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(https://fonts.gstatic.com/s/sourcesanspro/v21/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNq7lujVj9_mf.woff2) format('woff2');
|
||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(https://fonts.gstatic.com/s/sourcesanspro/v21/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7lujVj9w.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
src: url(https://fonts.gstatic.com/s/sourcesanspro/v21/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwmhdu3cOWxy40.woff2) format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
src: url(https://fonts.gstatic.com/s/sourcesanspro/v21/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwkxdu3cOWxy40.woff2) format('woff2');
|
||||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
/* greek-ext */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
src: url(https://fonts.gstatic.com/s/sourcesanspro/v21/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwmxdu3cOWxy40.woff2) format('woff2');
|
||||
unicode-range: U+1F00-1FFF;
|
||||
}
|
||||
/* greek */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
src: url(https://fonts.gstatic.com/s/sourcesanspro/v21/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwlBdu3cOWxy40.woff2) format('woff2');
|
||||
unicode-range: U+0370-03FF;
|
||||
}
|
||||
/* vietnamese */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
src: url(https://fonts.gstatic.com/s/sourcesanspro/v21/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwmBdu3cOWxy40.woff2) format('woff2');
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
src: url(https://fonts.gstatic.com/s/sourcesanspro/v21/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwmRdu3cOWxy40.woff2) format('woff2');
|
||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
src: url(https://fonts.gstatic.com/s/sourcesanspro/v21/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwlxdu3cOWxw.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
Vendored
+2
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Vendored
+1111
File diff suppressed because one or more lines are too long
@@ -0,0 +1,9 @@
|
||||
/* Polyfill service v3.111.0
|
||||
* For detailed credits and licence information see https://github.com/financial-times/polyfill-service.
|
||||
*
|
||||
* Features requested: IntersectionObserver
|
||||
* */
|
||||
|
||||
|
||||
/* No polyfills needed for current settings and browser */
|
||||
|
||||
@@ -0,0 +1,278 @@
|
||||
'use strict';
|
||||
|
||||
(function() {
|
||||
// Format video selector for compositional prompts.
|
||||
let captions = ["a DSLR photo of a squirrel chopping vegetables",
|
||||
"a DSLR photo of a squirrel dancing",
|
||||
"a DSLR photo of a squirrel eating a hamburger",
|
||||
"a DSLR photo of a squirrel playing the saxophone",
|
||||
"a DSLR photo of a squirrel reading a book",
|
||||
"a DSLR photo of a squirrel ",
|
||||
"a DSLR photo of a squirrel riding a motorcycle",
|
||||
"a DSLR photo of a squirrel riding a skateboard",
|
||||
"a DSLR photo of a squirrel sitting at a pottery wheel shaping a clay bowl",
|
||||
"a DSLR photo of a squirrel wearing a kimono chopping vegetables",
|
||||
"a DSLR photo of a squirrel wearing a kimono dancing",
|
||||
"a DSLR photo of a squirrel wearing a kimono eating a hamburger",
|
||||
"a DSLR photo of a squirrel wearing a kimono playing the saxophone",
|
||||
"a DSLR photo of a squirrel wearing a kimono reading a book",
|
||||
"a DSLR photo of a squirrel wearing a kimono ",
|
||||
"a DSLR photo of a squirrel wearing a kimono riding a motorcycle",
|
||||
"a DSLR photo of a squirrel wearing a kimono riding a skateboard",
|
||||
"a DSLR photo of a squirrel wearing a kimono sitting at a pottery wheel shaping a clay bowl",
|
||||
"a DSLR photo of a squirrel wearing a kimono wielding a katana",
|
||||
"a DSLR photo of a squirrel wearing a medieval suit of armor chopping vegetables",
|
||||
"a DSLR photo of a squirrel wearing a medieval suit of armor dancing",
|
||||
"a DSLR photo of a squirrel wearing a medieval suit of armor eating a hamburger",
|
||||
"a DSLR photo of a squirrel wearing a medieval suit of armor playing the saxophone",
|
||||
"a DSLR photo of a squirrel wearing a medieval suit of armor reading a book",
|
||||
"a DSLR photo of a squirrel wearing a medieval suit of armor ",
|
||||
"a DSLR photo of a squirrel wearing a medieval suit of armor riding a motorcycle",
|
||||
"a DSLR photo of a squirrel wearing a medieval suit of armor riding a skateboard",
|
||||
"a DSLR photo of a squirrel wearing a medieval suit of armor sitting at a pottery wheel shaping a clay bowl",
|
||||
"a DSLR photo of a squirrel wearing a medieval suit of armor wielding a katana",
|
||||
"a DSLR photo of a squirrel wearing an elegant ballgown chopping vegetables",
|
||||
"a DSLR photo of a squirrel wearing an elegant ballgown dancing",
|
||||
"a DSLR photo of a squirrel wearing an elegant ballgown eating a hamburger",
|
||||
"a DSLR photo of a squirrel wearing an elegant ballgown playing the saxophone",
|
||||
"a DSLR photo of a squirrel wearing an elegant ballgown reading a book",
|
||||
"a DSLR photo of a squirrel wearing an elegant ballgown ",
|
||||
"a DSLR photo of a squirrel wearing an elegant ballgown riding a motorcycle",
|
||||
"a DSLR photo of a squirrel wearing an elegant ballgown riding a skateboard",
|
||||
"a DSLR photo of a squirrel wearing an elegant ballgown sitting at a pottery wheel shaping a clay bowl",
|
||||
"a DSLR photo of a squirrel wearing an elegant ballgown wielding a katana",
|
||||
"a DSLR photo of a squirrel wearing a purple hoodie chopping vegetables",
|
||||
"a DSLR photo of a squirrel wearing a purple hoodie dancing",
|
||||
"a DSLR photo of a squirrel wearing a purple hoodie eating a hamburger",
|
||||
"a DSLR photo of a squirrel wearing a purple hoodie playing the saxophone",
|
||||
"a DSLR photo of a squirrel wearing a purple hoodie reading a book",
|
||||
"a DSLR photo of a squirrel wearing a purple hoodie ",
|
||||
"a DSLR photo of a squirrel wearing a purple hoodie riding a motorcycle",
|
||||
"a DSLR photo of a squirrel wearing a purple hoodie riding a skateboard",
|
||||
"a DSLR photo of a squirrel wearing a purple hoodie sitting at a pottery wheel shaping a clay bowl",
|
||||
"a DSLR photo of a squirrel wearing a purple hoodie wielding a katana",
|
||||
"a DSLR photo of a squirrel wielding a katana",
|
||||
"a highly detailed metal sculpture of a squirrel chopping vegetables",
|
||||
"a highly detailed metal sculpture of a squirrel dancing",
|
||||
"a highly detailed metal sculpture of a squirrel eating a hamburger",
|
||||
"a highly detailed metal sculpture of a squirrel playing the saxophone",
|
||||
"a highly detailed metal sculpture of a squirrel reading a book",
|
||||
"a highly detailed metal sculpture of a squirrel ",
|
||||
"a highly detailed metal sculpture of a squirrel riding a motorcycle",
|
||||
"a highly detailed metal sculpture of a squirrel riding a skateboard",
|
||||
"a highly detailed metal sculpture of a squirrel sitting at a pottery wheel shaping a clay bowl",
|
||||
"a highly detailed metal sculpture of a squirrel wearing a kimono chopping vegetables",
|
||||
"a highly detailed metal sculpture of a squirrel wearing a kimono dancing",
|
||||
"a highly detailed metal sculpture of a squirrel wearing a kimono eating a hamburger",
|
||||
"a highly detailed metal sculpture of a squirrel wearing a kimono playing the saxophone",
|
||||
"a highly detailed metal sculpture of a squirrel wearing a kimono reading a book",
|
||||
"a highly detailed metal sculpture of a squirrel wearing a kimono ",
|
||||
"a highly detailed metal sculpture of a squirrel wearing a kimono riding a motorcycle",
|
||||
"a highly detailed metal sculpture of a squirrel wearing a kimono riding a skateboard",
|
||||
"a highly detailed metal sculpture of a squirrel wearing a kimono sitting at a pottery wheel shaping a clay bowl",
|
||||
"a highly detailed metal sculpture of a squirrel wearing a kimono wielding a katana",
|
||||
"a highly detailed metal sculpture of a squirrel wearing a medieval suit of armor chopping vegetables",
|
||||
"a highly detailed metal sculpture of a squirrel wearing a medieval suit of armor dancing",
|
||||
"a highly detailed metal sculpture of a squirrel wearing a medieval suit of armor eating a hamburger",
|
||||
"a highly detailed metal sculpture of a squirrel wearing a medieval suit of armor playing the saxophone",
|
||||
"a highly detailed metal sculpture of a squirrel wearing a medieval suit of armor reading a book",
|
||||
"a highly detailed metal sculpture of a squirrel wearing a medieval suit of armor ",
|
||||
"a highly detailed metal sculpture of a squirrel wearing a medieval suit of armor riding a motorcycle",
|
||||
"a highly detailed metal sculpture of a squirrel wearing a medieval suit of armor riding a skateboard",
|
||||
"a highly detailed metal sculpture of a squirrel wearing a medieval suit of armor sitting at a pottery wheel shaping a clay bowl",
|
||||
"a highly detailed metal sculpture of a squirrel wearing a medieval suit of armor wielding a katana",
|
||||
"a highly detailed metal sculpture of a squirrel wearing an elegant ballgown chopping vegetables",
|
||||
"a highly detailed metal sculpture of a squirrel wearing an elegant ballgown dancing",
|
||||
"a highly detailed metal sculpture of a squirrel wearing an elegant ballgown eating a hamburger",
|
||||
"a highly detailed metal sculpture of a squirrel wearing an elegant ballgown playing the saxophone",
|
||||
"a highly detailed metal sculpture of a squirrel wearing an elegant ballgown reading a book",
|
||||
"a highly detailed metal sculpture of a squirrel wearing an elegant ballgown ",
|
||||
"a highly detailed metal sculpture of a squirrel wearing an elegant ballgown riding a motorcycle",
|
||||
"a highly detailed metal sculpture of a squirrel wearing an elegant ballgown riding a skateboard",
|
||||
"a highly detailed metal sculpture of a squirrel wearing an elegant ballgown sitting at a pottery wheel shaping a clay bowl",
|
||||
"a highly detailed metal sculpture of a squirrel wearing an elegant ballgown wielding a katana",
|
||||
"a highly detailed metal sculpture of a squirrel wearing a purple hoodie chopping vegetables",
|
||||
"a highly detailed metal sculpture of a squirrel wearing a purple hoodie dancing",
|
||||
"a highly detailed metal sculpture of a squirrel wearing a purple hoodie eating a hamburger",
|
||||
"a highly detailed metal sculpture of a squirrel wearing a purple hoodie playing the saxophone",
|
||||
"a highly detailed metal sculpture of a squirrel wearing a purple hoodie reading a book",
|
||||
"a highly detailed metal sculpture of a squirrel wearing a purple hoodie ",
|
||||
"a highly detailed metal sculpture of a squirrel wearing a purple hoodie riding a motorcycle",
|
||||
"a highly detailed metal sculpture of a squirrel wearing a purple hoodie riding a skateboard",
|
||||
"a highly detailed metal sculpture of a squirrel wearing a purple hoodie sitting at a pottery wheel shaping a clay bowl",
|
||||
"a highly detailed metal sculpture of a squirrel wearing a purple hoodie wielding a katana",
|
||||
"a highly detailed metal sculpture of a squirrel wielding a katana",
|
||||
"an intricate wooden carving of a squirrel chopping vegetables",
|
||||
"an intricate wooden carving of a squirrel dancing",
|
||||
"an intricate wooden carving of a squirrel eating a hamburger",
|
||||
"an intricate wooden carving of a squirrel playing the saxophone",
|
||||
"an intricate wooden carving of a squirrel reading a book",
|
||||
"an intricate wooden carving of a squirrel ",
|
||||
"an intricate wooden carving of a squirrel riding a motorcycle",
|
||||
"an intricate wooden carving of a squirrel riding a skateboard",
|
||||
"an intricate wooden carving of a squirrel sitting at a pottery wheel shaping a clay bowl",
|
||||
"an intricate wooden carving of a squirrel wearing a kimono chopping vegetables",
|
||||
"an intricate wooden carving of a squirrel wearing a kimono dancing",
|
||||
"an intricate wooden carving of a squirrel wearing a kimono eating a hamburger",
|
||||
"an intricate wooden carving of a squirrel wearing a kimono playing the saxophone",
|
||||
"an intricate wooden carving of a squirrel wearing a kimono reading a book",
|
||||
"an intricate wooden carving of a squirrel wearing a kimono ",
|
||||
"an intricate wooden carving of a squirrel wearing a kimono riding a motorcycle",
|
||||
"an intricate wooden carving of a squirrel wearing a kimono riding a skateboard",
|
||||
"an intricate wooden carving of a squirrel wearing a kimono sitting at a pottery wheel shaping a clay bowl",
|
||||
"an intricate wooden carving of a squirrel wearing a kimono wielding a katana",
|
||||
"an intricate wooden carving of a squirrel wearing a medieval suit of armor chopping vegetables",
|
||||
"an intricate wooden carving of a squirrel wearing a medieval suit of armor dancing",
|
||||
"an intricate wooden carving of a squirrel wearing a medieval suit of armor eating a hamburger",
|
||||
"an intricate wooden carving of a squirrel wearing a medieval suit of armor playing the saxophone",
|
||||
"an intricate wooden carving of a squirrel wearing a medieval suit of armor reading a book",
|
||||
"an intricate wooden carving of a squirrel wearing a medieval suit of armor ",
|
||||
"an intricate wooden carving of a squirrel wearing a medieval suit of armor riding a motorcycle",
|
||||
"an intricate wooden carving of a squirrel wearing a medieval suit of armor riding a skateboard",
|
||||
"an intricate wooden carving of a squirrel wearing a medieval suit of armor sitting at a pottery wheel shaping a clay bowl",
|
||||
"an intricate wooden carving of a squirrel wearing a medieval suit of armor wielding a katana",
|
||||
"an intricate wooden carving of a squirrel wearing an elegant ballgown chopping vegetables",
|
||||
"an intricate wooden carving of a squirrel wearing an elegant ballgown dancing",
|
||||
"an intricate wooden carving of a squirrel wearing an elegant ballgown eating a hamburger",
|
||||
"an intricate wooden carving of a squirrel wearing an elegant ballgown playing the saxophone",
|
||||
"an intricate wooden carving of a squirrel wearing an elegant ballgown reading a book",
|
||||
"an intricate wooden carving of a squirrel wearing an elegant ballgown ",
|
||||
"an intricate wooden carving of a squirrel wearing an elegant ballgown riding a motorcycle",
|
||||
"an intricate wooden carving of a squirrel wearing an elegant ballgown riding a skateboard",
|
||||
"an intricate wooden carving of a squirrel wearing an elegant ballgown sitting at a pottery wheel shaping a clay bowl",
|
||||
"an intricate wooden carving of a squirrel wearing an elegant ballgown wielding a katana",
|
||||
"an intricate wooden carving of a squirrel wearing a purple hoodie chopping vegetables",
|
||||
"an intricate wooden carving of a squirrel wearing a purple hoodie dancing",
|
||||
"an intricate wooden carving of a squirrel wearing a purple hoodie eating a hamburger",
|
||||
"an intricate wooden carving of a squirrel wearing a purple hoodie playing the saxophone",
|
||||
"an intricate wooden carving of a squirrel wearing a purple hoodie reading a book",
|
||||
"an intricate wooden carving of a squirrel wearing a purple hoodie ",
|
||||
"an intricate wooden carving of a squirrel wearing a purple hoodie riding a motorcycle",
|
||||
"an intricate wooden carving of a squirrel wearing a purple hoodie riding a skateboard",
|
||||
"an intricate wooden carving of a squirrel wearing a purple hoodie sitting at a pottery wheel shaping a clay bowl",
|
||||
"an intricate wooden carving of a squirrel wearing a purple hoodie wielding a katana",
|
||||
"an intricate wooden carving of a squirrel wielding a katana"];
|
||||
|
||||
let imagen_pieces = [
|
||||
["a DSLR photo of a squirrel", "an intricate wooden carving of a squirrel", "a highly detailed metal sculpture of a squirrel"],
|
||||
["", "wearing a kimono", "wearing a medieval suit of armor", "wearing a purple hoodie", "wearing an elegant ballgown"],
|
||||
["", "reading a book", "riding a motorcycle", "playing the saxophone", "chopping vegetables", "sitting at a pottery wheel shaping a clay bowl",
|
||||
"riding a skateboard", "wielding a katana", "eating a hamburger", "dancing"],
|
||||
];
|
||||
|
||||
const updateCompositionVideo = () => {
|
||||
let phrase = "";
|
||||
for (let depth = 1; depth <= imagen_pieces.length; depth++) {
|
||||
let tagContainer = document.getElementById('compositional_tags_depth_' + depth);
|
||||
let selected = tagContainer.querySelectorAll('.selected');
|
||||
|
||||
// Make sure at most one item is selected at this level.
|
||||
if (selected.length > 1) {
|
||||
// Too many tags selected at this level. Shouldn't have happened, but unselect them.
|
||||
selected.slice(1, selected.length).forEach((chunk) => {
|
||||
chunk.classList = "";
|
||||
});
|
||||
}
|
||||
|
||||
// Make sure at least one item is selected at this level.
|
||||
if (selected.length == 0) {
|
||||
tagContainer.querySelector('span').classList = "selected";
|
||||
updateCompositionVideo();
|
||||
return;
|
||||
}
|
||||
|
||||
let segment = selected[0].getAttribute("data-segment");
|
||||
phrase = phrase + segment;
|
||||
}
|
||||
|
||||
if (captions.includes(phrase)) {
|
||||
let compositionalVideo = document.getElementById('compositionalVideo');
|
||||
let container = compositionalVideo.parentNode;
|
||||
let videoName = phrase.replaceAll(' ', '_') + '_rgbdn_hq_15000.mp4';
|
||||
let sourceURL = "https://pub-b1f092b6867f4495b8f149d222a3bffe.r2.dev/journey_sept28/cropped/full_continuous/" + videoName;
|
||||
console.log('phrase found: ', phrase, sourceURL);
|
||||
|
||||
let width = compositionalVideo.offsetWidth;
|
||||
let height = compositionalVideo.offsetHeight;
|
||||
|
||||
// let oldSourceEl = compositionalVideo.querySelector('source');
|
||||
let oldSourceEl = document.getElementById('compositionalVideoSrc');
|
||||
oldSourceEl.src = sourceURL;
|
||||
|
||||
container.style = "opacity: 0;";
|
||||
setTimeout(() => {
|
||||
container.style = "opacity: 1;";
|
||||
compositionalVideo.load();
|
||||
}, 750);
|
||||
|
||||
let captionEl = document.getElementById('compositionalCaption');
|
||||
if (captionEl)
|
||||
captionEl.innerHTML = phrase;
|
||||
} else {
|
||||
console.log('phrase NOT found: ' + phrase);
|
||||
}
|
||||
};
|
||||
|
||||
const deselect = (element) => {
|
||||
element.classList = ("" + element.classList).replace('selected', ' '); // not clean, what about spaces?
|
||||
}
|
||||
|
||||
const tagClicked = (event) => {
|
||||
event.target.parentNode.querySelectorAll('.selected').forEach(deselect);
|
||||
event.target.classList = "selected";
|
||||
updateCompositionVideo();
|
||||
};
|
||||
|
||||
let phraseContainer = document.querySelector('.compositional .text');
|
||||
imagen_pieces.forEach((phrases, depth) => {
|
||||
depth = depth + 1;
|
||||
let tagContainer = document.createElement("P");
|
||||
tagContainer.classList = "selectable left";
|
||||
tagContainer.id = "compositional_tags_depth_" + depth;
|
||||
|
||||
phrases.forEach((segment, i) => {
|
||||
if (depth > 1) {
|
||||
segment = " " + segment;
|
||||
}
|
||||
|
||||
let tag = document.createElement("SPAN");
|
||||
let text = segment.trim();
|
||||
if (!text)
|
||||
text = '[...]';
|
||||
|
||||
tag.appendChild(document.createTextNode(text));
|
||||
tag.setAttribute("data-segment", segment);
|
||||
tag.onclick = tagClicked;
|
||||
if (i == 0)
|
||||
tag.classList = "selected";
|
||||
|
||||
tagContainer.appendChild(tag);
|
||||
});
|
||||
|
||||
phraseContainer.appendChild(tagContainer);
|
||||
});
|
||||
|
||||
})();
|
||||
|
||||
(function() {
|
||||
// Click to load handlers for 3D meshes.
|
||||
document.querySelectorAll('button.loads-model').forEach((button) => {
|
||||
button.setAttribute('data-action', 'load');
|
||||
button.addEventListener('click', () => {
|
||||
let model = document.getElementById(button.getAttribute("data-controls"));
|
||||
|
||||
if (button.getAttribute('data-action') == 'load') {
|
||||
model.dismissPoster();
|
||||
button.classList = "btn btn-disabled";
|
||||
button.innerHTML = "Hide 3D model";
|
||||
button.setAttribute('data-action', 'unload');
|
||||
} else {
|
||||
model.showPoster();
|
||||
button.classList = "btn btn-primary";
|
||||
button.innerHTML = "Load 3D model";
|
||||
button.setAttribute('data-action', 'load');
|
||||
}
|
||||
|
||||
});
|
||||
});
|
||||
})();
|
||||
@@ -0,0 +1 @@
|
||||
{"name":"DreamFusion: Text-to-3D with 2D Diffusion","short_name":"DreamFusion","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
|
||||
@@ -0,0 +1,896 @@
|
||||
.scroll-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button-block {
|
||||
display: inline-flex;
|
||||
text-align: center;
|
||||
background-color: #f3f3f3;
|
||||
/* Adjust the background color as needed */
|
||||
padding: 5px 20px 0px 20px;
|
||||
/* Adjust the padding as needed */
|
||||
margin: 2px;
|
||||
/* Adjust the margin as needed */
|
||||
border-radius: 4px;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.button-block.clicked {
|
||||
background-color: #d1d0d0;
|
||||
}
|
||||
|
||||
.button-height {
|
||||
line-height: 1;
|
||||
height: fit-content;
|
||||
border-radius: 0px;
|
||||
margin-right: 0px;
|
||||
/* Adjust the image spacing as needed */
|
||||
margin-left: 0px;
|
||||
/* Adjust the image spacing as needed */
|
||||
margin-bottom: 3px;
|
||||
border: 1px solid #000;
|
||||
/* Add border properties */
|
||||
}
|
||||
|
||||
.scroll-content {
|
||||
display: flex;
|
||||
padding: 0px 30px;
|
||||
overflow-x: scroll;
|
||||
width: 100%;
|
||||
margin-right: 0px;
|
||||
/* Adjust the image spacing as needed */
|
||||
margin-left: 0px;
|
||||
/* Adjust the image spacing as needed */
|
||||
/* justify-content: center; */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.arrow {
|
||||
pointer-events: auto;
|
||||
width: 20px;
|
||||
/* Adjust the arrow width as needed */
|
||||
height: 100px;
|
||||
/* Adjust the arrow height as needed */
|
||||
background-color: rgba(0, 0, 0, 0.0);
|
||||
/* Adjust the arrow background color and transparency */
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.arrow-left {
|
||||
left: 0;
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.arrow-right {
|
||||
right: 0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.arrow-left::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: rgb(0, 0, 0);
|
||||
border-top: 10px solid transparent;
|
||||
/* Adjust the arrow size as needed */
|
||||
border-bottom: 10px solid transparent;
|
||||
/* Adjust the arrow size as needed */
|
||||
border-right: 10px solid #fff;
|
||||
/* Adjust the arrow color as needed */
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.arrow-right::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: rgb(0, 0, 0);
|
||||
border-top: 10px solid transparent;
|
||||
/* Adjust the arrow size as needed */
|
||||
border-bottom: 10px solid transparent;
|
||||
/* Adjust the arrow size as needed */
|
||||
border-right: 10px solid #fff;
|
||||
/* Adjust the arrow color as needed */
|
||||
transform: translate(-50%, -50%) rotate(180deg);
|
||||
}
|
||||
|
||||
/* .arrow-left::before {
|
||||
transform: translate(-50%, -50%) rotate(0deg);
|
||||
}
|
||||
.arrow-right::before {
|
||||
transform: translate(-50%, -50%) rotate(180deg);
|
||||
}
|
||||
*/
|
||||
|
||||
.video-container {
|
||||
position: relative;
|
||||
padding-bottom: 56.25%;
|
||||
padding-top: 30px;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
|
||||
.containershadow {
|
||||
box-shadow: 0px 0px 10px #999;
|
||||
border-radius: 15px;
|
||||
padding: 25px 50px;
|
||||
|
||||
}
|
||||
|
||||
.video-container iframe,
|
||||
.video-container object,
|
||||
.video-container embed {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: webflow-icons;
|
||||
src: url("data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBiUAAAC8AAAAYGNtYXDpP+a4AAABHAAAAFxnYXNwAAAAEAAAAXgAAAAIZ2x5ZmhS2XEAAAGAAAADHGhlYWQTFw3HAAAEnAAAADZoaGVhCXYFgQAABNQAAAAkaG10eCe4A1oAAAT4AAAAMGxvY2EDtALGAAAFKAAAABptYXhwABAAPgAABUQAAAAgbmFtZSoCsMsAAAVkAAABznBvc3QAAwAAAAAHNAAAACAAAwP4AZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpAwPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAQAAAAAwACAACAAQAAQAg5gPpA//9//8AAAAAACDmAOkA//3//wAB/+MaBBcIAAMAAQAAAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEBIAAAAyADgAAFAAAJAQcJARcDIP5AQAGA/oBAAcABwED+gP6AQAABAOAAAALgA4AABQAAEwEXCQEH4AHAQP6AAYBAAcABwED+gP6AQAAAAwDAAOADQALAAA8AHwAvAAABISIGHQEUFjMhMjY9ATQmByEiBh0BFBYzITI2PQE0JgchIgYdARQWMyEyNj0BNCYDIP3ADRMTDQJADRMTDf3ADRMTDQJADRMTDf3ADRMTDQJADRMTAsATDSANExMNIA0TwBMNIA0TEw0gDRPAEw0gDRMTDSANEwAAAAABAJ0AtAOBApUABQAACQIHCQEDJP7r/upcAXEBcgKU/usBFVz+fAGEAAAAAAL//f+9BAMDwwAEAAkAABcBJwEXAwE3AQdpA5ps/GZsbAOabPxmbEMDmmz8ZmwDmvxmbAOabAAAAgAA/8AEAAPAAB0AOwAABSInLgEnJjU0Nz4BNzYzMTIXHgEXFhUUBw4BBwYjNTI3PgE3NjU0Jy4BJyYjMSIHDgEHBhUUFx4BFxYzAgBqXV6LKCgoKIteXWpqXV6LKCgoKIteXWpVSktvICEhIG9LSlVVSktvICEhIG9LSlVAKCiLXl1qal1eiygoKCiLXl1qal1eiygoZiEgb0tKVVVKS28gISEgb0tKVVVKS28gIQABAAABwAIAA8AAEgAAEzQ3PgE3NjMxFSIHDgEHBhUxIwAoKIteXWpVSktvICFmAcBqXV6LKChmISBvS0pVAAAAAgAA/8AFtgPAADIAOgAAARYXHgEXFhUUBw4BBwYHIxUhIicuAScmNTQ3PgE3NjMxOAExNDc+ATc2MzIXHgEXFhcVATMJATMVMzUEjD83NlAXFxYXTjU1PQL8kz01Nk8XFxcXTzY1PSIjd1BQWlJJSXInJw3+mdv+2/7c25MCUQYcHFg5OUA/ODlXHBwIAhcXTzY1PTw1Nk8XF1tQUHcjIhwcYUNDTgL+3QFt/pOTkwABAAAAAQAAmM7nP18PPPUACwQAAAAAANciZKUAAAAA1yJkpf/9/70FtgPDAAAACAACAAAAAAAAAAEAAAPA/8AAAAW3//3//QW2AAEAAAAAAAAAAAAAAAAAAAAMBAAAAAAAAAAAAAAAAgAAAAQAASAEAADgBAAAwAQAAJ0EAP/9BAAAAAQAAAAFtwAAAAAAAAAKABQAHgAyAEYAjACiAL4BFgE2AY4AAAABAAAADAA8AAMAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADQAAAAEAAAAAAAIABwCWAAEAAAAAAAMADQBIAAEAAAAAAAQADQCrAAEAAAAAAAUACwAnAAEAAAAAAAYADQBvAAEAAAAAAAoAGgDSAAMAAQQJAAEAGgANAAMAAQQJAAIADgCdAAMAAQQJAAMAGgBVAAMAAQQJAAQAGgC4AAMAAQQJAAUAFgAyAAMAAQQJAAYAGgB8AAMAAQQJAAoANADsd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzUmVndWxhcgBSAGUAZwB1AGwAYQByd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==") format('truetype');
|
||||
font-weight: 400;
|
||||
font-style: normal
|
||||
}
|
||||
|
||||
[class*=" w-icon-"],
|
||||
[class^=w-icon-] {
|
||||
font-family: webflow-icons !important;
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale
|
||||
}
|
||||
|
||||
.w-icon-slider-right:before {
|
||||
content: "\e600";
|
||||
color: white;
|
||||
text-shadow: 2px 0 0 #000, 0 -2px 0 #000, 0 2px 0 #000, -2px 0 0 #000;
|
||||
}
|
||||
|
||||
.w-icon-slider-left:before {
|
||||
content: "\e601";
|
||||
color: white;
|
||||
text-shadow: 2px 0 0 #000, 0 -2px 0 #000, 0 2px 0 #000, -2px 0 0 #000;
|
||||
}
|
||||
|
||||
.w-icon-nav-menu:before {
|
||||
content: "\e602"
|
||||
}
|
||||
|
||||
.w-icon-arrow-down:before,
|
||||
.w-icon-dropdown-toggle:before {
|
||||
content: "\e603"
|
||||
}
|
||||
|
||||
.w-icon-file-upload-remove:before {
|
||||
content: "\e900"
|
||||
}
|
||||
|
||||
.w-icon-file-upload-icon:before {
|
||||
content: "\e903"
|
||||
}
|
||||
|
||||
.w-background-video {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 500px;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.w-background-video>video {
|
||||
background-size: cover;
|
||||
background-position: 50% 50%;
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
right: -100%;
|
||||
bottom: -100%;
|
||||
top: -100%;
|
||||
left: -100%;
|
||||
object-fit: cover;
|
||||
z-index: -100
|
||||
}
|
||||
|
||||
.w-background-video>video::-webkit-media-controls-start-playback-button {
|
||||
display: none !important;
|
||||
-webkit-appearance: none
|
||||
}
|
||||
|
||||
.w-slider {
|
||||
position: relative;
|
||||
/* height: 300px; */
|
||||
text-align: center;
|
||||
background: #ddd;
|
||||
clear: both;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.w-slider-mask {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
white-space: nowrap
|
||||
}
|
||||
|
||||
.w-slide {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 100%;
|
||||
height: 98%;
|
||||
padding-bottom: 30px;
|
||||
white-space: normal;
|
||||
text-align: left
|
||||
}
|
||||
|
||||
.w-slider-nav {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
top: auto;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
padding-top: 10px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
tap-highlight-color: rgba(0, 0, 0, 0)
|
||||
}
|
||||
|
||||
.w-slider-nav.w-round>div {
|
||||
border-radius: 100%
|
||||
}
|
||||
|
||||
.w-slider-nav.w-num>div {
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: .2em .5em;
|
||||
font-size: inherit;
|
||||
line-height: inherit
|
||||
}
|
||||
|
||||
.w-slider-nav.w-shadow>div {
|
||||
box-shadow: 0 0 3px rgba(51, 51, 51, .4)
|
||||
}
|
||||
|
||||
.w-slider-nav-invert {
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.w-slider-nav-invert>div {
|
||||
background-color: rgba(34, 34, 34, .4)
|
||||
}
|
||||
|
||||
.w-slider-nav-invert>div.w-active {
|
||||
background-color: #222
|
||||
}
|
||||
|
||||
.w-slider-dot {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background-color: rgba(255, 255, 255, .4);
|
||||
cursor: pointer;
|
||||
margin: 0 3px .5em;
|
||||
transition: background-color .1s, color .1s
|
||||
}
|
||||
|
||||
.w-slider-dot.w-active {
|
||||
background-color: #fff
|
||||
}
|
||||
|
||||
.w-slider-dot:focus {
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 2px #fff
|
||||
}
|
||||
|
||||
.w-slider-dot:focus.w-active {
|
||||
box-shadow: none
|
||||
}
|
||||
|
||||
.w-slider-arrow-left,
|
||||
.w-slider-arrow-right {
|
||||
position: absolute;
|
||||
width: 80px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
color: #fff;
|
||||
font-size: 40px;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none
|
||||
}
|
||||
|
||||
.w-slider-arrow-left [class*=' w-icon-'],
|
||||
.w-slider-arrow-left [class^=w-icon-],
|
||||
.w-slider-arrow-right [class*=' w-icon-'],
|
||||
.w-slider-arrow-right [class^=w-icon-] {
|
||||
position: absolute
|
||||
}
|
||||
|
||||
.w-slider-arrow-left:focus,
|
||||
.w-slider-arrow-right:focus {
|
||||
outline: 0
|
||||
}
|
||||
|
||||
.w-slider-arrow-left {
|
||||
z-index: 3;
|
||||
right: auto
|
||||
}
|
||||
|
||||
.w-slider-arrow-right {
|
||||
z-index: 4;
|
||||
left: auto
|
||||
}
|
||||
|
||||
.w-icon-slider-left,
|
||||
.w-icon-slider-right {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
width: 1em;
|
||||
height: 1em
|
||||
}
|
||||
|
||||
.w-slider-aria-label {
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px
|
||||
}
|
||||
|
||||
.w-slider-force-show {
|
||||
display: block !important
|
||||
}
|
||||
|
||||
.html-embed-2 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-o-object-fit: fill;
|
||||
object-fit: fill
|
||||
}
|
||||
|
||||
.div-block-9 {
|
||||
overflow: visible;
|
||||
width: 98%;
|
||||
height: 100%;
|
||||
margin-right: auto;
|
||||
margin-left: auto
|
||||
}
|
||||
|
||||
.div-block-9.last_block {
|
||||
position: absolute;
|
||||
left: 101%;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.div-block-9.first_video {
|
||||
position: absolute;
|
||||
left: -200%;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.video_class {
|
||||
width: auto;
|
||||
height: 80%;
|
||||
margin-right: auto;
|
||||
margin-left: auto
|
||||
}
|
||||
|
||||
.video_class.last_video {
|
||||
position: absolute;
|
||||
left: 52%;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0
|
||||
}
|
||||
|
||||
.video_class.mobile {
|
||||
display: none
|
||||
}
|
||||
|
||||
.slider-2 {
|
||||
overflow: hidden;
|
||||
height: 500px
|
||||
}
|
||||
|
||||
.mask {
|
||||
overflow: visible;
|
||||
width: 40%;
|
||||
margin-right: auto;
|
||||
margin-left: auto
|
||||
}
|
||||
|
||||
.nerf_slider_v2 {
|
||||
overflow: hidden;
|
||||
margin: 5px -15px 0;
|
||||
background-color: rgba(56, 56, 56, 0);
|
||||
padding-bottom: 36px;
|
||||
}
|
||||
|
||||
.nerf_slider_v2 h6,
|
||||
.captioned_videos h6 {
|
||||
/* font-style: italic; */
|
||||
display: flex;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
justify-content: center;
|
||||
/* align-items: center; */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* .captioned_videos { */
|
||||
/* padding-bottom: 20px; */
|
||||
/* margin-top: 16px; */
|
||||
/* } */
|
||||
|
||||
.captioned_videos h6 {
|
||||
max-width: 768px;
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
.nerf_slider_v2 h6 {
|
||||
width: 95%;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.nerf_slider_v2 .first_video h6,
|
||||
.nerf_slider_v2 .last_block h6 {
|
||||
max-width: 160px;
|
||||
}
|
||||
|
||||
.citation {
|
||||
margin-left: 10px;
|
||||
/* background-color: #e9e9e9; */
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.citation:not(:first-child) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.citation h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0;
|
||||
font-weight: initial;
|
||||
}
|
||||
|
||||
.citation b {
|
||||
text-decoration: underline;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.citation ul {
|
||||
padding-left: 0px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.citation li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.citation h4 {
|
||||
line-height: normal;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.citation h5 {
|
||||
margin-top: 4px;
|
||||
margin-bottom: 4px;
|
||||
line-height: normal;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.citation h6 {
|
||||
/* margin-top: 4px; */
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.citation img,
|
||||
.citation video {
|
||||
float: right;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.citation p {
|
||||
/* color: steelblue; */
|
||||
/* font-weight: bold; */
|
||||
font-size: 12px;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.citation .conference {
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
/* background-color: PaleGreen; */
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.citation .conference.workshop {
|
||||
background-color: LightSkyBlue;
|
||||
}
|
||||
|
||||
.citation .conference.arxiv {
|
||||
background-color: Gainsboro;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
|
||||
.news,
|
||||
.citation {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.citation h4 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.citation ul {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.authors h5 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.authors h6 {
|
||||
font-size: 16px;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
.show_wide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.btn-search {
|
||||
font-size: 16px;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.authors {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.authors .col-sm-3 {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.authors h5 {
|
||||
font-size: 24px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.authors h5 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.shadowed_text {
|
||||
text-shadow: 4px 0 4px #5fb7f7, 0 -4px 4px #5fb7f7, 0 4px 4px #5fb7f7, -4px 0 4px #5fb7f7;
|
||||
color: white;
|
||||
}
|
||||
|
||||
body {
|
||||
font-weight: 300;
|
||||
font-family: "Source Sans Pro", Calibri, Candara, Arial, sans-serif;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: "Source Sans Pro", Calibri, Candara, Arial, sans-serif;
|
||||
font-weight: 300;
|
||||
line-height: 1.1;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
p,
|
||||
.caption {
|
||||
font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
/* From Ref-NeRF */
|
||||
.video-compare-container {
|
||||
width: 63%;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
display: block;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.video {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.videoMerge {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.cropped-video {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Compositional generation */
|
||||
#compositional_tags_depth_0 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.compositional .text {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.compositional .text .selectable {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.compositional .text .selectable:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.compositional .text .selectable span {
|
||||
padding: 2px;
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.compositional .text .selectable span:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.compositional .text .selectable span:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.compositional .text .selectable span:not(:last-child)::after {
|
||||
content: '|';
|
||||
padding: 2px 2px 2px 8px;
|
||||
margin-right: -2px;
|
||||
margin-left: 2px;
|
||||
background-color: white;
|
||||
color: rgb(161, 161, 161);
|
||||
}
|
||||
|
||||
.compositional .text .selectable span:active {
|
||||
cursor: pointer;
|
||||
background: rgb(171, 218, 191) !important;
|
||||
}
|
||||
|
||||
.compositional.video {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.compositional .text .selectable span.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.compositional .text .selectable span:not(.selected) {
|
||||
font-weight: 300;
|
||||
color: rgb(50, 50, 50);
|
||||
}
|
||||
|
||||
.compositional .text .selectable span:not(.selected):hover {
|
||||
background: rgb(194, 247, 215);
|
||||
}
|
||||
|
||||
.compositional .text .selectable span.selected {
|
||||
color: #055ada;
|
||||
background: rgb(194, 247, 215);
|
||||
}
|
||||
|
||||
.compositional .video-compare-container {
|
||||
width: 100%;
|
||||
max-width: 256px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
transition: opacity 0.75s ease-in;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 575px) {
|
||||
.video-compare-container {
|
||||
padding-top: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.banner {
|
||||
width: 100%;
|
||||
max-height: 128px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.banner {
|
||||
min-height: 128px;
|
||||
}
|
||||
}
|
||||
|
||||
.banner video {
|
||||
max-height: 128px;
|
||||
max-width: 768px;
|
||||
/* text-align: center; */
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.btn-search {
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 12px 20px 12px 20px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.btn-search svg {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
/* .highlight-clean{
|
||||
position:absolute;
|
||||
} */
|
||||
|
||||
hr.divider {
|
||||
max-width: 768px;
|
||||
margin-top: 32px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.row:not(:last-child):not(.authors) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.padding-0 {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.invisible {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.btn-light.disabled {
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
|
||||
/* Gallery */
|
||||
.video-gallery {
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.column {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.video {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.search .card-body {
|
||||
padding: 32px
|
||||
}
|
||||
|
||||
#videoGallery .sticky-top {
|
||||
width: 100%;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.row.search {
|
||||
padding-top: 16px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
max-width: 900px !important;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.row.search .col-sm-12 {
|
||||
max-width: 900px !important;
|
||||
}
|
||||
|
||||
.disappearing {
|
||||
transition-property: background-color;
|
||||
transition-duration: 2s;
|
||||
}
|
||||
|
||||
.display-none {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.model-viewer {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.meshes .controls {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -0,0 +1,118 @@
|
||||
// From https://dorverbin.github.io/refnerf/.
|
||||
// This is based on: http://thenewcode.com/364/Interactive-Before-and-After-Video-Comparison-in-HTML5-Canvas
|
||||
// With additional modifications based on: https://jsfiddle.net/7sk5k4gp/13/
|
||||
|
||||
function playVids(videoId) {
|
||||
var videoMerge = document.getElementById(videoId + "Merge");
|
||||
var vid = document.getElementById(videoId);
|
||||
|
||||
var position = 0.75;
|
||||
var vidWidth = vid.videoWidth/2;
|
||||
var vidHeight = vid.videoHeight;
|
||||
|
||||
var mergeContext = videoMerge.getContext("2d");
|
||||
|
||||
|
||||
if (vid.readyState > 3) {
|
||||
vid.play();
|
||||
|
||||
function trackLocation(e) {
|
||||
// Normalize to [0, 1]
|
||||
bcr = videoMerge.getBoundingClientRect();
|
||||
position = ((e.pageX - bcr.x) / bcr.width);
|
||||
// videoMerge.setAttribute('data-position', position);
|
||||
}
|
||||
function trackLocationTouch(e) {
|
||||
// Normalize to [0, 1]
|
||||
bcr = videoMerge.getBoundingClientRect();
|
||||
position = ((e.touches[0].pageX - bcr.x) / bcr.width);
|
||||
}
|
||||
|
||||
videoMerge.addEventListener("mousemove", trackLocation, false);
|
||||
videoMerge.addEventListener("touchstart", trackLocationTouch, false);
|
||||
videoMerge.addEventListener("touchmove", trackLocationTouch, false);
|
||||
|
||||
|
||||
function drawLoop() {
|
||||
mergeContext.drawImage(vid, 0, 0, vidWidth, vidHeight, 0, 0, vidWidth, vidHeight);
|
||||
var colStart = (vidWidth * position).clamp(0.0, vidWidth);
|
||||
var colWidth = (vidWidth - (vidWidth * position)).clamp(0.0, vidWidth);
|
||||
mergeContext.drawImage(vid, colStart+vidWidth, 0, colWidth, vidHeight, colStart, 0, colWidth, vidHeight);
|
||||
requestAnimationFrame(drawLoop);
|
||||
|
||||
|
||||
var arrowLength = 0.09 * vidHeight;
|
||||
var arrowheadWidth = 0.025 * vidHeight;
|
||||
var arrowheadLength = 0.04 * vidHeight;
|
||||
var arrowPosY = vidHeight / 10;
|
||||
var arrowWidth = 0.007 * vidHeight;
|
||||
var currX = vidWidth * position;
|
||||
|
||||
// Draw circle
|
||||
mergeContext.arc(currX, arrowPosY, arrowLength*0.7, 0, Math.PI * 2, false);
|
||||
mergeContext.fillStyle = "#FFD79340";
|
||||
mergeContext.fill()
|
||||
//mergeContext.strokeStyle = "#444444";
|
||||
//mergeContext.stroke()
|
||||
|
||||
// Draw border
|
||||
mergeContext.beginPath();
|
||||
mergeContext.moveTo(vidWidth*position, 0);
|
||||
mergeContext.lineTo(vidWidth*position, vidHeight);
|
||||
mergeContext.closePath()
|
||||
mergeContext.strokeStyle = "#444444";
|
||||
mergeContext.lineWidth = 5;
|
||||
mergeContext.stroke();
|
||||
|
||||
// Draw arrow
|
||||
mergeContext.beginPath();
|
||||
mergeContext.moveTo(currX, arrowPosY - arrowWidth/2);
|
||||
|
||||
// Move right until meeting arrow head
|
||||
mergeContext.lineTo(currX + arrowLength/2 - arrowheadLength/2, arrowPosY - arrowWidth/2);
|
||||
|
||||
// Draw right arrow head
|
||||
mergeContext.lineTo(currX + arrowLength/2 - arrowheadLength/2, arrowPosY - arrowheadWidth/2);
|
||||
mergeContext.lineTo(currX + arrowLength/2, arrowPosY);
|
||||
mergeContext.lineTo(currX + arrowLength/2 - arrowheadLength/2, arrowPosY + arrowheadWidth/2);
|
||||
mergeContext.lineTo(currX + arrowLength/2 - arrowheadLength/2, arrowPosY + arrowWidth/2);
|
||||
|
||||
// Go back to the left until meeting left arrow head
|
||||
mergeContext.lineTo(currX - arrowLength/2 + arrowheadLength/2, arrowPosY + arrowWidth/2);
|
||||
|
||||
// Draw left arrow head
|
||||
mergeContext.lineTo(currX - arrowLength/2 + arrowheadLength/2, arrowPosY + arrowheadWidth/2);
|
||||
mergeContext.lineTo(currX - arrowLength/2, arrowPosY);
|
||||
mergeContext.lineTo(currX - arrowLength/2 + arrowheadLength/2, arrowPosY - arrowheadWidth/2);
|
||||
mergeContext.lineTo(currX - arrowLength/2 + arrowheadLength/2, arrowPosY);
|
||||
|
||||
mergeContext.lineTo(currX - arrowLength/2 + arrowheadLength/2, arrowPosY - arrowWidth/2);
|
||||
mergeContext.lineTo(currX, arrowPosY - arrowWidth/2);
|
||||
|
||||
mergeContext.closePath();
|
||||
|
||||
mergeContext.fillStyle = "#444444";
|
||||
mergeContext.fill();
|
||||
|
||||
|
||||
|
||||
}
|
||||
requestAnimationFrame(drawLoop);
|
||||
}
|
||||
}
|
||||
|
||||
Number.prototype.clamp = function(min, max) {
|
||||
return Math.min(Math.max(this, min), max);
|
||||
};
|
||||
|
||||
|
||||
function resizeAndPlay(element)
|
||||
{
|
||||
var cv = document.getElementById(element.id + "Merge");
|
||||
cv.width = element.videoWidth/2;
|
||||
cv.height = element.videoHeight;
|
||||
element.play();
|
||||
element.style.height = "0px"; // Hide video without stopping it
|
||||
|
||||
playVids(element.id);
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,3 @@
|
||||
// https://raw.githubusercontent.com/malchata/yall.js/main/dist/yall.js
|
||||
function e(e,o){for(const t in o){const n=o[t];e.addEventListener(t,n.listener||n,n.options||void 0)}}const o="IntersectionObserver"in window&&"IntersectionObserverEntry"in window&&"intersectionRatio"in window.IntersectionObserverEntry.prototype,t=/baidu|(?:google|bing|yandex|duckduck)bot/i.test(navigator.userAgent),n=["src","poster"];function r(e,o){for(const t of n)t in e.dataset&&(e.setAttribute(t,e.dataset[t]),e.classList.contains(o)&&e.classList.remove(o))}function s(e,o,t,n){if("VIDEO"==e.nodeName){const t=Array.from(e.querySelectorAll("source"));for(const e of t)r(e,o);e.load()}r(e,o);const s=e.classList;s.contains(t)&&(s.remove(t),s.add(n))}function i(n){const r=n?.lazyClass||"lazy",i=n?.lazyBackgroundClass||"lazy-bg",c=n?.lazyBackgroundLoaded||"lazy-bg-loaded",a=n?.threshold||200,l=n?.events||{},d=n?.observeChanges||!1,f=n?.observeRootSelector||"body",u=n?.mutationObserverOptions||{childList:!0,subtree:!0},b=`video.${r},.${i}`;let v=Array.from(document.querySelectorAll(b));for(const o of v)e(o,l);if(!0===o&&!1===t){var y=new IntersectionObserver(e=>{for(const o of e)if(o.isIntersecting||o.intersectionRatio){const{target:e}=o;s(e,r,i,c),y.unobserve(e),v=v.filter(o=>o!=e),0===v.length&&!1===d&&y.disconnect()}},{rootMargin:`${a}px 0%`});for(const e of v)y.observe(e);d&&new MutationObserver(()=>{const n=document.querySelectorAll(b);for(const r of n)!1===v.includes(r)&&(v.push(r),e(r,l),!0===o&&!1===t&&y.observe(r))}).observe(document.querySelector(f),u)}else if(t)for(const e of v)s(e,r,i,c)} window.yall = i;
|
||||
//# sourceMappingURL=yall.js.map
|
||||
@@ -0,0 +1,447 @@
|
||||
<!DOCTYPE html>
|
||||
<html class=" w-mod-ix">
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<style>
|
||||
.wf-force-outline-none[tabindex="-1"]:focus {
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML"></script>
|
||||
|
||||
<!-- Google tag (gtag.js) -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-WNGS4SZ3C7"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() { dataLayer.push(arguments); }
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'G-WNGS4SZ3C7');
|
||||
</script>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<title>Generating Physically Stable and Buildable LEGO Designs from Text</title>
|
||||
<link rel="icon" type="image/x-icon" href="all_results/images/sofa.png">
|
||||
<link rel="stylesheet" href="images/bootstrap.min.css">
|
||||
<link href="images/css.css" rel="stylesheet" type="text/css">
|
||||
<link rel="stylesheet" href="images/Highlight-Clean.css">
|
||||
<link rel="stylesheet" href="images/styles.css">
|
||||
|
||||
<link rel="manifest" href="images/site.webmanifest">
|
||||
|
||||
<meta property="og:site_name" content="Generating Physically Stable and Buildable LEGO Designs from Text">
|
||||
<!-- <meta property="og:type" content="video.other"> -->
|
||||
<meta property="og:title" content="Generating Physically Stable and Buildable LEGO Designs from Text">
|
||||
<!-- <meta property="og:description" content=""> -->
|
||||
<!-- <meta property="og:url" content=""> -->
|
||||
<!-- <meta property="og:image" content="">
|
||||
<meta property="og:video" content=""> -->
|
||||
|
||||
<!-- Twitter Meta Tags -->
|
||||
<!-- <meta name="twitter:card" content="">
|
||||
<meta property="twitter:url" content=""> -->
|
||||
<meta name="twitter:title" content="Generating Physically Stable and Buildable LEGO Designs from Text">
|
||||
<meta name="twitter:title" content="Generating Physically Stable and Buildable LEGO Designs from Text">
|
||||
<!-- <meta name="twitter:description" content=""> -->
|
||||
<!-- <meta name="twitter:image" content=""> -->
|
||||
<!-- <meta name="twitter:video" content=""> -->
|
||||
|
||||
|
||||
<script src="images/video_comparison.js"></script>
|
||||
<script type="module" src="images/model-viewer.min.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<!-- <div class="banner">
|
||||
<video class="video lazy" poster="" autoplay="autoplay" loop="" playsinline="" muted="muted">
|
||||
<source data-src="" type="video/mp4" src="">
|
||||
</video>
|
||||
</div> -->
|
||||
<div class="highlight-clean" style="padding-bottom: 20px;">
|
||||
<div class="container" style="padding-bottom: 10px; max-width: 1000px;">
|
||||
<h1 class="text-center"><b>Generating Physically Stable and Buildable LEGO Designs from Text</b></h1>
|
||||
</div>
|
||||
<div class="container" style="max-width: 900px;">
|
||||
<div class="row authors institute">
|
||||
<div class="col-sm-12">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- <hr class="divider"> -->
|
||||
<hr style="max-width: 1400px;">
|
||||
<div class="container" style="max-width: 1400px;">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<p>
|
||||
We provide additional video results on this webpage.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="max-width: 1400px;">
|
||||
<h2 class="text-center" style="margin-bottom: 30px; margin-top: 10px;">Step by step generation of LEGO structures from text</h2>
|
||||
|
||||
|
||||
<div class="row" style="display: flex; align-items: center;">
|
||||
<div class="col" style="flex: 1 1 20%;">
|
||||
<video autoplay="autoplay" controls="controls" loop="loop" muted="muted"
|
||||
src="all_results/stepBystep/03467517_8f4b1f242bc014b88fdda65f2c9bf85.mp4"
|
||||
style="width: 100%" type="video/mp4"></video>
|
||||
</div>
|
||||
<div class="col" style="flex: 1 1 20%;">
|
||||
<video autoplay="autoplay" controls="controls" loop="loop" muted="muted"
|
||||
src="all_results/stepBystep/04530566_1f883bf1bf0f6bc7a993db466b6d73d3_fv40.mp4"
|
||||
style="width: 100%" type="video/mp4"></video>
|
||||
</div>
|
||||
<div class="col" style="flex: 1 1 20%;">
|
||||
<video autoplay="autoplay" controls="controls" loop="loop" muted="muted"
|
||||
src="all_results/stepBystep/04530566_410b12d445e5deb49588e71e21de9f30_fov40.mp4"
|
||||
style="width: 100%" type="video/mp4"></video>
|
||||
</div>
|
||||
<div class="col" style="flex: 1 1 20%;">
|
||||
<video autoplay="autoplay" controls="controls" loop="loop" muted="muted"
|
||||
src="all_results/stepBystep/02871439_b1b511bda428926c180cff5124af98b1.mp4"
|
||||
style="width: 100%" type="video/mp4"></video>
|
||||
</div>
|
||||
<div class="col" style="flex: 1 1 20%;">
|
||||
<video autoplay="autoplay" controls="controls" loop="loop" muted="muted"
|
||||
src="all_results/stepBystep/04379243_80b2eb0e500bca46f3412e3273fc1682_fov40.mp4"
|
||||
style="width: 100%" type="video/mp4"></video>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" style="display: flex; align-items: center;">
|
||||
<div class="col" style="flex: 1 1 20%;">
|
||||
<p style="font-family: Chalkduster; font-size: 16px; margin-top: 5px; text-align: center;">
|
||||
"An asymmetrical six-string guitar [...]"
|
||||
</p>
|
||||
</div>
|
||||
<div class="col" style="flex: 1 1 20%;">
|
||||
<p style="font-family: Chalkduster; font-size: 16px; margin-top: 5px; text-align: center;">
|
||||
"A streamlined vessel with a long, narrow hull [...]"
|
||||
</p>
|
||||
</div>
|
||||
<div class="col" style="flex: 1 1 20%;">
|
||||
<p style="font-family: Chalkduster; font-size: 16px; margin-top: 5px; text-align: center;">
|
||||
"A streamlined, elongated vessel [...]"
|
||||
</p>
|
||||
</div>
|
||||
<div class="col" style="flex: 1 1 20%;">
|
||||
<p style="font-family: Chalkduster; font-size: 16px; margin-top: 5px; text-align: center;">
|
||||
"A layered bookshelf [...]"
|
||||
</p>
|
||||
</div>
|
||||
<div class="col" style="flex: 1 1 20%;">
|
||||
<p style="font-family: Chalkduster; font-size: 16px; margin-top: 5px; text-align: center;">
|
||||
"A rectangular table [...]"
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" style="display: flex; align-items: center;">
|
||||
<div class="col" style="flex: 1 1 20%;">
|
||||
<video autoplay="autoplay" controls="controls" loop="loop" muted="muted"
|
||||
src="all_results/stepBystep/04256520_a3feac5d875f764c1961e650f3cfa396.mp4"
|
||||
style="width: 100%" type="video/mp4"></video>
|
||||
</div>
|
||||
<div class="col" style="flex: 1 1 20%;">
|
||||
<video autoplay="autoplay" controls="controls" loop="loop" muted="muted"
|
||||
src="all_results/stepBystep/03001627_7a712ca74183d8c235836c728d324152.mp4"
|
||||
style="width: 100%" type="video/mp4"></video>
|
||||
</div>
|
||||
<div class="col" style="flex: 1 1 20%;">
|
||||
<video autoplay="autoplay" controls="controls" loop="loop" muted="muted"
|
||||
src="all_results/stepBystep/02958343_eb471949c658f39eca736b1d30b87e32_fov40.mp4"
|
||||
style="width: 100%" type="video/mp4"></video>
|
||||
</div>
|
||||
<div class="col" style="flex: 1 1 20%;">
|
||||
<video autoplay="autoplay" controls="controls" loop="loop" muted="muted"
|
||||
src="all_results/stepBystep/02828884_4d6b053f11e784e2a136ebdce43e4200.mp4"
|
||||
style="width: 100%" type="video/mp4"></video>
|
||||
</div>
|
||||
<div class="col" style="flex: 1 1 20%;">
|
||||
<video autoplay="autoplay" controls="controls" loop="loop" muted="muted"
|
||||
src="all_results/stepBystep/03001627_a366bbec303662a3ec545e4e9c852271.mp4"
|
||||
style="width: 100%" type="video/mp4"></video>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" style="display: flex; align-items: center;">
|
||||
<div class="col" style="flex: 1 1 20%;">
|
||||
<p style="font-family: Chalkduster; font-size: 16px; margin-top: 5px; text-align: center;">
|
||||
"A sofa with a rectangular base [...]"
|
||||
</p>
|
||||
</div>
|
||||
<div class="col" style="flex: 1 1 20%;">
|
||||
<p style="font-family: Chalkduster; font-size: 16px; margin-top: 5px; text-align: center;">
|
||||
"A high-backed chair [...]"
|
||||
</p>
|
||||
</div>
|
||||
<div class="col" style="flex: 1 1 20%;">
|
||||
<p style="font-family: Chalkduster; font-size: 16px; margin-top: 5px; text-align: center;">
|
||||
"A classic-style car with a prominent front grille [...]"
|
||||
</p>
|
||||
</div>
|
||||
<div class="col" style="flex: 1 1 20%;">
|
||||
<p style="font-family: Chalkduster; font-size: 16px; margin-top: 5px; text-align: center;">
|
||||
"A rectangular bench [...]"
|
||||
</p>
|
||||
</div>
|
||||
<div class="col" style="flex: 1 1 20%;">
|
||||
<p style="font-family: Chalkduster; font-size: 16px; margin-top: 5px; text-align: center;">
|
||||
"A minimalist chair featuring a straight backrest with an arched top [...]"
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr style="max-width: 1400px;">
|
||||
|
||||
<div class="container" style="max-width: 1400px;">
|
||||
<h2 class="text-center" style="margin-bottom: 30px; margin-top: 10px;">Automated assembly of generated LEGO structures using robots (8x speed)</h2>
|
||||
|
||||
<div class="row" style="display: flex; align-items: center;">
|
||||
<div class="col" style="flex: 1 1 40%;">
|
||||
<video autoplay="autoplay" controls="controls" loop="loop" muted="muted"
|
||||
src="all_results/robots/vessel_8x.mp4"
|
||||
style="width: 100%" type="video/mp4"></video>
|
||||
</div>
|
||||
<div class="col" style="flex: 1 1 40%;">
|
||||
<video autoplay="autoplay" controls="controls" loop="loop" muted="muted"
|
||||
src="all_results/robots/guitar_8x.mp4"
|
||||
style="width: 100%" type="video/mp4"></video>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" style="display: flex; align-items: center;">
|
||||
<div class="col" style="flex: 1 1 40%;">
|
||||
<p style="font-family: Chalkduster; font-size: 16px; margin-top: 5px; text-align: center;">
|
||||
"A streamlined vessel with a long, narrow hull [...]"
|
||||
</p>
|
||||
</div>
|
||||
<div class="col" style="flex: 1 1 40%;">
|
||||
<p style="font-family: Chalkduster; font-size: 16px; margin-top: 5px; text-align: center;">
|
||||
"An asymmetrical six-string guitar [...]"
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr style="max-width: 1400px;">
|
||||
|
||||
<div class="container" style="max-width: 1400px;">
|
||||
<h2 class="text-center" style="margin-bottom: 30px; margin-top: 10px;">Generated Textured LEGO Models</h2>
|
||||
|
||||
<div class="row" style="display: flex; align-items: center;">
|
||||
<div class="col" style="flex: 1 1 20%;">
|
||||
<video autoplay="autoplay" controls="controls" loop="loop" muted="muted"
|
||||
src="all_results/texture/others/rustic_stone_bench_full_color_rotate.mp4"
|
||||
style="width: 100%" type="video/mp4"></video>
|
||||
</div>
|
||||
<div class="col" style="flex: 1 1 20%;">
|
||||
<video autoplay="autoplay" controls="controls" loop="loop" muted="muted"
|
||||
src="all_results/texture/others/hot_rod_with_full_color_rotate.mp4"
|
||||
style="width: 100%" type="video/mp4"></video>
|
||||
</div>
|
||||
<div class="col" style="flex: 1 1 20%;">
|
||||
<video autoplay="autoplay" controls="controls" loop="loop" muted="muted"
|
||||
src="all_results/texture/others/rustic_farmhouse_chair_full_color_rotate.mp4"
|
||||
style="width: 100%" type="video/mp4"></video>
|
||||
</div>
|
||||
<div class="col" style="flex: 1 1 20%;">
|
||||
<video autoplay="autoplay" controls="controls" loop="loop" muted="muted"
|
||||
src="all_results/texture/others/live_edge_walnut_full_color_rotate.mp4"
|
||||
style="width: 100%" type="video/mp4"></video>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" style="display: flex; align-items: center;">
|
||||
<div class="col" style="flex: 1 1 20%;">
|
||||
<p style="font-family: Chalkduster; font-size: 16px; margin-top: 5px; text-align: center;">
|
||||
"Rustic stone bench with moss growth [...]"
|
||||
</p>
|
||||
</div>
|
||||
<div class="col" style="flex: 1 1 20%;">
|
||||
<p style="font-family: Chalkduster; font-size: 16px; margin-top: 5px; text-align: center;">
|
||||
"Hot rod with flame paintwork [...]"
|
||||
</p>
|
||||
</div>
|
||||
<div class="col" style="flex: 1 1 20%;">
|
||||
<p style="font-family: Chalkduster; font-size: 16px; margin-top: 5px; text-align: center;">
|
||||
"Rustic farmhouse chair built from reclaimed wood [...]"
|
||||
</p>
|
||||
</div>
|
||||
<div class="col" style="flex: 1 1 20%;">
|
||||
<p style="font-family: Chalkduster; font-size: 16px; margin-top: 5px; text-align: center;">
|
||||
"Live edge walnut table [...]"
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" style="display: flex; align-items: center;">
|
||||
<div class="col" style="flex: 1 1 20%;">
|
||||
<video autoplay="autoplay" controls="controls" loop="loop" muted="muted"
|
||||
src="all_results/texture/sofa/comfortable_lounge_chair_full_color_rotate.mp4"
|
||||
style="width: 100%" type="video/mp4"></video>
|
||||
</div>
|
||||
<div class="col" style="flex: 1 1 20%;">
|
||||
<video autoplay="autoplay" controls="controls" loop="loop" muted="muted"
|
||||
src="all_results/texture/sofa/cyberpunk_holographic_material_full_color_rotate.mp4"
|
||||
style="width: 100%" type="video/mp4"></video>
|
||||
</div>
|
||||
<div class="col" style="flex: 1 1 20%;">
|
||||
<video autoplay="autoplay" controls="controls" loop="loop" muted="muted"
|
||||
src="all_results/texture/sofa/rustic_farmhouse_armchair_full_color_rotate.mp4"
|
||||
style="width: 100%" type="video/mp4"></video>
|
||||
</div>
|
||||
<div class="col" style="flex: 1 1 20%;">
|
||||
<video autoplay="autoplay" controls="controls" loop="loop" muted="muted"
|
||||
src="all_results/texture//sofa/vintage_floral_tapestry_full_color_rotate.mp4"
|
||||
style="width: 100%" type="video/mp4"></video>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" style="display: flex; align-items: center;">
|
||||
<div class="col" style="flex: 1 1 20%;">
|
||||
<p style="font-family: Chalkduster; font-size: 16px; margin-top: 5px; text-align: center;">
|
||||
"Comfortable lounge chair wrapped in Japanese shibori fabric [...]"
|
||||
</p>
|
||||
</div>
|
||||
<div class="col" style="flex: 1 1 20%;">
|
||||
<p style="font-family: Chalkduster; font-size: 16px; margin-top: 5px; text-align: center;">
|
||||
"Cyberpunk holographic material with neon purple and blue gradients [...]"
|
||||
</p>
|
||||
</div>
|
||||
<div class="col" style="flex: 1 1 20%;">
|
||||
<p style="font-family: Chalkduster; font-size: 16px; margin-top: 5px; text-align: center;">
|
||||
"Rustic farmhouse armchair built from reclaimed wood [...]"
|
||||
</p>
|
||||
</div>
|
||||
<div class="col" style="flex: 1 1 20%;">
|
||||
<p style="font-family: Chalkduster; font-size: 16px; margin-top: 5px; text-align: center;">
|
||||
"Vintage floral tapestry with deep reds and golds [...]"
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" style="display: flex; align-items: center;">
|
||||
<div class="col" style="flex: 1 1 20%;">
|
||||
<video autoplay="autoplay" controls="controls" loop="loop" muted="muted"
|
||||
src="all_results/texture/bookshelf/gothic_cathedral_bookshelf_full_color_rotate.mp4"
|
||||
style="width: 100%" type="video/mp4"></video>
|
||||
</div>
|
||||
<div class="col" style="flex: 1 1 20%;">
|
||||
<video autoplay="autoplay" controls="controls" loop="loop" muted="muted"
|
||||
src="all_results/texture/bookshelf/japanese_sliding_bookcase_full_color_rotate.mp4"
|
||||
style="width: 100%" type="video/mp4"></video>
|
||||
</div>
|
||||
<div class="col" style="flex: 1 1 20%;">
|
||||
<video autoplay="autoplay" controls="controls" loop="loop" muted="muted"
|
||||
src="all_results/texture/bookshelf/victorian_library_shelving_full_color_rotate.mp4"
|
||||
style="width: 100%" type="video/mp4"></video>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" style="display: flex; align-items: center;">
|
||||
<div class="col" style="flex: 1 1 20%;">
|
||||
<p style="font-family: Chalkduster; font-size: 16px; margin-top: 5px; text-align: center;">
|
||||
"Gothic cathedral bookshelf with arch details, medieval style [...]"
|
||||
</p>
|
||||
</div>
|
||||
<div class="col" style="flex: 1 1 20%;">
|
||||
<p style="font-family: Chalkduster; font-size: 16px; margin-top: 5px; text-align: center;">
|
||||
"Japanese sliding bookcase with shoji screens, traditional design [...]"
|
||||
</p>
|
||||
</div>
|
||||
<div class="col" style="flex: 1 1 20%;">
|
||||
<p style="font-family: Chalkduster; font-size: 16px; margin-top: 5px; text-align: center;">
|
||||
"Victorian library shelving with carved moldings [...]"
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr style="max-width: 1400px;">
|
||||
<div class="container" style="max-width: 1400px;">
|
||||
<h2 class="text-center" style="margin-bottom: 30px; margin-top: 10px;">Generated Colored LEGO Models</h2>
|
||||
|
||||
|
||||
<div class="row" style="display: flex; align-items: center;">
|
||||
<div class="col" style="flex: 1 1 20%;">
|
||||
<video autoplay="autoplay" controls="controls" loop="loop" muted="muted"
|
||||
src="all_results/color/guitar/guitar_rotate.mp4"
|
||||
style="width: 100%" type="video/mp4"></video>
|
||||
</div>
|
||||
<div class="col" style="flex: 1 1 20%;">
|
||||
<video autoplay="autoplay" controls="controls" loop="loop" muted="muted"
|
||||
src="all_results/color/guitar/purple_rotate.mp4"
|
||||
style="width: 100%" type="video/mp4"></video>
|
||||
</div>
|
||||
<div class="col" style="flex: 1 1 20%;">
|
||||
<video autoplay="autoplay" controls="controls" loop="loop" muted="muted"
|
||||
src="all_results/color/guitar/steel_rotate.mp4"
|
||||
style="width: 100%" type="video/mp4"></video>
|
||||
</div>
|
||||
<div class="col" style="flex: 1 1 20%;">
|
||||
<video autoplay="autoplay" controls="controls" loop="loop" muted="muted"
|
||||
src="all_results/color/guitar/sunburst_rotate.mp4"
|
||||
style="width: 100%" type="video/mp4"></video>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" style="display: flex; align-items: center;">
|
||||
<div class="col" style="flex: 1 1 20%;">
|
||||
<p style="font-family: Chalkduster; font-size: 16px; margin-top: 5px; text-align: center;">
|
||||
"Parlor guitar with ladder bracing [...]"
|
||||
</p>
|
||||
</div>
|
||||
<div class="col" style="flex: 1 1 20%;">
|
||||
<p style="font-family: Chalkduster; font-size: 16px; margin-top: 5px; text-align: center;">
|
||||
"Electric guitar in metallic purple [...]"
|
||||
</p>
|
||||
</div>
|
||||
<div class="col" style="flex: 1 1 20%;">
|
||||
<p style="font-family: Chalkduster; font-size: 16px; margin-top: 5px; text-align: center;">
|
||||
"Steel resonator with engraved body[...]"
|
||||
</p>
|
||||
</div>
|
||||
<div class="col" style="flex: 1 1 20%;">
|
||||
<p style="font-family: Chalkduster; font-size: 16px; margin-top: 5px; text-align: center;">
|
||||
"Sunburst Les Paul with amber finish [...]"
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="images/polyfill.js"></script>
|
||||
<script src="images/yall.js"></script>
|
||||
<script>
|
||||
yall(
|
||||
{
|
||||
observeChanges: true
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<script src="images/scripts.js"></script>
|
||||
<script src="images/jquery.min.js"></script>
|
||||
<script src="images/bootstrap.bundle.min.js"></script>
|
||||
<script src="images/webflow.fd002feec.js"></script>
|
||||
|
||||
<!-- Import the component -->
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user