Merge pull request #33 from ICEI-PUC-Minas-PPLCC-TI/exibir-arduino

Adicionando exibição de componentes

src/exibir-arduino/assets/css/style.css

@@ -0,0 +1,337 @@
+@import url('https://fonts.googleapis.com/css2?family=Bungee&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap");
+@import "compass/css3";
+
+
+:root {
+	--principal-blue: #1372bf;
+	--white: #f9f9f9;
+	--light-grey: #cccccc;
+	--grey: #858585;
+	--black: #2C2C2C;
+	--light-blue: #88FFFF;
+	--light-yellow: #FFFC5C;
+	--light-red: #FF5544;
+	--light-green: #55AA55;
+}
+
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+body {
+	background-color: var(--white);
+	font-family: "Poppins", sans-serif;
+}
+
+h1 {
+	margin-top: 20px;
+	text-align: center;
+}
+
+h2 {
+	display: block;
+	margin: 1em auto 0.5em;
+	font-size: 2em;
+	text-align: start;
+}
+
+h3 {
+	width: 100%;
+	margin: 1em 0 .5em;
+	font-size: 1.4em;
+	color: var(--white);
+}
+
+a {
+	text-decoration: none;
+}
+
+ul {
+	list-style: none;
+}
+
+/* HEADER */
+header {
+	position: sticky;
+	top: 0;
+	width: 100%;
+	padding: 1em 0;
+	z-index: 1;
+	background-color: var(--black);
+}
+
+.logo {
+	display: inline-block;
+	margin-left: 20px;
+	color: var(--principal-blue);
+	font-size: 1.5em;
+	font-family: 'Bungee', sans-serif;
+}
+
+nav {
+	display: flex;
+	align-items: center;
+	position: fixed;
+	width: 100%;
+	height: 100%;
+	max-height: 0;
+	overflow: hidden;
+	background-color: var(--black);
+	transition: max-height .5s ease-out;
+}
+
+.menu {
+	display: flex;
+	margin: 8px 15px;
+}
+
+.menu a {
+	display: flex;
+	padding: 10px 25px;
+	color: var(--white);
+}
+
+nav ul {
+	margin: 0 20px;
+}
+
+nav ul li {
+	margin: 0 3px;
+}
+
+nav ul li:hover,
+nav ul li:last-child {
+	background: var(--principal-blue);
+	transition: .5s linear;
+}
+
+.hamb {
+	margin: 0 2em;
+	padding: 20px 20px;
+	float: right;
+	cursor: pointer;
+}
+
+.hamb-line {
+	display: block;
+	position: relative;
+	width: 24px;
+	height: 3px;
+	background: var(--white);
+}
+
+.hamb-line::before,
+.hamb-line::after {
+	display: block;
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	content: '';
+	background: var(--white);
+	transition: all .2s ease-out;
+}
+
+.hamb-line::before {
+	top: 7px;
+}
+
+.hamb-line::after {
+	top: -7px;
+}
+
+.side-menu {
+	display: none;
+}
+
+.side-menu:checked~nav {
+	max-height: 100%;
+}
+
+.side-menu:checked~.hamb .hamb-line {
+	background: transparent;
+}
+
+.side-menu:checked~.hamb .hamb-line::before {
+	top: 0;
+	transform: rotate(-45deg);
+}
+
+.side-menu:checked~.hamb .hamb-line::after {
+	top: 0;
+	transform: rotate(45deg);
+}
+
+@media (min-width: 768px) {
+	nav {
+		position: relative;
+		width: fit-content;
+		max-height: none;
+		top: 0;
+		float: right;
+		background-color: transparent;
+	}
+
+	.menu li {
+		float: left;
+	}
+
+	.hamb {
+		display: none;
+	}
+}
+
+/* MAIN CONTENT */
+main {
+	width: 800px;
+	max-width: 100%;
+	margin: auto;
+	padding: 0 1em;
+}
+
+/* FOOTER */
+footer {
+	display: grid;
+	grid-template-columns: 4fr 3fr;
+	margin-top: 3em;
+	padding: 1em 4em 3em;
+	background-color: var(--black);
+	color: var(--light-grey);
+}
+
+footer section {
+	display: flex;
+	width: 100%;
+	min-height: 15em;
+	padding: 0 2em;
+	flex-direction: column;
+}
+
+footer section p {
+	margin-top: .5em;
+	text-align: justify;
+}
+
+footer section li {
+	list-style: none;
+}
+
+footer section li a {
+	font-weight: bold;
+	text-decoration: underline;
+	color: inherit;
+}
+
+@media screen and (max-width: 1024px) {
+	footer {
+		padding: 1em;
+	}
+}
+
+@media screen and (max-width: 768px) {
+	footer {
+		grid-template-columns: 1fr;
+		padding: 0;
+	}
+}
+
+.ImageMap {
+	position: relative;
+	width: 100%;
+}
+
+.ImageMap img {
+	max-width: 100%;
+	height: auto;
+}
+
+.ImageMap area {
+	outline: none;
+}
+
+.ImageMap area[alt="11"] {
+	cursor: 10%, 20%, 2%;
+}
+
+button {
+	margin: 5px;
+	padding: 0;
+	border: none;
+	font: inherit;
+	color: inherit;
+	background-color: transparent;
+	cursor: pointer;
+	height: 50px;
+	width: 50px;
+	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+		0 3px 1px -2px rgba(0, 0, 0, 0.12),
+		0 1px 5px 0 rgba(0, 0, 0, 0.2);
+	border-radius: 25px;
+}
+
+button:focus {
+	outline: 0;
+}
+
+button {
+	height: 50px;
+	width: 50px;
+	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+		0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
+}
+
+.button-five {
+	border-radius: 25px;
+	background-color: rgb(152, 183, 230);
+}
+
+.modal {
+	display: none;
+	position: fixed;
+	z-index: 1;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	overflow: auto;
+	background-color: rgb(0, 0, 0);
+	background-color: rgba(0, 0, 0, 0.4);
+	z-index: 9999;
+}
+
+
+.modal-content {
+	background-color: #fefefe;
+	margin: 15% auto;
+	padding: 20px;
+	border: 1px solid #888;
+	width: 80%;
+}
+
+
+.close {
+	color: #aaa;
+	float: right;
+	font-size: 28px;
+	font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+	color: black;
+	text-decoration: none;
+	cursor: pointer;
+}
+
+#modalText {
+	text-align: center;
+}
+
+#modalImage {
+    display: block;
+    margin: auto;
+    max-width: 100%; 
+    height: auto; 
+}

src/exibir-arduino/assets/js/index.js

@@ -0,0 +1,45 @@
+document.querySelector("#btn1").addEventListener("click", () => carregarItens(6), false);
+document.querySelector("#btn2").addEventListener("click", () => carregarItens(7), false);
+document.querySelector("#btn3").addEventListener("click", () => carregarItens(8), false);
+document.querySelector("#btn4").addEventListener("click", () => carregarItens(9), false);
+document.querySelector("#btn5").addEventListener("click", () => carregarItens(10), false);
+document.querySelector("#btn6").addEventListener("click", () => carregarItens(11), false);
+document.querySelector("#btn7").addEventListener("click", () => carregarItens(5), false);
+document.querySelector("#btn8").addEventListener("click", () => carregarItens(4), false);
+document.querySelector("#btn9").addEventListener("click", () => carregarItens(3), false);
+document.querySelector("#btn10").addEventListener("click", () => carregarItens(1), false);
+document.querySelector("#btn11").addEventListener("click", () => carregarItens(0), false);
+document.querySelector("#btn12").addEventListener("click", () => carregarItens(2), false);
+
+
+var modal = document.getElementById("myModal");
+var modalImage = document.getElementById('modalImage');
+var modalText = document.getElementById('modalText');
+var closeBtn = document.getElementById("closeBtn");
+
+function carregarItens(index) {
+    fetch('db.json')
+        .then(function (response) { return response.json() })
+        .then(function (db) {
+            let informacoes = db.arduino[index];
+            modalImage.src = informacoes.imagem; 
+
+            modalText.innerHTML = `<strong>${informacoes.nome}</strong> | ${informacoes.descricao}`;
+
+            modal.style.display = "block";
+        })
+}
+
+closeBtn.onclick = function() {
+    modal.style.display = "none";
+}
+
+window.onclick = function(event) {
+    if (event.target == modal) {
+        modal.style.display = "none";
+    }
+}
+
+function fecharModal() {
+    modal.style.display = "none";
+}