From 226571a04c0d934452b65d8b7619114b877ff573 Mon Sep 17 00:00:00 2001
From: wangqun <wangqun@baidu.com>
Date: Fri, 20 Mar 2020 19:40:04 +0800
Subject: [PATCH] [change]examples tinyYolo style

[change]examples tinyYolo style
---
 web/examples/tinyYolo/index.html | 108 ++++++++++++++++++++++---------
 1 file changed, 78 insertions(+), 30 deletions(-)
diff --git a/web/examples/tinyYolo/index.html b/web/examples/tinyYolo/index.html
index 418c4a0f40..f719c4ffcc 100644
--- a/web/examples/tinyYolo/index.html
+++ b/web/examples/tinyYolo/index.html
@@ -1,36 +1,84 @@
 <!DOCYTPE html>
 <html>
-    <head>
-        <meta charset="utf-8">
-        <title>paddle web demo</title>
-        <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
-        <style>
-            .image-wrap {
-                position: relative;
-            }
-            #myDiv {
-                position: absolute;
-                border: 1px solid red;
-                box-sizing: border-box;
-            }
-        </style>
-    </head>
-    <body>
-    <div class="image-wrap">
-        <img id="mobilenet" />
-    </div>
-    <p>原图片</p>
-    <div class="image-wrap">
-        <img id="image" src=""/>
-        <div id="myDiv"></div>
-    </div>
-    <p>画布</p>
-    <canvas id="myCanvas"></canvas>
-    <br/>
-    <input type="file" id="uploadImg"/>
-    <div id="txt"></div>
+<head>
+    <meta charset="utf-8">
+    <title>paddleJS demo</title>
+    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,initial-scale=1,viewport-fit=cover">
+    <style>
+        p {
+            display: block;
+            margin-block-start: 1em;
+            margin-block-end: 1em;
+            margin-inline-start: 0px;
+            margin-inline-end: 0px;
+        }
+        #uploadImg {
+            border: solid 1px gray;
+            width: 100%;
+            padding: 10px;
+            background-color: #cabfbf;
+            color: white;
+            font-size: 16px;
+        }
+        p.section-head {
+            font-variant: small-caps;
+            text-transform: uppercase;
+            letter-spacing: 0.17em;
+            line-height: 1.2em;
+            font-weight: 500;
+            margin-top: 2em;
+            margin-bottom: 1em;
+            border-left: 1px solid #EF6C00;
+            padding-left: 24px;
+            
+            color: #818181;
+        }
+        .image-wrap {
+            position: relative;
+        }
+        #myDiv {
+            position: absolute;
+            border: 1px solid red;
+            box-sizing: border-box;
+        }
+    </style>
+</head>
+<body>
+<div class="pdjs-example-container">
+    <section class="title-area">
+        <h1>Paddle.js: Using a pretrained tinyYolo</h1>
+    </section>
+
+    <section>
+        <p class="section-head">Description</p>
+        <p>
+            Please upload a picture with face.
+        </p>
+    </section>
+
+    <section>
+        <p class="section-head">Model Output</p>
+        <div class="image-wrap">
+            <img id="mobilenet" />
+        </div>
+        <p>原图片</p>
+        <div class="image-wrap">
+            <img id="image" src=""/>
+            <div id="myDiv"></div>
+        </div>
+        <p>画布</p>
+        <canvas id="myCanvas"></canvas>
+        <br/>
+        <input type="file" id="uploadImg"/>
+        <div id="txt"></div>
+
+    </section>
+</div>
+
+
+
 
 
 </body>
-    <script src="index.es6"></script>
+<script src="index.es6"></script>
 </html>
-- 
GitLab

