From 9be4f6ec7ec168ecdd6569ed3fb875f48818d4a2 Mon Sep 17 00:00:00 2001 From: Ojas Arora <127867874+Ojas-Arora@users.noreply.github.com> Date: Wed, 10 Jul 2024 23:42:44 +0530 Subject: [PATCH 1/5] Adding a FAQ Page --- .vscode/settings.json | 3 + css/faq.css | 106 +++++++++++++++++++++++++++ faq.html | 162 ++++++++++++++++++++++++++++++++++++++++++ index.html | 12 ++++ 4 files changed, 283 insertions(+) create mode 100644 .vscode/settings.json create mode 100644 css/faq.css create mode 100644 faq.html diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/css/faq.css b/css/faq.css new file mode 100644 index 0000000..d7483b6 --- /dev/null +++ b/css/faq.css @@ -0,0 +1,106 @@ +@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600&display=swap'); + +:root { + --primary-color: #0f045a; + --theme-color1: #7582b2; + --theme-color2: #036c96; + --theme-color3: #ebf2ff; + --shadow-color1: #352a7e; + --shadow-color2: #101536; + --border-color1: #080126; + --background-col: #c6cede; + --container-bg-color: #b0b8c4; +} + +body { + font-family: 'Montserrat', sans-serif; + background-color: var(--background-col); + color: var(--primary-color); +} + +.container { + max-width: 1200px; + width: 90%; + margin: auto; + padding: 30px; + background-color: var(--container-bg-color); + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +h1 { + text-align: center; + font-size: 3rem; + color: var(--primary-color); + font-weight: bold; + margin-bottom: 10px; + animation: blink 3s linear infinite; +} +@keyframes blink { + 0%, 100% { + opacity: 1; + } + 50% { + opacity: 0; + } +} +.faq-item { + margin-bottom: 20px; +} + +.faq-toggle { + display: none; +} + +.faq-question { + font-size: 1.5rem; + cursor: pointer; + display: block; + padding: 10px; + background-color: var(--theme-color1); + color: white; + border-radius: 5px; + transition: background-color 0.3s ease; + box-shadow: 7px 7px 20px 0 darkblue; +} + +.faq-question:hover { + background-color: var(--theme-color2); +} + +.faq-answer { + padding: 10px 20px; + display: none; + background-color: white; + border: 1px solid var(--theme-color1); + border-top: none; + border-radius: 0 0 5px 5px; + box-shadow: 7px 7px 20px 0 darkblue; +} + +.faq-toggle:checked + .faq-question + .faq-answer { + display: block; +} + +.faq-toggle + .faq-question::after { + content: '\f0d7'; + font-family: 'Font Awesome 5 Free'; + font-weight: 900; + float: right; +} + +.faq-toggle:checked + .faq-question::after { + content: '\f0d8'; +} + +.home-icon { + width: 50px; + margin: 10px; +} + +@media screen and (max-width: 768px) { + .home-icon { + width: 30px; + margin: 10px; + } +} diff --git a/faq.html b/faq.html new file mode 100644 index 0000000..e872045 --- /dev/null +++ b/faq.html @@ -0,0 +1,162 @@ + + + + + + + + + + + + FAQ - Conway's Game of Life + + +
+ + Back to Home + +
+
+

FAQ

+
+ + +
+

+ Conway's Game of Life, or simply "Life," is a cellular automaton devised by British mathematician John Horton Conway in 1970. + It is a zero-player game, meaning its evolution is determined by its initial state, requiring no further input. +

+
+
+
+ + +
+

+ The universe of the Game of Life is an infinite, two-dimensional orthogonal grid of square cells. + Each cell is in one of two possible states: ALIVE or DEAD. Every cell interacts with its eight neighbors. +

+
+
+
+ + +
+

+ The Game of Life has four simple rules: +

    +
  • Any live cell with fewer than two live neighbors dies, as if by underpopulation.
    • +
  • Any live cell with two or three live neighbors lives on to the next generation.
    • +
  • Any live cell with more than three live neighbors dies, as if by overpopulation.
    • +
  • Any dead cell with exactly three live neighbors becomes a live cell, as if by reproduction.
    • +
