Overhaul styles and tighten security
This commit is contained in:
colevr
parent
dbc3a43735
commit
4c475d4409
7 changed files with 95 additions and 76 deletions
|
|
@ -13,7 +13,7 @@
|
|||
}
|
||||
|
||||
#activity-tab::-webkit-scrollbar-thumb {
|
||||
background: #8c52ff66;
|
||||
background: color-mix(in srgb, var(--accent-color) 40%, transparent);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
|
@ -50,8 +50,8 @@
|
|||
}
|
||||
|
||||
.filter-btn.active {
|
||||
background: #6d44b8;
|
||||
box-shadow: 0 0 8px #8c52ff;
|
||||
background: var(--accent-color);
|
||||
box-shadow: 0 0 8px var(--accent-color);
|
||||
}
|
||||
|
||||
.activity-wrapper {
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
background: #1b1429;
|
||||
padding: 12px;
|
||||
border-radius: 12px;
|
||||
box-shadow: inset 0 0 10px #8c52ff20;
|
||||
box-shadow: inset 0 0 10px var(--accent-color)20;
|
||||
}
|
||||
|
||||
.activity-icon {
|
||||
|
|
@ -71,7 +71,7 @@
|
|||
object-fit: cover;
|
||||
flex-shrink: 0;
|
||||
border: 2px solid #b592ff;
|
||||
box-shadow: 0 0 10px #8c52ff90;
|
||||
box-shadow: 0 0 10px var(--accent-color)90;
|
||||
}
|
||||
|
||||
.activity-info {
|
||||
|
|
@ -155,7 +155,7 @@
|
|||
}
|
||||
|
||||
.pagination-controls button:hover {
|
||||
background: #8c52ff;
|
||||
background: var(--accent-color);
|
||||
}
|
||||
|
||||
#activity-loading {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,27 @@
|
|||
:root {
|
||||
--bg-color: #0d0b16;
|
||||
--text-color: #e6dbff;
|
||||
--accent-color: #ff6ec7;
|
||||
--card-bg: #1a1329;
|
||||
--card-border: #3b2a60;
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #0d0b16;
|
||||
color: #e6dbff;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
font-family: 'Inter', system-ui, sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.background-scroll {
|
||||
|
|
@ -29,7 +43,7 @@ body {
|
|||
font-size: clamp(2rem, 5vw, 4rem); /* Responsive font size */
|
||||
font-weight: bold;
|
||||
color: #2d1d4a;
|
||||
text-shadow: 0 0 10px #8c52ff20;
|
||||
text-shadow: 0 0 10px var(--accent-color)20;
|
||||
user-select: none;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
|
|
@ -86,8 +100,8 @@ body {
|
|||
}
|
||||
|
||||
.id-card {
|
||||
background: linear-gradient(145deg, #1a1329, #120d1f);
|
||||
border: 2px solid #3b2a60;
|
||||
background: linear-gradient(145deg, var(--card-bg), #120d1f);
|
||||
border: 2px solid var(--card-border);
|
||||
border-radius: 20px;
|
||||
width: 100%;
|
||||
max-width: 1000px;
|
||||
|
|
@ -98,7 +112,7 @@ body {
|
|||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
box-shadow: 0 0 25px rgba(140, 82, 255, 0.4);
|
||||
box-shadow: 0 0 25px var(--accent-color);
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
|
@ -120,9 +134,9 @@ body {
|
|||
}
|
||||
|
||||
.card-tab {
|
||||
background: #1a1329;
|
||||
background: var(--card-bg);
|
||||
color: #bfaaff;
|
||||
border: 2px solid #3b2a60;
|
||||
border: 2px solid var(--card-border);
|
||||
padding: 6px 16px;
|
||||
border-radius: 8px;
|
||||
font-weight: bold;
|
||||
|
|
@ -132,7 +146,7 @@ body {
|
|||
}
|
||||
|
||||
.card-tab.active {
|
||||
background: #8c52ff;
|
||||
background: var(--accent-color);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
|
@ -162,4 +176,6 @@ body {
|
|||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
}
|
||||
:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px;}
|
||||
|
||||
|
|
|
|||
|
|
@ -34,8 +34,8 @@
|
|||
height: 100px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 2px solid #6d44b8;
|
||||
box-shadow: 0 0 12px #8c52ff80;
|
||||
border: 2px solid var(--accent-color);
|
||||
box-shadow: 0 0 12px var(--accent-color)80;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -215,7 +215,7 @@
|
|||
|
||||
.spotify-progress .fill {
|
||||
height: 100%;
|
||||
background: #8c52ff;
|
||||
background: var(--accent-color);
|
||||
border-radius: 2px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@
|
|||
height: 100px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 2px solid #6d44b8;
|
||||
box-shadow: 0 0 12px #8c52ff80;
|
||||
border: 2px solid var(--accent-color);
|
||||
box-shadow: 0 0 12px var(--accent-color)80;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
color: #d2c6f8;
|
||||
text-shadow: 0 0 6px #8c52ff80;
|
||||
text-shadow: 0 0 6px var(--accent-color)80;
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
color: #e6dbff;
|
||||
text-shadow: 0 0 5px #8c52ff55;
|
||||
text-shadow: 0 0 5px var(--accent-color)55;
|
||||
}
|
||||
|
||||
.link {
|
||||
|
|
@ -61,13 +61,13 @@
|
|||
max-width: 260px;
|
||||
text-align: center;
|
||||
transition: background 0.3s, color 0.3s, box-shadow 0.3s;
|
||||
box-shadow: 0 0 8px #8c52ff40;
|
||||
box-shadow: 0 0 8px var(--accent-color)40;
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
background: #8c52ff;
|
||||
background: var(--accent-color);
|
||||
color: #fff;
|
||||
box-shadow: 0 0 12px #8c52ff, 0 0 24px #8c52ff99;
|
||||
box-shadow: 0 0 12px var(--accent-color), 0 0 24px var(--accent-color)99;
|
||||
}
|
||||
|
||||
.social-link {
|
||||
|
|
@ -99,7 +99,7 @@
|
|||
flex-direction: column;
|
||||
gap: 16px;
|
||||
margin-top: 12px;
|
||||
box-shadow: inset 0 0 10px #8c52ff20;
|
||||
box-shadow: inset 0 0 10px var(--accent-color)20;
|
||||
}
|
||||
|
||||
.logs-tab-content {
|
||||
|
|
@ -124,7 +124,7 @@
|
|||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 2px solid #b592ff;
|
||||
box-shadow: 0 0 10px #8c52ff90;
|
||||
box-shadow: 0 0 10px var(--accent-color)90;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
|
@ -135,7 +135,7 @@
|
|||
object-fit: cover;
|
||||
flex-shrink: 0;
|
||||
border: 2px solid #b592ff;
|
||||
box-shadow: 0 0 10px #8c52ff90;
|
||||
box-shadow: 0 0 10px var(--accent-color)90;
|
||||
}
|
||||
|
||||
/* Center text in Spotify activity */
|
||||
|
|
@ -204,7 +204,7 @@
|
|||
|
||||
.spotify-progress .fill {
|
||||
height: 100%;
|
||||
background: #8c52ff;
|
||||
background: var(--accent-color);
|
||||
border-radius: 2px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
margin-top: 0;
|
||||
text-align: center;
|
||||
color: #d2c6f8;
|
||||
text-shadow: 0 0 6px #8c52ff80;
|
||||
text-shadow: 0 0 6px var(--accent-color)80;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
}
|
||||
|
||||
#projects-tab::-webkit-scrollbar-thumb {
|
||||
background: #8c52ff66;
|
||||
background: color-mix(in srgb, var(--accent-color) 40%, transparent);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
|
@ -67,7 +67,7 @@
|
|||
justify-content: center;
|
||||
color: #e6dbff;
|
||||
font-weight: bold;
|
||||
border-bottom: 2px solid #6d44b8;
|
||||
border-bottom: 2px solid var(--accent-color);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -107,7 +107,7 @@
|
|||
.coming-soon {
|
||||
margin-top: 10px;
|
||||
font-size: 1.1rem;
|
||||
color: #8c52ff;
|
||||
color: var(--accent-color);
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
}
|
||||
|
|
|
|||
85
index.html
85
index.html
|
|
@ -1,44 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>cole's website</title>
|
||||
<link rel="icon" type="image/png" href="icons/webicon.png" />
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<title>Cole's Website</title>
|
||||
<link rel="icon" type="image/png" href="icons/webicon.png">
|
||||
|
||||
<link rel="stylesheet" href="css/global.css" />
|
||||
<link rel="stylesheet" href="css/home.css" />
|
||||
<link rel="stylesheet" href="css/activity.css" />
|
||||
<link rel="stylesheet" href="css/presence.css" />
|
||||
<link rel="stylesheet" href="css/projects.css" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="css/global.css">
|
||||
<link rel="stylesheet" href="css/home.css">
|
||||
<link rel="stylesheet" href="css/activity.css">
|
||||
<link rel="stylesheet" href="css/presence.css">
|
||||
<link rel="stylesheet" href="css/projects.css">
|
||||
<link rel="stylesheet" href="css/mobile.css" media="(max-width: 768px)">
|
||||
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' https: data:; script-src 'self'; connect-src 'self' https:; base-uri 'none'; object-src 'none'; form-action 'none'; upgrade-insecure-requests">
|
||||
<meta name="referrer" content="same-origin">
|
||||
|
||||
<script>
|
||||
const isMobile = /iPhone|iPad|iPod|Android|webOS|BlackBerry|Windows Phone/i.test(navigator.userAgent);
|
||||
if (isMobile) {
|
||||
document.write('<link rel="stylesheet" href="css/mobile.css">');
|
||||
}
|
||||
</script>
|
||||
|
||||
<meta property="og:title" content="coles website! its awesome!" />
|
||||
<meta property="og:description" content="fuck you!" />
|
||||
<meta property="og:image" content="icons/webicon2.png" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://cole.ong" />
|
||||
<meta property="og:title" content="Cole's Website">
|
||||
<meta property="og:description" content="Welcome to Cole's personal website">
|
||||
<meta property="og:image" content="icons/webicon2.png">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://cole.ong">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="background-scroll">
|
||||
<div class="scrolling-row scroll-left">
|
||||
<div class="inner-scroll">colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ </div>
|
||||
<div class="inner-scroll">colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ </div>
|
||||
</div>
|
||||
<div class="scrolling-row scroll-right">
|
||||
<div class="inner-scroll">colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ </div>
|
||||
<div class="inner-scroll">colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ colevr ・ </div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="center-wrapper">
|
||||
<div class="id-card" id="main-card">
|
||||
|
||||
<div class="card-tabs">
|
||||
<button class="card-tab active" data-tab="home">Home</button>
|
||||
<button class="card-tab" data-tab="activity">Recent Activity</button>
|
||||
|
|
@ -50,36 +53,35 @@
|
|||
<div class="left-section">
|
||||
<div class="center-content">
|
||||
<div class="status-wrapper">
|
||||
<img src="icons/colespfp.gif" alt="Profile Picture" />
|
||||
<img src="icons/colespfp.gif" alt="Profile Picture">
|
||||
<div class="status-dot status-offline"></div>
|
||||
</div>
|
||||
<div class="username">colevr</div>
|
||||
</div>
|
||||
<div class="discord-box" id="discord-activity">Loading Discord activity...</div>
|
||||
</div>
|
||||
|
||||
<div class="right-section">
|
||||
<div class="intro">Hi, I'm Cole!</div>
|
||||
<a href="https://www.youtube.com/@colevrrr" class="link social-link" target="_blank">
|
||||
<img src="icons/yt.svg" class="icon" /> YouTube
|
||||
<img src="icons/yt.svg" class="icon" alt="YouTube"> YouTube
|
||||
</a>
|
||||
<a href="https://github.com/colevrya" class="link social-link" target="_blank">
|
||||
<img src="icons/github.svg" class="icon" /> GitHub
|
||||
<img src="icons/github.svg" class="icon" alt="GitHub"> GitHub
|
||||
</a>
|
||||
<a href="https://discord.gg/nqJv5czwQG" class="link social-link" target="_blank">
|
||||
<img src="icons/discord.svg" class="icon" /> Discord
|
||||
<img src="icons/discord.svg" class="icon" alt="Discord"> Discord
|
||||
</a>
|
||||
<a href="https://x.com/coledotvr" class="link social-link" target="_blank">
|
||||
<img src="icons/twitter.svg" class="icon" /> Twitter
|
||||
<img src="icons/twitter.svg" class="icon" alt="Twitter"> Twitter
|
||||
</a>
|
||||
<a href="https://steamcommunity.com/id/colevryt/" class="link social-link" target="_blank">
|
||||
<img src="icons/steam.svg" class="icon" /> Steam
|
||||
<img src="icons/steam.svg" class="icon" alt="Steam"> Steam
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="activity-tab" class="tab-page" style="display: none;">
|
||||
<div id="activity-tab" class="tab-page" style="display:none;">
|
||||
<div class="logs-tab-content">
|
||||
<h2>Recent Activity</h2>
|
||||
<div class="activity-filters">
|
||||
|
|
@ -92,7 +94,10 @@
|
|||
<div class="pagination-controls">
|
||||
<label>Show per page:
|
||||
<select id="activity-per-page" onchange="renderActivityLogs()">
|
||||
<option>10</option><option selected>30</option><option>50</option><option>100</option>
|
||||
<option>10</option>
|
||||
<option selected>30</option>
|
||||
<option>50</option>
|
||||
<option>100</option>
|
||||
</select>
|
||||
</label>
|
||||
<div id="activity-pages" data-page="1"></div>
|
||||
|
|
@ -100,7 +105,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div id="projects-tab" class="tab-page" style="display: none;">
|
||||
<div id="projects-tab" class="tab-page" style="display:none;">
|
||||
<div class="projects-content">
|
||||
<h2>My Projects</h2>
|
||||
<div class="projects-grid">
|
||||
|
|
@ -117,24 +122,22 @@
|
|||
<div class="coming-soon">more stuff here soon!!</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="js/utils.js"></script>
|
||||
<script src="js/firebase.js"></script>
|
||||
<script src="js/activity.js"></script>
|
||||
<script src="js/presence.js"></script>
|
||||
<script src="js/navigation.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
|
||||
<script type="module" src="js/utils.js"></script>
|
||||
<script type="module" src="js/firebase.js"></script>
|
||||
<script type="module" src="js/activity.js"></script>
|
||||
<script type="module" src="js/presence.js"></script>
|
||||
<script type="module" src="js/navigation.js"></script>
|
||||
<script type="module" src="js/main.js"></script>
|
||||
<script>
|
||||
if (isMobile) {
|
||||
const s = document.createElement('script');
|
||||
s.src = 'js/mobile.js';
|
||||
document.body.appendChild(s);
|
||||
s.type = 'module';
|
||||
document.head.appendChild(s);
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue