Skip to content

Instantly share code, notes, and snippets.

@adrianhajdin
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.
Build and Deploy Your Own ChatGPT AI SaaS Business with React
@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;
}
<!-- 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"
/>
@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

@abhijeetpalanki
Copy link

abhijeetpalanki commented Jun 6, 2024

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

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