Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Jump to bottom

feat: Add a full landing page to Open Food Facts #435

Open
wants to merge 13 commits into
base: main
Choose a base branch
from
Open

feat: Add a full landing page to Open Food Facts #435

Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
e757b35
fix: Landing page like there's no tomorrow
teolemon Aug 8, 2023
60f9ac9
Update content.html
teolemon Aug 8, 2023
daa128b
Update content.html
teolemon Aug 8, 2023
981f87a
Update content.html
teolemon Aug 8, 2023
66a9883
Update content.html
teolemon Aug 8, 2023
f06c57a
Update content.html
teolemon Aug 8, 2023
5a12bf2
Update content.html
teolemon Aug 8, 2023
456101c
Update content.html
teolemon Aug 8, 2023
4dfa57c
Update content.html
teolemon Aug 8, 2023
5ac8d48
Update content.html
teolemon Aug 8, 2023
55d907a
Update content.html
teolemon Aug 14, 2023
dd768ce
Update content.html
teolemon Aug 14, 2023
50337d0
Update content.html
teolemon Aug 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
388 changes: 388 additions & 0 deletions lang/en/texts/landingpage/content.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,388 @@
<!-- START Custom style for What's Open Food Facts ? -->
<!-- https://github.com/openfoodfacts/openfoodfacts-server/blob/main/html/images/illustrations/globe.svg -->
<style>
.grid-container-whats-new {
background-color: #E3F6FF;
background-image: url('https://world.openfoodfacts.org/images/illustrations/section-orange-left.svg'), url('https://world.openfoodfacts.org/images/illustrations/section-globe-right-bottom.svg');
background-position: center left, bottom right;
background-repeat: no-repeat, no-repeat;
height: 100%;
}

.full-height {
height: 100%;
}

h1 {
font-size: 40px;
font-weight: bold;
margin-bottom: 20px;
}

p {
font-size: 18px;
}
</style>
<!-- END Custom style for What's Open Food Facts ? -->
<!-- START What's Open Food Facts ? -->
<div class="grid-container-whats-new">
<div class="grid-x align-center-middle full-height">
<div class="cell medium-8 text-center">
<h1>What’s Open Food Facts?</h1>
<p>Since food has a huge impact on health, environment, and society... Open Food Facts is a community to build and share an open database of food products, knowledge, and tools to improve food for everyone. All over the world.</p>
</div>
</div>
</div>
<!-- END What's Open Food Facts ? -->
<!-- START Custom style for Product Count -->
<!-- html/images/illustrations/section-food-left-bottom.svg-->
<!-- html/images/illustrations/section-food-right-bottom.svg-->
<style>
.grid-container-product-count {
height: 100%;
background-color: white;
background-image: url('https://world.openfoodfacts.org/images/illustrations/orange.svg'), url('donut.svg'), url('https://world.openfoodfacts.org/images/illustrations/pizza.svg'), url('https://world.openfoodfacts.org/images/illustrations/cereals.svg'), url('https://world.openfoodfacts.org/images/illustrations/tomato.svg'), url('https://world.openfoodfacts.org/images/illustrations/bottle.svg');
background-position: center left, top left 100px, bottom left 150px, center right, top right 100px, bottom right 150px;
background-repeat: no-repeat;
}

h1 {
font-size: 40px;
font-weight: bold;
margin-bottom: 20px;
display: inline-block;
}

.highlight-product-count {
background-color: #3CA7FF;
padding: 15px 25px;
border-radius: 5px;
display: inline-block;
transform: rotate(5deg);
width: 229px;
height: 62px;
line-height: 62px;
vertical-align: middle;
color: white;
}

