-
-
Save Veraticus/5779594 to your computer and use it in GitHub Desktop.
| <!Doctype HTML> | |
| <html> | |
| <head> | |
| <title>Google</title> | |
| <link rel="stylesheet" type="text/css" href="stylesheet.css"> | |
| <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'> | |
| </head> | |
| <body> | |
| <div id="logo"><img src="logo4w.png" height="95" width="275"/> | |
| </div> | |
| <form name="input" action="html_form_action.asp" method="get"> | |
| <input type="text" name="search"> | |
| <input type="submit" value="Submit"> | |
| </form> | |
| <div class="footer"> | |
| <div id="search">Google Search | |
| </div> | |
| <div id="lucky">I'm feeling lucky | |
| </div> | |
| <div id="ads">Advertising Programs | |
| </div> | |
| <div id="business">Business Solutions | |
| </div> | |
| <div id="privacy">Privacy & Terms | |
| </div> | |
| <div id="google+">+Google | |
| </div> | |
| <div id="about">About Google | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
| <?php | |
| /** | |
| * PHP ERRORS | |
| * | |
| * The php error reporting level. We want all significant errors to | |
| * be shown, including E_STRICT. We exclude E_DEPRECATED through, | |
| * because we need to use some deprecated functions to disable | |
| * certain PHP features that are deprecated but still work (think | |
| * magic_quotes). | |
| */ | |
| if (defined('E_DEPRECATED')) | |
| { | |
| error_reporting((E_ALL | E_STRICT) & ~E_DEPRECATED); | |
| } | |
| else | |
| { | |
| error_reporting(E_ALL | E_STRICT); | |
| } | |
| /** | |
| * CONSTANTS | |
| * | |
| * Mission-critical application and system constants are the first | |
| * thing to set up. These constants include: | |
| * | |
| * ROOTPATH - The full server path to the root folder | |
| * EXT - The file extension. Typically ".php" | |
| * SYSPATH - The full server path to the "system" folder | |
| * APPPATH - The full server path to the "application" folder | |
| * VENPATH - The full server path to the "vendors" folder | |
| */ | |
| define('ROOTPATH', dirname(__FILE__) . '/'); | |
| define('EXT', '.php'); | |
| define('SYSPATH', ROOTPATH . 'sys/'); | |
| define('APPPATH', ROOTPATH . 'app/'); | |
| define('VENPATH', ROOTPATH . 'vendors/'); | |
| if (!defined('CONTROLLERS')) // May already be set by test.php | |
| { | |
| define('CONTROLLERS', 'controllers/'); | |
| } | |
| if (defined('DEPLOY_CUSTOM_PATH')) | |
| { | |
| define('CUSPATH', DEPLOY_CUSTOM_PATH); | |
| } | |
| else | |
| { | |
| define('CUSPATH', ROOTPATH . 'custom/'); | |
| } | |
| if (defined('DEPLOY_EXPORT_PATH')) | |
| { | |
| define('EXPPATH', DEPLOY_EXPORT_PATH); | |
| } | |
| else | |
| { | |
| define('EXPPATH', ROOTPATH . 'exports/'); | |
| } | |
| if (!defined('DEPLOY_RESOURCE_URL')) | |
| { | |
| define('DEPLOY_RESOURCE_URL', ''); | |
| } | |
| /** | |
| * CORE HELPERS | |
| * | |
| * The next thing we do is to include some helpers that are required | |
| * during the boot process (and elsewhere in the framework or app) | |
| * or do some initializing work (setting up the PHP environment, for | |
| * instance). | |
| */ | |
| require_once(SYSPATH . 'boot/core.php'); | |
| require_once(SYSPATH . 'boot/errors.php'); | |
| require_once(SYSPATH . 'boot/str.php'); | |
| require_once(SYSPATH . 'boot/env.php'); | |
| require_once(SYSPATH . 'boot/os.php'); | |
| require_once(SYSPATH . 'boot/support.php'); | |
| /** | |
| * APP-SPECIFIC | |
| * | |
| * If the application-specific file exists, we load it and the app | |
| * can check its required dependencies, load and validate its config | |
| * file and so on. | |
| */ | |
| $application = APPPATH . 'boot/index.php'; | |
| if (file_exists($application)) | |
| { | |
| require_once $application; | |
| } | |
| /** | |
| * GIZMO | |
| * | |
| * After initializing the framework and letting the application check | |
| * its requirements, we load the actual Gizmo framework. | |
| */ | |
| require_once(SYSPATH . 'core/gizmo.php'); |
| <!Doctype HTML> | |
| <html> | |
| <head> | |
| <title>Google</title> | |
| <link rel="stylesheet" type="text/css" href="stylesheet.css"> | |
| <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'> | |
| </head> | |
| <body> | |
| <div id="blackmenu"> | |
| +Justine | |
| Search | |
| Images | |
| Maps | |
| Play | |
| YouTube | |
| News | |
| Gmail | |
| Drive | |
| Calendar | |
| More | |
| </div> | |
| <div id="login"> | |
| [email protected] | |
| </div> | |
| <div id="logo"><img src="logo4w.png" height="95" width="275"/> | |
| </div> | |
| <div id="searchForm"> | |
| <div class="row"> | |
| <form name="input" action="html_form_action.asp" method="get"> | |
| <input type="text" name="search"> | |
| </form> | |
| </div> | |
| </div> | |
| <div id="underSearch"> | |
| <div class="row"> | |
| <div id="search"><input type="submit" class="google" value="Google Search"> | |
| </div> | |
| <div id="lucky"><input type="submit" class="lucky" value="I'm Feeling Lucky"> | |
| </div> | |
| </div> | |
| <div id="text"> | |
| <div class="row">Heard about The Internship? <a href="http://www.google.com/students">Meet the real Google interns.</a></div> | |
| </div> | |
| </div> | |
| <div id="footer"> | |
| <div class="row"> | |
| <div id="ads">Advertising Programs | |
| </div> | |
| <div id="business">Business Solutions | |
| </div> | |
| <div id="privacy">Privacy & Terms | |
| </div> | |
| <div id="google+">+Google | |
| </div> | |
| <div id="about">About Google | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
belal551
commented
Oct 1, 2025
index.htm1
<nav class="nav">
<a href="#products">Candles</a>
<a href="#about">About</a>
<a href="#instagram">Instagram</a>
<a href="#contact">Contact</a>
</nav>
<div class="header-right">
<button id="themeToggle" class="icon-btn" aria-label="Toggle dark mode">🌓</button>
<button id="cartBtn" class="icon-btn" aria-label="Open cart">🛒 <span id="cartCount">0</span></button>
</div>
Your Cart
✕ <div class="hero-overlay">
<h1>Hand-poured Soy Candles</h1>
<p class="lead">Minimal • Aesthetic • Natural — crafted for cozy corners.</p>
<div class="hero-cta">
<a href="#products" class="btn primary">Shop Bestsellers</a>
<button id="heroShopAll" class="btn ghost">View All Candles</button>
</div>
</div>
</section>
<!-- PRODUCTS -->
<section id="products" class="section products reveal">
<div class="section-head">
<h2>Our Collection</h2>
<p>Eco-friendly soy wax, cotton wicks, and thoughtfully blended fragrances.</p>
</div>
<div id="productGrid" class="grid">
<!-- Product cards inserted by JS. There are 6 products by default. -->
</div>
</section>
<!-- ABOUT -->
<section id="about" class="section about reveal">
<div class="two-col">
<div>
<h2>About AromaNest</h2>
<p>
AromaNest started as a tiny bedside experiment — now we pour small-batch, non-toxic soy candles with
calming scent blends made from essential oils. We focus on minimal design and intentional moments.
</p>
<ul class="features">
<li>100% Soy Wax</li>
<li>Phthalate-free Fragrances</li>
<li>Hand-poured in small batches</li>
</ul>
</div>
<div class="about-image" aria-hidden="true">
<img src="https://i.imgur.com/o5T8kUX.png" alt="Candles styled" />
</div>
</div>
</section>
<!-- INSTAGRAM FEED (simple grid) -->
<section id="instagram" class="section instagram reveal">
<h2>From Our Instagram</h2>
<p>Follow @aromanest_candles for behind-the-scenes and styling ideas.</p>
<div class="ig-grid" id="igGrid">
<!-- grid populated by JS (images link to Instagram) -->
</div>
<div class="ig-cta">
<a href="https://instagram.com" target="_blank" class="btn ghost">Follow on Instagram</a>
</div>
</section>
<!-- NEWSLETTER -->
<section class="section newsletter reveal">
<div class="newsletter-card">
<div>
<h3>Join our cozy list</h3>
<p>Get exclusive early releases and 10% off your first order.</p>
</div>
<form id="newsletterForm" class="newsletter-form" novalidate>
<input id="newsletterEmail" type="email" placeholder="Your email" required />
<button type="submit" class="btn primary">Subscribe</button>
</form>
<p class="newsletter-note" id="newsletterNote" aria-live="polite"></p>
</div>
</section>
<!-- CONTACT / FOOTER -->
<section id="contact" class="section contact reveal">
<div class="two-col">
<div>
<h2>Contact</h2>
<p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
<p>Instagram: <a href="https://instagram.com/aromanest_candles" target="_blank">@aromanest_candles</a></p>
</div>
<div>
<h3>Quick Questions?</h3>
<form id="contactForm" class="contact-form" novalidate>
<input id="contactName" type="text" placeholder="Your name" required />
<input id="contactEmail" type="email" placeholder="Email" required />
<textarea id="contactMessage" placeholder="Message" rows="4" required></textarea>
<button type="submit" class="btn primary">Send</button>
<p class="form-note" id="contactNote" aria-live="polite"></p>
</form>
</div>
</div>
</section>
<!-- CHECKOUT MODAL -->
<div id="checkoutModal" class="modal" aria-hidden="true">
<div class="modal-content">
<button id="closeCheckout" class="close-btn">✕</button>
<h3>Checkout</h3>
<div id="checkoutSummary" class="checkout-summary">
<!-- populated by JS -->
</div>
<form id="checkoutForm" class="checkout-form" novalidate>
<div class="form-row">
<input id="custName" name="name" type="text" placeholder="Full name" required />
<input id="custEmail" name="email" type="email" placeholder="Email" required />
</div>
<div class="form-row">
<input id="custPhone" name="phone" type="tel" placeholder="Phone" required />
<input id="custPostal" name="postal" type="text" placeholder="Pincode / ZIP" required />
</div>
<textarea id="custAddress" name="address" placeholder="Shipping address" rows="3" required></textarea>
<div class="payment-methods">
<label><input type="radio" name="payment" value="cod" checked /> Cash on Delivery</label>
<label><input type="radio" name="payment" value="upi" /> UPI (mock)</label>
<label><input type="radio" name="payment" value="card" /> Card (mock)</label>
</div>
<div class="checkout-actions">
<button type="submit" class="btn primary">Place Order</button>
<button id="checkoutCancel" type="button" class="btn ghost">Cancel</button>
</div>
<p id="checkoutNote" class="form-note" aria-live="polite"></p>
</form>
</div>
</div>
© AromaNest — Hand-poured soy candles
index.html
<title>ChatPlay</title> Home + Perfil username0 curtidas
username legenda
css/style.css
:root {
--bg: #fafafa;
--border: #dbdbdb;
--primary: #ff0050;
--text: #262626;
}
- { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: Arial, sans-serif;
background: var(--bg);
color: var(--text);
}
header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem 1rem;
border-bottom: 1px solid var(--border);
background: #fff;
position: sticky;
top: 0;
z-index: 9;
}
.logo { display:flex; align-items:center; gap:.4rem; }
.logo img { height: 28px; }
.search { padding:.4rem .6rem; border:1px solid var(--border); border-radius:4px; }
nav { display:flex; gap:.5rem; }
nav button { background:var(--primary); color:#fff; border:none; padding:.5rem 1rem; border-radius:4px; cursor:pointer; }
#feed { max-width: 600px; margin: 1rem auto; }
.post {
background: #fff;
border: 1px solid var(--border);
border-radius: 8px;
margin-bottom: 1rem;
}
.post-header {
display: flex;
align-items: center;
gap: .5rem;
padding: .7rem;
}
.avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.post-img { width: 100%; display: block; }
.actions { display: flex; gap: .8rem; padding: .5rem .7rem; }
.actions button { background: none; border: none; font-size: 1.3rem; cursor: pointer; }
.likes, .caption, .comments { padding: 0 .7rem 0.5rem; font-size: 0.9rem; }
.addComment {
width: 100%;
border: none;
border-top: 1px solid var(--border);
padding: .7rem;
}
footer { text-align:center; padding:1rem; font-size:.8rem; color:#999; }
js/app.js
const feed = document.getElementById('feed');
const tpl = document.getElementById('postTemplate');
// dados fake
const posts = [
{
user: 'aninha_fit',
avatar: 'img/avatar1.jpg',
img: 'img/post1.jpg',
caption: 'Treino concluído! 💪',
likes: 137,
comments: ['Arrasou!', 'Top demais']
}
];
// renderizar posts
posts.forEach(p => {
const clone = tpl.content.cloneNode(true);
clone.querySelector('.avatar').src = p.avatar;
clone.querySelector('.username').textContent = p.user;
clone.querySelector('.post-img').src = p.img;
clone.querySelector('.caption').innerHTML = <strong>${p.user}</strong> ${p.caption};
clone.querySelector('.likes').textContent = ${p.likes} curtidas;
const ul = clone.querySelector('.comments');
p.comments.forEach(c => {
const li = document.createElement('li');
li.textContent = c;
ul.appendChild(li);
});
// curtir
clone.querySelector('.likeBtn').addEventListener('click', e => {
const likesEl = e.target.closest('.post').querySelector('.likes');
let num = parseInt(likesEl.textContent);
likesEl.textContent = ${++num} curtidas;
});
// comentar (live)
const input = clone.querySelector('.addComment');
input.addEventListener('keydown', e => {
if (e.key === 'Enter' && input.value.trim()) {
const li = document.createElement('li');
li.textContent = input.value.trim();
ul.appendChild(li);
input.value = '';
}
});
feed.appendChild(clone);
});
