ODE/Lightbox-Remastered
1
1
Fork 0
Code Pull Requests Releases 1 Activity

Compare commits

base: ODE:pages
Branches Tags
ODE:master ODE:pages ODE:frame-only
ODE:1.0.0 ODE:0.1
..
compare: ODE:frame-only
Branches Tags
ODE:pages ODE:frame-only ODE:master
ODE:1.0.0 ODE:0.1

6 Commits
pages ... frame-only

Author SHA1 Message Date
Simon
afbb2fbcb2 Update README.md 2021-08-10 12:06:40 +00:00
Thoscellen
a9172b1b7a feat: 🚧 prepare stuff for exposing the frame-only branch 2021-08-09 19:23:45 +02:00
Thoscellen
84f6aeb129 chore: ♻️ manual forward of the wireframe branch to master state. 2021-08-09 19:13:41 +02:00
Thomas d'Alexis
4ea38804a5 fix la mention "Pocket" 
Ce travaille ne s'appuie pas sur l'appli Pocket.
 2021-01-27 13:55:35 +00:00
Simon Priet
1c22a67bbc premier commit en wireframes 2020-09-25 14:57:26 +02:00
Simon Priet
b326cd669f added credits in readme 2020-09-25 13:51:36 +02:00
25 changed files with 63 additions and 579 deletions
Expand all files Collapse all files

12
.gitlab-ci.yml
View File

@@ -1,12 +0,0 @@
# Move / rename the content files into the 'public' folder for GitLab Pages
# Artifacts contents of 'public' for Pages
# Deploy pages publicly in GitLab
pages:
stage: deploy
script: echo "hi 👋"
artifacts:
paths:
- public
only:
- pages

26
README.md
View File

