MaxMonteil · husseinmur · May 1, 2019 · May 1, 2019 · May 1, 2019 · May 1, 2019
diff --git a/app.py b/app.py
@@ -1,10 +1,11 @@
+from io import BytesIO
 from engine import Engine
 from flask import Flask, request, send_file, jsonify, render_template
 from pathlib import Path
 import os
 import requests
 import asyncio
-
+from bs4 import BeautifulSoup
 
 # On *nix systems, the event loop needs to have a child watcher attached but this isn't
 # done automatically, additionally it can only be done while in the main thread which
@@ -32,7 +33,7 @@ def get_analysis():
         output_format = "json"
 
     print(f"Calling lighthouse on {target_url}")
-    engine = Engine(target_url=target_url)
+    engine = Engine(target_url=target_url, audit_format=output_format)
 
     asyncio.set_event_loop(loop)
     loop.run_until_complete(engine.run_analysis())
@@ -44,7 +45,7 @@ def get_analysis():
         return (
             send_file(
                 engine.audit,
-                as_attachment=True,
+                as_attachment=False,
                 attachment_filename=f"awe_analysis.{output_format}",
             ),
             200,
@@ -90,6 +91,53 @@ def awe():
     )
 
 
+@app.route("/api/diff")
+def diff():
+    target_url = request.args.get("url", default="", type=str)
+
+    engine = Engine(target_url=target_url)
+
+    asyncio.set_event_loop(loop)
+    loop.run_until_complete(engine.run_engine())
+
+    soup = BeautifulSoup(open("dist/optimize.html"), "html.parser")
+
+    oldString = BeautifulSoup(
+        engine.site_html.getvalue().decode("UTF-8"), "html.parser"
+    )
+
+    for script in oldString.findAll("script"):
+        script.decompose()
+    for style in oldString.findAll("style"):
+        style.decompose()
+    old = soup.find("div", {"id": "old"})
+
+    old.string = str(oldString)
+
+    newString = BeautifulSoup(
+        engine.accessible_site.getvalue().decode("UTF-8"), "html.parser"
+    )
+    new = soup.find("div", {"id": "new"})
+
+    for script in newString.findAll("script"):
+        script.decompose()
+    for style in newString.findAll("style"):
+        style.decompose()
+
+    old.string = str(oldString)
+    new.string = str(newString)
+
+    download = soup.find("a", {"id": "downloadlink"})
+    download["href"] = "/api/run_engine?url=" + target_url
+    byte_html = BytesIO()
+    byte_html.write(soup.encode())
+    byte_html.seek(0)
+    return (
+        send_file(byte_html, as_attachment=False, attachment_filename="awe_site.html"),
+        200,
+    )
+
+
 @app.route("/", defaults={"path": ""})
 # @app.route("/<path:path>")
 def catch_all(path):
@@ -98,6 +146,38 @@ def catch_all(path):
     return render_template("index.html")
 
 
