I need a dashboard for an event. There would be a stage and some dance events happening on it.
It would be a simple website with 2 pages.
1) The dashboard would show current dance details, next dance details, and a scrolling text below showing notices.
2) There would be a mobile optimized website for inputting event details.
The pictures are attached.
1) On mobile screen when the top right on/off button is clicked. The Main page will toggle between full screen Notice and All details.
2) Text entered in "Text box 1" will show in the << current event >> section of the main screen
3) Text entered in "Text box 2" will show in the << 1st in Queue event details >> section of main screen
4) Text entered in "Text box 3" will show in the << 2nd in Queue event details >> .. .and so on
5) The Last box text will get displayed in scrolling fashion in the notice section of main screen
Addition of Messages in Mobile Screen:
1) Initially, the mobile screen will have only one text box, and the notice Text box
2) When text is entered in the "Text Box 1", a Blank " Text box 2" gets created below "Text box 1" , but above "Notice Text box"
3) When text is entered in "Text box 2", a Blank " Text box 3" gets created below "Text box 2" , but above "Notice Text box"
4) The Notice Text box will always be at the bottom of the list
Ordering of Messages in Mobile Screen:
1) when "Text box 2" is selected, and the "up" button is clicked, the Text contained in "Text box 2" is exchanged with text in above textbox "Text Box 1" , and now "Text Box 1" should be the selected text box.
The main display should get accordingly updated immediately or maybe in 5-10 seconds. The whole page shouldn't get refreshed. Only text should get changed using Ajax or such dynamic technologies.
2) Same exchange of text with the text above should happen when any of the text box 3,4,5... are selected and "Up" button is pressed.
3) Text should get exchanged with the below text box if the "Down" button is pressed
4) If a text box is selected and "Trash" button is pressed. Text in that box should get replaced by the text in the below box. The below box should get replaced by text in the following box and so on until the last box. Then, there will be 2 empty boxes at the end. The last empty box can be deleted.
5) When "text box 1" is selected, "Up" button should be disabled
6) when the last "Text box" (Not Notice text box) is selected, "Down" button should be disabled
7) when "Notice text box" is selected. Both up and down should be disabled
8) When "Trash" button is pressed when "Notice text box" is active. It should become blank.
Both the webpages should auto size to the full screen and re-size automatically.
The main screen should get updated as soon as possible when data is changed on the mobile interface. The whole page shouldnt refresh, rather only the text should change.
1) The backend should be written in Node.js and use a persistent DB preferably mysql
2) The webserver will be xampp, and will be hosted on a Raspberry Pi
3) The main screen will displayed on Chrome and will be connected to a Big screen TV via HDMI
4) The mobile screen webpage will be accessed from Chrome on a mobile device.
I will take care of the Raspberry Pi installation. You can give me the source that I can run on XAMPP on windows.