2 files changed, 223 insertions, 0 deletions

diff --git a/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/css/form.css b/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/css/form.css
new file mode 100644
index 0000000..4681e68
--- /dev/null
+++ b/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/css/form.css
@@ -0,0 +1,39 @@
+form {
+  width: 90%;
+  margin: auto;
+  max-width: 550px;
+}
+input,
+form button,
+label {
+  display: block;
+}
+form button,
+input,
+textarea {
+  outline: none;
+}
+input,
+textarea {
+  border: 1px solid rgb(199, 199, 199);
+  border-radius: 10px;
+  padding: 10px;
+  font-size: 90%;
+  width: 100%;
+  height: 30px;
+  color: rgb(53, 53, 53);
+}
+textarea {
+  height: 50px;
+}
+label {
+  margin-top: 10px;
+}
+form button {
+  --accent: rgb(0, 162, 255);
+  margin-top: 20px;
+}
+
+.form-container {
+  width: 90%;
+}
diff --git a/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/css/style.css b/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/css/style.css
new file mode 100644
index 0000000..cb90218
--- /dev/null
+++ b/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/css/style.css
@@ -0,0 +1,184 @@
+@import url("https://fonts.googleapis.com/css?family=Open+Sans&display=swap");
+
+* {
+  font-family: "Open Sans", sans-serif;
+  box-sizing: border-box;
+}
+
+/* Nav Area */
+.top-bar {
+  width: 100%;
+  margin-top: 0;
+  position: relative;
+  height: 80px;
+  text-align: right;
+}
+#title {
+  position: absolute;
+  left: 20px;
+  top: 0;
+  display: inline-block;
+  height: 100%;
+}
+.nav {
+  height: 100%;
+  display: inline-block;
+}
+.nav a {
+  margin: 0 20px;
+  font-size: 120%;
+  height: 100%;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.grid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+/* Styles for Cards */
+.card {
+  display: inline-block;
+  width: 300px;
+  height: 400px;
+  overflow: hidden;
+  border: 1.25px solid rgb(233, 233, 233);
+  border-radius: 16px;
+  margin: 10px;
+  transition: 0.5s all;
+  --shadow: transparent;
+  box-shadow: 0 0 10px 5px var(--shadow);
+  position: relative;
+  font-size: 100%;
+}
+
+.card:hover {
+  --shadow: rgba(53, 53, 53, 0.103);
+  /* transform: rotateY(180deg) translate(20px, 20px);
+  background: pink; */
+}
+
+.card:hover .main-content {
+  pointer-events: initial;
+  opacity: 1;
+}
+
+.card * {
+  margin: 0;
+}
+
+.card img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.main-content {
+  padding: 25px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: rgba(255, 255, 255, 0.9);
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  pointer-events: none;
+  transition: 0.5s all;
+}
+
+.owner {
+  color: grey;
+  font-size: 110%;
+}
+
+.pet-name {
+  font-weight: bold;
+  font-size: 130%;
+}
+
+h5.pet-name {
+  color: white;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  padding: 10px;
+  text-shadow: 0px 0px 4px black;
+}
+
+.info ul {
+  padding: 10px;
+  padding-top: 0px;
+  border-radius: 7px;
+}
+
+li {
+  list-style-type: none;
+  margin: 0;
+}
+
+.info {
+  color: rgb(83, 83, 83);
+  position: relative;
+  overflow: hidden;
+}
+
+.info.likes {
+  margin-top: 25px;
+}
+
+.label {
+  font-weight: bold;
+}
+
+.btn-container {
+  text-align: right;
+  padding: 10px;
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+}
+
+.btn {
+  --accent: grey;
+  cursor: pointer;
+  background: transparent;
+  border: 1.5px solid var(--accent);
+  color: var(--accent);
+  border-radius: 10px;
+  padding: 10px 15px;
+  font-size: 90%;
+  letter-spacing: 1px;
+  transition: 0.5s all;
+  outline: none;
+}
+
+.btn:hover {
+  background: var(--accent);
+  color: white;
+}
+
+.edit.btn {
+  --accent: green;
+}
+
+.delete.btn {
+  --accent: red;
+  margin-left: 10px;
+}
+
+.view.btn {
+  --accent: blue;
+  margin-left: 10px;
+}
+
+/* Delete Pet */
+.pet-container {
+  width: 100%;
+}
+
+.confirmation-box.show {
+  display: block;
+}