Skip to content

Commit

Permalink
improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@adamgiebl
adamgiebl committed Sep 16, 2024
1 parent 5163216 commit b2672b1
Show file tree
Hide file tree
Showing 13 changed files with 393 additions and 242 deletions.
138 changes: 60 additions & 78 deletions public/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,74 +1,69 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png" />
<link
rel="icon"
type="image/png"
sizes="192x192"
href="%PUBLIC_URL%/android-chrome-192x192.png"
/>
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://neumorphism.io/" />
<meta property="og:title" content="Neumorphism/Soft UI CSS shadow generator" />
<meta
property="og:description"
content="CSS code generator that will help with colors, gradients and shadows to adapt this new design trend or discover its posibilities."
/>
<meta property="og:image" content="https://neumorphism.io/ogImage.png" />

<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-99929335-4"></script>
<script>
window.dataLayer = window.dataLayer || []
function gtag() {
dataLayer.push(arguments)
}
gtag('js', new Date())
gtag('config', 'UA-99929335-4')
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://neumorphism.io/" />
<meta property="twitter:title" content="Neumorphism/Soft UI CSS shadow generator" />
<meta
property="twitter:description"
content="CSS code generator that will help with colors, gradients and shadows to adapt this new design trend or discover its posibilities."
/>
<meta property="twitter:image" content="https://neumorphism.io/ogImage.png" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:[email protected]&display=swap"
rel="stylesheet"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#001f3f" />
<meta name="author" content="Adam Giebl, [email protected]" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta
name="description"
content="CSS code generator that will help with colors, gradients and shadows to adapt neumorphism or discover its posibilities."
/>
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>Neumorphism CSS shadow generator</title>
</head>

var getOutboundLink = function (url) {
gtag('event', 'click', {
event_category: 'outbound',
event_label: url,
transport_type: 'beacon',
event_callback: function () { }
})
}
</script>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="192x192" href="%PUBLIC_URL%/android-chrome-192x192.png" />
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://neumorphism.io/" />
<meta property="og:title" content="Neumorphism/Soft UI CSS shadow generator" />
<meta property="og:description"
content="CSS code generator that will help with colors, gradients and shadows to adapt this new design trend or discover its posibilities." />
<meta property="og:image" content="https://neumorphism.io/ogImage.png" />

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://neumorphism.io/" />
<meta property="twitter:title" content="Neumorphism/Soft UI CSS shadow generator" />
<meta property="twitter:description"
content="CSS code generator that will help with colors, gradients and shadows to adapt this new design trend or discover its posibilities." />
<meta property="twitter:image" content="https://neumorphism.io/ogImage.png" />
<link href="https://fonts.googleapis.com/css?family=Muli:400,700&display=swap"
rel="stylesheet dns-prefetch preconnect" crossorigin />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#001f3f" />
<meta name="author" content="Adam Giebl, [email protected]" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description"
content="CSS code generator that will help with colors, gradients and shadows to adapt this new design trend or discover its posibilities." />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>Neumorphism/Soft UI CSS shadow generator</title>
</head>

<body>
<div class="title">
<h1 class="main-heading">Neumorphism.io</h1>
<h2>Generate <b>Soft</b>-UI CSS code</h2>
</div>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!-- <div>
<body>
<div class="mb-16 title">
<h1 class="main-heading">Neumorphism.io</h1>
<h2 class="text-base opacity-60">Experiment and generate CSS code</h2>
</div>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!-- <div>
<script
async
type="text/javascript"
src="//cdn.carbonads.com/carbon.js?serve=CEAIKK3Y&placement=neumorphismio"
id="_carbonads_js"
></script>
</div> -->
<footer>
<!-- <div class="social">
<footer>
<!-- <div class="social">
<a
href="https://uiverse.io"
target="_blank"
Expand All @@ -79,7 +74,7 @@ <h2>Generate <b>Soft</b>-UI CSS code</h2>
Check out <b>uiverse.io</b> for more cool CSS!
</a>
</div> -->
<!-- <div class="tags">
<!-- <div class="tags">
<a
target="_blank"
onclick="getOutboundLink('https://uiverse.io/buttons'); return true;"
Expand Down Expand Up @@ -117,20 +112,7 @@ <h2>Generate <b>Soft</b>-UI CSS code</h2>
>CSS inputs</a
>
</div> -->
</footer>
<div class="links">
<div class="widget widget-lg github-star">
<a class="btn" href="https://github.com/adamgiebl/neumorphism" rel="noopener" target="_blank"
aria-label="Star adamgiebl/neumorphism on GitHub"
onclick="getOutboundLink('https://github.com/adamgiebl/neumorphism'); return true;"><svg viewBox="0 0 16 16"
width="16" height="16" class="octicon octicon-star" aria-hidden="true">
<path fill-rule="evenodd"
d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z">
</path>
</svg>
<span>Star on GitHub</span></a>
</div>
</div>
</body>

</html>
</footer>
<div class="links"></div>
</body>
</html>
102 changes: 92 additions & 10 deletions src/App.js
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,105 @@
import React, { useState, useRef } from 'react'
import React, { useState, useRef, useEffect } from 'react'

