Here is a pic of my project

Basically what i am trying to achive here is as follows (I am very new to programming)

I have done the front end, now its the back end that is troubling me......

first of all... i have css that is creating a progress bar, this is fine but i am not sure how to code it so that it resets after 8 hours continuesly...
i tryed to add an updatepanel to stop it from resetting after a postback, but i could not solve it,..

Second problem is... I have a large number in the middle of the screen, what i need it to do is.... increment by one when an operation is executes (i.e on a packing station, when it has been scanned in to complete) this number should increment by one! .....

I am ok with the database set up and where to pull the data from... i am just having trouble in coding it too allow me to increment by one once a operation has been executed... (i dont want a button adding.... and both of the two functions need to have partial updates ...

here is my html so far ...

(I know it is messy, i am learning)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="testlayout.aspx.cs" Inherits="testlayout" %> <!DOCTYPE html> <html xmlns=""> <script runat="server" type="text/c#"></script> <head runat="server"> <title></title> <link href="Styles/Split2.css" rel="stylesheet" /> <link href="Styles/ProgressBar.css" rel="stylesheet" /> <style type="text/css">
    .center {
    .labelstyle {
   text-align: center;
</style> </head> <body> <form runat="server"> <div class="split left"> <div class="left"> <h1  style="color:red; text-align:center; position:static;  padding:60px; width:100%; font-weight:bold">QUANTITY BUILT</> <div class="left"> <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> <asp:UpdatePanel runat="server"> <ContentTemplate> <asp:Label ID="label" runat="server" Text="0" Height="50px" Width="100%" Font-Size="400px" style="text-align:center; position:static; "></asp:Label>  </ContentTemplate> </asp:UpdatePanel> </div> <ContentTemplate> <div class="body-container;"> <h1 class="loading"><span class="bullet">.</span><span class="bullet">.</span><span class="bullet">.</span> Shift Count = 8 Hours <span class="bullet">.</span><span class="bullet">.</span><span class="bullet">.</span></h1> <div class="progress-container"> <div class="progress-value"></div> </div> </div> </div> </form> </body> </html> <div class="split right"> <div class="right"> </body> <h2><div class="Table right"> <div class="centered"></div> <title>Table</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link  rel="stylesheet" href=""> <link href="Styles/fontColours.css" rel="stylesheet"
    <style type="text/css"
<body> <h1 style="color:red; text-align:center; font-weight:bold;"> G120 TARGET BUILD</h1> <div class="w3-container"> <div class="center"> <style>
          padding: 50px 10px 15px;
      .newStyle1 {
          font-size: 86px;
          color: #FF0000;
  </style> <table class="w3-table w3-bordered"> <tr> <th>HOUR</th> <th>FSAA</th> <th>FSA</th> <th>FSB</th> <th>FSC</th> </tr> <tr> <td>HR1</td> <td>29</td> <td>29</td> <td>24</td> <td>25</td> </tr> <tr> <p><td>HR2</td></P> <td>58</td> <td>58</td> <td>52</td> <td>50</td> </tr> <tr> <td>HR3</td> <td>87</td> <td>87</td> <td>81</td> <td>75</td> </tr> <tr> <td>HR4</td> <td>116</td> <td>116</td> <td>110</td> <td>100</td> </tr> <tr> <td>HR5</td> <td>145</td> <td>145</td> <td>139</td> <td>125</td> </tr> <tr> <td>HR6</td> <td>174</td> <td>174</td> <td>168</td> <td>150</td> </tr> <tr> <td>HR7</td> <td>203</td> <td>203</td> <td>197</td> <td>175</td> </tr> <tr> <td>HR8</td> <td>232</td> <td>232</td> <td>200</td> <td>190</td> </tr> </table> </div> <img src="pic/siemenscong.png" style="text-align:right; padding-left:60px; padding-top:90px"  /> </body> </html>

Code Behind -

using System;

public partial class testlayout : System.Web.UI.Page
private static int i = 0;
protected void Page_Load(object sender, EventArgs e)


protected void Button1_Click(object sender, EventArgs e)

    label.Text = i.ToString();

I plan on using enitity framework to link calls to grab the data from the database...

any help would be much appreciated for the functions...

So you want a number in the web page to increment when a backend operation takes place? To do this 'on the fly' would require you to implement server-sent events or write something custom with websockets, which might be a little advanced for you at the moment.

I'd suggest creating a new endpoint in your backend that returns the correct number that you can poll for. So your web page, every few seconds, would ask the backend for the new number and display it. The response should look something like this {"operation_count": 34}.

Then you have two independent bits of functionality that you can test in isolation.

With regards to your progress bar, just use the standard element.

Click Here I have got the number to increase with a button and using an update panel it doesnt create a page that flickers (not what i wanted lol) but yes everytime a backend operation takes place, i need to increase the number by one and then after 8 hours, reset to zero just like the progress bar below (which is written in ccs, no java)

Sorry about the questions but i dont know where to start with the code behind ... any help would be much appreciated. :)

P.S i am using c#

I will pay if someone can help, I am only a student so obviously I don't have much money, but who ever helps the most I will contact you and send you over a payment