p {
font-size: 18px;
}
</style>
<!-- END Custom style for Product Count -->
<!-- START Product Count -->
<div class="grid-container-product-count">
<div class="grid-x align-center-middle full-height">
<div class="cell medium-10 text-center">
<br>
<h1>Search for <span class="highlight-product-count">33445</span> products </h1>
<p>Our database is lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div align="center">
<input style="background:url('https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/search/default/24px.svg') no-repeat scroll 7px 7px;
padding-left:30px;border-radius:25px;width:150px;background-color:#EDE0DB;" text="" placeholder="Search a product">
</div>
<br>
</div>
</div>
</div>
<!-- END Product Count -->
<!-- START Custom style for The Community -->
<!-- html/images/illustrations/puzzle.svg
html/images/illustrations/puzzle-big.svg -->
<style>
.grid-container-community {
height: 100%;
background-color: #FFFAD1;
background-image: url('https://world.openfoodfacts.org/images/illustrations/puzzle.svg');
background-position: top right;
background-repeat: no-repeat;
}
</style>
<!-- END Custom style for The Community -->
<!-- START The Community -->
<div class="grid-container-community full-height">
<div class="grid-x align-middle">
<div class="cell medium-8">
<h1>The community</h1>
<p>Open Food Facts exists because of all the people contributing and helping the project:</p>
<ul>
<li>Contributors who add and complete product data</li>
<li>Designers, developers, data scientists, translators etc. who build our solutions</li>
<li>Reusers who develop many useful tools and services</li>
<li>Scientists who advance the state of knowledge</li>
</ul>
<button class="how-to-help-button">
<span class="how-to-help">→</span> How to help? </button>
</div>
</div>
</div>
<!-- END for The Community -->
<!-- START Custom style for The App -->
<style>
.grid-container-the-app {
height: 100%;
background-color: #DFF4FF;
height: 100%;
}

.full-height {
height: 100%;
}

h1 {
font-size: 40px;
font-weight: bold;
margin-bottom: 20px;
}

ul {
font-size: 18px;
list-style-type: disc;
padding-left: 30px;
text-align: right;
}

li {
margin-bottom: 10px;
}

.app-image {
max-width: 100%;
}

.testimonial-box {
position: relative;
background-image: url('https://raw.githubusercontent.com/openfoodfacts/openfoodfacts-server/lp-illustrations/html/images/illustrations/bubble-testimonials.svg');
background-repeat: no-repeat;
}

.testimonial-image {
border-radius: 50%;
margin-top: 15px;
max-width: 80px;
}

.heart-icon {
position: absolute;
bottom: 5px;
right: 10px;
max-width: 15px;
}

.dots {
display: flex;
justify-content: center;
margin-top: 10px;
}

.dots span {
background: #999;
border-radius: 50%;
width: 8px;
height: 8px;
margin: 0 4px;
}

.app-buttons img {
margin: 10px 5px;
max-width: 140px;
}
</style>
<!-- END Custom style for The App -->
<!-- START for The App -->
<div class="grid-container-the-app full-height">
<div class="grid-x align-middle">
<div class="cell medium-6">
<img src="https://raw.githubusercontent.com/openfoodfacts/openfoodfacts-server/lp-illustrations/html/images/illustrations/mobile-app-preview.svg" alt="Mobile App" class="app-image">
<!-- Testimonial section -->
<div class="testimonial-box">
<img src="https://raw.githubusercontent.com/openfoodfacts/openfoodfacts-server/lp-illustrations/html/images/illustrations/happy-user-1.svg" alt="User Testimonial" class="testimonial-image">
<img src="https://raw.githubusercontent.com/openfoodfacts/openfoodfacts-server/lp-illustrations/html/images/illustrations/heart.svg" alt="Heart" class="heart-icon"> “I love this app!! I use it almost everyday. It’s helping me a lot finding the right product for me!” Louise <div class="dots">
<span></span>
<span></span>
<span></span>
</div>
<div class="app-buttons">
<img src="https://static.openfoodfacts.org/images/misc/google-play-badge-svg-master/img/en_get.svg" alt="Google Play">
<img src="https://world.openfoodfacts.org/images/misc/appstore/black/appstore_US.svg" alt="App Store">
</div>
</div>
</div>
<div class="cell medium-6 text-right">
<h1>The app</h1>
<ul>
<li>Scan and find infos about the products you like</li>
<li>Choose food that is good for you and the environment</li>
<li>Add products from your country and join the movement</li>
</ul>
<button class="discover-button">
<span class="app-download">→</span> Download App </button>
</div>
</div>
</div>
<!-- END for The App -->
<!-- START for custom CSS for Live Product Database -->
<style>
.grid-container-live-database {
height: 100%;
background-color: #DDE7FF;
background-image:
url("https://raw.githubusercontent.com/openfoodfacts/openfoodfacts-server/fbd8c6f8eabd1f91502c4b33c380bd59298c45b5/html/images/illustrations/cloud-left.svg"), url('https://raw.githubusercontent.com/openfoodfacts/openfoodfacts-server/fbd8c6f8eabd1f91502c4b33c380bd59298c45b5/html/images/illustrations/cloud-bottom.svg');
background-position: middle left, bottom center;
background-repeat: no-repeat;
}

