Add files via upload

README.md

@@ -1 +1,34 @@
-# glassmorfizzm
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

components/Codeblock/Codeblock.tsx

@@ -0,0 +1,97 @@
+import React from 'react'
+
+import Syntax from 'react-syntax-highlighter'
+import { arta } from 'react-syntax-highlighter/dist/cjs/styles/hljs'
+import copy from 'copy-to-clipboard'
+
+import { styled, keyframes } from '../../stitches/theme.config'
+
+const TooltipAnimation = keyframes({
+  '0%': {
+    opacity: 0,
+  },
+  '50%': {
+    opacity: 1,
+  },
+  '100%': {
+    opacity: 0,
+    transform: 'translateY(-60px)',
+  },
+})
+
+export const Tooltip = styled('p', {
+  color: 'white',
+  fontFamily: '$primary',
+  position: 'absolute',
+  opacity: 0,
+  fontSize: '$2',
+})
+
+const CopyButton = styled('button', {
+  outline: 'none',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  marginTop: 30,
+  padding: '15px 20px',
+  fontSize: '$3',
+  background: 'black',
+  color: 'white',
+  border: 'none',
+  borderRadius: 5,
+  transition: '0.1s linear',
+  '&:hover': {
+    background: 'black',
+    cursor: 'pointer',
+  },
+  '.animate': {
+    animation: `${TooltipAnimation} 0.5s linear`,
+  },
+})
+
+const preStyle = {
+  borderRadius: 6,
+  padding: 30,
+  fontFamily: `JetBrain Mono, monospace`,
+  fontSize: 18,
+  overflowX: '',
+  background: 'black',
+}
+
+const Codeblock: React.FC<{
+  blur: string
+  opacity: string
+}> = ({ blur }) => {
+  const TooltipRef = React.useRef<HTMLParagraphElement>(null)
+
+  React.useEffect(() => {
+    TooltipRef.current!.addEventListener('animationend', () => {
+      TooltipRef.current!.classList.remove('animate')
+    })
+  }, [])
+
+  const code = `/* thekaranchauhan.com*/ 
+      
+backdrop-filter: blur(${blur}px); 
+-webkit-backdrop-filter: blur(${blur}px); 
+border: 1px solid rgba(255, 255, 255, 0.3);`
+
+
+  return (
+    <>
+      <Syntax style={arta} language='css' customStyle={preStyle}>
+        {code}
+      </Syntax>
+      <CopyButton
+        onClick={() => {
+          copy(code)
+          TooltipRef.current!.classList.add('animate')
+        }}
+      >
+        Copy <Tooltip ref={TooltipRef}>Copied</Tooltip>
+      </CopyButton>
+    </>
+  )
+}
+
+export default Codeblock

components/Footer.tsx

@@ -0,0 +1,79 @@
+import React from 'react'
+import { styled } from '../stitches/theme.config'
+
+import * as Icons from 'react-feather'
+
+const Wrapper = styled('div', {
+  display: 'flex',
+  justifyContent: 'space-around',
+  alignItems: 'center',
+  color: 'white',
+  margin: '150px 0 50px 0',
+  width: '100vw',
+  '@iPhonePlus': {
+    flexDirection: 'column',
+  },
+})
+
+const FooterWrapper = styled('div', {
+  display: 'flex',
+  variants: {
+    container: {
+      true: {
+        marginTop: 20,
+      },
+    },
+  },
+})
+
+const FooterText = styled('p', {
+  fontSize: '$3',
+  margin: '0 10px',
+  '@iPhoneSE': {
+    fontSize: '$2',
+  },
+})
+
+const FooterLink = styled('a', {
+  color: '#71DFE7',
+  textDecoration: 'none',
+  '&:hover': {
+    color: 'white',
+  },
+  variants: {
+    text: {
+      true: {
+        margin: 0,
+      },
+    },
+  },
+  margin: '0 7px',
+})
+
+const Footer: React.FC = () => {
+  return (
+    <Wrapper>
+      <FooterWrapper container>
+        <FooterText>
+          © 2021{' '}
+          <FooterLink href='https://thekaranchauhan.com' target='_blank' text>
+            Karan Chauhan
+          </FooterLink>
+        </FooterText>
+        <FooterWrapper>
+          <FooterLink href='https://github.com/thekaranchauhan' target='_blank'>
+            <Icons.GitHub />
+          </FooterLink>
+          <FooterLink href='https://instagram.com/thekaranchauhan' target='_blank'>
+            <Icons.Instagram />
+          </FooterLink>
+          <FooterLink href='https://codepen.io/thekaranchauhan' target='_blank'>
+            <Icons.Codepen />
+          </FooterLink>
+        </FooterWrapper>
+      </FooterWrapper>
+    </Wrapper>
+  )
+}
+
+export default Footer

