Skip to content

Commit

Permalink
updating contribution ask
Browse files Browse the repository at this point in the history
  • Loading branch information
@sdl60660
sdl60660 committed Aug 5, 2024
1 parent 535a58b commit 950764a
Show file tree
Hide file tree
Showing 6 changed files with 263 additions and 60 deletions.
160 changes: 108 additions & 52 deletions frontend/public/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,69 +1,125 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<head>
<meta charset="utf-8" />

<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon.ico" />

<!--
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />

<meta name="description" content="">
<title>Letterboxd Movie Recommendations</title>
<meta name="description" content="" />
<title>Letterboxd Movie Recommendations</title>

<!-- Primary Meta Tags -->
<title>Letterboxd Movie Recommendations</title>
<meta name="title" content="Letterboxd Movie Recommendations">
<meta name="description" content="Generate movie recommendations based on your previous Letterboxd ratings">
<!-- Primary Meta Tags -->
<title>Letterboxd Movie Recommendations</title>
<meta name="title" content="Letterboxd Movie Recommendations" />
<meta
name="description"
content="Generate movie recommendations based on your previous Letterboxd ratings"
/>

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="letterboxd.samlearner.com">
<meta property="og:title" content="Letterboxd Movie Recommendations">
<meta property="og:description" content="Generate movie recommendations based on your previous Letterboxd ratings">
<meta property="og:image"
content="https://letterboxd.samlearner.com/images/preview_image.png">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="letterboxd.samlearner.com" />
<meta property="og:title" content="Letterboxd Movie Recommendations" />
<meta
property="og:description"
content="Generate movie recommendations based on your previous Letterboxd ratings"
/>
<meta
property="og:image"
content="https://letterboxd.samlearner.com/images/preview_image.png"
/>

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="letterboxd.samlearner.com">
<meta property="twitter:title" content="Letterboxd Movie Recommendations">
<meta property="twitter:description"
content="Generate movie recommendations based on your previous Letterboxd ratings">
<meta property="twitter:image" content="https://letterboxd.samlearner.com/images/preview_image.png">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="letterboxd.samlearner.com" />
<meta
property="twitter:title"
content="Letterboxd Movie Recommendations"
/>
<meta
property="twitter:description"
content="Generate movie recommendations based on your previous Letterboxd ratings"
/>
<meta
property="twitter:image"
content="https://letterboxd.samlearner.com/images/preview_image.png"
/>

<link nonce="allow" rel="icon" href='/static/images/favicon.png'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link nonce="allow" rel="icon" href="/static/images/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<!-- Bootstrap Core CSS -->
<link nonce="allow" rel="stylesheet" href="static/css/bootstrap.min.css">
<!-- Bootstrap Core CSS -->
<link
nonce="allow"
rel="stylesheet"
href="static/css/bootstrap.min.css"
/>

<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<link nonce="allow" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Playfair+Display">
<link nonce="allow" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link nonce="allow" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather">
<link nonce="allow" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora">
<link nonce="allow" rel="stylesheet" href="https://use.typekit.net/qnl7egi.css">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css?family=Quicksand:400,700"
rel="stylesheet"
type="text/css"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet"
/>
<link
nonce="allow"
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Playfair+Display"
/>
<link
nonce="allow"
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto"
/>
<link
nonce="allow"
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Merriweather"
/>
<link
nonce="allow"
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lora"
/>
<link
nonce="allow"
rel="stylesheet"
href="https://use.typekit.net/qnl7egi.css"
/>

<!-- Font Awesome -->
<script nonce="allow" src="https://kit.fontawesome.com/1e59e4c612.js" crossorigin="anonymous"></script>
<!-- Font Awesome -->
<script
nonce="allow"
src="https://kit.fontawesome.com/1e59e4c612.js"
crossorigin="anonymous"
></script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>

</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
<!-- <script
type="text/javascript"
src="https://storage.ko-fi.com/cdn/widget/Widget_2.js"
></script> -->
</body>
</html>
2 changes: 1 addition & 1 deletion frontend/src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ function App() {
<div className="App">
<Header />
{/* <DownNotice/> */}
<ContributionAsk />
{/* <ContributionAsk /> */}
<Intro />

<div className="container" id="body-content-container">
Expand Down
27 changes: 25 additions & 2 deletions frontend/src/components/Footer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from 'react'

import metaData from '../data/meta.json'
import '../styles/Footer.scss'
import '../styles/KoFi.scss'

const Footer = (props) => {
const lastUpdatedDate = new Date(metaData.last_updated)
Expand Down Expand Up @@ -68,7 +69,9 @@ const Footer = (props) => {
/>
</a>
</p>
<p>
<script src="https://storage.ko-fi.com/cdn/scripts/overlay-widget.js"></script>

{/* <p>
Maintaining this project is not free! Please consider
chipping in{' '}
<a
Expand All @@ -79,7 +82,27 @@ const Footer = (props) => {
here
</a>
.
</p>
</p> */}
<div class="btn-container">
<a
title="Support this project"
class="kofi-button"
style={{ backgroundColor: '#000000' }}
href="https://ko-fi.com/J3J74VGK6"
target="_blank"
rel="noreferrer"
>
{' '}
<span class="kofitext">
<img
src="https://storage.ko-fi.com/cdn/cup-border.png"
alt="Ko-fi donations"
class="kofiimg"
/>
Support this project
</span>
</a>
</div>
<p>
Code and data for this project lives{' '}
<a
Expand Down
5 changes: 3 additions & 2 deletions frontend/src/styles/Footer.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
max-width: 550px;
font-size: 0.85rem;
text-align: left;
font-family: "Roboto", Helvetica, sans-serif;
font-family: 'Roboto', Helvetica, sans-serif;
padding-top: 40px;
padding-bottom: 60px;
/* min-height: 100vh; */
Expand Down Expand Up @@ -48,4 +48,5 @@
.footer {
width: 85vw;
}
}
}

6 changes: 3 additions & 3 deletions frontend/src/styles/Header.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.header {
background-color: #f1f1f1;
// background-color: #f1f1f1;
height: 9vh;
max-height: 70px;
min-height: 40px;
Expand All @@ -8,9 +8,9 @@

.header .main-site-link {
align-self: center;
margin-right: 3vw;
margin-left: 2vw;
position: absolute;
right: 0vw;
left: 0vw;

}

Expand Down
123 changes: 123 additions & 0 deletions frontend/src/styles/KoFi.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
img.kofiimg {
display: initial !important;
vertical-align: middle;
height: 13px !important;
width: 20px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
border: none;
margin-top: 0;
margin-right: 5px !important;
margin-left: 0 !important;
margin-bottom: 3px !important;
content: url('https://storage.ko-fi.com/cdn/cup-border.png');
}
.kofiimg:after {
vertical-align: middle;
height: 25px;
padding-top: 0;
padding-bottom: 0;
border: none;
margin-top: 0;
margin-right: 6px;
margin-left: 0;
margin-bottom: 4px !important;
content: url('https://storage.ko-fi.com/cdn/whitelogo.svg');
}
.btn-container {
display: inline-block !important;
white-space: nowrap;
min-width: 160px;
}
span.kofitext {
color: #fff !important;
letter-spacing: -0.15px !important;
text-wrap: none;
vertical-align: middle;
line-height: 33px !important;
padding: 0;
text-align: center;
text-decoration: none !important;
text-shadow: 0 1px 1px rgba(34, 34, 34, 0.05);
}
.kofitext a {
color: #fff !important;
text-decoration: none !important;
}
.kofitext a:hover {
color: #fff !important;
text-decoration: none;
}
a.kofi-button {
box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
line-height: 36px !important;
min-width: 150px;
display: inline-block !important;
background-color: #29abe0;
padding: 2px 12px !important;
text-align: center !important;
border-radius: 7px;
color: #fff;
cursor: pointer;
overflow-wrap: break-word;
vertical-align: middle;
border: 0 none #fff !important;
font-family: 'Quicksand', Helvetica, Century Gothic, sans-serif !important;
text-decoration: none;
text-shadow: none;
font-weight: 700 !important;
font-size: 14px !important;

.kofitext img.kofiimg {
height: 15px !important;
width: 22px !important;
display: initial;
}

&:visited {
color: #fff !important;
text-decoration: none !important;
}
&:hover {
opacity: 0.85;
color: #f5f5f5 !important;
text-decoration: none !important;
.kofitext img.kofiimg {
animation: kofi-wiggle 3s infinite;
}
}
&:active {
color: #f5f5f5 !important;
text-decoration: none !important;
}
}

@keyframes kofi-wiggle {
0% {
transform: rotate(0) scale(1);
}
60% {
transform: rotate(0) scale(1);
}
75% {
transform: rotate(0) scale(1.12);
}
80% {
transform: rotate(0) scale(1.1);
}
84% {
transform: rotate(-10deg) scale(1.1);
}
88% {
transform: rotate(10deg) scale(1.1);
}
92% {
transform: rotate(-10deg) scale(1.1);
}
96% {
transform: rotate(10deg) scale(1.1);
}
100% {
transform: rotate(0) scale(1);
}
}

0 comments on commit 950764a

Please sign in to comment.