3/19 i think – chickenwings

so i lost my phone and wanted to see the exact time so i made a app like that

for my html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Erie Time</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <div class="time-card">
        <a href="https://time.is/Erie" class="time-link" rel="nofollow">Time in Erie</a>
        <span id="Erie_z161" class="time-display"></span>
    </div>
    
    <div class="time-card">
        <a href="https://time.is/London" class="time-link" rel="nofollow">Time in London</a>
        <span id="London_z8" class="time-display"></span>
    </div>

    <script src="//widget.time.is/t.js"></script>
    <script>
        time_is_widget.init({
            Erie_z161: { time_format: "12hours:minutes:secondsAMPM" },
            London_z8: { time_format: "12hours:minutes:secondsAMPM" },
            
        });

    </script>

</body>
</html>

for my css is this


body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: radial-gradient(circle at center, #0f172a, #0a0a0a);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.time-card {
    background: rgba(255, 255, 255, 0.05);
    padding: 40px 60px;
    border-radius: 20px;
    text-align: center;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 25px rgba(0, 200, 255, 0.25);
    animation: fadeIn 1.2s ease forwards;
    opacity: 0;
}


.time-link {
    text-decoration: none;
    color: #7dd3fc;
    font-size: 32px;
    font-weight: bold;
    letter-spacing: 1px;
    transition: 0.25s ease;
}

#time_is_link:hover {
    color: #38bdf8;
    text-shadow: 0 0 12px #38bdf8;
}

.time-display {
    display: block;
    margin-top: 15px;
    font-size: 60px;
    font-weight: bold;
    color: #e0faff;
    text-shadow: 0 0 20px rgba(56, 189, 248, 0.8);
    letter-spacing: 2px;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

Leave a Comment Cancel Reply