.live-header {
display: flex;
align-items: center;
margin-bottom: 15px;
}

.icon {
background-color: white;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
}

.live-label {
background-color: red;
padding: 5px 15px;
color: white;
font-weight: bold;
transform: rotate(-5deg);
}

.live-updates {
max-height: 300px;
overflow-y: auto;
}
</style>
<style>
.info-box {
background-color: white;
border-radius: 50px;
width: 411px;
height: 53px;
padding: 5px 15px;
display: flex;
flex-direction: column;
justify-content: center;
}

.timestamp {
font-size: 12px;
margin: 0;
/* Removes default margins */
}

.product-details {
font-size: 18px;
margin: 0;
/* Removes default margins */
}
</style>
<!-- END for CSS for Live Product Database -->
<!-- START for Live Product Database -->
<div class="grid-container-live-database full-height">
<div class="grid-x align-middle">
<!-- Content section -->
<div class="cell medium-9">
<h1>Products database</h1>
<ul>
<li>View, gather and enrich data (scores, ingredients analysis etc.)</li>
<li>Use our open data and API</li>
</ul>
<button class="show-me-the-data-button">
<span class="show-me-the-data">→</span> Show me the data </button>
</div>
<!-- Live feed section -->
<div class="cell medium-3 live-feed">
<div class="live-header">
<div class="icon">
<img src="https://raw.githubusercontent.com/openfoodfacts/openfoodfacts-server/lp-illustrations/html/images/illustrations/live-from-open-food-facts.svg" alt="Barcode Icon">
</div>
<div class="live-label">Live</div>
</div>
<div class="live-updates">
<!-- Dummy updates for demonstration. Adjust with dynamic content. -->
<div class="info-box">
<p class="timestamp">Less than 1 minute ago</p>
<p class="product-details">Tomato sauce, Brand, 250g</p>
</div>
<div class="info-box">
<p class="timestamp">2 minutes ago</p>
<p class="product-details">Cereal box, Brand, 500g</p>
</div>
<div class="info-box">
<p class="timestamp">3 minutes ago</p>
<p class="product-details">Pasta spaghetti, Brand, 400g</p>
</div>
<!-- ... and so on -->
</div>
</div>
</div>
</div>
<!-- END for Live Product Database -->
<!-- START for custom CSS for Producers -->
<style>
.grid-container-producers {
height: 100%;
background-color: #E3F7DE;
height: 100%;
}

.full-height {
height: 100%;
}

h1 {
font-size: 40px;
font-weight: bold;
margin-bottom: 20px;
}

ul {
font-size: 18px;
list-style-type: disc;
padding-left: 30px;
}

.flex-svg {
display: flex;
align-items: start;
}

.svg-image {
margin-left: 20px;
align-self: flex-start;
}
</style>
<!-- END for custom CSS for Producers -->
<!-- START for Producers -->
<div class="grid-container-producers full-height">
<div class="grid-x align-middle">
<!-- SVG Images section -->
<div class="cell medium-6 flex-svg">
<img src="https://raw.githubusercontent.com/openfoodfacts/openfoodfacts-server/lp-illustrations/html/images/illustrations/search-bottle.svg" alt="Search Bottle" class="svg-image">
<img src="https://raw.githubusercontent.com/openfoodfacts/openfoodfacts-server/lp-illustrations/html/images/illustrations/pizza.svg" alt="Pizza" class="svg-image">
<img src="https://raw.githubusercontent.com/openfoodfacts/openfoodfacts-server/lp-illustrations/html/images/illustrations/cereals.svg" alt="Pack of Cereals" class="svg-image">
</div>
<!-- Text section -->
<div class="cell medium-6">
<h1>For producers</h1>
<ul>
<li>Show the composition of your products with transparency</li>
<li>Improve the quality of your products using our database</li>
</ul>
<button class="discover-button">
<span class="arrow">→</span> Discover More </button>
</div>
</div>
</div>
<!-- END for Producers -->