Deploy

nisamuhmed · Mar 21, 2024 · f835143 · f835143
commit f835143
Show file tree

Hide file tree

Showing 5 changed files with 725 additions and 0 deletions.
diff --git a/.github/workflows/main.yaml b/.github/workflows/main.yaml
@@ -0,0 +1,23 @@
+name: Deployment
+
+on:
+ push:
+ branches:
+ - main
+
+jobs:
+ build-and-deploy:
+ runs-on: ubuntu-latest
+ steps:
+ - name: Checkout
+ uses: actions/checkout@v1
+
+ - name: Configure AWS Credentials
+ uses: aws-actions/configure-aws-credentials@v1
+ with:
+ aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+ aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+ aws-region: us-west-2
+
+ - name: Deploy to S3 bucket
+ run: aws s3 sync . s3://neon-clock --delete
diff --git a/index.html b/index.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,300;0,400;0,600;0,700;1,400&display=swap" rel="stylesheet">
+
+<link href="https://assets.codepen.io/2509128/style.css" rel="stylesheet">
+
+<style>
+*, *::before, *::after {
+ font-family: inherit;
+ box-sizing: inherit;
+ margin: 0;
+ padding: 0;
+}
+
+html {
+ box-sizing: border-box;
+ font-family: 'Nunito Sans', sans-serif;
+ font-size: 62.5%;
+}
+
+html body {
+ font-size: 1.6rem;
+ margin: 0;
+ height: 100vh;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
+ul {
+ list-style: none;
+}
+
+a, a:link, a:visited {
+ text-decoration: none;
+}
+
+.safari {
+ .digit span {
+ // 3d transform with filter animation is broken on Safari
+ transition: none !important;
+
+ &::before {
+ content: '';
+ position: absolute;
+ display: block;
+ // prevent the bounding box to be cut off during animation
+ width: 400%;
+ height: 400%;
+ top: 0;
+ left: 0;
+ transform: translate(-50%, -50%);
+ }
+ }
+ }
+</style>
+<link rel="stylesheet" href="style.css">
+</head>
+<body>
+ <main></main>
+ <script src="main.js"></script>
+</body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,125 @@
+const bars = [
+ ['end', 'top'],
+ ['side', 'top', 'left'],
+ ['side', 'top', 'right'],
+ ['middle'],
+ ['side', 'bottom', 'left'],
+ ['side', 'bottom', 'right'],
+ ['end', 'bottom']
+];
+
+const $main = document.querySelector('main');
+
+const addDigits = number => {
+ const initGroup = (number, padding = 2) => {
+ const $group = document.createElement('div');
+ $group.classList.add('group');
+
+ const digits = [...`${number}`.padStart(padding, 0)].map(digit => {
+ const $digit = document.createElement('figure');
+ $digit.classList.add('digit');
+ $digit.setAttribute('data-digit', digit);
+ bars.forEach(classes => {
+ const $span = document.createElement('span');
+ $span.classList.add(...classes);
+ $digit.append($span);
+ });
+ return $digit;
+ });
+
+ $group.append(...digits);
+
+ return {
+ element: $group,
+ set number(val) {
+ number = val;
+ [...`${number}`.padStart(padding, 0).substring(`${number}`.length - 2)].forEach((digit, i) => {
+ digits[i].setAttribute('data-digit', digit);
+ });
+ },
+
+ get number() {
+ return number;
+ }
+ }
+ }
+
+ const $digits = document.createElement('div');
+ $digits.classList.add('digits');
+ const group = initGroup(number);
+ const groupShadow1 = initGroup(number);
+ const groupShadow2 = initGroup(number);
+ groupShadow1.element.classList.add('shadow');
+ groupShadow1.element.classList.add('shadow1');
+ groupShadow2.element.classList.add('shadow');
+ groupShadow2.element.classList.add('shadow2');
+ $digits.append(group.element);
+ $digits.append(groupShadow1.element);
+ $digits.append(groupShadow2.element);
+ $main.append($digits);
+
+ return {
+ set number(val) {
+ number = val;
+ group.number = val;
+ groupShadow1.number = val;
+ groupShadow2.number = val;
+ },
+ get number() {
+ return number;
+ }
+ }
+}
+
+const addColon = () => {
+ const $colonGroup = document.createElement('div');
+ $colonGroup.classList.add('colon-group');
+ const $colon = document.createElement('figure');
+ $colon.append(document.createElement('span'));
+ const $colonShadow1 = document.createElement('figure');
+ $colonShadow1.append(document.createElement('span'));
+ const $colonShadow2 = document.createElement('figure');
+ $colonShadow2.append(document.createElement('span'));
+ $colon.classList.add('colon');
+ $colonShadow1.classList.add('colon', 'shadow', 'shadow1');
+ $colonShadow2.classList.add('colon', 'shadow', 'shadow2');
+ $colonGroup.append($colon);
+ $colonGroup.append($colonShadow1);
+ $colonGroup.append($colonShadow2);
+ $main.append($colonGroup);
+}
+
+const init = () => {
+ let now = new Date();
+ let hours = now.getHours();
+ let minutes = now.getMinutes();
+ let seconds = now.getSeconds();
+
+ const numberHour = addDigits(hours);
+ addColon();
+ const numberMinute = addDigits(minutes);
+ addColon();
+ const numberSecond = addDigits(seconds);
+
+ const update = () => {
+ now = new Date();
+ let newSeconds = now.getSeconds();
+ if (seconds !== newSeconds) {
+ hours = now.getHours();
+ minutes = now.getMinutes();
+ seconds = newSeconds;
+ numberHour.number = hours;
+ numberMinute.number = minutes;
+ numberSecond.number = seconds;
+ }
+
+ requestAnimationFrame(update);
+ }
+ update();
+}
+
+if (/^(?:(?!chrome|android)[\s\S])*(?:safari|iPad|iPhone|iPod)/i.test(navigator.userAgent)) {
+ document.body.classList.add('safari');
+}
+
+init();