diff --git a/src/components/ModForm.tsx b/src/components/ModForm.tsx new file mode 100644 index 0000000..b9649ba --- /dev/null +++ b/src/components/ModForm.tsx @@ -0,0 +1,284 @@ +import '../styles/styles.css' + +export const ModForm = () => { + return ( + <> + + + + + + + + + +
+
+ + +
+

+ You can upload your game mod to Github, as an example, and keep + updating it there. Also, its advisable that you hash your package as + well with your nostr public key. +

+ + + +
+ + ) +} + +interface InputFieldProps { + label: string + description?: string + type?: 'text' | 'textarea' + placeholder: string + name: string + inputMode?: 'url' +} + +const InputField = ({ + label, + description, + type = 'text', + placeholder, + name, + inputMode +}: InputFieldProps) => ( +
+ + {description &&

{description}

} + {type === 'textarea' ? ( + + ) : ( + + )} +
+) + +interface CheckboxFieldProps { + label: string + name: string +} + +const CheckboxField = ({ label, name }: CheckboxFieldProps) => ( +
+ + +
+) + +interface ImageUploadFieldProps { + label: string + description: string +} + +const ImageUploadField = ({ label, description }: ImageUploadFieldProps) => ( +
+ + {description &&

{description}

} +
+ + +
+
+) + +const DownloadUrlFields = () => { + return ( +
+
+ + +
+
+
+ + + +
+ +
+
+
+
+ + + +
+ +
+
+
+
+ + + +
+ +
+
+
+
+ + + +
+ +
+
+
+
+ + + +
+ +
+
+
+ ) +} diff --git a/src/layout/header.tsx b/src/layout/header.tsx index cc2ccb3..739d9b9 100644 --- a/src/layout/header.tsx +++ b/src/layout/header.tsx @@ -40,9 +40,9 @@ export const Header = () => { Tip - { Submit Mod - + { + return ( +
+
+
+
+
+
+

Submit a mod

+
+
+ +
+ +
+
+
+ +
+
+
+
+ ) +} + +interface Author { + name: string + handle: string + address: string + bio: string +} + +const author: Author = { + name: 'Freakoverse', + handle: 'freakoverse@degmods.com', + address: 'npub18n4ysp43ux5c98fs6h9c57qpr4p8r3j8f6e32v0vj8egzy878aqqyzzk9r', + bio: `I guess I'm one of those #vtubers . Having fun talking about general topics, vrchat/similar, and games. Also #indiedev #gamedev You can call me: Freak فْرِيكٌ ���リク (still learning Nihongo). #envtuber #podcast #gaming #gamedev` +} + +interface Post { + name: string + link: string + content: string + imageUrl?: string +} + +const posts: Post[] = [ + { + name: 'Freakoverse', + link: `feed-note.html`, + content: ` So I know HTML/CSS pretty well and I'm confident with + them.\n\n\n\nI also know UI and UX, as + well as graphic design (nowhere near pros, but I'm the + guy they call when the pro isn't around or when + something is needed quickly).\n\n\n\nI + don't know much java. Usually, I'd search for what I + want, find something close, and fiddle with it until + it works/gets the desired result ish. AI is helping + with this a lot actually.\n\n\n\nThis + helped me create my own sites and my own designs to + life, though just at a static level. I always wanted + to make dynamic sites, but the idea of doing backend + stuff is complex to me. However...\n\n\n\n"Let + me look into it again" and thought if I could make a + simple blog. Digging a bit, and watching/skimming + through tutorials, I realized that I think I can.\n\n\n\nNot + sure when I'll start/attempt this, but will journey + into learning the basics of PHP and attempting to make + a blog. I guess I'll learn the basics of PHP, and then + head into Laravel. If I manage to get the hang of it, + I'll attempt to make a complex old project I had, and + if I do manage to do it, I'll be pretty confident + =3\n\n\n\nAside from that, would be + nice to make a website, a personal blog, that shows my + long-form articles only. Hopefully by then things + would be more stable nostr-wise, cleaner, and easier + in terms of learning, so I'd be able to do it (or + collab with someone to do it / to make a template for + all to have and deploy easily).\n\n\n\n` + }, + { + name: 'Freakoverse', + link: 'https://primal.net/e/note1j7zmj4g6grc39zq30xq2de95dfszjpwlqvsktv65h7kuzjzsytjqgx73c7', + content: `Happy to see some gamedevs port their games from Unity to Godot, after that Unity fiasco, like this one here called Road To Vostok` + }, + { + name: 'Freakoverse', + link: `feed-note.html`, + content: `This is good.`, + imageUrl: 'assets/img/media-cache%20(1).jpg' + } +] + +interface Props { + author: Author + posts: Post[] +} + +const ProfileComponent = ({ author, posts }: Props) => { + return ( +
+
+
+
+
+ +
+
+
+
+
+
+
+
+

+ {author.name} +

+

+ {author.handle} +

+
+
+
+ +
+
+

+ {author.address} +

+
+
+
+ + + +
+
+ + + +
+ + + + + +
+
+
+
+

{author.bio}

+
+
+
+ +
+
+ +
+ ) +} diff --git a/src/routes/index.tsx b/src/routes/index.tsx index c368ae7..c5e3d87 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -3,6 +3,7 @@ import { BlogsPage } from '../pages/blogs' import { GamesPage } from '../pages/games' import { HomePage } from '../pages/home' import { ModsPage } from '../pages/mods' +import { SubmitModPage } from '../pages/submitMod' export const appRoutes = { index: '/', @@ -10,7 +11,8 @@ export const appRoutes = { games: '/games', mods: '/mods', about: '/about', - blog: '/blog' + blog: '/blog', + submitMod: '/submit-mod' } export const routes = [ @@ -37,5 +39,9 @@ export const routes = [ { path: appRoutes.blog, element: + }, + { + path: appRoutes.submitMod, + element: } ] diff --git a/src/styles/author.css b/src/styles/author.css new file mode 100644 index 0000000..78a2865 --- /dev/null +++ b/src/styles/author.css @@ -0,0 +1,267 @@ +.IBMSMSMSSS_Author { + padding: 10px; + display: grid; + grid-template-columns: 1fr; + grid-gap: 10px; + border: solid 1px rgba(255,255,255,0.1); + border-radius: 15px; +} + +.IBMSMSMSSS_Author_Top { + display: grid; + grid-template-columns: 1fr; + grid-gap: 15px; + justify-content: start; + align-items: start; +} + +@media (max-width: 576px) { + .IBMSMSMSSS_Author_Top { + display: grid; + grid-template-columns: 1fr; + grid-gap: 15px; + justify-content: start; + align-items: start; + } +} + +.IBMSMSMSSS_Author_Top_PP { + border-radius: 10px; + height: 75px; + width: 75px; +} + +.IBMSMSMSSS_Author_Top_Details { + display: grid; + grid-template-columns: 1fr; + grid-gap: 15px; +} + +.HBSS_Author_Top_NostrLinks { + display: flex; + flex-direction: row; + grid-gap: 10px; +} + +.IBMSMSMSSS_Author_Top_AddressWrapper { + display: grid; + grid-template-columns: 1.75fr 0.75fr; + grid-gap: 0; + color: rgba(255,255,255,0.5); + border-radius: 7px; + overflow: hidden; + background: rgba(255,255,255,0.05); + box-shadow: 0 0 8px 0 rgb(0,0,0,0.1); + width: 100%; +} + +.IBMSMSMSSS_Author_Top_Icon { +} + +.IBMSMSMSSS_Author_Top_Address { + width: 100%; + overflow: hidden; + text-overflow: ellipsis; +} + +.IBMSMSMSSS_Author_Top_Bio { + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; + -webkit-line-clamp: 3; + font-size: 14px; + line-height: 1.5; + color: rgba(255,255,255,0.25); +} + +.IBMSMSMSSS_Author_Top_NostrLinksLink { + transition: ease 0.4s; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + color: rgba(255,255,255,0.25); + text-decoration: unset; + padding: 15px 15px; + background: rgba(38,38,38,0); + border-radius: 10px; + border: solid 1px rgba(255,255,255,0); + cursor: pointer; + position: relative; + grid-gap: 10px; + line-height: 1; +} + +.IBMSMSMSSS_Author_Top_NostrLinksLink:hover { + transition: ease 0.4s; + color: rgba(255,255,255,0.75); + box-shadow: 0 0 8px 0 rgb(0,0,0,0.1); + border: solid 1px rgba(255,255,255,0); + transform: scale(1.03); +} + +.IBMSMSMSSS_Author_Top_NostrLinksLink:active { + transition: ease 0.1s; + transform: scale(0.98); +} + +.IBMSMSMSSS_Author_Top_NostrLinksLink::before { + transition: ease 0.4s; + opacity: 0; + content: ''; + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + background: linear-gradient(to top right, #262626, #292929, #262626); + z-index: -1; + border-radius: 10px; +} + +.IBMSMSMSSS_Author_Top_NostrLinksLink:hover::before { + transition: ease 0.4s; + opacity: 1; +} + +.IBMSMSMSSS_Author_Top_Left { + height: 100%; + display: flex; + flex-direction: column; + grid-gap: 15px; + align-items: start; +} + +@media (max-width: 576px) { + .IBMSMSMSSS_Author_Top_Left { + height: 100%; + display: flex; + flex-direction: column; + grid-gap: 25px; + align-items: center; + } +} + +.IBMSMSMSSS_Author_Top_Name { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: rgba(255,255,255,0.75); +} + +.IBMSMSMSSS_Author_Top_PPWrapper { + background: linear-gradient(to bottom right, #4b4b4b 00%, rgba(35,35,35,0) 50%, #4b4b4b 150%); + /*padding: 2px;*/ + border-radius: 12px; + box-shadow: 0 0 8px 0 rgb(0,0,0,0.1); +} + +.IBMSMSMSSS_Author_Top_Handle { +} + +.IBMSMSMSSS_Author_Top_NostrLinksLink.IBMSMSMSSS_A_T_NLL_IBMSMSMSSSFollow { + width: 100%; + font-weight: bold; + border: solid 1px rgba(255,255,255,0.1); +} + +.IBMSMSMSSS_Author_Top_Left_Inside { + display: flex; + flex-direction: row; + grid-gap: 15px; + width: 100%; +} + +.IBMSMSMSSS_Author_Top_Left_InsideLinkWrapper { + transition: ease 0.4s; + color: unset; + text-decoration: unset; + padding: 5px; + border-radius: 10px; + width: 100%; +} + +.IBMSMSMSSS_Author_Top_Left_InsideLinkWrapper:hover { + transition: ease 0.4s; + color: unset; + text-decoration: unset; + cursor: pointer; + transform: scale(1.02); + background: rgba(255,255,255,0.05); +} + +.IBMSMSMSSS_Author_Top_Left_InsidePic { +} + +.IBMSMSMSSS_Author_Top_Left_InsideDetails { + width: 100%; + display: flex; + flex-direction: column; + grid-gap: 5px; + justify-content: end; +} + +.IBMSMSMSSS_Author_Top_AddressWrapped { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + display: flex; + flex-direction: column; + justify-content: center; + padding: 5px 10px; +} + +.IBMSMSMSSS_Author_Top_IconWrapper { + width: 100%; + display: flex; + flex-direction: row; + grid-gap: 0px; + background: rgba(255,255,255,0.05); +} + +.IBMSMSMSSS_Author_TopWrapper { + width: 100%; + display: flex; + flex-direction: column; +} + +.IBMSMSMSSS_Author_Top_IconWrapped { + transition: ease 0.4s; + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + font-size: 14px; + padding: 10px 15px; + color: rgba(255,255,255,0.25); + cursor: pointer; + transform: scale(1); +} + +.IBMSMSMSSS_Author_Top_IconWrappedQR { +} + +.IBMSMSMSSS_Author_Top_IconWrapped > .IBMSMSMSSS_Author_Top_Icon { + transition: ease 0.4s; + transform: scale(1); +} + +.IBMSMSMSSS_Author_Top_IconWrapped:hover > .IBMSMSMSSS_Author_Top_Icon { + transition: ease 0.4s; + color: rgba(255,255,255,0.5); + transform: scale(1.08); +} + +.IBMSMSMSSS_Author_Top_IconWrapped:active > .IBMSMSMSSS_Author_Top_Icon { + transition: ease 0.1s; + color: rgba(255,255,255,0.5); + transform: scale(0.98); +} + +.IBMSMSMSSS_Author_Top_Banner { + width: 100%; + padding-top: 20%; + border-radius: 10px; +} + diff --git a/src/styles/innerPage.css b/src/styles/innerPage.css new file mode 100644 index 0000000..c76a6f8 --- /dev/null +++ b/src/styles/innerPage.css @@ -0,0 +1,131 @@ +.IBMSMSplitMain { + display: grid; + grid-template-columns: 1.5fr 0.5fr; + grid-gap: 25px; +} + +@media (max-width: 992px) { + .IBMSMSplitMain { + display: flex; + flex-direction: column; + } +} + +.IBMSMSplitMain.IBMSMSplitMainThree { + grid-template-columns: 0.75fr 1.5fr 0.75fr; + grid-gap: 25px; +} + +.IBMSMSplitMainBigSide { + display: flex; + flex-direction: column; + grid-gap: 25px; +} + +.IBMSMSplitMainSmallSide { + display: flex; + flex-direction: column; + grid-gap: 25px; +} + +.IBMSMSplitMainBigSideSec { + display: flex; + flex-direction: column; + grid-gap: 25px; +} + +.IBMSMSplitMainSmallSideSec { + display: flex; + flex-direction: column; + grid-gap: 15px; +} + +.IBMSMSplitMainFullSide { + grid-column-start: 1; + grid-column-end: 3; + display: flex; + flex-direction: column; + grid-gap: 25px; +} + +.IBMSMSplitMainFullSideSec { + display: flex; + flex-direction: column; + grid-gap: 15px; +} + +.IBMSMSplitMainFullSideSec.IBMSMSMFSSNav { + display: flex; + flex-direction: row; + grid-gap: 15px; + background: #1c1c1c; + border-radius: 10px; + padding: 10px; + border: solid 1px rgba(255,255,255,0.05); + box-shadow: inset 0 0 8px 0 rgb(0,0,0,0.1); +} + +.btnMain.IBMSMSMFSSNavBtn { + flex-grow: 1; + background: unset; + color: rgba(255,255,255,0.25); +} + +.btnMain.IBMSMSMFSSNavBtn::before { + transition: ease 0.4s; + opacity: 0; + content: ''; + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + background: linear-gradient(rgba(255,255,255,0.01), rgba(255,255,255,0.01)), linear-gradient(to top right, #262626, #292929, #262626); + z-index: -1; + border-radius: 10px; +} + +.btnMain.IBMSMSMFSSNavBtn:hover::before { + transition: ease 0.4s; + opacity: 1; +} + +.btnMain.IBMSMSMFSSNavBtn.IBMSMSMFSSNavBtnActive { + background: linear-gradient(rgba(255,255,255,0.03), rgba(255,255,255,0.03)), linear-gradient(to top right, #262626, #292929, #262626); + /*border: solid 1px rgba(255,255,255,0.05);*/ + color: rgba(255,255,255,0.75); +} + +.IBMSMSplitMainFullSideSec.IBMSMSMFSSContent { + display: flex; +} + +.IBMSMSMFSSContentPosts { + width: 100%; + display: flex; + flex-direction: column; + grid-gap: 25px; +} + +.btnMain.IBMSMSMFSSNavBtn.IBMSMSMFSSNavBtnAlt { + padding: 5px 10px; +} + +.IBMSMSMFSSContentPost { + width: 100%; +} + +.IBMSMSMSSS_Buttons { + padding: 10px; + border-radius: 10px; + border: solid 1px rgba(255,255,255,0.1); + display: flex; + flex-direction: column; + grid-gap: 10px; +} + +.IBMSMSMSSS_Text { + font-size: 28px; + color: rgba(255,255,255,0.75); +} + diff --git a/src/styles/socialPosts.css b/src/styles/socialPosts.css new file mode 100644 index 0000000..4ccf494 --- /dev/null +++ b/src/styles/socialPosts.css @@ -0,0 +1,124 @@ +.IBMSMSMSSS_ShortPosts { + border-radius: 15px; + display: grid; + grid-template-columns: 1fr; + grid-gap: 15px; +} + +@media (max-width: 1200px) { + .IBMSMSMSSS_ShortPosts { + border-radius: 15px; + display: grid; + grid-template-columns: 1fr; + grid-gap: 25px; + padding: 10px; + } +} + +.IBMSMSMSSS_ShortPostsPost { + width: 100%; + display: grid; + grid-template-columns: 1fr; + grid-gap: 10px; +} + +.IBMSMSMSSS_ShortPostsPost_Top { + display: grid; + grid-template-columns: 1.75fr 0.25fr; + grid-gap: 0; +} + +.IBMSMSMSSS_ShortPostsPost_Bottom { + flex-direction: column; + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; + -webkit-line-clamp: 4; + color: rgba(255,255,255,0.5); + font-size: 14px; + line-height: 1.5; + position: relative; +} + +.IBMSMSMSSS_ShortPostsPost_TopName { + display: flex; + flex-direction: column; + justify-content: center; + align-items: start; + font-weight: bold; + color: rgba(255,255,255,0.5); +} + +.IBMSMSMSSS_ShortPostsPost_TopLink { + transition: ease 0.4s; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + color: rgba(255,255,255,0.25); + padding: 7px; + /*background: rgba(255,255,255,0.1);*/ + border-radius: 5px; +} + +.IBMSMSMSSS_ShortPostsPostLink { + transition: ease 0.4s; + text-decoration: unset; + color: unset; + padding: 25px; + border-radius: 15px; + box-shadow: 0 0 8px 0 rgba(0,0,0,0); + transform: scale(1); + background-color: rgba(38,38,38,0); +} + +.IBMSMSMSSS_ShortPostsPostLink:hover { + transition: ease 0.4s; + text-decoration: unset; + color: unset; + padding: 25px; + border-radius: 15px; + box-shadow: 0 0 8px 0 rgb(0,0,0,0.1); + transform: scale(1.03); +} + +.IBMSMSMSSS_ShortPostsPostLink:active { + transition: ease 0.1s; + transform: scale(0.98); +} + +.IBMSMSMSSS_ShortPostsPostLink::before { + transition: ease 0.4s; + background: linear-gradient(to top right, #262626, #292929, #262626); + opacity: 0; + content: ''; + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + z-index: -1; + border-radius: 15px; +} + +.IBMSMSMSSS_ShortPostsPostLink:hover::before { + transition: ease 0.4s; + background: linear-gradient(to top right, #262626, #292929, #262626); + opacity: 1; +} + +.IBMSMSMSSS_ShortPostsPost_TopLinkIcon { + width: 100%; + height: 100%; + max-width: 25px; +} + +.IBMSMSMSSS_ShortPostsPost_BottomImg { + width: 100%; + height: 100px; + border-radius: 10px; + margin: 15px 0 0 0; + box-shadow: 0 0 8px 0 rgb(0,0,0,0.1); + position: relative; +} + diff --git a/src/styles/write.css b/src/styles/write.css new file mode 100644 index 0000000..7ac363d --- /dev/null +++ b/src/styles/write.css @@ -0,0 +1,15 @@ +.IBMSMSMBS_Write { + width: 100%; + display: flex; + flex-direction: column; + grid-gap: 15px; +} + +.IBMSMSMBS_WriteAction { + width: 100%; + display: flex; + flex-direction: row; + justify-content: end; + align-items: center; +} +