Mandatory stuff done

hw1/claudio_maggioni/3d_print_service.html

@@ -34,20 +34,32 @@
           <fieldset>
             <legend>Customer details</legend>
             <label for="username">Username</label>
-            <input type="text" name="username" maxlength="100" placeholder="Username">
+            <input type="text" name="username" maxlength="100" placeholder="Username" required>
             <label for="email">Email</label>
-            <input type="email" name="email" maxlength="100" placeholder="Email">
+            <input type="email" name="email" maxlength="100" placeholder="Email" required>
             <label for="address">Address</label>
-            <textarea name="address" maxlength="500" placeholder="Address"></textarea>
+            <textarea name="address" maxlength="500" placeholder="Address" required></textarea>
           </fieldset>
           <fieldset>
             <legend>Work order</legend>
-            <label for="file">File to print</label>
-            <input type="file" name="file">
+            <label for="file">File to print (OBJ)</label>
+            <input type="file" name="file" accept=".obj" required>
             <label for="urgent">Urgency</label>
             <input type="checkbox" name="urgency">
             <label for="copies"># of copies</label>
-            <input type="range" name="copies" min="1" max="10" step="1">
+            <div class="range-10">
+              <div>1</div>
+              <div>2</div>
+              <div>3</div>
+              <div>4</div>
+              <div>5</div>
+              <div>6</div>
+              <div>7</div>
+              <div>8</div>
+              <div>9</div>
+              <div>10</div>
+              <input type="range" name="copies" min="1" max="10" step="1" list="tickmarks">
+            </div>
           </fieldset>
           <button type="submit">Send the order</button>
         </form>

hw1/claudio_maggioni/css/form.css

@@ -1,21 +1,90 @@
 /* vim: set ts=2 sw=2 tw=80 et: */
 
 input, textarea {
-  width: 20rem;
-  display: block;
-  padding: .1rem;
-  margin: .25rem 0;
+  border: 1px solid #ccc;
+}
+
+input::placeholder, textarea::placeholder {
+  color: #ccc;
 }
 
 fieldset {
+  display: grid;
+  grid-template-columns: 7em 1fr;
+  grid-gap: 1rem;
   border: none;
   margin: .5rem 0;
+  background: #eee;
+  border-radius: .5rem;
 }
 
-label {
-  font-size: .7rem;
+@media screen and (max-width: 768px) {
+  fieldset {
+    grid-template-columns: 1fr;
+    grid-gap: .5rem;
+  }
 }
 
-textarea[name="address"] {
+fieldset legend {
+  position: relative;
+  top: 10%;
+  background: #333;
+  color: white;
+  padding: .25rem .5rem;
+  border-radius: .25rem;
+}
+
+fieldset label {
+  font-weight: bold;
+  font-size: .9rem;
+}
+
+fieldset label::after {
+  content: ":";
+}
+
+fieldset input, fieldset textarea {
+  padding: .5rem;
+  font-family: 'Fira Sans', sans-serif;
+  font-size: .85rem;
+  border-radius: .5rem;
+  background: white;
+}
+
+fieldset textarea[name="address"] {
   height: 4em;
 }
+
+fieldset input[type="checkbox"] {
+  margin-left: 0;
+  padding-left: 0;
+  max-width: 1em;
+}
+
+form button {
+  color: #333;
+  background: #ccc;
+  font-size: 1em;
+  padding: .5rem 1rem;
+  border-radius: .5rem;
+  outline: none;
+  border: 0 none;
+}
+
+.range-10 {
+  display: grid;
+  justify-items: center;
+  grid-template-columns: repeat(20, 1fr);
+}
+
+.range-10 div {
+  grid-column: span 2;
+  font-size: .9rem;
+}
+
+.range-10 input[type="range"] {
+  grid-column: 2 / 20;
+  justify-self: stretch;
+  margin: 0 -10px;
+}
+