File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
​
<html lang="en">
    <head>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap">
        <link rel="stylesheet" href="/static/styles.css">
        
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
        <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
        <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
        <script src="/static/script.js"></script>
        <meta charset=utf-8 />
        <title>Diamonds</title>
    </head>
    <body>
        <nav class="jumbotron_up">
            <div class="navbar-nav mr-auto mt-2">
                <a class="nav-link" href="/">All diamonds</a>
                <a class="nav-link" href="/add">Add diamond</a>
                <a class="nav-link" href="/delete">Delete diamond</a>
                <a class="nav-link" href="/register">Register</a>
                <a class="nav-link" href="/login">Log in</a>
                <a class="nav-link" href="/logout">Log out</a>
            </div>
        </nav>
        <div class="jumbotron">
            <h1>Diamond registry</h1>
            <h3>Here is a little tool to keep track of different diamonds you are considering. <br> If you're looking for a fancy shape (i.e. not round), the cut gradings don't apply, so just put n.a.:)</h3>
        </div>
        <div class="container">
            <div class="section">
​
                <h2>Diamond overview</h2>
                
            </div>
​
            <div class="section">
                <div class="table-responsive">
                <table id="htmltable" class="table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Carat</th>
                            <th>Colour</th>
                            <th>Clarity</th>
                            <th>Cut</th>
                            <th>Price</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- Loop through the database entries to display them in this table -->
                        {% for diamonds in diamonds %}
                            <tr>
                                <td>{{ diamonds.name }}</td>
                                <td>{{ diamonds.carat }}</td>
                                <td>{{ diamonds.colour }}</td>
                                <td>{{ diamonds.clarity }}</td>
                                <td>{{ diamonds.cut }}</td>
                                <td>{{ diamonds.price }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </body>
</html>
​
CSSSaved
 
.nav-link {
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    color: #ffffff;
    text-align: left;
}
​
body {
    background-color: #fff;
    color: #212529;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    text-align: left;
}
​
.container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;
    width: 90%;
}
​
.jumbotron_up {
    background-color: #aaaacc;
    color: #ffffff;
    padding: 2rem 1rem;
    text-align: left;
}
​
.jumbotron {
    background-color: #aaaacc;
    color: #ffffff;
    margin-bottom: 2rem;
    padding: 2rem 1rem;
    text-align: center;
}
​
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar
}
​
.section {
    padding-bottom: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 0.5rem;
}
​
.section:hover {
    background-color: #f5f5f5;
    transition: color 2s ease-in-out, background-color 0.15s ease-in-out;
}
​
h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 48px;
}
​
h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
}
​
h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
}
​
button, input[type="submit"] {
    background-color: #aaaacc;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.5;
    padding: 0.375rem 0.75rem;
    text-align: center;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    vertical-align: middle;
}
​
input[type="text"], input[type="number"] {
    line-height: 1.8;
    width: 25%;
}
​
input[type="text"]:hover, input[type="number"]:hover {
    background-color: #f5f5f5;
    transition: color 2s ease-in-out, background-color 0.15s ease-in-out;
}
​
table {
    background-color: transparent;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 1rem;
    width: 100%;
}
​
table th,
table td {
    padding: 0.75rem;
    font-family: 'Montserrat', sans-serif;
    vertical-align: middle;
}
​
tbody tr:nth-of-type(odd) {
    background-color: rgb(179, 208, 255, 0.3)
}
​
​
JavaScriptSaved
 
$(document).ready(function(){
    var table = $("#htmltable").DataTable();
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers