Giter Site home page Giter Site logo

anthonytedja / notion Goto Github PK

View Code? Open in Web Editor NEW
71.0 1.0 14.0 65.08 MB

notion hosts a library of interactive widgets for @makenotion pages

Home Page: https://anthonytedja.github.io/notion/

HTML 21.64% JavaScript 47.38% CSS 30.98%
widget html notion embed weather dark-theme light-theme clock pomodoro javascript css

notion's Introduction

notion

Demo Gif

notion hosts widgets for Notion pages.

Setup & Usage

Embed widget links are given by anthonytedja.github.io/notion/<widget-name>/

Setup Demo

IMPORTANT: Use system settings for appearance on desktop to match the theme style.

Demo Gif

  • Click on the widget image in the preview section below to take you to the widget site.
  • Copy the URL and paste the link into Notion and choose "Create embed"
  • Resize the widget to how you want and you're all set up!

Demo Gif

Preview

Pomodoro : Pomodoro is a productivity technique where a 25 minute work session is followed by a 5 minute break for each pomodoro period. Click on the timer to start the countdown, or double / triple click to switch the timer modes from work to break. A notification will be played when the timer hits 0 so you don't need to keep your eyes on the widget.

Pomodoro

Weather : Powered by weatherwidget.io, get real time weather updates in the Toronto Area.

Weather

Clock : Analog display of local time.

Clock

Time : Display local time in English text, a fork from Text Clock.

Time

Cat : Poke the sleepy cat to see it roll over and yawn!

Cat

Kirby : Poke Kirby to wake it up from its sleep!

Kirby

Rimuru : Poke Rimuru the Slime to see it jump! Pixel Artist: pixelcatto.

Rimuru

Bunny : Poke the chubby bunny to see it try and catch its breath!

Bunny

Features

  • Supported for Mobile App and Desktop Page
  • V2: JS Local Storage to save theme settings
  • V3: JS Media Queries to automatically match theme settings

Built With

  • CodePen
  • Visual Studio Code

notion's People

Contributors

anthonytedja avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.