-
Draw Digit and Predict
-
-
-
-
Prediction: None
-
+
+
Draw Digit and Predict
+
+
Prediction: None
+
+
+
+
+
diff --git a/static/mnist/styles.css b/static/mnist/styles.css
index 3fb7ba9..6fde990 100644
--- a/static/mnist/styles.css
+++ b/static/mnist/styles.css
@@ -9,26 +9,39 @@ body {
overflow-x: hidden;
}
-.container {
+.containerMNIST {
font-family: 'montserratsemibold', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
- width: 100%;
- margin: 0 auto;
+ width: 90%;
+ padding: 1rem;
+ min-width: fit-content;
+ max-width: 70rem;
+ background: rgba(100, 100, 100, 0.5);
+ backdrop-filter: blur(0.3125rem);
+ border-radius: 1.25rem;
+ overflow: hidden;
+ opacity: 1;
+ box-shadow: 0.625rem 1.25rem 1.125rem -0.5rem rgba(0, 0, 0, 0.5);
+ transition: opacity 0.3s, transform 0.3s, background-color 1s;
}
-h1 {
+.headingMNIST {
font-family: 'montserratsemibold', sans-serif;
+ display: flex;
font-size: clamp(1rem, 2.5rem, 3rem);
- color: white;
- letter-spacing: 0.1875rem;
font-weight: 1000;
- line-height: 1.2;
+ letter-spacing: 0.1875rem;
+ background: radial-gradient(circle, rgba(255, 255, 255, 1.0), rgba(200, 200, 200, 1.0), rgba(255, 255, 255, 1.0)), rgba(200, 200, 200, 1.0);
+ background-size: 600% 200%;
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ animation: gradientAnimation 30s infinite;
}
-canvas {
+.canvasMNIST {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
backdrop-filter: blur(0.3125rem);
@@ -45,11 +58,17 @@ canvas {
box-shadow: 0.625rem 1.25rem 1.125rem -0.5rem rgba(0, 0, 0, 0.5);
}
-canvas:hover {
+.canvasMNIST:hover {
transform: scale(1.2);
}
-button {
+.buttonContainerMNIST {
+ display: flex;
+ gap: 1rem;
+ margin-top: 1rem;
+}
+
+.buttonMNIST {
font-family: 'montserratsemibold', sans-serif;
margin-top: 1rem;
width: 10rem;
@@ -67,16 +86,15 @@ button {
box-shadow: 0.3125rem 0.3125rem 0.3125rem -0.125rem rgba(0, 0, 0, 0.5);
}
-button:hover {
+.buttonMNIST:hover {
background: rgba(255, 255, 255, 0.8);
color: rgba(0, 0, 0, 1.0);
transform: scale(1.05);
}
-predict {
+.predictMNIST {
margin-top: 1.5rem;
- margin-bottom: 1.5rem;
- font-size: clamp(1rem, 1.3rem, 1.5rem);
+ font-size: clamp(1.2rem, 1.5rem, 1.8rem);
font-weight: 600;
color: #cccccc;
letter-spacing: 0.125rem;
@@ -84,14 +102,14 @@ predict {
max-width: 600px;
}
-span#predictionOutput {
+.spanMNIST#predictionOutput {
font-family: 'montserratsemibold', sans-serif;
- font-size: clamp(1rem, 1.3rem, 1.5rem);
+ font-size: clamp(1.5rem, 1.8rem, 2rem);
font-weight: 600;
color: white;
}
-canvas#drawCanvas {
+.canvasMNIST#drawCanvas {
background-color: #ffffff;
width: 20rem;
height: auto;
@@ -101,8 +119,8 @@ canvas#drawCanvas {
aspect-ratio: 1;
}
-canvas#distributionChart {
- background: rgba(100, 100, 100, 0.5);
+.canvasMNIST#distributionChart {
+ background: rgba(50, 50, 50, 0.5);
width: 50rem;
max-width: 90vw;
max-height: 45vw;
@@ -110,3 +128,7 @@ canvas#distributionChart {
border-radius: 0.625rem;
transform: scale(1);
}
+
+.canvasMNIST#distributionChart:hover {
+ background: rgba(100, 100, 100, 0.5);
+}