공태현 / healthcare-with-webcam

Go to a project
Toggle navigation Toggle navigation pinning
정지호
1ee39185 1 parent cb6c3958

Update title design

Inline Side-by-side
Showing 14 changed files with 56 additions and 7 deletions
1 -h1 {
2 - font-family: 'Lobster';
3 -}
...@@ -7,9 +7,9 @@ ...@@ -7,9 +7,9 @@
7 <link rel="stylesheet" href="style.css"> 7 <link rel="stylesheet" href="style.css">
8 <title>Squat Page</title> 8 <title>Squat Page</title>
9 </head> 9 </head>
10 - <body> 10 + <body bgcolor= "#353535">
11 - <h1><div>Teachable Machine Pose Model - Squat</div></h1> 11 + <div class="Title">Squat Page</div>
12 - <button type="button" onclick="init()">Start</button> 12 + <center><button class="w-btn w-btn-indigo" type="button" onclick="init()">START</button></center>
13 <div><canvas id="canvas"></canvas></div> 13 <div><canvas id="canvas"></canvas></div>
14 <div id="label-container"></div> 14 <div id="label-container"></div>
15 <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script> 15 <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script>
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
31 model = await tmPose.load(modelURL, metadataURL); 31 model = await tmPose.load(modelURL, metadataURL);
32 maxPredictions = model.getTotalClasses(); 32 maxPredictions = model.getTotalClasses();
33 // Convenience function to setup a webcam 33 // Convenience function to setup a webcam
34 - const size = 600; 34 + const size = 500;
35 const flip = true; // whether to flip the webcam 35 const flip = true; // whether to flip the webcam
36 webcam = new tmPose.Webcam(size, size, flip); // width, height, flip 36 webcam = new tmPose.Webcam(size, size, flip); // width, height, flip
37 await webcam.setup(); // request access to the webcam 37 await webcam.setup(); // request access to the webcam
......
1 +@import url("https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap");
2 +
3 +button {
4 + margin: 10px;
5 +}
6 +
7 +.w-btn {
8 + position: relative;
9 + border: none;
10 + display: inline-block;
11 + padding: 15px 30px;
12 + border-radius: 15px;
13 + font-family: "paybooc-Light", sans-serif;
14 + box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
15 + text-decoration: none;
16 + font-weight: 600;
17 + transition: 0.25s;
18 +}
19 +
20 +.w-btn-outline {
21 + position: relative;
22 + padding: 15px 30px;
23 + border-radius: 15px;
24 + font-family: "paybooc-Light", sans-serif;
25 + box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
26 + text-decoration: none;
27 + font-weight: 600;
28 + transition: 0.25s;
29 +}
30 +
31 +.w-btn-indigo {
32 + background-color: aliceblue;
33 + color: #2e2f30;
34 +}
35 +
36 +.w-btn-indigo-outline {
37 + border: 3px solid aliceblue;
38 + color: #2e2f30;
39 +}
40 +
41 +.w-btn-indigo-outline:hover {
42 + color: #2e2f30;
43 + background: aliceblue;
44 +}
45 +
46 +.Title {
47 + font-size : 60px;
48 + font-family: fantasy;
49 + color : aliceblue;
50 + margin: 20px;
51 + text-align: center;
52 +}