Skip to content

Instantly share code, notes, and snippets.

@adrianhajdin

adrianhajdin/App.css

Created April 21, 2023 09:58
Show Gist options
  • Save adrianhajdin/23b2d30e39cd2d92cfa9f436c19afe27 to your computer and use it in GitHub Desktop.
Save adrianhajdin/23b2d30e39cd2d92cfa9f436c19afe27 to your computer and use it in GitHub Desktop.
Download ZIP
Build and Deploy Your Own ChatGPT AI SaaS Business with React
Raw
App.css
@tailwind base;
@tailwind components;
@tailwind utilities;
/*
Note: The styles for this gradient grid background is heavily inspired by the creator of this amazing site (https://dub.sh) – all credits go to them!
*/
.main {
width: 100vw;
min-height: 100vh;
position: fixed;
display: flex;
justify-content: center;
padding: 120px 24px 160px 24px;
pointer-events: none;
}
.main:before {
background: radial-gradient(circle, rgba(2, 0, 36, 0) 0, #fafafa 100%);
position: absolute;
content: "";
z-index: 2;
width: 100%;
height: 100%;
top: 0;
}
.main:after {
content: "";
background-image: url("/src/assets/grid.svg");
z-index: 1;
position: absolute;
width: 100%;
height: 100%;
top: 0;
opacity: 0.4;
filter: invert(1);
}
.gradient {
height: fit-content;
z-index: 3;
width: 100%;
max-width: 640px;
background-image: radial-gradient(
at 27% 37%,
hsla(215, 98%, 61%, 1) 0px,
transparent 0%
),
radial-gradient(at 97% 21%, hsla(125, 98%, 72%, 1) 0px, transparent 50%),
radial-gradient(at 52% 99%, hsla(354, 98%, 61%, 1) 0px, transparent 50%),
radial-gradient(at 10% 29%, hsla(256, 96%, 67%, 1) 0px, transparent 50%),
radial-gradient(at 97% 96%, hsla(38, 60%, 74%, 1) 0px, transparent 50%),
radial-gradient(at 33% 50%, hsla(222, 67%, 73%, 1) 0px, transparent 50%),
radial-gradient(at 79% 53%, hsla(343, 68%, 79%, 1) 0px, transparent 50%);
position: absolute;
content: "";
width: 100%;
height: 100%;
filter: blur(100px) saturate(150%);
top: 80px;
opacity: 0.15;
}
@media screen and (max-width: 640px) {
.main {
padding: 0;
}
}
/* Tailwind Styles */
.app {
@apply relative z-10 flex justify-center items-center flex-col max-w-7xl mx-auto sm:px-16 px-6;
}
.black_btn {
@apply rounded-full border border-black bg-black py-1.5 px-5 text-sm text-white transition-all hover:bg-white hover:text-black;
}
.head_text {
@apply mt-5 text-5xl font-extrabold leading-[1.15] text-black sm:text-6xl text-center;
}
.orange_gradient {
@apply bg-gradient-to-r from-amber-500 via-orange-600 to-yellow-500 bg-clip-text text-transparent;
}
.desc {
@apply mt-5 text-lg text-gray-600 sm:text-xl text-center max-w-2xl;
}
.url_input {
@apply block w-full rounded-md border border-gray-200 bg-white py-2.5 pl-10 pr-12 text-sm shadow-lg font-satoshi font-medium focus:border-black focus:outline-none focus:ring-0;
}
.submit_btn {
@apply hover:border-gray-700 hover:text-gray-700 absolute inset-y-0 right-0 my-1.5 mr-1.5 flex w-10 items-center justify-center rounded border border-gray-200 font-sans text-sm font-medium text-gray-400;
}
.link_card {
@apply p-3 flex justify-start items-center flex-row bg-white border border-gray-200 gap-3 rounded-lg cursor-pointer;
}
.copy_btn {
@apply w-7 h-7 rounded-full bg-white/10 shadow-[inset_10px_-50px_94px_0_rgb(199,199,199,0.2)] backdrop-blur flex justify-center items-center cursor-pointer;
}
.blue_gradient {
@apply font-black bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent;
}
.summary_box {
@apply rounded-xl border border-gray-200 bg-white/20 shadow-[inset_10px_-50px_94px_0_rgb(199,199,199,0.2)] backdrop-blur p-4;
}
Raw
index.html
<!-- satoshi font family -->
<link
href="https://api.fontshare.com/v2/css?f[]=satoshi@1,900,700,500,300,400&display=swap"
rel="stylesheet"
/>
<!-- inter font family -->
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
rel="stylesheet"
/>
@brandingflux
Copy link

thanks, this works

@abhinabguru
Copy link

Ok, for the error of @layer directive , although if I put a ':' after '@apply' then no doubt the error is gone , but the style is not getting applied for the input box .I am getting a default html input tab and not the styled one . So what to do ?

@dayacode12
Copy link

**'height: fit-content' is not supported by Firefox, Firefox for Android.Microsoft Edge Toolscompat-api/css
Specifies the height of the content area, padding area or border area (depending on 'box-sizing') of certain boxes.

Syntax: {1,2}
guys I got this in my error screen have a look... I hope to get possible solutions. Thank you in advance**

image

@Yafet212
Copy link

Yafet212 commented Sep 3, 2023

after i do all of this, it is still not showing anything.can anyone help me please?

@ochudi
Copy link

ochudi commented Sep 10, 2023

Wow! This GitHub gist is really helpful.

@ShahinHemat
Copy link

Im getting this error Dont understand what to do GET https://article-extractor-and-summarizer.p.rapidapi.com/summarize?url=https%3A%2F%2Fedumantra.net%2Flearn-english%2F124-class-9-10-short-essay-and-article-on-value-of-books%2F&length=3 403 Failed to load resource: the server responded with a status of 403 () WhatsApp Image 2023-07-27 at 9 37 10 PM

i am getting the same error , did you resolve it?

I got the same error, but with a 503 instead. However, when I tried with a url that actually contains an article, it worked.
I tried this url: https://www.health.harvard.edu/staying-healthy/can-you-feel-younger-than-your-age

Try that and see if that works! :)

