Skip to content

Instantly share code, notes, and snippets.

@Veraticus
Created June 14, 2013 05:10
Show Gist options
  • Select an option

  • Save Veraticus/5779594 to your computer and use it in GitHub Desktop.

Select an option

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>
@kauanrocha02670-dotcom
Copy link

index.html

<title>ChatPlay</title>
ChatPlay

ChatPlay

Home + Perfil

Avatar

username

Post

❤️ 💬 📤

0 curtidas

username legenda

    <script src="js/app.js"></script>

    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);
    });

    Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment