diff --git a/components/navbar/navbar.jsx b/components/navbar/navbar.jsx index ab4e314..23b6599 100644 --- a/components/navbar/navbar.jsx +++ b/components/navbar/navbar.jsx @@ -1,11 +1,21 @@ -import "./navbar.module.scss"; +import Image from "next/image"; +import { Navbar, Nav, Container, NavDropdown } from "react-bootstrap"; +import styles from "./navbar.module.scss"; +import ProfileIcon from "../profileicon/profileicon"; export default function NavBar() { return ( - + + + + logo +

Alt-Gen

+ + + + + + + ); } diff --git a/components/navbar/navbar.module.scss b/components/navbar/navbar.module.scss index e69de29..63fc248 100644 --- a/components/navbar/navbar.module.scss +++ b/components/navbar/navbar.module.scss @@ -0,0 +1,26 @@ +.navbar { + background-color: var(--bs-light); + border-bottom: solid 1px var(--bs-gray-200); + + > * { + width: 100%; + max-width: var(--max-width-xl); + display: flex; + flex-direction: row; + justify-content: space-between; + + .navbarbrand { + display: flex; + flex-direction: row; + align-items: center; + gap: 10px; + + img { + height: 100%; + } + } + .rightContent { + display: flex; + } + } +} diff --git a/components/profileicon/profileicon.jsx b/components/profileicon/profileicon.jsx new file mode 100644 index 0000000..22140c8 --- /dev/null +++ b/components/profileicon/profileicon.jsx @@ -0,0 +1,5 @@ +import { Button } from "react-bootstrap"; + +export default function ProfileIcon() { + return ; +} diff --git a/components/profileicon/profileicon.module.scss b/components/profileicon/profileicon.module.scss new file mode 100644 index 0000000..e69de29 diff --git a/pages/index.jsx b/pages/index.jsx index c7acaae..a648477 100644 --- a/pages/index.jsx +++ b/pages/index.jsx @@ -1,12 +1,219 @@ import Head from "next/head"; +import Link from "next/link"; +import { Button, Image } from "react-bootstrap"; +import NavBar from "~/components/navbar/navbar"; + +import styles from "~/styles/index.module.scss"; export default function Home() { return ( -
+ <> Alt-Text | Home -

Alt-Text Home Page

-
+ +
+
+
+
+

Alt-Gen

+

An all-in-one solution for image accessibility in Ebooks.

+
+
+ Alt-Gen Logo +
+
+
+
+

Our Story

+

+ The Free Ebook Foundation envisions a world where Ebooks will be + funded, distributed and maintained for the benefit of all, by + coordinating the efforts and resources of many. +

+

+ Many projects, such as the Gutenberg Project and Unglue.it, have + made great progress in distributing Ebooks. However, many of + these Ebooks lack alternative text (alt-text) for their images, + making them inaccessible to those using screenreaders. +

+

+ There are about 470,000 images without alt-text in the Gutenberg + Project's collection alone. +

+
+
+
+
+
+

The Solution

+

+ Alt-Gen is a software designed to scan through Ebooks and + generate captions for images lacking quality alt-text. +

+

+ We utilize various modern technologies to accomplish this, such + as Image Caption AIs, Optical Character Recognition, and Large + Language Models. +

+
+
+ Robot looking at a tablet with thought bubbles above them. +
+
+
+
+

Ways to use Alt-Gen

+

+ Being open source, there are multiple methods to use Alt-Gen. +

+
+
+
+ PyPi Logo +

The PyPi Package

+

+ The inner workings of Alt-Gen are available via PyPi and + Github. +

+

+ This allows for full customizability and integration into + one's own projects. +

+
+ + +
+
+
+ Django Logo +

Hosting the API

+

+ The code for the logic server and API is available on Github. +

+

+ This allows for anyone to self host their own service to + interact with and integrate with their own projects. +

+
+ +
+
+
+ Alt-Gen Logo +

The Official Service

+

You can also use this website!

+

+ Simply create an account and upload your Ebook. We also + provide an easy to use dashboard to quickly proofread all the + alt-text in the Ebook. +

+

The code for this website is also available on Github.

+
+ + +
+
+
+
+
+
+

The Developers

+

+ Alt-Gen is developed by a group of students from Stevens + Institute of Technology for their senior design project. +

+

+ The project is managed by Eric Hellman from the Free Ebook + Foundation. +

+
+
+ Stevens Institute of Technology and Free Ebook Foundation Logos +
+
+
+
+
+ + +

Eric Hellman

+ +
+
+ + +

Jack Byrne

+ +
+
+ + +

David Cruz

+ +
+
+ + +

Jared Donnelly

+ +
+
+ + +

Ethan Kleschinsky

+ +
+
+ + +

Tyler Lane

+ +
+
+ + +

Carson Lee

+ +
+
+
+
+
+ ); } diff --git a/public/altgenlogo.png b/public/altgenlogo.png new file mode 100644 index 0000000..ce0847c Binary files /dev/null and b/public/altgenlogo.png differ diff --git a/public/django.png b/public/django.png new file mode 100644 index 0000000..d9db5a8 Binary files /dev/null and b/public/django.png differ diff --git a/public/favicon.ico b/public/favicon.ico index aa41f19..fc8a1c6 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/imagecaptioning.jpg b/public/imagecaptioning.jpg new file mode 100644 index 0000000..83d6c4f Binary files /dev/null and b/public/imagecaptioning.jpg differ diff --git a/public/pypi.png b/public/pypi.png new file mode 100644 index 0000000..4817848 Binary files /dev/null and b/public/pypi.png differ diff --git a/public/stevens_free_ebook_foundation.png b/public/stevens_free_ebook_foundation.png new file mode 100644 index 0000000..d5dc69c Binary files /dev/null and b/public/stevens_free_ebook_foundation.png differ diff --git a/styles/custom.scss b/styles/custom.scss new file mode 100644 index 0000000..6618736 --- /dev/null +++ b/styles/custom.scss @@ -0,0 +1,2 @@ +$success: teal; +@import "~bootstrap/scss/bootstrap"; diff --git a/styles/global.scss b/styles/global.scss index e69de29..3f868a0 100644 --- a/styles/global.scss +++ b/styles/global.scss @@ -0,0 +1,4 @@ +@import "./custom.scss"; +:root { + --max-width-xl: 1140px; +} diff --git a/styles/index.module.scss b/styles/index.module.scss new file mode 100644 index 0000000..8ee44c8 --- /dev/null +++ b/styles/index.module.scss @@ -0,0 +1,115 @@ +.pageContent { + max-width: var(--max-width-xl); + margin-left: auto; + margin-right: auto; +} + +.sectionList { + padding-left: 2em; + padding-right: 2em; +} + +.sectionH { + display: flex; + flex-direction: row; + justify-content: space-between; + gap: 20px; + padding-top: 3em; + padding-bottom: 3em; +} + +.sectionV { + display: flex; + flex-direction: column; + padding-top: 3em; + padding-bottom: 3em; + + text-align: center; +} + +.contentBig { + h2 { + font-size: min(10vw, 8em); + } + p { + font-size: min(5vw, 3.5em); + } +} + +.content { + h2 { + font-size: min(6vw, 4em); + } + p { + font-size: min(2vw, 2em); + } +} + +.graphic { + display: flex; + flex-direction: row; + align-items: center; + img { + z-index: -1; + width: min(300px, 30vw); + border-radius: 5px; + } +} + +.rowBoxes { + display: flex; + flex-direction: row; + justify-content: center; + align-items: flex-start; + gap: 20px; + + > div { + max-width: 300px; + background-color: var(--bs-gray-200); + padding: 20px; + border-radius: 5px; + img { + width: 250px; + margin-bottom: 10px; + } + } +} + +.profiles { + display: flex; + flex-direction: row; + justify-content: center; + gap: 15px; + + > div { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 10px; + padding: 5px; + border-radius: 5px; + a { + text-decoration: none; + color: var(--bs-black); + transition: all 200ms; + } + a:hover { + color: var(--bs-gray-600); + img { + box-shadow: 0 0 5px 1px black; + } + } + img { + border: solid 2px #a32638; + width: 128px; + aspect-ratio: 1 / 1; + border-radius: 50%; + transition: all 200ms; + } + p { + text-decoration: none; + margin: 0px; + } + } +}