Merge pull request #1 from Federico-G/fede

Debuggear code alpha 1

Author: Federico-G

README.md

@@ -1 +1,36 @@
-# debuggear
+# debuggear
+
+Debuggear es una aplicación para ayudar a aquellas personas que estan entrando en el espectacular mundo de la programación y la algoritmia. Esta aplicación permite capturar un algoritmo generado a mano, interpretarlo, y permitir ejecutarlo paso a paso
+
+
+{acerca de}
+
+
+
+
+## Consultas y reporte de errores
+{issues de github}
+
+
+
+## Tecnologias usadas:
+- Hosteado en Firebase
+- Tensorflowjs: Reconocimiento de formas (local)
+- Google Cloud Vision Handwriting OCR: Reconocimiento de texto (via nodejs)
+- Interactjs: Manipulación de formas en la aplicación
+- Nearleyjs: Interpretación de los lenguajes en BNF, y su validación
+- Rextester: Ejecución de cada paso sobre el lenguaje aplicado
+- Jquery v3
+- Bootstrap v4 para el diseño del frontend
+- Compressorjs para la compresión de imagenes subidas por el usuario
+- Basado en estandares de PWA para funcionar también como aplicación movil
+
+
+## Lenguajes soportados
+Aunque la aplicación se pensó para soportar varios lenguajes, por ahora sólo soporta C (C99)
+
+
+## Próximos pasos
+- Mejorar forma de compartir (Ya que reconocer extensiones de archivos para la aplicación como PWA esta ["demorado"](https://github.com/w3c/manifest/issues/626)
+- Migrar a Bootstrap v5 y quitar Jquery
+- Agregar Arreglos

package-lock.json

@@ -1,6 +1,7 @@
 :root {
   --main-color: #F3841B;
   --secondary-color: #AC4A87;
+  --font-size: 20px; /* define */
 }
 
 html {
@@ -13,16 +14,17 @@ body {
   flex-direction: column;
 }
 
-nav.navbar {
+.main-color {
   background-color: var(--main-color);
 }
 
-nav.navbar .navbar-brand {
-  color: #FFFFFF;
+.sql-color {
+  background-color: var(--secondary-color);
 }
 
-nav.navbar .navbar-brand:hover {
-  color: #FFFFFF;
+#version {
+  font-size: 10px;
+  color: #DCB;
 }
 
 main {
@@ -35,7 +37,6 @@ footer {
   display: flex;
   justify-content: space-evenly;
   flex-direction: row;
-  background: var(--main-color);
   text-align: center;
 }
 
@@ -50,6 +51,10 @@ footer > * {
   padding-bottom: 8px;
 }
 
+footer > .disabled, footer > :disabled {
+  color: #777;
+}
+
 footer a:hover {
   color: #FFF;
   text-decoration: none;
@@ -63,11 +68,12 @@ footer a:hover {
   font-size: 28px;
   position: absolute;
   padding: 25px;
-  height: 100%;
+  /*height: 100%;*/
   width: 100%;
   display: flex;
   flex-direction: column;
-  place-content: center;
+  /*place-content: center*/;
+  z-index: 1;
 }
 
 #diagram-bg-image > img {
@@ -120,17 +126,19 @@ footer a:hover {
   outline: 0;
   position: absolute;
   width: 100%;
-  height: 30px;
+  /*height: var(--font-size)*X;*/
+  height: 100%;
   text-align: center;
   resize: none;
   overflow: hidden;
+  font-family: monospace;
 }
 
 #add_shape {
   position: absolute;
   right: 25px;
   bottom: 105px;
-  z-index: 2000;
+  z-index: 1001;
 }
 
 #add_shape > button {
@@ -146,7 +154,7 @@ footer a:hover {
   position: absolute;
   left: 25px;
   bottom: 105px;
-  z-index: 2000;
+  z-index: 1001;
   border-radius: 60px;
   width: 60px;
   height: 60px;
@@ -173,11 +181,21 @@ footer a:hover {
   position: absolute;
 
   z-index: 100;
+
+  font-family: monospace;
+  font-size: var(--font-size);
 }
 
 #shape-container {
+  transform-origin: 0 0;
   position: relative;
   height: 5000px;
+  width: 1000px;
+}
+
+.shape-end {
+  padding-top: 0;
+  padding-bottom: 15px;
 }
 
 .shape-while {
@@ -187,7 +205,7 @@ footer a:hover {
 
 .shape-if {
   align-items: flex-start;
-  padding-top: 50px;
+  padding-top: 90px;
   z-index: 90;
 }
 
@@ -206,16 +224,27 @@ footer a:hover {
   height: 70px;
 }
 
+.popover {
+  font-size: 3vw;
+}
+
+.popover:hover {
+  z-index: 2000;
+}
+
 
 
 
 /* RUN */
 #console-container {
-  max-height: 100px;
+  max-height: 150px;
   overflow-y: auto;
+  font-size: 17px;
+  font-family: monospace;
+  white-space: pre-wrap;
 }
 #console-container > div {
-  min-height: 100px;
+  min-height: 150px;
   /*background-color: rgba(255, 255, 255, 0.9375);*/
   background: #FAFAFA;
 }

public/css/bootstrap.min.css

@@ -6,6 +6,8 @@
 	<meta name='viewport' content='width=device-width, initial-scale=1' />
 	<link rel='shortcut icon' href='favicon.ico' />
 	<title>Debuggear web</title>
+	<meta name="title" content="Debuggear web">
+	<meta name="description" content="Description">
 
 	<link rel="manifest" href="/manifest.json" />
 
@@ -20,6 +22,13 @@
 	<meta name="msapplication-TileColor" content="#FFFFFF">
 	<meta name="theme-color" content="#F3841B">
 
+	<!-- Open Graph -->
+	<meta property="og:type" content="website">
+	<meta property="og:url" content="https://debuggear-web.web.app/">
+	<meta property="og:title" content="Debuggear web">
+	<meta property="og:description" content="Description">
+	<meta property="og:image" content="https://debuggear-web.web.app/android-chrome-512x512.png">
+
 	<!-- vendor -->
 	<link type='text/css' rel='stylesheet' href='css/font-awesome.min.css' />
 	<link type='text/css' rel='stylesheet' href='css/bootstrap.min.css' />
@@ -28,24 +37,50 @@
 	<link type='text/css' rel='stylesheet' href='css/main.css' />
 </head>
 <body>
-	<header role="banner">
-		<nav class="navbar navbar-expand-lg navbar-light">
+	<header role="banner" style="z-index: 1002;">
+		<nav class="navbar navbar-expand-lg navbar-dark main-color">
 			<div class="container">
 				<span class="navbar-brand">
 					<img src="/image/white-icon.svg" width="32" />
 					Debuggear
 				</span>
+				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+					<span class="navbar-toggler-icon"></span>
+				</button>
+				<div class="collapse navbar-collapse" id="navbarSupportedContent">
+					<ul class="navbar-nav">
+						<li class="nav-item">
+							<a class="nav-link" href="#" onclick="dg.step.screenMain(); $('.navbar-collapse').collapse('hide'); return false;">Diagrama</a>
+						</li>
+						<li class="nav-item">
+							<a class="nav-link" href="#" onclick="dg.step.screenInfo(); $('.navbar-collapse').collapse('hide'); return false;">Info</a>
+						</li>
+						<li class="nav-item">
+							<a class="nav-link" href="#" onclick="dg.step.screenHelp(); $('.navbar-collapse').collapse('hide'); return false;">Ayuda</a>
+						</li>
+						<li class="nav-item">
+							<a class="nav-link" href="#" onclick="dg.step.screenFunctions(); $('.navbar-collapse').collapse('hide'); return false;">Funciones</a>
+						</li>
+						<li class="nav-item" style="display: none;">
+							<a class="nav-link" href="#" id="instalar"><i class='fa fa-mobile'></i> <span>Instalar</span></a>
+						</li>
+						<li class="nav-item">
+							<a class="nav-link disabled" href="#"><span id="version"></span></a>
+						</li>
+					</ul>
+				</div>
 			</div>
 		</nav>
 	</header>
+
 	<main id='main' role='main'>
 		<div id='intro' style="position: absolute;"></div>
 		<div id='diagram-bg-image'></div>
 		<div id='shape-container'></div>
 	</main>
 	<div id='buttons'></div>
 	<div id='console-container'></div>
-	<footer></footer>
+	<footer class="main-color"></footer>
 	<div class="modal fade" id="symbol-table" tabindex="-1" aria-labelledby="symbol-table-label" aria-hidden="true">
 		<div class="modal-dialog">
 			<div class="modal-content">
@@ -60,12 +95,17 @@ <h5 class="modal-title" id="symbol-table-label">Tabla de símbolos</h5>
 		</div>
 	</div>
 
+	<!-- Google ads -->
+	<script data-ad-client="ca-pub-1993499454382682" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+
 	<!-- vendor -->
 	<script src='js/jquery.min.js'></script>
 	<script src='js/bootstrap.bundle.min.js'></script>
 	<script src='js/interact.min.js'></script>
 	<script src='js/compressor.min.js'></script>
 
+	<script src='js/nearley.js'></script>
+
 	<script src='js/tf.min.js'></script>	
 	<script src='js/tf-automl.min.js'></script>
 
@@ -76,18 +116,17 @@ <h5 class="modal-title" id="symbol-table-label">Tabla de símbolos</h5>
 	<script src='js/menu.js'></script>
 	<script src='js/step.js'></script>
 	<script src='tf.js'></script>
-	<script src='js/code/code.js'></script>
 
-	<script type="text/javascript">
-		if ('serviceWorker' in navigator) {
-			window.addEventListener('load', function() {
-				navigator.serviceWorker.register('/sw.js');
-			});
-		}
+	<script src='js/code/Console.js'></script>
+	<script src='js/code/Node.js'></script>
+	<script src='js/code/Step.js'></script>
+	<script src='js/code/Symbol.js'></script>
+	<script src='js/code/SymbolTable.js'></script>
+	<script src='js/code/Tree.js'></script>
 
-		$(function() {
-			dg.step.check();
-		});
-	</script>
+	<script src='js/language/c/bnf.js'></script>
+	<script src='js/language/c/validation.js'></script>
+	<script src='js/language/c/solver.js'></script>
+	<script src='js/language/c/to-code.js'></script>
 </body>
 </html>