diff --git a/Home.php b/Home.php
new file mode 100644
index 0000000000000000000000000000000000000000..6e2d066f31d580b73d77a3a41f6af5787985bb05
--- /dev/null
+++ b/Home.php
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Drinkpedia</title>
+ <meta charset="UTF-8">
+ <link rel="stylesheet" type="text/css" href="css/Home.css">
+</head>
+
+<body id="body">
+
+
+ <div id="content">
+ <div class="topnav">
+ <a class="active" href="">Hiérarchie</a>
+ <a href="">Avancé</a>
+ <a href="">Cocktails</a>
+ <a href="">Mon Compte</a>
+ </div>
+
+ <iframe id="frame" frameborder="0" src="Index.php">
+
+ </iframe>
+ </div>
+
+
+
+ <div id="BlurredElementCenteredContainer">
+ <iframe id="BlurredElementEmbed" src=""></iframe>
+ <button id="BlurredElementCenteredClose">X</button>
+ </div>
+
+ <script>
+
+ let wrapper = document.getElementById('BlurredElementCenteredContainer');
+ let content = document.getElementById('content');
+ let embed = document.getElementById('BlurredElementEmbed');
+
+ window.onmessage = function (e) {
+
+ let m_event = e.data.event;
+ let m_value = e.data.value;
+
+ if(m_event == 'keyup')
+ {
+ if(m_value == 27)
+ {
+ hideRecipe();
+ }
+ }
+ else if(m_event == 'recipeselect')
+ {
+ showRecipe(m_value);
+ }
+ }
+
+ function hideRecipe()
+ {
+ wrapper.classList.remove('active');
+ content.classList.remove('blur');
+ wraper.disabled = false;
+ }
+
+ function showRecipe(id)
+ {
+ var clone = embed.cloneNode(true);
+ clone.setAttribute('src','RecipeView.php?id_recipe=' + id);
+ embed.parentNode.replaceChild(clone,embed);
+ embed = clone;
+
+ wrapper.classList.add('active');
+ content.classList.add('blur');
+ wrapper.disabled = true;
+
+ embed.focus();
+
+ document.addEventListener('keyup', function (e)
+ {
+ if(e.keyCode === 27)
+ {
+ hideRecipe();
+ }
+ });
+
+
+ }
+
+ let closeBtn = document.getElementById('BlurredElementCenteredClose');
+
+ closeBtn.addEventListener('click', hideRecipe);
+
+ </script>
+
+</body>
\ No newline at end of file
diff --git a/Index.php b/Index.php
index 51d4abaaaa98c403624749d22aeb9efbdf12407a..f086bc15524e102c8da5758b441da2a28074b796 100644
--- a/Index.php
+++ b/Index.php
@@ -7,73 +7,31 @@
</head>
<body id="body">
- <div id="content">
- <select id="recipeSelection">
- <?php
- include "Donnees.inc.php";
- for($i = 0; $i < count($Recettes); $i++)
- {
- echo '<option value="' . $i . '">' . $Recettes[$i]['titre'] . '</option>';
- }
- ?>
- </select>
- <button onclick="showRecipe(document.getElementById('recipeSelection').value);">Show</button>
- </div>
+ <select id="recipeSelection">
+ <?php
+ include "Donnees.inc.php";
+ for($i = 0; $i < count($Recettes); $i++)
+ {
+ echo '<option value="' . $i . '">' . $Recettes[$i]['titre'] . '</option>';
+ }
+ ?>
+ </select>
+ <button onclick="notifyParent(document.getElementById('recipeSelection').value);">Show</button>
-
- <div id="BlurredElementCenteredContainer">
- <!--
- <div>
- <iframe id="BlurredElementEmbed" scrolling="no" src=""></iframe>
- </div>
- -->
- <iframe id="BlurredElementEmbed" scrolling="no" src=""></iframe>
- <button id="BlurredElementCenteredClose">X</button>
- </div>
-
-
+ <!-- JAVASCRIPT -->
<script>
- let wrapper = document.getElementById('BlurredElementCenteredContainer');
- let content = document.getElementById('content');
- let embed = document.getElementById('BlurredElementEmbed');
-
- function hideRecipe()
+
+ function notifyParent(e)
{
- wrapper.classList.remove('active');
- content.classList.remove('blur');
- wraper.disabled = false;
+ var data = {
+ event: 'recipeselect',
+ value: Number(e)
+ };
+ window.top.postMessage(data, [data.event, data.value]);
}
- function showRecipe(id)
- {
- var clone = embed.cloneNode(true);
- clone.setAttribute('src','RecipeView.php?id_recipe=' + id);
- embed.parentNode.replaceChild(clone,embed);
- embed = clone;
-
- wrapper.classList.add('active');
- content.classList.add('blur');
- wrapper.disabled = true;
-
- embed.focus();
-
- document.addEventListener('keyup', function (e)
- {
- if(e.keyCode === 27)
- {
- hideRecipe();
- }
- });
-
-
- }
-
- let closeBtn = document.getElementById('BlurredElementCenteredClose');
-
- closeBtn.addEventListener('click', hideRecipe);
-
</script>
</body>
</html>
\ No newline at end of file
diff --git a/RecipeView.php b/RecipeView.php
index 6711789010188ed7927d69acbb14aa2ba18c64c7..1c566fa41a2d426692a0eac3aba15e53add74bbb 100644
--- a/RecipeView.php
+++ b/RecipeView.php
@@ -40,4 +40,19 @@
</div>
+ <script>
+
+ document.addEventListener('keyup', function (e)
+ {
+ if(e.keyCode == 27)
+ {
+ var data = {
+ event: 'keyup',
+ value: e.keyCode
+ };
+ window.top.postMessage(data, [data.event, data.value]);
+ }
+ });
+ </script>
+
</body>
\ No newline at end of file
diff --git a/css/Home.css b/css/Home.css
new file mode 100644
index 0000000000000000000000000000000000000000..de6dde851fd4a7000f38d2565d7ac3feaf5038d4
--- /dev/null
+++ b/css/Home.css
@@ -0,0 +1,97 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+iframe {
+ position: relative;
+ border: none;
+ border-width: 0px;
+ padding: 0px;
+ width: 100vw;
+ height: 100%;
+}
+
+.topnav {
+ background-color: #333;
+ overflow: hidden;
+}
+
+.topnav a {
+ float: left;
+ color: #f2f2f2;
+ text-align: center;
+ padding: 14px 16px;
+ text-decoration: none;
+ font-size: 17px;
+}
+
+.topnav a:hover {
+ background-color: #ddd;
+ color: black;
+}
+
+.topnav a.active {
+ background-color: #534caf;
+ color: white;
+}
+
+#content {
+ width: 100%;
+ display: block;
+}
+
+#content.blur {
+ filter: blur(5px);
+}
+
+#BlurredElementCenteredContainer {
+ width: 100vw;
+ height: 100vh;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 1;
+ display: none;
+ justify-content: center;
+ align-items: center;
+}
+
+#BlurredElementCenteredContainer.active {
+ display: flex;
+}
+
+#BlurredElementCenteredChildContainer {
+ border: none;
+ width: 75%;
+ max-height: 90%;
+ overflow: auto;
+}
+
+#BlurredElementCenteredClose {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ text-shadow: 0px 0px 10px black;
+ border-color: transparent;
+ background: transparent;
+ font-size: x-large;
+}
+
+#BlurredElementEmbed {
+
+ width: 75vw;
+ height: 90vh;
+ padding: 20px;
+ border-radius: 5px;
+ background-color: white;
+ border-color: black;
+ border-width: 1px;
+ overflow: auto;
+
+ position: relative;
+ border-radius: 5px;
+
+ box-shadow: 0px 0px 50px 5px black;
+}
\ No newline at end of file
diff --git a/css/Index.css b/css/Index.css
index 118a554c7dc13ced52fb3426c06d67b1902ecb0b..c88171a756c1c3aca4262a0d848e9bc2c93ae89f 100644
--- a/css/Index.css
+++ b/css/Index.css
@@ -7,62 +7,4 @@
body {
background: lightblue;
width: 100vw;
-}
-
-#content {
- width: 100%;
-}
-
-#content.blur {
- filter: blur(5px);
-}
-
-#BlurredElementCenteredContainer {
- width: 100vw;
- height: 100vh;
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
- display: none;
- justify-content: center;
- align-items: center;
-}
-
-#BlurredElementCenteredContainer.active {
- display: flex;
-}
-
-#BlurredElementCenteredChildContainer {
- border: none;
- width: 75%;
- max-height: 90%;
- overflow: auto;
-}
-
-#BlurredElementCenteredClose {
- position: absolute;
- top: 10px;
- right: 10px;
- text-shadow: 0px 0px 10px black;
- border-color: transparent;
- background: transparent;
- font-size: x-large;
-}
-
-iframe {
-
- width: 75vw;
- height: 90vh;
- padding: 20px;
- border-radius: 5px;
- background-color: white;
- border-color: black;
- border-width: 1px;
- overflow: auto;
-
- position: relative;
- border-radius: 5px;
-
- box-shadow: 0px 0px 50px 5px black;
}
\ No newline at end of file