Skip to content

worked on scroll bar ,reduced height of header #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
deb-cod merged 2 commits into from
Mar 3, 2025
Merged

worked on scroll bar ,reduced height of header #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9d72826
worked on scroll bar ,reduced height of header
kollucharan Feb 28, 2025
d6c9a3d
formatting the files
kollucharan Mar 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
102 changes: 70 additions & 32 deletions docker/standalone.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ function I(i) { return document.getElementById(i); }
<li> Close apps that you don't need, as they can slow down your connection.</li>
<li> Make sure no one else is using the internet while you're testing. Things like watching/ video streaming will slow down the connection.</li>
</ul>`;
let tempObserver;

function mbpsToAmount(s) {
return 1 - 1 / Math.pow(1.3, Math.sqrt(s));
Expand Down Expand Up @@ -187,6 +188,8 @@ function updateJitterColor(value) {
//UI CODE
var uiData = null;



function startStop() {
flag = false;
flag2 = false;
Expand Down Expand Up @@ -237,6 +240,7 @@ function startStop() {
I("resultsURL").value = shareURL;
I("testId").innerHTML = testId;
I("shareArea").style.display = "";

}
} catch (e) { }
}
Expand Down Expand Up @@ -301,14 +305,10 @@ function initUI() {
I("pingText").textContent = "";
I("jitText").textContent = "";
}

function ToShowStatus() {


I("statusMessage").classList.remove("Loader");

message = "";

observeResults();
if (uiData?.dlStatus < 1 && uiData?.ulStatus < 1) {
message =
"Upload and download speeds are below the recommended threshold";
Expand All @@ -317,7 +317,7 @@ function ToShowStatus() {
message = "Your Download Speed is less than recommended threshold";
flag2 = true;
} else if (uiData?.ulStatus < 1) {
message = " Your Upload Speed is less than recommended threshold";
message = "Your Upload Speed is less than recommended threshold";
flag2 = true;
}

Expand Down Expand Up @@ -377,49 +377,73 @@ function ToShowStatus() {
if (flag) I("statusMessage").classList.add("success");

if (!flag) I("statusMessage").classList.add("alert-danger");
}

}
function clearmessage() {


I("statusMessage").innerHTML = "";
I("statusMessage").classList.remove("alert-danger");
}

function observeResults() {
const Section = document.getElementById("startStopBtn");
if (!Section) return;

let bodyElement = document.body;
tempObserver = new ResizeObserver(() => {

Section.scrollIntoView({ behavior: "smooth" });

tempObserver.disconnect();
tempObserver = null;
});
tempObserver.observe(bodyElement);

}



</script>

<style type="text/css">
html,
body {
height: 100%;
margin: 0;
}

body {
overflow-y: auto;
display: flex;
/* scroll-behavior: smooth; */
flex-direction: column;
}

.header {
width: 100%;
height: 64px;
height: 42px;
border: 1px solid;
border-color: white;
background-color: white;
padding: 15px 40px;

padding-top: 2px;
padding-bottom: 2px;
padding-left: 40px;
padding-right: 40px;
position: relative;

}


* {
box-sizing: border-box;
}

.success {
color: green;
font-family: Roboto;
width: 90%;
text-align: center;
}

.Loader {
color: #1d4ed8;
font-family: Roboto;
}

.logo-container {
Expand All @@ -438,15 +462,12 @@ function clearmessage() {
background-color: #f9fafb;
padding-left: 104px;
padding-right: 104px;
padding-top: 16px;
padding-bottom: 2.5%;
padding-top: 14px;
flex: 1;
overflow: auto;
display: flex;
flex-direction: column;
flex-wrap: wrap;
-ms-overflow-style: none;
scrollbar-width: none;
overflow: visible;
}

.child-container {
Expand All @@ -456,12 +477,10 @@ function clearmessage() {
display: flex;
flex-direction: column;
align-items: center;
scrollbar-width: none;
width: 100%;
border-radius: 8px;
padding-top: 44px;
padding-top: 16px;
padding-bottom: 10px;
overflow: auto;
}

div.testGroup {
Expand Down Expand Up @@ -542,21 +561,21 @@ function clearmessage() {
.test {
display: flex;
flex-direction: column;
gap: 20px;
gap: 5px;
align-items: center;
padding: 43px 20px 0 20px;
padding: 11px 20px 0 20px;
width: 100%;
}


div.testArea {
display: flex;
width: 100%;
max-width: 250px;
padding: 24px 33px 24px 24px;
padding: 14px 33px 14px 24px;
flex-direction: column;
align-items: flex-start;
gap: 12px;

border-radius: 16px;
border: 1px solid var(--Monochrome-Grey-7, #d1d5db);
background: var(--Monochrome-White, #fff);
Expand All @@ -566,7 +585,7 @@ function clearmessage() {
display: flex;
width: 100%;
max-width: 250px;
padding: 24px 33px 24px 24px;
padding: 14px 33px 14px 24px;
flex-direction: column;
align-items: flex-start;
gap: 12px;
Expand Down Expand Up @@ -657,7 +676,7 @@ function clearmessage() {
align-items: center;
text-align: center;
margin-bottom: 20px;
/* Add spacing below the container */

}

.recommended {
Expand All @@ -668,22 +687,32 @@ function clearmessage() {
text-align: left;
}

.instructions {
font-family: Roboto;
}

.one-line {
display: flex;
gap: 5px;
align-items: baseline;
}

.alert-danger {
max-width: 100%;
max-width: 85%;
padding: 10px;
border-radius: 5px;
background-color: #f8d7da;
color: #721c24;
text-align: center;
font-family: Roboto;
}


@media (max-width: 768px) {
body {
overflow-y: auto;
}

.testGroup {
flex-direction: row;
gap: 12px;
Expand All @@ -693,6 +722,10 @@ function clearmessage() {
@media (max-width: 750px) {

.container .testArea,
body {
overflow-y: auto;
}

.container .testArea2 {
padding: 12px;
border-radius: 8px;
Expand All @@ -704,11 +737,15 @@ function clearmessage() {
}

.container {
padding: 10px;
padding: 10px 10px 10px 10px;
}
}

@media (max-height: 620px) {
body {
overflow-y: auto;
}

.child-container {
height: auto;
}
Expand Down Expand Up @@ -798,7 +835,7 @@ function clearmessage() {
</div>

<div id="statusMessage"></div>
<div id="slow-speed-error-instruction"></div>
<div id="slow-speed-error-instruction" class="instructions"></div>
<!-- <div id="shareArea"> -->
<div id="shareArea" style="display: none">
<h3>Share results</h3>
Expand Down Expand Up @@ -871,6 +908,7 @@ function clearmessage() {
setTimeout(function () {
initUI();
}, 100);

</script>
</body>

Expand Down
Loading