314 lines
14 KiB
HTML
314 lines
14 KiB
HTML
SafeValue must use [property]=binding:
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Home</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<div class="page-wrapper">
|
|
<link rel="stylesheet" href="style.css" />SafeValue must use [property]=binding: <header id="navbarSection_1751353158139">
|
|
<nav class="navbar">
|
|
<div class="navbar-brand">
|
|
<a href="#" aria-label="Craftopia Home">
|
|
<img src="placeholder-logo.png" alt="Craftopia Logo" class="logo">
|
|
<span class="site-name">Craftopia</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="navbar-toggle" aria-label="Toggle navigation" role="button" aria-expanded="false">
|
|
<span class="bar"></span>
|
|
<span class="bar"></span>
|
|
<span class="bar"></span>
|
|
</div>
|
|
|
|
<ul class="navbar-links">
|
|
<li><a href="#">Home</a></li>
|
|
<li class="dropdown">
|
|
<a href="#">Shop <span class="arrow-down"></span></a>
|
|
<ul class="dropdown-menu">
|
|
<li><a href="#">All Products</a></li>
|
|
<li><a href="#">Ceramics</a></li>
|
|
<li><a href="#">Jewelry</a></li>
|
|
<li><a href="#">Textiles</a></li>
|
|
<li><a href="#">Woodwork</a></li>
|
|
<li><a href="#">Unique Gifts</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#">About Us</a></li>
|
|
<li><a href="#">Contact</a></li>
|
|
</ul>
|
|
|
|
<div class="navbar-actions">
|
|
<div class="search-box">
|
|
<input type="search" placeholder="Search products..." aria-label="Search products">
|
|
<button type="submit" aria-label="Search"><i class="icon-search"></i></button>
|
|
</div>
|
|
<a href="#" class="icon-link" aria-label="Shopping Cart">
|
|
<i class="icon-cart"></i>
|
|
<span class="cart-count">0</span>
|
|
</a>
|
|
<a href="#" class="btn-primary" aria-label="Sign In or Register">Sign In</a>
|
|
<!-- Or, if user is logged in: -->
|
|
<!-- <a href="#" class="btn-secondary" aria-label="My Account">My Account</a> -->
|
|
</div>
|
|
</nav>
|
|
</header> (see https://g.co/ng/security#xss)
|
|
<link rel="stylesheet" href="style.css" />SafeValue must use [property]=binding: <!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Footer Section</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<footer class="footerSection_1751353209628">
|
|
<div class="footer-container">
|
|
<div class="footer-column">
|
|
<div class="placeholder-logo">Your Logo</div>
|
|
<p>Curating unique, handmade crafts for your home and lifestyle. Discover the art of tradition and creativity.</p>
|
|
<br>
|
|
<div class="social-links">
|
|
<a href="#" aria-label="Facebook"><span class="placeholder-social-icon"></span></a>
|
|
<a href="#" aria-label="Instagram"><span class="placeholder-social-icon"></span></a>
|
|
<a href="#" aria-label="Pinterest"><span class="placeholder-social-icon"></span></a>
|
|
<a href="#" aria-label="Twitter"><span class="placeholder-social-icon"></span></a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-column">
|
|
<h3>Shop</h3>
|
|
<ul>
|
|
<li><a href="#">Placeholder Link 1</a></li>
|
|
<li><a href="#">Placeholder Link 2</a></li>
|
|
<li><a href="#">Placeholder Link 3</a></li>
|
|
<li><a href="#">Placeholder Link 4</a></li>
|
|
<li><a href="#">Placeholder Link 5</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="footer-column">
|
|
<h3>Customer Service</h3>
|
|
<ul>
|
|
<li><a href="#">Placeholder Link A</a></li>
|
|
<li><a href="#">Placeholder Link B</a></li>
|
|
<li><a href="#">Placeholder Link C</a></li>
|
|
<li><a href="#">Placeholder Link D</a></li>
|
|
<li><a href="#">Placeholder Link E</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="footer-column">
|
|
<h3>Contact Us</h3>
|
|
<div class="footer-contact-info">
|
|
<a href="mailto:info@example.com">info@example.com</a>
|
|
<a href="tel:+1234567890">+1 (234) 567-890</a>
|
|
<p>123 Craft Lane, Artisan City, CA 90210</p>
|
|
</div>
|
|
<br>
|
|
<h3>Payments</h3>
|
|
<p>Integrated with:</p>
|
|
<div style="display: flex; gap: 10px; margin-top: 5px;">
|
|
<span class="placeholder-text-small" style="width: 60px;"></span>
|
|
<span class="placeholder-text-small" style="width: 60px;"></span>
|
|
<span class="placeholder-text-small" style="width: 60px;"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-bottom">
|
|
<p>© 2024 Your Craft Store. All rights reserved.</p>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
</html> (see https://g.co/ng/security#xss)
|
|
<link rel="stylesheet" href="style.css" />SafeValue must use [property]=binding: <nav id="navbarSection_1751353233286" class="navbar">
|
|
<div class="navbar__container">
|
|
<a href="#" class="navbar__brand">CraftStore</a>
|
|
|
|
<button class="navbar__toggler" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar__toggler-icon"></span>
|
|
<span class="navbar__toggler-icon"></span>
|
|
<span class="navbar__toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="navbar__collapse" id="navbar-menu">
|
|
<ul class="navbar__nav navbar__nav--main">
|
|
<li class="navbar__item"><a href="#" class="navbar__link">Home</a></li>
|
|
<li class="navbar__item"><a href="#" class="navbar__link">Shop</a></li>
|
|
<li class="navbar__item"><a href="#" class="navbar__link">Categories</a></li>
|
|
<li class="navbar__item"><a href="#" class="navbar__link">About Us</a></li>
|
|
<li class="navbar__item"><a href="#" class="navbar__link">Contact</a></li>
|
|
</ul>
|
|
|
|
<ul class="navbar__nav navbar__nav--utility">
|
|
<li class="navbar__item navbar__item--search">
|
|
<a href="#" class="navbar__link" aria-label="Search">
|
|
<span class="icon-placeholder">🔍</span> Search
|
|
</a>
|
|
</li>
|
|
<li class="navbar__item navbar__item--cart">
|
|
<a href="#" class="navbar__link" aria-label="Shopping Cart">
|
|
<span class="icon-placeholder">🛒</span> Cart (0)
|
|
</a>
|
|
</li>
|
|
<li class="navbar__item navbar__item--dropdown">
|
|
<a href="#" class="navbar__link navbar__dropdown-toggle" aria-expanded="false" aria-haspopup="true">
|
|
<span class="icon-placeholder">👤</span> Account
|
|
</a>
|
|
<div class="navbar__dropdown-menu">
|
|
<a href="#" class="navbar__dropdown-item">Sign Up / Log In</a>
|
|
<a href="#" class="navbar__dropdown-item">My Profile</a>
|
|
<a href="#" class="navbar__dropdown-item">Order History</a>
|
|
<a href="#" class="navbar__dropdown-item">Sign Out</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav> (see https://g.co/ng/security#xss)
|
|
<link rel="stylesheet" href="style.css" />SafeValue must use [property]=binding: <nav id="navbarSection_1751353251844" class="navbar">
|
|
<div class="navbar-container">
|
|
<div class="navbar-brand">
|
|
<a href="#" aria-label="Crafty Delights Homepage">
|
|
<span class="logo-text-placeholder">Crafty Delights</span>
|
|
</a>
|
|
</div>
|
|
|
|
<button class="navbar-toggler" aria-label="Toggle navigation menu">
|
|
<span class="toggler-icon-bar"></span>
|
|
<span class="toggler-icon-bar"></span>
|
|
<span class="toggler-icon-bar"></span>
|
|
</button>
|
|
|
|
<div class="navbar-links-main">
|
|
<ul class="nav-list">
|
|
<li class="nav-item">
|
|
<a href="#" class="nav-link">Home</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#" class="nav-link">Shop All</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#" class="nav-link">Categories</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#" class="nav-link">About Us</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#" class="nav-link">Contact</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="navbar-actions">
|
|
<a href="#" class="action-item search-icon" aria-label="Search products">
|
|
<span class="icon-placeholder">Search</span>
|
|
</a>
|
|
<a href="#" class="action-item user-account" aria-label="My Account or Login/Signup">
|
|
<span class="icon-placeholder">Account</span>
|
|
</a>
|
|
<a href="#" class="action-item shopping-cart" aria-label="View shopping cart">
|
|
<span class="icon-placeholder">Cart (0)</span>
|
|
</a>
|
|
<a href="#" class="action-item action-button login-btn">Login</a>
|
|
<a href="#" class="action-item action-button signup-btn">Sign Up</a>
|
|
</div>
|
|
</div>
|
|
</nav> (see https://g.co/ng/security#xss)
|
|
<link rel="stylesheet" href="style.css" />SafeValue must use [property]=binding: <!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Navbar Section</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<header class="navbarSection_1751353253489" role="banner">
|
|
<nav class="navbar-container" aria-label="Main Navigation">
|
|
<div class="navbar-logo">
|
|
<a href="/" aria-label="Home - [Store Name]">CraftStore</a>
|
|
</div>
|
|
|
|
<button class="navbar-toggle" aria-expanded="false" aria-controls="main-menu" aria-label="Toggle navigation">
|
|
☰ <!-- Hamburger icon -->
|
|
</button>
|
|
|
|
<ul class="navbar-menu" id="main-menu" role="menubar">
|
|
<li role="none"><a href="/products" role="menuitem">Products</a></li>
|
|
<li role="none"><a href="/categories" role="menuitem">Categories</a></li>
|
|
<li role="none"><a href="/about" role="menuitem">About Us</a></li>
|
|
<li role="none"><a href="/contact" role="menuitem">Contact</a></li>
|
|
</ul>
|
|
|
|
<div class="navbar-actions">
|
|
<a href="/login" class="action-link" aria-label="Login to your account">Login</a>
|
|
<a href="/signup" class="action-link" aria-label="Sign Up for a new account">Sign Up</a>
|
|
<a href="/cart" class="cart-button" aria-label="View shopping cart with 3 items">
|
|
<span class="cart-icon" aria-hidden="true"></span>
|
|
Cart
|
|
<span class="cart-count" aria-live="polite" aria-atomic="true">3</span>
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- Wireframe-friendly placeholder content for demonstration -->
|
|
<main style="padding: 2rem; background-color: #f8f8f8;">
|
|
<p>This is placeholder content to show the navbar's position.</p>
|
|
<div style="height: 1000px; background-color: #eee; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #aaa;">
|
|
Content Area
|
|
</div>
|
|
</main>
|
|
|
|
<script>
|
|
// Basic JavaScript for mobile toggle functionality
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const toggleButton = document.querySelector('.navbar-toggle');
|
|
const navMenu = document.querySelector('.navbar-menu');
|
|
const navActions = document.querySelector('.navbar-actions');
|
|
|
|
if (toggleButton && navMenu && navActions) {
|
|
toggleButton.addEventListener('click', function () {
|
|
const isExpanded = this.getAttribute('aria-expanded') === 'true' || false;
|
|
this.setAttribute('aria-expanded', !isExpanded);
|
|
navMenu.classList.toggle('is-active');
|
|
navActions.classList.toggle('is-active');
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> (see https://g.co/ng/security#xss)
|
|
<link rel="stylesheet" href="style.css" />SafeValue must use [property]=binding: <section id="heroSection_1751353426925" class="hero-section">
|
|
<div class="hero-content-wrapper">
|
|
<div class="hero-text-container">
|
|
<h1>Discover Unique Handmade Crafts</h1>
|
|
<p>Browse our exquisite collection of artisanal products, crafted with love and passion. Find the perfect unique gift or a special treat for yourself.</p>
|
|
<div class="hero-actions">
|
|
<a href="#products" class="btn btn-primary">Shop Now</a>
|
|
<a href="#about-us" class="btn btn-secondary">Learn More</a>
|
|
</div>
|
|
</div>
|
|
<div class="hero-image-container">
|
|
<!-- Placeholder for a captivating image of handmade crafts -->
|
|
<div class="placeholder-image"></div>
|
|
</div>
|
|
</div>
|
|
</section> (see https://g.co/ng/security#xss)
|
|
</div>
|
|
<script>
|
|
// Simple script to ensure styles are applied
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Force a repaint to ensure styles are applied
|
|
document.body.style.display = 'none';
|
|
setTimeout(function() { document.body.style.display = ''; }, 10);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> (see https://g.co/ng/security#xss) |