+

+
+
+
+ + +
+

+ Conway's Game of Life was created by the British mathematician John Horton Conway in 1970. It is one of the best-known examples of a cellular automaton. +

+
+
+
+ + +
+

+ Some famous patterns in the Game of Life include the Glider, the LWSS (Lightweight Spaceship), and the Pulsar. These patterns exhibit interesting behaviors and are often studied by enthusiasts. +

+
+
+
+ + +
+

+ Yes, the Game of Life is Turing complete. This means it can simulate a universal Turing machine and, therefore, perform any computation that can be done by a computer. +

+
+
+
+ + +
+

+ While the Game of Life is a mathematical abstraction, it has been used to explore concepts in computation, complexity theory, and even theoretical biology. It provides insights but is not directly used to solve practical real-world problems. +

+
+
+
+ + +
+

+ Yes, there are many other cellular automata with different rulesets and behaviors. Some examples include the Brian's Brain, Highlife, and Wireworld. Each has its unique set of rules and interesting properties. +

+
+
+
+ + +
+

+ You can experiment with the Game of Life using various online simulators and software programs. Many programming languages also have libraries and frameworks for creating and exploring cellular automata. +

+
+
+ +
+
+ +
+ + + + diff --git a/index.html b/index.html index 889914b..18da2ee 100644 --- a/index.html +++ b/index.html @@ -225,6 +225,9 @@ function redirectToFeedback() { window.location.href = "feedback.html"; } + function redirectToFAQ() { + window.location.href = "faq.html"; + } @@ -722,6 +725,15 @@ > Feedback +
+
+
From bdc7c5f224a24902591bde1bea94f2c4a94e03cb Mon Sep 17 00:00:00 2001 From: Ojas Arora <127867874+Ojas-Arora@users.noreply.github.com> Date: Thu, 11 Jul 2024 21:51:47 +0530 Subject: [PATCH 2/5] Adding a FAQ Page --- faq.html | 54 +++++++++++++++++++++++++++--------------------------- 1 file changed, 27 insertions(+), 27 deletions(-) diff --git a/faq.html b/faq.html index e872045..4cba085 100644 --- a/faq.html +++ b/faq.html @@ -12,29 +12,30 @@ FAQ - Conway's Game of Life @@ -141,15 +142,14 @@

FAQ

+ diff --git a/faq.html b/faq.html index 4cba085..4a7dabb 100644 --- a/faq.html +++ b/faq.html @@ -157,6 +157,19 @@

FAQ

window.scrollTo({ top: 0, behavior: 'smooth' }); }); + + + diff --git a/feedback.html b/feedback.html index fda263e..062aa4a 100644 --- a/feedback.html +++ b/feedback.html @@ -66,7 +66,19 @@

Feedback Form

- + + + diff --git a/gamerules.html b/gamerules.html index 1aeee40..7a0aa53 100644 --- a/gamerules.html +++ b/gamerules.html @@ -293,6 +293,18 @@

Summary

}); - + + + diff --git a/index.html b/index.html index 60efaaa..26a6e8e 100644 --- a/index.html +++ b/index.html @@ -1135,6 +1135,18 @@ crossorigin="anonymous" referrerpolicy="no-referrer" > - + + + From 2b7595eea29182387f00bc15b7695b06587648d7 Mon Sep 17 00:00:00 2001 From: Ojas Arora <127867874+Ojas-Arora@users.noreply.github.com> Date: Sun, 21 Jul 2024 00:08:40 +0530 Subject: [PATCH 5/5] Adding Chatbot to website --- README.md | 77 ++------------- css/feedback.css | 197 +++++++++++++++++++------------------- css/gamerules.css | 23 ----- css/style.css | 236 +++++++++++++++++++++++++++++----------------- faq.html | 179 ----------------------------------- feedback.html | 21 +---- gamerules.html | 61 ++---------- index.html | 73 ++++++-------- js/app.js | 91 ++---------------- js/speed.js | 10 +- 10 files changed, 305 insertions(+), 663 deletions(-) diff --git a/README.md b/README.md index 8652b94..3b7cd15 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,3 @@ -

