API tools faq
paste
Advertisement
AtEchoOff

FriendlyFam Large Project Starter Code

AtEchoOff
Oct 15th, 2024
87
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 15.50 KB | None | 0 0
raw download clone embed print report
  1. ==============================style.css============================================================
  2. body {
  3.     background: #f0f0f0;
  4.     color: #333333;
  5.     margin-top: 5rem;
  6.     padding-top: 10px;
  7. }
  8.  
  9. h1, h2, h3, h4, h5, h6 {
  10.     color: #444444;
  11. }
  12.  
  13. .navbar {
  14.     background-color: #3680e5;
  15. }
  16.  
  17. .navbar-brand {
  18.     font-weight: bolder;
  19. }
  20.  
  21. .site-header .navbar-nav .nav-link {
  22.     color: white;
  23. }
  24.  
  25.     .site-header .navbar-nav .nav-link:hover {
  26.         color: #00e1ff;
  27.     }
  28.  
  29.     .site-header .navbar-nav .nav-link.active {
  30.         font-weight: 500;
  31.     }
  32. .logoColor {
  33.     color: #d7ab0d;
  34. }
  35. .welcomePage {
  36.     margin-top: 0px;
  37.     display: flex;
  38.     align-items: center;
  39.     justify-content: center;
  40.     height: 100%;
  41. }
  42.  
  43. .welcomePage > div {
  44.     width: 30%;
  45.     margin-right: 1%;
  46. }
  47.  
  48. .registration-form {
  49.     padding: 50px 0;
  50. }
  51.  
  52.     .registration-form form {
  53.         max-width: 800px;
  54.         padding: 50px 70px;
  55.         border-radius: 10px;
  56.         box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.2);
  57.         background-color: #fff;
  58.     }
  59.  
  60.         .registration-form form h3 {
  61.             font-weight: bold;
  62.             margin-bottom: 30px;
  63.         }
  64.  
  65.     .registration-form .item {
  66.         border-radius: 10px;
  67.         margin-bottom: 0px;
  68.         padding: 10px 20px;
  69.     }
  70.  
  71.     .registration-form .create-account {
  72.         border-radius: 30px;
  73.         padding: 10px 20px;
  74.         font-size: 18px;
  75.         font-weight: bold;
  76.         background-color: #3f93ff;
  77.         border: none;
  78.         color: white;
  79.         margin-top: 30px;
  80.     }
  81.  
  82. /* Displaying Events*/
  83. .events {
  84.     margin-top: 50px;
  85.     list-style: none;
  86. }
  87.  
  88.     .events > li {
  89.         position: relative;
  90.         margin-bottom: 30px;
  91.     }
  92.  
  93.         .events > li .details {
  94.             position: absolute;
  95.             top: -30px;
  96.             left: 100px;
  97.             width: 200px;
  98.         }
  99.  
  100.         .events > li .date {
  101.             width: 90px;
  102.             background: red;
  103.             color: white;
  104.             text-align: center;
  105.             border-radius: 8px;
  106.         }
  107.  
  108.             .events > li .date .day {
  109.                 text-transform: uppercase;
  110.                 font-size: 16px;
  111.                 font-weight: bold;
  112.                 padding: 2px 6px;
  113.             }
  114.  
  115.             .events > li .date .time {
  116.                 background: white;
  117.                 color: #808080;
  118.                 font-size: 15px;
  119.                 font-weight: bold;
  120.                 padding: 6px 12px;
  121.                 height: 80px;
  122.             }
  123.  
  124.         .events > li .details .host {
  125.             font-weight: bold;
  126.             display: block;
  127.         }
  128.  
  129.         .events > li .actions {
  130.             font-size: 15px;
  131.             display: none;
  132.         }
  133.  
  134.         .events > li:hover .actions {
  135.             display: block;
  136.         }
  137.  
  138. /* List Events Page-level styles*/
  139. .host {
  140.     margin-top: 30px;
  141.     /*list-style: none;*/
  142.     font-weight: bold;
  143. }
  144.     .host > li {
  145.         margin-bottom: 20px;
  146.         font-size: 20px;
  147.         width: 200px;
  148.     }
  149.  
  150. .btn {
  151.     font-size: 18px;
  152.     padding: 7px 20px;
  153.     border-radius: 9px;
  154.     margin-left: 8px;
  155.     margin-top: 10px;
  156.     height: 40px;
  157.     padding: 3px 3px;
  158. }
  159.  
  160. .navbar-expand-md .navbar-nav .nav-link {
  161.     padding-right: 2rem;
  162.     padding-left: 2rem;
  163.     padding-top: 0rem;
  164. }
  165.  
  166. .navbar-right-side {
  167.     padding-right: 2rem;
  168.     padding-left: 2rem;
  169.     color: #ffca0c;
  170. }
  171.  
  172. .form-control {
  173.     width: 100%;
  174.     margin-bottom: 15px;
  175. }
  176.  
  177.  
  178.  
  179. ==============================add.html============================================================
  180. {% extends "layout.html" %}
  181. {% block content %}
  182.  
  183. <div class="container">
  184.     <h2> Post an Event: </h2>
  185.  
  186.     <div class="container text-left">
  187.         <div class="inputbox-add-event" id="add-event">
  188.             <form method="POST" action="/add">
  189.                 <div class="form-group">
  190.                     <input class="form-control item" name="description" placeholder="Describe: e.g. Emily's Birthday Party" required>
  191.                     <input class="form-control item" name="day" placeholder="Date: e.g. Jan. 20" required>
  192.                     <input class="form-control item" name="time" placeholder="Time: e.g. 5:00 pm" required>
  193.                     <button class="btn btn-primary" id="event-submit" type="submit">Add Event </button>
  194.                 </div>
  195.             </form>
  196.         </div>
  197.  
  198.     </div>
  199.     <br>
  200.  
  201.  
  202. </div>
  203. {% endblock content %}
  204.  
  205. ==============================edit.html============================================================
  206. {% extends "layout.html" %}
  207. {% block content %}
  208.  
  209. <div class="container">
  210.     <h2> Edit an Event: </h2>
  211.  
  212.     <div class="container text-left">
  213.         <div class="inputbox-add-event" id="add-event">
  214.             <form method="POST" action="/update/{{event[0]}}">
  215.                 <div class="form-group">
  216.                     <input class="form-control item" name="description" placeholder="Describe: e.g. Emily's Birthday Party" required value="{{event[2]}}" >
  217.                     <input class="form-control item" name="day" placeholder="Date: e.g. Jan. 20" required value="{{event[3]}}" >
  218.                     <input class="form-control item" name="time" placeholder="Time: e.g. 5:00 pm" required value="{{event[4]}}" >
  219.                     <select class="form-control item" name="status" required>
  220.                         <option selected hidden>{{event[5]}}</option>
  221.                         <option value="Still on">Still on</option>
  222.                         <option value="Canceled">Canceled</option>
  223.                     </select>
  224.                     <button class="btn btn-primary" id="event-submit" type="submit">Submit </button>
  225.                 </div>
  226.             </form>
  227.         </div>
  228.  
  229.     </div>
  230.     <br>
  231.  
  232.  
  233. </div>
  234. {% endblock content %}
  235.  
  236. ==============================home.html============================================================
  237. {% extends "layout.html" %}
  238. {% block content %}
  239.  
  240. <div class="container">
  241.    <h2> All Events </h2>
  242.  
  243.    <ul class="events">
  244.        {% if list != "" %}
  245.            {% for event in list %}
  246.  
  247.                <li>
  248.                    <div class="date">
  249.                        <div class="day">{{event[3]}}</div>
  250.                        <div class="time">{{event[4]}}</div>
  251.                    </div>
  252.                    <div class="details">
  253.                        <span class="host">
  254.                            <a href="#">
  255.                                {{event[1]}}
  256.                            </a>
  257.                            {% if event[5] != "Canceled" %}
  258.                            <span class="badge badge-success">{{event[5]}}</span>
  259.  
  260.                            {% else %}
  261.                            <span class="badge badge-warning">{{event[5]}}</span>
  262.                            {% endif %}
  263.                        </span>
  264.                        <span class="description"> {{event[2]}}</span><br />
  265.                    </div>
  266.  
  267.                </li>
  268.  
  269.            {% endfor %}
  270.        {% endif %}
  271.    </ul>
  272.     </div>
  273. {% endblock content %}
  274.  
  275. ==============================index.html============================================================
  276. <html lang="en">
  277. <head>
  278.     <meta charset="UTF-8">
  279.     <title>Login</title>
  280.  
  281.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  282.     <link rel="stylesheet" href="/static/style.css" />
  283. </head>
  284. <body>
  285.     <div class="welcomePage">
  286.         <div>
  287.             <h1 class="logoColor"> FriendlyFam</h1>
  288.             <p style="font-size: 28px; font-weight: bold"> An app for family events</p>
  289.             <p style="font-size: 20px; color: grey"> Post an event or attend your friends family events! </p>
  290.         </div>
  291.         <div class="registration-form">
  292.             <form id="myform" action="/login" method="post" onsubmit="return validation()">
  293.                 <h3 class="text-center">Login</h3>
  294.  
  295.                 {% if message %}
  296.                 <p class="alert alert-danger">{{ message }}</p>
  297.                 {% endif %}
  298.  
  299.                 <div class="form-group">
  300.                     <input class="form-control item" type="text" name="username" id="username" placeholder="Username" onchange="validation()" value={{username}}>
  301.                     <span id="error_username"> </span>
  302.                 </div>
  303.  
  304.                 <div class="form-group">
  305.                     <input class="form-control item" type="password" name="password" id="password" placeholder="Password" onchange="validation()">
  306.                     <span id="error_password"> </span>
  307.                 </div>
  308.  
  309.                 <div class="form-group">
  310.                     <button class="btn btn-primary btn-block create-account" type="submit">Login</button>
  311.                 </div>
  312.  
  313.                 <hr />
  314.                 <p class="text-center">Need an account? <br /><a href="/signup"> Create Account</a></p>
  315.             </form>
  316.  
  317.         </div>
  318.    </div>
  319. </body>
  320. </html>
  321. ==============================layout.html============================================================
  322.  
  323. <!DOCTYPE html>
  324. <html>
  325. <head>
  326.     <!-- Required meta tags -->
  327.     <meta charset="utf-8">
  328.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  329.  
  330.     <title>Friendly Fam</title>
  331.  
  332.     <!-- Bootstrap CSS -->
  333.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  334.  
  335.     <link rel="stylesheet" type="text/css" href="/static/style.css">
  336.  
  337. </head>
  338. <body>
  339.     <header class="site-header">
  340.         <nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
  341.             <div class="container">
  342.                 <a class="navbar-brand mr-4" href="/">Friendly Fam</a>
  343.                 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
  344.                     <span class="navbar-toggler-icon"></span>
  345.                 </button>
  346.                 <div class="collapse navbar-collapse" id="navbarToggle">
  347.                     <div class="navbar-nav mr-auto">
  348.                         <a class="nav-item nav-link active" href="/">Home</a>
  349.                         <a class="nav-item nav-link" href="/myevents">Events - I posted</a>
  350.                         <a class="nav-item nav-link" href="/add">Post Event</a>
  351.                     </div>
  352.                     <!-- Navbar Right Side -->
  353.                     <div class="navbar-nav">
  354.                        
  355.                         {% if user != '' %}
  356.                                 <span class="navbar-right-side">Welcome, {{user}}   </span>
  357.                                 <a class="nav-item nav-link" href="/logout">Logout</a>
  358.                         {% endif %}
  359.                     </div>
  360.                 </div>
  361.             </div>
  362.         </nav>
  363.     </header>
  364.     <main role="main" class="container">
  365.         <div class="row">
  366.             <div class="col-md-8">
  367.                 {% block content %}{% endblock %}
  368.             </div>
  369.  
  370.         </div>
  371.     </main>
  372.  
  373.  
  374.     <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  375.     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  376.     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  377.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  378.    
  379. </body>
  380. </html>
  381.  
  382. ==============================myevents.html============================================================
  383. {% extends "layout.html" %}
  384. {% block content %}
  385.  
  386. <div class="container">
  387.     <h2> Events I'm Hosting: </h2>
  388.    
  389.     {% if list != "" %}
  390.     <ul class="events">
  391.  
  392.         {% for event in list %}
  393.  
  394.         <li>
  395.             <div class="date">
  396.                 <div class="day">{{event[3]}}</div>
  397.                 <div class="time">{{event[4]}}</div>
  398.             </div>
  399.             <div class="details">
  400.                 <span class="host">
  401.                     <a href="#">
  402.                         {{event[1]}}
  403.                     </a>
  404.                     {% if event[5] != "Canceled" %}
  405.                     <span class="badge badge-success">{{event[5]}}</span>
  406.  
  407.                     {% else %}
  408.                     <span class="badge badge-warning">{{event[5]}}</span>
  409.                     {% endif %}
  410.                 </span>
  411.                 <span class="description"> {{event[2]}}</span><br />
  412.  
  413.                 <div>
  414.                     <a href="/update/{{event[0]}}" class="btn btn-info">Edit</a>
  415.                     <a href="/cancel/{{event[0]}}" class="btn btn-danger">Cancel</a>
  416.                 </div>
  417.  
  418.  
  419.             </div>
  420.         </li>
  421.         {% endfor %}
  422.     </ul>
  423.     {% else %}
  424.         <p>You haven't posted an event yet!</p>
  425.     {% endif %}
  426.  
  427.  
  428. </div>
  429. {% endblock content %}
  430.  
  431. ==============================signup.html==============================
  432. <html lang="en">
  433. <head>
  434.     <meta charset="UTF-8">
  435.     <title>Login</title>
  436.  
  437.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  438.     <link rel="stylesheet" href="/static/style.css" />
  439. </head>
  440. <body>
  441.     <div class="welcomePage">
  442.         <div>
  443.             <h1 class="logoColor"> FriendlyFam</h1>
  444.             <p style="font-size: 28px; font-weight: bold"> An app for family events</p>
  445.             <p style="font-size: 20px; color: grey"> Post an event or attend your friends family events! </p>
  446.         </div>
  447.         <div class="registration-form">
  448.             <form id="myform" action="/signup" method="post" onsubmit="return validation()">
  449.                 <h3 class="text-center">Create your account</h3>
  450.  
  451.                 {% if message %}
  452.                 <p class="alert alert-danger">{{ message }}</p>
  453.                 {% endif %}
  454.  
  455.                 <div class="form-group">
  456.                     <input class="form-control item" type="text" name="username" id="username" placeholder="Username" onchange="validation()" value={{username}}>
  457.                     <span id="error_username"> </span>
  458.                 </div>
  459.  
  460.                 <div class="form-group">
  461.                     <input class="form-control item" type="password" name="password" id="password" placeholder="Password" onchange="validation()">
  462.                     <span id="error_password"> </span>
  463.                 </div>
  464.  
  465.                 <div class="form-group">
  466.                     <input class="form-control item" type="password" name="confirm-password" id="confirm_password" placeholder="confirm Password" onkeydown="validation()">
  467.                     <span id="error_confirm"> </span>
  468.                 </div>
  469.  
  470.                 <div class="form-group">
  471.                     <button class="btn btn-primary btn-block create-account" type="submit">Create Account</button>
  472.                 </div>
  473.                 <hr />
  474.                 <p class="text-center">Do you have an account already? <br /><a href="/login"> Login</a></p>
  475.  
  476.             </form>
  477.         </div>
  478.     </div>
  479. </body>
  480. </html>
  481.  
  482. ========================================================================================================================
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!