Skip to content

Ryan frontend #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
politeforce merged 8 commits into from
Nov 10, 2025
Merged

Ryan frontend #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
e87f074
haa?
politeforce Oct 31, 2025
01993d5
ples
politeforce Oct 31, 2025
79a9f66
Merge branch 'main' of https://github.com/syliem1/Rift_Rewind into ry…
politeforce Oct 31, 2025
1b99a4b
Merge branch 'main' of https://github.com/syliem1/Rift_Rewind into ry…
politeforce Nov 10, 2025
95d77fa
frontend stuff
politeforce Nov 10, 2025
f18cd27
Background + Detention Slip
syliem1 Nov 10, 2025
9605b53
intro page done
politeforce Nov 10, 2025
40aa046
Merge branch 'main' of https://github.com/syliem1/Rift_Rewind into ry…
politeforce Nov 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 65 additions & 0 deletions front-end/pages/IntroPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import React, { useState, useEffect } from 'react';

export default function ClassroomBackground() {
const [imageUrl, setImageUrl] = useState('');
const [detentionSlipUrl, setDetentionSlipUrl] = useState('');
const [error, setError] = useState('');

useEffect(() => {
const loadImages = async () => {
try {
// Load classroom background
const bgData = await window.fs.readFile('blurry_classroom.png');
const bgBlob = new Blob([bgData], { type: 'blurry_classroom/png' });
const bgUrl = URL.createObjectURL(bgBlob);
setImageUrl(bgUrl);

// Load detention slip
const slipData = await window.fs.readFile('detention_slip.png');
const slipBlob = new Blob([slipData], { type: 'detention_slip/png' });
const slipUrl = URL.createObjectURL(slipBlob);
setDetentionSlipUrl(slipUrl);
} catch (error) {
console.error('Error loading images:', error);
setError(`Failed to load images: ${error.message}`);
}
};

loadImages();
}, []);

return (
<div className="relative w-full h-screen overflow-hidden">
{/* Background Image */}
{imageUrl && (
<div
className="absolute inset-0 bg-cover bg-center"
style={{
backgroundImage: `url(${imageUrl})`,
}}
/>
)}

{/* Error message */}
{error && (
<div className="absolute top-4 left-1/2 transform -translate-x-1/2 bg-red-500 text-white px-6 py-3 rounded-lg z-20">
{error}
</div>
)}

{/* Detention Slip Overlay */}
<div className="relative z-10 flex items-center justify-center h-full p-8">
{detentionSlipUrl && (
<img
src={detentionSlipUrl}
alt="Detention Slip"
className="max-w-4xl w-full h-auto shadow-2xl"
/>
)}
{!detentionSlipUrl && !error && (
<div className="text-white text-xl">Loading images...</div>
)}
</div>
</div>
);
}
4 changes: 3 additions & 1 deletion front-end/pages/_app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import "@/styles/classroom.css";
import "@/styles/FlipBook.css";
import "@/styles/FlipPage.css";
import "@/styles/Summary.css";
import "@/styles/detentionslip.css";
import "@/styles/index.css";

export default function App({ Component, pageProps }) {
return (
Expand All @@ -16,4 +18,4 @@ export default function App({ Component, pageProps }) {
</main>
</>
);
}
}
183 changes: 36 additions & 147 deletions front-end/pages/book.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,155 +105,44 @@ export default function BookPage() {
</span>
<span className="page turn page-5">:3</span>
<span className="cover"></span>
<span className="page page-6">Page 5</span>
<span className="page page-7">Page 4</span>
<span className="page page-8">
Page 3
{bookmarks
.filter((b) => b.page === 8)
.map((b, i) => (
<div
key={i}
onClick={(e) => handleBookmarkClick(e, b.page, b.opposite)}
className={`bookmark-container bookmark ${
bookFullscreen
? "opacity-100"
: "pointer-events-none opacity-0"
}`}
style={{
top: b.y,
}}
>
<svg viewBox="0 0 300 100" preserveAspectRatio="none">
<polygon
points="0,0 260,0 300,50 260,100 0,100"
fill="#77425f"
stroke="#5a2f49"
strokeWidth="1"
/>
<polygon
points="5,5 255,5 296,50 254,95 5,95"
fill="none"
stroke="white"
strokeWidth="2"
strokeDasharray="8,6"
/>
<text
x="150"
y="58"
textAnchor="middle"
fill="white"
fontWeight="bold"
fontFamily="sans-serif"
>
{b.label}
</text>
</svg>
</div>
))}
</span>
<span className="page page-9">
Page 2
{bookmarks
.filter((b) => b.page === 9)
.map((b, i) => (
<div
key={i}
onClick={(e) => handleBookmarkClick(e, b.page, b.opposite)}
className={`bookmark-container bookmark ${
bookFullscreen
? "opacity-100"
: "pointer-events-none opacity-0"
}`}
style={{
top: b.y,
}}
>
<svg viewBox="0 0 300 100" preserveAspectRatio="none">
<polygon
points="0,0 260,0 300,50 260,100 0,100"
fill="#77425f"
stroke="#5a2f49"
strokeWidth="1"
/>
<polygon
points="5,5 255,5 296,50 254,95 5,95"
fill="none"
stroke="white"
strokeWidth="2"
strokeDasharray="8,6"
/>
<text
x="150"
y="58"
textAnchor="middle"
fill="white"
fontWeight="bold"
fontFamily="sans-serif"
>
{b.label}
</text>
</svg>
</div>
))}
</span>
<span className="page page-10">
<span className="page-text">Placeholder Text</span>
{bookmarks
.filter((b) => b.page === 10)
.map((b, i) => (
<div
key={i}
onClick={(e) => handleBookmarkClick(e, b.page, b.opposite)}
className={`bookmark-container bookmark ${
bookFullscreen
? "opacity-100"
: "pointer-events-none opacity-0"
}`}
style={{
top: b.y,
}}
>
<svg viewBox="0 0 300 100" preserveAspectRatio="none">
<polygon
points="0,0 260,0 300,50 260,100 0,100"
fill="#77425f"
stroke="#5a2f49"
strokeWidth="1"
/>
<polygon
points="5,5 255,5 296,50 254,95 5,95"
fill="none"
stroke="white"
strokeWidth="2"
strokeDasharray="8,6"
/>
<text
x="150"
y="58"
textAnchor="middle"
fill="white"
fontWeight="bold"
fontFamily="sans-serif"
>
{b.label}
</text>
</svg>
</div>
))}
</span>
<span className="page turn page-11">
<span className="flipped-page-content">Placeholder Text</span>
</span>
<span className="page turn page-12 invisible">
<span className="flipped-page-content">Pogg</span>
</span>
<span className="page turn page-13 invisible">
<span className="flipped-page-content">Whoas</span>
</span>

<span className="page">Page 5</span>
<span className="page">Page 4</span>
<span className="page">Page 3</span>
<span className="page">Page 2</span>
<span className="page">What if we have a </span>
<span className="cover turn">Hello</span>
</div>

<div class="bookmark">
<svg viewBox="0 0 300 100" preserveAspectRatio="none">
<defs>
<mask id="cutout">
<polygon points="0,0 260,0 300,50 260,100 0,100" fill="white"/>
<polygon points="10,10 255,10 290,50 255,90 10,90" fill="black"/>
</mask>
</defs>
<polygon
points="0,0 260,0 300,50 260,100 0,100"
fill="#77425f"
stroke="#5a2f49"
stroke-width="1" />
<polygon
points="5,5 255,5 296,50 254,95 5,95"
fill="none"
stroke="white"
stroke-width="2"
stroke-dasharray="8,6" />
<text x="150" y="58" text-anchor="middle" fill="white" font-weight="bold" font-family="sans-serif">Bookmark</text>
</svg>
</div>

{/* Other components that appear after fullscreen */}
<div
className={`absolute inset-0 flex items-center justify-center transition-opacity duration-700 ${
appFullscreen ? 'opacity-100' : 'opacity-0 pointer-events-none'
}`}
>
</div>
</section>
);
}
39 changes: 22 additions & 17 deletions front-end/pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,28 +10,33 @@ export default function Home() {

return (
<section className="fixed left-0 top-0 m-0 flex h-full w-full items-center justify-center overflow-hidden p-0">
{/* Top and bottom background layers */}
<div className="background-top"></div>
<div className="background-bot"></div>
{/* Background */}
<div className="background_full"></div>

{/* Content */}
<div className="z-10 rounded-lg bg-white/80 p-8 text-center shadow-lg">
<h1 className="mb-4 text-4xl font-bold text-dark">Welcome!</h1>
<div className="mt-2 flex items-center space-x-2">
<input
type="text"
value={inputValue}
onChange={handleChange}
placeholder="Enter text here"
className="flex-1 rounded-lg border p-2 text-dark"
/>
<Link href="/FlipBook" className="text-background hover:underline">
<div className="detention_card">
<input type="text" className="riotID_box" placeholder="Riot ID">
</input>
<input type="text" className="tagline_box" placeholder="1234">
</input>
<input type="number" className="num_games_analyzed_box" placeholder="10">
</input>
{/* <Link href="/FlipBook" className="text-background hover:underline">
<button className="rounded-lg bg-[#8b6f4e] px-4 py-2 text-white transition hover:bg-[#73583f]">
Search
</button>
</Link>
</div>
<p className="mt-2 text-dark">Current input: {inputValue}</p>
</Link> */}
<button
className="magical-button"
>
<span className="button-text">Submit</span>
<div className="particles">
<span className="particle"></span>
<span className="particle"></span>
<span className="particle"></span>
<span className="particle"></span>
</div>
</button>
</div>
</section>
);
Expand Down
Binary file added front-end/public/images/blurry_classroom.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added front-end/public/images/detention_slip2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added front-end/public/images/yuumi_txtbox.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 3 additions & 1 deletion front-end/styles/button.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
.magical-button {
position: relative;
position: absolute;
right: 18%;
bottom: 13%;
padding: 12px 28px;
font-size: 18px;
font-weight: 600;
Expand Down
30 changes: 30 additions & 0 deletions front-end/styles/detentionslip.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
.slip-container {
width: 650px;
background: linear-gradient(#1a1a1a, #2b2b2b);
padding: 30px;
border: 6px solid #caa64c;
font-family: "Cinzel", serif;
color: #e7d18c;
}

.label-row {
margin: 12px 0;
font-size: 18px;
}

.lol-input {
background: transparent;
border: none;
border-bottom: 2px solid #caa64c;
color: #caa64c;
font-family: "Cinzel", serif;
font-size: 18px;
width: 250px;
outline: none;
padding: 3px;
}

.lol-input::placeholder {
color: #b9964d;
opacity: 0.7;
}
Loading