import Preview from './Preview'
import Configuration from './Configuration'
import UiverseElements from './components/UiverseElements'

import Footer from './components/Footer'
const App = () => {
const [activeLightSource, setActiveLightSource] = useState(1)
const previewBox = useRef()

const [githubStars, setGithubStars] = useState(0)
console.log(githubStars)
useEffect(() => {
const fetchGithubStars = async () => {
try {
const response = await fetch(
'https://api.github.com/search/repositories?q=repo:adamgiebl/neumorphism',
{
headers: {
Accept: 'application/vnd.github.preview'
}
}
)
const data = await response.json()
setGithubStars(data.items[0].stargazers_count)
} catch (error) {
console.error('Error fetching GitHub stars:', error)
}
}

fetchGithubStars()
}, [])

return (
<div className="container App">
<div className="flex-custom">
<Preview setActiveLightSource={setActiveLightSource} previewBox={previewBox} />
<Configuration previewBox={previewBox} activeLightSource={activeLightSource} />
</div>
<div className="mt-24">
<UiverseElements />
<>
<GitHubStarButton githubStars={githubStars} />

<div className="w-full App">
<div className="container mx-auto">
<div className="mx-auto flex-custom">
<Preview setActiveLightSource={setActiveLightSource} previewBox={previewBox} />
<Configuration previewBox={previewBox} activeLightSource={activeLightSource} />
</div>
</div>
<div className="container max-w-screen-xl px-6 mx-auto mt-24">
<UiverseElements />
</div>
<div className="container max-w-screen-lg px-6 mx-auto mt-24">
<section className="mb-24 text-left">
<h2 className="mb-4 text-3xl font-bold">What is Neumorphism?</h2>
<p className="text-lg leading-relaxed">
Neumorphism, also known as soft UI, is a visual design trend that combines elements of
skeuomorphism and flat design. It creates a soft, extruded plastic look by using
subtle contrasting shadows to create the illusion of depth. This style mimics physical
objects while maintaining a minimal and modern aesthetic, often featuring
monochromatic color schemes with low contrast shadows and highlights.
</p>
</section>
</div>
<Footer />
</div>
</div>
</>
)
}

const GitHubStarButton = ({ githubStars }) => {
return (
<button className="fixed items-center justify-center hidden h-10 px-4 py-2 text-sm font-medium transition-all duration-200 ease-in-out bg-gray-900 rounded-md md:inline-flex top-6 right-6 whitespace-nowrap ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group hover:bg-gray-950 hover:ring-2 hover:ring-offset-2 hover:ring-gray-900">
<svg
className="w-5 h-6 mr-2 text-white"
strokeLinejoin="round"
strokeLinecap="round"
strokeWidth="2"
stroke="currentColor"
fill="none"
viewBox="0 0 24 24"
height="24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path>
<path d="M9 18c-4.51 2-5-2-7-2"></path>
</svg>
<span className="text-white">Star on GitHub</span>
<span className="flex items-center ml-4 transition-colors duration-200 ease-in-out group-hover:text-yellow-500">
<svg
className="w-5 h-5 text-yellow-500"
strokeLinejoin="round"
strokeLinecap="round"
strokeWidth="2"
stroke="currentColor"
fill="none"
viewBox="0 0 24 24"
height="24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
</svg>
{githubStars && <span className="ml-2 text-white">{githubStars}</span>}
</span>
</button>
)
}

Expand Down
29 changes: 15 additions & 14 deletions src/App.style.js
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,27 @@
import styled from "styled-components";
import styled from 'styled-components'

export const LightSource = styled.div`
position: absolute;
left: ${(props) => props.left};
top: ${(props) => props.top};
right: ${(props) => props.right};
bottom: ${(props) => props.bottom};
left: ${props => props.left};
top: ${props => props.top};
right: ${props => props.right};
bottom: ${props => props.bottom};
background: transparent;
height: 30px;
width: 30px;
cursor: pointer;
border: 2px solid var(--textColor);
border-bottom-right-radius: ${(props) =>
props.right === "unset" && props.bottom === "unset" ? "30px" : "unset"};
border-bottom-left-radius: ${(props) =>
props.left === "unset" && props.bottom === "unset" ? "30px" : "unset"};
border-top-right-radius: ${(props) =>
props.right === "unset" && props.top === "unset" ? "30px" : "unset"};
border-top-left-radius: ${(props) =>
props.left === "unset" && props.top === "unset" ? "30px" : "unset"};
opacity: 0.8;
border-bottom-right-radius: ${props =>
props.right === 'unset' && props.bottom === 'unset' ? '30px' : 'unset'};
border-bottom-left-radius: ${props =>
props.left === 'unset' && props.bottom === 'unset' ? '30px' : 'unset'};
border-top-right-radius: ${props =>
props.right === 'unset' && props.top === 'unset' ? '30px' : 'unset'};
border-top-left-radius: ${props =>
props.left === 'unset' && props.top === 'unset' ? '30px' : 'unset'};
&.active {
background: #ffff00;
}
`;
`
Loading

0 comments on commit b2672b1

Please sign in to comment.