From 5c185659594f2e69e078da6ffc174a08fef777e9 Mon Sep 17 00:00:00 2001 From: Matthew Iverson Date: Fri, 29 Nov 2024 15:05:12 -0500 Subject: [PATCH] Upload files to "static/css" --- static/css/hacker_theme.css | 49 +++++++++++++++ static/css/halloween_theme.css | 3 + static/css/xmas_theme.css | 106 +++++++-------------------------- 3 files changed, 72 insertions(+), 86 deletions(-) create mode 100644 static/css/hacker_theme.css diff --git a/static/css/hacker_theme.css b/static/css/hacker_theme.css new file mode 100644 index 0000000..77c1580 --- /dev/null +++ b/static/css/hacker_theme.css @@ -0,0 +1,49 @@ +/* hacker_theme.css */ +body { + background-color: #000000; /* Solid black background */ + color: #22eb10; /* Bright green text */ + font-family: 'Arial', sans-serif; + background-image: url('/static/Pictures/hacker.jpg'); /* Hacker-themed image */ + background-size: cover; /* Cover the screen */ + background-attachment: fixed; /* Fixed background */ +} + +h1, h2, h3, p { + color: #22eb10; /* Bright green for headings and text */ +} + +a { + color: #22eb10; /* Bright green for links */ + text-decoration: none; + font-weight: bold; +} + +a:hover { + color: #00ff00; /* Slightly brighter green for hover effect */ + text-decoration: underline; +} + +button, .link-button { + background-color: #0b6619; /* Dark green button background */ + color: #22eb10; /* Bright green text */ + border: none; + padding: 10px 20px; + border-radius: 5px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + transition: background-color 0.3s ease, transform 0.2s ease; + text-decoration: none; /* Remove underline for links styled as buttons */ + font-weight: bold; /* Consistent font weight */ + display: inline-block; /* Ensure consistent button-like behavior */ + text-align: center; +} + +button:hover, .link-button:hover { + background-color: #0d7a1f; /* Brighter green on hover */ + transform: scale(1.05); /* Slight zoom effect */ + cursor: pointer; +} + +button:active, .link-button:active { + background-color: #094d14; /* Darker green when pressed */ + transform: scale(0.98); /* Slight shrink on click */ +} diff --git a/static/css/halloween_theme.css b/static/css/halloween_theme.css index 4311597..1b12bcc 100644 --- a/static/css/halloween_theme.css +++ b/static/css/halloween_theme.css @@ -3,6 +3,9 @@ body { background-color: #000000; color: #ffa500; font-family: 'Arial', sans-serif; + background-image: url('/static/Pictures/halloween.jpg'); + background-size: cover; /* Cover the whole screen */ + background-attachment: fixed; /* Fixed background */ } h1, h2, h3, p { diff --git a/static/css/xmas_theme.css b/static/css/xmas_theme.css index 350ec0c..82d9971 100644 --- a/static/css/xmas_theme.css +++ b/static/css/xmas_theme.css @@ -1,136 +1,70 @@ /* xmas_theme.css */ body { - background-color: #d32f2f; /* Festive red background */ - color: #ffffff; /* White text for contrast */ + background-color: #ffffff; /* White background for snow-like effect */ + color: #006400; /* Dark green text */ font-family: 'Arial', sans-serif; - background-image: url('/static/images/snowflake-pattern.png'); /* Optional: subtle snowflake background */ - background-size: cover; - background-attachment: fixed; + background-image: url('/static/Pictures/xmas_tree.jpg'); /* Tree PNG for festive vibe */ + background-size: cover; /* Cover the whole screen */ + background-attachment: fixed; /* Fixed background */ } h1, h2, h3, p { - color: #ffeb3b; /* Cheerful yellow for headings */ + color: #d32f2f; /* Festive red for headings */ } a { - color: #4caf50; /* Xmas green for links */ + color: #006400; /* Dark green for links */ text-decoration: none; } a:hover { - color: #ffffff; /* White for hover effect */ + color: #ff0000; /* Red hover effect */ text-decoration: underline; } button { - background-color: #4caf50; /* Xmas green button background */ + background-color: #d32f2f; /* Festive red button background */ color: #ffffff; /* White text */ border: none; padding: 10px 20px; border-radius: 5px; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); transition: background-color 0.3s ease; } button:hover { - background-color: #388e3c; /* Darker green on hover */ + background-color: #b71c1c; /* Darker red on hover */ cursor: pointer; } .navbar { - background-color: #b71c1c; /* Deep red navbar */ - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + background-color: #006400; /* Green navbar */ + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .navbar a { - color: #ffeb3b; /* Yellow links */ + color: #ffffff; /* White text for navbar links */ font-weight: bold; } .navbar a:hover { - color: #ffffff; /* White hover effect */ -} - -.container { - max-width: 1200px; - margin: 0 auto; - padding: 20px; + color: #ffeb3b; /* Golden yellow hover effect */ } .card { - background-color: #4caf50; /* Xmas green for cards */ + background-color: #008000; /* Xmas green for cards */ border-radius: 8px; padding: 20px; margin-bottom: 20px; color: #ffffff; /* White text on cards */ - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .card-header { font-size: 1.5rem; - color: #ffffff; /* White headers inside cards */ + color: #ff0000; /* Red headers inside cards */ font-weight: bold; - border-bottom: 2px solid #ffeb3b; /* Yellow underline for card headers */ + border-bottom: 2px solid #ffeb3b; /* Golden yellow underline for card headers */ padding-bottom: 10px; margin-bottom: 15px; -} - -input[type="text"], textarea { - width: 100%; - padding: 10px; - border: 1px solid #ffeb3b; /* Yellow borders */ - border-radius: 5px; - background-color: #b71c1c; /* Deep red input background */ - color: #ffffff; /* White text for contrast */ - margin-bottom: 15px; -} - -input[type="submit"], input[type="button"] { - background-color: #4caf50; /* Green buttons */ - color: white; - border: none; - padding: 10px 20px; - border-radius: 5px; - cursor: pointer; - font-size: 1rem; - transition: background-color 0.3s ease; -} - -input[type="submit"]:hover, input[type="button"]:hover { - background-color: #388e3c; /* Darker green on hover */ -} - -footer { - background-color: #263238; /* Neutral dark gray for footer */ - color: #ffffff; - text-align: center; - padding: 20px; - border-top: 2px solid #ffeb3b; /* Festive yellow border */ -} - -footer a { - color: #4caf50; /* Green links */ -} - -footer a:hover { - color: #ffeb3b; /* Yellow hover effect */ -} - -/* Additional Xmas touches */ -.snowflake { - font-size: 2rem; - color: #ffffff; - animation: fall 10s linear infinite; - position: absolute; -} - -@keyframes fall { - 0% { - top: -10%; - transform: translateX(0); - } - 100% { - top: 100%; - transform: translateX(20px); - } -} +} \ No newline at end of file