Skip to content

Commit

Permalink
Add /attributions.html, restyle pages, add captions for image credits
Browse files Browse the repository at this point in the history
  • Loading branch information
KTrain5169 committed Sep 27, 2024
1 parent 4cac160 commit 7953507
Show file tree
Hide file tree
Showing 8 changed files with 270 additions and 26 deletions.
71 changes: 71 additions & 0 deletions attributions.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Attributions | NotEssential Gallery</title>
<link rel="stylesheet" type="text/css" href="./css/attributions.css">
</head>
<body>
<h1>Attributions</h1>
<p>This page lists the attributions and credits for contributors to the NotEssential gallery.</p>

<div class="maintainer">
<h2>KTrain5369</h2>
<p>Main maintainer of the gallery.</p>
<div class="social-buttons">
<button onclick="toggleSocials('ktrain-bsky')">Bluesky</button>
<button onclick="toggleSocials('ktrain-github')">GitHub</button>
<button onclick="toggleSocials('ktrain-website')">Website</button>
</div>
<div class="social-info" id="ktrain-bsky">
<p>Bluesky: <a href="https://bsky.app/profile/ktrain5369.bsky.social" target="_blank">https://bsky.app/profile/ktrain5369.bsky.social</a></p>
</div>
<div class="social-info" id="ktrain-github">
<p>GitHub: <a href="https://github.com/KTrain5169" target="_blank">https://github.com/KTrain5169</a></p>
</div>
<div class="social-info" id="ktrain-website">
<p>Website: <a href="https://ktrain5169.github.io/" target="_blank">https://ktrain5169.github.io/</a></p>
</div>
</div>

<div class="contributor">
<h2>maskers</h2>
<div class="social-buttons">
<button onclick="toggleSocials('maskers-github')">GitHub</button>
</div>
<div class="social-info" id="maskers-github">
<p>GitHub: <a href="https://github.com/maskersss" target="_blank">https://github.com/maskersss</a></p>
</div>
</div>

<div class="contributor">
<h2>blryface</h2>
<p>A maintainer of the main NotEssential site</p>
<div class="social-buttons">
<button onclick="toggleSocials('blryface-github')">GitHub</button>
<button onclick="toggleSocials('blryface-website')">Website</button>
</div>
<div class="social-info" id="blryface-github">
<p>GitHub: <a href="https://github.com/maskersss" target="_blank">https://github.com/maskersss</a></p>
</div>
<div class="social-info" id="blryface-website">
<p>Website: <a href="https://blurry.gay/" target="_blank">https://blurry.gay/</a></p>
</div>
</div>

<!-- Add more attributions similarly -->

<script>
// Function to toggle visibility of the social info boxes
function toggleSocials(id) {
var element = document.getElementById(id);
if (element.style.display === "none" || element.style.display === "") {
element.style.display = "block";
} else {
element.style.display = "none";
}
}
</script>
</body>
</html>
83 changes: 60 additions & 23 deletions crashes.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,52 @@
<link rel="stylesheet" type="text/css" href="./css/gallery.css">
</head>
<body>
<b>Gallery: Essential confirmed to be cause of crashes</b>
<b>Gallery: Essential confirmed to be cause of issues</b>
<div class="gallery">
<img src="./images/image1.png" alt="Crash image 1" onclick="openModal(this.src)">
<img src="./images/image2.png" alt="Crash image 2" onclick="openModal(this.src)">
<img src="./images/image3.png" alt="Crash image 3" onclick="openModal(this.src)">
<img src="./images/image4.png" alt="Crash image 4" onclick="openModal(this.src)">
<img src="./images/image5.png" alt="Crash image 5" onclick="openModal(this.src)">
<img src="./images/image6.png" alt="Crash image 6" onclick="openModal(this.src)">
<img src="./images/image7.png" alt="Crash image 7" onclick="openModal(this.src)">
<img src="./images/image8.png" alt="Crash image 8" onclick="openModal(this.src)">
<img src="./images/image9.png" alt="Crash image 9" onclick="openModal(this.src)">
<figure>
<img src="./images/image1.png" alt="Crash image 1" onclick="openModal(this.src)">
<figcaption>Provided by KTrain5369</figcaption>
</figure>
<figure>
<img src="./images/image2.png" alt="Crash image 2" onclick="openModal(this.src)">
<figcaption>Provided by KTrain5369</figcaption>
</figure>
<figure>
<img src="./images/image3.png" alt="Crash image 3" onclick="openModal(this.src)">
<figcaption>Provided by KTrain5369</figcaption>
</figure>
<figure>
<img src="./images/image4.png" alt="Crash image 4" onclick="openModal(this.src,)">
<figcaption>Provided by KTrain5369</figcaption>
</figure>
<figure>
<img src="./images/image5.png" alt="Crash image 5" onclick="openModal(this.src)">
<figcaption>Provided by KTrain5369</figcaption>
</figure>
<figure>
<img src="./images/image6.png" alt="Crash image 6" onclick="openModal(this.src)">
<figcaption>Provided by KTrain5369</figcaption>
</figure>
<figure>
<img src="./images/image7.png" alt="Crash image 7" onclick="openModal(this.src)">
<figcaption>Provided by KTrain5369</figcaption>
</figure>
<figure>
<img src="./images/image8.png" alt="Crash image 8" onclick="openModal(this.src)">
<figcaption>Provided by KTrain5369</figcaption>
</figure>
<figure>
<img src="./images/image9.png" alt="Crash image 9" onclick="openModal(this.src)">
<figcaption>Provided by KTrain5369</figcaption>
</figure>
<figure>
<img src="./images/image10.png" alt="Crash image 10" onclick="openModal(this.src)">
<figcaption>Provided by maskers</figcaption>
</figure>
<figure>
<img src="./images/image11.png" alt="Crash image 11" onclick="openModal(this.src)">
<figcaption>Provided by blryface</figcaption>
</figure>
</div>

