diff --git a/docs/index.css b/docs/index.css new file mode 100644 index 0000000..11025ae --- /dev/null +++ b/docs/index.css @@ -0,0 +1,291 @@ +:root { + --background-color-dark: #000000; + --background-color-light: #101010; + --white-accent-dark: #1f1f1f; + --white-accent-mid: #939393; + --white-accent-light: #fafafa; + --main-color-one: #f8e8ff; + --main-color-two: #eabdff; + --main-color-three: #e738ff; + --main-color-four: #bf38fe; + --main-color-five: #410060; +} + +body { + font-family: 'Montserrat', sans-serif; + margin: 0; + background-color: var(--background-color-light); +} + +html { + scroll-behavior: smooth +} + +::-webkit-scrollbar { + width: 12px; +} + +::-webkit-scrollbar:hover ::-webkit-scrollbar-thumb { + background-color: var(--white-accent-light); +} + +::-webkit-scrollbar-thumb { + background-color: var(--white-accent-dark); + border-radius: 12px; +} + +::-webkit-scrollbar-track { + background-color: transparent; +} + +.background { + color: #ffffff; + text-align: center; + width: 100%; + margin: 0; + overflow-x: hidden; +} + +.top_bar { + position: fixed; + width: 90%; + padding: 0 5% 0 5%; + display: flex; + flex-direction: row; + justify-content: right; + align-items: center; + backdrop-filter: blur(5px); + z-index: 5; + transition: background-color 250ms ease, box-shadow 250ms ease; +} + +.darken { + background-color: rgba(0, 0, 0, 0.50); + box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5); +} + +.top_bar a { + color: var(--white-accent-light); + text-decoration: none; + margin: 30px; + font-size: 0.9rem; + text-wrap: nowrap; + transition: color 250ms ease; +} + +.top_bar a:hover { + color: var(--main-color-three); +} + +#app_name { + margin-right: auto; + display: flex; + justify-self: center; + align-items: center; +} + +.app_logo { + width: 20px; + height: 20px; + margin-right: 10px; +} + +.video { + width: 100%; + border-radius: 25px +} + +.section { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + width: 90%; + height: 100vh; + padding: 0 5% 0 5%; + background: radial-gradient(circle at center left, var(--main-color-five), var(--background-color-dark)); +} + +.part { + width: 50%; + min-width: 40%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 0 5% 0 5%; + text-align: center; +} + +.long_part { + width: 75%; +} + +.part h1 { + font-size: 3rem; + text-align: left; + color: var(--white-accent-light); +} + +.part h2 { + font-size: 1.5rem; + text-align: left; + width: 100%; + color: var(--white-accent-light); +} + +.part p { + color: var(--white-accent-mid); + font-size: 1.2rem; +} + +.part a { + padding: 20px 100px 20px 100px; + border-radius: 50px; + border: 1px solid var(--main-color-three); + text-decoration: none; + color: var(--main-color-three); + margin-top: 20px; + font-weight: 600; + letter-spacing: 5px; + text-wrap: nowrap; + transition: color 250ms ease, background-color 250ms ease; +} + +.part .filled { + border: 1px solid var(--main-color-three); + color: var(--background-color-dark); + background-color: var(--main-color-three); +} + +.part .filled:hover { + background-color: transparent; + color: var(--main-color-three); +} + +.part .short { + padding: 20px 50px 20px 50px; +} + +.part a:hover { + background-color: var(--main-color-three); + color: var(--background-color-dark); +} + +.text_left { + text-align: left; +} + +.svg { + width: 100%; + height: 100%; + overflow: hidden; +} + +#top_bar_open_menu_button { + position: absolute; + top: 15px; + right: 25px; + width: 20px; + height: 20px; + font-size: 1.2rem; + background-color: transparent; + border: none; + color: var(--white-accent-light); + display: none; +} + +.code-container { + border-radius: 10px; + text-align: left; + padding: 1px 16px 1px 16px; + text-wrap: wrap; + overflow-x: auto; + overflow-y: hidden; + backdrop-filter: brightness(150%); +} + +.code { + font-family: 'Courier New', Courier, monospace; + color: var(--main-color-one); + white-space: pre; +} + +.xml-tag { + color: var(--main-color-three); +} + +.java-keyword { + color: var(--main-color-three); +} + +.java-variable { + color: var(--white-accent-mid); +} + +@media only screen and (max-width: 970px) { + .section { + flex-direction: column; + width: 90%; + height: auto; + padding: 0 5% 10% 5%; + overflow: hidden; + } + + .part { + width: 100%; + height: auto; + padding: 0 5% 0 5%; + margin-bottom: 50px; + } + + .part h1 { + font-size: 2rem; + font-weight: 600; + text-align: left; + margin-top: 60px; + } + + .part p { + font-size: 1rem; + text-align: left; + } + + .part a { + padding: 10px 50px 10px 50px; + font-size: 0.8rem; + } + + .part .short { + padding: 10px 20px 10px 20px; + } + + .slide p { + text-align: center; + } + + .slide h2 { + font-size: 1.2rem; + } + + .top_bar { + flex-direction: column; + align-items: center; + max-height: 60px; + overflow: hidden; + transition: max-height 250ms ease; + } + + .open { + max-height: 100%; + } + + .top_bar a { + margin: 20px; + } + + #top_bar_open_menu_button { + display: block; + } +} \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index fb7e435..9ec526a 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,11 +1,90 @@ + - - - Document + + + + + + + + + + + + + + + + + Interactive Image Panel + - Welcome to Interactive Image Panel website. + +
+ +
+
+

Easy to Use Interactive Image Panel for Java Swing

+

InteractiveImagePanel is a Java library that provides an interactive image panel that can be zoomed + and moved. The image can be zoomed in and out with the mouse wheel, and moved by clicking and + dragging.

+
+ Use it Now + Learn More +
+
+
+ +
+
+ +
+
+

Very Easy to Implement

+

Add the Maven dependency into your pom.xml and integrate the provided code snippet for smooth implementation. And that's it!

+ +

Add this to your pom.xml

+
+

And this is the Java code

+
+
+ +
+ +
+
+

Dive into the Code and Contribute

+

Excited to explore the inner workings of the Interactive Image Panel? You're in luck! I believe + in transparent collaboration and empowered communities, so i've made the entire source code openly + available on GitHub. Dive deep, tinker and contribute! +

+ EXPLORE IT ON GITHUB +
+
+ +
+
+
+ + + \ No newline at end of file diff --git a/docs/index.js b/docs/index.js new file mode 100644 index 0000000..ce615a5 --- /dev/null +++ b/docs/index.js @@ -0,0 +1,87 @@ +// ******************** Declare Variables ******************** +var dependency = ` + io.github.iso53 + interactive-image-panel + 1.0-SNAPSHOT +`; + +var javaCode = `InteractiveImagePanel interactiveImagePanel = new InteractiveImagePanel(); +interactiveImagePanel.setImage(image); +interactiveImagePanel.setScalingAlgorithm(8); +interactiveImagePanel.addZoomCapability(); +interactiveImagePanel.addMoveCapability();`; + +// ************************ JS Starts ************************ +topNavbarListener(); +formatAndAddXML(dependency); +formatAndAddJava(javaCode); + +// ******************** Declare Functions ******************** +function topNavbarListener() { + // When scrolling darken the background of top bar + const navbar = document.getElementById("top_bar"); + window.onscroll = function () { + if (document.body.scrollTop > 0 || document.documentElement.scrollTop > 0) { + navbar.classList.add("darken"); + } else { + navbar.classList.remove("darken"); + } + }; + + // On mobile devices widen-up the top bar on the click of the button + const menuButton = document.getElementById("top_bar_open_menu_button"); + menuButton.onclick = function () { + navbar.classList.toggle("open"); + }; + + // On mobile devices close/narrow the top bar when clicking one of the links (href) + navbar.onclick = function (event) { + if (event.target.tagName.toLowerCase() === "a") { + navbar.classList.remove("open"); + } + }; + + // On mobile devices if the clicked location outside of topbar, close/narrow the top bar + window.onclick = function (event) { + if (!event.target.closest("#top_bar")) { + navbar.classList.remove("open"); + } + }; +} + +function formatAndAddXML(xmlContent) { + var formattedXML = xmlContent.replace(/<([^>]+)>/g, '<$1>'); + + var codeContainer = document.createElement("div"); + codeContainer.classList.add("code-container"); + + var codeElement = document.createElement("pre"); + codeElement.classList.add("code"); + codeElement.innerHTML = formattedXML; + + codeContainer.appendChild(codeElement); + + document.getElementById("dependency").appendChild(codeContainer); +} + +function formatAndAddJava(javaCode) { + // Define Java keywords + var javaKeywords = ["InteractiveImagePanel", "new", "setImage", "setScalingAlgorithm", "addZoomCapability", "addMoveCapability"]; + + // Create a regular expression pattern to match Java keywords + var pattern = new RegExp("\\b(" + javaKeywords.join("|") + ")\\b", "g"); + + // Replace Java keywords with styled span elements + var formattedJava = javaCode.replace(pattern, '$1'); + + var codeContainer = document.createElement("div"); + codeContainer.classList.add("code-container"); + + var codeElement = document.createElement("pre"); + codeElement.classList.add("code"); + codeElement.innerHTML = formattedJava; + + codeContainer.appendChild(codeElement); + + document.getElementById("java_code").appendChild(codeContainer); +} diff --git a/docs/res/coding.svg b/docs/res/coding.svg new file mode 100644 index 0000000..108f72b --- /dev/null +++ b/docs/res/coding.svg @@ -0,0 +1,461 @@ + + + + diff --git a/docs/res/example_video.mp4 b/docs/res/example_video.mp4 new file mode 100644 index 0000000..cb025bf Binary files /dev/null and b/docs/res/example_video.mp4 differ