@abhinv98
Copy link

abhinv98 commented Sep 15, 2023 •
edited
Loading

@CaptainPatel try entering a link for a normal article
or just go to article.js and just see if u have used the right call for fetchbasequery

@sherimin
Copy link

Im getting this error Dont understand what to do GET https://article-extractor-and-summarizer.p.rapidapi.com/summarize?url=https%3A%2F%2Fedumantra.net%2Flearn-english%2F124-class-9-10-short-essay-and-article-on-value-of-books%2F&length=3 403 Failed to load resource: the server responded with a status of 403 () WhatsApp Image 2023-07-27 at 9 37 10 PM

i am getting the same error , did you resolve it?

I got the same error, but with a 503 instead. However, when I tried with a url that actually contains an article, it worked. I tried this url: https://www.health.harvard.edu/staying-healthy/can-you-feel-younger-than-your-age

Try that and see if that works! :)

Oh thank you! I was getting 503 too but your article works!

@venzkie1
Copy link

Hi! When I paste this App.css file into my project, it says there are 26 problems in it. When I hover above "@tailwind" this message pops up "Unknown at rule @tailwindcss(unknownAtRules)" and when I import my App.css in the App.jsx, I immediately got an error which is "[plugin:vite:css] [postcss] C:/Users/Hp/Desktop/React/AiSummarizer/src/App.css:73:5: The sm: class does not exist. If sm: is a custom class, make sure it is defined within a @layer directive." It seems that the tailwind is not working.

Just go to your vs code extension and install the PostCss Language support, that will fix it.

@Ashesha1-Coder
Copy link

