Hugging Face's logo

Spaces:
carlfeynman
/
mnist
Runtime error

App Files Community
carlfeynman commited on
Commit
f4b10b3
•
1 Parent(s): 0faaab6

html updated

Browse files
Files changed (1) hide show
  1. index.html +28 -11
index.html CHANGED
@@ -1,17 +1,27 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Whiteboard</title>
7
  <style>
 
 
 
 
8
  #whiteboard {
9
- border: 3px solid black;
10
- border-radius: 6px;
11
- background-color: #FFFFFF;
 
 
 
 
12
  }
 
13
  #capture-button {
14
- background-color: #3F52D9;
15
  color: white;
16
  border: none;
17
  padding: 10px 20px;
@@ -22,8 +32,9 @@
22
  width: 190px;
23
  margin-right: 20px;
24
  }
 
25
  #clear-button {
26
- background-color: #FF0000;
27
  color: black;
28
  border: none;
29
  padding: 10px 20px;
@@ -33,12 +44,14 @@
33
  margin-top: 10px;
34
  width: 190px;
35
  }
 
36
  #container {
37
  display: flex;
38
  flex-direction: column;
39
  align-items: center;
40
  justify-content: center;
41
  }
 
42
  #btn-container {
43
  display: flex;
44
  flex-direction: row;
@@ -46,7 +59,9 @@
46
  }
47
  </style>
48
  </head>
 
49
  <body>
 
50
  <div id='container'>
51
  <canvas id="whiteboard" width="400" height="200"></canvas>
52
  <div id='btn-container'>
@@ -58,28 +73,29 @@
58
  var canvas = document.getElementById('whiteboard');
59
  var context = canvas.getContext('2d');
60
  var drawing = false;
61
-
 
62
  canvas.addEventListener('mousedown', function (e) {
63
  drawing = true;
64
  context.beginPath();
65
  context.moveTo(e.clientX - canvas.getBoundingClientRect().left, e.clientY - canvas.getBoundingClientRect().top);
66
  });
67
-
68
  canvas.addEventListener('mousemove', function (e) {
69
  if (drawing) {
70
  context.lineTo(e.clientX - canvas.getBoundingClientRect().left, e.clientY - canvas.getBoundingClientRect().top);
71
  context.stroke();
72
  }
73
  });
74
-
75
  canvas.addEventListener('mouseup', function () {
76
  drawing = false;
77
  });
78
-
79
  canvas.addEventListener('mouseout', function () {
80
  drawing = false;
81
  });
82
-
83
  var clearButton = document.getElementById('clear-button');
84
  clearButton.addEventListener('click', function () {
85
  context.clearRect(0, 0, canvas.width, canvas.height);
@@ -95,4 +111,5 @@
95
  });
96
  </script>
97
  </body>
98
- </html>
 
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
+
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
  <title>Whiteboard</title>
8
  <style>
9
+ body {
10
+ font-family: 'Montserrat', sans-serif;
11
+ }
12
+
13
  #whiteboard {
14
+ border: 3px solid #088395;
15
+ /* Simple black border */
16
+ border-radius: 10px;
17
+ /* Rounded corners */
18
+ box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
19
+ /* Subtle shadow effect */
20
+ background-color: #088395;
21
  }
22
+
23
  #capture-button {
24
+ background-color: #071952;
25
  color: white;
26
  border: none;
27
  padding: 10px 20px;
 
32
  width: 190px;
33
  margin-right: 20px;
34
  }
35
+
36
  #clear-button {
37
+ background-color: #F2F7A1;
38
  color: black;
39
  border: none;
40
  padding: 10px 20px;
 
44
  margin-top: 10px;
45
  width: 190px;
46
  }
47
+
48
  #container {
49
  display: flex;
50
  flex-direction: column;
51
  align-items: center;
52
  justify-content: center;
53
  }
54
+
55
  #btn-container {
56
  display: flex;
57
  flex-direction: row;
 
59
  }
60
  </style>
61
  </head>
62
+
63
  <body>
64
+ <h3 style="text-align:center;">Draw and Predict Handwritten Digits</h3>
65
  <div id='container'>
66
  <canvas id="whiteboard" width="400" height="200"></canvas>
67
  <div id='btn-container'>
 
73
  var canvas = document.getElementById('whiteboard');
74
  var context = canvas.getContext('2d');
75
  var drawing = false;
76
+ context.strokeStyle = 'white';
77
+
78
  canvas.addEventListener('mousedown', function (e) {
79
  drawing = true;
80
  context.beginPath();
81
  context.moveTo(e.clientX - canvas.getBoundingClientRect().left, e.clientY - canvas.getBoundingClientRect().top);
82
  });
83
+
84
  canvas.addEventListener('mousemove', function (e) {
85
  if (drawing) {
86
  context.lineTo(e.clientX - canvas.getBoundingClientRect().left, e.clientY - canvas.getBoundingClientRect().top);
87
  context.stroke();
88
  }
89
  });
90
+
91
  canvas.addEventListener('mouseup', function () {
92
  drawing = false;
93
  });
94
+
95
  canvas.addEventListener('mouseout', function () {
96
  drawing = false;
97
  });
98
+
99
  var clearButton = document.getElementById('clear-button');
100
  clearButton.addEventListener('click', function () {
101
  context.clearRect(0, 0, canvas.width, canvas.height);
 
111
  });
112
  </script>
113
  </body>
114
+
115
+ </html>