Skip to content

Commit

Permalink
Finally pushing new site to prod
Browse files Browse the repository at this point in the history
  • Loading branch information
@confusedcatgirl
confusedcatgirl authored Dec 22, 2024
1 parent c46e3d3 commit 959c473
Show file tree
Hide file tree
Showing 3 changed files with 326 additions and 92 deletions.
211 changes: 119 additions & 92 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,105 +1,132 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Blorb</title>
<link href="https://raw.githubusercontent.com/confusedcatgirl/confusedcatgirl.github.io/main/icon.png" rel="shortcut icon" type="image/x-icon">
</head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Blorb's Website</title>
<link rel="icon" type="image/x-icon" href="https://confusedblorb.org/icon.png">
<link rel="stylesheet" href="style.css">

<script>
var getJSON = function(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'json';
xhr.onload = function() {
var status = xhr.status;
if (status === 200) {
callback(null, xhr.response);
} else {
callback(status, xhr.response);
}
};
xhr.send();
};

<body class="body">
getJSON('https://confusedblorb.org/news.json', function(err, data) {
news1title.textContent = data.articles[0].title
news1date.textContent = data.articles[0].date
news1image.src = data.articles[0].image

<div class="box">
<div>
<img src="https://raw.githubusercontent.com/confusedcatgirl/confusedcatgirl.github.io/main/blorb.webp" class="banner">
<a><br><br><br></a>
</div>

<div style="display: flex; justify-content: center; align-items: center;">
<a href="https://twitch.tv/confusedcatgirl" id="twitch"><img src="https://raw.githubusercontent.com/confusedcatgirl/confusedcatgirl.github.io/main/icons/twitch.webp" class="icon"></a>
<a href="https://github.com/confusedcatgirl" id="github"><img src="https://raw.githubusercontent.com/confusedcatgirl/confusedcatgirl.github.io/main/icons/github.webp" class="icon"></a>
<a href="https://soundcloud.com/confusedcatgirl" id="soundcloud"><img src="https://raw.githubusercontent.com/confusedcatgirl/confusedcatgirl.github.io/main/icons/soundcloud.webp" class="icon"></a>
news2title.textContent = data.articles[1].title
news2date.textContent = data.articles[1].date
news2image.src = data.articles[1].image

news3title.textContent = data.articles[2].title
news3date.textContent = data.articles[2].date
news3image.src = data.articles[2].image
});
</script>
</head>

<body>
<img src="https://confusedblorb.org/blorb.webp" class="banner">

<div class="topnav">
<a class="active" href="#home">Home</a>
<a class="inactive" href="#news">News</a>
<a class="inactive" href="#cloud">Cloud</a>
<a class="inactive" href="#contact">Contact</a>
<a class="inactive" href="#about">About</a>
</div>

<div class="text_area" id="home">
<h2>Home</h2>
<p>Welcome to my little page!</p>
<p>I am Blorb, also known as confusedcatgirl, and I generate AI Artifacts as a Hobby!</p>
<p>I also like to draw sometimes, and code in various languages from time to time.</p>
<p>Most of the time, I am pretty laid back, and I like to talk about video games too!</p>
<p>I like to mess around with game engines, and see what I can make with them.</p>
<br>
<p>While I like to use AI tools, I am extremely hypocritical about using AI in business,</p>
<p>or aggressively promoting it, or calling things that should not be called that an "AI".</p>
<p>I also believe that AI is a tool that should be used more carefully, and not to create</p>
<p>stuff like deepfakes. Another one of my beliefs is that AI media should be something</p>
<p>that cannot be demanded money for. After all, it is essentially just copying homework.</p>
<br>
<p>This page is rather short as of right now, but I hope to extend it into a lot more!</p>
</div>

<div class="text_area" id="news">
<h2>News</h2>
<div class="news_area">
<div class="news_div">
<h3 id="news1title"></h3>
<p id="news1date"></p>
<img class="news_image" id="news1image" src="">
</div>

<div class="news_div">
<h3 id="news2title"></h3>
<p id="news2date"></p>
<img class="news_image" id="news2image" src="">
</div>

<div class="news_div">
<h3 id="news3title"></h3>
<p id="news3date"></p>
<img class="news_image" id="news3image" src="">
</div>
</div>

<a><br></a><p id="separator1">Partially NSFW</p>

<div>
<a href="https://x.com/darkmothlady" id="twitter"><img src="https://raw.githubusercontent.com/confusedcatgirl/confusedcatgirl.github.io/main/icons/twitter.webp" class="icon"></a>
<a href="https://anilist.co/user/confusedcatgirl" id="anilist"><img src="https://raw.githubusercontent.com/confusedcatgirl/confusedcatgirl.github.io/main/icons/anilist.webp" class="icon"></a>
<a href="news.html" class="button">More News</a>
</div>

<div class="text_area" id="cloud">
<h2>Cloud</h2>
<p>Running locally at my place, this server is only available to a select few. It has been properly configured to utilize HSTS and HTTPS.</p>
<p>Only a select few, including myself, have access to it, mostly to manage tasks more easily, but also to store files etc.</p>
<p>It is based on nextcloud, and is very easy to set up for your own home usage, so go check them out!</p>
<a href="https://cloud.confusedblorb.org/index.php/" style="display: block; margin: 10px; text-align: center; max-width: 100%;" class="button">
Continue to the Cloud Login</a>
</div>

<div class="text_area" id="contact">
<h2>Contact</h2>

<p class="centered">Safe for Work:</p>
<div class="centered">
<a href="https://twitch.tv/confusedcatgirl"><img src="https://confusedblorb.org/icons/twitch.webp" class="icon"></a>
<a href="https://github.com/confusedcatgirl"><img src="https://confusedblorb.org/icons/github.webp" class="icon"></a>
</div>

<a><br></a><p id="separator2">NSFW</p>

<div style="display: flex; justify-content: center; align-items: center;">
<a href="https://www.deviantart.com/confusedcatgirl" id="deviantart"><img src="https://raw.githubusercontent.com/confusedcatgirl/confusedcatgirl.github.io/main/icons/deviantart.webp" class="icon"></a>
<p class="centered">Can contain NSFW content:</p>
<div class="centered">
<a href="https://x.com/darkmothlady"><img src="https://confusedblorb.org/icons/twitter.webp" class="icon"></a>
<a href="https://anilist.co/user/confusedcatgirl"><img src="https://confusedblorb.org/icons/anilist.webp" class="icon"></a>
</div>

<div id="info" style="font-size: 75%; display: inline;">
<a><br>© 2023 - 2024 confusedcatgirl - Banner by </a>
<a href="https://mooshieblob.com">mooshieblob</a>
<p class="centered">Exclusively NSFW:</p>
<div class="centered">
<a href="https://www.deviantart.com/confusedcatgirl"><img src="https://confusedblorb.org/icons/deviantart.webp" class="icon"></a>
</div>
</div>


<style>
html { height: 100%; }

* { font-family: 'Trebuchet MS', sans-serif; }

body {
margin: 0;
color: #333;
background-color: #fff;
min-height: 100%;
margin: 0;
font-size: 16px;
line-height: 20px;
background-color: #eef3ff;
background-image: url("https://raw.githubusercontent.com/confusedcatgirl/confusedcatgirl.github.io/main/background.webp");
background-position: 50%;
background-size: cover;
background-clip: border-box;
background-repeat: no-repeat;
background-attachment: fixed;
padding-top: 38px;
padding-left: 59px;
padding-right: 59px;
}

html, body {
margin: 0;
height: 100%;
overflow: hidden
}

.box {
background-color: rgba(160, 160, 255, 0.95);
border-radius: 15px;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 120%;
padding: 25px 25px 5px 25px;
width: 55%;
box-shadow: 0 4px 30px 0 rgba(0, 0, 0, 0.9), 0 6px 50px 0 rgba(0, 0, 0, 0.40);
}

.banner {
width: 75%;
transform: translate(16%, 0%);
}

.icon {
max-width: 64px;
}

p {
font-size: 75%;
}
</style>

</body></html>
<div class="text_area">
<h2 id="about">About</h2>
<p>© 2023 - 2024 confusedcatgirl</p>
<p>Images used in the News Section have their links in "confusedblorb.org/news.json". These belong to their respective owners.</p>
<a style="padding-left: 32px">Banner by </a><a href="https://www.mooshieblob.com/">mooshieblob 2024</a><br><br>
<a style="padding-left: 32px">Image by </a><a href="https://danbooru.donmai.us/posts/1029426">Yuuki Tatsuya 2011</a>
<p></p>
</div>
</body>
</html>
75 changes: 75 additions & 0 deletions news.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Blorb's Website - News</title>
<link rel="icon" type="image/x-icon" href="https://confusedblorb.org/icon.png">
<link rel="stylesheet" href="style.css">
</head>

<body>
<img src="https://confusedblorb.org/blorb.webp" class="banner">

<div class="topnav">
<a class="active" href="index.html">Home</a>
<a class="inactive" href="#news">News</a>
<a class="inactive" href="#about">About</a>
</div>

<div class="text_area">
<h2>News</h2>
<div class="news_area" id="news">

</div>
</div>

<div class="text_area">
<h2 id="about">About</h2>
<p>© 2023 - 2024 confusedcatgirl</p>
<p>Images used in the News Section have their links in "confusedblorb.org/news.json". These belong to their respective owners.</p>
<a style="padding-left: 32px">Banner by </a><a href="https://www.mooshieblob.com/">mooshieblob 2024</a><br><br>
<a style="padding-left: 32px">Image by </a><a href="https://danbooru.donmai.us/posts/1029426">Yuuki Tatsuya 2011</a>
<p></p>
</div>
</body>

<script>
var getJSON = function(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'json';
xhr.onload = function() {
var status = xhr.status;
if (status === 200) {
callback(null, xhr.response);
} else {
callback(status, xhr.response);
}
};
xhr.send();
};

getJSON('https://confusedblorb.org/news.json', function(err, data) {
data.articles.forEach(article => {
const news_container = document.createElement("div");
const title_container = document.createElement("h3");
const date_container = document.createElement("p");
const image_container = document.createElement("img");

title_container.appendChild(document.createTextNode(article.title));
date_container.appendChild(document.createTextNode(article.date));
image_container.src = article.image;

news_container.className = "news_div";
image_container.className = "news_image";

news_container.appendChild(title_container);
news_container.appendChild(date_container);
news_container.appendChild(image_container);

const element = document.getElementById("news");
element.appendChild(news_container);
});
});
</script>
</html>
Loading

0 comments on commit 959c473

Please sign in to comment.