Skip to content

Commit 160447b

Browse files
devanshi14malhotradevanshi14malhotra
committed
Merge branch 'pr-865' into main and resolve conflicts
2 parents 09d2965 + 34206ff commit 160447b

5 files changed

Lines changed: 1588 additions & 789 deletions

File tree

‎frontend/css/style.css‎

Lines changed: 303 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,12 @@
3838

3939
--book-thick: 40px;
4040

41+
--constellation-book: #facc15;
42+
--constellation-mood: #8b5cf6;
43+
--constellation-genre: #10b981;
44+
--constellation-author: #3b82f6;
45+
--constellation-shelf: #f97316;
46+
4147
/* New Brand/UI Variables */
4248
--border-radius-soft: 12px;
4349
--shadow-hover: 0 15px 35px rgba(0, 0, 0, 0.15);
@@ -971,12 +977,307 @@ textarea:focus {
971977
/* --- Constellation View --- */
972978
.constellation-container {
973979
width: 100%;
980+
height: 800px; /* Fixed height for stability */
974981
min-height: 600px;
975982
margin-top: 2rem;
976983
position: relative;
977-
border-radius: 12px;
984+
border-radius: 24px;
978985
overflow: hidden;
979-
animation: fadeIn 0.5s ease;
986+
background:
987+
radial-gradient(circle at 50% 0%, rgba(30, 41, 59, 0.7), transparent),
988+
linear-gradient(to bottom, #020617, #0f172a);
989+
border: 1px solid rgba(255, 255, 255, 0.1);
990+
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
991+
transition: opacity 0.4s ease, transform 0.4s ease;
992+
display: flex;
993+
flex-direction: column;
994+
}
995+
996+
.constellation-container.hidden {
997+
display: none !important;
998+
}
999+
1000+
#constellation-svg {
1001+
flex: 1;
1002+
width: 100%;
1003+
height: 100%;
1004+
display: block;
1005+
cursor: grab;
1006+
will-change: transform;
1007+
background: transparent;
1008+
}
1009+
1010+
.constellation-container:fullscreen {
1011+
width: 100vw;
1012+
height: 100vh;
1013+
border-radius: 0;
1014+
margin: 0;
1015+
}
1016+
1017+
.constellation-container:fullscreen #constellation-svg {
1018+
height: 100vh;
1019+
width: 100vw;
1020+
}
1021+
1022+
/* Node Styling */
1023+
.constellation-node {
1024+
outline: none;
1025+
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
1026+
}
1027+
1028+
.node-core {
1029+
stroke: rgba(255, 255, 255, 0.8);
1030+
stroke-width: 2;
1031+
transition: all 0.3s ease;
1032+
}
1033+
1034+
.constellation-node:hover .node-core {
1035+
stroke-width: 4;
1036+
filter: brightness(1.3) drop-shadow(0 0 12px currentColor);
1037+
}
1038+
1039+
/* Related Books in Modal */
1040+
.related-books-box {
1041+
background: rgba(255, 255, 255, 0.03);
1042+
border: 1px solid rgba(255, 255, 255, 0.08);
1043+
border-radius: 16px;
1044+
padding: 1.2rem;
1045+
margin-bottom: 1.5rem;
1046+
transition: all 0.3s ease;
1047+
}
1048+
1049+
.related-header {
1050+
display: flex;
1051+
align-items: center;
1052+
gap: 8px;
1053+
margin-bottom: 1rem;
1054+
color: var(--accent-gold);
1055+
font-size: 0.95rem;
1056+
font-weight: 600;
1057+
}
1058+
1059+
.related-books-container {
1060+
display: flex;
1061+
gap: 12px;
1062+
overflow-x: auto;
1063+
padding-bottom: 12px;
1064+
scrollbar-width: thin;
1065+
scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
1066+
}
1067+
1068+
.related-books-container::-webkit-scrollbar {
1069+
height: 4px;
1070+
}
1071+
1072+
.related-books-container::-webkit-scrollbar-thumb {
1073+
background: rgba(255, 255, 255, 0.1);
1074+
border-radius: 4px;
1075+
}
1076+
1077+
.related-book-item {
1078+
flex: 0 0 90px;
1079+
cursor: pointer;
1080+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
1081+
text-decoration: none;
1082+
}
1083+
1084+
.related-book-item:hover {
1085+
transform: translateY(-4px) scale(1.05);
1086+
}
1087+
1088+
.related-book-item img {
1089+
width: 100%;
1090+
aspect-ratio: 2/3;
1091+
object-fit: cover;
1092+
border-radius: 6px;
1093+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
1094+
border: 1px solid rgba(255, 255, 255, 0.1);
1095+
}
1096+
1097+
.related-book-title {
1098+
font-size: 0.7rem;
1099+
color: #e2e8f0;
1100+
margin-top: 6px;
1101+
display: -webkit-box;
1102+
-webkit-line-clamp: 2;
1103+
-webkit-box-orient: vertical;
1104+
overflow: hidden;
1105+
line-height: 1.2;
1106+
font-weight: 500;
1107+
}
1108+
1109+
.constellation-node.active .node-core {
1110+
stroke: #fff;
1111+
stroke-width: 5;
1112+
filter: brightness(1.5) drop-shadow(0 0 20px currentColor);
1113+
}
1114+
1115+
.constellation-node.dimmed {
1116+
opacity: 0.2;
1117+
filter: grayscale(0.8);
1118+
}
1119+
1120+
.constellation-node text {
1121+
font-family: 'Inter', 'Segoe UI', sans-serif;
1122+
letter-spacing: 0.5px;
1123+
pointer-events: none;
1124+
user-select: none;
1125+
transition: all 0.3s ease;
1126+
opacity: 0.9;
1127+
}
1128+
1129+
.constellation-node.dimmed text {
1130+
opacity: 0;
1131+
}
1132+
1133+
/* Link Styling */
1134+
.constellation-link {
1135+
stroke-opacity: 0.15;
1136+
stroke-linecap: round;
1137+
transition: all 0.3s ease;
1138+
}
1139+
1140+
.constellation-link.highlighted {
1141+
stroke-opacity: 0.8;
1142+
stroke-width: 3px !important;
1143+
}
1144+
1145+
.constellation-link.dimmed {
1146+
stroke-opacity: 0.03;
1147+
}
1148+
1149+
/* Toolbar & Legend Overlay */
1150+
.constellation-toolbar {
1151+
position: absolute;
1152+
top: 24px;
1153+
right: 24px;
1154+
display: flex;
1155+
gap: 12px;
1156+
z-index: 100;
1157+
}
1158+
1159+
.constellation-toolbar button {
1160+
background: rgba(15, 23, 42, 0.8);
1161+
border: 1px solid rgba(255, 255, 255, 0.1);
1162+
color: #e2e8f0;
1163+
padding: 10px 16px;
1164+
border-radius: 14px;
1165+
backdrop-filter: blur(12px);
1166+
cursor: pointer;
1167+
font-size: 14px;
1168+
font-weight: 500;
1169+
display: flex;
1170+
align-items: center;
1171+
gap: 8px;
1172+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
1173+
}
1174+
1175+
.constellation-toolbar button:hover {
1176+
background: rgba(30, 41, 59, 0.9);
1177+
border-color: var(--accent-gold);
1178+
color: #fff;
1179+
transform: translateY(-2px);
1180+
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
1181+
}
1182+
1183+
.constellation-legend {
1184+
position: absolute;
1185+
left: 24px;
1186+
bottom: 24px;
1187+
padding: 20px;
1188+
background: rgba(15, 23, 42, 0.8);
1189+
border: 1px solid rgba(255, 255, 255, 0.1);
1190+
border-radius: 20px;
1191+
backdrop-filter: blur(12px);
1192+
z-index: 100;
1193+
color: #f1f5f9;
1194+
}
1195+
1196+
.legend-item {
1197+
display: flex;
1198+
align-items: center;
1199+
gap: 12px;
1200+
margin-bottom: 8px;
1201+
font-size: 13px;
1202+
font-weight: 500;
1203+
}
1204+
1205+
.legend-item:last-child {
1206+
margin-bottom: 0;
1207+
}
1208+
1209+
.legend-dot {
1210+
width: 12px;
1211+
height: 12px;
1212+
border-radius: 50%;
1213+
box-shadow: 0 0 10px currentColor;
1214+
border: 2px solid rgba(255, 255, 255, 0.4);
1215+
}
1216+
1217+
.book-node { color: #facc15; }
1218+
.mood-node { color: #8b5cf6; }
1219+
.genre-node { color: #10b981; }
1220+
.author-node { color: #3b82f6; }
1221+
.shelf-node { color: #f97316; }
1222+
1223+
/* Empty State */
1224+
#constellation-empty-state {
1225+
position: absolute;
1226+
inset: 0;
1227+
display: flex;
1228+
flex-direction: column;
1229+
align-items: center;
1230+
justify-content: center;
1231+
background: rgba(2, 6, 23, 0.8);
1232+
backdrop-filter: blur(8px);
1233+
z-index: 150;
1234+
color: #94a3b8;
1235+
text-align: center;
1236+
padding: 40px;
1237+
}
1238+
1239+
#constellation-empty-state i {
1240+
font-size: 48px;
1241+
color: var(--accent-gold);
1242+
margin-bottom: 20px;
1243+
opacity: 0.8;
1244+
}
1245+
1246+
#constellation-empty-state h2 {
1247+
color: #f1f5f9;
1248+
font-size: 24px;
1249+
margin-bottom: 12px;
1250+
}
1251+
1252+
@media (max-width: 768px) {
1253+
.constellation-container {
1254+
min-height: 600px;
1255+
}
1256+
.constellation-toolbar {
1257+
top: 16px;
1258+
right: 16px;
1259+
gap: 8px;
1260+
}
1261+
.constellation-toolbar button {
1262+
padding: 8px 12px;
1263+
font-size: 12px;
1264+
}
1265+
.constellation-legend {
1266+
left: 16px;
1267+
bottom: 16px;
1268+
padding: 12px;
1269+
}
1270+
}
1271+
1272+
1273+
.constellation-container:fullscreen {
1274+
width: 100vw;
1275+
height: 100vh;
1276+
border-radius: 0;
1277+
}
1278+
1279+
.constellation-container:fullscreen #constellation-svg {
1280+
height: 100vh;
9801281
}
9811282

9821283
.view-toggles button {

0 commit comments

Comments
 (0)