From c9a0d97f78be18e505a595e3780c9b87201bbfb6 Mon Sep 17 00:00:00 2001 From: nsde Date: Fri, 8 Sep 2023 22:13:34 +0200 Subject: [PATCH] Homepage improvements --- screen.sh | 1 + web/static/css/home.css | 38 +++++++++++++-- web/static/css/home.css.map | 2 +- web/static/css/home.sass | 39 ++++++++++++++-- web/templates/index.html | 92 ++++++++++++++++++++++++------------- 5 files changed, 129 insertions(+), 43 deletions(-) diff --git a/screen.sh b/screen.sh index e6452e0..6a7b299 100755 --- a/screen.sh +++ b/screen.sh @@ -1 +1,2 @@ +fuser -k 2323/tcp screen -S nova-web python web #uvicorn app:production --host 0.0.0.0 --port 2323 --access-log --use-colors --no-server-header --limit-max-requests 666 \ No newline at end of file diff --git a/web/static/css/home.css b/web/static/css/home.css index fa5164c..a1f2239 100644 --- a/web/static/css/home.css +++ b/web/static/css/home.css @@ -3,21 +3,47 @@ header { max-width: 800px; margin: 0 auto; font-size: 40px; + margin-bottom: 15rem; } header h1 { line-height: 4rem; } -div.user-quotes { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - grid-gap: 2rem; +div.featured-box { + background: rgba(247, 154, 182, 0.1411764706); + border: 2px solid rgba(244, 90, 136, 0.3803921569); + border-radius: 5px; + padding: 2rem; + margin-block: 2rem; + display: flex; + vertical-align: middle; } +div.featured-box:hover { + scale: 1.05; + filter: brightness(1.1) saturate(1.1); + box-shadow: 0 0 30px rgba(244, 90, 136, 0.3803921569); +} +div.featured-box img { + height: 100px; + -o-object-fit: cover; + object-fit: cover; +} +div.featured-box h2 { + vertical-align: middle; + margin-left: 1rem; + font-size: 2rem; + margin-block: 0; +} +div.featured-box h2 span { + color: #f45a88; +} + div.user-quotes div.user-quote__field { + margin-block: 2rem; padding-inline: 2rem; padding-block: 2rem; background: rgba(247, 154, 182, 0.1411764706); - border: 1px solid rgba(244, 90, 136, 0.3803921569); + border: 2px solid rgba(244, 90, 136, 0.3803921569); border-radius: 5px; position: relative; transition: all 200ms; @@ -48,6 +74,8 @@ div.user-quotes div.user-quote__field img { position: absolute; top: 1rem; right: 1rem; + -o-object-fit: scale-down; + object-fit: scale-down; } div.user-quotes div.user-quote__field span.user-quote__username { font-size: 1rem; diff --git a/web/static/css/home.css.map b/web/static/css/home.css.map index 473d76e..cef3d08 100644 --- a/web/static/css/home.css.map +++ b/web/static/css/home.css.map @@ -1 +1 @@ -{"version":3,"sources":["home.css","home.sass","_vars.sass"],"names":[],"mappings":"AAAA,gBAAgB;ACEhB;EACI,gBCeS;EDdT,cAAA;EACA,eAAA;ADAJ;ACEI;EACI,iBAAA;ADAR;;ACEA;EACI,aAAA;EACA,2DAAA;EACA,cAAA;ADCJ;ACCI;EACI,oBAAA;EACA,mBAAA;EACA,6CCTO;EDUP,kDAAA;EACA,kBCJD;EDKC,kBAAA;EACA,qBAAA;EACA,gCAAA;EACA,iBAAA;ADCR;ACCQ;EACI,WAAA;EACA,qCAAA;EACA,qDAAA;ADCZ;ACCQ;EACI,4CAAA;EACA,YAAA;EACA,gBAAA;EACA,wCC1BG;ED2BH,kBAAA;EACA,aAAA;EACA,UAAA;EAGA,yBAAA;ADDZ;ACGQ;EACI,eAAA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;EACA,kDAAA;EACA,kBAAA;EACA,SAAA;EACA,WAAA;ADDZ;ACGQ;EACI,eAAA;EACA,gBAAA;EACA,cClDF;AFiDV;ACGQ;EACI,eAAA;EACA,iBAAA;EACA,mBAAA;ADDZ;;ACGA;EACI;IACI,eAAA;EDAN;ECEM;IACI,iBAAA;EDAV;ECEM;IACI,eAAA;EDAV;AACF","file":"home.css","sourcesContent":["@charset \"UTF-8\";\nheader {\n max-width: 800px;\n margin: 0 auto;\n font-size: 40px;\n}\nheader h1 {\n line-height: 4rem;\n}\n\ndiv.user-quotes {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n grid-gap: 2rem;\n}\ndiv.user-quotes div.user-quote__field {\n padding-inline: 2rem;\n padding-block: 2rem;\n background: rgba(247, 154, 182, 0.1411764706);\n border: 1px solid rgba(244, 90, 136, 0.3803921569);\n border-radius: 5px;\n position: relative;\n transition: all 200ms;\n box-shadow: 0 0 30px transparent;\n min-height: 200px;\n}\ndiv.user-quotes div.user-quote__field:hover {\n scale: 1.05;\n filter: brightness(1.1) saturate(1.1);\n box-shadow: 0 0 30px rgba(244, 90, 136, 0.3803921569);\n}\ndiv.user-quotes div.user-quote__field::before {\n font-family: \"Times New Roman\", Times, serif;\n content: \"“\";\n font-size: 150px;\n color: rgba(247, 154, 182, 0.1411764706);\n position: absolute;\n bottom: -1rem;\n left: 1rem;\n transform: rotate(180deg);\n}\ndiv.user-quotes div.user-quote__field img {\n cursor: pointer;\n width: 100px;\n height: 100px;\n border-radius: 50%;\n border: 3px solid rgba(244, 90, 136, 0.3803921569);\n position: absolute;\n top: 1rem;\n right: 1rem;\n}\ndiv.user-quotes div.user-quote__field span.user-quote__username {\n font-size: 1rem;\n font-weight: 600;\n color: #b53d61;\n}\ndiv.user-quotes div.user-quote__field p {\n margin-block: 0;\n font-size: 1.5rem;\n padding-right: 7rem;\n}\n\n@media (max-width: 800px) {\n header {\n font-size: 26px;\n }\n header h1 {\n line-height: 3rem;\n }\n header h3 {\n font-size: 28px;\n }\n}","@import '_vars'\n\nheader\n max-width: $main-width\n margin: 0 auto\n font-size: 40px\n\n h1\n line-height: 4rem\n\ndiv.user-quotes\n display: grid\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))\n grid-gap: 2rem\n\n div.user-quote__field\n padding-inline: 2rem\n padding-block: 2rem\n background: $primary-soft\n border: 1px solid $primary-glow\n border-radius: $edge\n position: relative\n transition: all 200ms\n box-shadow: 0 0 30px transparent\n min-height: 200px\n\n &:hover\n scale: 1.05\n filter: brightness(1.1) saturate(1.1)\n box-shadow: 0 0 30px $primary-glow\n\n &::before\n font-family: 'Times New Roman', Times, serif\n content: '\\201c'\n font-size: 150px\n color: $primary-soft\n position: absolute\n bottom: -1rem\n left: 1rem\n \n // show at the bottom left\n transform: rotate(180deg)\n\n img\n cursor: pointer\n width: 100px\n height: 100px\n border-radius: 50%\n border: 3px solid $primary-glow\n position: absolute\n top: 1rem\n right: 1rem\n\n span.user-quote__username\n font-size: 1rem\n font-weight: 600\n color: $primary\n\n p\n margin-block: 0\n font-size: 1.5rem\n padding-right: 7rem\n\n@media (max-width: 800px)\n header\n font-size: 26px\n \n h1\n line-height: 3rem\n\n h3\n font-size: 28px\n","$text: #f3f3f3\n$background: #03060d\n$secondary: #252a38\n$secondary-dark: #0e0e0e\n$border: #161d2bb0\n\n$primary: #b53d61\n$primary-light: #f45a88\n$primary-glow: #f45a8861\n$primary-soft: #f79ab624\n$accent: #28aaf0\n\n$error: #ef3628\n$warn: #f09928\n$success: #28ef6b\n\n$edge: 5px\n\n$main-width: 800px\n$more-width: 1000px\n"]} \ No newline at end of file +{"version":3,"sources":["home.css","home.sass","_vars.sass"],"names":[],"mappings":"AAAA,gBAAgB;ACEhB;EACI,gBCeS;EDdT,cAAA;EACA,eAAA;EACA,oBAAA;ADAJ;ACEI;EACI,iBAAA;ADAR;;ACEA;EACI,6CCHW;EDIX,kDAAA;EACA,kBCEG;EDDH,aAAA;EACA,kBAAA;EACA,aAAA;EACA,sBAAA;ADCJ;ACEI;EACI,WAAA;EACA,qCAAA;EACA,qDAAA;ADAR;ACEI;EACI,aAAA;EACA,oBAAA;KAAA,iBAAA;ADAR;ACEI;EACI,sBAAA;EACA,iBAAA;EACA,eAAA;EACA,eAAA;ADAR;ACEQ;EACI,cC9BI;AF8BhB;;ACOI;EACI,kBAAA;EACA,oBAAA;EACA,mBAAA;EACA,6CCvCO;EDwCP,kDAAA;EACA,kBClCD;EDmCC,kBAAA;EACA,qBAAA;EACA,gCAAA;EACA,iBAAA;ADJR;ACMQ;EACI,WAAA;EACA,qCAAA;EACA,qDAAA;ADJZ;ACMQ;EACI,4CAAA;EACA,YAAA;EACA,gBAAA;EACA,wCCxDG;EDyDH,kBAAA;EACA,aAAA;EACA,UAAA;EAGA,yBAAA;ADNZ;ACQQ;EACI,eAAA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;EACA,kDAAA;EACA,kBAAA;EACA,SAAA;EACA,WAAA;EACA,yBAAA;KAAA,sBAAA;ADNZ;ACQQ;EACI,eAAA;EACA,gBAAA;EACA,cCjFF;AF2EV;ACQQ;EACI,eAAA;EACA,iBAAA;EACA,mBAAA;ADNZ;;ACQA;EACI;IACI,eAAA;EDLN;ECOM;IACI,iBAAA;EDLV;ECOM;IACI,eAAA;EDLV;AACF","file":"home.css","sourcesContent":["@charset \"UTF-8\";\nheader {\n max-width: 800px;\n margin: 0 auto;\n font-size: 40px;\n margin-bottom: 15rem;\n}\nheader h1 {\n line-height: 4rem;\n}\n\ndiv.featured-box {\n background: rgba(247, 154, 182, 0.1411764706);\n border: 2px solid rgba(244, 90, 136, 0.3803921569);\n border-radius: 5px;\n padding: 2rem;\n margin-block: 2rem;\n display: flex;\n vertical-align: middle;\n}\ndiv.featured-box:hover {\n scale: 1.05;\n filter: brightness(1.1) saturate(1.1);\n box-shadow: 0 0 30px rgba(244, 90, 136, 0.3803921569);\n}\ndiv.featured-box img {\n height: 100px;\n object-fit: cover;\n}\ndiv.featured-box h2 {\n vertical-align: middle;\n margin-left: 1rem;\n font-size: 2rem;\n margin-block: 0;\n}\ndiv.featured-box h2 span {\n color: #f45a88;\n}\n\ndiv.user-quotes div.user-quote__field {\n margin-block: 2rem;\n padding-inline: 2rem;\n padding-block: 2rem;\n background: rgba(247, 154, 182, 0.1411764706);\n border: 2px solid rgba(244, 90, 136, 0.3803921569);\n border-radius: 5px;\n position: relative;\n transition: all 200ms;\n box-shadow: 0 0 30px transparent;\n min-height: 200px;\n}\ndiv.user-quotes div.user-quote__field:hover {\n scale: 1.05;\n filter: brightness(1.1) saturate(1.1);\n box-shadow: 0 0 30px rgba(244, 90, 136, 0.3803921569);\n}\ndiv.user-quotes div.user-quote__field::before {\n font-family: \"Times New Roman\", Times, serif;\n content: \"“\";\n font-size: 150px;\n color: rgba(247, 154, 182, 0.1411764706);\n position: absolute;\n bottom: -1rem;\n left: 1rem;\n transform: rotate(180deg);\n}\ndiv.user-quotes div.user-quote__field img {\n cursor: pointer;\n width: 100px;\n height: 100px;\n border-radius: 50%;\n border: 3px solid rgba(244, 90, 136, 0.3803921569);\n position: absolute;\n top: 1rem;\n right: 1rem;\n object-fit: scale-down;\n}\ndiv.user-quotes div.user-quote__field span.user-quote__username {\n font-size: 1rem;\n font-weight: 600;\n color: #b53d61;\n}\ndiv.user-quotes div.user-quote__field p {\n margin-block: 0;\n font-size: 1.5rem;\n padding-right: 7rem;\n}\n\n@media (max-width: 800px) {\n header {\n font-size: 26px;\n }\n header h1 {\n line-height: 3rem;\n }\n header h3 {\n font-size: 28px;\n }\n}","@import '_vars'\n\nheader\n max-width: $main-width\n margin: 0 auto\n font-size: 40px\n margin-bottom: 15rem\n\n h1\n line-height: 4rem\n\ndiv.featured-box\n background: $primary-soft\n border: 2px solid $primary-glow\n border-radius: $edge\n padding: 2rem\n margin-block: 2rem\n display: flex\n vertical-align: middle\n\n\n &:hover\n scale: 1.05\n filter: brightness(1.1) saturate(1.1)\n box-shadow: 0 0 30px $primary-glow\n\n img\n height: 100px\n object-fit: cover\n\n h2\n vertical-align: middle\n margin-left: 1rem\n font-size: 2rem\n margin-block: 0\n\n span\n color: $primary-light\n\ndiv.user-quotes\n // display: grid\n // grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))\n // grid-gap: 2rem\n\n div.user-quote__field\n margin-block: 2rem\n padding-inline: 2rem\n padding-block: 2rem\n background: $primary-soft\n border: 2px solid $primary-glow\n border-radius: $edge\n position: relative\n transition: all 200ms\n box-shadow: 0 0 30px transparent\n min-height: 200px\n\n &:hover\n scale: 1.05\n filter: brightness(1.1) saturate(1.1)\n box-shadow: 0 0 30px $primary-glow\n\n &::before\n font-family: 'Times New Roman', Times, serif\n content: '\\201c'\n font-size: 150px\n color: $primary-soft\n position: absolute\n bottom: -1rem\n left: 1rem\n \n // show at the bottom left\n transform: rotate(180deg)\n\n img\n cursor: pointer\n width: 100px\n height: 100px\n border-radius: 50%\n border: 3px solid $primary-glow\n position: absolute\n top: 1rem\n right: 1rem\n object-fit: scale-down\n\n span.user-quote__username\n font-size: 1rem\n font-weight: 600\n color: $primary\n\n p\n margin-block: 0\n font-size: 1.5rem\n padding-right: 7rem\n\n@media (max-width: 800px)\n header\n font-size: 26px\n \n h1\n line-height: 3rem\n\n h3\n font-size: 28px\n","$text: #f3f3f3\n$background: #03060d\n$secondary: #252a38\n$secondary-dark: #0e0e0e\n$border: #161d2bb0\n\n$primary: #b53d61\n$primary-light: #f45a88\n$primary-glow: #f45a8861\n$primary-soft: #f79ab624\n$accent: #28aaf0\n\n$error: #ef3628\n$warn: #f09928\n$success: #28ef6b\n\n$edge: 5px\n\n$main-width: 800px\n$more-width: 1000px\n"]} \ No newline at end of file diff --git a/web/static/css/home.sass b/web/static/css/home.sass index 386e0f8..5880b98 100644 --- a/web/static/css/home.sass +++ b/web/static/css/home.sass @@ -4,20 +4,50 @@ header max-width: $main-width margin: 0 auto font-size: 40px + margin-bottom: 15rem h1 line-height: 4rem +div.featured-box + background: $primary-soft + border: 2px solid $primary-glow + border-radius: $edge + padding: 2rem + margin-block: 2rem + display: flex + vertical-align: middle + + + &:hover + scale: 1.05 + filter: brightness(1.1) saturate(1.1) + box-shadow: 0 0 30px $primary-glow + + img + height: 100px + object-fit: cover + + h2 + vertical-align: middle + margin-left: 1rem + font-size: 2rem + margin-block: 0 + + span + color: $primary-light + div.user-quotes - display: grid - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) - grid-gap: 2rem + // display: grid + // grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) + // grid-gap: 2rem div.user-quote__field + margin-block: 2rem padding-inline: 2rem padding-block: 2rem background: $primary-soft - border: 1px solid $primary-glow + border: 2px solid $primary-glow border-radius: $edge position: relative transition: all 200ms @@ -50,6 +80,7 @@ div.user-quotes position: absolute top: 1rem right: 1rem + object-fit: scale-down span.user-quote__username font-size: 1rem diff --git a/web/templates/index.html b/web/templates/index.html index 09a8e93..0d41ab9 100644 --- a/web/templates/index.html +++ b/web/templates/index.html @@ -4,58 +4,84 @@