+@app.route("/contact", defaults={"path": ""})
+# @app.route("/<path:path>")
+def contact(path):
+    if app.debug:
+        return requests.get(f"http://localhost:8080/{path}").text
+    return render_template("contact.html")
+
+
+@app.route("/about", defaults={"path": ""})
+# @app.route("/<path:path>")
+def about(path):
+    if app.debug:
+        return requests.get(f"http://localhost:8080/{path}").text
+    return render_template("about.html")
+
+
+@app.route("/services", defaults={"path": ""})
+# @app.route("/<path:path>")
+def services(path):
+    if app.debug:
+        return requests.get(f"http://localhost:8080/{path}").text
+    return render_template("services.html")
+
+
+@app.route("/demo", defaults={"path": ""})
+# @app.route("/<path:path>")
+def demo(path):
+    if app.debug:
+        return requests.get(f"http://localhost:8080/{path}").text
+    return render_template("before.html")
+
+
 if __name__ == "__main__":
     app.run(
         debug=True,

diff --git a/dist/about.html b/dist/about.html
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Accessibility Web Engine</title>
+    <link rel="icon" href="/static/assets/logos/favicon.png" type="image/png" sizes="50x50">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="Accessibility Web Engine">
+    <meta name="keywords" content="Accessibility Web Engine">
+    <link href="/static/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all" />
+    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Poppins:400,300,500,700,600" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" href="/static/assets/css/animate.css"> <!-- Resource style -->
+    <link rel="stylesheet" href="/static/assets/css/owl.carousel.css">
+    <link rel="stylesheet" href="/static/assets/css/owl.theme.css">
+    <link rel="stylesheet" href="/static/assets/css/magnific-popup.css">
+    <link rel="stylesheet" href="/static/assets/css/animsition.min.css">
+    <link rel="stylesheet" href="/static/assets/css/ionicons.min.css"> <!-- Resource style -->
+    <link href="/static/assets/css/style.css" rel="stylesheet" type="text/css" media="all" />
+  </head>
+  <body>
+    <div class="wrapper animsition" data-animsition-in-class="fade-in"
+      data-animsition-in-duration="1000"
+      data-animsition-out-class="fade-out"
+      data-animsition-out-duration="1000">
+        <div class="container">
+          <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
+          <div class="container">
+                <!-- Brand and toggle get grouped for better mobile display -->
+          <div class="navbar-header page-scroll">
+            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
+              <span class="sr-only">Toggle navigation</span>
+              <span class="icon-bar"></span>
+              <span class="icon-bar"></span>
+              <span class="icon-bar"></span>
+            </button>
+              <a class="navbar-brand page-scroll" href="#main"><img src="/static/assets/logos/logo.png" height="35" width="35" alt="Mu" /></a>
+              </div>
+                <!-- Collect the nav links, forms, and other content for toggling -->
+              <div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
+                <ul class="nav navbar-nav">
+                    <li><a href="/">Home</a></li>
+                    <li><a href="services">Services</a></li>
+                    <li><a class="page-scroll" href="about">About</a></li>
+                    <li><a href="contact">Contact</a></li>
+                </ul>
+            </div>
+          </div>
+        </nav><!-- /.navbar-collapse -->
+      </div><!-- /.container-fluid -->
+
+    <div class="main" id="main"><!-- Main Section-->
+      <div class="hero-section app-hero">
+        <div class="pricing-section no-color text-center" id="services">
+
+            <div class="container">
+              <div class="col-md-8 col-md-offset-2 nopadding">
+              <div class="services-content">
+                <h1 class="wow fadeInUp" data-wow-delay="0s"> About Us</h1>
+                <div class="hero-image">
+                    <img class="img-responsive" src="/static/assets/images/about-img.png" alt="" />
+                  </div>
+                <p class="wow fadeInUp" data-wow-delay="0.2s">
+                    <br><br><br><br>
+                  Dr. Mahmoud Bdeir<br><br>
+                  Maria Daou<br><br>
+                  Maximilien Monteil<br><br>
+                  Hussein Murtada<br><br>
+                  Marina Kayrouz<br><br>
+                  Maxim Hermez<br><br>
+                  Waseem ElGhali
+              </div>
+              <hr>
+            </div>      
+            </div>
+
+
+
+<!-- Subscribe Form -->
+  <div class="cta-sub text-center no-color">
+    <div class="container">
+      <h2 class="wow fadeInUp" data-wow-delay="0s">Subscribe to recieve latest news</h2>
+        <p class="wow fadeInUp" data-wow-delay="0.2s">
+        Don't worry, we won't spam your inbox. We will just notify you <br class="hidden-xs"> of important updates and major product releases.
+        </p>
+      <div class="form wow fadeInUp" data-wow-delay="0.3s">
+        <form class="subscribe-form wow zoomIn" action="assets/php/subscribe.php" method="post" accept-charset="UTF-8" enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
+          <input class="mail" type="email" name="email" placeholder="Enter your email" autocomplete="off"><input class="submit-button" type="submit" value="Subscribe">
+        </form>
+        <div class="success-message"></div>
+			  <div class="error-message"></div>
+      </div>
+    </div>
+  </div></div>
+
+
+<!-- Footer Section -->
+<div class="footer">
+  <div class="container">
+      <div class="col-md-12 text-center">
+        <img class="img-circle" src="/static/assets/logos/logo.png" width="40" height="40" alt="" />
+        <ul class="footer-menu">
+          <li><a href="#">Home</a></li>
+          <li><a href="#">About</a></li>
+          <li><a href="#">Terms</a></li>
+          <li><a href="#">Privacy</a></li>
+        </ul>
+      <div class="footer-text">
+        <p>
+          Copyright © 2019 AWE Accessibility Web Engine. All Rights Reserved.
+        </p>
+      </div>
+    </div>
+    </div>
+  </div>
+  <!-- Scroll To Top -->
+
+    <a id="back-top" class="back-to-top page-scroll" href="#main">
+    <i class="ion-ios-arrow-thin-up"></i>
+    </a>
+
+  <!-- Scroll To Top Ends-->
+
+
+    </div><!-- Main Section -->
+  </div><!-- Wrapper-->
+
+<!-- Jquery and Js Plugins -->
+  <script type="text/javascript" src="/static/assets/js/jquery-2.1.1.js"></script>
+  <script type="text/javascript" src="/static/assets/js/bootstrap.min.js"></script>
+  <script type="text/javascript" src="/static/assets/js/plugins.js"></script>
+  <script type="text/javascript" src="/static/assets/js/menu.js"></script>
+  <script type="text/javascript" src="/static/assets/js/custom.js"></script>
+  <script type="text/javascript" src="/static/assets/js/script.js"></script>
+  </body>
+</html>
diff --git a/dist/awe_(1).zip b/dist/awe_(1).zip
diff --git a/dist/before.html b/dist/before.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="description" content="">
+  <meta name="author" content="">
+
+  <title>AWE</title>
+
+  <!-- Bootstrap core CSS -->
+  <link href="/static/demo/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+
+</head>
+
+<body>
+
+  <!-- Navigation -->
+  <nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
+    <div class="container">
+      <a class="navbar-brand" href="#">AWE DEMO</a>
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarResponsive">
+        <ul class="navbar-nav ml-auto">
+          <li class="nav-item active">
+            <a class="nav-link" href="/demo">Before
+              <span class="sr-only">(current)</span>
+            </a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="/demo/after">After</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+
+  <!-- Page Content -->
+  <div class="container">
+    <div class="row">
+      <div class="col-lg-12 text-center">
+        <h1 class="mt-5">An example page before optimization by AWE</h1>
+        <p class="lead">It contains a video without subtitles, images without alt text, and other images with bad contrast and colors</p>
+        <hr>
+        <h2>Video:</h2>
+        <video controls src="/static/demo/video/friday.mp4">
+       </video>
+       <hr>
+       <h2>Images:</h2>
+       <div class="row">
+
+       <div class="col-lg-3 col-md-3 col-xs-3 thumb">
+               <img style="width: 100%; height: 100%" class="img-responsive" src="/static/demo/images/1.jpg" alt="">
+       </div>
+       <div class="col-lg-3 col-md-3 col-xs-3 thumb">
+               <img style="width: 100%; height: 100%" class="img-responsive" src="/static/demo/images/2.jpg" alt="">
+       </div>
+       <div class="col-lg-3 col-md-3 col-xs-3 thumb">
+               <img style="width: 100%; height: 100%" class="img-responsive" src="/static/demo/images/3.jpg" alt="">
+       </div>
+       <div class="col-lg-3 col-md-3 col-xs-3 thumb">
+               <img style="width: 100%; height: 100%" class="img-responsive" src="/static/demo/images/4.jpg" alt="">
+       </div>
+    </div>
+    <hr>
+    <h2>Color contrast issues:</h2>
+    <div class="row">
+
+    <div class="col-lg-4 col-md-4 col-xs-4 thumb">
+            <img style="width: 100%; height: 100%" class="img-responsive" src="/static/demo/contrast/1-before.png" alt="">
+    </div>
+    <div class="col-lg-4 col-md-4 col-xs-4 thumb">
+            <img style="width: 100%; height: 100%" class="img-responsive" src="/static/demo/contrast/2-before.png" alt="">
+    </div>
+    <div class="col-lg-4 col-md-4 col-xs-4 thumb">
+            <img style="width: 100%; height: 100%" class="img-responsive" src="/static/demo/contrast/3-before.jpg" alt="">
+    </div>
+ </div>
+    <hr>
+  </div>
+
+  <!-- Bootstrap core JavaScript -->
+  <script src="/static/demo/vendor/jquery/jquery.min.js"></script>
+  <script src="/static/demo/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
+
+</body>
+
+</html>