Mejorar sitio web

Resumen: página web por mejorar : [login to view URL] hosting: [login to view URL] La página web se realizó con la finalidad de presentarse como parte de un proyecto para un curso de la universidad. El proyecto es un equipo de entretenimiento y alimentación para mascotas. Idealmente el objetivo es que el equipo se encuentre en los hogares donde residen las mascotas de tal manera que cuando su dueño se encuentre fuera (trabajo, universidad, gym, etc) pueda acceder desde su celular, laptop o desktop a la página web con el cual podrá utilizar el equipo. La página web tiene 4 partes. Video streaming donde podrá ver a su mascota ( En este caso para la página web se utiliza un API de [login to view URL]) y, además, tendrá dos botones de derecha e izquierda con el que podrá mover la cámara Un botón de play con el que podrá jugar con su mascota Un boton de Alimentar (feed ur pet) con el que provee alimentos a la mascota Un cuadro de Set Hour donde el usuario será capaz de ingresar las horas que comerá la mascota (desayuno, almuerzo, cena) Los botones y el cuadro de set hour solo llenan una base de datos que luego es leído por el equipo electrónico. Sin embargo, lo que busco es mejorar la parte de frontend para que se vea más atractivo el proyecto. Problemas: 1.- El primer problema como se puede ver en la imagen es que los botones de "Feed ur pet" y "Play" no están alineados en firefox. Lo que se busca es que la página se vea igual para distintos navegadores (en este caso los principales son firefox y chrome). Así mismo te comento que por alguna razón el API de [login to view URL] no funciona en chrome debido a los permisos de cámara y micrófono que se tienen que otorgar. 2.- El segundo problema es el cuadro de set hour. Idealmente me gustaría que se aplique alguna herramienta que lo pueda reemplazar, he visto que en javascript se puede poner como reloj o una linea de tiempo que vaya de 0 a 24 horas con una resolución de media hora. Quisiera saber que opciones hay para este cuadro. La idea es que el usuario ingrese una hora en el formato HH:MM a una base de datos ( ejm: 08:10, 14:35, etc). En el peor de los casos quedaría como está ahora pero habría que aumentar el tamaño del cuadro y reducir el tamaño de la letra. 3.- El tercer problema es que los botones de izquierda y derecha deberían ser reemplazado por botones con flechas de derecha e izquierda. ​ En cuanto a la distribución de los objetos me gustaría que quede de la manera en que está actualmente. El video streaming en la izquierda, botones de flechas debajo del video streaming y los botones + cuadro en la parte derecha. Además me gustaría que por default la página web este centrada, es decir, que el tamaño sea el adecuado de acuerdo a la pantalla que se utilice (Creo que le llaman Responsive Web Design) 4.- (Opcional) No se si sea posible o si requiera mayor trabajo pero lo ideal sería que en un celular se vea de la siguiente manera: (VER IMAGENES ADJUNTAS) En la posición vertical, el video streaming iría en la parte de arriba y en vez del chat deberían estar los botones y luego cuando se gire el celular se pueda ver como en la posición horizontal. 5.- Por último, falta poner 2 cuadros de advertencia o alertas. La página web debería advertir al usuario cuando no hay pelota ni comida. Esto podría ser un pequeño cuadro de texto que siempre aparezca y muestre el estado de si hay comida y/o pelota. La otra opción es que solo aparezca la alerta cuando el usuario presiona el botón de dar comida y/o jugar. Quisiera saber cuál es más viable y estoy abierto a cualquiera otra sugerencia en este aspecto.