Changeset - 3bdd5368892d
[Not reviewed]
0 0 2
x - 15 months ago 2024-01-05 00:12:11
xbr@c3l.lu
feat: basic index with both flex and table data
2 files changed with 152 insertions and 0 deletions:
0 comments (0 inline, 0 general)
frontend/index.html
Show inline comments
 
new file 100644
 
<!DOCTYPE html>
 
<html>
 
	<head>
 
		<meta charset="UTF-8">
 
		<title>TLS Outage Tracker</title>
 
		<link rel="stylesheet" type="text/css" href="style.css">
 
        <meta name="viewport" content="width=device-width,initial-scale=1" />
 
	</head>
 
	<body>
 
    <div class="countup">
 
			<p class="countup__item countup__tls"><span id="time__tls">0</span> days</p>
 
			<p class="countup__item countup__text">since last outage caused by TLS expiry</p>
 
    </div>
 

	
 
    <div class="logs">
 
        <p class="logs__title">Last incidents</h2>
 
        <div class="logs__item">
 
            <p class="logs__item__name">c3l.lu</p>
 
            <p class="logs__item__date">3 days ago</p>
 
        </div>
 
        <div class="logs__item">
 
            <p class="logs__item__name">social.c3l.lu</p>
 
            <p class="logs__item__date">3 days ago</p>
 
        </div>
 
        <div class="logs__item">
 
            <p class="logs__item__name">media.c3l.lu</p>
 
            <p class="logs__item__date">3 days ago</p>
 
        </div>
 
        <div class="logs__item">
 
            <p class="logs__item__name">smtp.c3l.lu</p>
 
            <p class="logs__item__date">3 days ago</p>
 
        </div>
 

	
 
        <table>
 
            <tbody>
 
                <tr>
 
                    <td>c3l.lu</td>
 
                    <td>3 days ago</td>
 
                </tr>
 
            </tbody>
 
            <tbody>
 
                <tr>
 
                    <td>social.c3l.lu</td>
 
                    <td>5 days ago</td>
 
                </tr>
 
            </tbody>
 
            <tbody>
 
                <tr>
 
                    <td>mail.c3l.lu</td>
 
                    <td>10 days ago</td>
 
                </tr>
 
            </tbody>
 
        </table>
 
    </div>
 
	</body>
 
</html>
frontend/style.css
Show inline comments
 
new file 100644
 
/* Defaults */
 
* {
 
	font: inherit;
 
	padding: 0px;
 
	margin: 0px;
 
}
 

	
 
a {
 
	text-decoration: none;
 
	color: inherit;
 
}
 

	
 
/* General */
 
body {
 
	background-color: #393939;
 
	color: #d2d2d2;
 

	
 
    font-family: "Helvetica", "Arial", sans-serif;
 
    font-size: 20px;
 
}
 

	
 
/*
 
   COUNT UP
 
*/
 

	
 
/* Links (block) on home page*/
 
.countup {
 
	font-size: 48px;
 
	line-height: 52px;
 
    text-align: center;
 

	
 
	margin-top: 15vh;
 

	
 
	display: flex;
 
    flex-direction: column;
 
    
 
	justify-content: center;
 
	align-items: center;
 
}
 

	
 
/* Text on home page */
 
.countup__item {
 
	display: block;
 
}
 

	
 
.countup__tls {
 
	font-size: 100px;
 
	line-height: 150px;
 
}
 

	
 
/*
 
   LOGS
 
*/
 

	
 
.logs {
 
    margin:auto;
 
    max-width: 50vw;
 
    min-width: 50vw;
 

	
 
    margin-top: 2.5vh;
 
    border-radius: 0.1rem;
 
    border-style: solid;
 
    border-color: #454545;
 

	
 
    display: flex;
 
    flex-direction: column;
 
    align-items: center;
 
    justify-content: center;
 

	
 
    background-image: repeating-linear-gradient(135deg, #393939, #393939 5px, #454545 5px, #454545 9px);
 
}
 

	
 
.logs__title {
 
    display: block;
 
    margin-top: 1vh;
 
    margin-bottom: 1vh;
 
    font-size: 30px;
 
    text-decoration: underline;
 
}
 

	
 
.logs__item {
 
    display: flex;
 
    flex-direction: row;
 
    justify-content: space-evenly;
 
    width: 95vh;
 
    margin-bottom: 1vh;
 
}
 

	
 
table {
 
    margin-left: auto;
 
    margin-right: auto;
 
}
 

	
 
td {
 
    padding: 5px 20px;
 
}
 
\ No newline at end of file
0 comments (0 inline, 0 general)