devol
/
LinkStack
mirror of https://github.com/LinkStackOrg/LinkStack.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
LinkStack/resources/views/littlelink.blade.php

138 lines
6.6 KiB
PHP
Raw Normal View History

admin littlelink
2021-04-16 01:00:00 +02:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>{{ $littlelink_name }} 🔗 {{ config('app.name') }} </title>
!! update page links blade !!
2021-07-06 10:49:29 +02:00
<meta name="description" content="{{ $userinfo->littlelink_description }}">
<meta name="author" content="{{ $userinfo->name }}">
admin littlelink
2021-04-16 01:00:00 +02:00
<meta name="viewport" content="width=device-width, initial-scale=1">
Added support for social media preview This shows a preview for Name, Bio and avatar image of users profiles if shared on social sites like Facebook,  Twitter, Facebook Messenger, WhatsApp, Discord, Pinterest and many more.
2022-02-12 14:59:07 +01:00
<!--#### BEGIN Meta Tags social media preview images ####-->
<!-- This shows a preview for title, description and avatar image of users profiles if shared on social media sites -->
<!-- Facebook Meta Tags -->
Fixed bug/simplified setup Fixed bug where users littlelink pages (domain.com/@username) would display a 404 error. This was caused due to the .env config file not containing an App URL. This issue could be solved by simply adding a URL to the config, this is now not necessary anymore, making the setup process easier and less confusing.  I changed every instance of "{{ config('app.url') }}" to  "{{ url(' ') }}". This effectively automatically uses the correct URL for LittleLink links, even if LittleLink Custom is set up in a subdirectory. In my testing, I couldn't find any problems this might have caused, so this appears to do the job just as well as setting the URL in the config. If I find any issues with this, I will revert this change.
2022-02-27 19:33:19 +01:00
<meta property="og:url" content="{{ url('') }}/@littlelink_name">
Added support for social media preview This shows a preview for Name, Bio and avatar image of users profiles if shared on social sites like Facebook,  Twitter, Facebook Messenger, WhatsApp, Discord, Pinterest and many more.
2022-02-12 14:59:07 +01:00
<meta property="og:type" content="website">
<meta property="og:title" content="{{ $userinfo->littlelink_name }}">
<meta property="og:description" content="{{ $userinfo->littlelink_description }}">
Change public path This is one of multiple public path edits. For simplified usability, I am integrating the public Laravel directory into the root directory.  For this, I am changing every instance of 'public_path' to 'base_path' and will use this format in future changes as well.
2022-02-14 12:54:51 +01:00
@if(file_exists(base_path("img/$littlelink_name" . ".png" )))
Added support for social media preview This shows a preview for Name, Bio and avatar image of users profiles if shared on social sites like Facebook,  Twitter, Facebook Messenger, WhatsApp, Discord, Pinterest and many more.
2022-02-12 14:59:07 +01:00
<meta property="og:image" content="{{ asset("img/$littlelink_name" . ".png") }}">
@else
Changed logo As part of the new logo (https://github.com/JulianPrieber/littlelink-custom/milestone/1) I'm now using the new 'logo.svg' vector logo. For this, I added an if-else statement in most cases, which first check for a custom logo uploaded by the admin or the avatar of an individual user. If the image doesn't exist, the default logo (logo.svg) is used.
2022-02-20 13:12:25 +01:00
<meta property="og:image" content="{{ asset('littlelink/images/logo.svg') }}">
Added support for social media preview This shows a preview for Name, Bio and avatar image of users profiles if shared on social sites like Facebook,  Twitter, Facebook Messenger, WhatsApp, Discord, Pinterest and many more.
2022-02-12 14:59:07 +01:00
@endif
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
Fixed bug/simplified setup Fixed bug where users littlelink pages (domain.com/@username) would display a 404 error. This was caused due to the .env config file not containing an App URL. This issue could be solved by simply adding a URL to the config, this is now not necessary anymore, making the setup process easier and less confusing.  I changed every instance of "{{ config('app.url') }}" to  "{{ url(' ') }}". This effectively automatically uses the correct URL for LittleLink links, even if LittleLink Custom is set up in a subdirectory. In my testing, I couldn't find any problems this might have caused, so this appears to do the job just as well as setting the URL in the config. If I find any issues with this, I will revert this change.
2022-02-27 19:33:19 +01:00
<meta property="twitter:domain" content="{{ url('') }}/@littlelink_name">
<meta property="twitter:url" content="{{ url('') }}/@littlelink_name">
Added support for social media preview This shows a preview for Name, Bio and avatar image of users profiles if shared on social sites like Facebook,  Twitter, Facebook Messenger, WhatsApp, Discord, Pinterest and many more.
2022-02-12 14:59:07 +01:00
<meta name="twitter:title" content="{{ $userinfo->littlelink_name }}">
<meta name="twitter:description" content="{{ $userinfo->littlelink_description }}">
Change public path This is one of multiple public path edits. For simplified usability, I am integrating the public Laravel directory into the root directory.  For this, I am changing every instance of 'public_path' to 'base_path' and will use this format in future changes as well.
2022-02-14 12:54:51 +01:00
@if(file_exists(base_path("img/$littlelink_name" . ".png" )))
Added support for social media preview This shows a preview for Name, Bio and avatar image of users profiles if shared on social sites like Facebook,  Twitter, Facebook Messenger, WhatsApp, Discord, Pinterest and many more.
2022-02-12 14:59:07 +01:00
<meta name="twitter:image" content="{{ asset("img/$littlelink_name" . ".png") }}">
@else
Changed logo As part of the new logo (https://github.com/JulianPrieber/littlelink-custom/milestone/1) I'm now using the new 'logo.svg' vector logo. For this, I added an if-else statement in most cases, which first check for a custom logo uploaded by the admin or the avatar of an individual user. If the image doesn't exist, the default logo (logo.svg) is used.
2022-02-20 13:12:25 +01:00
<meta name="twitter:image" content="{{ asset('littlelink/images/logo.svg') }}">
Added support for social media preview This shows a preview for Name, Bio and avatar image of users profiles if shared on social sites like Facebook,  Twitter, Facebook Messenger, WhatsApp, Discord, Pinterest and many more.
2022-02-12 14:59:07 +01:00
@endif
<!--#### END Meta Tags social media preview images ####-->
!! update page links blade !!
2021-07-06 10:49:29 +02:00
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,600,800&display=swap" rel="stylesheet">
admin littlelink
2021-04-16 01:00:00 +02:00
<link rel="stylesheet" href="{{ asset('littlelink/css/normalize.css') }}">
<link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-light.css') }}">
<link rel="stylesheet" href="{{ asset('littlelink/css/brands.css') }}">
Added button animation littlelink Added hover button animation to littlelink.blade.php. - Included hover-min.css for animation - Added class 'button hvr-grow' to all buttons - Added class 'hvr-icon-wobble-vertical' to all buttons (for icon animation) - Added class 'hvr-icon' to all icons (to indicate icon to hover-min.css) Read more on how to use and change animations here: https://github.com/IanLunn/Hover/blob/master/README.md Try a demo of the added animations here: https://julianprieber.github.io/littlelink-admin-demo/
2022-02-12 19:24:01 +01:00
<link rel="stylesheet" href="{{ asset('littlelink/css/hover-min.css') }}">
Added button entrance animation Live demo: https://julianprieber.github.io/littlelink-admin-demo/button-entrance.html Added an entrance animation for buttons on littlelink.blade.php. This animation was made by the Animate.css project (https://github.com/animate-css/animate.css). Each button entrance animation lasts 100ms. Every button after the first adds 100ms to the value of the previous button i.e. button 1 loads after 100ms, button 2 loads after 200ms,  button 3 after 300ms and so on... Timings for the buttons can be changed in /littlelink/css/animate.css I put every button in a separate <div> Tag, so the animation wouldn't in interfere with the existing hover animation. Likewise, I removed all <br> Tags.
2022-02-17 22:09:58 +01:00
<link rel="stylesheet" href="{{ asset('littlelink/css/animate.css') }}">
fixed logo.svg
2022-02-20 13:20:21 +01:00
@if(file_exists(base_path("littlelink/images/avatar.png" )))
<link rel="icon" type="image/png" href="{{ asset('littlelink/images/avatar.png') }}">
@else
<link rel="icon" type="image/svg+xml" href="{{ asset('littlelink/images/logo.svg') }}">
@endif
!! update page links blade !!
2021-07-06 10:49:29 +02:00
<style>
.container { max-width: 1080px !important; }
.button-title {
color: white !important;
background: #505050 !important;
height: auto !important;
line-height: 28px !important;
width: auto !important;
padding: 10px !important;
min-width: 300px !important;
}
@media (max-width: 767px) {
}
</style>
Added dark mode detection Added automatic dark mode detection to littlelink.blade.php via a cookie with js.cookie.min.js (see previous commit). Detecting the dark mode setting is done with JavaScript. The script detects the preferred dark mode setting in the client's browser and saves it with a cookie. If the script detects a change in this setting, it corrects the cookie. Loading the appropriate skeleton.css is done via PHP with an if-else statement. If the cookie (saved by the previous script) color scheme equals 'dark' it will load skeleton-dark.css (found in /littlelink/css). If dark mode is not detected OR nothing is detected/cookie is getting blocked, the statement defaults to skeleton-light.css (also found in /littlelink/css). You could change what the if-else statement defaults to (i.e. which color scheme is loaded if the cookie fails to detect) by switching 'skeleton-dark.css' and 'skeleton-light.css' around (see comment in if statement). Everything added is commented and marked with begin/end. Credit to 'user1575941' on Stack Overflow who's commented code REALLY helped getting behind all this.
2022-02-18 10:10:13 +01:00
<!-- begin dark mode detection -->
<script src="{{ asset('littlelink/js/js.cookie.min.js') }}"></script>
<script>
// code to set the `color_scheme` cookie
var $color_scheme = Cookies.get("color_scheme");
function get_color_scheme() {
return (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
}
function update_color_scheme() {
Cookies.set("color_scheme", get_color_scheme());
}
// read & compare cookie `color-scheme`
if ((typeof $color_scheme === "undefined") || (get_color_scheme() != $color_scheme))
update_color_scheme();
// detect changes and change the cookie
if (window.matchMedia)
window.matchMedia("(prefers-color-scheme: dark)").addListener( update_color_scheme );
</script>
<?php // loads dark mode CSS if dark mode detected
$color_scheme = isset($_COOKIE["color_scheme"]) ? $_COOKIE["color_scheme"] : false; ?>
@if ($color_scheme == 'dark')
<!-- switch the two <link> Tags below to default to dark mode if cookie detection fails -->
<link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-dark.css') }}">
@else
<link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-light.css') }}">
@endif
<!-- end dark mode detection -->
admin littlelink
2021-04-16 01:00:00 +02:00
</head>
<body>
<div class="container">
<div class="row">
update auth header logo link and page margin top-bottom
2021-07-06 11:42:39 +02:00
<div class="column" style="margin-top: 5%">
admin littlelink
2021-04-16 01:00:00 +02:00
<!-- Your Image Here -->
Change public path This is one of multiple public path edits. For simplified usability, I am integrating the public Laravel directory into the root directory.  For this, I am changing every instance of 'public_path' to 'base_path' and will use this format in future changes as well.
2022-02-14 12:54:51 +01:00
@if(file_exists(base_path("img/$littlelink_name" . ".png" )))
Added fadein animation to text and avatar Added 'fadein' class to avatar image, littlelink_name and littlelink_description text. This class adds the fade-in animation from 'animate.css' found in /littlelink/css/.
2022-02-22 12:48:43 +01:00
<img class="rounded-avatar fadein" src="{{ asset("img/$littlelink_name" . ".png") }}" width="100px" height="100px">
Fixed elseif Fixed new elseif statements by changing: "if if" to "if elseif"
2022-02-20 15:42:45 +01:00
@elseif(file_exists(base_path("littlelink/images/avatar.png" )))
Added fadein animation to text and avatar Added 'fadein' class to avatar image, littlelink_name and littlelink_description text. This class adds the fade-in animation from 'animate.css' found in /littlelink/css/.
2022-02-22 12:48:43 +01:00
<img class="rounded-avatar fadein" src="{{ asset('littlelink/images/avatar.png') }}" srcset="{{ asset('littlelink/images/avatar@2x.png 2x') }}" width="100px" height="100px">
Changed logo As part of the new logo (https://github.com/JulianPrieber/littlelink-custom/milestone/1) I'm now using the new 'logo.svg' vector logo. For this, I added an if-else statement in most cases, which first check for a custom logo uploaded by the admin or the avatar of an individual user. If the image doesn't exist, the default logo (logo.svg) is used.
2022-02-20 13:12:25 +01:00
@else
Added fadein animation to text and avatar Added 'fadein' class to avatar image, littlelink_name and littlelink_description text. This class adds the fade-in animation from 'animate.css' found in /littlelink/css/.
2022-02-22 12:48:43 +01:00
<img class="rounded-avatar fadein" src="{{ asset('littlelink/images/logo.svg') }}" srcset="{{ asset('littlelink/images/avatar@2x.png 2x') }}" width="100px" height="100px">
admin littlelink
2021-04-16 01:00:00 +02:00
@endif
@foreach($information as $info)
<!-- Your Name -->
Added fadein animation to text and avatar Added 'fadein' class to avatar image, littlelink_name and littlelink_description text. This class adds the fade-in animation from 'animate.css' found in /littlelink/css/.
2022-02-22 12:48:43 +01:00
<h1 class="fadein">{{ $info->littlelink_name }}</h1>
admin littlelink
2021-04-16 01:00:00 +02:00
<!-- Short Bio -->
Added fadein animation to text and avatar Added 'fadein' class to avatar image, littlelink_name and littlelink_description text. This class adds the fade-in animation from 'animate.css' found in /littlelink/css/.
2022-02-22 12:48:43 +01:00
<p class="fadein">{{ $info->littlelink_description }}</p>
admin littlelink
2021-04-16 01:00:00 +02:00
@endforeach
Added button entrance animation Live demo: https://julianprieber.github.io/littlelink-admin-demo/button-entrance.html Added an entrance animation for buttons on littlelink.blade.php. This animation was made by the Animate.css project (https://github.com/animate-css/animate.css). Each button entrance animation lasts 100ms. Every button after the first adds 100ms to the value of the previous button i.e. button 1 loads after 100ms, button 2 loads after 200ms,  button 3 after 300ms and so on... Timings for the buttons can be changed in /littlelink/css/animate.css I put every button in a separate <div> Tag, so the animation wouldn't in interfere with the existing hover animation. Likewise, I removed all <br> Tags.
2022-02-17 22:09:58 +01:00
admin littlelink
2021-04-16 01:00:00 +02:00
<!-- Buttons -->
Added button entrance animation Live demo: https://julianprieber.github.io/littlelink-admin-demo/button-entrance.html Added an entrance animation for buttons on littlelink.blade.php. This animation was made by the Animate.css project (https://github.com/animate-css/animate.css). Each button entrance animation lasts 100ms. Every button after the first adds 100ms to the value of the previous button i.e. button 1 loads after 100ms, button 2 loads after 200ms,  button 3 after 300ms and so on... Timings for the buttons can be changed in /littlelink/css/animate.css I put every button in a separate <div> Tag, so the animation wouldn't in interfere with the existing hover animation. Likewise, I removed all <br> Tags.
2022-02-17 22:09:58 +01:00
<?php $initial=1; // <-- Effectively sets the initial loading time of the buttons. This value should be left at 1. ?>
admin littlelink
2021-04-16 01:00:00 +02:00
@foreach($links as $link)
add new brand: tiktok, email
2021-05-22 15:37:18 +02:00
@php $linkName = str_replace('default ','',$link->name) @endphp
!! update page links blade !!
2021-07-06 10:49:29 +02:00
@if($link->button_id === 0)
Added button entrance animation Live demo: https://julianprieber.github.io/littlelink-admin-demo/button-entrance.html Added an entrance animation for buttons on littlelink.blade.php. This animation was made by the Animate.css project (https://github.com/animate-css/animate.css). Each button entrance animation lasts 100ms. Every button after the first adds 100ms to the value of the previous button i.e. button 1 loads after 100ms, button 2 loads after 200ms,  button 3 after 300ms and so on... Timings for the buttons can be changed in /littlelink/css/animate.css I put every button in a separate <div> Tag, so the animation wouldn't in interfere with the existing hover animation. Likewise, I removed all <br> Tags.
2022-02-17 22:09:58 +01:00
<div style="--delay: {{ $initial++ }}s" class="button-entrance"><a class="button button-title button hvr-grow hvr-icon-wobble-vertical" href="{{ route('clickNumber') . '/' . $link->id . '/' . $link->link}}" target="_blank">
{{ $link->title }}</a></div>
Added rounded avatar Added class 'rounded-avatar' to avatar images
2022-02-11 22:01:03 +01:00
@elseif($link->name === "custom")
Added button entrance animation Live demo: https://julianprieber.github.io/littlelink-admin-demo/button-entrance.html Added an entrance animation for buttons on littlelink.blade.php. This animation was made by the Animate.css project (https://github.com/animate-css/animate.css). Each button entrance animation lasts 100ms. Every button after the first adds 100ms to the value of the previous button i.e. button 1 loads after 100ms, button 2 loads after 200ms,  button 3 after 300ms and so on... Timings for the buttons can be changed in /littlelink/css/animate.css I put every button in a separate <div> Tag, so the animation wouldn't in interfere with the existing hover animation. Likewise, I removed all <br> Tags.
2022-02-17 22:09:58 +01:00
<div style="--delay: {{ $initial++ }}s" class="button-entrance"><a class="button button-{{ $link->name }} button hvr-grow hvr-icon-wobble-vertical" href="{{ route('clickNumber') . '/' . $link->id . '/' . $link->link}}" target="_blank"><img class="icon hvr-icon" src="{{ asset('\/littlelink/icons\/') . $linkName }}.svg">{{ $link->title }}</a></div>
!! update page links blade !!
2021-07-06 10:49:29 +02:00
@else
Added button entrance animation Live demo: https://julianprieber.github.io/littlelink-admin-demo/button-entrance.html Added an entrance animation for buttons on littlelink.blade.php. This animation was made by the Animate.css project (https://github.com/animate-css/animate.css). Each button entrance animation lasts 100ms. Every button after the first adds 100ms to the value of the previous button i.e. button 1 loads after 100ms, button 2 loads after 200ms,  button 3 after 300ms and so on... Timings for the buttons can be changed in /littlelink/css/animate.css I put every button in a separate <div> Tag, so the animation wouldn't in interfere with the existing hover animation. Likewise, I removed all <br> Tags.
2022-02-17 22:09:58 +01:00
<div style="--delay: {{ $initial++ }}s" class="button-entrance"><a class="button button-{{ $link->name }} button hvr-grow hvr-icon-wobble-vertical" href="{{ route('clickNumber') . '/' . $link->id . '/' . $link->link}}" target="_blank"><img class="icon hvr-icon" src="{{ asset('\/littlelink/icons\/') . $linkName }}.svg">{{ ucfirst($linkName) }}</a></div>
!! update page links blade !!
2021-07-06 10:49:29 +02:00
@endif
admin littlelink
2021-04-16 01:00:00 +02:00
@endforeach
@include('layouts.footer')
</div>
</div>
</div>
</body>
Added support for social media preview This shows a preview for Name, Bio and avatar image of users profiles if shared on social sites like Facebook,  Twitter, Facebook Messenger, WhatsApp, Discord, Pinterest and many more.
2022-02-12 14:59:07 +01:00
</html>