diff --git a/.DS_Store b/.DS_Store index 696d070..6f0b31a 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/PP_logo.png b/PP_logo.png index 1720c9f..47b25b1 100644 Binary files a/PP_logo.png and b/PP_logo.png differ diff --git a/README.md b/README.md index eaf5ac2..a523ac3 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,12 @@ PinPoint ======== -**PinPoint is a google chrome extension that allows you to makes notes on particuar points in a video so you can revisit them later with ease.** +**PinPoint is a Google Chrome extension that allows you to makes notes on particular points in a video so you can revisit them later with ease.** ## Create PinPoints on any YouTube video -- Drag your mouse onto the video to bring up the Sidebar and create a PinPoint -- Drag away from the video to hide the Sidebar and see your videos as normal +- Hover your cursor over the video to bring up the Sidebar and create a PinPoint +- Move your cursor away from the video to hide the Sidebar and see your videos as normal +- PinPoints can be made in the default YouTube player or the full-screen player. ## PinPoints automatically load when you revisit a video - The Sidebar will display all PinPoints for that video you've already made @@ -13,9 +14,12 @@ PinPoint ## Includes a full-page Dashboard to see your PinPoint videos - A visually appealing and organized way to see your favorite videos +## Easy to Disable +- Not taking notes? Simply click 'off' in the PinPoint extension pop-up until you're ready to use it again. + ## Installation -- visit the Chrome Extension webstore and download at [PinPoint](https://chrome.google.com/webstore/detail/pinpoint/khcfpddiephakfkdhfnbbdihopbdopam?hl=en) -- PinPoint is open-source and we are open to any improvements +- Visit the Chrome Extension webstore and download at [PinPoint](https://chrome.google.com/webstore/detail/pinpoint/khcfpddiephakfkdhfnbbdihopbdopam?hl=en) +- PinPoint is open-source and we welcome improvements! ## PinPoint * [Ali Yeysides](https://github.com/aliyeysides) diff --git a/map-pinpoint.png b/map-pinpoint.png new file mode 100644 index 0000000..e903cfb Binary files /dev/null and b/map-pinpoint.png differ diff --git a/popup/popup.css b/popup/popup.css index c9bf271..0556e84 100644 --- a/popup/popup.css +++ b/popup/popup.css @@ -1,165 +1,63 @@ -.pinpoint-body { - margin:0; - background:rgb(37,37,37); - font-family: "Lato", sans-serif; - color: white; - height: 27em; - width:16em; -} - a { text-decoration: none; color: white; + padding: 5px 27px 5px 27px; + transition:.4s ease-in; +} +a:hover { + background-color: rgb(8,127,224); +} +.fa { + color: white; +} +span { + color:rgb(5, 210, 247); +} +button { + border: none; + box-shadow: none; + padding: 7px 30px 7px 30px; + color: white; + transition: .4s ease-in; + font-size: 13px; } -/*** Delete button ***/ -.pinpoint-delete{ - font-size: .1em; - float: right; - text-decoration: none; - color: black; - background-color: silver; - padding: 2px; - padding-left: 5px; - padding-right: 5px; - border-radius: 20px; - opacity: .5; +#on { + background-color: rgba(36, 228, 36, 0.0); +} +#on:hover { + background-color: rgba(36, 228, 36, 0.9) } -.pinpoint-delete:hover { - background-color: red; +#off { + background-color: rgba(239, 8, 8, 0.0); +} +#off:hover{ + background-color: rgba(239, 8, 8, 0.9); +} +.pinpoint-body { + margin:0; + background-size: 220%; + background-image: url("../map-pinpoint.png"); + font-family: "Lato", sans-serif; + color: white; + width:16em; + height: 20em; } /*** Title section ***/ .pinpoint-section { list-style: none; - margin-bottom: 0; + margin: -10px 10px 20px 10px; text-align: center; color: white; font-size: 2em; + background-color: rgba(6,6,6,0.35); } .pinpoint-logo { - margin-top: 1em; width: 50px; height: 50px; - background-color: white; padding: 20px; border-radius: 30%; - opacity: .8; -} - -.pinpoint-title { - /*float:left;*/ - background: rgb(27, 111, 221); - -} - -.fa { - color: white; -} - -/*** Dropdown Menu Bar ****/ -.pinpoint-section .pinpoint-nav-icons li { - display: block; - float: left; -} - -.pinpoint-nav-icons { - padding-left: 3.4em; -} - -.pinpoint-drop-down { - position: absolute; - display: none; - opacity: 0; - visibility: hidden; - font-size: .7em; - margin-left: -4em; -} - -.pinpoint-drop-down li { - background: #555; - display: block; - color: #fff; - text-shadow: 0 -1px 0 #000; - /*border-top: 5px solid transparent;*/ -} - -.pinpoint-drop-down li:hover { background: #666; } - -li:hover .pinpoint-drop-down { - display: block; - opacity: 1; - visibility: visible; -} - -/**** Notes Table ****/ -.pinpoint-table { - border-collapse: collapse; - table-layout: fixed; -} -.pinpoint-table tr td { - padding: 1em; -} - -.pinpoint-content { - margin-left: 1.2em; -} - -.pinpoint-time { - border-bottom: 3px solid transparent; - transition: 0.7s ease; - width: 0px; - white-space: nowrap; -} -.pinpoint-time:hover { - border-bottom: 1px solid rgb(56, 249, 3); - width:20%; -} - -tr:nth-child(odd) { - background-color:rgb(48, 48, 48); - display: block; - -} - -.pinpoint-all-notes { - width: 20em; - max-height: 15em; - font-size: 1.2em; - overflow: auto; - margin-top: 1em; -} - -.pinpoint-note_info { - word-wrap: break-word; - max-width: 18em; - min-width: 18em; -} - -/*****Note Form*****/ -.pinpoint-note { - margin-top: 0; - width:100%; - height: 5em; - background-color: transparent; - border: 1px; - font-size: 1.5em; -} -.pinpoint-save { - border-top: 1px solid #96d1f8; - margin-bottom: 1em; - padding: 10px 20px; - color: white; - text-decoration: none; - vertical-align: middle; -} - -.pinpoint-create { - margin-left: 8.2em; -} - -.pinpoint-save { - margin-left: 8.2em; } \ No newline at end of file diff --git a/popup/popup.html b/popup/popup.html index 29e7715..05b634b 100644 --- a/popup/popup.html +++ b/popup/popup.html @@ -12,10 +12,8 @@
+

PinPoint

-
-

PinPoint

-
Dashboard