<div id="imgModal" class="modal" onclick="closeModal()">
Expand All @@ -26,18 +61,20 @@
</div>

<script>
// Function to open the modal
function openModal(imgSrc) {
const modal = document.getElementById("imgModal");
const modalImg = document.getElementById("modalImage");
modal.style.display = "flex";
modalImg.src = imgSrc;
}

// Function to close the modal
function closeModal() {
document.getElementById("imgModal").style.display = "none";
}
</script>
// Function to open the modal and pass the image and caption
function openModal(imgSrc, captionText) {
const modal = document.getElementById("imgModal");
const modalImg = document.getElementById("modalImage");
const modalCaption = document.getElementById("modalCaption");
modal.style.display = "flex";
modalImg.src = imgSrc;
modalCaption.innerText = captionText;
}

// Function to close the modal
function closeModal() {
document.getElementById("imgModal").style.display = "none";
}
</script>
</body>
</html>
114 changes: 114 additions & 0 deletions css/attributions.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
/* General Page Styling */
body {
font-family: 'Arial', sans-serif;
background-color: #1c1c1c; /* Dark background to match site theme */
color: #f0f0f0; /* Light text color */
padding: 20px;
margin: 0;
}

h1, h2 {
text-align: center;
color: #008cff; /* Blue accent color */
font-size: 2em;
}

p {
line-height: 1.6;
color: #cccccc;
font-size: 1.1em;
text-align: center;
}

/* Attribution section styling */
.maintainer {
margin-bottom: 30px;
padding: 20px;
border: 1px solid #00F;
background-color: #292929; /* Matching the dark theme */
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
max-width: 700px;
margin: 20px auto;
text-align: center;
}

.contributor {
margin-bottom: 30px;
padding: 20px;
border: 1px solid #333;
background-color: #292929;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
max-width: 700px;
margin: 20px auto;
text-align: center;
}

h2 {
color: #008cff; /* Blue accent color for person names */
}

.social-buttons {
margin-top: 10px;
}

.social-buttons button {
background-color: #008cff; /* Blue for buttons */
color: #fff;
border: none;
padding: 10px 20px;
margin: 5px;
cursor: pointer;
border-radius: 5px;
font-size: 1em;
transition: background-color 0.3s ease;
}

.social-buttons button:hover {
background-color: #0076d1; /* Slightly darker blue on hover */
}

.social-info {
display: none;
background-color: #2f2f2f;
padding: 15px;
border-radius: 5px;
margin-top: 10px;
color: #cccccc;
transition: opacity 0.3s ease;
}

.social-info a {
color: #008cff;
text-decoration: none;
}

.social-info a:hover {
color: #0076d1;
text-decoration: underline;
}

/* Mobile and responsive adjustments */
@media (max-width: 768px) {
body {
padding: 10px;
}

.person {
padding: 15px;
}

h1 {
font-size: 1.8em;
}

h2 {
font-size: 1.5em;
}

.social-buttons button {
font-size: 0.9em;
padding: 8px 15px;
}
}
22 changes: 22 additions & 0 deletions css/gallery.css
Original file line number Diff line number Diff line change
Expand Up @@ -77,3 +77,25 @@ b {
color: white;
cursor: pointer;
}

/* Styling for the figure and figcaption */
figure {
margin: 10px;
display: inline-block;
text-align: center;
}

figcaption {
margin-top: 8px;
font-size: 14px;
color: #ccc;
}

/* Modal styles for the caption */
.modal figcaption {
margin-top: 15px;
color: #fff;
font-size: 16px;
text-align: center;
}

4 changes: 2 additions & 2 deletions css/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ ul li {

/* Change background color on hover */
ul li:hover {
background-color: #ff91a4;
background-color: #00F;
color: #181818;
}

Expand All @@ -58,7 +58,7 @@ ul li a {
}

ul li a:hover {
text-decoration: none;
text-decoration: underline;
}

/* Ensure everything stacks vertically */
Expand Down
Binary file added images/image10.png
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 images/image11.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion index.html
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
Current galleries:
<br>
<ul>
<li><a href="./crashes.html">Testimonies that Essential causes a fair few crashes</a></li>
<li><a href="./crashes.html">Testimonies that Essential causes a fair few issues</a></li>
</ul>
</body>
</html>

0 comments on commit 7953507

Please sign in to comment.