kpr-utils/templates/index.html
2025-05-20 23:50:10 -06:00

85 lines
2.0 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Helpers Home</title>
<style>
body {
font-family: sans-serif;
padding: 2rem 1rem;
text-align: center;
}
h1 {
margin-bottom: 1.5rem;
}
.panel-container {
display: grid;
/* each column will be at least 360px, but can grow to fill the space */
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
gap: 1rem;
width: 95%;
max-width: 1600px;
margin: 0 auto;
}
/* extra height so tall tools fit without internal scrollbars */
.panel {
min-height: 360px;
}
/* Let wide panels span two columns on wide screens */
.panel.wide {
grid-column: span 2;
}
.panel iframe {
flex: 1;
min-height: 300px;
width: 100%;
}
.panel h2 {
margin: 0;
padding: 0.5rem;
background: #f5f5f5;
font-size: 1rem;
border-bottom: 1px solid #ccc;
}
.panel iframe {
flex: 1;
border: none;
}
</style>
</head>
<body>
<h1>KPR Utils</h1>
<div class="panel-container">
<div class="panel">
<h2>Permissions Calculator</h2>
<iframe src="{{ url_for('chmod') }}" title="chmod helper"></iframe>
</div>
<div class="panel wide">
<h2>Cron Syntax Helper</h2>
<iframe src="{{ url_for('cron') }}" title="cron helper"></iframe>
</div>
<div class="panel wide">
<h2>JSON Validator</h2>
<iframe src="{{ url_for('json') }}" title="json helper"></iframe>
</div>
<div class="panel wide">
<h2>YAML Validator</h2>
<iframe src="{{ url_for('yaml') }}" title="yaml helper"></iframe>
</div>
</div>
</body>
</html>