Hi! When I paste this App.css file into my project, it says there are 26 problems in it. When I hover above "@tailwind" this message pops up "Unknown at rule @tailwindcss(unknownAtRules)" and when I import my App.css in the App.jsx, I immediately got an error which is "[plugin:vite:css] [postcss] C:/Users/Hp/Desktop/React/AiSummarizer/src/App.css:73:5: The sm: class does not exist. If sm: is a custom class, make sure it is defined within a @layer directive." It seems that the tailwind is not working.

i'm also having issues with this project, maybe we can team up, work on it and help each other solve each others problems somehow. good luck to you

yeah i'm having those same errors too let's link up and work

please install the extension named post css language support in vs code to avoid these errors and in the start use the syntax @import "tailwindcss/base";

@twofivecrypto
Copy link

Hi! When I paste this App.css file into my project, it says there are 26 problems in it. When I hover above "@tailwind" this message pops up "Unknown at rule @tailwindcss(unknownAtRules)" and when I import my App.css in the App.jsx, I immediately got an error which is "[plugin:vite:css] [postcss] C:/Users/Hp/Desktop/React/AiSummarizer/src/App.css:73:5: The sm: class does not exist. If sm: is a custom class, make sure it is defined within a @layer directive." It seems that the tailwind is not working.

i'm also having issues with this project, maybe we can team up, work on it and help each other solve each others problems somehow. good luck to you

yeah i'm having those same errors too let's link up and work

please install the extension named post css language support in vs code to avoid these errors and in the start use the syntax @import "tailwindcss/base";

i would love to team up, as i'm having a lot of trouble with this as well.

@palakbansal3233
Copy link

I am getting a 403 (You are not subscribed to this API) error when I already am. Can someone help?

@Yafet212
Copy link

Yafet212 commented Sep 25, 2023 via email

@palakbansal3233
Copy link

i also get this problem eventhough i am subscribed to the API.Can anyone help me how to fix this issue? https://www.avast.com/sig-email?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail Virus-free.www.avast.com https://www.avast.com/sig-email?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail <#DAB4FAD8-2DD7-40BB-A1B8-4E2AA1F9FDF2>
…
On Mon, Sep 25, 2023 at 2:35 PM Palak Bansal @.> wrote: @.* commented on this gist. ------------------------------ I am getting a 403 (You are not subscribed to this API) error when I already am. Can someone help? — Reply to this email directly, view it on GitHub https://gist.github.com/adrianhajdin/23b2d30e39cd2d92cfa9f436c19afe27#gistcomment-4703353 or unsubscribe https://github.com/notifications/unsubscribe-auth/BAZYDMZWC6PB5ZQC7O6KSIDX4FT63BFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFQKSXMYLMOVS2I5DSOVS2I3TBNVS3W5DIOJSWCZC7OBQXE5DJMNUXAYLOORPWCY3UNF3GS5DZVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFVEYTEMRQGQYTINRWU52HE2LHM5SXFJTDOJSWC5DF . You are receiving this email because you commented on the thread. Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub .

Yes, so the problem is the ENV not picking up the token. You can console log your rapidApiKey and check if it's returning the token correctly, I hardcoded my token and everything seems to be working fine.

@Padumond
Copy link

If you use Visual Studio Code, you can use the PostCSS Language Support plugin.

It worked.

Great!!! this worked for me too. As simplee as this.

@crownholder
Copy link

was able to complete the project but when deploying to amplify I get a blank screen. Please release the second video showing how to deploy and I prefer amplify over netlify if possible. The only errors I ran into, which I used AI to help me resolve, while building was rendering the summary. The entirety of this tutorial was great besides the last part of the code. This was mostly likely due to some error on my part that I couldnt locate without the help of AI.

@tbaratta
Copy link

Failed to load resource: the server responded with a status of 403 ()
Anyone know how to fix this error?

@crownholder
Copy link

Failed to load resource: the server responded with a status of 403 () Anyone know how to fix this error?