Conway's Game of Life

A cellular automaton devised by British mathematician John Horton Conway in 1970.

@@ -47,10 +46,8 @@ --- +## Table of Contents -
-

:pushpin:Table of Contents:

 - 1. [What is it?](#what-is-it) 1. [The Universe](#the-universe) 2. [The Rules](#the-rules) @@ -71,10 +68,8 @@ 10. [Pentadecathlon](#pentadecathlon) 6. [Feedback](#feedback) 7. [Resources](#resources) - -
-
+--- ## What is it? ✨ Conway's Game of Life, or simply "Life," is a cellular automaton devised by British mathematician John Horton Conway in 1970. It is a zero-player game, meaning its evolution is determined by its initial state, requiring no further input. Players interact with the game by creating an initial configuration and observing how it evolves. The game is Turing complete and can simulate a universal constructor or any other Turing machine. @@ -97,18 +92,12 @@ The first generation is created by applying the above rules simultaneously to ev --- - -
-

🎮The Game

 - - +## The Game ### The Canvas / Grid ![Game Grid](./images/GRID.png) -### Buttons - | Buttons | What they do | | --- | --- | | ▶️ | Starts the animation after you've set the initial pattern | @@ -120,22 +109,7 @@ The first generation is created by applying the above rules simultaneously to ev |`Change grid size`| This function allow you to change the size of grid according to your preference| -### ⌨️ Keyboard Shortcuts - - -| Keybind | What they do | -| --- | --- | -| `P` or `Space Bar` | Starts the animation after you've set the initial pattern and Pauses an ongoing animation | -| `F` or `[→]` (Arrow Right) | Increases the speed of the animation | -| `S` or `[←]` (Arrow Left) | Decreases the speed of the animation | -| `D` or `Delete` | Clears the grid on click, only if the game is not animating at that moment | -| `R` | Randomly initializes the grid with initial randomness as 20% | -| `[↑]` (Arrow Up) | Increases the Randomness value by 5% | -| `[↓]` (Arrow Down) | Decreases the Randomness value by 5% | -| `G` | Toggles Gridlines On / Off | -| `M` | Toggles Music On / Off | - -### ⚙️ The Settings +### The Settings | ⚙️ Settings | What are they for? | | --- | --- | @@ -171,12 +145,9 @@ The first generation is created by applying the above rules simultaneously to ev Stores history of patterns that user has played with, up to 5 recent patterns. -
- -
+--- -
-

✨The Presets

+## The Presets ### Glider @@ -269,12 +240,11 @@ The Pentadecathlon is a period-15 oscillator that was found in 1970 by John Conw Pentadecathlon
+ ### More Configurations Explore more patterns at [ConwayLife Patterns](https://conwaylife.com/wiki/Category:Patterns). - - --- ## Feedback - 💬 Now the page supports user feedback. Which redirects you to a Feedback.html page. @@ -306,28 +276,6 @@ Explore more patterns at [ConwayLife Patterns](https://conwaylife.com/wiki/Categ -
- - - -
-

⚡Contribution Guidelines:

 - - - * **Checkout and make your changes for the develop branch only:** When working on your contributions, switch to the **develop** branch in your local repository. This ensures that you are working on the latest version of the codebase. - -* **Create pull requests only for the develop branch:** When you are ready to submit your changes, create a pull request (PR) targeting the **develop** branch. This allows the maintainers to review and merge your code into the main development branch. - -* **Format your commit message with the issue number:** When making commits related to an issue, follow the format **Fixes: #32 in your commit message. Replace 32 with the issue number you are addressing.** This helps track and manage issues more efficiently. - -* **Make your pull request descriptive and include examples:** When creating a pull request, provide a clear and descriptive explanation of the changes you made. This helps reviewers understand the purpose and significance of your contribution. Additionally, including at least one example that demonstrates the intended usage or effect of your changes can be beneficial. - -* **Rebase your commits and optimize file changes:** When submitting your pull request, consider rebasing your commits into one commit and optimizing your file changes. This helps keep the commit history clean and makes it easier for reviewers to understand your changes. - -Remember, following these guidelines will help ensure a smooth and efficient contribution process. Happy coding! - -
-
@@ -366,14 +314,3 @@ Thank you for contributing to our project! Your help is greatly appreciated in m - -
-
-

Support

-
- -
- Don't forget to leave a star for this project! -

- -Go to Top diff --git a/css/feedback.css b/css/feedback.css index 1d032ee..7776696 100644 --- a/css/feedback.css +++ b/css/feedback.css @@ -2,9 +2,11 @@ 0% { background-position: 0% 0%; } + 50% { background-position: 100% 100%; } + 100% { background-position: 0% 0%; } @@ -40,20 +42,23 @@ 2% { transform: translateX(1); } + 25% { transform: translateX(-25%); } + 50% { transform: translateX(-50%); } + 75% { transform: translateX(-25%); } + 100% { transform: translateX(1); } } - body { font-family: 'Lato', serif; margin: 0; @@ -61,7 +66,7 @@ body { display: flex; justify-content: center; align-items: center; - height: 110vh; + height: 100vh; background: linear-gradient(45deg, #0d0d0d, #1e1e1e); animation: blinkGradient 10s infinite; transition: background 0.5s ease-in-out; @@ -83,11 +88,10 @@ body { 100% { background: linear-gradient(45deg, #1e3c72, #2a5298); } -} - +} .container { background: #2c2c2c; - padding: 2rem 1.875rem 2rem; + padding: 0.5rem 1.875rem 2rem; /* Adjust the bottom padding as needed */ border-radius: 8px; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5); width: 100%; @@ -98,6 +102,10 @@ body { color: #fff; } +.container h1, .container form { + margin-top: 8px; /* Adjust this value as needed to move content upward */ +} + .container:hover { box-shadow: 0 16px 48px rgba(0, 128, 255, 0.5); } @@ -108,7 +116,7 @@ h1 { text-align: center; color: #f0f0f0; animation: fadeInDown 1s ease; - font-family: 'Baskerville', serif; + font-family: 'Baskervviller', serif; } @keyframes fadeInDown { @@ -122,6 +130,25 @@ h1 { } } +h1 .highlight { + background: linear-gradient(90deg, #007bff, #00aaff); + -webkit-background-clip: text; + color: transparent; + animation: gradientMove 3s infinite; +} + +@keyframes gradientMove { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} + .form-group { margin-bottom: 15px; } @@ -161,31 +188,55 @@ input[type="file"] { animation: fadeInRight 1s ease; } +@keyframes fadeInRight { + from { + opacity: 0; + transform: translateX(20px); + } + to { + opacity: 1; + transform: translateX(0); + } +} + input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, select:focus, textarea:focus, input[type="file"]:focus { - border-color: #0080ff; - box-shadow: 0 0 15px rgba(0, 128, 255, 0.5); + border-color: #007bff; + box-shadow: 0 0 8px rgba(0, 123, 255, 0.6); } textarea { - height: 100px; + resize: vertical; + min-height: 100px; } button[type="submit"] { + display: block; width: 100%; padding: 10px; background-color: #007bff; color: #fff; border: none; border-radius: 4px; + font-size: 16px; cursor: pointer; - transition: background-color 0.3s ease, box-shadow 0.3s ease; + transition: background-color 0.3s ease, transform 0.2s ease; animation: fadeInUp 1s ease; - font-family: 'Montserrat', sans-serif; +} + +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } } button[type="submit"]:hover { @@ -195,121 +246,69 @@ button[type="submit"]:hover { } .back-button { - margin-left: -15px; - display: inline-flex; - align-items: center; + display: inline-block; margin-bottom: 20px; padding: 8px 16px; color: #fff; + background-color: #007bff; border-radius: 4px; text-decoration: none; transition: background-color 0.3s ease, transform 0.2s ease; + box-shadow: 0 0 8px rgba(0, 123, 255, 0.6); } -.back-button i { - margin-right: 8px; /* Space between the icon and the text */ +.back-button:hover { + background-color: #0056b3; + transform: scale(1.05); } -.checkbox { - width: 75px; - height: 75px; - display: flex; - justify-content: center; - align-items: center; - border-radius: 50%; - background: #23abff; - margin: 2rem auto; +#success-message { + text-align: center; + padding: 20px; + background-color: #2a2a2a; + color: #007bff; } -.main-container { - width: 60px; - height: 60px; - border-radius: 50%; - background: white; - display: flex; - justify-content: center; - align-items: center; +.hidden { + display: none; } -.check-container { - width: 45px; - height: 45px; - border-radius: 50%; - background: #23abff; +.checkbox { display: flex; justify-content: center; align-items: center; + margin-bottom: 10px; } .check-background { - width: 35px; - height: 35px; + background-color: #28a745; border-radius: 50%; - background: white; - display: flex; - justify-content: center; - align-items: center; -} - -.rating { - margin-left: 110px; - margin-right: 110px; - display: flex; - justify-content: space-between; - align-items: center; - direction: rtl; - animation: fadeInRight 1s ease; -} - -.rating input[type="radio"] { - display: none; -} - -.rating label { - font-size: 30px; - color: #ddd; - cursor: pointer; - transition: color 0.3s ease; - margin: 0 2px; /* Reduced margin between stars */ -} - -.rating input[type="radio"]:checked ~ label { - color: #f7c00f; -} - -.rating label:hover, -.rating label:hover ~ label { - color: #f7c00f; -} - -.back-button { - display: inline-block; - padding: 0.5rem 1rem; - background-color: #007bff; - color: #fff; - text-decoration: none; - border-radius: 4px; - transition: background-color 0.3s ease, box-shadow 0.3s ease; - margin-bottom: 1rem; - animation: fadeInLeft 1s ease; -} - -.back-button:hover { - background-color: #0056b3; - box-shadow: 0 0 10px rgba(0, 128, 255, 0.5); + padding: 10px; + animation: animateShadow 0.5s ease-in-out; } -span { - color: red; +svg { + width: 40px; + height: 40px; } @keyframes animateContainer { - from { - transform: scale(0.9); - opacity: 0.8; + 0% { + opacity: 0; + transform: scale(0.8); } - to { - transform: scale(1); + 100% { opacity: 1; + transform: scale(1); } } + +@keyframes animateShadow { + 0% { + box-shadow: 0 0 0 rgba(0, 0, 0, 0.2); + } + 100% { + box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); + } +} + diff --git a/css/gamerules.css b/css/gamerules.css index ecddd32..6c6d176 100644 --- a/css/gamerules.css +++ b/css/gamerules.css @@ -59,29 +59,6 @@ font-family: "Fantasy"; } -.random-button { - border: solid 0.1rem var(--border-color1); - border-radius: 0.6rem; - height: calc((100%) / 1.8); - width: auto; - text-align: center; - padding: 0.5rem; - font-family: "Roboto Mono", monospace; - font-weight: bold; - font-size: 1.1rem; - color: var(--primary-color); - background-color: var(--theme-color3); - transition: box-shadow 0.3s ease, transform 0.2s ease; - margin: 0 0.5rem; /* Add margin to separate buttons */ -} -.random-button:hover { - box-shadow: 0.1rem 0.1rem 0.2rem var(--shadow-color2); -} -.random-button:active { - box-shadow: 0.1rem 0.1rem 0.2rem var(--shadow-color2); - transform: translateY(0.1rem); -} - body { line-height: 1.6; padding: 20px; diff --git a/css/style.css b/css/style.css index 7a7443d..2b115a6 100644 --- a/css/style.css +++ b/css/style.css @@ -27,8 +27,7 @@ body { } body { - font-family: 'Roboto Mono', monospace; - overflow-y: scroll; + font-family: "Roboto Mono", monospace; background: linear-gradient(135deg, #ebf2ff 0%, #7582b2 100%); color: #333; transition: background 0.5s ease; @@ -188,7 +187,6 @@ body { /* font-weight: 400; */ letter-spacing: 1px; font-style: normal; - margin: 1rem 0; } .game { @@ -197,17 +195,14 @@ body { flex-direction: column; align-items: center; justify-content: center; - height: 100%; + height: 100vh; max-width: 100vw; margin-left: 20vw; background-color: var(--background-col); transition: background-color 0.5s ease; - overflow-y: auto; /* Enable vertical scrolling */ } .full-width { margin-left: 0; - overflow-y: hidden; - overflow-x: hidden; } /* .grid-container { display: flex; @@ -241,7 +236,7 @@ body { justify-content: center; align-items: center; width: 100%; - height: auto; /* Allow it to grow as needed */ + height: 100%; /* transition: border-color 0.3s ease; */ } @@ -254,21 +249,6 @@ body { /* border: 1px solid #ccc; */ } -/* Additional scrollbar styling */ -::-webkit-scrollbar { - width: 6px; -} - -::-webkit-scrollbar-track { - background: var(--shadow-color2); - border-radius: 30px; -} - -::-webkit-scrollbar-thumb { - background: var(--scrollbar-color); - border-radius: 30px; -} - .cell { box-sizing: border-box; width: 100%; @@ -378,7 +358,6 @@ body { left: 2rem; top: 1.8rem; } - .sidenav { height: 100vh; width: 20vw; @@ -427,9 +406,6 @@ body { outline: none; transition: color 0.3s ease; } -.other-settings-container div{ - border-bottom: 4px solid var(--border-color1); -} .game-rules { padding: 0rem 0.5rem 0rem 1.6rem; text-decoration: none; @@ -541,8 +517,7 @@ body { .presets:hover, .history:hover, .about:hover, -.game-rules:hover, -.toggle-button:hover { +.game-rules:hover { color: #00c2fd; } @@ -604,48 +579,156 @@ body { .slider:hover { opacity: 1; } -@media screen and (max-width: 568px) { - - .full-width { - overflow-x: hidden; - overflow-y: hidden; + +@media screen and (max-width: 768px) { + .controls { + flex-direction: column; /* Stack buttons vertically on smaller screens */ + align-items: center; /* Center buttons vertically */ + min-width: 25vw; + margin: none; } .sidenav { - overflow-y: auto; - height: 100%; + height: auto; + position: fixed; + padding-top: 0.5rem; + left: -250px; + height: 200vh; + transition: width 0.3s ease; + width: 100vw; + padding-top: 2rem; + } + + .hamburger { + position: absolute; + left: 10px; + top: 5px; + display: none; + } + + .sidenav .cross { + cursor: pointer; + position: absolute; + top: 13px; + right: 10px; + display: block; + padding-top: 1.6rem; + } + .sidenav .randomness-container input { + text-decoration: none; + font-size: 0.8rem; + display: block; + border: none; + background: none; + width: 90%; + cursor: pointer; + outline: none; + align-items: center; + } + + .sidenav .randomness-container label { + padding: 0.6rem 4.4rem 0.6rem 0; + text-decoration: none; + font-size: 1rem; + display: block; + border: none; + background: none; + width: 50%; + cursor: pointer; + outline: none; + } + /*.about a { + text-decoration: none; + color: inherit; + cursor: pointer; + }*/ + .about button { + margin-left: -1.1rem; + } + + .sidenav button, + .other-settings-container div, + .presets-container div, + .color-themes, + .themes-container div, + .presets, + .history { + padding: 0.3rem 0.4rem 0.3rem 1rem; + text-decoration: none; + font-size: 1rem; + display: block; + border: none; + background: none; + width: 100%; + cursor: pointer; + outline: none; + } + .about { + padding: 0rem 0.4rem 0rem 1rem; + text-decoration: none; + font-size: 1rem; + display: block; + border: none; + background: none; + width: 100%; + cursor: pointer; + outline: none; + } + + .other-settings { + padding: 3px; + text-align: left; + padding-left: 15px; + padding-bottom: 10px; + } + + .game { width: 100vw; - left: -100%; /* Slide out the sidebar off-screen */ - transition: transform 0.3s ease; /* Smoother animation */ - position: fixed; /* Fixed position */ - top: 0; + margin: 0; + } + .controls { + display: flex; + flex-direction: row; + min-width: 25vw; + height: auto; + justify-content: center; + align-items: center; + margin-top: 1rem; + margin-bottom: 1rem; + transition: all 0.3s ease; + } + + .clear-button, + .random-button { + font-size: 0.8rem; + /* Adjust font size for smaller screens */ + padding: 0.3rem 0.8rem; + /* Adjust padding for smaller screens */ + margin: 0.5rem 0; + /* Add margin to separate buttons vertically */ } .grid-container { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); - gap: 10px; - justify-items: center; + display: flex; + flex-direction: column; + justify-content: center; align-items: center; - padding: 20px; - border: solid 1px var(--border-color1); - max-width: 90%; - margin: 20px auto; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); - transition: border-color 0.3s ease, transform 0.3s ease; + border: solid 0.2rem var(--border-color1); + max-width: 80vw; + max-height: 82vw; + transition: border-color 0.3s ease; } .icon { - width: 50px; - height: 50px; - margin-bottom: 10px; + width: calc((30vw) / 8); + height: calc((30vw) / 8); } .heading { - font-size: 1.5rem; + font-size: 1.7rem; text-align: center; - margin-top: 0; - margin-bottom: 10px; + padding-top: 0.7rem; + padding-bottom: 0.7rem; } } @@ -732,7 +815,11 @@ body { } @media screen and (max-width: 425px) { - + .sidenav { + width: 100vw; + left: -550px; + transition: width 0.3s ease; + } /* #toggleButton { left: 1.4rem; @@ -761,22 +848,19 @@ body { } } /* Added new values for maxwidth sidenav button */ -@media screen and (max-width: 728px) and (min-width: 568px) { +@media screen and (max-width: 728px) { .sidenav { - /* width: 92%; */ + width: 92%; left: -550px; transition: width 0.3s ease; - width: 50vw; } .controls { flex-wrap: wrap; } } -@media screen and (max-width: 799px) and (min-width: 728px) { +@media screen and (max-width: 799px) { .controls { flex-wrap: wrap; - } .sidenav { - width: 40vw; } } @media screen and (max-width: 860px) { @@ -784,18 +868,14 @@ body { flex-wrap: wrap; } } -@media screen and (max-width: 1099px) and (min-width: 800px) { +@media screen and (max-width: 999px) { .controls { flex-wrap: wrap; - } .sidenav { - width: 30vw; } } -@media screen and (max-width: 1200px) and (min-wideth: 1100px) { +@media screen and (max-width: 1200px) { .controls { flex-wrap: wrap; - } .sidenav { - width: 25vw; } } @@ -841,24 +921,6 @@ body { opacity: 0; } } -#info-container { - display: flex; - justify-content: space-between; - padding: 10px; - background-color: var(--background-col); - color: var(--primary-color); - font-family: Arial, sans-serif; -} - -#generation-info, #status-info { - background-color: var(--background-col); - padding: 10px; - border-radius: 5px; -} - -#generation-info p, #status-info p { - margin: 5px 0; -} .hov:hover { color: aqua; diff --git a/faq.html b/faq.html index 817caf7..4a7dabb 100644 --- a/faq.html +++ b/faq.html @@ -173,182 +173,3 @@

FAQ

- - - - - - - - - - - - FAQ - Conway's Game of Life - - -
- - Back to Home - -
-
-

FAQ

-
- - -
-

- Conway's Game of Life, or simply "Life," is a cellular automaton devised by British mathematician John Horton Conway in 1970. - It is a zero-player game, meaning its evolution is determined by its initial state, requiring no further input. -

-
-
-
- - -
-

- The universe of the Game of Life is an infinite, two-dimensional orthogonal grid of square cells. - Each cell is in one of two possible states: ALIVE or DEAD. Every cell interacts with its eight neighbors. -

-
-
-
- - -
-

- The Game of Life has four simple rules: -

    -
  • Any live cell with fewer than two live neighbors dies, as if by underpopulation.
    • -
  • Any live cell with two or three live neighbors lives on to the next generation.
    • -
  • Any live cell with more than three live neighbors dies, as if by overpopulation.
    • -
  • Any dead cell with exactly three live neighbors becomes a live cell, as if by reproduction.
    • -
-

-
-
-
- - -
-

- Conway's Game of Life was created by the British mathematician John Horton Conway in 1970. It is one of the best-known examples of a cellular automaton. -

-
-
-
- - -
-

- Some famous patterns in the Game of Life include the Glider, the LWSS (Lightweight Spaceship), and the Pulsar. These patterns exhibit interesting behaviors and are often studied by enthusiasts. -

-
-
-
- - -
-

- Yes, the Game of Life is Turing complete. This means it can simulate a universal Turing machine and, therefore, perform any computation that can be done by a computer. -

-
-
-
- - -
-

- While the Game of Life is a mathematical abstraction, it has been used to explore concepts in computation, complexity theory, and even theoretical biology. It provides insights but is not directly used to solve practical real-world problems. -

-
-
-
- - -
-

- Yes, there are many other cellular automata with different rulesets and behaviors. Some examples include the Brian's Brain, Highlife, and Wireworld. Each has its unique set of rules and interesting properties. -

-
-
-
- - -
-

- You can experiment with the Game of Life using various online simulators and software programs. Many programming languages also have libraries and frameworks for creating and exploring cellular automata. -

-
-
- -
-
- -
- - - - diff --git a/feedback.html b/feedback.html index 1695e08..062aa4a 100644 --- a/feedback.html +++ b/feedback.html @@ -6,13 +6,12 @@ Feedback Page -
-

Feedback Form

+

Feedback Form

- Back + Back
@@ -35,25 +34,11 @@
-
- -
- - - - - - - - - - -
-
+
diff --git a/gamerules.html b/gamerules.html index fe1d568..7a0aa53 100644 --- a/gamerules.html +++ b/gamerules.html @@ -66,12 +66,12 @@

Rules

of the preceding one.

-

The Game

- Game Grid -
-

Button Functions

+ Game Grid + @@ -116,69 +116,22 @@

Button Functions

- + - + - +
+ Button Functions +
Button What they do Increases the speed of the animation
Clear Clears the grid on click, only if the game is not animating at that moment
Random Randomly initializes the grid with initial randomness as 20%
Change grid size change grid size by changing grid height
-

Keyboard Shortcuts

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeybindWhat they do
orStarts the animation after you've set the initial pattern and Pauses an ongoing animation.
orIncreases the speed of the animation
orDecreases the speed of the animation
or - Clears the grid on click, only if the game is not animating at that - moment -
Randomly initializes the grid with initial randomness as 20%
Increases the Randomness value by 5%
Decreases the Randomness value by 5%
Toggles Gridlines On / Off
Toggles Music On / Off
-

The Presets

diff --git a/index.html b/index.html index a33ab83..26a6e8e 100644 --- a/index.html +++ b/index.html @@ -108,7 +108,6 @@ crossorigin="anonymous" referrerpolicy="no-referrer" > - @@ -331,25 +327,18 @@ class="warp-checkbox" onclick="toggleWarp()" /> - -
-
- - +

FAQ -

-
@@ -792,7 +775,21 @@
Conway's Game of Life
- + + +