Ai

V272-03

Een view om te gebruiken i.c.m. de AI zoek functie.

Hoe te gebruiken?

Kopieer onderstaande code in je template.

Voorvertoning

Alvast beginnen met een basis opmaak?

Neem de onderstaande code over in de website om alvast met een basis opmaak te beginnen.
HTML
<div class="search-section">
	<div class="container">
		<div class="search-bar">
			<nc-element page="1" name="search-bar-title" default="Stel je vraag, krijg direct AI-antwoorden" type="h2"></nc-element>
			<nc-text page="1" name="search-bar-intro" default="&lt;p&gt;Intelligente zoekfunctionaliteit die begrijpt wat je zoekt en directe antwoorden geeft.&lt;/p&gt;"></nc-text>
			<div class="py-3"></div>

			<nc-search-bar name="search-bar-footer" page="1" placeholder="Stel een vraag..."></nc-search-bar>
		</div>
	</div>
</div>
CSS
:is(.search-section, .search-page) {
	padding: 2rem 0;
	color: var(--white); /* Aan te passen op achtergrond */
	--glow-color: /* TODO: (Ideaal is 30% opacity van de achtergrond kleur van de zoekbalk.)*/;
}

.search-page {
	margin: 2rem 0;
}

.search-section .search-bar {
	color: inherit;
}

@media (min-width: 768px) {
	.search-section {
		padding: 4rem 0;
	}
}

:is(.search-section, .search-page) :is(h1, h2) {
	color: inherit;
	margin-bottom: 0.5rem;
}

.search-section .search-bar,
.search-page {
	background-color: var(--secondary);
	/* Secondary for preview system */
	border-radius: var(--panel-radius);
	padding: 1.5rem 1rem;
	transition: box-shadow ease-in-out 0.5s;


	box-shadow: 0 0 10px var(--glow-color), 0 0 10px var(--glow-color), 0 0 10px var(--glow-color), 0 0 10px var(--glow-color), 0 0 10px var(--glow-color), 0 0 10px var(--glow-color), 0 0 10px var(--glow-color), 0 0 10px var(--glow-color);
}

@media (min-width: 768px) {
	.search-section .search-bar {
		padding: 3rem 2rem;
	}
}

.search-section .search-bar:has(input:focus),
.search-page:has(input:focus) {
	box-shadow: 0 0 20px var(--glow-color), 0 0 20px var(--glow-color), 0 0 20px var(--glow-color), 0 0 20px var(--glow-color), 0 0 20px var(--glow-color), 0 0 20px var(--glow-color), 0 0 20px var(--glow-color), 0 0 20px var(--glow-color);
}

:is(.search-section .search-bar, .search-page) .form-group:has(input)+button[type="submit"] {
	margin-left: 0.5rem;
}

:is(.search-section .search-bar, .search-page) input {
	height: 100%;
}

:is(.search-section .search-bar, .search-page) button[type="submit"] i.fa-search {
	margin-right: 0 !important;
}

:is(.search-section .search-bar, .search-page) button[type="submit"] span {
	display: none;
}

@media (min-width: 768px) {
	:is(.search-section .search-bar, .search-page) button[type="submit"] span {
		display: inline-block;
	}
}

/* Search page */

.search-page .ai-container {
	margin-bottom: 2rem!important;
}

.search-page .ai-container .card {
	margin-top: 0.5rem;
	color: var(--black);
	border-color: var(--glow-color);
	box-shadow: 0px 0px 5px var(--glow-color);
}

.masonry-item :is(.search-preview-item, .search-preview-item .image) {
	border-radius: var(--panel-radius);
	overflow: hidden;
}

.masonry-item .search-preview-item {
	border: 1px solid var(--glow-color);

	padding: 1rem;
	transition: box-shadow 0.4s;
}

.masonry-item .search-preview-item .search-item-link {
	color: inherit;
}

.masonry-item .search-preview-item .title { 
	margin-top: 0.5rem;
}

.masonry-item .search-preview-item:is(:hover, :focus) {
	box-shadow: 0px 0px 15px #ffffff82; /* Eventueel aan te passen op een geschiktere kleur icm de achtergrond */
}

.search-page #ai-rating-message {
	margin-top: 0.5rem;
}