franpcode/Open-Telegram-to-Notion-Website
1
0
Fork 0
mirror of https://github.com/FranP-code/Open-Telegram-to-Notion-Website.git synced 2025-10-13 00:42:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Index page done

Browse Source
This commit is contained in:
Francisco Pessano
2022-04-15 23:33:57 -03:00
parent 38f97e1acc
commit d5f6c5aee0
15 changed files with 250 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -8,7 +8,9 @@
"@testing-library/user-event": "^13.5.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"styled-components": "^5.3.5",
"web-vitals": "^2.1.4"
},
"scripts": {

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.8 KiB

2
public/index.html
View File

@@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>Telegram to Notion Bot</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

8
src/App.js
View File

@@ -1,8 +0,0 @@
function App() {
return (
<>
</>
);
}
export default App;

27
src/App.jsx Normal file
View File

@@ -0,0 +1,27 @@
import {
BrowserRouter as Router,
Routes,
Route,
Link
} from "react-router-dom";
import Header from './components/Header/Header'
import Auth from './Pages/Auth'
import Index from './Pages/Index/Index'
function App() {
return (
<>
<Header />
<Router>
<Routes>
<Route path="/auth" element={<Auth/>} />
<Route path="/" element={<Index/>} />
</Routes>
</Router>
</>
);
}
export default App;

9
src/Pages/Auth.jsx Normal file
View File

@@ -0,0 +1,9 @@
function Auth() {
return (
<div className="auth">
</div>
)
}
export default Auth

112
src/Pages/Index/Index.jsx Normal file
View File

@@ -0,0 +1,112 @@
import background from './background.svg'
import styled from "styled-components"
function Index() {
const IndexStyles = styled.div`
height: calc(100vh - 15vh - 1px); //Minus header height and 1 pixel for prevent scrollbar
width: 100%;
display: flex;
flex-direction: column;
aspect-ratio: 960/300;
background-image: url(${background});
background-repeat: no-repeat;
background-position: center;
background-size: cover;
.title-list {
color: #000;
li {
display: flex;
align-items: flex-end;
margin-bottom: 1vh;
a {
width: fit-content;
color: #000;
text-decoration: none;
&:hover h2 {
text-decoration: underline!important;
}
}
h2 {
display: inline-block;
margin: 0;
font-size: 25pt;
}
span {
display: inline-block;
color: #999;
margin-left: 1vw;
margin-top: 5px;
align-self: center;
}
}
}
.link-to-bot {
width: fit-content;
color: #fff;
background-color: #4797ff;
border-radius: 5px;
margin-top: 6vh;
margin-left: 1vw;
padding: 3vh 6vw;
font-size: 20pt;
font-weight: bold;
text-decoration: none;
transition: 0.4s ease-in-out;
&:hover {
background-color: #0088cc;
transition: 0.4s ease-in-out;
}
}
`
const listData = [
{text: "Free"},
{text: "Open Source", link: "https://github.com/FranP-code/Telegram-to-Notion-Bot"},
{text: "Unlimited"},
{text: "Forever", secondaryText: "(while I can afford it)"}
]
return (
<IndexStyles className="index">
<ul className="title-list">
{
listData.map((obj, index) => (
<li key={index}>
{obj.link ? <a href={obj.link} target="_blank" children={<h2>› {obj.text}</h2>} rel="noreferrer"/> : <h2>› {obj.text}</h2>}
{obj.secondaryText ? <span>{obj.secondaryText}</span> : null}
</li>
))
}
</ul>
<a className="link-to-bot" href="https://t.me/TelegrmToNotionBot" target="_blank" children="Check it out" rel="noreferrer"/>
</IndexStyles>
)
}
export default Index

1
src/Pages/Index/background.svg Normal file
View File

@@ -0,0 +1 @@
<svg id="visual" viewBox="0 0 960 540" width="960" height="540" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><path d="M0 446L26.7 449.2C53.3 452.3 106.7 458.7 160 453.8C213.3 449 266.7 433 320 420C373.3 407 426.7 397 480 402.3C533.3 407.7 586.7 428.3 640 431.2C693.3 434 746.7 419 800 414.5C853.3 410 906.7 416 933.3 419L960 422L960 541L933.3 541C906.7 541 853.3 541 800 541C746.7 541 693.3 541 640 541C586.7 541 533.3 541 480 541C426.7 541 373.3 541 320 541C266.7 541 213.3 541 160 541C106.7 541 53.3 541 26.7 541L0 541Z" fill="#4797ff" stroke-linecap="round" stroke-linejoin="miter"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 645 B

BIN
src/Pages/Index/icon (rounded borders).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

58
src/components/Header/Header.jsx Normal file
View File

@@ -0,0 +1,58 @@
import icon from './icon.png'
import styled from 'styled-components'
function Header() {
const HeaderStyles = styled.header`
height: 15vh;
display: flex;
align-items: center;
padding: 0px 2vw;
border-bottom: 1px solid #eee;
.logotype {
display: flex;
align-items: center;
img {
width: 80px;
height: 80px;
margin-right: 1vw;
&:hover {
animation: rotate-image 0.5s cubic-bezier(1.000, 0.000, 0.000, 1.000) both;
}
}
@keyframes rotate-image {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(360deg)
}
}
}
`
return (
<HeaderStyles>
<div className='logotype'>
<img src={icon} alt="Page icon"></img>
<h1>Telegram to Notion Bot</h1>
</div>
<div>
</div>
</HeaderStyles>
)
}
export default Header

BIN
src/components/Header/icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

2
src/index.js
View File

@@ -3,6 +3,8 @@ import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';
import './styles.css'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>

20
src/styles.css Normal file
View File

@@ -0,0 +1,20 @@
html, body {
margin: 0;
padding: 0;
}
body {
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;900&display=swap");
font-family: "Inter", sans-serif;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
}
img {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}/*# sourceMappingURL=styles.css.map */

1
src/styles.css.map Normal file
View File

@@ -0,0 +1 @@
{"version":3,"sources":["styles.scss","styles.css"],"names":[],"mappings":"AAAA;EACI,SAAA;EACA,UAAA;ACCJ;;ADEA;EACY,+FAAA;EACR,gCAAA;ACCJ;;ADEA;EACI,SAAA;ACCJ;;ADEA;EACI,yBAAA;KAAA,sBAAA;MAAA,qBAAA;UAAA,iBAAA;ACCJ","file":"styles.css"}

17
src/styles.scss Normal file
View File

@@ -0,0 +1,17 @@
html, body {
margin: 0;
padding: 0;
}
body {
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;900&display=swap');
font-family: 'Inter', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
}
img {
user-select: none;
}