Skip to content

Commit 38354ac

Browse files
AmnoorAmnoor
authored
Merge the "release/v1.0.0" branch into the "main" branch
Release v1.0.0: Initial Digital Clock Application with Docker Support and CI/CD Pipeline This merge introduces the complete Digital Clock web application into the main branch, marking the first production-ready release of the project. The application provides a real-time digital clock with a modern glassmorphism user interface, featuring a semi-transparent backdrop with blur effects for visual appeal. The implementation includes a fully functional clock display that updates every second, showing the current time in 12-hour format with hours, minutes, seconds, and AM/PM indicators. The interface is built with fundamental web technologies including HTML5, CSS3, and vanilla JavaScript, ensuring lightweight performance and broad browser compatibility. Docker containerization has been integrated using the nginx:mainline-alpine3.22-slim base image, providing a minimal footprint while maintaining full functionality. The application is configured to serve on port 80 within the container and can be easily deployed using either pre-built images from Docker Hub or by building from source. An automated CI/CD pipeline has been established through GitHub Actions, triggering on version tags matching the v* pattern. The workflow handles the complete build process, including DockerSlim optimization to reduce image size, and automatically publishes both version-specific and latest tags to the amnoorbrar/digital-clock repository on Docker Hub. Comprehensive project documentation has been added through the README file, including MIT license information, Docker Hub statistics badges, detailed setup instructions for both deployment methods, and a structured contribution workflow. The contribution guidelines establish a clear branching strategy requiring all changes to flow through the develop branch before being merged into release branches and ultimately into main. The project structure includes organized directories for assets (background images and SVG icons), stylesheets, and GitHub workflow configurations. A properly configured dockerignore file ensures efficient builds by excluding unnecessary files from the Docker context. This release establishes the foundation for the Digital Clock project with production-ready containerization, automated deployment workflows, and clear documentation for both users and contributors.
2 parents 47b0237 + 689e981 commit 38354ac

File tree

9 files changed

+306
-0
lines changed

9 files changed

+306
-0
lines changed

‎.dockerignore‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# Docker
2+
.dockerignore
3+
Dockerfile
4+
Dockerfile
5+
6+
# Git
7+
.git/
8+
.github/
9+
.gitignore
10+
11+
# License
12+
LICENSE
13+
14+
# Gemini
15+
.gemini/
16+
GEMINI.md

‎.github/workflows/docker-push.yml‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
name: Release on tag
2+
3+
on:
4+
push:
5+
tags:
6+
- 'v*'
7+
8+
jobs:
9+
build-and-publish:
10+
runs-on: ubuntu-latest
11+
12+
env:
13+
IMAGE_LOCAL: digital-clock
14+
IMAGE_DOCKERHUB: amnoorbrar/digital-clock
15+
VERSION: ${{ github.ref_name }}
16+
17+
steps:
18+
- name: Checkout
19+
uses: actions/checkout@v4
20+
21+
- name: Show context
22+
run: |
23+
echo "Git ref: $GITHUB_REF"
24+
echo "Tag (version): $VERSION"
25+
26+
- name: Verify Docker is available
27+
run: docker version
28+
29+
- name: Install DockerSlim (slim)
30+
run: |
31+
curl -sL https://raw.githubusercontent.com/slimtoolkit/slim/master/scripts/install-slim.sh | sudo -E bash -
32+
slim --version || docker-slim --version
33+
34+
- name: Build original image
35+
run: docker build -t ${IMAGE_LOCAL}:original .
36+
37+
- name: Slim original -> latest
38+
run: |
39+
slim build \
40+
--target ${IMAGE_LOCAL}:original \
41+
--tag ${IMAGE_LOCAL}:latest \
42+
--http-probe-cmd /usr/share/nginx/html/index.html \
43+
--http-probe-cmd /usr/share/nginx/html/style/ \
44+
--preserve-path /usr/share/nginx/html
45+
46+
- name: Slim original -> version tag
47+
run: |
48+
slim build \
49+
--target ${IMAGE_LOCAL}:original \
50+
--tag ${IMAGE_LOCAL}:${VERSION} \
51+
--http-probe-cmd /usr/share/nginx/html/index.html \
52+
--http-probe-cmd /usr/share/nginx/html/style/ \
53+
--preserve-path /usr/share/nginx/html
54+
55+
- name: Docker Hub login
56+
env:
57+
DOCKERHUB_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
58+
DOCKERHUB_TOKEN: ${{ secrets.DOCKERHUB_TOKEN }}
59+
run: |
60+
if [ -z "$DOCKERHUB_USERNAME" ] || [ -z "$DOCKERHUB_TOKEN" ]; then
61+
echo "Docker Hub credentials not set. Please define DOCKERHUB_USERNAME and DOCKERHUB_TOKEN secrets."
62+
exit 1
63+
fi
64+
echo "$DOCKERHUB_TOKEN" | docker login -u "$DOCKERHUB_USERNAME" --password-stdin
65+
66+
- name: Tag versioned image for Docker Hub
67+
run: docker tag ${IMAGE_LOCAL}:${VERSION} ${IMAGE_DOCKERHUB}:${VERSION}
68+
69+
- name: Push versioned image
70+
run: docker push ${IMAGE_DOCKERHUB}:${VERSION}
71+
72+
- name: Tag latest image for Docker Hub
73+
run: docker tag ${IMAGE_LOCAL}:latest ${IMAGE_DOCKERHUB}:latest
74+
75+
- name: Push latest image
76+
run: docker push ${IMAGE_DOCKERHUB}:latest
77+
78+
- name: Docker logout
79+
if: always()
80+
run: docker logout

‎Dockerfile‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# Use the lightweight Alpine Linux version of Nginx web server as the base image
2+
FROM nginx:mainline-alpine3.22-slim
3+
4+
# Copy all files from the current directory to Nginx's web root directory
5+
COPY . /usr/share/nginx/html
6+
7+
# Expose port 80 to allow HTTP traffic to reach the web server
8+
EXPOSE 80

‎README.md‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
# Digital Clock
2+
3+
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
4+
[![Docker Pulls](https://img.shields.io/docker/pulls/amnoorbrar/digital-clock)](https://hub.docker.com/r/amnoorbrar/digital-clock)
5+
[![GitHub last commit](https://img.shields.io/github/last-commit/Amnoor/Digital-Clock-Program.svg?style=flat)](https://github.com/Amnoor/Digital-Clock-Program/commits/main)
6+
7+
A simple and elegant digital clock web application, containerized with Docker and ready for deployment. It displays the current time, updated every second, against a visually appealing blurred background.
8+
9+
<br>
10+
<p align="center">
11+
<img src="assets/clock-icon.svg" alt="Digital Clock Icon" width="500"/>
12+
</p>
13+
<br>
14+
15+
## **Table Of Contents**
16+
17+
- [Digital Clock](#digital-clock)
18+
- [About The Project](#about-the-project)
19+
- [Built With](#built-with)
20+
- [Getting Started](#getting-started)
21+
- [Prerequisites](#prerequisites)
22+
- [Running Locally](#running-locally)
23+
- [Contribution](#contribution)
24+
- [Acknowledgement](#acknowledgement)
25+
- [License](#license)
26+
27+
## About The Project
28+
29+
This project is a minimalist digital clock built with fundamental web technologies. It is designed to be lightweight and easily portable, thanks to its Docker containerization and an automated CI/CD pipeline for efficient releases.
30+
31+
### Built With
32+
33+
* HTML5
34+
* CSS3
35+
* JavaScript (ES6)
36+
* Docker
37+
* Nginx
38+
* DockerSlim
39+
* GitHub Actions
40+
41+
## Getting Started
42+
43+
To get a local copy up and running, follow these simple steps.
44+
45+
### Prerequisites
46+
47+
Ensure you have Docker installed on your machine.
48+
* [Docker](https://www.docker.com/get-started)
49+
50+
### Running Locally
51+
52+
You can run this application in two ways:
53+
54+
**Option 1: Using the Pre-built Docker Image**
55+
56+
1. **Pull the Docker image from Docker Hub:**
57+
```sh
58+
docker pull amnoorbrar/digital-clock
59+
```
60+
2. **Run the Docker container:**
61+
```sh
62+
docker run --rm -itd -p 8080:80 amnoorbrar/digital-clock
63+
```
64+
3. **Access the application:**\
65+
Open your browser and navigate to `http://localhost:8080`.
66+
67+
**Option 2: Building from Source**
68+
69+
1. **Clone the repository:**
70+
```sh
71+
git clone https://github.com/Amnoor/Digital-Clock-Program.git
72+
cd Digital-Clock-Program
73+
```
74+
2. **Build the Docker image:**
75+
```sh
76+
docker build -t digital-clock .
77+
```
78+
3. **Run the container:**
79+
```sh
80+
docker run --rm -p 8080:80 digital-clock
81+
```
82+
4. **Access the application:**\
83+
Open your browser and navigate to `http://localhost:8080`.
84+
85+
## Contributing
86+
87+
Contributions are welcome! Please follow this workflow to ensure a smooth process.
88+
89+
1. **Fork the Repository:** Start by forking the project to your own GitHub account.
90+
91+
2. **Branching Strategy:**
92+
* Create a `develop` branch from `main` if it doesn't already exist in your fork.
93+
* Create a new branch for your changes *from the `develop` branch*. Please name it according to its purpose (e.g., `feature/your-feature`).
94+
95+
3. **Commit and Merge to `develop`:** After making your changes, commit them and merge your feature branch into your fork's `develop` branch.
96+
97+
4. **Update Acknowledgement:** To get credit for your work, create another branch from `develop` named `docs/acknowledgement`. Add your name and a link to your GitHub profile under the **Acknowledgement** section. Merge this branch into your `develop` branch as well.
98+
99+
5. **Create a Release Branch:** Once all your changes are in your `develop` branch, create a new branch from it. Name this branch following the pattern `release/v*` (for example, `release/v1.2.3`).
100+
101+
6. **Submit the Final Pull Request:** Create the final pull request to merge your new `release/v*` branch into the original repository's `main` branch.
102+
103+
7. **Wait for Review:** The project owner will review your changes, provide feedback, and merge your contribution.
104+
105+
## Acknowledgement
106+
107+
A big thank you to everyone who has contributed to this project.
108+
109+
* **Project Owner:** [Amnoor Brar](https://github.com/Amnoor)
110+
* **Contributors:**
111+
<!-- Add your name here when you contribute! -->
112+
<!-- In this format -->
113+
<!-- "- [GitHub Name](GitHub Profile Link)" -->
114+
115+
## License
116+
117+
Distributed under the MIT License. See [`LICENSE`](LICENSE) for more information.

‎assets/background.jpg‎

62.1 KB
Loading

‎assets/clock-icon.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎index.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!-- Digital Clock Program -->
2+
3+
<!-- index.html -->
4+
5+
<!-- Starting the HTML file with the <!DOCTYPE html> element -->
6+
<!DOCTYPE html>
7+
<!-- Declaring the HTML language as English -->
8+
<html lang="en">
9+
<!-- Defining the head section -->
10+
<head>
11+
<!-- Defining the character set and viewport -->
12+
<meta charset="UTF-8">
13+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
14+
<!-- Defining the title of the page -->
15+
<title>Digital Clock</title>
16+
<!-- Adding a favicon to the page -->
17+
<link rel="icon" type = "image/svg+xml" href = "assets/clock-icon.svg">
18+
<!-- Adding a link to the external CSS file -->
19+
<link rel="stylesheet" href="style/style.css">
20+
</head>
21+
<!-- Defining the body section -->
22+
<body>
23+
<!-- Adding a container for the clock -->
24+
<div id="clock-box">
25+
<!-- Adding a heading for the clock were the clock will be shown -->
26+
<h1 id="clock"></h1>
27+
</div>
28+
<!-- Adding a link to the external JavaScript file -->
29+
<script src="index.js"></script>
30+
</body>
31+
</html>

‎index.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
// Digital Clock Program
2+
3+
// index.js
4+
5+
/**
6+
* Updates the digital clock on the webpage every given interval.
7+
*
8+
* @param {number} [interval=1000] - The time interval in milliseconds to update the clock.
9+
*/
10+
function UpdateClock(interval=1000){
11+
setInterval(() => {const clock = document.getElementById("clock");
12+
const now = new Date();
13+
const hours = String(now.getHours()).padStart(2, '0') % 12 || 12;
14+
const minutes = String(now.getMinutes()).padStart(2, '0');
15+
const seconds = String(now.getSeconds()).padStart(2, '0');
16+
const ampm = hours >= 12 ? 'PM' : 'AM';
17+
clock.textContent = `${hours}:${minutes}:${seconds} ${ampm}`;}, interval);
18+
}
19+
20+
// Call the function to start updating the clock
21+
UpdateClock();

‎style/style.css‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
/* Digital Clock Program */
2+
3+
/* style/style.css */
4+
5+
/* giving the body and html elements 100% height and removing margin */
6+
html, body{
7+
height: 100%;
8+
margin: 0;
9+
}
10+
/* styling the body element to center content and add background image */
11+
body{
12+
display: flex;
13+
justify-content: center;
14+
align-items: center;
15+
background-image: url('../assets/background.jpg');
16+
background-size: cover;
17+
}
18+
/* styling the clock box by adding blur in the background, making it transparent, and centering the text */
19+
#clock-box{
20+
width: 100%;
21+
height: 300px;
22+
font-size: 60px;
23+
color: #fff;
24+
text-align: center;
25+
background-color: rgba(255, 255, 255, 0.3);
26+
backdrop-filter: blur(10px);
27+
-webkit-backdrop-filter: blur(10px);
28+
}

0 commit comments

Comments
 (0)