Free Generative AI for Everyone

Make AI Open Again

- + + + + - +
-

What users say

+

Look, mom, I'm famous!

+
+ +

Featured in Free Media Heck Yeah

+

"Nova AI - Free GPT-4 Tokens / API / Chat"

+
+ +

Cherry-picked quotes

-
- - - - @perl404 +
+ + Krit +

We can all agree that NovaAI is the best.

+
+ +
+ + Tech With Anirudh +

NovaOSS is really good, I mean really. The code's good. The website's good. The API's good.

+
+ +
+ + David +

Nova is good. I love it because [it's] free and easy.

+
+ +
+ + Tolgchu (co-owner of PurGPT) +

Would you like a fully open-source API including GPT-4-32k? It's even fully free and has 0% reverse engineering!

+
+ +
+ + Koru (owner of Skailar) +

Nova [is] an open source, ethically sourced (no reverse engineering, just like us) API with high limits and a big amount of available models.

+
+ +
+ + Perl (owner of GeniusAI)

I love the credit system in this API.

-
- - - - @itsnot.david -

Nova is good. I love it because [it's] free and easy.

-
- -
- - - - @mainkrit -

We can all agree that NovaAI is the best.

-
- -
- - - - @elephant_0000 +
+ + Flying Elephant

You are so excellent [...]. Thank you for your contributions.

- All these quotes are from our Discord server, none of these users are in our team or got any kind of rewards for saying that. - None of our users were asked to say that, they said it on their own. We just edited spelling, grammar and punctuation on these messages. + All these quotes are from our Discord server, none of these users are in our team or got any kind of rewards for + saying that. + None of our users were asked to say that, they said it on their own. We just edited spelling, grammar and + punctuation on these messages.
-{% include 'parts/end.html' %} +{% include 'parts/end.html' %} \ No newline at end of file