Skip to content

Commit

Permalink
Update index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@kai9987kai
kai9987kai authored Jan 6, 2024
1 parent 8602f65 commit 23a91c3
Showing 1 changed file with 97 additions and 38 deletions.
135 changes: 97 additions & 38 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2870,7 +2870,7 @@ <h2 class="col-xs-12 col-md text-box" style="text-align: center; font-size: 16px
<!-- Specify details about the contribution -->
<input type="hidden" name="no_recurring" value="1">
<input type="hidden" name="item_name" value="Support the website">
<input type="hidden" name="item_number" value="Support me to keet the site going">
<input type="hidden" name="item_number" value="Support me to keep the site going...">
<input type="hidden" name="currency_code" value="GDP">
<!-- Display the payment button. -->
<input type="image" name="submit" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" alt="Donate">
Expand All @@ -2889,6 +2889,16 @@ <h2 class="col-xs-12 col-md text-box" style="text-align: center; font-size: 16px
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hardware Information with Real-time Graph</title>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<style>
/* Modern font styles */
body.numberone {
Expand Down Expand Up @@ -2919,10 +2929,12 @@ <h2 class="col-xs-12 col-md text-box" style="text-align: center; font-size: 16px
left: 0;
width: 100%;
background-color: #000000;
color: white;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
z-index: 9998;
padding: 20px;
}

/* Styles for the close button */
Expand All @@ -2939,69 +2951,84 @@ <h2 class="col-xs-12 col-md text-box" style="text-align: center; font-size: 16px
z-index: 9999;
}

/* Unicode icon for the toggle button */
.popup-toggle-button.numberone::after {
content: "🖥"; /* Unicode gear icon */
margin-left: 5px;
/* Graph container */
#graph {
width: 100%;
height: 250px;
margin-top: 20px;
}

/* Container for hardware details and resource usage */
.hardware-info {
display: flex;
justify-content: space-between;
}

/* Individual sections for hardware details and resource usage */
.hardware-details, .resource-usage {
flex: 1;
}

/* Optional: Add more styles for your pop-up content */
</style>
</head>
<body class="numberone">
<!-- Toggle button to open/close the pop-up -->
<button class="popup-toggle-button numberone" onclick="toggleCustomPopup()"> Hardware Info</button>
<button class="popup-toggle-button numberone" onclick="toggleCustomPopup()"> TaskManager 🖥️</button>

<!-- Pop-up container -->
<div class="popup-container numberone" id="customPopup">
<button class="popup-close-button numberone" onclick="closeCustomPopup()">Close</button>
<!-- Actual hardware information fetched and displayed here -->
<h1>Hardware Information</h1>
<h2>CPU Information</h2>
<p id="customPopup-cpu-details">Loading...</p>

<h2>GPU Information</h2>
<p id="customPopup-gpu-details">Loading...</p>
<h1>TaskManager 🖥️</h1>

<div class="hardware-info">
<div class="hardware-details">
<h2>CPU Information</h2>
<p id="customPopup-cpu-details">Loading...</p>

<h2>RAM Information</h2>
<p id="customPopup-ram-details">Loading...</p>
<h2>GPU Information</h2>
<p id="customPopup-gpu-details">Loading...</p>

<h2>Screen Information</h2>
<p id="customPopup-screen-details">Loading...</p>
<h2>RAM Information</h2>
<p id="customPopup-ram-details">Loading...</p>

<h2>Resource Usage</h2>
<p id="customPopup-cpu-usage">Loading...</p>
<p id="customPopup-memory-usage">Loading...</p>
<!-- Add more hardware information here as needed -->
<h2>Screen Information</h2>
<p id="customPopup-screen-details">Loading...</p>
</div>

<div class="resource-usage">
<h2>Resource Usage</h2>
<p id="customPopup-cpu-usage">CPU Usage: Loading...</p>
<p id="customPopup-memory-usage">Memory Usage: Loading...</p>
</div>
</div>

<div id="graph"></div>
</div>

<script>
let customPopupOpen = false;
const customPopup = document.getElementById("customPopup");
let updateInterval;

function toggleCustomPopup() {
customPopupOpen = !customPopupOpen;
customPopup.style.display = customPopupOpen ? "block" : "none";

if (customPopupOpen) {
closeCustomPopup();
fetchCustomHardwareInformation();
initGraph();
updateInterval = setInterval(updateHardwareUsage, 1000); // Update every second
} else {
openCustomPopup();
clearInterval(updateInterval);
}
}

function openCustomPopup() {
customPopup.style.display = "block";
customPopupOpen = true;

// Fetch and display actual hardware information here
fetchCustomHardwareInformation();
}

function closeCustomPopup() {
customPopup.style.display = "none";
customPopupOpen = false;
clearInterval(updateInterval);
}

function fetchCustomHardwareInformation() {
// Fetch actual hardware information using JavaScript
const cpuInfo = navigator.hardwareConcurrency || "Information not available";
const gpuInfo = "GPU: " + (navigator.gpu ? navigator.gpu.name : "Information not available");
const ramInfo = "RAM: " + (navigator.deviceMemory ? navigator.deviceMemory + "GB" : "Information not available");
Expand All @@ -3011,10 +3038,42 @@ <h2>Resource Usage</h2>
document.getElementById("customPopup-gpu-details").textContent = gpuInfo;
document.getElementById("customPopup-ram-details").textContent = ramInfo;
document.getElementById("customPopup-screen-details").textContent = screenInfo;

// Simulate resource usage
document.getElementById("customPopup-cpu-usage").textContent = "CPU Usage: 20%";
document.getElementById("customPopup-memory-usage").textContent = "Memory Usage: 40%";
}

function initGraph() {
Plotly.newPlot('graph', [{
y: [],
type: 'line',
name: 'CPU'
}, {
y: [],
type: 'line',
name: 'GPU'
}, {
y: [],
type: 'line',
name: 'RAM'
}], {
paper_bgcolor: "#000000",
plot_bgcolor: "#000000",
font: { color: "#FFFFFF" }
});
}

function updateHardwareUsage() {
const usage = {
cpu: getRandomUsage(),
gpu: getRandomUsage(),
ram: getRandomUsage()
};

Plotly.extendTraces('graph', { y: [[usage.cpu], [usage.gpu], [usage.ram]] }, [0, 1, 2]);
document.getElementById("customPopup-cpu-usage").textContent = "CPU Usage: " + usage.cpu + "%";
document.getElementById("customPopup-memory-usage").textContent = "Memory Usage: " + usage.ram + "%";
}

function getRandomUsage() {
return Math.round(Math.random() * 100); // Simulated usage value
}
</script>
</body>
Expand Down

0 comments on commit 23a91c3

Please sign in to comment.