components/Gradient/Gradient.style.ts

@@ -0,0 +1,30 @@
+import { styled } from '../../stitches/theme.config'
+
+export const GradientContainer = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: '100vw',
+  height: '50vh',
+  background:
+    'url("https://media.discordapp.net/attachments/785862408606187528/898788685225525249/Gradient.png")',
+  backgroundPosition: 'center',
+  backgroundAttachment: 'fixed',
+})
+
+export const Text = styled('div', {
+  color: '#fff',
+  position: 'absolute',
+  fontSize: 96,
+  userSelect: 'none',
+})
+
+export const Glass = styled('div', {
+  height: 200,
+  width: 500,
+  border: '2px solid #FFFFFF35',
+  borderRadius: 20,
+  backdropFilter: 'blur(8px)',
+  zIndex: 5,
+})

components/Gradient/Gradient.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+
+import * as S from './Gradient.style'
+
+export const hexToRgb = (hex: string) => {
+  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i
+  hex = hex.replace(shorthandRegex, function (m, r, g, b) {
+    return r + r + g + g + b + b
+  })
+
+  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+  return result
+    ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16),
+      }
+    : null
+}
+
+const Gradient: React.FC<{ blur: string; colour: string; opacity: string }> = ({
+  blur,
+  colour,
+  opacity,
+}) => {
+  return (
+    <S.GradientContainer>
+      <S.Glass
+        style={{
+          backdropFilter: `blur(${blur}px)`,
+          background: `rgba(${hexToRgb(colour)?.r}, ${hexToRgb(colour)?.g}, ${
+            hexToRgb(colour)?.b
+          }, ${opacity})`,
+        }}
+      />
+      <S.Text>Glassmorfizzm</S.Text>
+    </S.GradientContainer>
+  )
+}
+
+export default Gradient

components/Head.tsx

@@ -0,0 +1,33 @@
+import Head from 'next/head'
+import React from 'react'
+
+const Header: React.FC = () => {
+  return (
+    <Head>
+      <title>Glassmorfizzm - CSS glassmorphism generator</title>
+      <meta property='og:title' content='Glassmorfizzm' />
+      <meta property='twitter:title' content='Glassmorfizzm' />
+      <meta
+        name='description'
+        content='Create glassmorphism and get CSS code as you set it up.'
+      />
+      <meta
+        property='og:description'
+        content='Create glassmorphism and get CSS code as you set it up.'
+      />
+      <meta
+        property='twitter:description'
+        content='Create glassmorphism and get CSS code as you set it up.'
+      />
+      <meta property='og:type' content='website' />
+      <meta name='viewport' content='width=device-width, initial-scale=1.0' />
+      <meta name='theme-color' content='#61C3B' />
+      <link
+        rel='icon'
+        href='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>👻</text></svg>'
+      />
+    </Head>
+  )
+}
+
+export default Header

components/Settings/Settings.style.ts

@@ -0,0 +1,72 @@
+import { styled } from '../../stitches/theme.config'
+
+export const SettingsContainer = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+})
+
+export const OptionBox = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  marginBottom: 50,
+  variants: {
+    top: {
+      true: {
+        marginTop: 100,
+      },
+    },
+  },
+})
+
+export const Label = styled('p', {
+  color: 'white',
+  fontSize: '$4',
+  marginBottom: 30,
+})
+
+export const Slider = styled('input', {
+  appearance: 'none',
+  width: '50vw',
+  height: 7,
+  outline: 'none',
+  background: 'black',
+  borderRadius: 10,
+  '&::-webkit-slider-thumb': {
+    appearance: 'none',
+    width: 20,
+    height: 20,
+    borderRadius: 100,
+    background: '#fff',
+    cursor: 'pointer',
+    transition: '0.1s linear',
+  },
+  '&::-webkit-slider-thumb:hover': {
+    transform: 'scale(1.2)',
+  },
+})
+
+export const ColourPicker = styled('input', {
+  background: 'none',
+  borderRadius: '100%',
+  height: 30,
+  width: '50vw',
+  border: 'none',
+  outline: 'none',
+  appearance: 'none',
+  transition: '0.1s linear',
+  cursor: 'pointer',
+  '&:hover': {
+    transform: 'scale(1, 1.3)',
+  },
+  '&::-webkit-color-swatch-wrapper': {
+    padding: 0,
+  },
+  '&::-webkit-color-swatch': {
+    border: 'none',
+    borderRadius: 5,
+  },
+})