@@ -2,10 +2,26 @@
> This repository serve resources and examples for my [Behance portfolio](https://www.behance.net/gallery/117643605/Lightbox-Remastered). > This repository serve resources and examples for my [Behance portfolio](https://www.behance.net/gallery/117643605/Lightbox-Remastered).
You are on the page branch. This branch serve the GitLab Pipeline to generate Pages. This works as documented on [GitLab's Docs](https://docs.gitlab.com/ee/user/project/pages/index.html#how-to-set-up-gitlab-pages-in-a-repository-where-theres-also-actual-code) You are viewing the frame-only branch. This branch feature a wireframe version of this prototype.
* [Interactive showcase](https://khosmon.gitlab.io/Lightbox-Remastered/index.html) * [Interactive showcase](https://khosmon.gitlab.io/Lightbox-Remastered/wireframe.html)
* [Wireframe showcase](https://khosmon.gitlab.io/Lightbox-Remastered/wireframe.html) On Firefox, you can use the Adaptative View (`Ctrl / Cmd + Shift + M`) to resize it freely.
* [Before/After comparison](https://khosmon.gitlab.io/Lightbox-Remastered/juxtaposejs/)
💡 Note: On Firefox, you can use the Adaptative View (`Ctrl / Cmd + Shift + M`) to resize the viewport freely and easily. ## Gallery
![Exemple of a full ranged lightbox](./public/readme_assets/Frame%201.png)
![Exemple of a very big lightbox](./public/readme_assets/Frame%202.png)
![Exemple of a comfty lightbox](./public/readme_assets/Frame%203.png)
![Exemple of a neat lightbox](./public/readme_assets/Frame%204.png)
![Exemple of a small lightbox](./public/readme_assets/Frame%205.png)
![Exemple of a narrow lightbox](./public/readme_assets/Frame%206.png)
## Credits
* Fonts: Microsoft, Apple, Graig Rozynski, Purushoth Kumar Guttula
* Originals Design, Assets, Codes, Graphics: Open Digital Education

5
public/wireframe.html → lightbox-wireframe.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<link type="text/css" rel="stylesheet" href="css/wireframe.css" /> <link type="text/css" rel="stylesheet" href="./main.css" />
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title> <title>Document</title>
@@ -14,9 +14,9 @@
<div class=" "><span class="text-ph close-button">x</span></div> <div class=" "><span class="text-ph close-button">x</span></div>
<div id="tabs-container"> <div id="tabs-container">
<span></span> <span></span>
<span class="active"><a href="#" class="text-ph">Onglet actif</a></span>
<span><a href="#" class="text-ph">Onglet 1</a></span> <span><a href="#" class="text-ph">Onglet 1</a></span>
<span><a href="#" class="text-ph">Onglet 2</a></span> <span><a href="#" class="text-ph">Onglet 2</a></span>
<span class="active"><a href="#" class="text-ph">Onglet actif</a></span>
<span></span> <span></span>
</div> </div>
</div> </div>
@@ -26,6 +26,7 @@
<button>🔍</button> <button>🔍</button>
</div> </div>
<div id="doc-file-viewmode"> <div id="doc-file-viewmode">
Vue :
<a href="#" class="active">Mosaïque</a> <a href="#" class="active">Mosaïque</a>
<a href="#">Grille</a> <a href="#">Grille</a>
<a href="#">Liste</a> <a href="#">Liste</a>

122
public/css/main.css → main.css
View File

@@ -1,6 +1,4 @@
/* Faking a real website */ /* Faking a real website */
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mallanna&display=swap');
html { html {
height: 100%; height: 100%;
@@ -11,20 +9,15 @@ body {
margin: 0; margin: 0;
min-height: 100%; min-height: 100%;
box-sizing: border-box; box-sizing: border-box;
font-family: Calibri, Mallanna, sans-serif;
} }
h1, .text-ph {
h2, background-color: rgb(236, 236, 236);
h3, color: transparent !important;
button {
font-family: "Comic Sans MS", "Chalkboard", "Comic Neue", cursive;
/* letter-spacing: -0.5px; */
text-transform: uppercase;
font-weight: 500;
} }
/* The body of the fake website consist of a scrollable big picture */ /* The body of the fake website consist of a scrollable big picture */
#fake { #fake {
/* background: url(./fake-home.jpg); */ /* background: url(./fake-home.jpg); */
z-index: 9; z-index: 9;
@@ -48,26 +41,23 @@ button {
/* overflow: auto; */ /* overflow: auto; */
z-index: 10; z-index: 10;
} }
/*
.softener { .softener {
/* backdrop-filter: blur(5px); */ backdrop-filter: blur(5px);
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
} } */
/* lightbox itself */ /* lightbox itself */
.lb-container { .lb-container {
display: grid; display: grid;
margin: 5em auto; margin: 5em;
grid-template-rows: min-content auto min-content; grid-template-rows: min-content auto min-content;
position: static; position: static;
z-index: 11; z-index: 11;
max-width: 1030px; max-width: 1030px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11), background-color: white;
0 4px 4px rgba(0, 0, 0, 0.11), 0 6px 8px rgba(0, 0, 0, 0.11), border: 1px solid lightgray;
0 8px 16px rgba(0, 0, 0, 0.11);
/* background-color: white; */
/*border: 1px solid white;*/
border-radius: 1em; border-radius: 1em;
} }
@@ -76,14 +66,11 @@ button {
} }
.lb-header { .lb-header {
background: white; position: relative;
backdrop-filter: blur(10px);
border-radius: 1em 1em 0 0;
} }
.lb-header h2 { .lb-header h2 {
margin: 0.5em 1em; margin: 0.5em 1em;
color: rgb(56, 137, 193);
overflow: hidden; overflow: hidden;
} }
@@ -91,29 +78,23 @@ button {
position: absolute; position: absolute;
right:.5em; right:.5em;
top:.5em; top:.5em;
} width: 20px;
height: 20px;
.close-button img {
height: 30px;
width: 30px;
} }
#tabs-container { #tabs-container {
display: flex; display: flex;
font-family: "Comic Sans MS", "Chalkboard", "Comic Neue", cursive; letter-spacing: -0.5px;
/* letter-spacing: -0.5px; */
overflow-x: auto; overflow-x: auto;
font-weight: 500;
} }
#tabs-container a { #tabs-container a {
text-decoration: none; text-decoration: none;
color: rgb(56, 137, 193);
} }
#tabs-container > span.active a { /* #tabs-container > span.active a {
color: rgb(255, 141, 46); color: rgb(255, 141, 46);
} } */
#tabs-container > span { #tabs-container > span {
flex-grow: 1; flex-grow: 1;
@@ -127,15 +108,13 @@ button {
flex-grow: 1; flex-grow: 1;
min-width: min-content; min-width: min-content;
text-align: center; text-align: center;
border-radius: 0.5em 0.5em 0 0;
border: 1px solid lightgray; border: 1px solid lightgray;
border-top: 2px solid rgb(255, 141, 46);
border-bottom: none; border-bottom: none;
background-color: white; background-color: white;
} }
.lb-body { .lb-body {
padding: 1em; /* padding: 1em; */
padding-bottom: 0; padding-bottom: 0;
/* max-height: 350px; */ /* max-height: 350px; */
max-height: calc(100vh - 10em - 200px); max-height: calc(100vh - 10em - 200px);
@@ -151,59 +130,47 @@ button {
} }
.doc-file-browse #doc-file-viewmode { .doc-file-browse #doc-file-viewmode {
visibility: hidden;
grid-row: toolbar; grid-row: toolbar;
grid-column: side; grid-column: side;
justify-self: start; justify-self: start;
} }
.doc-file-browse #doc-file-search { .doc-file-browse #doc-file-search {
visibility: hidden;
grid-row: toolbar; grid-row: toolbar;
grid-column: central; grid-column: central;
justify-self: start; justify-self: start;
} }
.doc-file-browse #doc-file-nav { .doc-file-browse #doc-file-nav {
grid-row: main; grid-row: toolbar / span 2;
grid-column: side; grid-column: side;
} }
.doc-file-browse #doc-file-dominos { .doc-file-browse #doc-file-dominos {
grid-row: main; grid-row: toolbar / span 2;
grid-column: central; grid-column: central;
} }
input { input[type="text"],
border-radius: 5px; input[type="password"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="date"] {
border: 1px solid #c9ced5; border: 1px solid #c9ced5;
line-height: 25px; line-height: 25px;
padding: 0 10px; padding: 0 10px;
box-sizing: border-box; box-sizing: border-box;
height: 40px; height: 40px;
text-transform: initial;
font-size: initial; font-size: initial;
font-family: Calibri, Mallanna, sans-serif;
} }
#doc-file-viewmode a {
background-image: linear-gradient(#fff, #e9ebef);
border-radius: 10px;
height: 40px;
min-width: 40px;
display: inline-block;
}
#doc-file-viewmode a.active {
background-image: linear-gradient(#3889c1, #43b9e7);
}
button { button {
/* height: 40px; */ /* height: 40px; */
box-sizing: border-box; box-sizing: border-box;
background-image: linear-gradient(#3889c1, #43b9e7);
color: #fff;
border: none; border: none;
border-radius: 10px;
font-size: initial; font-size: initial;
padding:9px 12px; padding:9px 12px;
} }
@@ -223,18 +190,16 @@ button {
} }
.list-nav li span { .list-nav li span {
border-radius: 4px;
padding: 3px 9px; padding: 3px 9px;
cursor: pointer; cursor: pointer;
height: 100%;
} }
.list-nav li:not(.active) span:hover { .list-nav li:not(.active) span:hover {
background-image: linear-gradient(#fff, #e9ebef); background: lightgray;
} }
.list-nav .active > span { .list-nav .active > span {
background-image: linear-gradient(#3889c1, #43b9e7); background: lightgray;
color: white; color: white;
} }
@@ -243,32 +208,25 @@ button {
flex-wrap: wrap; flex-wrap: wrap;
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
height: 100%; align-content: flex-start;
} }
.domino-item { .domino-item {
margin: 5px; margin: 5px;
border: 1px solid lightgray; border: 1px solid #ebebeb;
width: 150px; width: 150px;
height: 80px; height: 80px;
background: url(https://via.placeholder.com/80) no-repeat; background: url(https://via.placeholder.com/80/ebebeb/ebebeb) no-repeat;
padding-left: 86px; padding-left: 86px;
border-radius: 8px;
overflow: hidden; overflow: hidden;
} }
.domino-item h4 { .domino-item h4 {
text-transform: initial;
/* font-family: Calibri, "Segoe UI", sans-serif; */
font-weight: normal;
font-size: 11pt;
letter-spacing: initial;
margin: 6px 0 ; margin: 6px 0 ;
color: rgb(53, 53, 53); color: rgb(53, 53, 53);
} }
.domino-item h4 span.extension { .domino-item h4 span.extension {
color:gray; color:gray;
text-transform: uppercase;
font-size: 70%; font-size: 70%;
} }
@@ -280,22 +238,12 @@ button {
.lb-footer { .lb-footer {
padding: 1em; padding: 1em;
justify-self: end;
overflow: hidden; overflow: hidden;
background-color: white;
backdrop-filter: blur(20px);
border-radius: 0 0 1em 1em;
}
.type-folder {
border: 1px solid #efdd77;
background: left / contain no-repeat url("../assets/folder-large.png") ;
}
.type-file {
/* border: 1px solid lightgray; */
background: left / contain no-repeat url("../assets/unknown-large.png") ;
} }

BIN
public/assets/closebutton.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.8 KiB

BIN
public/assets/fake-home.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 176 KiB

BIN
public/assets/folder-large.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.3 KiB

BIN
public/assets/unknown-large.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 18 KiB

250
public/css/wireframe.css
View File

@@ -1,250 +0,0 @@
/* Faking a real website */
html {
height: 100%;
}
body {
background-color: rgb(236, 236, 236);
margin: 0;
min-height: 100%;
box-sizing: border-box;
}
.text-ph {
background-color: rgb(236, 236, 236);
color: transparent !important;
}
/* The body of the fake website consist of a scrollable big picture */
#fake {
/* background: url(./fake-home.jpg); */
z-index: 9;
/* position: fixed; */
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
}
/* lightbox stuff */
.lb-mod {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
/* overflow: auto; */
z-index: 10;
}
/*
.softener {
backdrop-filter: blur(5px);
background-color: rgba(0, 0, 0, 0.5);
} */
/* lightbox itself */
.lb-container {
display: grid;
margin: 5em;
grid-template-rows: min-content auto min-content;
position: static;
z-index: 11;
max-width: 1030px;
background-color: white;
border: 1px solid lightgray;
border-radius: 1em;
}
.scrollable {
overflow-y: scroll;
}
.lb-header {
position: relative;
}
.lb-header h2 {
margin: 0.5em 1em;
overflow: hidden;
}
.lb-header .close-button {
position: absolute;
right:.5em;
top:.5em;
width: 20px;
height: 20px;
}
#tabs-container {
display: flex;
letter-spacing: -0.5px;
overflow-x: auto;
}
#tabs-container a {
text-decoration: none;
}
/* #tabs-container > span.active a {
color: rgb(255, 141, 46);
} */
#tabs-container > span {
flex-grow: 1;
min-width: min-content;
text-align: center;
border-bottom: 1px solid lightgray;
padding: 9px;
}
#tabs-container > span.active {
flex-grow: 1;
min-width: min-content;
text-align: center;
border: 1px solid lightgray;
border-bottom: none;
background-color: white;
}
.lb-body {
/* padding: 1em; */
padding-bottom: 0;
/* max-height: 350px; */
max-height: calc(100vh - 10em - 200px);
border-bottom: 1px solid lightgray;
background-color: white;
}
.doc-file-browse {
display: grid;
grid-template-columns: [side] 220px [central] auto;
grid-template-rows: [toolbar] auto [main] auto;
grid-gap: 6px;
}
.doc-file-browse #doc-file-viewmode {
visibility: hidden;
grid-row: toolbar;
grid-column: side;
justify-self: start;
}
.doc-file-browse #doc-file-search {
visibility: hidden;
grid-row: toolbar;
grid-column: central;
justify-self: start;
}
.doc-file-browse #doc-file-nav {
grid-row: toolbar / span 2;
grid-column: side;
}
.doc-file-browse #doc-file-dominos {
grid-row: toolbar / span 2;
grid-column: central;
}
input[type="text"],
input[type="password"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="date"] {
border: 1px solid #c9ced5;
line-height: 25px;
padding: 0 10px;
box-sizing: border-box;
height: 40px;
font-size: initial;
}
button {
/* height: 40px; */
box-sizing: border-box;
border: none;
font-size: initial;
padding:9px 12px;
}
.list-nav ul {
padding-left: 0;
font-size: 12pt;
}
.list-nav li {
list-style: none;
margin: 9px;
}
.list-nav ul li ul li {
margin-left: 12px;
}
.list-nav li span {
padding: 3px 9px;
cursor: pointer;
}
.list-nav li:not(.active) span:hover {
background: lightgray;
}
.list-nav .active > span {
background: lightgray;
color: white;
}
.domino-container {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
}
.domino-item {
margin: 5px;
border: 1px solid #ebebeb;
width: 150px;
height: 80px;
background: url(https://via.placeholder.com/80/ebebeb/ebebeb) no-repeat;
padding-left: 86px;
overflow: hidden;
}
.domino-item h4 {
margin: 6px 0 ;
color: rgb(53, 53, 53);
}
.domino-item h4 span.extension {
color:gray;
font-size: 70%;
}
.domino-item .subtitle {
color:gray;
font-size: 10pt;
margin: 0;
}
.lb-footer {
padding: 1em;
justify-self: end;
overflow: hidden;
}

200
public/index.html
View File

@@ -1,200 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="css/main.css" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="fake">
<img src="assets/fake-home.jpg" />
</div>
<div id="lbmod1" class="lb-mod softener">
<div class="lb-container">
<div class="lb-header">
<h2>Importer des documents</h2>
<a href="#" class="close-button"><img src="assets/closebutton.png"></a>
<div id="tabs-container">
<span></span>
<span class="active"><a href="">Parcourir son Espace Doc</a></span>
<span><a href="#">Intégrer un contenu externe</a></span>
<span><a href="#">Filmer depuis la caméra</a></span>
<span></span>
</div>
</div>
<div class="lb-body doc-file-browse">
<div id="doc-file-search">
<input type="search" placeholder="Rechercher" />
<button>🔍</button>
</div>
<div id="doc-file-viewmode">
<a href="#" class="active"></a>
<a href="#"></a>
<a href="#"></a>
</div>
<div id="doc-file-nav" class="list-nav scrollable">
<ul class="">
<li class="active">
<span>Mes documents</span>
<ul>
<li><span>Mes Images</span></li>
<li><span>Mes Enregistrements</span></li>
<li><span>Mes Vidéos</span></li>
<li><span>Mes Devoirs</span></li>
<li><span>Mes Archives</span></li>
<li><span>Mes Affaires</span></li>
<li><span>Mes Mots</span></li>
<li><span>Mes Classeurs</span></li>
</ul>
</li>
<li><span>Documents partagés</span></li>
<li><span>Documents des applis</span></li>
</ul>
</div>
<div id="doc-file-dominos" class="domino-container scrollable">
<div class="domino-item type-folder">
<h4 class="domino-title">Mes Images</h4>
</div>
<div class="domino-item type-folder">
<h4 class="domino-title">Mes Enregistrements</h4>
</div>
<div class="domino-item type-folder">
<h4 class="domino-title">Mes Vidéos</h4>
</div>
<div class="domino-item type-folder">
<h4 class="domino-title">Mes Devoirs</h4>
</div>
<div class="domino-item type-folder">
<h4 class="domino-title">Mes Archives</h4>
</div>
<div class="domino-item type-folder">
<h4 class="domino-title">Mes Affaires</h4>
</div>
<div class="domino-item type-folder">
<h4 class="domino-title">Mes Mots</h4>
</div>
<div class="domino-item type-folder">
<h4 class="domino-title">Mes Classeurs</h3>
</div>
<div class="domino-item type-file">
<h4 class="domino-title">Consigne trigonométrie pythagore<span class="extension"> docs</span></h4>
<p class="subtitle">Fichier Word</p>
</div>
<div class="domino-item type-file">
<h4 class="domino-title">Suivit des notes <span class="extension"> XLSX</span></h4>
<span class="subtitle">Fichier Excel</span>
</div>
<div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
<span class="subtitle">Fichier fichier</span>
</div>
<div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
<span class="subtitle">Fichier fichier</span>
</div>
<div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
<span class="subtitle">Fichier fichier</span>
</div>
<div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
<span class="subtitle">Fichier fichier</span>
</div>
<div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
<span class="subtitle">Fichier fichier</span>
</div>
<div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
<span class="subtitle">Fichier fichier</span>
</div>
<div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
<span class="subtitle">Fichier fichier</span>
</div>
<div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
<span class="subtitle">Fichier fichier</span>
</div>
<div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
<span class="subtitle">Fichier fichier</span>
</div>
<div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
<span class="subtitle">Fichier fichier</span>
</div>
<div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
<span class="subtitle">Fichier fichier</span>
</div>
<div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
<span class="subtitle">Fichier fichier</span>
</div>
<div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
<span class="subtitle">Fichier fichier</span>
</div>
<div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
<span class="subtitle">Fichier fichier</span>
</div>
<div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
<span class="subtitle">Fichier fichier</span>
</div>
<div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
<span class="subtitle">Fichier fichier</span>
</div>
<div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
<span class="subtitle">Fichier fichier</span>
</div>
<div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
<span class="subtitle">Fichier fichier</span>
</div>
<div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
<span class="subtitle">Fichier fichier</span>
</div>
<div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
<span class="subtitle">Fichier fichier</span>
</div>
<div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
<span class="subtitle">Fichier fichier</span>
</div>
<div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
<span class="subtitle">Fichier fichier</span>
</div>
<div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
<span class="subtitle">Fichier fichier</span>
</div>
<div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
<span class="subtitle">Fichier fichier</span>
</div>
<div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
<span class="subtitle">Fichier fichier</span>
</div>
</div>
</div>
<div class="lb-footer">
<button>Annuler</button>
<button>Ok</button>
</div>
</div>
</div>
</body>
</html>

BIN
public/juxtaposejs/actual-screenshot1.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 76 KiB

19
public/juxtaposejs/index.html
View File

@@ -1,19 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Juxtaposed Lightbox</title>
</head>
<body>
<div class="juxtapose" data-animate="true">
<img src="actual-screenshot1.jpg" alt="An image of the actual implementation" data-label="before">
<img src="poc-screenshot1.jpg" alt="An image of my prototype implementation" data-label="after">
</div>
<script src="https://cdn.knightlab.com/libs/juxtapose/latest/js/juxtapose.min.js"></script>
<link rel="stylesheet" href="https://cdn.knightlab.com/libs/juxtapose/latest/css/juxtapose.css">
</body>
</html>

BIN
public/juxtaposejs/poc-screenshot1.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 129 KiB

BIN
public/readme_assets/Frame 1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
public/readme_assets/Frame 2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
public/readme_assets/Frame 3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
public/readme_assets/Frame 4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
public/readme_assets/Frame 5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
public/readme_assets/Frame 6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.2 KiB

BIN
public/readme_assets/Lightbox 1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 398 KiB

BIN
public/readme_assets/Lightbox 2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 233 KiB

BIN
public/readme_assets/Lightbox 3.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 193 KiB

BIN
public/readme_assets/Lightbox 4.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 154 KiB

BIN
public/readme_assets/Lightbox 5.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 143 KiB

BIN
public/readme_assets/Lightbox 6.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 80 KiB