Initial commit

src/App.css

@@ -0,0 +1,139 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Lexend', sans-serif;
+  background-color: #1e1e1e;
+  color: #e0e0e0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  text-align: center;
+}
+
+.container {
+  width: 90vw;
+  height: 90vh;
+  padding: 20px;
+  border-radius: 10px;
+  background-color: #2a2a2a;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin-bottom: 10px;
+  color: #b3b3ff;
+}
+
+p {
+  font-size: 1rem;
+  margin-bottom: 20px;
+  color: #aaa;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 15px;
+}
+
+.slider-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+
+#password-length {
+  width: 80vw;
+  background: #333;
+  border: 2px solid #444;
+  border-radius: 5px;
+  height: 6px;
+}
+
+.preset-buttons {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.preset-btn {
+  padding: 10px 15px;
+  font-size: 1rem;
+  cursor: pointer;
+  background-color: #6a4cfc;
+  border: none;
+  color: white;
+  border-radius: 5px;
+  transition: background-color 0.3s;
+}
+
+.preset-btn:hover {
+  background-color: #7e61ff;
+}
+
+.generate-btn {
+  padding: 10px 20px;
+  font-size: 1.2rem;
+  background-color: #6a4cfc;
+  border: none;
+  color: white;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.generate-btn:hover {
+  background-color: #7e61ff;
+}
+
+.result-section {
+  margin-top: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.password-display {
+  font-size: 1.2rem;
+  word-wrap: break-word;
+  margin-bottom: 10px;
+  background-color: #333;
+  color: #fff;
+  padding: 15px;
+  border-radius: 5px;
+  width: 80vw;
+  margin-bottom: 20px;
+  font-size: 15px;
+}
+
+.result-buttons {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  justify-content: center;
+  align-items: center;
+}
+
+.copy-btn {
+  padding: 10px 20px;
+  font-size: 1rem;
+  background-color: #6a4cfc;
+  border: none;
+  color: white;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.copy-btn:hover {
+  background-color: #7e61ff;
+}