https://github.com/edtechjessy/ticktock-widget
A minimalist desktop live wallpaper 🖥️ showcasing dual clocks: one for work and one for home
https://github.com/edtechjessy/ticktock-widget
clock clock-widget cutomizable desktop-wallpaper html html-project timezone-conversion
Last synced: about 1 year ago
JSON representation
A minimalist desktop live wallpaper 🖥️ showcasing dual clocks: one for work and one for home
- Host: GitHub
- URL: https://github.com/edtechjessy/ticktock-widget
- Owner: edtechjessy
- Created: 2025-01-07T21:27:41.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-09T17:08:24.000Z (over 1 year ago)
- Last Synced: 2025-04-02T10:18:07.357Z (about 1 year ago)
- Topics: clock, clock-widget, cutomizable, desktop-wallpaper, html, html-project, timezone-conversion
- Language: HTML
- Homepage: https://edtechjessy.github.io/TickTock-Widget/
- Size: 261 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Tick-Tock Widget
## Project Explanation
I’m working on a minimalist desktop live wallpaper 🖥️ to display two clocks:
1. **CT Time 🕰️** (Central Time) – for the schools I work with online 🏫
2. **São Paulo Time ⏰** (SP Time) – for where I currently live 🌎
I wanted a quick visual reference for these two time zones when I open my laptop 💻. It’s designed to be simple, beige, and include a cute cat 🐱 to make it more fun and personal! This personalized project will help me keep track of my teaching schedule and the time in my current location—*all with a visual glance when I open my laptop.*
1. [How to Change the Time Zones](#customizing-the-times)
2. [How to Change the Title](#customizing-the-title)
3. [How to Create an AI Image for the bakckground](#customizing-the-image)
4. [How to Upload the AI Image and Update Your Code](#how-to-upload-your-image-and-update-your-code)
5. [How to Make it into a Dynamic Wallper on Desktop](#turn-it-into-your-desktop-background)
---
## Customizing the Times
### **Step 1: Clone the GitHub Repository**
1. **Find the Correct Time Zone Name**
- Look up the correct IANA time zone string (e.g., `America/Sao_Paulo` for São Paulo or `Asia/Tokyo` for Tokyo).
- Use this [IANA Time Zone Lookup Tool](https://www.addevent.com/c/documentation/tools/time-zone-lookup).
2. **Update Your Code**
- Replace the existing time zone string in the code with the one for your desired region.
---
## Customizing the Title
### **Step 1: Edit the Cloned Repository**
1. **Open `index.html`**
- Locate the title of the webpage, typically represented by an `
` tag.
2. **Update the Title**
- Replace the existing title with your custom one and save the file.
---
## Customizing the Image
### How I Created an Image with Canva AI
1. **Access Canva's AI Image Generator**
- Use Canva's AI tool: [https://www.canva.com/ai-image-generator/](https://www.canva.com/ai-image-generator/).
3. **Choose Your Wording**
Start by thinking about the text prompt that describes the image you want. Be specific about the theme, mood, or key elements you want in the design. For example, you can describe the style, objects, and color palette.
5. **Pick the Style**
Canva AI allows you to select from various styles like realistic, cartoonish, abstract, or even specific art movements. Choose a style that fits your vision for the image.
7. **Run the Generator**
Enter your text prompt and let the AI create an image for you. If the first result doesn’t match what you’re envisioning, tweak the wording or refine your style preferences and run it again.
9. **Refine Your Results**
Don’t hesitate to do multiple reruns until the AI generates an image you’re happy with. Experimentation is key to achieving the desired result.
 
11. **Save**
Once you've created an image you love, save it to your device.
and upload it to your github repository. Name your image:
insertname.jpg
By following this process, I was able to create an image I liked by carefully choosing my words, picking a style, and rerunning the generator until it felt just right. Have fun experimenting with Canva's AI to bring your ideas to life!
## How to Upload Your Image and Update Your Code
Follow these steps to upload your image and ensure it displays correctly in your project:
### Step 1: Upload Your Image
- Go to your GitHub repository and upload the image file.
- Use the **"Upload files"** option in the repository interface.
---
### Step 2: Choose Your File
- After clciking upload file, click "choose file", select your image and click "open"
---
### Step 3: Commit Your Changes
- Add a commit message (e.g., "Uploaded new background image") and click **"Commit changes"** to save your updates.
---
### Step 4: Copy the File Path
- Locate your uploaded image in the repository, right-click on it, and select **"Copy file path."**
---
### Step 5: Update the Image Path in Your Code
- Replace the placeholder image path in your code with the correct file path from Step 4. Ensure the file path is accurate to display the desired image.
---
By following these steps, your custom image should now display correctly in your project. Let me know if you encounter any issues!
## Turn It into Your Desktop Background
### For Windows
- Use [Lively Wallpaper](https://livelywallpaper.net/) for dynamic wallpapers.
- 
- 
- Check their [GitHub repository](https://github.com/rocksdanister/lively).
### For Mac
- Use the [Splash App](https://splash.does-it.net/) for live wallpapers.
- Check out their Github [GitHub instructions](https://github.com/splashwallpaper/splash).
### Overview 🌟