From 2531a243c109e4b4b3a83c0b8390624e7575049c Mon Sep 17 00:00:00 2001 From: Thaddeus Thomas Date: Mon, 14 Aug 2023 21:23:59 -0600 Subject: [PATCH] fix directory --- .vscode/settings.json | 6 +- _index.html => docs/_index.html | 36 ++++ index.html | 47 +++-- src/css/old_styles.css | 99 +++++++++ src/css/styles.css | 261 +++++++++++++++++++++++- src/css/styles2.css | 344 -------------------------------- src/js/myModal.js | 11 + 7 files changed, 433 insertions(+), 371 deletions(-) rename _index.html => docs/_index.html (62%) create mode 100644 src/css/old_styles.css delete mode 100644 src/css/styles2.css create mode 100644 src/js/myModal.js diff --git a/.vscode/settings.json b/.vscode/settings.json index b6a95ba..e654785 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,10 +1,10 @@ { "python.analysis.extraPaths": [ - "./modules", - "./src/modules" + "./src/app", + "./src/app/modules" ], "python.testing.pytestArgs": [ - "src" + "src/app/tests" ], "python.testing.unittestEnabled": false, "python.testing.pytestEnabled": true diff --git a/_index.html b/docs/_index.html similarity index 62% rename from _index.html rename to docs/_index.html index d32560c..7b7aee5 100644 --- a/_index.html +++ b/docs/_index.html @@ -105,3 +105,39 @@

Welcome to Our Site

+ + + + +
+ Hover over me + Tooltip text +
+ + +
+

This is the content for Accordion 1.

+
+ +
+

This is the content for Accordion 2.

+
+ + +
+ +
+ +
+ Description +
Caption for the image
+
+ + +
+ +
\ No newline at end of file diff --git a/index.html b/index.html index c787992..742fb06 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ Musical Chairs - +
@@ -12,33 +12,35 @@

Welcome to Musical Chairs

-

About

-

This is a project by Thomasthaddeus. You can find more details in the README.

+
+

About

+

This is a project by Thomasthaddeus. You can find more details in the README.

+

Directory Structure

src
- _decorators_main.py - _functions_main.py - main.py + _decorators_main.py + _functions_main.py + main.py
tests
- test_with_classes.py - test_with_heapq.py - test_with_standalone.py - test_with_zip_sorted.py + test_with_classes.py + test_with_heapq.py + test_with_standalone.py + test_with_zip_sorted.py
modules
- with_classes.py - with_heapq.py - with_standalone.py - with_zip_sorted.py + with_classes.py + with_heapq.py + with_standalone.py + with_zip_sorted.py
@@ -50,12 +52,25 @@

Directory Structure

+
+ + +
- - + + + + + diff --git a/src/css/old_styles.css b/src/css/old_styles.css new file mode 100644 index 0000000..d1fd563 --- /dev/null +++ b/src/css/old_styles.css @@ -0,0 +1,99 @@ +/* Base Styles */ +body { + font-family: 'Arial', sans-serif; + line-height: 1.6; + background-color: #f4f4f4; + color: #333; + margin: 0; + padding: 0; +} + +a { + color: #007BFF; + text-decoration: none; + transition: color 0.3s; +} + +a:hover { + color: #0056b3; +} + +h1, h2, h3, h4, h5, h6 { + margin-top: 0; +} + +/* Header Styles */ +header { + background-color: #333; + color: #fff; + text-align: center; + padding: 1rem 0; +} + +/* Main Content Styles */ +main { + padding: 20px; + max-width: 1200px; + margin: 20px auto; + background-color: #fff; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +section { + margin-bottom: 20px; +} + +/* Dropdown Menu Styles */ +.dropdown { + position: relative; + display: inline-block; + margin-right: 20px; +} + +.dropdown-content { + display: none; + position: absolute; + background-color: #f9f9f9; + min-width: 160px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + z-index: 1; + border: 1px solid #ddd; +} + +.dropdown-content a { + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; +} + +.dropdown-content a:hover { + background-color: #f1f1f1; +} + +.dropdown:hover .dropdown-content { + display: block; +} + +/* Footer Styles */ +footer { + background-color: #333; + color: #fff; + text-align: center; + padding: 1rem 0; + margin-top: 20px; +} + + +footer a { + color: #fff; + padding: 5px 10px; + border: 1px solid #fff; + border-radius: 5px; + transition: background-color 0.3s, color 0.3s; +} + +footer a:hover { + background-color: #fff; + color: #333; +} \ No newline at end of file diff --git a/src/css/styles.css b/src/css/styles.css index d1fd563..40f2ab3 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -2,7 +2,7 @@ body { font-family: 'Arial', sans-serif; line-height: 1.6; - background-color: #f4f4f4; + background-color: #e6e6e6; color: #333; margin: 0; padding: 0; @@ -20,11 +20,12 @@ a:hover { h1, h2, h3, h4, h5, h6 { margin-top: 0; + color: #2c3e50; /* Dark blue shade for headers */ } /* Header Styles */ header { - background-color: #333; + background-color: #3498db; /* Bright blue */ color: #fff; text-align: center; padding: 1rem 0; @@ -35,12 +36,15 @@ main { padding: 20px; max-width: 1200px; margin: 20px auto; - background-color: #fff; + background-color: #f5ffe8ea; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } section { margin-bottom: 20px; + padding: 15px; + border-radius: 5px; + background-color: #e9e8eee0; } /* Dropdown Menu Styles */ @@ -48,6 +52,14 @@ section { position: relative; display: inline-block; margin-right: 20px; + background-color: #ecf0f1; /* Light gray */ + padding: 10px; + border-radius: 5px; + transition: background-color 0.3s; +} + +.dropdown:hover { + background-color: #bdc3c7; /* Darker gray on hover */ } .dropdown-content { @@ -58,12 +70,12 @@ section { box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; border: 1px solid #ddd; + border-radius: 5px; } .dropdown-content a { color: black; padding: 12px 16px; - text-decoration: none; display: block; } @@ -77,14 +89,13 @@ section { /* Footer Styles */ footer { - background-color: #333; + background-color: #2c3e50; /* Dark blue */ color: #fff; text-align: center; padding: 1rem 0; margin-top: 20px; } - footer a { color: #fff; padding: 5px 10px; @@ -95,5 +106,239 @@ footer a { footer a:hover { background-color: #fff; - color: #333; -} \ No newline at end of file + color: #2c3e50; /* Dark blue */ +} + +/* README Section */ +.readme { + border: 1px solid #ddd; + padding: 15px; + border-radius: 5px; + background-color: #fff; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +/* Potential Future Structures */ +/* Button Styles */ +.button { + display: inline-block; + padding: 10px 20px; + color: #fff; + background-color: #3498db; /* Bright blue */ + border: none; + border-radius: 5px; + transition: background-color 0.3s; +} + +.button:hover { + background-color: #2980b9; /* Darker blue on hover */ +} + +/* Form Styles */ +form { + max-width: 400px; + margin: 0 auto; +} + +input[type="text"], input[type="email"], input[type="password"], textarea { + width: 100%; + padding: 10px; + margin-bottom: 10px; + border: 1px solid #ddd; + border-radius: 5px; +} + +input[type="submit"] { + cursor: pointer; + background-color: #3498db; /* Bright blue */ + color: #fff; + border: none; + border-radius: 5px; + padding: 10px 20px; + transition: background-color 0.3s; +} + +input[type="submit"]:hover { + background-color: #2980b9; /* Darker blue on hover */ +} + +/* Table Styles */ +table { + width: 100%; + border-collapse: collapse; + margin: 20px 0; +} + +table, th, td { + border: 1px solid #ddd; +} + +th, td { + padding: 10px; + text-align: left; +} + +th { + background-color: #3498db; /* Bright blue */ + color: #fff; +} + +tr:nth-child(even) { + background-color: #f2f2f2; +} + +/* Modal Styles */ +.modal { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.7); + z-index: 1000; +} + +.modal-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + padding: 20px; + background-color: #fff; + width: 80%; + max-width: 500px; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); + border-radius: 5px; +} + +.modal-close { + position: absolute; + top: 10px; + right: 10px; + background: none; + border: none; + font-size: 24px; + cursor: pointer; +} + +/* Tooltip Styles */ +.tooltip { + position: relative; + display: inline-block; +} + +.tooltip .tooltip-text { + visibility: hidden; + width: 120px; + background-color: #555; + color: #fff; + text-align: center; + padding: 5px 0; + border-radius: 6px; + position: absolute; + z-index: 1; + bottom: 125%; /* Position above the tooltip element */ + left: 50%; + margin-left: -60px; + opacity: 0; + transition: opacity 0.3s; +} + +.tooltip:hover .tooltip-text { + visibility: visible; + opacity: 1; +} + +/* Accordion Styles */ +.accordion { + cursor: pointer; + padding: 10px; + width: 100%; + border: none; + text-align: left; + outline: none; + transition: background-color 0.3s; +} + +.accordion:hover { + background-color: #f1f1f1; +} + +.accordion-content { + display: none; + padding: 0 10px; + border-top: 1px solid #ddd; +} + +/* Hero Section */ +.hero { + background-color: #3498db; /* Bright blue */ + color: #fff; + padding: 50px 0; + text-align: center; +} + +.hero h1 { + font-size: 2.5em; + margin-bottom: 10px; +} + +.hero p { + font-size: 1.2em; +} + +/* List Boxes */ +.list-box { + border: 1px solid #ddd; + padding: 20px; + border-radius: 5px; + background-color: #f9f9f9; +} + +.list-box ul { + list-style-type: none; + padding: 0; +} + +.list-box li { + padding: 5px 0; + border-bottom: 1px solid #ddd; +} + +.list-box li:last-child { + border-bottom: none; +} + +/* Picture Boxes */ +.picture-box { + border: 1px solid #ddd; + padding: 10px; + border-radius: 5px; + text-align: center; + background-color: #fff; +} + +.picture-box img { + max-width: 100%; + border-radius: 5px; +} + +.picture-box figcaption { + margin-top: 10px; + font-style: italic; +} + +/* Video Boxes */ +.video-box { + border: 1px solid #ddd; + padding: 10px; + border-radius: 5px; + text-align: center; + background-color: #fff; +} + +.video-box iframe { + max-width: 100%; + border: none; +} diff --git a/src/css/styles2.css b/src/css/styles2.css deleted file mode 100644 index 40f2ab3..0000000 --- a/src/css/styles2.css +++ /dev/null @@ -1,344 +0,0 @@ -/* Base Styles */ -body { - font-family: 'Arial', sans-serif; - line-height: 1.6; - background-color: #e6e6e6; - color: #333; - margin: 0; - padding: 0; -} - -a { - color: #007BFF; - text-decoration: none; - transition: color 0.3s; -} - -a:hover { - color: #0056b3; -} - -h1, h2, h3, h4, h5, h6 { - margin-top: 0; - color: #2c3e50; /* Dark blue shade for headers */ -} - -/* Header Styles */ -header { - background-color: #3498db; /* Bright blue */ - color: #fff; - text-align: center; - padding: 1rem 0; -} - -/* Main Content Styles */ -main { - padding: 20px; - max-width: 1200px; - margin: 20px auto; - background-color: #f5ffe8ea; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); -} - -section { - margin-bottom: 20px; - padding: 15px; - border-radius: 5px; - background-color: #e9e8eee0; -} - -/* Dropdown Menu Styles */ -.dropdown { - position: relative; - display: inline-block; - margin-right: 20px; - background-color: #ecf0f1; /* Light gray */ - padding: 10px; - border-radius: 5px; - transition: background-color 0.3s; -} - -.dropdown:hover { - background-color: #bdc3c7; /* Darker gray on hover */ -} - -.dropdown-content { - display: none; - position: absolute; - background-color: #f9f9f9; - min-width: 160px; - box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); - z-index: 1; - border: 1px solid #ddd; - border-radius: 5px; -} - -.dropdown-content a { - color: black; - padding: 12px 16px; - display: block; -} - -.dropdown-content a:hover { - background-color: #f1f1f1; -} - -.dropdown:hover .dropdown-content { - display: block; -} - -/* Footer Styles */ -footer { - background-color: #2c3e50; /* Dark blue */ - color: #fff; - text-align: center; - padding: 1rem 0; - margin-top: 20px; -} - -footer a { - color: #fff; - padding: 5px 10px; - border: 1px solid #fff; - border-radius: 5px; - transition: background-color 0.3s, color 0.3s; -} - -footer a:hover { - background-color: #fff; - color: #2c3e50; /* Dark blue */ -} - -/* README Section */ -.readme { - border: 1px solid #ddd; - padding: 15px; - border-radius: 5px; - background-color: #fff; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); -} - -/* Potential Future Structures */ -/* Button Styles */ -.button { - display: inline-block; - padding: 10px 20px; - color: #fff; - background-color: #3498db; /* Bright blue */ - border: none; - border-radius: 5px; - transition: background-color 0.3s; -} - -.button:hover { - background-color: #2980b9; /* Darker blue on hover */ -} - -/* Form Styles */ -form { - max-width: 400px; - margin: 0 auto; -} - -input[type="text"], input[type="email"], input[type="password"], textarea { - width: 100%; - padding: 10px; - margin-bottom: 10px; - border: 1px solid #ddd; - border-radius: 5px; -} - -input[type="submit"] { - cursor: pointer; - background-color: #3498db; /* Bright blue */ - color: #fff; - border: none; - border-radius: 5px; - padding: 10px 20px; - transition: background-color 0.3s; -} - -input[type="submit"]:hover { - background-color: #2980b9; /* Darker blue on hover */ -} - -/* Table Styles */ -table { - width: 100%; - border-collapse: collapse; - margin: 20px 0; -} - -table, th, td { - border: 1px solid #ddd; -} - -th, td { - padding: 10px; - text-align: left; -} - -th { - background-color: #3498db; /* Bright blue */ - color: #fff; -} - -tr:nth-child(even) { - background-color: #f2f2f2; -} - -/* Modal Styles */ -.modal { - display: none; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.7); - z-index: 1000; -} - -.modal-content { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - padding: 20px; - background-color: #fff; - width: 80%; - max-width: 500px; - box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); - border-radius: 5px; -} - -.modal-close { - position: absolute; - top: 10px; - right: 10px; - background: none; - border: none; - font-size: 24px; - cursor: pointer; -} - -/* Tooltip Styles */ -.tooltip { - position: relative; - display: inline-block; -} - -.tooltip .tooltip-text { - visibility: hidden; - width: 120px; - background-color: #555; - color: #fff; - text-align: center; - padding: 5px 0; - border-radius: 6px; - position: absolute; - z-index: 1; - bottom: 125%; /* Position above the tooltip element */ - left: 50%; - margin-left: -60px; - opacity: 0; - transition: opacity 0.3s; -} - -.tooltip:hover .tooltip-text { - visibility: visible; - opacity: 1; -} - -/* Accordion Styles */ -.accordion { - cursor: pointer; - padding: 10px; - width: 100%; - border: none; - text-align: left; - outline: none; - transition: background-color 0.3s; -} - -.accordion:hover { - background-color: #f1f1f1; -} - -.accordion-content { - display: none; - padding: 0 10px; - border-top: 1px solid #ddd; -} - -/* Hero Section */ -.hero { - background-color: #3498db; /* Bright blue */ - color: #fff; - padding: 50px 0; - text-align: center; -} - -.hero h1 { - font-size: 2.5em; - margin-bottom: 10px; -} - -.hero p { - font-size: 1.2em; -} - -/* List Boxes */ -.list-box { - border: 1px solid #ddd; - padding: 20px; - border-radius: 5px; - background-color: #f9f9f9; -} - -.list-box ul { - list-style-type: none; - padding: 0; -} - -.list-box li { - padding: 5px 0; - border-bottom: 1px solid #ddd; -} - -.list-box li:last-child { - border-bottom: none; -} - -/* Picture Boxes */ -.picture-box { - border: 1px solid #ddd; - padding: 10px; - border-radius: 5px; - text-align: center; - background-color: #fff; -} - -.picture-box img { - max-width: 100%; - border-radius: 5px; -} - -.picture-box figcaption { - margin-top: 10px; - font-style: italic; -} - -/* Video Boxes */ -.video-box { - border: 1px solid #ddd; - padding: 10px; - border-radius: 5px; - text-align: center; - background-color: #fff; -} - -.video-box iframe { - max-width: 100%; - border: none; -} diff --git a/src/js/myModal.js b/src/js/myModal.js new file mode 100644 index 0000000..fe7b2b4 --- /dev/null +++ b/src/js/myModal.js @@ -0,0 +1,11 @@ +const modal = document.getElementById('myModal'); +const openBtn = document.getElementById('openModal'); +const closeBtn = document.getElementById('closeModal'); + +openBtn.addEventListener('click', () => { + modal.style.display = 'block'; +}); + +closeBtn.addEventListener('click', () => { + modal.style.display = 'none'; +}); \ No newline at end of file