diff --git a/AdvancedSearch.php b/AdvancedSearch.php
new file mode 100644
index 0000000000000000000000000000000000000000..53b0b3df5e71d5721ccee9f0e41127206d10781b
--- /dev/null
+++ b/AdvancedSearch.php
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Drinkpedia</title>
+ <meta charset="UTF-8">
+ <link rel="stylesheet" type="text/css" href="css/AdvancedSearch.css">
+</head>
+
+<body>
+ <h1>AdvancedSearch</h1>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Cocktails.php b/Cocktails.php
new file mode 100644
index 0000000000000000000000000000000000000000..d6accf513ed0f7b69053de881eb17f8c31066ff1
--- /dev/null
+++ b/Cocktails.php
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Drinkpedia</title>
+ <meta charset="UTF-8">
+ <link rel="stylesheet" type="text/css" href="css/Cocktails.css">
+</head>
+
+<body>
+ <h1>Cocktails</h1>
+ <ul>
+
+ <?php
+ include "Donnees.inc.php";
+ foreach($Recettes as $r)
+ {
+ echo '<li>' . $r['titre'] . '</li>';
+ }
+ ?>
+
+ </ul>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Index.php b/Hierarchy.php
similarity index 92%
rename from Index.php
rename to Hierarchy.php
index f086bc15524e102c8da5758b441da2a28074b796..ba7057787358a4fb18220b28c077af1bacf730a6 100644
--- a/Index.php
+++ b/Hierarchy.php
@@ -3,7 +3,7 @@
<head>
<title>Drinkpedia</title>
<meta charset="UTF-8">
- <link rel="stylesheet" type="text/css" href="css/Index.css">
+ <link rel="stylesheet" type="text/css" href="css/Hierarchy.css">
</head>
<body id="body">
diff --git a/Home.php b/Home.php
index 6e2d066f31d580b73d77a3a41f6af5787985bb05..4bca3865488785d7dcaa575f1d0cb55c5db7000b 100644
--- a/Home.php
+++ b/Home.php
@@ -8,20 +8,18 @@
<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>
+ <button id="tabBtnI" class="active" value="Hierarchy.php" onclick="tabButtonClicked('tabBtnI')">Hiérarchie</button>
+ <button id="tabBtnA" value="AdvancedSearch.php" onclick="tabButtonClicked('tabBtnA')">Avancé</button>
+ <button id="tabBtnC" value="Cocktails.php" onclick="tabButtonClicked('tabBtnC')">Cocktails</button>
+ <button id="tabBtnMA" class="right" value="MyAccount.php" onclick="tabButtonClicked('tabBtnMA')">Mon Compte</button>
</div>
- <iframe id="frame" frameborder="0" src="Index.php">
+ <iframe id="tabFrame" frameborder="0" src="Hierarchy.php">
</iframe>
</div>
-
<div id="BlurredElementCenteredContainer">
@@ -34,6 +32,8 @@
let wrapper = document.getElementById('BlurredElementCenteredContainer');
let content = document.getElementById('content');
let embed = document.getElementById('BlurredElementEmbed');
+
+ let activeTabButton = document.getElementById('tabBtnI');
window.onmessage = function (e) {
@@ -62,10 +62,7 @@
function showRecipe(id)
{
- var clone = embed.cloneNode(true);
- clone.setAttribute('src','RecipeView.php?id_recipe=' + id);
- embed.parentNode.replaceChild(clone,embed);
- embed = clone;
+ embed.setAttribute('src','RecipeView.php?id_recipe=' + id);
wrapper.classList.add('active');
content.classList.add('blur');
@@ -80,8 +77,25 @@
hideRecipe();
}
});
+ }
-
+ function switchView(viewSrc)
+ {
+ var tabFrame = document.getElementById('tabFrame');
+ tabFrame.setAttribute('src', viewSrc);
+ }
+
+ function tabButtonClicked(tabButtonId)
+ {
+ let b = document.getElementById(tabButtonId);
+ if(b.id != activeTabButton.id)
+ {
+ b.classList.add('active');
+ activeTabButton.classList.remove('active');
+ activeTabButton = b;
+
+ switchView(activeTabButton.value);
+ }
}
let closeBtn = document.getElementById('BlurredElementCenteredClose');
diff --git a/MyAccount.php b/MyAccount.php
new file mode 100644
index 0000000000000000000000000000000000000000..e7423ff971f48a12277adcf4f114b34e13333683
--- /dev/null
+++ b/MyAccount.php
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Drinkpedia</title>
+ <meta charset="UTF-8">
+ <link rel="stylesheet" type="text/css" href="css/MyAccount.css">
+</head>
+
+<body>
+ <h1>My Account</h1>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/css/Index.css b/css/Hierarchy.css
similarity index 100%
rename from css/Index.css
rename to css/Hierarchy.css
diff --git a/css/Home.css b/css/Home.css
index de6dde851fd4a7000f38d2565d7ac3feaf5038d4..6f8a0a145c52206a1191dc24fcde33cc2e19a4a6 100644
--- a/css/Home.css
+++ b/css/Home.css
@@ -4,13 +4,9 @@
box-sizing: border-box;
}
-iframe {
- position: relative;
+#tabFrame {
border: none;
- border-width: 0px;
- padding: 0px;
- width: 100vw;
- height: 100%;
+ flex-grow: 1;
}
.topnav {
@@ -18,28 +14,35 @@ iframe {
overflow: hidden;
}
-.topnav a {
+.topnav button {
+ background-color: cornsilk;
float: left;
- color: #f2f2f2;
+ color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
-.topnav a:hover {
- background-color: #ddd;
+.topnav button.right {
+ float: right;
+}
+
+.topnav button:hover {
+ background-color: cornflowerblue;
color: black;
}
-.topnav a.active {
+.topnav button.active {
background-color: #534caf;
color: white;
}
#content {
width: 100%;
- display: block;
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
}
#content.blur {
@@ -94,4 +97,4 @@ iframe {
border-radius: 5px;
box-shadow: 0px 0px 50px 5px black;
-}
\ No newline at end of file
+}