I think it may be the website you are trying to read. Use teachermagazine.com for articles and choose a specific article. I remember getting a 403 but don't remember doing anything in the application itself to fix it. I changed the code for error messaging so that I could get details of the error and I found that it will always return a 503 for many articles. I've concluded this is because those articles are chopped up and some have embedded videos. Using teachermagazine.com you get clean articles without embedded videos and a block of text.

@crownholder
Copy link

crownholder commented Oct 22, 2023 •
edited
Loading

I have a working version here >>> https://65347d164c06bc1524b35afb--ornate-chaja-d01bc2.netlify.app/

I also put the code for Demo.jsx on my github.

@Animesh292
Copy link

I am getting this error in my console can anyone help me fix this it says 403 forbidden error in my console. If anybody knows why this is happening or fix pls let me know

Screenshot (2)

@Showkiip
Copy link

getting this
@reduxjs_toolkit_query_react.js?v=b23c70a8:109

    GET https://article-extractor-and-summarizer.p.rapidapi.com/summarize?url=https%3A%2F%2Fwww.w3schools.com%2F&length=3 503 (Service Unavailable)

@Athiq26
Copy link

Athiq26 commented Dec 2, 2023

Screenshot 2023-12-02 181828

iam unable to get the output..please help me out

@ethanjnz
Copy link

ethanjnz commented Jan 2, 2024

I had the same problem with the 403 forbidden error and found out that it wasn't receiving the token like it was supposed to. I had my .env file in the src directory and I moved it to the root directory (the same area that index.html, vite.config, and the readme is on) and it works great. Thought that might help

@shaurya0810
Copy link

Screenshot 2024-06-05 170506

i am getting this error i dont know why please help me

@szulkifl
Copy link

szulkifl commented Jun 5, 2024

I am getting this error
Screenshot 2024-06-05 at 4 51 20 PM

Demo.jsx:17
GET https://article-extractor-and-summarizer.p.rapidapi.com/summarize?url=https%3A%2F%2Fwww.health.harvard.edu%2Fstaying-healthy%2Fcan-you-feel-younger-than-your-age&length=3 net::ERR_INTERNET_DISCONNECTED

Would appreciate some help.

@abhijeetpalanki
Copy link

abhijeetpalanki commented Jun 6, 2024 •
edited
Loading

For @layer directive problem (postcss) after importing App.css - use below code

@layer base {
  .shadow-custom {
    @apply shadow-[inset_10px_-50px_94px_0_rgb(199,199,199,0.2)];
  }
}

@shaurya0810
Copy link

shaurya0810 commented Jun 6, 2024 via email

@yashdarji30
Copy link

Im getting this error Dont understand what to do GET https://article-extractor-and-summarizer.p.rapidapi.com/summarize?url=https%3A%2F%2Fedumantra.net%2Flearn-english%2F124-class-9-10-short-essay-and-article-on-value-of-books%2F&length=3 403 Failed to load resource: the server responded with a status of 403 () WhatsApp Image 2023-07-27 at 9 37 10 PM

i am getting the same error , did you resolve it?

i think your .env file in src directory remove and add in folder directory

@Showkiip
Copy link

Showkiip commented Jul 12, 2024 •
edited
Loading

I think your api key is invalid, please Check your api key?

@pranavv444
Copy link

Im getting this error Dont understand what to do GET https://article-extractor-and-summarizer.p.rapidapi.com/summarize?url=https%3A%2F%2Fedumantra.net%2Flearn-english%2F124-class-9-10-short-essay-and-article-on-value-of-books%2F&length=3 403 Failed to load resource: the server responded with a status of 403 () WhatsApp Image 2023-07-27 at 9 37 10 PM

i am getting the same error , did you resolve it?

I got the same error, but with a 503 instead. However, when I tried with a url that actually contains an article, it worked. I tried this url: https://www.health.harvard.edu/staying-healthy/can-you-feel-younger-than-your-age

Try that and see if that works! :)

i also got the 503 error..it worked with an actual article link..but why it is not working with any random link? is there any solution for this??

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment