Skip to content

Commit

Permalink
Merge pull request #43 from ogs-at-usi/feature_layout
Browse files Browse the repository at this point in the history 
Feature layout
  • Loading branch information
@micheledallerive
micheledallerive authored Dec 5, 2022
2 parents 789d9d8 + 156fa1e commit 0ee1bbd
Show file tree
Hide file tree
Showing 7 changed files with 27,720 additions and 0 deletions.
276 changes: 276 additions & 0 deletions client/public/about.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,276 @@
<!DOCTYPE html>
<html class="h-100">
<head>
<title>HandShake</title>
<meta content="Sofia d'Atri" name="author" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://fonts.googleapis.com" rel="preconnect" />
<link crossorigin href="https://fonts.gstatic.com" rel="preconnect" />
<link
href="https://fonts.googleapis.com/css2?family=Francois+One&display=swap"
rel="stylesheet"
/>
<link rel="icon" href="icons/handshake.png" type="image/png" />
<!--<a href="https://www.flaticon.com/free-icons/partnership-handshake" title="Partnership handshake icons">Partnership handshake icons created by DinosoftLabs - Flaticon</a>-->
<!-- CSS only -->
<link
crossorigin="anonymous"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
rel="stylesheet"
/>
<!-- JavaScript Bundle with Popper -->
<script
crossorigin="anonymous"
defer
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
></script>
<link href="css/variables.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />

<script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<style>
.display-1 {
font-weight: 900;
font-size: 6rem;
}
#aboutus {
overflow-y: auto;
}
.display-8 {
font-size: 1.5rem;
}
</style>
</head>

<body class="justify-content-evenly d-flex flex-column">
<div id="title" class="align-items-center justify-content-between mb-5">
<h1>HandShake</h1>
<h2><a class="btn btn-outline-light" href="">Log in</a></h2>
</div>
<section
id="aboutus"
class="d-flex flex-row justify-content-evenly align-items-center text-center flex-wrap"
>
<section class="col-11 col-md-5 col-xl-5">
<h1 class="display-1">Hand<br />Shake</h1>
<p>Connecting the world, one Shake at a time.</p>
</section>
<section class="col-11 col-md-5 col-xl-5 text-start">
<p class="display-5">
HandShake is a brand-new messaging service for everyone who is tired
of the usual old chat apps. <br />Scroll down to learn more about us.
</p>
</section>

<section class="col-11"></section>
<section class="col-12 d-flex flex-row justify-content-center">
<lottie-player
id="Lottie_one"
background="transparent"
speed="1"
src="../icons/scroll_down.json"
style="width: 100px"
>
</lottie-player>

<script>
window.addEventListener('load', function () {
//const lottiePlayer = document.getElementById("Lottie");
//const lottie = lottiePlayer.getLottie();
//lottie.goToAndStop(0, true);

LottieInteractivity.create({
player: '#Lottie_one',
mode: 'scroll',
actions: [
{
visibility: [0, 1],
type: 'loop',
frames: [0, 75],
},
],
});
});
</script>
</section>

<section class="col-12">
<lottie-player
id="Lottie_two"
background="transparent"
speed="1"
src="../icons/handshake_anim.json"
style="width: 100%"
>
</lottie-player>

<script>
window.addEventListener('load', function () {
//const lottiePlayer = document.getElementById("Lottie");
//const lottie = lottiePlayer.getLottie();
//lottie.goToAndStop(0, true);

LottieInteractivity.create({
player: '#Lottie_two',
mode: 'scroll',
actions: [
{
visibility: [0, 0.4],
type: 'stop',
frames: [0],
},
{
visibility: [0.4, 0.7],
type: 'seek',
frames: [0, 60],
},

{
visibility: [0.7, 1],
type: 'seek',
frames: [60, 96],
},
],
});
});
</script>
</section>

<section class="col-11 mb-5">
<h1 class="display-2">
The messaging app for creative people, for fun people, for people who
love sharing pictures of their pets.
</h1>
</section>

<section class="col-12 col-xl-5">
<lottie-player
id="Lottie_three"
background="transparent"
speed="1"
src="../icons/chatmessages.json"
style="width: 100%"
>
</lottie-player>

<script>
window.addEventListener('load', function () {
//const lottiePlayer = document.getElementById("Lottie");
//const lottie = lottiePlayer.getLottie();
//lottie.goToAndStop(0, true);

LottieInteractivity.create({
player: '#Lottie_three',
mode: 'scroll',
actions: [
{
visibility: [0, 0.2],
type: 'stop',
frames: [0],
},
{
visibility: [0.2, 0.4],
type: 'seek',
frames: [0, 88],
},
{
visibility: [0.4, 1],
type: 'loop',
frames: [0, 88],
},
],
});
});
</script>
</section>
<section class="col-12 col-xl-5 text-start">
<p class="display-2">
Connect with people around the world and start messaging now!
</p>
<p class="display-6 mb-5">
With HandShake, keeping in contact is as easy as ever.
</p>
<p class="display-8">
Text messages, pictures, videos, audio and documents: we got you!
</p>
<p class="display-8">
Share the things you love with your family, friends and even with your
enemies (we hope you don't have any).
</p>
<p class="display-8">
We'll make sure the texts reach them, and that no one else will ever
access them.
</p>
<p class="display-8">
Voice calls and video calls will be supported in a future update.
</p>
</section>
<section class="col-12 col-xl-5 text-start">
<h1 class="display-2">
A new generation of chat, for a new generation of users.
</h1>
<p class="display-6 mb-5">Texting has never been more fun.</p>
<p class="display-8">
Play games directly in the chat and challenge your friends to see who
the real MVP is.
</p>
</section>
<section class="col-12 col-xl-5">
<lottie-player
id="Lottie_four"
background="transparent"
speed="1"
src="../icons/icon_battle.json"
style="width: 100%"
>
</lottie-player>

<script>
window.addEventListener('load', function () {
//const lottiePlayer = document.getElementById("Lottie");
//const lottie = lottiePlayer.getLottie();
//lottie.goToAndStop(0, true);

LottieInteractivity.create({
player: '#Lottie_four',
mode: 'chain',
actions: [
{
frames: [0, 114],
state: 'autoplay',
reset: true,
transition: 'onComplete',
},
{
state: 'click',
forceFlag: true,
frames: [0, 114],
transition: 'click',
count: 5,
},
],
});
});
</script>
</section>

<section class="col-11 mb-5">
<h1 class="display-2">made with ♡ at USI by yours truly</h1>
</section>
</section>
<footer id="login_page_footer" class="text-center">
<p>
made with ♡ by the
<a
class="link-light"
href="https://github.com/ogs-at-usi/sa3-project"
target="_blank"
>ogs @ USI</a
>
</p>
</footer>
</body>
</html>
Loading

0 comments on commit 0ee1bbd

Please sign in to comment.