Scribd
Upload
29 views2 pages

Diagnostic Page

This document contains the code for a diagnostics results page. It includes styling for headings, sections, and buttons. The result section conditionally displays if a fault was detected or not and includes an FFT plot image. Buttons allow viewing detailed results or running another diagnostic.

Uploaded by

AMouri OMar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
29 views2 pages

Diagnostic Page

This document contains the code for a diagnostics results page. It includes styling for headings, sections, and buttons. The result section conditionally displays if a fault was detected or not and includes an FFT plot image. Buttons allow viewing detailed results or running another diagnostic.

Uploaded by

AMouri OMar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

DOCTYPE html>
<html>
<head>
<title>Diagnostics Results</title>
<style>
/* Add custom CSS styles for the diagnostics results page */

/* Define the font family for the entire page */


body {
font-family: Arial, sans-serif;
}

/* Styling for the heading */


h1 {
color: #333; /* Text color */
text-align: center; /* Center-align the heading */
}

/* Styling for result section */


.result {
text-align: center; /* Center-align the result section */
margin-bottom: 20px; /* Add margin at the bottom for spacing */
}

/* Styling for the result heading */


.result h1 {
color: #dc3545; /* Red text color for fault detected */
}

/* Styling for the button container */


.button-container {
text-align: center; /* Center-align the button container */
margin-top: 20px; /* Add top margin for spacing */
}

/* Styling for the button */


.button {
display: inline-block; /* Display the button as an inline block */
padding: 10px 20px; /* Define padding for the button */
background-color: #007bff; /* Background color of the button */
color: #fff; /* Text color of the button */
text-decoration: none; /* Remove underlining of the text */
border-radius: 5px; /* Add rounded corners to the button */
}

/* Hover effect for the button */


.button:hover {
background-color: #0056b3; /* Change background color on hover */
}
</style>
</head>
<body>
<!-- Result Section -->
<div class="result">
<!-- Check if a fault is detected and display the appropriate message -->
{% if fault_detected %}
<h1>Fault Detected!</h1>
{% else %}
<h1>No Fault Detected</h1>
{% endif %}
<!-- Display the FFT plot image -->
<img src="{{ url_for('static', filename='fft_plot.png') }}" alt="FFT Plot">
</div>

<!-- Button Container for Viewing Detailed Results -->


<div class="button-container">
<!-- Link to view detailed results with a parameter for fault detection
status -->
<a href="/result?fault_detected={{ fault_detected }}" class="button">View
Detailed Results</a>
</div>

<!-- Button Container for Running Another Diagnostic -->


<div class="button-container">
<!-- Link to initiate another diagnostic -->
<a href="/diagnostics" class="button">Run Another Diagnostic</a>
</div>
</body>
</html>

You might also like