DevOps -- DevOps-html-UI
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic DevOps Dashboard</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, sans-serif;
}
body{
background:#0f172a;
color:white;
padding:40px;
}
h1{
text-align:center;
margin-bottom:40px;
font-size:42px;
color:#38bdf8;
}
#dashboard{
display:flex;
flex-direction:column;
gap:30px;
}
.topic-card{
background:#1e293b;
border-radius:18px;
padding:30px;
box-shadow:0 10px 25px rgba(0,0,0,0.3);
}
.topic-title{
font-size:36px;
color:#60a5fa;
margin-bottom:25px;
border-bottom:2px solid #334155;
padding-bottom:15px;
}
.subtopic-card{
background:#334155;
padding:20px;
border-radius:14px;
margin-bottom:20px;
}
.subtopic-title{
color:#facc15;
font-size:26px;
margin-bottom:20px;
}
.inner-topic{
background:#1e293b;
border-left:5px solid #38bdf8;
padding:18px;
border-radius:12px;
margin-bottom:15px;
}
.inner-topic-title{
color:#4ade80;
font-size:20px;
margin-bottom:15px;
font-weight:bold;
}
.url-box{
background:#0f172a;
padding:15px;
border-radius:10px;
border:1px solid #475569;
}
.url{
color:#38bdf8;
display:block;
margin-bottom:15px;
word-break:break-all;
font-size:15px;
}
.buttons{
display:flex;
gap:10px;
flex-wrap:wrap;
}
button{
border:none;
padding:10px 16px;
border-radius:8px;
cursor:pointer;
color:white;
font-weight:bold;
transition:0.3s;
}
.copy-btn{
background:#2563eb;
}
.copy-btn:hover{
background:#1d4ed8;
}
.open-btn{
background:#16a34a;
}
.open-btn:hover{
background:#15803d;
}
.upload-box{
text-align:center;
margin-bottom:40px;
background:#1e293b;
padding:25px;
border-radius:16px;
}
input[type="file"]{
margin-top:15px;
color:white;
}
</style>
</head>
<body>
<h1>🚀 Dynamic DevOps Dashboard</h1>
<!-- FILE UPLOAD -->
<div class="upload-box">
<h2>Upload Your Topics File</h2>
<input type="file" id="fileInput" accept=".txt">
</div>
<!-- DASHBOARD -->
<div id="dashboard"></div>
<script>
const fileInput = document.getElementById("fileInput");
const dashboard = document.getElementById("dashboard");
fileInput.addEventListener("change", function(event){
const file = event.target.files[0];
if(!file) return;
const reader = new FileReader();
reader.onload = function(e){
const content = e.target.result;
generateDashboard(content);
};
reader.readAsText(file);
});
function generateDashboard(text){
dashboard.innerHTML = "";
const lines = text.split("\n")
.map(line => line.trim())
.filter(line => line !== "");
let currentTopicCard = null;
let currentSubtopicCard = null;
let currentInnerTopic = null;
lines.forEach(line => {
// ============================
// TOPIC
// ============================
if(line.startsWith("TOPIC:")){
const topicName = line.replace("TOPIC:", "").trim();
currentTopicCard = document.createElement("div");
currentTopicCard.className = "topic-card";
currentTopicCard.innerHTML = `
<div class="topic-title">${topicName}</div>
`;
dashboard.appendChild(currentTopicCard);
}
// ============================
// SUBTOPIC
// ============================
else if(line.startsWith("SUBTOPIC:")){
const subtopicName = line.replace("SUBTOPIC:", "").trim();
currentSubtopicCard = document.createElement("div");
currentSubtopicCard.className = "subtopic-card";
currentSubtopicCard.innerHTML = `
<div class="subtopic-title">${subtopicName}</div>
`;
currentTopicCard.appendChild(currentSubtopicCard);
}
// ============================
// INNER TOPIC
// ============================
else if(line.startsWith("INNER_TOPIC:")){
const innerTopicName = line.replace("INNER_TOPIC:", "").trim();
currentInnerTopic = document.createElement("div");
currentInnerTopic.className = "inner-topic";
currentInnerTopic.innerHTML = `
<div class="inner-topic-title">${innerTopicName}</div>
`;
currentSubtopicCard.appendChild(currentInnerTopic);
}
// ============================
// URL
// ============================
else if(line.startsWith("URL:")){
const url = line.replace("URL:", "").trim();
const urlBox = document.createElement("div");
urlBox.className = "url-box";
urlBox.innerHTML = `
<span class="url">${url}</span>
<div class="buttons">
<button class="copy-btn"
onclick="copyURL('${url}')">
Copy URL
</button>
<button class="open-btn"
onclick="openURL('${url}')">
Open
</button>
</div>
`;
currentInnerTopic.appendChild(urlBox);
}
});
}
// ============================
// COPY URL
// ============================
function copyURL(url){
navigator.clipboard.writeText(url);
alert("Copied URL:\\n" + url);
}
// ============================
// OPEN URL
// ============================
function openURL(url){
window.open(url, "_blank");
}
</script>
</body>
</html>
Comments
Post a Comment