Skip to content

Commit

Permalink
created website
Browse files Browse the repository at this point in the history
  • Loading branch information
@ISO53
ISO53 committed Apr 8, 2024
1 parent 33ced64 commit 7839768
Show file tree
Hide file tree
Showing 5 changed files with 922 additions and 4 deletions.
291 changes: 291 additions & 0 deletions docs/index.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}
87 changes: 83 additions & 4 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,90 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Default meta tags -->
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-3K0461TXL0"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());

gtag('config', 'G-3K0461TXL0');
</script>

<!-- Preload resources -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Roboto+Mono:wght@600&display=swap"
rel="stylesheet" />
<link rel="stylesheet" href="index.css" />

<!-- Title -->
<title>Interactive Image Panel</title>
</head>

<body>
Welcome to Interactive Image Panel website.
<nav class="top_bar" id="top_bar">
<a href="https://iso53.github.io/InteractiveImagePanel" id="app_name">Interactive Image Panel</a>
<a href="#introduction">HOME</a>
<a href="#usage">USAGE</a>
<a href="#source">SOURCE</a>
<button id="top_bar_open_menu_button">☰</button>
</nav>
<div class="background">

<section class="section" id="introduction">
<div class="part text_left">
<h1>Easy to Use Interactive Image Panel for Java Swing</h1>
<p>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.</p>
<div
style="display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; width: 100%;">
<a href="#usage" class="filled short">Use it Now</a>
<a href="#source" class="short">Learn More</a>
</div>
</div>
<div class="part">
<video class="video" src="res/example_video.mp4" autoplay muted loop></video>
</div>
</section>

<section class="section" id="usage">
<div class="part long_part">
<h1>Very Easy to Implement</h1>
<p>Add the Maven dependency into your pom.xml and integrate the provided code snippet for smooth implementation. And that's it!</p>

<h4 style="width: 100%; text-align: left; margin-bottom: 5px;">Add this to your pom.xml</h4>
<div id="dependency" style="width: 100%;"></div>
<h4 style="width: 100%; text-align: left; margin-bottom: 5px;">And this is the Java code</h4>
<div id="java_code" style="width: 100%;"></div>
</div>

</section>

<section class="section" id="source">
<div class="part text_left">
<h1>Dive into the Code and Contribute</h1>
<p>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!
</p>
<a href="https://github.com/ISO53/InteractiveImagePanel">EXPLORE IT ON GITHUB</a>
</div>
<div class="part">
<img class="svg" src="res/coding.svg" alt="">
</div>
</section>
</div>

<script src="index.js"></script>
</body>

</html>
Loading

0 comments on commit 7839768

Please sign in to comment.