Add landing page
This commit is contained in:
isUnknown
parent
9439de0603
commit
aaf1aa7890
603 changed files with 637 additions and 1 deletions
43
private/site/templates/agency.php
Normal file
43
private/site/templates/agency.php
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<?= snippet('header') ?>
|
||||
|
||||
<header class="header">
|
||||
<h1 class="header__logo" data-title="<?= $site->title() ?>">INFO</h1>
|
||||
<div class="header__views views header__views--unvisible" style="opacity: 1">
|
||||
<button class="views__btn views__btn--close" style="display: block">
|
||||
<img src="<?= $kirby->url('assets') ?>/svg/close.svg" alt="">
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="agency">
|
||||
<section class="agency__presentation"><?= $site->presentation()->kt() ?></section>
|
||||
<section class="agency__projects">
|
||||
<h1 class="majorProjects">Projets principaux</h1>
|
||||
<?php foreach ($site->children()->sortBy('start', 'desc') as $project): ?>
|
||||
<?php if ($project->major() == 'true'): ?>
|
||||
<?php if ($project->start()->isNotEmpty() && $project->end()->isNotEmpty()) :?>
|
||||
<?= $project->start() ?> - <?= $project->end() ?> – <?= $project->title() ?><br />
|
||||
<?php else : ?>
|
||||
<?= $project->start() ?><?= $project->end() ?> – <?= $project->title() ?><br />
|
||||
<?php endif ?>
|
||||
<?php endif ?>
|
||||
<?php endforeach ?>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
history.pushState(null, '<?= $site->title() ?>', '<?= $site->url() ?>')
|
||||
history.pushState(null, '<?= $page->title() ?>', '<?= $page->url() ?>')
|
||||
|
||||
window.onpopstate = function() {
|
||||
window.location.href = window.location.href
|
||||
}
|
||||
document.querySelector('.views__btn--close').addEventListener('click', () => {
|
||||
document.location.replace('<?= $site->url() ?>')
|
||||
})
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
1
private/site/templates/default.php
Normal file
1
private/site/templates/default.php
Normal file
|
|
@ -0,0 +1 @@
|
|||
<h1><?= $page->title() ?></h1>
|
||||
131
private/site/templates/home.php
Normal file
131
private/site/templates/home.php
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
<?= snippet('header') ?>
|
||||
|
||||
<header class="header">
|
||||
<a class="logoBtn" href="<?= $site->find('agence')->url() ?>"><h1 class="header__logo header__logo--big">DATA</h1></a>
|
||||
<div class="header__views views">
|
||||
<button class="views__btn views__btn--smaller">
|
||||
<img src="./assets/svg/smaller.svg" />
|
||||
</button>
|
||||
<button class="views__btn views__btn--bigger">
|
||||
<img src="./assets/svg/bigger.svg" />
|
||||
</button>
|
||||
<button class="views__btn views__btn--close hide">
|
||||
<img src="./assets/svg/close.svg" alt="">
|
||||
</button>
|
||||
<button class="views__btn--mobile hide">
|
||||
<h1>Liste</h1>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="grid grid--5">
|
||||
<?php
|
||||
$allBlocks = [];
|
||||
|
||||
foreach($site->children()->listed() as $project) {
|
||||
if ($project->coverImage()->isNotEmpty()) {
|
||||
$block = [
|
||||
"pic" => $project->coverImage()->toFile(),
|
||||
"projectTitle" => $project->title(),
|
||||
"caption" => $project->coverCaption(),
|
||||
"link" => $project->url(),
|
||||
"showHome" => 'true',
|
||||
"ref" => $project->ref()
|
||||
];
|
||||
array_push($allBlocks, $block);
|
||||
};
|
||||
|
||||
if ($project->blocks()->isNotEmpty()) {
|
||||
$pictures = $project->blocks()->toStructure();
|
||||
|
||||
foreach ($pictures as $picture) {
|
||||
if ($picture->home() == "true") {
|
||||
$block = [
|
||||
"pic" => $picture->pic()->toFile(),
|
||||
"projectTitle" => $project->title(),
|
||||
"caption" => $picture->caption(),
|
||||
"link" => $project->url(),
|
||||
"ref" => $project->ref()
|
||||
];
|
||||
|
||||
array_push($allBlocks, $block);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if ($site->orderprojects() == 'false') shuffle($allBlocks);
|
||||
foreach($allBlocks as $block) {
|
||||
echo '<a class="toProject toProject--wait" data-title="' . $block["projectTitle"] . '" href="' . $block["link"] . '">';
|
||||
echo '<figure class="block hide">';
|
||||
echo "<img class=\"block__image\" src=\""
|
||||
. $block["pic"]->url()
|
||||
. "\" loading=\"lazy\" srcset=\"" . $block["pic"]->srcset() . "\" />";
|
||||
echo '<figcaption class="block__caption">' . '<span class="block__ref">' . $block["ref"] . '</span> ' . $block["caption"] . '</figcation>';
|
||||
echo '</figure>';
|
||||
echo "</a>";
|
||||
}
|
||||
?>
|
||||
</section>
|
||||
|
||||
<section class="project hide" style="display: none"></section>
|
||||
|
||||
<section class="list hide" style ="display: none">
|
||||
<?php
|
||||
foreach ($site->children()->sortBy('end', 'desc', 'start', 'desc') as $project) {
|
||||
if ($project->coverImage()->isNotEmpty()) {
|
||||
echo '<a class="list__project projectLine" href="' . $project->url() . '">';
|
||||
echo '<div class="projectLine__cell projectLine__cell--image cell"><img class="cell__image" src="' . $project->coverImage()->toFile()->url() . '" srcset="' . $project->coverImage()->toFile()->srcset() . '" /></div>';
|
||||
echo '<div class="projectLine__cell projectLine__cell--title cell"><p class="cell__text cell__text--title"> <span class="cell__text--ref">' . $project->ref() . '</span> ' . $project->title() . '</p></div>';
|
||||
echo '<div class="projectLine__cell projectLine__cell--title cell"><p class="cell__text cell__text--place">' . $project->place() . '</p></div>';
|
||||
echo '<div class="projectLine__cell projectLine__cell--title cell"><p class="cell__text cell__text--dates">';
|
||||
if ($project->start()->isNotEmpty() && $project->end()->isNotEmpty()) {
|
||||
echo $project->start() . ' - ' . $project->end();
|
||||
} else if ($project->start()->isNotEmpty() || $project->end()->isNotEmpty()) {
|
||||
echo $project->start() . $project->end();
|
||||
};
|
||||
echo '</p></div>';
|
||||
echo '<div class="projectLine__cell projectLine__cell--title cell"><p class="cell__text cell__text--architects">' . $project->architects() . '</p></div>';
|
||||
echo '<div class="projectLine__cell projectLine__cell--title cell"><p class="cell__text cell__text--mo">' . $project->mo() . '</p></div>';
|
||||
echo '<div class="projectLine__cell projectLine__cell--title cell"><p class="cell__text cell__text--size">' . $project->size() . '</p></div>';
|
||||
echo '<div class="projectLine__cell projectLine__cell--title cell"><p class="cell__text cell__text--state">' . $project->state() . '</p></div>';
|
||||
echo '</a>';
|
||||
}
|
||||
}
|
||||
?>
|
||||
</section>
|
||||
<section class="list--mobile" style="display: none">
|
||||
<?php
|
||||
foreach ($site->children()->sortBy('end', 'desc', 'start', 'desc') as $project) {
|
||||
if ($project->coverImage()->isNotEmpty()) {
|
||||
echo '<a class="list__project--mobile projectLine--mobile" href="' . $project->url() . '">';
|
||||
echo '<div class="projectLine__cell--mobile projectLine__cell--image--mobile cell--mobile"><img class="cell__image--mobile" loading="lazy" src="' . $project->coverImage()->toFile()->url() . '" srcset="' . $project->coverImage()->toFile()->srcset() . '" /></div>';
|
||||
echo '<div class="projectLine__cell--mobile projectLine__cell--summary--mobile cell--mobile">';
|
||||
echo '<p class="cell__text--mobile cell__text--title--mobile"> <span class="cell__text--ref--mobile">' . $project->ref() . '</span> ' . $project->title() . '</br />';
|
||||
if ($project->start()->isNotEmpty() && $project->end()->isNotEmpty()) {
|
||||
echo $project->start() . ' - ' . $project->end() . ', ' . $project->place() . '<br />';
|
||||
} else if ($project->start()->isNotEmpty() || $project->end()->isNotEmpty()) {
|
||||
echo $project->start() . $project->end() . ', ' . $project->place() . '<br />';
|
||||
}
|
||||
if ($project->architects()->isNotEmpty()) {
|
||||
echo 'MOE : ' . $project->architects() . '<br />';
|
||||
}
|
||||
if ($project->moa()->isNotEmpty()) {
|
||||
echo 'MOA : ' . $project->moa() . '<br />';
|
||||
}
|
||||
if ($project->size()->isNotEmpty() && $project->budget()->isNotEmpty()) {
|
||||
echo $project->size() . ', ' . $project->budget();
|
||||
} else if ($project->size()->isNotEmpty() || $project->budget()->isNotEmpty()) {
|
||||
echo $project->size();
|
||||
}
|
||||
echo '</p>';
|
||||
echo '</div>';
|
||||
echo '</a>';
|
||||
}
|
||||
}
|
||||
?>
|
||||
</section>
|
||||
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
|
||||
<?= js('./assets/js/main.js') ?>
|
||||
</body>
|
||||
</html>
|
||||
157
private/site/templates/project.php
Normal file
157
private/site/templates/project.php
Normal file
|
|
@ -0,0 +1,157 @@
|
|||
<?= snippet('header') ?>
|
||||
|
||||
<header class="header">
|
||||
<a href="<?= $site->find('agence')->url() ?>"><h1 class="header__logo">DATA</h1></a>
|
||||
<div class="header__views views header__views--unvisible" style="opacity: 1">
|
||||
<button class="views__btn views__btn--close" style="display: block">
|
||||
<img src="/assets/svg/close.svg" alt="">
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="project">
|
||||
<div class="projectContainer">
|
||||
<!-- Slider main container -->
|
||||
<div class="swiper-container">
|
||||
<!-- Additional required wrapper -->
|
||||
<div class="swiper-wrapper">
|
||||
<!-- Slides -->
|
||||
|
||||
<!-- Image principale -->
|
||||
<div class="swiper-slide">
|
||||
<img class="swiper-slide__image" src="<?= $page->coverImage()->toFile()->url() ?>" srcset=" <?= $page->coverImage()->toFile()->srcset() ?>" />
|
||||
</div>
|
||||
|
||||
<!-- Galerie -->
|
||||
<?php
|
||||
|
||||
$images = $page->blocks()->toStructure();
|
||||
|
||||
foreach ($images as $image): ?>
|
||||
<?php if ($image->project() == 'true' && $image->pic() !== NULL): ?>
|
||||
<div class="swiper-slide">
|
||||
<img class="swiper-slide__image" src="<?= $image->pic()->toFile()->url() ?>" srcset=" <?= $image->pic()->toFile()->srcset() ?>" />
|
||||
</div>
|
||||
<?php endif ?>
|
||||
<?php endforeach ?>
|
||||
|
||||
<!-- Slide texte -->
|
||||
<div class="swiper-slide">
|
||||
<div class="swiper-slide__intro">
|
||||
<span class="intro__recap">
|
||||
<?php if ($page->start()->isNotEmpty() && $page->end()->isNotEmpty()) : ?>
|
||||
<span class="recap__item">
|
||||
<?php echo $page->start() . ' - ' . $page->end() . ', ' . $page->place() . '<br />' ?>
|
||||
</span>
|
||||
|
||||
<?php elseif ($page->start()->isNotEmpty() || $page->end()->isNotEmpty()): ?>
|
||||
<span class="recap__item">
|
||||
<?= $page->start() ?><?= $page->end() ?>, <?= $page->place() ?>
|
||||
</span>
|
||||
<br />
|
||||
<?php endif ?>
|
||||
|
||||
<?php if ($page->pgm()->isNotEmpty()): ?>
|
||||
<span class="recap__item">
|
||||
<?= $page->pgm() ?>
|
||||
</span>
|
||||
<br />
|
||||
<?php endif ?>
|
||||
|
||||
<?php if ($page->architects()->isNotEmpty()): ?>
|
||||
<span class="recap__item">
|
||||
ARCHITECTES : <?= $page->architects() ?>
|
||||
</span>
|
||||
<br />
|
||||
<?php endif ?>
|
||||
|
||||
<?php if ($page->be()->isNotEmpty()): ?>
|
||||
<span class="recap__item">
|
||||
BE : <?= $page->be() ?>
|
||||
</span>
|
||||
<br />
|
||||
<?php endif ?>
|
||||
|
||||
<?php if ($page->mo()->isNotEmpty()): ?>
|
||||
<span class="recap__item">
|
||||
MOA : <?= $page->mo() ?>
|
||||
</span>
|
||||
<br />
|
||||
<?php endif ?>
|
||||
|
||||
<?php if ($page->size()->isNotEmpty()): ?>
|
||||
<span class="recap__item">
|
||||
<?= $page->size() ?>
|
||||
</span>
|
||||
<br />
|
||||
<?php endif ?>
|
||||
|
||||
<?php if ($page->credits()->isNotEmpty()): ?>
|
||||
<span class="recap__item">
|
||||
<?= $page->credits() ?>
|
||||
</span>
|
||||
<?php endif ?>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fin slide texte -->
|
||||
</div>
|
||||
<!-- If we need pagination -->
|
||||
<!-- <div class="swiper-pagination"></div> -->
|
||||
|
||||
<!-- Navigation buttons -->
|
||||
<div class="swiper-button-prev"></div>
|
||||
<div class="swiper-button-next"></div>
|
||||
|
||||
<!-- If we need scrollbar -->
|
||||
<!-- <div class="swiper-scrollbar"></div> -->
|
||||
</div>
|
||||
<button class="toProjectDesc"><h1 class="project__title"><span class="project__title--ref"><?= $page->ref() ?></span><?= $page->title() ?></h1></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
|
||||
<script>
|
||||
let mySwiper = new Swiper('.swiper-container', {
|
||||
// Optional parameters
|
||||
direction: 'horizontal',
|
||||
loop: true,
|
||||
observer: true,
|
||||
observeSlideChildren: true,
|
||||
observeParents: true,
|
||||
speed: 300,
|
||||
autoplay: {
|
||||
delay: 2000
|
||||
},
|
||||
|
||||
// Responsive
|
||||
breakpoints: {
|
||||
800: {
|
||||
speed: 500,
|
||||
autoplay: false
|
||||
}
|
||||
},
|
||||
|
||||
// Navigation arrows
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev'
|
||||
},
|
||||
|
||||
// Keyboard control
|
||||
keyboard: {
|
||||
enabled: true
|
||||
}
|
||||
})
|
||||
|
||||
document.querySelector('.views__btn--close').addEventListener('click', () => {
|
||||
document.location.replace('<?= $site->url() ?>')
|
||||
})
|
||||
document.querySelector('.toProjectDesc').addEventListener('click', () => {
|
||||
mySwiper.slideTo(document.querySelectorAll('.swiper-slide').length - 2)
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue