codegirl007
/
sponsorahacker
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

A bunch of clean up and adding new pages

master
Stephanie Gredell 1 year ago
parent
499bba926f
commit
e13188095c
11 changed files with 425 additions and 30 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 14
      assets/css/style.css
  2. 2
      main.go
  3. 12
      pages/home.go
  4. 12
      pages/welcome.go
  5. 12
      pages/wishlist.go
  6. 12
      templates/apply.html
  7. 5
      templates/footer.html
  8. 15
      templates/header.html
  9. 7
      templates/logout-button.html
  10. 161
      templates/welcome.html
  11. 203
      templates/wishlist.html

14
assets/css/style.css
Unescape View File

@ -4,6 +4,7 @@ body {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-size: 16px; font-size: 16px;
font-family: "Helvetica Neue", Helvetica, serif;
} }
.header { .header {
@ -143,3 +144,16 @@ body {
color: #495057; color: #495057;
line-height: 1.6; line-height: 1.6;
} }
.footer {
background-color: #457B9D; /* Muted blue */
color: #FFFFFF; /* White text */
text-align: center;
padding: 15px 10px;
}
.footer a {
color: #A3C1AD; /* Muted green */
text-decoration: none;
font-weight: bold;
}

2
main.go
Unescape View File

@ -37,6 +37,8 @@ func main() {
// pages routes // pages routes
r.GET("/", pages.Home) r.GET("/", pages.Home)
r.GET("/login", pages.Login) r.GET("/login", pages.Login)
r.GET("/welcome", pages.Welcome)
r.GET("/wishlist", pages.Wishlist)
runErr := r.Run(":8080") runErr := r.Run(":8080")

12
pages/home.go
Unescape View File

@ -6,9 +6,7 @@ import (
"github.com/joho/godotenv" "github.com/joho/godotenv"
"log" "log"
"net/http" "net/http"
"os"
"sponsorahacker/db" "sponsorahacker/db"
"sponsorahacker/twitch"
"sponsorahacker/utils" "sponsorahacker/utils"
) )
@ -21,19 +19,11 @@ func Home(c *gin.Context) {
isLoggedIn := utils.CheckIfLoggedIn(c) isLoggedIn := utils.CheckIfLoggedIn(c)
fmt.Println("isLoggedIn:", isLoggedIn) fmt.Println("isLoggedIn:", isLoggedIn)
_, err := db.NewDbClient("libsql://sponsorahacker-stephanie-gredell.turso.io") _, err := db.NewDbClient()
if err != nil { if err != nil {
log.Fatal(err) log.Fatal(err)
} }
client, twitchErr := twitch.NewTwitchClient(os.Getenv("TWITCH_CLIENT_ID"), os.Getenv("TWITCH_CLIENT_SECRET"))
if twitchErr != nil {
log.Fatal(twitchErr)
}
client.GetUser()
c.HTML(http.StatusOK, "index.html", gin.H{ c.HTML(http.StatusOK, "index.html", gin.H{
"title": "Sponsor a Hacker", "title": "Sponsor a Hacker",
"isLoggedIn": isLoggedIn, "isLoggedIn": isLoggedIn,

12
pages/welcome.go
Unescape View File

@ -0,0 +1,12 @@
package pages
import (
"github.com/gin-gonic/gin"
"net/http"
)
func Welcome(c *gin.Context) {
c.HTML(http.StatusOK, "welcome.html", gin.H{
"title": "Sponsor A Hacker",
})
}

12
pages/wishlist.go
Unescape View File

@ -0,0 +1,12 @@
package pages
import (
"github.com/gin-gonic/gin"
"net/http"
)
func Wishlist(c *gin.Context) {
c.HTML(http.StatusOK, "wishlist.html", gin.H{
"title": "Sponsor A Hacker",
})
}

12
templates/apply.html
Unescape View File

@ -1,12 +0,0 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="assets/css/login.css" />
</head>
<body>
<h1>
{{ .title }}
</h1>
</body>
</html>

5
templates/footer.html
Unescape View File

@ -0,0 +1,5 @@
{{define "footer"}}
<footer class="footer">
<p>&copy; 2024 Sticky Footer Example. Built with ❤️. <a href="#privacy-policy">Privacy Policy</a></p>
</footer>
{{end}}

15
templates/header.html
Unescape View File

@ -0,0 +1,15 @@
{{define "pageheader"}}
<div class="header">
<img src="assets/images/logo.jpg" class="logo"/>
<h1 class="title">
Sponsor A Hacker
</h1>
{{if eq .isLoggedIn false}}
<a href="/login" class="login-banner-link">Login</a>
{{ else }}
<a href="auth/logout/twitch" class="login-banner-link">Logout</a>
{{ end }}
</div>
{{end}}

7
templates/logout-button.html
Unescape View File

@ -1,7 +0,0 @@
{{ define "logoutButton" }}
<a href="/auth/logout/twitch">
<button style="font-size: 18px; padding: 10px 20px; background-color: #9147ff; color: white; border: none; border-radius: 5px; cursor: pointer;">
Logout
</button>
</a>
{{ end }}

161
templates/welcome.html
Unescape View File

@ -0,0 +1,161 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="assets/css/style.css" />
<title>Dashboard</title>
<style>
.dashboard-container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.welcome {
text-align: center;
margin-bottom: 30px;
}
.welcome h1 {
color: #457b9d;
margin-bottom: 10px;
}
.welcome p {
font-size: 1.2em;
color: #495057;
}
.section {
margin-bottom: 40px;
padding: 20px;
border-radius: 8px;
}
.section h2 {
color: #457b9d;
margin-bottom: 20px;
text-align: center;
}
.cards {
display: grid;
grid-template-columns: repeat(2, 1fr); /* Two columns layout */
gap: 20px; /* Space between cards */
}
.card {
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
padding: 15px;
text-align: center;
}
.card h3 {
margin: 0 0 10px 0;
color: #495057;
}
.card p {
font-size: 0.9em;
color: #666;
margin-bottom: 15px;
}
.card button {
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #a3c1ad;
color: white;
font-size: 1em;
cursor: pointer;
}
.card button:hover {
background-color: #91a4b1;
}
</style>
</head>
<body>
<div class="header">
<img src="assets/images/logo.jpg" class="logo"/>
<h1 class="title">
{{ .title }}
</h1>
{{if eq .isLoggedIn false}}
<a href="/login" class="login-banner-link">Login</a>
{{ else }}
<a href="auth/logout/twitch" class="login-banner-link">Logout</a>
{{ end }}
</div>
<div class="dashboard-container">
<div class="dashboard-container">
<div class="welcome">
<h1>Welcome, Codegirl007!</h1>
<p>Find your path, fund futures, or inspire a community today.</p>
</div>
<div class="section learners">
<h2>Build Your Tech Future</h2>
<div class="cards">
<div class="card">
<h3>Your Wishlist</h3>
<p>Track your certifications and courses. Update or add goals to keep your community engaged.</p>
<button>Add a Goal</button>
</div>
<div class="card">
<h3>Community Opportunities</h3>
<p>Join upcoming hackathons or community events to grow your skills and network.</p>
<button>View Events</button>
</div>
<div class="card">
<h3>Learning Resources</h3>
<p>Access curated tutorials, guides, and practice challenges to enhance your skills.</p>
<button>Explore Resources</button>
</div>
<div class="card">
<h3>Connect with Mentors</h3>
<p>Get advice and guidance from experienced professionals to boost your learning journey.</p>
<button>Find a Mentor</button>
</div>
</div>
</div>
<div class="section supporters">
<h2>Help Make Dreams Happen</h2>
<div class="cards">
<div class="card">
<h3>Fund a Goal</h3>
<p>Choose a learner’s wishlist item and contribute to their education journey.</p>
<button>Browse Wishlists</button>
</div>
<div class="card">
<h3>Host or Sponsor a Hackathon</h3>
<p>Support innovation by organizing or sponsoring a hackathon for the community.</p>
<button>Get Involved</button>
</div>
<div class="card">
<h3>Support a Streamer</h3>
<p>Boost streamers who are funding education for members of their community.</p>
<button>View Streamers</button>
</div>
<div class="card">
<h3>Track Your Impact</h3>
<p>See the difference your contributions are making through real-time progress updates.</p>
<button>View Impact</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

203
templates/wishlist.html
Unescape View File

@ -0,0 +1,203 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="assets/css/style.css" />
<title>Wishlist</title>
<style>
.wishlist-container {
max-width: 800px;
margin: 30px auto;
padding: 20px;
}
.wishlist-page-header {
text-align: center;
margin-bottom: 40px;
}
.wishlist-page-header h1 {
font-size: 2em;
color: #457B9D; /* Muted blue for main headings */
}
.wishlist-page-header p {
font-size: 1.1em;
color: #495057; /* Slightly darker gray for descriptions */
}
section {
margin-bottom: 40px;
padding: 20px;
background-color: #FFFFFF; /* White for section backgrounds */
border-radius: 8px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}
.add-wishlist h2, .wishlist-items h2 {
margin-bottom: 20px;
font-size: 1.5em;
}
.add-wishlist h2 {
color: #A3C1AD; /* Muted green for emphasis */
}
.wishlist-items h2 {
color: #457B9D; /* Muted blue */
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
font-weight: bold;
margin-bottom: 8px;
color: #495057; /* Dark gray for labels */
}
input, textarea {
width: 100%;
padding: 10px;
font-size: 1em;
border: 1px solid #DDD;
border-radius: 5px;
}
textarea {
resize: none;
height: 100px;
}
.btn {
display: inline-block;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 1em;
cursor: pointer;
}
.primary-btn {
background-color: #457B9D; /* Muted blue */
color: #FFFFFF;
}
.primary-btn:hover {
background-color: #356081;
}
.danger-btn {
background-color: #E57373; /* Light muted red */
color: #FFFFFF;
}
.danger-btn:hover {
background-color: #D32F2F;
}
.items {
display: flex;
flex-direction: column;
gap: 20px;
}
.item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
border: 1px solid #DDD;
border-radius: 5px;
background-color: #F9F9F9; /* Subtle light gray for contrast */
}
.item-info h3 {
margin: 0 0 5px 0;
font-size: 1.2em;
color: #333;
}
.item-info p {
margin: 0;
font-size: 1em;
color: #666;
}
.progress {
font-weight: bold;
color: #457B9D; /* Muted blue for progress text */
}
.footer a:hover {
color: #FFFFFF;
}
@media (max-width: 768px) {
.items {
gap: 15px;
}
.item {
flex-direction: column;
align-items: flex-start;
}
.item button {
margin-top: 10px;
align-self: flex-end;
}
}
</style>
</head>
<body>
{{template "pageheader"}}
<div class="wishlist-container">
<header class="wishlist-page-header">
<h1>Manage Your Wishlist</h1>
<p>Add new goals or track progress on your current items.</p>
</header>
<section class="add-wishlist">
<h2>Add a New Goal</h2>
<form id="add-item-form">
<div class="form-group">
<label for="item-name">Goal Name</label>
<input type="text" id="item-name" name="item-name" placeholder="e.g., Full-Stack Certification" required>
</div>
<div class="form-group">
<label for="item-description">Description</label>
<textarea id="item-description" name="item-description" placeholder="Why is this goal important?" required></textarea>
</div>
<button type="submit" class="btn primary-btn">Add to Wishlist</button>
</form>
</section>
<section class="wishlist-items">
<h2>Your Current Wishlist</h2>
<div class="items">
<div class="item">
<div class="item-info">
<h3>Full-Stack Development Certification</h3>
<p>Progress: <span class="progress">75%</span> funded</p>
</div>
<button class="btn danger-btn">Remove</button>
</div>
<div class="item">
<div class="item-info">
<h3>Data Science Course</h3>
<p>Progress: <span class="progress">40%</span> funded</p>
</div>
<button class="btn danger-btn">Remove</button>
</div>
</div>
</section>
</div>
{{template "footer"}}
</body>
</html>
Write Preview
Loading…
Cancel
Save